/*------------------------------------------------------------------

  Project: Oras
  Author: Upsqode
  Last change: 25/08/2022 [Change Background Image]
  Primary use: Coming Soon Single page 

------------------------------------------------------------------ */

/*------------------------------------------------------------------

                      [Table of contents]

1.Default CSS 
2.Header CSS
3.Main Content CSS
4.Counter Shape CSS
5.Contact Us CSS 
6.Layout Three CSS 
7.Dark Theme CSS
8.Primary + Solid Theme CSS 
9.Background Image Theme CSS
10.Background Animation Theme CSS
11.Background Video Theme CSS 
12.Background Cursor Effect CSS
13.Heading Animation CSS 
                   
------------------------------------------------------------------ */

/*------------------------ [Color codes] ------------------------

Background:       #ffffff 
Dark Background:  #000000
Content:          #808080  
Solid Primary Background: #6F39FD

a (visited) :  #000000
a (standard):  #000000   
a (hover)   :  #1BBCFE  
a (active)  :  #1BBCFE

------------------------------------------------------------------ */


/************************* 1.Default CSS **************************/

body {
	background-color: #ffffff;
	color: #000000;
	font-size: 18px;
	line-height: 30px;
	position: relative;
	font-family: 'Mulish', sans-serif;
	font-weight: 500;
  overflow: hidden;
}
section {
	position: relative;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  z-index: 2;
}
li {
  list-style-type: none;
}
.header {
	height: auto;
	width: 100%;
	padding: 40px 28px;
}
.oras-logo img {
	width: auto;
	height: 50px;
}
.ora-sm-des {
	color: #808080;
}
.sm-text {
	font-weight: 700;
	font-size: 14px;
	line-height: 18px;
}
.main-title.yellow-text {
  color: #FFC700;
}
.counter-shape.square_note.w-border {
  border: 2px solid #ffffff;
  border-top: 8px solid #1BBCFE
}
.form-control:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
}
.page-logo {
  z-index: 5;
}
a:focus, a {
  outline: none;
  text-decoration: none;
  color: #000000;
}
a:hover {
  color: #000000;
}
.email-subscription.w-strock .form-control{
  border: 2px solid #fff;
}
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
  max-height: 50%; height: 50%;
}

::-webkit-scrollbar-button {
  height: 12px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgb(83 80 80 / 0.2);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.3);
}

/************************* 2.Header CSS **************************/

.navbar-icon {
  padding: 40px;
}
.toggle {
  overflow: hidden;
  display: flex;
  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;
  align-items: flex-end;
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  flex-direction:column;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
}
.menu-bar {
  z-index: 24;
}
.sidebar-btn span{
  background: #000;
  border-radius:10px;
  height:2px;
  margin: 4px 0;
  transition:.4s cubic-bezier(0.68, -0.6, 0.32, 1.6);
  -moz-transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
  -o-transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
  -ms-transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
  -webkit-transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
  position: relative;
}
.sidebar-btn:hover {
  cursor: pointer;
}
.sidebar-btn span:nth-of-type(1){
  width: 7%;
  transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  -o-transform: translateX(-8px);
  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  -o-transition-delay: 0s;
  z-index: 1;
}
.sidebar-btn span:nth-of-type(2){
  width: 7%;
  transform: translateY(0px) translateX(-8px);
  -moz-transform: translateY(0px) translateX(-8px);
  -o-transform: translateY(0px) translateX(-8px);
  -ms-transform: translateY(0px) translateX(-8px);
  -webkit-transform: translateY(0px) translateX(-8px);
  z-index: 1;
}
.sidebar-btn span:nth-of-type(3){
  width: 7%;
  transform: translateX(-8px);
  -moz-transform: translateX(-8px);
  -o-transform: translateX(-8px);
  -ms-transform: translateX(-8px);
  -webkit-transform: translateX(-8px);
  z-index: 1;
}
.toggle.is-active {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition-delay: 0.6s;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
}
.toggle.is-active span:nth-of-type(1) {
  width: 8%;
  height: 2px;
  transform: rotate(45deg) translateY(14px);
  -moz-transform: rotate(45deg) translateY(14px);
  -o-transform: rotate(45deg) translateY(14px);
  -ms-transform: rotate(45deg) translateY(14px);
  -webkit-transform: rotate(45deg) translateY(14px);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  z-index: 75;
}
.toggle.is-active span.w-back:nth-of-type(1),.toggle.is-active span.w-back:nth-of-type(3) {
  background: #000;
}
.toggle.is-active span:nth-of-type(2) {
  width: 0px;
}
.toggle.is-active span:nth-of-type(3) {
  width: 8%;
  height: 2px;
  z-index: 75;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transform: translateX(-9px) translateY(-12px) rotate(135deg);
  -moz-transform: translateX(-9px) translateY(-12px) rotate(135deg);
  -o-transform: translateX(-9px) translateY(-12px) rotate(135deg);
  -ms-transform: translateX(-9px) translateY(-12px) rotate(135deg);
  -webkit-transform: translateX(-9px) translateY(-12px) rotate(135deg);
}

.ora_about_us.main_side {
	position: fixed;
	width: 475px;
	height: 100vh;
  right: -722px;
  background: #ffffff;
  transition: right 0.4s ease-in-out;
  -moz-transition: right 0.4s ease-in-out;
  -o-transition: right 0.4s ease-in-out;
  -ms-transition: right 0.4s ease-in-out;
  -webkit-transition: right 0.4s ease-in-out;
  overflow-y: auto;
  top: 0;
  padding: 110px 40px;	
}
.ora_about_us.main_side.show{
  right: 0px;
  z-index: 24;
}
.sidebar-title {
	font-weight: 700;
	font-size: 24px;
	color: #000000;
	vertical-align: middle;
}
.sidebar-desc {
	font-size: 16px;
	line-height: 26px;
	color: #808080;
	padding: 20px 0;
}
.choose_us,.mission,.vision {
	padding-top: 20px;
}
.choose_us {
  padding-top: 25px;
}
.sidebar-icon {
	padding-right: 15px;
}
.ora-title {
	font-weight: 1000;
	font-size: 36px;
	line-height: 45px;
  color: #000000;
} 
.ora_element.is-open:before, .ora_element.open:before {
  background: rgba(0, 0, 0, 0.6);
  content: "";
  position: fixed;
  z-index: 11;
  left: 0;
  width: 100%;
  height: 100%;
}
.choose_description, .mission_description {
  border-bottom: 2px solid #F5F5F5;
}

.header_row {
  display: flex;
  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

.widget_sturdyfix_core_side_area_opener {
  text-align: right;
}

.sidebar_open_icon {
  color: #ffffff;
}

.qodef-opener-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  transition: all .3s ease-out;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
}

.qodef-opener-icon.qodef-source--predefined .qodef-svg--menu {
  display: block;
}

.qodef-svg--menu {
  stroke: currentColor;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.qodef-opener-icon.qodef-source--predefined .qodef-svg--menu line {
  stroke-dasharray: 30;
  stroke-dashoffset: 55;
  transition: stroke-dashoffset .45s ease-in-out;
  -webkit-transition: stroke-dashoffset .45s ease-in-out;
  -moz-transition: stroke-dashoffset .45s ease-in-out;
  -o-transition: stroke-dashoffset .45s ease-in-out;
  -ms-transition: stroke-dashoffset .45s ease-in-out;
}

.qodef-opener-icon.qodef-source--predefined .qodef-svg--menu line:nth-of-type(2) {
  transition-delay: .15s;
  -webkit-transition-delay: .15s;
  -o-transition-delay: .15s;
}

.qodef-opener-icon.qodef-source--predefined .qodef-svg--menu line:nth-of-type(3) {
  transition-delay: .3s;
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
}

.qodef-opener-icon.qodef-source--predefined:hover .qodef-svg--close line, 
.qodef-opener-icon.qodef-source--predefined:hover .qodef-svg--menu line {
  stroke-dashoffset: 0;
}

#qodef-side-area-close {
  display: block;
  color: #000000;
  position: absolute;
  top: 41%;
  right: 2%;
  z-index: 1000;
}

