/*!
Theme Name: Webfirefly
Theme URI: http://underscores.me/
Author: Mohammad Masum
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: webfirefly
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Webfirefly is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

 
body {
	line-height: 1.6;
	font-size: 18px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #424759;
	background: #fff;
}
	
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
	
	
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #191D2A;
	font-family: 'Work Sans', sans-serif;
	font-weight: 600;
}
	
h1 {
	font-size: 42px;
}
	
h2 {
	font-size: 36px;
}
	
h3 {
	font-size: 30px;
}
	
h4 {
	font-size: 24px;
}
	
h5 {
	font-size: 18px;
}
	
h6 {
	font-size: 16px;
}
	
a {
	text-decoration: none;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
	
a:hover,
a:focus {
	text-decoration: none;
	outline: none;
}
	
button:focus {
	outline: none;
	box-shadow: none;
}
	
.slick-slide:focus {
	outline: none;
	box-shadow: none;
}
	
.slick-slide img {
	display: inline-block !important;
}
	
button {
	border: none;
}
	
img {
	max-width: 100%;
	height: auto;
}
	
input:focus,
textarea:focus {
	outline: 1px solid #D1232A;
	box-shadow: none;
	border: 1px solid transparent;
}
  
input {
	color: #D6D6D6;
	width: 100%;
	background: transparent;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #384758;
	padding: 0 20px;
	line-height: 55px;
	border-radius: 10px;
}
  
textarea {
	color: #D6D6D6;
	width: 100%;
	background: transparent;
	font-size: 16px;
	font-weight: 500;
	border: 1px solid #384758;
	padding: 20px;
	line-height: auto;
	border-radius: 10px;
	height: 170px;
}
  
input::placeholder, textarea::placeholder {
	color: #D6D6D6;
	font-size: 16px;
}
  
	
/* Main Title Area css
============================================================================================ */ 
.section-title h2 {
	font-size: 60px;
}
  