.qodef-opener-icon .qodef-m-icon {
  display: inline-block;
}

.qodef-svg--close {
  stroke: currentColor;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.qodef-opener-icon.qodef-source--predefined .qodef-svg--close line {
  stroke-dasharray: 26;
  stroke-dashoffset: 52;
  transition: stroke-dashoffset .44s ease-in-out;
  -webkit-transition: stroke-dashoffset .44s ease-in-out;
  -moz-transition: stroke-dashoffset .44s ease-in-out;
  -o-transition: stroke-dashoffset .44s ease-in-out;
  -ms-transition: stroke-dashoffset .44s ease-in-out;
}

.qodef-opener-icon.qodef-source--predefined .qodef-svg--close line:nth-of-type(2) {
  transition-delay: .22s;
  -webkit-transition-delay: .22s;
  -o-transition-delay: .22s;
}

.qodef-opener-icon.qodef-source--predefined:hover .qodef-svg--close line, 
.qodef-opener-icon.qodef-source--predefined:hover .qodef-svg--menu line {
  stroke-dashoffset: 0;
}

.widget.sidebar-open #qodef-side-area-close {
  opacity: 1 !important;
  visibility: visible !important;
  transition: all 1.8s ease;
  -webkit-transition: all 1.8s ease;
  -moz-transition: all 1.8s ease;
  -o-transition: all 1.8s ease;
  -ms-transition: all 1.8s ease;

}

.sidebar_open_icon:hover {
  color: #ffffff;
}

.contact_sidebar_close_icon {
  position: absolute;
  top: 4%;
  right: 9%;
}

.contact_sidebar_close_icon .qodef-m-icon {
  display: inline-block;
}

.contact_sidebar_close_icon .qodef-m-icon .qodef-svg--close line {
  stroke-dasharray: 26;
  stroke-dashoffset: 52;
  transition: stroke-dashoffset .44s ease-in-out;
  -webkit-transition: stroke-dashoffset .44s ease-in-out;
  -moz-transition: stroke-dashoffset .44s ease-in-out;
  -o-transition: stroke-dashoffset .44s ease-in-out;
  -ms-transition: stroke-dashoffset .44s ease-in-out;
}

.contact_sidebar_close_icon .qodef-m-icon .qodef-svg--close line:nth-of-type(2) {
  transition-delay: .22s;
  -webkit-transition-delay: .22s;
  -o-transition-delay: .22s;
}

.contact_sidebar_close_icon .qodef-m-icon:hover .qodef-svg--close line {
  stroke-dashoffset: 0;
}

/************************* 3.Main Content CSS **************************/

.layout-content {
	padding-top: 30px;
}
.layout-content.w-counter {
  padding-top: 0;
}
.counter-time {
	font-size: 60px;
	line-height: 60px;
}
.page-timer{
	padding: 20px 0;
}
.timer-text {
	line-height: 18px;
	letter-spacing: 0.2em;
	font-size: 18px;
	text-transform: uppercase;
	padding-top: 20px;
}
.main-title {
	font-size: 64px;
	line-height: 80px;
	color: #F21D1D;
	text-transform: capitalize;
	padding:20px 0;
}
.page-sm-title {
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;
	padding: 20px 0;
  color: #ffffff;
}
.page-desc {
	line-height: 23px;
	color: #808080;
}
.email-title {
	padding: 20px 0 15px;
	font-size: 24px;
	color: #808080;
	font-weight: 500;
	line-height: 30px;
}
.email-subscription {
	max-width: 520px;
	margin: 0 auto;
	padding-top: 15px;
}
.email-subscription .form-control {
	padding: 18px 20px;
	height: 54px;
	border: 2px solid #F5F5F5;
	border-radius: 10px 0px 0px 10px;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Mulish', sans-serif;
}
.email-subscription .form-control:focus {
  z-index: auto;
}
.email-subscription .notify-me {
	width: 150px;
	background: #1BBCFE;
	border-radius: 0px 10px 10px 0px;
	border: none;
	color: #ffffff;
	font-weight: 700;
	font-size: 18px;
	line-height: 23px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  transition: all .4s linear;
  -webkit-transition: all .4s linear;
  -moz-transition: all .4s linear;
  -o-transition: all .4s linear;
  -ms-transition: all .4s linear;
}
.email-subscription .notify-me:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
}
.notify-me.threed_btn:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 0;
  background: #FFC700;
  content: "";
  border-radius: 7px;
  z-index: -1;
  transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  -ms-transform-origin: bottom center;
  transform: perspective(200px) scaleX(0.1) rotateX( 90deg ) translateZ(-10px);
  -webkit-transform: perspective(200px) scaleX(0.1) rotateX( 90deg ) translateZ(-10px);
  -moz-transform: perspective(200px) scaleX(0.1) rotateX( 90deg ) translateZ(-10px);
  -ms-transform: perspective(200px) scaleX(0.1) rotateX( 90deg ) translateZ(-10px);
  -o-transform: perspective(200px) scaleX(0.1) rotateX( 90deg ) translateZ(-10px);
  transition: transform 0.4s linear, transform 0.4s linear;
  -webkit-transition: transform 0.4s linear, transform 0.4s linear;
  -moz-transition: transform 0.4s linear, transform 0.4s linear;
  -o-transition: transform 0.4s linear, transform 0.4s linear;
  -ms-transition: transform 0.4s linear, transform 0.4s linear;
}
.email-subscription .notify-me.threed_btn:hover {
  color: #000000;
}
.notify-me.threed_btn:hover:after {
  border-radius: 0;
  transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
  -webkit-transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
  -moz-transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
  -ms-transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
  -o-transform: perspective(200px) scaleX(1.05) rotateX(0deg) translateZ(0);
  transition: transform 0.4s linear, transform 0.4s linear;
  -webkit-transition: transform 0.4s linear, transform 0.4s linear;
  -moz-transition: transform 0.4s linear, transform 0.4s linear;
  -o-transition: transform 0.4s linear, transform 0.4s linear;
  -ms-transition: transform 0.4s linear, transform 0.4s linear;
}
.social-icons {
	position: absolute;
  left: -8px;
  right: auto;
  top: 35%;
  bottom: auto;
}
.social-icons .icon-list {
	list-style-type: none;
}
.icon-list .icon-item:hover svg path{
  fill: #1BBCFE;
}
.icon-list .icon-item.instagram:hover svg{
  stroke: #1BBCFE;
}
.primary-solid .icon-list .icon-item:hover svg path{
  fill: #42FF00;
}
.primary-solid .icon-item.instagram:hover svg{
  stroke: #42FF00;
}
.social-icons .icon-list:after  {
	position: absolute;
  content: '';
  border-top: 2px solid #808080;
  height: 2px;
  width: 40px;
  left: auto;
  right: 8px;
  top: 110%;
  bottom: auto;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}
.follow-us {
  position: relative;
  left: 14px;
  top: 114px;
  color: #808080;
  text-transform: uppercase;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

@keyframes fadeInUp {
  from {
    transform: translate3d(0,40px,0) rotate(-90deg);
    -webkit-transform: translate3d(0,40px,0) rotate(-90deg);
    -moz-transform: translate3d(0,40px,0) rotate(-90deg);
    -ms-transform: translate3d(0,40px,0) rotate(-90deg);
    -o-transform: translate3d(0,40px,0) rotate(-90deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0,0,0) rotate(-90deg);
    -webkit-transform: translate3d(0,0,0) rotate(-90deg);
    -moz-transform: translate3d(0,0,0) rotate(-90deg);
    -ms-transform: translate3d(0,0,0) rotate(-90deg);
    -o-transform: translate3d(0,0,0) rotate(-90deg);
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0,40px,0) rotate(-90deg);
    -webkit-transform: translate3d(0,40px,0) rotate(-90deg);
    -moz-transform: translate3d(0,40px,0) rotate(-90deg);
    -ms-transform: translate3d(0,40px,0) rotate(-90deg);
    -o-transform: translate3d(0,40px,0) rotate(-90deg);
  }

  to {
    opacity: 1;
    transform: translate3d(0,0,0) rotate(-90deg);
    -webkit-transform: translate3d(0,0,0) rotate(-90deg);
    -moz-transform: translate3d(0,0,0) rotate(-90deg);
    -ms-transform: translate3d(0,0,0) rotate(-90deg);
    -o-transform: translate3d(0,0,0) rotate(-90deg);
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
  opacity: 0
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}
.icon-list .icon-item{
	padding: 5px 0;
}

@-webkit-keyframes fadeInDown {
  from {
    opacity:0;
    -webkit-transform: translatey(-10px) rotate(-90deg);
    -moz-transform: translatey(-10px) rotate(-90deg);
    -o-transform: translatey(-10px) rotate(-90deg);
    transform: translatey(-10px) rotate(-90deg);
  }
  to {
    opacity:1;
    -webkit-transform: translatey(0) rotate(-90deg);
    -moz-transform: translatey(0) rotate(-90deg);
    -o-transform: translatey(0) rotate(-90deg);
    transform: translatey(0) rotate(-90deg);
  }
}
@-moz-keyframes fadeInDown {
  from {
    opacity:0;
    -webkit-transform: translatey(-10px) rotate(-90deg);
    -moz-transform: translatey(-10px) rotate(-90deg);
    -o-transform: translatey(-10px) rotate(-90deg);
    transform: translatey(-10px) rotate(-90deg);
  }
  to {
    opacity:1;
    -webkit-transform: translatey(0) rotate(-90deg);
    -moz-transform: translatey(0) rotate(-90deg);
    -o-transform: translatey(0) rotate(-90deg);
    transform: translatey(0) rotate(-90deg);
  }
}
@keyframes fadeInDown {
  from {
    opacity:0;
    -webkit-transform: translatey(-10px) rotate(-90deg);
    -moz-transform: translatey(-10px) rotate(-90deg);
    -o-transform: translatey(-10px) rotate(-90deg);
    transform: translatey(-10px) rotate(-90deg);
  }
  to {
    opacity:1;
    -webkit-transform: translatey(0) rotate(-90deg);
    -moz-transform: translatey(0) rotate(-90deg);
    -o-transform: translatey(0) rotate(-90deg);
    transform: translatey(0) rotate(-90deg);
  }
}
.in-down {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;
}

/************************* 4.Counter Shape CSS **************************/

/** 1. dash circle */

.counter-shape {
	width: 200px;
 height: 200px;
 overflow: hidden;
 position: relative;
 margin: 0 auto;
}
.counter-content {
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  padding: 50px 45px;
  text-align: center;
}
.dash_circle:before {
  content: '';
  border: 2px dashed #000;
  border-radius: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 200px;
  animation: anim 45s linear  infinite;
  -webkit-animation: anim 45s linear  infinite; 
  -moz-animation: anim 45s linear  infinite;
  -ms-animation: anim 45s linear  infinite; 
  -o-animation: anim 45s linear  infinite;
}
@keyframes anim {
  from {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
}
@-webkit-keyframes anim {
  from {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
}
.dash_circle.dark-layout:before {
  content: '';
  border: 2px dashed #fff;
  border-radius: 100%; 
}

/**2. Square note*/

.counter-shape.square_note {
	border:2px solid #000000;
 border-top: 8px solid #1BBCFE;
 position: relative;
 border-radius: 0px;
}
.counter-shape.square_note:after {
	content: '';
 position: absolute;
 background-image: url('../images/social-icon/down-arrow.svg');
 top: -7px;
 bottom: auto;
 background-repeat: no-repeat;
 height: 20px;
 width: 30px;
 left: 44%;
 right: 44%;
 display: inline-block;
}
.counter-shape.square_note.green-border:after{
  background-image: url('../images/social-icon/gren-down-arrow.svg');
}

/**3. Circle Glass Effect*/

.counter-shape.glass_circle {
 background: linear-gradient(180deg, rgb(105 101 101 / 60%) 15%, rgb(114 114 114 / 10%) 85%);
 -webkit-backdrop-filter:blur(5px);
 backdrop-filter: blur(5px);
 border-radius: 100px;
 border: none;
}
.counter-shape.glass_circle.dark_theme  {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 15%, rgba(255, 255, 255, 0.1) 85%);
  backdrop-filter: blur(5px);
}


/************************* 5.Contact Us CSS **************************/

.contact-sidebar {
 position: fixed;
 width: 475px;
 height: 100vh;
 left: auto;
 right: -500px;
 top: 0;
 background: #ffffff;
 padding: 110px 38px;
 overflow-y: auto;
 z-index: 3;
 transition: right 0.4s ease-in-out;
 -moz-transition: right 0.4s ease-in-out;
 -o-transition: right 0.4s ease-in-out;
 -ms-transition: right 0.4s ease-in-out;
 -webkit-transition: right 0.4s ease-in-out;
}
.contact-sidebar.show {
  right: 0;
  z-index: 999;
}
.oras_contact_form .input-group{
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: #808080;
	padding: 18px 20px;
	font-family: 'Mulish', sans-serif;
	border: 2px solid #F5F5F5;
	border-radius: 10px;
}
.oras_contact_form input {
	margin-bottom: 10px;
}
.message-button {
	width: 100%;
  background-color: #1BBCFE;
  border-radius: 10px;
  border: none;
  height: 54px;
  color: #ffffff;
  text-transform: capitalize;
  position: relative;
  overflow: hidden;
}
.message-button:before {
  content: "";
  width: 200%;
  height: 200%;
  background-color: #000000;
  border-radius: 50%;
  position: absolute;
  top: 110%;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transition-duration: 800ms;
  -webkit-transition-duration: 800ms;
  -o-transition-duration: 800ms;
}
.message-button:hover {
  color: #ffffff;
  z-index: 1;
}
.message-button:hover:before {
  top: -40%;
}
.conatct-us-form {
	padding-top: 30px;
}
.call-us {
	padding-top: 60px;
}
.call-detail, .email-detail, .location-detail, .email-us {
	padding: 20px 0;
}
.call-detail a, .info-mail a, .location {
	text-decoration: none;
  color: #808080;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -ms-transition: all .2s ease;
}
.call-detail a:hover,
.info-mail a:hover {
  color: #000000;
}

.call-detail, .email-detail{
	border-bottom: 1px solid #F5F5F5;
}
.contact-us-button.hide .contact-us{
  z-index: 0;
}
.close-icon {
  display: flex;
  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  align-content: flex-start;
  -ms-flex-line-pack: start;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}
.close-icon span {
  background: #000;
  border-radius:10px;
  height:2px;
  margin: 4px 0;
  position: relative;
  position: absolute;
  top: 40px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
}
.close-icon:hover span {
  cursor: pointer;
}
.close-icon .line:nth-of-type(1) {
  width: 8%;
  transform: rotate(45deg) translateY(13px);
  -moz-transform: rotate(45deg) translateY(13px);
  -o-transform: rotate(45deg) translateY(13px);
  -ms-transform: rotate(45deg) translateY(13px);
  -webkit-transform: rotate(45deg) translateY(13px);
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s; 
}
.close-icon .line:nth-of-type(2) {
  width: 0px;
}
.close-icon .line:nth-of-type(3)  {
  width: 8%;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transform: translateX(-9px) translateY(10px) rotate(-45deg);
  -moz-transform: translateX(-9px) translateY(10px) rotate(-45deg);
  -o-transform: translateX(-9px) translateY(10px) rotate(-45deg);
  -ms-transform: translateX(-9px) translateY(10px) rotate(-45deg);
  -webkit-transform: translateX(-9px) translateY(10px) rotate(-45deg);
}

/* ContactUs hover*/

.contact-us-button .contact-us{
  position: absolute;
  top: 50%;
  color: #ffffff;
  right: -126px;
  z-index: 999;
  outline: none;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 0px 0px 5px 5px;
  border: none;
  box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.15);
  -o-box-shadow: -4px 0px 20px rgba(0, 0, 0, 0.15);
  transition: right 0.4s ease-in-out;
  -moz-transition: right 0.4s ease-in-out;
  -o-transition: right 0.4s ease-in-out;
  -ms-transition: right 0.4s ease-in-out;
  -webkit-transition: right 0.4s ease-in-out;
}
.button12 {
  cursor: pointer;
  background-color: #1BBCFE;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(90deg);
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
  -moz-transform: translate(-50%, -50%) rotate(90deg);
  -ms-transform: translate(-50%, -50%) rotate(90deg);
  -o-transform: translate(-50%, -50%) rotate(90deg);
}
.button12:before {
  top: 0;
  left: 0;
  right: auto;
}
.button12:after {
  bottom: 0;
  right: 0;
  left: auto;
}
.button12 span {
  color: #fff;
  position: relative;
  z-index: 1;
  transform-origin: center left;
  -webkit-transform-origin: center left;
  -ms-transform-origin: center left;
  transform: scaleX(0.6) translateX(30px) translateY(-1px);
  -webkit-transform: scaleX(0.6) translateX(30px) translateY(-1px);
  -moz-transform: scaleX(0.6) translateX(30px) translateY(-1px);
  -ms-transform: scaleX(0.6) translateX(30px) translateY(-1px);
  -o-transform: scaleX(0.6) translateX(30px) translateY(-1px);
  transition: color 0.3s ease;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
}
.button12:before, .button12:after {
  content: '';
  background: #fff;
  height: 50%;
  width: 0;
  position: absolute;
  transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -webkit-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -moz-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -o-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  -ms-transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.button12:hover:before {
  width: 100%;
  right: 0;
  left: auto;
}
.button12:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}
.button12:hover span {
  color: #000;
}

/************************* 6.Layout Three CSS **************************/

.orb {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
.charts_orb {
 display: flex;
 display: -webkit-box;      
 display: -moz-box;         
 display: -ms-flexbox;      
 display: -webkit-flex;
}
.charts_orb .orb .orb_graphic {
 position: relative;
}
.charts_orb .orb .orb_graphic .orb_value {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  width: 170px;
  height: 170px;
  display: flex;
  display: -webkit-box;      
  display: -moz-box;         
  display: -ms-flexbox;      
  display: -webkit-flex;
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-content: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-direction: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
}
.charts_orb svg circle {
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  stroke-width: 2;
  fill: transparent;
  r: 99;
  cx: 100;
  cy: 100;
}
.charts_orb svg circle.first-circle {
  stroke-dasharray: 532.16, 259.16;
}
.charts_orb svg circle.progress.first-circle {
  stroke: #FFC700;
}
.charts_orb svg circle.second-circle {
  stroke-dasharray: 650.16, 138.16;
}
.charts_orb svg circle.progress.second-circle {
  stroke: #42FF00;
}
.charts_orb svg circle.third-circle {
  stroke-dasharray: 710.16, 46.16;
}
.charts_orb svg circle.progress.third-circle {
  stroke: #00C2FF;
}
.charts_orb svg circle.fourth-circle {
  stroke-dasharray: 472.16, 314.16;
}
.charts_orb svg circle.progress.fourth-circle {
  stroke: #FB2EFF;
}
.charts_orb svg circle.fill {
  stroke: #111418;
  opacity: 0.05;
}
.charts_orb svg circle.fill.dark-line {
  stroke: #ffffff;
  opacity: 0.05;
}
.charts_orb svg circle.fill.primary-line {
  opacity: 0.06;
}
.charts_orb svg circle.fill.video-fill {
  opacity: 0.09;
}
.charts_orb svg circle.progress {
  stroke-dashoffset: 320.16;
  -webkit-animation: NAME-YOUR-ANIMATION 1.5s forwards;
  -webkit-animation-timing-function: linear;
  transition: stroke-dashoffset 0.35s;
  -webkit-transition: stroke-dashoffset 0.35s;
  -moz-transition: stroke-dashoffset 0.35s;
  -o-transition: stroke-dashoffset 0.35s;
  -ms-transition: stroke-dashoffset 0.35s;
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
 .charts_orb svg circle.progress 0% {
   stroke-dashoffset: 420.16;
 }
 .charts_orb svg circle.progress 100% {
   stroke-dashoffset: 0;
 }
}

/************************* 7.Dark Theme CSS **************************/

.dark-theme {
	background: #111418;
	color: #ffffff;
}
.w-text {
	color: #fff;
}
.email-subscription .form-control.dark-back {
	background: #1E2227;
  border-radius: 10px 0px 0px 10px;
  border: 2px solid transparent;
  stroke: unset;
}
.sidebar-btn .w-back {
	background: #fff;
}
.social-icons.upper-line .icon-list:after {
	right: 3px;
  top: -10%;
}
.follow-us.uppertext {
  top: -117px; 
  left: 20px;
}
.social-icons.upper-line {
	top: 50%;
}

/************************* 8.Primary + Solid Theme CSS **************************/

.primary_ver_three {
  background: #6F39FD;
  color: #ffffff;
}
.social-icons .icon-list.w-line:after {
  border-top: 2px solid #ffffff;
}
.primary_solid {
  color: #42FF00;
}
.notify-me.b-backcolor, .contact-us.b-backcolor {
  background: #000000;
}
.counter-shape.square_note.green-border {
  border-top: 8px solid #42FF00;
}
.layout-two.version-three .fliptimer .text{
  color: #fff!important;
}
.layout-two .fliptimer .text{
  color: #111418!important;
} 

/************************* 9.Background Image Theme CSS **************************/

.back-image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.background-image {
  background-image: url('../images/back-image/background-image.png');
}
.background-image:before, .background-video:before {
  content: '';
  position: absolute;
  background: linear-gradient(to bottom, #000000 0%, #000000 100%);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.8;
  height: 100%;
  width: 100%;
}
.back-header {
  position: absolute;
}
.background-image .layout-content{
  position: relative;
}

/************************* 10.Background Animation Theme CSS **************************/

.snow-back-image {
  background-image: url('../images/back-image/back-animation-img.png');
}
.background-image-water {
  background-image: url('../images/back-image/water-back-image.png');
}
.follow-us.b-text,.b-text {
  color: #000000;
}
.social-icons.upper-line .icon-list.b-line:after {
  border-top: 2px solid #111418;
}
section#particles-js canvas {
  display: block;
  background: transparent!important;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}
.jquery-ripples {
  position: relative;
  z-index: 0;
}
.jquery-ripples #water-dripple{
  position: absolute;
  inset: 0px;
  z-index: -1;

}
.ripple{
  height: 100%;
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Shadder effect */
#surface-shader {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
}

.particle-animation #particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.large-header {
  position: absolute;
  z-index: -1;
  overflow:hidden;
}