.section-title .lined {
	position: relative;
	background: var(--gradient-g-1, linear-gradient(137deg, #FF0025 0.07%, #6D0000 103.84%));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
	
.section-title .lined:after {
	content: "";
	position: absolute;
	background: url(assets/img/line.png);
	height: 30px;
	width: calc(100% + 30px);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	top: 100%;
	left: 0;
}
  
/* Start Primary btns css
============================================================================================ */
.primary-btn {
	display: flex;
    align-items: center;
}
.primary-btn .label {
	position: relative;
    font-weight: 600;
    font-size: 18px;
    padding: 13px 35px;
    color: #fff;
    background: #2BA420;
    border-radius: 1000px;
    transition: .3s;
    border: 2px solid #2BA420;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
	transform: translateX(0);
}
.primary-btn .icon {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #2BA420;
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    background: #2BA420;
	transition: .3s;
	transition-delay: .3s;
}

.primary-btn:hover .label {
	animation: button_label .3s linear;
}

.primary-btn:hover .icon {
	transform: translateX(10px);
}


.primary-btn.bordered-btn .label {
    background: transparent;
}
.primary-btn.bordered-btn .icon {
    background: transparent;
}


@keyframes button_label {
    0% {
		transform: translateX(0);
  	}
	50% {
		transform: translateX(-15px);
	}
	100% {
		transform: translateX(0);
	}
}
	
/* gradient-bg css
============================================================================================ */
.gradient-bg {
	background: -webkit-linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
	background: -moz-linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
	background: -o-linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
	background: linear-gradient(90deg, #fe690b 0%, #ff8f1e 100%);
}
	
.text-gradient {
	background: linear-gradient(90deg, #F861D7 0%, #8E3EFF 55.84%, #4AB5FE 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}
	
/* Start Header area style
============================================================================================ */
.header-area {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	background: transparent;
	transition: 0.3s;
	padding: 0;
}
  
.header-area .navbar {
	background: transparent;
	padding: 0px;
	border: 0px;
	border-radius: 0px;
}

.header-area .navbar .navbar-nav li:not(:last-child) {
	margin-right: 50px;
}
  
.header-area .navbar .navbar-nav li {
	position: relative;
}
  
.header-area .navbar .navbar-nav li a {
	padding: 0px;
	display: inline-block;
	position: relative;
	font-size: 18px;
	color: #191D2A;
}
  
.header-area .navbar .navbar-nav li a:hover, .header-area .navbar .navbar-nav li a.active {
	color: #30ACF3;
}

.header-btn {
    background: #31ACF3;
    color: #fff;
    padding: 17px 20px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.13);
	border: 1px solid #31ACF3;
}

.header-btn:hover {
    background: #fff;
	color: #31ACF3;
}

.header-area.sticky, .mobile-header.sticky {
    background: #fff;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
}
  
.offcanvas-wraper {
	position: fixed;
	width: 300px;
	background: #fff;
	height: 100%;
	top: 0;
	padding-top: 130px;
	z-index: 99;
	left: -300px;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	display: none;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
}
  
.offcanvas-wraper.active {
	left: 0;
}
  
.mobile-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	display: none;
	padding: 5px 0;
	background: transparent;
	transition: 0.3s;
}
  
.offcanvas-wraper li a {
	color: #191D2A;
	font-size: 16px;
}
  
.offcanvas-wraper li {
	margin-bottom: 10px;
	  position: relative;
}
  
.custom-logo {
	transition: .3s;
}



/* banner css */
.type-animation {
    text-align: center;
}

.type-animation h1 {
    font-size: 64px;
    font-weight: 400;
    margin-bottom: 0;
}

.type-animation .typed, .type-animation .typed-cursor {
    font-size: 64px;
    font-weight: 600;
}

/* newsletter  */
.newsletter {
    background: #FDFEFF;
    display: flex;
    align-items: center;
    border-radius: 8px;
	border: 1px solid #63BFF4;
	height: 80px;
	padding: 15px;
}

.newsletter input {
    border: none;
    background: transparent;
	border-radius: 0;
	color: #424759;
	font-size: 20px;
	padding: 0;
	line-height: inherit;
}

.newsletter input:focus {
    outline: none;
	border: none;
	box-shadow: none;
}

.newsletter input[type="submit"] {
    width: 130px;
    background: #30ACF3;
    color: #fff;
	font-size: 20px;
	font-weight: 500;
	border-radius: 10px;
	padding: 9px 17px;
	line-height: inherit;
}


.newsletter input::placeholder {
    font-size: 20px;
    font-weight: 400;
	color: #858585;
}

.bg-position {
	background-size: 100% 100%;
}

.approach-box:hover {
	transform: scale(1.1)!important;
} 

.approach-box .arrow-btn {
	opacity: 0;
	visibility: hidden;
	transition: .3s;
} 

.approach-box:hover .arrow-btn {
	opacity: 1;
	visibility: visible;
} 

.impact-box {
    position: relative;
    z-index: 1;
}

.impact-box:before {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    border-radius: 18px;
    background: var(--G, linear-gradient(118deg, #EE1F88 5.38%, #7900FF 79.55%));
    transition: .3s;
    opacity: 0;
}

.impact-box:hover:before {
    opacity: 1;
}

.impact-box .impact-icon {
    transition: .3s;
}

.impact-box:hover .impact-icon {
    filter: brightness(0) invert(1);
}



.circle-animation {
    transform-origin: center;
    animation: rounded_circle 10s linear infinite;
}


@keyframes rounded_circle {
    0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
  25% {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  75% {
    -webkit-transform: rotate3d(0, 0, 1, 270deg);
    transform: rotate3d(0, 0, 1, 270deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}


.key-features-slider .slick-track {
    display: flex;
}

.key-features-slider .slick-slide>div {
    height: 100%!important;
}

.key-features-slider .slick-slide {
    margin-right: 15px;
    margin-left: 15px;
	height: auto;
}

.single-features-slider {
    background: #313452;
    border-radius: 18px;
    padding: 30px;
	height: 100%;
}

.single-features-slider h3 {
    color: #fff;
    font-size: 30px;
	margin-bottom: 15px;
}

.single-features-slider img {
    margin-bottom: 20px;
}

.single-features-slider p {
    color: #fff;
    font-size: 20px;
    margin-bottom: 0;
}