/************************* 11.Background Video Theme CSS **************************/

.background-video {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
#background-video {
  height: 100vh;
  width: 100vw;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  object-fit: cover;
  -o-object-fit: cover;
}
.background-video:before {
  opacity: 0.3;
  background: linear-gradient(to top, #000000 0%, #000000 100%);
}
.background-video .layout-content {
  position: relative;
  z-index: 1;
}
#bg_content_video {
  overflow: hidden;
  height: auto;
}
#bg-iframe-video {
  padding-bottom: 56.24%;
}
#bg-iframe-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}


/************************* 12.Background Cursor Effect CSS **************************/

canvas {
  width: 100%;
  height: 100%;
}
section #cursor_effect_one {
  display: block;
  background: transparent!important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -2
}

/************************* 13.Heading Animation CSS **************************/

/* 1. Shiny text */
.main-title.shine {
  animation: shining 8s infinite;
  -webkit-animation: shining 8s infinite; 
  -moz-animation: shining 8s infinite;
  -ms-animation: shining 8s infinite; 
  -o-animation: shining 8s infinite;
}

@-webkit-keyframes shining {
  0%   {text-shadow: 0 0 3px #FF0000; color: #fff;}
  25%  {text-shadow: 0 0 12px #FF0000;}
  50%  {text-shadow: 0 0 20px #FF0000; color: #F21D1D;}
  75%  {text-shadow: 0 0 12px #FF0000;}
  100% {text-shadow: 0 0 3px #FF0000; color: #fff;}
}

/* 2. glitch */

.main-title.glitch {
  position:relative;
  display: inline-block;
  color: #fff;
}

.main-title.glitch:after{
  content:attr(data-text);
  position:absolute;
  left:0;
  text-shadow:-1px 0 red;
  top: 16px;
  color:#fff;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation: noise-anim 2s infinite linear alternate-reverse;
  -webkit-animation: noise-anim 2s infinite linear alternate-reverse; 
  -moz-animation: noise-anim 2s infinite linear alternate-reverse;
  -ms-animation: noise-anim 2s infinite linear alternate-reverse; 
  -o-animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim {
 0% {
   clip: rect(13px, 9999px, 51px, 0);
 }
 5% {
   clip: rect(27px, 9999px, 19px, 0);
 }
 10% {
   clip: rect(98px, 9999px, 16px, 0);
 }
 15% {
   clip: rect(99px, 9999px, 72px, 0);
 }
 20% {
   clip: rect(69px, 9999px, 76px, 0);
 }
 25% {
   clip: rect(78px, 9999px, 28px, 0);
 }
 30% {
   clip: rect(90px, 9999px, 50px, 0);
 }
 35% {
   clip: rect(19px, 9999px, 84px, 0);
 }
 40% {
   clip: rect(80px, 9999px, 42px, 0);
 }
 45% {
   clip: rect(76px, 9999px, 28px, 0);
 }
 50% {
   clip: rect(21px, 9999px, 54px, 0);
 }
 55% {
   clip: rect(25px, 9999px, 97px, 0);
 }
 60% {
   clip: rect(1px, 9999px, 21px, 0);
 }
 65% {
   clip: rect(81px, 9999px, 5px, 0);
 }
 70% {
   clip: rect(100px, 9999px, 11px, 0);
 }
 75% {
   clip: rect(75px, 9999px, 1px, 0);
 }
 80% {
   clip: rect(23px, 9999px, 59px, 0);
 }
 85% {
   clip: rect(79px, 9999px, 33px, 0);
 }
 90% {
   clip: rect(8px, 9999px, 31px, 0);
 }
 95% {
   clip: rect(80px, 9999px, 72px, 0);
 }
 100% {
   clip: rect(50px, 9999px, 56px, 0);
 }
}

@-webkit-keyframes noise-anim {
 0% {
   clip: rect(13px, 9999px, 51px, 0);
 }
 5% {
   clip: rect(27px, 9999px, 19px, 0);
 }
 10% {
   clip: rect(98px, 9999px, 16px, 0);
 }
 15% {
   clip: rect(99px, 9999px, 72px, 0);
 }
 20% {
   clip: rect(69px, 9999px, 76px, 0);
 }
 25% {
   clip: rect(78px, 9999px, 28px, 0);
 }
 30% {
   clip: rect(90px, 9999px, 50px, 0);
 }
 35% {
   clip: rect(19px, 9999px, 84px, 0);
 }
 40% {
   clip: rect(80px, 9999px, 42px, 0);
 }
 45% {
   clip: rect(76px, 9999px, 28px, 0);
 }
 50% {
   clip: rect(21px, 9999px, 54px, 0);
 }
 55% {
   clip: rect(25px, 9999px, 97px, 0);
 }
 60% {
   clip: rect(1px, 9999px, 21px, 0);
 }
 65% {
   clip: rect(81px, 9999px, 5px, 0);
 }
 70% {
   clip: rect(100px, 9999px, 11px, 0);
 }
 75% {
   clip: rect(75px, 9999px, 1px, 0);
 }
 80% {
   clip: rect(23px, 9999px, 59px, 0);
 }
 85% {
   clip: rect(79px, 9999px, 33px, 0);
 }
 90% {
   clip: rect(8px, 9999px, 31px, 0);
 }
 95% {
   clip: rect(80px, 9999px, 72px, 0);
 }
 100% {
   clip: rect(50px, 9999px, 56px, 0);
 }
}

.glitch:before{
  content:attr(data-text);
  position:absolute;
  left:-2px;
  text-shadow:1px 0 blue; 
  top: 22px;
  color:#fff;
  overflow:hidden;
  clip:rect(0,900px,0,0); 
  animation: noise-anim-2 3s infinite linear alternate-reverse;
  -webkit-animation: noise-anim-2 3s infinite linear alternate-reverse; 
  -moz-animation: noise-anim-2 3s infinite linear alternate-reverse;
  -ms-animation: noise-anim-2 3s infinite linear alternate-reverse; 
  -o-animation: noise-anim-2 3s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
 0% {
   clip: rect(16px, 9999px, 75px, 0);
 }
 5% {
   clip: rect(84px, 9999px, 40px, 0);
 }
 10% {
   clip: rect(27px, 9999px, 40px, 0);
 }
 15% {
   clip: rect(19px, 9999px, 42px, 0);
 }
 20% {
   clip: rect(74px, 9999px, 16px, 0);
 }
 25% {
   clip: rect(96px, 9999px, 67px, 0);
 }
 30% {
   clip: rect(23px, 9999px, 65px, 0);
 }
 35% {
   clip: rect(49px, 9999px, 50px, 0);
 }
 40% {
   clip: rect(4px, 9999px, 9px, 0);
 }
 45% {
   clip: rect(26px, 9999px, 73px, 0);
 }
 50% {
   clip: rect(26px, 9999px, 20px, 0);
 }
 55% {
   clip: rect(1px, 9999px, 66px, 0);
 }
 60% {
   clip: rect(89px, 9999px, 64px, 0);
 }
 65% {
   clip: rect(80px, 9999px, 89px, 0);
 }
 70% {
   clip: rect(11px, 9999px, 69px, 0);
 }
 75% {
   clip: rect(24px, 9999px, 31px, 0);
 }
 80% {
   clip: rect(92px, 9999px, 87px, 0);
 }
 85% {
   clip: rect(36px, 9999px, 64px, 0);
 }
 90% {
   clip: rect(37px, 9999px, 72px, 0);
 }
 95% {
   clip: rect(2px, 9999px, 72px, 0);
 }
 100% {
   clip: rect(23px, 9999px, 35px, 0);
 }
}

@-webkit-keyframes noise-anim-2 {
 0% {
   clip: rect(16px, 9999px, 75px, 0);
 }
 5% {
   clip: rect(84px, 9999px, 40px, 0);
 }
 10% {
   clip: rect(27px, 9999px, 40px, 0);
 }
 15% {
   clip: rect(19px, 9999px, 42px, 0);
 }
 20% {
   clip: rect(74px, 9999px, 16px, 0);
 }
 25% {
   clip: rect(96px, 9999px, 67px, 0);
 }
 30% {
   clip: rect(23px, 9999px, 65px, 0);
 }
 35% {
   clip: rect(49px, 9999px, 50px, 0);
 }
 40% {
   clip: rect(4px, 9999px, 9px, 0);
 }
 45% {
   clip: rect(26px, 9999px, 73px, 0);
 }
 50% {
   clip: rect(26px, 9999px, 20px, 0);
 }
 55% {
   clip: rect(1px, 9999px, 66px, 0);
 }
 60% {
   clip: rect(89px, 9999px, 64px, 0);
 }
 65% {
   clip: rect(80px, 9999px, 89px, 0);
 }
 70% {
   clip: rect(11px, 9999px, 69px, 0);
 }
 75% {
   clip: rect(24px, 9999px, 31px, 0);
 }
 80% {
   clip: rect(92px, 9999px, 87px, 0);
 }
 85% {
   clip: rect(36px, 9999px, 64px, 0);
 }
 90% {
   clip: rect(37px, 9999px, 72px, 0);
 }
 95% {
   clip: rect(2px, 9999px, 72px, 0);
 }
 100% {
   clip: rect(23px, 9999px, 35px, 0);
 }
}

/* 3.Overlay text Animation */

.typo {
 color: var(--color_pen);
 cursor: default;
 letter-spacing: 0.1rem;
 margin: auto;
 outline: none;
 position: relative;
 display: inline-block;
 transform: skew(10deg, 2deg);
 -webkit-transform: skew(10deg, 2deg);
 -moz-transform: skew(10deg, 2deg);
 -ms-transform: skew(10deg, 2deg);
 -o-transform: skew(10deg, 2deg);
 animation: float 2s ease-in-out infinite;
 -webkit-animation: float 2s ease-in-out infinite; 
 -moz-animation: float 2s ease-in-out infinite;
 -ms-animation: float 2s ease-in-out infinite; 
 -o-animation: float 2s ease-in-out infinite; 
}
.typo:hover + .fog {
 animation-play-state: paused;
 -webkit-animation-play-state: paused;
}
.typo::before, 
.typo::after {
 color: transparent;
 content: 'coming soon!';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -10;
}
.typo::before {
 opacity: 0;
 text-shadow: 6px 0 2px rgb(179 8 8 / 15%), 12px 0 2px rgb(26 35 126 / 18%);
 animation: move_upper_shadow 2s ease-in-out infinite;
 -webkit-animation: move_upper_shadow 2s ease-in-out infinite; 
 -moz-animation: move_upper_shadow 2s ease-in-out infinite;
 -ms-animation: move_upper_shadow 2s ease-in-out infinite; 
 -o-animation: move_upper_shadow 2s ease-in-out infinite; 
}
.typo::after {
 text-shadow: 2px 4px 2px rgb(179 8 8 / 27%), 4px 8px 2px rgb(26 35 126 / 21%);
 animation: move_bottom_shadow 2s ease-in-out infinite;
 -webkit-animation: move_bottom_shadow 2s ease-in-out infinite; 
 -moz-animation: move_bottom_shadow 2s ease-in-out infinite;
 -ms-animation: move_bottom_shadow 2s ease-in-out infinite; 
 -o-animation: move_bottom_shadow 2s ease-in-out infinite; 
}
@keyframes move_upper_shadow {
 0%, 90%, 100% {
   opacity: 0;
   transform: translateX(-2%);
   -webkit-transform: translateX(-2%);
   -moz-transform: translateX(-2%);
   -ms-transform: translateX(-2%);
   -o-transform: translateX(-2%);
 }
 30% {
   opacity: 1;
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }
}

@-webkit-keyframes move_upper_shadow {
 0%, 90%, 100% {
   opacity: 0;
   transform: translateX(-2%);
   -webkit-transform: translateX(-2%);
   -moz-transform: translateX(-2%);
   -ms-transform: translateX(-2%);
   -o-transform: translateX(-2%);
 }
 30% {
   opacity: 1;
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }
}

@keyframes move_bottom_shadow {
 0%, 90%, 100% {
   opacity: 1;
   transform: translate(0, 0);
   -webkit-transform: translate(0, 0);
   -moz-transform: translate(0, 0);
   -ms-transform: translate(0, 0);
   -o-transform: translate(0, 0);
 }
 30% {
   opacity: 0;
   transform: translateY(-3.5%);
   -webkit-transform: translateY(-3.5%);
   -moz-transform: translateY(-3.5%);
   -ms-transform: translateY(-3.5%);
   -o-transform: translateY(-3.5%);
 }
}

@-webkit-keyframes move_upper_shadow {
 0%, 90%, 100% {
   opacity: 0;
   transform: translateX(-2%);
   -webkit-transform: translateX(-2%);
   -moz-transform: translateX(-2%);
   -ms-transform: translateX(-2%);
   -o-transform: translateX(-2%);
 }
 30% {
   opacity: 1;
   transform: translateX(0);
   -webkit-transform: translateX(0);
   -moz-transform: translateX(0);
   -ms-transform: translateX(0);
   -o-transform: translateX(0);
 }
}

@keyframes float {
 50% {
   transform: scaleY(1.01) skew(-10deg, -2deg);
   -webkit-transform: scaleY(1.01) skew(-10deg, -2deg);
   -moz-transform: scaleY(1.01) skew(-10deg, -2deg);
   -ms-transform: scaleY(1.01) skew(-10deg, -2deg);
   -o-transform: scaleY(1.01) skew(-10deg, -2deg);
 }
}

@-webkit-keyframes float {
 50% {
   transform: scaleY(1.01) skew(-10deg, -2deg);
   -webkit-transform: scaleY(1.01) skew(-10deg, -2deg);
   -moz-transform: scaleY(1.01) skew(-10deg, -2deg);
   -ms-transform: scaleY(1.01) skew(-10deg, -2deg);
   -o-transform: scaleY(1.01) skew(-10deg, -2deg);
 }
}

@media (prefers-reduced-motion: reduce) {
 .typo {
   animation: none;
   -webkit-animation: none; 
   -moz-animation: none;
   -ms-animation: none; 
   -o-animation: none; 
   transform: none;
   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
 }
 .typo::before, 
 .typo::after {
   animation: none;
   -webkit-animation: none; 
   -moz-animation: none;
   -ms-animation: none; 
   -o-animation: none; 
 }
}
.fog {
 --fog_neg: calc(var(--fog) * -1);
 width: var(--fog);
 height: var(--fog);
 background-color: var(--color_base);
 position: absolute;
 top: var(--fog_neg);
 left: var(--fog_neg);
 transform-origin: 0 50%;
 -webkit-transform-origin: 0 50%;
 -ms-transform-origin: 0 50%;
 transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
 -moz-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 animation: move_fog 13s 2s ease-in-out alternate infinite;
 -webkit-animation: move_fog 13s 2s ease-in-out alternate infinite; 
 -moz-animation: move_fog 13s 2s ease-in-out alternate infinite;
 -ms-animation: move_fog 13s 2s ease-in-out alternate infinite; 
 -o-animation: move_fog 13s 2s ease-in-out alternate infinite;
}
@keyframes move_fog {
 50% {
   transform: scale(var(--scale));
   -webkit-transform: scale(var(--scale));
   -moz-transform: scale(var(--scale));
   -ms-transform: scale(var(--scale));
   -o-transform: scale(var(--scale));
 }
}
@media (prefers-reduced-motion: reduce) {
 .fog {
   animation: none;
   -webkit-animation: none; 
   -moz-animation: none;
   -ms-animation: none; 
   -o-animation: none; 
 }
}
.fog::after {
 --blur: calc(var(--fog) * 2);
 --blur_neghalf: calc(var(--blur) / -2);
 --filter: calc(var(--fog) / 30);
 width: var(--blur);
 height: var(--blur);
 content: '';
 background-color: var(--color_base);
 filter: blur(var(--filter));
 margin-top: var(--blur_neghalf);
 margin-left: var(--blur_neghalf);
 position: absolute;
 top: 50%;
 left: 50%;
}

/* 4.Wavy text*/

.content {
  position: relative;
}
.wavy-element {
  padding-top: 90px;
}
.wavy-element-ver-two {
  padding-top: 120px;
}
.content .main-title {
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
}
.content .main-title.heading_animation_four_without_counter_title {
  transform: translateY(-20%);
}
.content  .main-title:nth-child(1) {
  color: transparent;
  -webkit-text-stroke: 2px #FFC700;
}
.content  .main-title:nth-child(2) {
  color: #FFC700;
  animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
  0%,
  100% {
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}

@-webkit-keyframes animate {
  0%,
  100% {
    -webkit-clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
    clip-path: polygon(
      0% 45%,
      16% 44%,
      33% 50%,
      54% 60%,
      70% 61%,
      84% 59%,
      100% 52%,
      100% 100%,
      0% 100%
    );
  }

  50% {
    -webkit-clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
    clip-path: polygon(
      0% 60%,
      15% 65%,
      34% 66%,
      51% 62%,
      67% 50%,
      84% 45%,
      100% 46%,
      100% 100%,
      0% 100%
    );
  }
}

/* 5.Typing elements */

.word {
  margin: auto;
  text-shadow: 5px 2px #222324, 2px 4px #222324, 3px 5px #222324;
  height: 120px;
}

/* Social Media Icons CSS */

.social {
  position: fixed;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.social ul {
  margin: 0;
  padding: 0px;
  transform: translate(-270px, 0);
  -webkit-transform: translate(-270px, 0);
  -moz-transform: translate(-270px, 0);
  -ms-transform: translate(-270px, 0);
  -o-transform: translate(-270px, 0);
}

.social ul li {
  display: block;
  width: 300px;
  border-radius: 0 30px 30px 0;
  text-align: right;
  margin: 5px;
  padding: 10px;
  font-family: 'Mulish';
  font-weight: 500;
  font-size: 20px;
  transition: all .5s linear;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  -ms-transition: all .5s linear;
}

.social ul li:hover {
  transform: translate(110px, 0);
  -webkit-transform: translate(110px, 0);
  -moz-transform: translate(110px, 0);
  -ms-transform: translate(110px, 0);
  -o-transform: translate(110px, 0);
  transition: all .5s linear;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  -ms-transition: all .5s linear;
}

.social ul .list_item_facebook {
  background: rgba(66, 103, 178, 0.7);
}
.social ul .list_item_facebook:hover {
  background: rgba(66, 103, 178, 1.0);
}
.social ul .list_item_facebook:hover svg,
.social ul .list_item_facebook svg {
  color: rgba(66, 103, 178, 1.0);
}

.social ul .list_item_twitter {
  background: rgba(29, 161, 242, 0.7);
}
.social ul .list_item_twitter:hover {
  background: rgba(29, 161, 242, 1.0);
}
.social ul .list_item_twitter:hover svg,
.social ul .list_item_twitter svg {
  color: rgba(29, 161, 242, 1.0);
}

.social ul .list_item_instagram {
  background: rgba(225, 48, 108, 0.7);
}
.social ul .list_item_instagram:hover {
  background: rgba(225, 48, 108, 1.0);
}
.social ul .list_item_instagram:hover svg,
.social ul .list_item_instagram svg {
  color: rgba(225, 48, 108, 1.0);
}

.social ul .list_item_linkedin {
  background: rgba(0, 160, 220, 0.7);
}
.social ul .list_item_linkedin:hover {
  background: rgba(0, 160, 220, 1.0);
}
.social ul .list_item_linkedin:hover svg,
.social ul .list_item_linkedin svg {
  color: rgba(0, 160, 220, 1.0);
}

.social ul li:hover a {
  color: #ffffff;
}

.social ul li:hover svg {
  background-color: #ffffff;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transition: all .5s linear;
  -webkit-transition: all .5s linear;
  -moz-transition: all .5s linear;
  -o-transition: all .5s linear;
  -ms-transition: all .5s linear;
}

.social ul li svg {
  width: 20px;
  height: 20px;
  color: #000000;
  background-color: #ffffff;
  border-radius: 50%;
  margin-left: 10px;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
}

.dark-theme.threed_back_effect_body {
  background: #ffffff;
}

/***************************************************/

.notify-me.shadder_btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.4s;
}

.notify-me.shadder_btn:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  background: #FFC700;
  transform: scale(0.2, 1);
  -webkit-transform: scale(0.2, 1);
  -moz-transform: scale(0.2, 1);
  -ms-transform: scale(0.2, 1);
  -o-transform: scale(0.2, 1);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
}

.notify-me.shadder_btn:hover {
  color: #000000;
}

.notify-me.shadder_btn:hover::before {
  opacity: 1;
  z-index: -1;
  transform: scale(1, 1);
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
}

/***************************************************/

.notify-me.back_water_btn {
  transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
}

.notify-me.back_water_btn:after, 
.notify-me.back_water_btn:before {
  background: #FFC700;
}

.notify-me.back_water_btn:before {
  content: "";
  width: 50%;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

.notify-me.back_water_btn:after {
  content: "";
  width: 50%;
  height: 0;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
}

.notify-me.back_water_btn:hover {
  color: #000000;
}

.notify-me.back_water_btn:hover:after, 
.notify-me.back_water_btn:hover:before {
  width: 100%;
  height: 100%;
  opacity: 1;
  visibility: visible;
}

/***************************************************/

.sidebar_open_icon.back_animation_open_icon {
  color: #000000;
}

.page-sm-title.back_animation_title {
  color: #000000;
}

.notify-me.back_animation_btn {
  transition: all .4s;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  -o-transition: all .4s;
  -ms-transition: all .4s;
}

.notify-me.back_animation_btn::before {
  content: "";
  width: 0px;
  height: 0px;
  background-color: #F21D1D;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transition: all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  -ms-transition: all .5s;
}

.notify-me.back_animation_btn:hover {
  color: #fff;
}

.notify-me.back_animation_btn:hover::before {
  width: 100%;
  height: 100%;
}

/***************************************************/

.notify-me.back_image_btn {
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
}

.notify-me.back_image_btn:before {
  content: "";
  width: 200%;
  height: 100%;
  background-color: #FFC700;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: scale(1, 0);
  -webkit-transform: scale(1, 0);
  -moz-transform: scale(1, 0);
  -ms-transform: scale(1, 0);
  -o-transform: scale(1, 0);
  transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -o-transition: 0.5s ease;
  -ms-transition: 0.5s ease;
}

.notify-me.back_image_btn:hover {
  color: #000000;
}

.notify-me.back_image_btn:hover::before {
  transform-origin: center center;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

/***************************************************/ 

.notify-me.back_video_btn {
  background: #FFC700;
  transition: all .52s;
  -webkit-transition: all .52s;
  -moz-transition: all .52s;
  -o-transition: all .52s;
  -ms-transition: all .52s;
}

.notify-me.back_video_btn::before {
  content: '';
  width: 100%;
  height: 100%;
  background: #1BBCFE;
  border-radius: 5px;
  margin: auto;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -1;
  transition: all .52s;
  -webkit-transition: all .52s;
  -moz-transition: all .52s;
  -o-transition: all .52s;
  -ms-transition: all .52s;
}

.notify-me.back_video_btn::after {
  content: '';
  width: 100%;
  height: 100%;
  background: #1BBCFE;
  border-radius: 5px;
  margin: auto;
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -1;
  transition: all .52s;
  -webkit-transition: all .52s;
  -moz-transition: all .52s;
  -o-transition: all .52s;
  -ms-transition: all .52s;
}

.notify-me.back_video_btn:hover {
  color: #000000;
}

.notify-me.back_video_btn:hover::before {
  transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
}

.notify-me.back_video_btn:hover::after {
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
}

/***************************************************/

.video-background {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.back-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 115%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.notify-me.birds_btn {
  transition: all .35s;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  -o-transition: all .35s;
  -ms-transition: all .35s;
}

.notify-me.birds_btn:after, 
.notify-me.birds_btn:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #21769929;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: -1;
  transition: all .35s;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  -o-transition: all .35s;
  -ms-transition: all .35s;
}

.notify-me.birds_btn:before {
  opacity: .5;
}

.notify-me.birds_btn:hover {
  color: #ffffff;
}

.notify-me.birds_btn:hover:after, 
.notify-me.birds_btn:hover:before {
  left: 0;
}

.notify-me.birds_btn:hover:after {
  transition-delay: .3s;
  -webkit-transition-delay: .3s;
  -o-transition-delay: .3s;
}

/***************************************************/

.notify-me.bubble_btn {
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
}

.notify-me.bubble_btn::after {
  content: '';
  width: 0;
  height: 100%;
  background: #000000;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  -o-transition: all 0.5s ease-out 0s;
  -ms-transition: all 0.5s ease-out 0s;
}

.notify-me.bubble_btn:hover::after {
  width: 100%;
}

/***************************************************/

.notify-me.dark_lyt_btn {
  transition: all 0.4s ease-out 0s;
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
}

.notify-me.dark_lyt_btn::before {
  content: '';
  width: 100%;
  height: 0%;
  background-color: #FFC700;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  -moz-transform: translate(-50%, -50%) rotate(-45deg);
  -ms-transform: translate(-50%, -50%) rotate(-45deg);
  -o-transform: translate(-50%, -50%) rotate(-45deg);
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
}

.notify-me.dark_lyt_btn:hover {
  color: #000000;
  background-color: #FFC700;
}

.notify-me.dark_lyt_btn:hover::before {
  height: 400px;
  opacity: 0;
}

/***************************************************/

.notify-me.halo_btn {
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 -ms-transition: all 0.3s ease;
}

.notify-me.halo_btn:before {
  content: "";
  background-color: #FFC700;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
}

.notify-me.halo_btn:hover {
  color: #000000;
}

.notify-me.halo_btn:hover:before {
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
}

/***************************************************/

.background-image.heading_animation_four_bg_img {
  background-image: url(../images/back-image/background-image-2.jpg);
}

.notify-me.heading_animation_four_btn {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_four_btn:before, 
.notify-me.heading_animation_four_btn:after {
  content: "";
  border-bottom: 80px solid #FFC700;
  position: absolute;
  top: -10px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_four_btn:before {
  right: -50px;
  border-right: 50px solid transparent;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
}

.notify-me.heading_animation_four_btn:after {
  left: -50px;
  border-left: 50px solid transparent;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
}

.notify-me.heading_animation_four_btn:hover {
  color: #000000;
}

.notify-me.heading_animation_four_btn:hover:before {
  transform: translateX(-40%);
  -webkit-transform: translateX(-40%);
  -moz-transform: translateX(-40%);
  -ms-transform: translateX(-40%);
  -o-transform: translateX(-40%);
}

.notify-me.heading_animation_four_btn:hover:after {
  transform: translateX(40%);
  -webkit-transform: translateX(40%);
  -moz-transform: translateX(40%);
  -ms-transform: translateX(40%);
  -o-transform: translateX(40%);
}

/***************************************************/

.sidebar_open_icon.heading_animation_one_sidebar_open_icon{
  color: black;
}

.page-sm-title.heading_animation_one_page_sm_title {
  color: #000000;
}

.notify-me.heading_animation_one_btn {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_one_btn:before, 
.notify-me.heading_animation_one_btn:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_one_btn:before {
  right: -50px;
  border-right: 50px solid transparent;
  border-bottom: 80px solid #000000;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
}

.notify-me.heading_animation_one_btn:after {
  left: -50px;
  border-left: 50px solid transparent;
  border-top: 80px solid #000000;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
}

.notify-me.heading_animation_one_btn:hover:before {
  transform: translateX(-49%);
  -webkit-transform: translateX(-49%);
  -moz-transform: translateX(-49%);
  -ms-transform: translateX(-49%);
  -o-transform: translateX(-49%);
}

.notify-me.heading_animation_one_btn:hover:after {
  transform: translateX(49%);
  -webkit-transform: translateX(49%);
  -moz-transform: translateX(49%);
  -ms-transform: translateX(49%);
  -o-transform: translateX(49%);
}

/***************************************************/

.notify-me.heading_animation_three_btn {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_three_btn:before, 
.notify-me.heading_animation_three_btn:after {
  content: "";
  border-top: 40px solid #42FF00;
  border-bottom: 40px solid #42FF00;
  position: absolute;
  top: -12px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_three_btn:before {
  border-right: 30px solid transparent;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
}

.notify-me.heading_animation_three_btn:after {
  border-left: 30px solid transparent;
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
}

.notify-me.heading_animation_three_btn:hover {
  color: #000000;
}

.notify-me.heading_animation_three_btn:hover:before {
  transform: translateX(-30%);
  -webkit-transform: translateX(-30%);
  -moz-transform: translateX(-30%);
  -ms-transform: translateX(-30%);
  -o-transform: translateX(-30%);
}

.notify-me.heading_animation_three_btn:hover:after {
  transform: translateX(30%);
  -webkit-transform: translateX(30%);
  -moz-transform: translateX(30%);
  -ms-transform: translateX(30%);
  -o-transform: translateX(30%);
}

/***************************************************/

.notify-me.heading_animation_two_btn {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_two_btn:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent red transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_two_btn:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent red;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform: rotate(360deg);
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.heading_animation_two_btn:before, 
.notify-me.heading_animation_two_btn:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid;
  z-index: -1;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

.notify-me.heading_animation_two_btn:before {
  bottom: 0;
  left: 0;
  border-color: transparent transparent transparent #FFC700;
}

.notify-me.heading_animation_two_btn:after {
  top: 0;
  right: 0;
  border-color: transparent #FFC700 transparent transparent;
}

.notify-me.heading_animation_two_btn:hover {
  color: #000000;
}

.notify-me.heading_animation_two_btn:hover:before, 
.notify-me.heading_animation_two_btn:hover:after {
  border-width: 80px 262.5px;
}

/***************************************************/

.notify-me.mouse_ripple_btn {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.mouse_ripple_btn span {
  position: absolute;
  width: 0;
  height: 0;
  background-color: #F21D1D;
  border-radius: 100%;
  z-index: -1;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -moz-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -o-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -ms-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
}

.notify-me.mouse_ripple_btn:hover span {
  width: 225%;
  height: 562.5px;
}

/***************************************************/

.notify-me.particle_animation_btn {
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.particle_animation_btn:before, 
.notify-me.particle_animation_btn:after,
.notify-me.particle_animation_btn span:before,
.notify-me.particle_animation_btn span:after {
  content: "";
  width: 100%;
  height: 0;
  background-color: rgba(255, 199, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: 0.5s ease-in-out;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  -ms-transition: 0.5s ease-in-out;
}

.notify-me.particle_animation_btn:after,
.notify-me.particle_animation_btn span:before {
  top: auto;
  bottom: 0;
}

.notify-me.particle_animation_btn span:before,
.notify-me.particle_animation_btn span:after {
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
}

.notify-me.particle_animation_btn:hover {
  color: #000000;
}

.notify-me.particle_animation_btn:hover:before, 
.notify-me.particle_animation_btn:hover:after,
.notify-me.particle_animation_btn:hover span:before,
.notify-me.particle_animation_btn:hover span:after {
  height: 80px;
}

/***************************************************/

.sidebar_open_icon.solid_light_lyt_sidebar_open_icon,
.page-sm-title.solid_light_lyt_page_sm_title {
  color: #000000;
}

.notify-me.solid_light_lyt_btn {
  background-image: url(../images/bg-shape/solid-light-btn-bg.png);
  background-position-y: 40px;
  background-repeat: repeat-x;
  background-size: 100px;
  transition: background-position 0.6s, background-size 0.6s, color 0.6s;
  -webkit-transition: background-position 0.6s, background-size 0.6s, color 0.6s;
  -moz-transition: background-position 0.6s, background-size 0.6s, color 0.6s;
  -o-transition: background-position 0.6s, background-size 0.6s, color 0.6s;
  -ms-transition: background-position 0.6s, background-size 0.6s, color 0.6s;
}
.notify-me.solid_light_lyt_btn:hover {
  background-size: 250px;
  background-position-x: 190px;
  background-position-y: -50px;
}

/***************************************************/

.sidebar_social {
  display: inline-block;
  margin-top: 30px;
}

.sidebar_social_heading h2 {
  color: #000000;
  font-weight: 700;
  font-size: 24px;
  vertical-align: middle;
  font-family: 'Mulish', sans-serif;
  text-transform: capitalize;
  margin: 0;
}

.sidebar_social ul {
  margin: 0;
  padding: 0;
  display: inline-block;
  margin-top: 20px;
}

.sidebar_social ul li {
  float: left;
  margin: 0 15px;
}

.sidebar_social ul li:first-child {
  margin-left: 0;
}

.sidebar_social ul li:last-child {
  margin-right: 0;
}

.sidebar_social ul li a svg {
  width: 24px;
  height: 24px;
  color: #1BBCFE;
  transition: all .2s ease;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -o-transition: all .2s ease;
  -ms-transition: all .2s ease;
}

.sidebar_social ul li a svg:hover {
  color: #000000;
}

/***************************************************/

.solid-light-layout-body {
  overflow: hidden;
}