/*
Author       : Aminul Islam
Template Name: Appsland - App Landing Page Html5 Template
Version      : 1.0
*/
/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (body, link color, section-title, preloader btn, overlay, section-padding etc)
    02. BOOTSTRAP NAVIGATION OVERRIDES
    03. START HOME DESIGN
    04. START FEATURE DESIGN
    05. START HOW WORK DESIGN
    06. START WHY CHOOSE US DESIGN
    07. START COUNTER DESIGN
    08. START PORTFOLIO DESIGN
    09. START TEAM DESIGN
    10. START TESTIMONIAL DESIGN
    11. START PARTNER LOGO DESIGN
    12. START BLOG DESIGN
    13. START NEWSLETTER DESIGN
    14. START PRICING TABLE DESIGN
    15. START CONTACT DESIGN
    16. START MAP DESIGN
    17. START SOCIAL PROFILE DESIGN
    18. START FOOTER DESIGN
    19. START SECTION TOP  DESIGN
  =============================================================*/
/*
* ----------------------------------------------------------------------------------------
* 01.GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/

/**************************************
 * 01. START GENERAL STYLE
 *************************************/
body {
  font-family: var(--thm-font);
  line-height: 30px;
  color: var(--thm-p);
}
:root {
	--thm-font: 'Open Sans', sans-serif;
	--thm-font1: 'Poppins', sans-serif;
	--thm-base: #314AFF;
	--thm-color1: #FE552A;
	--thm-color: #3498db;
	--thm-black: #000000;
	--thm-black1: #333333;
	--thm-white: #ffffff;
	--thm-ase: #afb2bf;
	--thm-gray: #8e8e8e;
	--thm-f6: #F1F8FF;
	--thm-f7: #f7f9fc;
	--thm-fb: #f6f6f6;
	--thm-f3: #f3f3f3;
	--thm-p: #79798b;
	--thm-line: -webkit-linear-gradient(left, #4357fb, #20b8ff);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
	margin-top: 0;
	margin-bottom: 0;
	color:var(--thm-black);
	font-weight:700;
}
.btn,
.btn:focus,
button,
button:focus {
  outline: none !important;
}
img {
	max-width: 100%;
	height: auto;
	border: 0;
}
a {
  text-decoration: none !important;
  outline: none;
}
p {
  font-size: 15px;
  font-family:var(--thm-font1);
}
a {
	color: inherit;
	text-decoration: underline;
}
.page-wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-width: 300px;
	z-index: 9;
	overflow: hidden;
}
.section-sm {
  padding-bottom: 60px;
  padding-top: 60px;
  position: relative;
}

.atf-section-padding {
  padding-bottom: 100px;
  padding-top: 100px;
  position: relative;
}

.section-lg {
  padding-bottom: 110px;
  padding-top: 110px;
  position: relative;
}
dl, ol, ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.bg-lightan {
	background: linear-gradient(to top, rgba(24, 30, 234, 0.1) 30%, #25236a 180%);
}

.atf-home-center {
  display: table;
  width: 100%;
  height: 100%;
}
.atf-home-desc-center {
  display: table-cell;
  vertical-align: middle;
}

.bg-overlay {
  background-color: rgba(36, 42, 53, 0.8);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
}
.bg {
 background:var(--thm-black);
}
.color-overlay {
  background-color: var(--thm-color);
  opacity: 0.9;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
}

.overlay-gradient {
  background: linear-gradient(to right, #4763cb, #c0392b);
  opacity: 0.9;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
}

.flex-1 {
  flex: 1;
}

.box-shadow {
	box-shadow: -2px 3px 188px -43px rgba(230, 204, 204, 0.37) inset;
	-webkit-box-shadow: -2px 3px 188px -43px rgba(230, 204, 204, 0.37) inset;
	-moz-box-shadow: -2px 3px 188px -43px rgba(230, 204, 204, 0.37) inset;
}
.box-shadow-1{
  box-shadow: 0 0 0 1px rgba(190, 190, 190, 0.04), 0 1.8vw 3vw -0.7vw rgba(0, 0, 0, 0.07);
}

.btn-round {
  border-radius: 30px;
}

.row > * {
  position: relative;
}

hr {
  border: 1px solid #e2e2e2;
}
.page-wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-width: 300px;
	z-index: 9;
	overflow: hidden;
}
::-webkit-input-placeholder {
	color: inherit;
}
::-moz-input-placeholder {
	color: inherit;
}
::-ms-input-placeholder {
	color: inherit;
}
/**************************************
 * START FONT SIZE DESIGN
 *************************************/
.f-10 {
  font-size: 10px;
}

.f-12 {
  font-size: 12px;
}

.f-13 {
  font-size: 13px;
}

.f-14 {
  font-size: 14px;
}

.f-15 {
  font-size: 15px;
}

.f-16 {
  font-size: 16px;
}

.f-17 {
  font-size: 17px;
}

.f-18 {
  font-size: 18px;
}

.f-19 {
  font-size: 19px;
}

.f-20 {
  font-size: 20px;
}
/**************************************
 * END FONT SIZE DESIGN
 *************************************/
/**************************************
 * START LINE HEIGHT DESIGN
 *************************************/
.line-height_1_4 {
  line-height: 1.4;
}

.line-height_1_6 {
  line-height: 1.6;
}

.line-height_1_8 {
  line-height: 1.8;
}
/**************************************
 * START BTN DESIGN
 *************************************/
 .atf-themes-btn i{
	margin-right: 10px;
}
.atf-themes-btn {
	background: -webkit-linear-gradient(left, #4357fb, #20b8ff);
	color: var(--thm-white);
	padding: 13px 32px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.3s ease-in-out;
	display: inline-block;
}
.atf-themes-btn:hover {
	background: -webkit-linear-gradient(left, #20b8ff, #4357fb);
	color: var(--thm-white);
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}

/**************************************
 * END LINE HEIGHT DESIGN
 *************************************/

/* Preloader*/

.preloader {
	background: var(--thm-line);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}
.spinner {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	font-size: 10px;
	text-indent: -12345px;
	z-index: 10000;
}
.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}
/**************************************
 * START BACK TO TOP DESIGN
 *************************************/
 
.back-to-top.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    right: 3%;
    top: 84%;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.back-to-top {
    position: fixed;
    cursor: pointer;
    right: 3%;
    top: 85%;
    background-color: var(--thm-color);
    box-shadow: 0px 0px 10px rgb(0 0 0 / 31%);
    z-index: 4;
    width: 50px;
    text-align: center;
    height: 50px;
    line-height: 42px;
    border-radius: 50px;
    -webkit-transform: scale(0);
    transform: scale(0);
    visibility: hidden;
    -webkit-transition: .9s;
    transition: .9s;
}

.back-to-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--thm-line);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s;
}


.back-to-top i {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    color: var(--thm-white);
    -webkit-transition: .5s;
    transition: .5s;
    font-size: 20px;
}



@-webkit-keyframes bounce {

    0%,
    to {
        transform: translateY(5%);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}

@keyframes bounce {

    0%,
    to {
        transform: translateY(5%);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}
 

@-webkit-keyframes pulse {
    0% {
        border-color: #48e9d1; 
        box-shadow: 0 0 rgba(72, 233, 209, 0.66);
    }

    70% {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }

    to {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }
}

@keyframes pulse {
    0% {
        border-color: #48e9d1; 
        box-shadow: 0 0 rgba(72, 233, 209, 0.66);
    }

    70% {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }

    to {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }
}
.v-middle {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
}
 /**************************************
 * END BACK TO TOP DESIGN
 *************************************/
/**************************************
/*END SCROLL TO TOP*/
/* START SECTION TITLE DESIGN */
.atf-section-title h2 {
	font-weight: 700;
	text-transform: capitalize;
	letter-spacing: 2px;
	color:var(--thm-black);
	font-size:40px;
}
.sec_icon  {
	position: relative;
	margin:0 auto;
	width:400px;
	top:-7px;
}

.sec_icon span::before {
	position: absolute;
	content: '';
	bottom: 0px;
	width: 130px;
	border-bottom: 3px solid #e4e4e4;
	left: 135px;
}
.sec_icon span::after {
	position: absolute;
	content: '';
	bottom: 0px;
	width: 43px;
	border-bottom: 3px solid var(--thm-color);
	right: 178px;
}
/*
* ----------------------------------------------------------------------------------------
* 01.END GENERAL STYLE
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 02.START BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
.atf_header_top {
	background-color: var(--thm-color) !important;
	padding: 5px 0;
	color: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease 0s;
	position: relative;
	z-index: 1;
}
.atf_header_top::after {
	background: var(--thm-base) none repeat scroll 0 0;
	content: "";
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: calc(70% + 0px);
	-webkit-transform: skewX(-30deg);
	transform: skew(-30deg);
	border-right: 4px solid #fff;
}
.atf_header-social{
	list-style-type: none;
	text-align:right;
}
.atf_header-social a:hover {
	background:  var(--thm-white)!important;
	color:  var(--thm-black)!important;
}
.atf_header-social a {
	display: inline-block !important;
	margin: 0 4px;
	background: var(--thm-color);
	padding: 5px 10px !important;
	transition: all 0.3s ease 0s;
	width: 40px;
	height: 40px;
	line-height: 30px;
	text-align: center;
}
.atf_header_top i{
	padding-right: 5px;
	color: rgba(255, 255, 255, 0.8);
}
.atf_header_top p{
	margin-bottom: 0;color: rgba(255, 255, 255, 0.8);
}

.atf_header_top_left p,
.atf_header_top_right p{
	display: inline-block;
	
}

.atf_header_top_left p{
	padding-right: 12px;
}
.atf_header_top_right p{
	padding-left: 8px;
}
/* .atf-top-header {
	margin-top: 38px;
}  */
#navigation.navbar-fixed {
	margin-top: 0;
}
.site-logo img {
	width: 147px;
	height: auto;
	margin-top: 10px;
}
.bg-faded {
	background-color: transparent;
	transition: all 0.5s ease 0s;
}
.navbar-fixed {
	z-index: 999;
	position: fixed;
	padding: 8px 0 0;
	opacity: .98;
	width: 100%;
	top: 0;
	/* -webkit-animation: fadeInDown 800ms;
	animation: fadeInDown 800ms; */
	-webkit-backface-visibility: hidden;
	border-radius: 0px;
	background: var(--thm-base);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.07);
}
#navigation {
	padding: 10px 0 0px;
	/* border-bottom: 1px solid rgb(247, 243, 243 , 0.1);
	 background-color: transparent;  */
}
#navigation.navbar-fixed {
	padding-top: 5px;
	padding-bottom: 5px;
}
.header_right {
	display: flex;
	flex-basis: auto;
}
#main-menu ul{
	list-style-type: none;
}
#main-menu ul li{
	display: inline-block;
	margin-left: 25px;
	position: relative;
}
#main-menu ul li a {
	color: var(--thm-white);
	font-weight: 400;
	text-transform: capitalize;
	font-family: var(--thm-font);
	transition: .5s;
	font-size: 17px;
	padding: 24px 0 26px;
	border-bottom: 1px solid transparent;
	display: block;
}

#navigation.navbar-fixed #main-menu ul li a {
	color: var(--thm-white);
	padding: 22px 0 22px;
}
#navigation.navbar-fixed #main-menu ul li a:hover,
#navigation.navbar-fixed #main-menu ul li a:focus,
#main-menu ul li a:hover,
#main-menu ul li a:focus{
	color: var(--thm-color1);
}
#main-menu ul li > a:hover,
#main-menu ul li > a:focus{
	border-bottom: 1px solid var(--thm-color);
}
#navigation #main-menu ul li a:hover,
#navigation #main-menu ul li a:focus,
#navigation.navbar-fixed #main-menu ul li a:hover,
#navigation.navbar-fixed #main-menu ul li a:focus{
	border-bottom: 1px solid transparent;
}
.slicknav_nav_icon{
	color: var(--thm-white);
	font-size: 24px;
}
#mobile_menu{
	display: none;
}
.navbar-light .logo-black {
	display: none;
}
.navbar-light.navbar-fixed .site-logo .logo-white {
	display: none;
}
.navbar-light.navbar-fixed .site-logo .logo-black {
	display: block;
}
/*-------------------------------
# dropdwon menu 
--------------------------------*/
#navigation #main-menu ul li ul,
#navigation #main-menu ul li ul li ul {
	background: var(--thm-color);
	box-shadow: 0 0 10px 3px rgba(0,0,0,.05);
	left: 0;
	list-style: outside none none;
	margin: 0;
	opacity: 0;
	/* padding: 10px; */
	position: absolute;
	text-align: left;
	top: 115%;
	transition: all 0.3s ease 0s;
	visibility: hidden;
	width: 180px;
	z-index: 999;
	border-radius: 4px;
}
#navigation #main-menu ul li  ul li{
	position: relative;
}
#navigation #main-menu ul li ul li ul{
	top: 0;
	right: auto;
	left: 205px;
}
#navigation #main-menu ul li:hover ul,
#navigation #main-menu ul li ul li:hover > ul{
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
	visibility: visible;
	top:100%;
}
#navigation #main-menu ul li ul li {display: block; margin: 0; padding: 0;}
#navigation.navbar-fixed #main-menu ul li ul li a,
#navigation #main-menu ul li ul li a {
	color: var(--thm-white);
	display: block;
	font-size: 14px;
	line-height: 30px;
	font-weight: 600;
	padding: 5px 12px;
	position: relative;	
	transition: all 0.3s ease 0s !important;
	visibility: inherit !important;
	opacity: inherit !important;
	text-transform: capitalize;
}

#navigation #main-menu ul li ul li a:hover {
	color: var(--thm-white) !important;
	text-decoration: underline;
	padding-left: 15px;
	border-left: 3px solid var(--thm-white) !important;
}

@media only screen and (max-width:767px) { 
  .navbar-brand {
    padding-top: 20px;
  }
}
.atf-menu-btn a{
	color: var(--thm-white)! important;
	padding: 5px 12px !important;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
	display:inline-block;
	border:none;
	overflow:visible;
}
.atf-menu-btn a:hover {	
	box-shadow:0 0 15px rgba(0,0,0,0.2);
	color: var(--thm-black)! important;
}
/*
* ----------------------------------------------------------------------------------------
* 02.END BOOTSTRAP NAVIGATION OVERRIDES
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 03.START HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
#home{
	position:relative;
	z-index: 1;
}
.atf-header-area {
    height: 750px;
    overflow: hidden;
	z-index:1;
}
.atf-single-details img {
	width: 50px;
	height: 50px;
}
.atf-header-area::before {
	content: '';
	position: absolute;
	right: 0px;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.0);
	z-index: -1;
}
.atf-single-details h5 {
	background: var(--thm-color1);
	display: inline-block;
	padding: 5px 10px;
	text-transform: capitalize;
}
.atf-align-items-details {
	display: flex;
	align-items: center;
	min-height: 100%;
}
.atf-header-area .atf-single-details h2 {
	font-size: 50px;
	font-weight: 700;
	color: var(--thm-white);
	text-shadow: 1px 1px 13px rgba(0,0,0, 0.4);
}
.atf-single-details h5 {
	-webkit-animation: 1.7s .9s fadeInDown both;
	animation: 1.7s .9s fadeInDown both; }
.atf-single-details h2 {
	-webkit-animation: 1.7s .9s fadeInLeft both;
	animation: 1.7s .9s fadeInLeft both; }

.atf-single-details p {
	-webkit-animation: 1.7s .8s fadeInLeft both;
	animation: 1.7s .9s fadeInLeft both; }

.atf-single-details .atf-home-btn{
	-webkit-animation: 1.7s 1s fadeInUp both;
	animation: 1.9s 1s fadeInUp both; }
	
.atf-single-details .atf-main-btn{
	-webkit-animation: 1.7s 1s fadeInUp both;
	animation: 1.9s 1s fadeInUp both; }
	

.atf-menu-btn a {
	padding: 5px 25px !important;
	-moz-transition: all 0.5s ease-in-out 0s;
	-ms-transition: all 0.5s ease-in-out 0s;
	-o-transition: all 0.5s ease-in-out 0s;
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
	display: inline-block;
	border: none;
}
.atf-menu-btn a:hover {	
	box-shadow:0 0 15px rgba(0,0,0,0.2);
}
.atf_about_img,
.home_img_area1,
.atf-work-img,
.atf-faq-img,
.atf_feature_img   {
	animation-name: float-bob;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	-webkit-animation-name: float-bob;
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: float-bob;
	-moz-animation-duration: 2s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-ms-animation-name: float-bob;
	-ms-animation-duration: 2s;
	-ms-animation-iteration-count: infinite;
	-ms-animation-timing-function: linear;
	-o-animation-name: float-bob;
	-o-animation-duration: 2s;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
}

/* Bob */

@-webkit-keyframes float-bob {
	0% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	50% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	100% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
}

@keyframes float-bob {
	0% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}

	50% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}

	100% {
		-webkit-transform: translateY(-20px);
		transform: translateY(-20px);
	}
}
/*
* ----------------------------------------------------------------------------------------
* 03.END HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 04.SATRT BANNER HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
.atf-particles-area {
  position: relative;
  z-index: 1;
}
.atf-particle-one {
	background:var(--thm-line);
	height: 850px;
	position:relative;
	z-index: 1022;
}
.atf-particle-one .atf-mailchamp-subscribe .form-control {
	margin-bottom: 0;
	width: 86%;
	height: 55px;
}
.atf-particle-one .atf-mailchamp-subscribe .atf-themes-btn {
	position: absolute;
	right: 94px;
	padding: 11px 18px;
	top: 5px;
	display: inline-block;
}
/*
* ----------------------------------------------------------------------------------------
* 04.END BANNER HOME DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 05.START ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/
.atf-about-content h3 {
	margin-bottom: 22px;
}
.social_icon i {
	font-size: 15px;
	background: var(--thm-line);
	color: var(--thm-white);
	cursor: pointer;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	margin-right: 6px;
	border-radius: 8px;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}
.social_icon i:hover {
	background: var(--thm-color1);
}
/*
* ----------------------------------------------------------------------------------------
* START COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
#counter_area{
	position: relative;
	color: var(--thm-white);
	background: var(--thm-line);
}

.single_counter {
	position: relative;
	z-index: 10;
	padding: 40px;
	box-shadow: 0 0 30px rgba(0,0,0,0.2);
}
.counter_icon i {
	display: block;
	font-size: 50px;
	margin-bottom: 25px;
	color: var(--thm-white);
}
.counter{
	font-size: 30px;
	color: var(--thm-white);
	font-weight: 800;
	margin: 0;
	display: inline-block;
	padding: 0 3px;
	letter-spacing: 3px;
	font-family: var(--thm-font);
}
.counter-title {
	font-weight: 400;
	text-transform: capitalize;
	font-size: 18px;
	margin-top: 15px;
	letter-spacing: 2px;
}
/*
* ----------------------------------------------------------------------------------------
* END COUNTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 05. END ABOUT DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 04.START FEATURE DESIGN
* ----------------------------------------------------------------------------------------
*/

#features{
	background:var(--thm-f7);
}
.single_features {
	box-shadow:0 0 10px rgba(0,0,0,0.1);
	background: var(--thm-white);
	padding: 15px 5px;
	margin: 15px 0;
}
.single_features:hover i, .single_features:hover h4 {
	color: var(--thm-white);
}
.single_features:hover {
	background-image: url(../img/service-bg.jpg);
	background-color: #4d557d;
	background-size: cover;
	background-position: center center;
	color: var(--thm-white);
	transition:all 0.3s ease-in-out 0s;
}
.single_features i {
	float: left;
	text-align: center;
	font-size: 55px;
	line-height: 65px;
	transition: all 0.2s ease-in-out 0s;
	color: var(--thm-color);
	margin: 0px 15px;
}
.single_features h4 {
    font-weight: 700;
    letter-spacing: 1px;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.single_features p {
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
	overflow:hidden;
	margin-top:10px;
}
.single_features_img img {
	display:inline-block;
	-webkit-transition: all 0.8s ease-in-out 0s;
    transition: all 0.8s ease-in-out 0s;
}

/*
* ----------------------------------------------------------------------------------------
* END FEATURE DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* START SETUP  DESIGN
* ----------------------------------------------------------------------------------------
*/
.atf-main-setup{
	margin:10px 0;
}
.atf-setup {
	padding: 15px 20px 25px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	background: var(--thm-white);
}
.atf-setup-content h3{
	margin-top:15px;
}
.atf-setup-icon i {
	font-size: 40px;
	background-image: linear-gradient(-90deg,var(--thm-base),var(--thm-color));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/*
* ----------------------------------------------------------------------------------------
* END SETUP DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 09. START VIDEO DESIGN  
* ----------------------------------------------------------------------------------------
*/
#work{
	background:var(--thm-f6);
}
.atf-video-overlay {
	background: rgba(0,0,0,0.4);
	height: 100%;
	width: 100%;
}
.atf_home_img {
	position: relative;
	height:100%;
}
.atf-watch-img img {
	border-radius:8px;
	width:100%;
}

.atf_home_img .waves-box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}
.atf_home_img .iq-video {
	background: linear-gradient(90deg,var(--thm-base),var(--thm-color));
	display: inline-block;
	width: 70px;
	height: 70px;
	text-align: center;
	font-size: 20px;
	color: var(--thm-white);
	border-radius: 100%;
	line-height: 53px;
	z-index: 9;
	position: relative;
	border: 8px solid var(--thm-white);
}
.atf_home_img .iq-video i {
	margin-left: 3px;
}
.atf_home_img .iq-waves {
	position: absolute;
	left: -30px;
	top: -30px;
	z-index: 2;
}
.atf_home_img .iq-waves .wave-1 {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.atf_home_img .iq-waves .waves {
	position: absolute;
	width: 130px;
	height: 130px;
	background: rgb(253, 248, 252);
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	border-radius: 50%;
	background-clip: padding-box;
	-webkit-animation: waves 3s ease-in-out infinite;
	animation: waves 3s ease-in-out infinite;
}
.atf_home_img .iq-waves .wave-1 {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.atf_home_img .iq-waves .wave-2 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.atf_home_img .iq-waves .wave-3 {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
@-webkit-keyframes waves {
	0% {
		-webkit-transform: scale(0.2, 0.2);
		transform: scale(0.2, 0.2);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
	50% {
		opacity: 0.9;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	}
	100% {
		-webkit-transform: scale(0.9, 0.9);
		transform: scale(0.9, 0.9);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
}
@keyframes waves {
	0% {
		-webkit-transform: scale(0.2, 0.2);
		transform: scale(0.2, 0.2);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
	50% {
		opacity: 0.9;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
	}
	100% {
		-webkit-transform: scale(0.9, 0.9);
		transform: scale(0.9, 0.9);
		opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
}
/*
* ----------------------------------------------------------------------------------------
* 09.END VIDEO DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* . START SCREENSHOT DESIGN  
* ----------------------------------------------------------------------------------------
*/
.screenshot .swiper-slide{
    width: 300px;
}
/*
* ----------------------------------------------------------------------------------------
* END SCREENSHOT DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* START TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/
#testimonials .sec_icon span::after {
	border-bottom: 3px solid var(--thm-black);
}
#testimonials{
	background: -webkit-linear-gradient(left, #20b8ff, #4357fb);
	background: -moz-linear-gradient(left, #20b8ff, #4357fb);
}
.top-icon, .bottom-icon {
	display: block;
	font-size: 40px;
	color: var(--thm-white);
	text-align: center;
	margin: 0 auto;
	padding: 30px 0;
}
.testimonial{
    padding: 0 40px;
    position: relative;
    overflow: hidden;
	background: #20b8ff;
	background: -moz-linear-gradient(left, #20b8ff, #4357fb);
    color: var(--thm-white);
    z-index: 1;
}
.testimonial:after{
    content: "";
    width: 150px;
    height: 107%;
    background: #3498db ;
    position: absolute;
    top: -20px;
    left: -60px;
    transform: matrix(1, 0, 0.5, 1, 150, 0);
    z-index: -1;
}
.testimonial .pic{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    margin: 10px 25px 0 0;
    position: relative;
}
.testimonial .pic img{
    width: 100%;
    height: auto;
}
.testimonial .testimonial-content{
    width: 70%;
    float: right;
    padding: 30px 0;
}
.testimonial .testimonial-title{
    font-size: 22px;
    margin: 0 0 20px;
    text-transform: capitalize;
	color:#fff;
}
.owl-theme .owl-controls .owl-page span{
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #1ec4f3;
}
.owl-theme .owl-controls .owl-page:active span{
    color: #1ec4f3;
}
/* owl theme */
.atf-main-testimonials.owl-theme .owl-dots, .owl-theme .owl-nav {
	margin-top: 35px ! important;
}
.atf-main-testimonials.owl-theme .owl-nav.disabled + .owl-dots {
    margin-left: 50px;
    line-height: .7;
}
.atf-main-testimonials .owl-controls{
	 margin-top: -25px;
}
.atf-main-testimonials.owl-theme .owl-dots .owl-dot span {
	width: 8px;
	height: 8px;
	margin: 0 8px;
	border-radius: 5px;
	background: transparent;
	border: 1px solid var(--thm-black);
	transition: 0.3s all ease-in-out;
}
.atf-main-testimonials.owl-theme .owl-dots .owl-dot.active span,
.atf-main-testimonials.owl-theme .owl-dots .owl-dot:hover span {
	width: 35px;
	transition: 0.3s all ease-in-out;
	border: 1px solid var(--thm-color);
	background: var(--thm-color);
}
#testimonials .atf-main-testimonials.owl-theme .owl-dots .owl-dot.active span,
#testimonials.atf-main-testimonials.owl-theme .owl-dots .owl-dot:hover span {
	width: 35px;
	transition: 0.3s all ease-in-out;
	border: 1px solid var(--thm-color);
	background: var(--thm-white);
}
@media only screen and (max-width: 767px){
    .testimonial{
        text-align: center;
    }
    .testimonial .pic{
        float: none;
        margin: 20px auto 0;
    }
    .testimonial .testimonial-content{
        width: 100%;
        float: none;
        padding: 20px 0;
    }
    .testimonial .description{
        font-size: 14px;
    }
}
@media only screen and (max-width: 480px){
    .testimonial{ padding: 0 20px; }
    .testimonial .testimonial-title{
        font-size: 22px;
    }
}
/*
* ----------------------------------------------------------------------------------------
* END TESTIMONIAL DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* START PRICING PLAN DESIGN
* ----------------------------------------------------------------------------------------
*/
.pricing_table_area{
    background: var(--thm-white);
}
.pricingTable {
	text-align: center;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	padding-bottom: 40px;
	border-radius: 10px;
	transform: scale(1);
	transition: all 0.5s ease 0s;
}
.pricingTable .pricingTable-header {
	padding: 20px 0;
	background: -webkit-linear-gradient(left, #4357fb, #20b8ff);
	border-radius: 10px 10px 0% 50%;
	transition: all 0.5s ease 0s;
}
.pricingTable .pricingTable-header i{
    font-size: 50px;
    margin-bottom: 10px;
    transition: all 0.5s ease 0s;
}
.pricingTable .price-value{
    font-size: 30px;
    color: var(--thm-color);
    transition: all 0.5s ease 0s;
}
.pricingTable .month{
    display: block;
    font-size: 14px;
}
.pricingTable .pricingTable-header i,
.pricingTable .price-value,
.pricingTable .month{
    color: var(--thm-white);
}
.pricingTable .heading{
    font-size: 24px;
    color: var(--thm-black);
    margin-bottom: 20px;
    text-transform: uppercase;
}
.pricingTable .pricing-content ul{
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}
.pricingTable .pricing-content ul li {
	line-height: 30px;
	border: 1px solid #eee;
	padding: 7px 0;
}
.pricingTable .pricingTable-signup a:hover{
  color:var(--thm-white); 
}
/*
* ----------------------------------------------------------------------------------------
* END PRICING PLAN DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* 05.START FREQUENTLY DESIGN
* ----------------------------------------------------------------------------------------
*/
#faq {
	background:var(--thm-fb);
}
.accordion-button:not(.collapsed) {
	color: var(--thm-white);
	background: var(--thm-line);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.0);
}
.accordion-body {
	line-height: 28px;
}
/*
* ----------------------------------------------------------------------------------------
* END  FREQUENTLY DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* START BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/
.post-slide:hover{
	box-shadow: 0 0 30px #ddd;
}
.post-slide{
    background:var(--thm-white);
    margin: 0 15px;
	border: 1px solid #ddd;
	transition: all 0.3s ease 0s;
}
.post-slide > img{
    width: 100%;
    height: auto;
}
.post-slide .post-title{
    text-transform: uppercase;
    padding: 15px 15px;
}
.post-slide .post-title > a{
    font-size: 18px;
    display: inline-block;
	letter-spacing:0.7px;
    transition: all 0.3s ease 0s;
}
.post-slide .post-title > a:hover{
    text-decoration: none;
    color:var(--thm-color);
}
.post-slide .post-description {
	padding: 0 20px;
	margin: 0 0 20px 0;
}
.post-bar{
    list-style: none;
    padding:10px 20px;
    border-top:1px solid #e8e7e7;
}
.post-bar > li{
    display: inline-block;
    margin: 5px;
    color:var(--thm-black);
	font-size:14px;
}
.post-bar > li > a{
    color:#4d557d;
    transition:0.3s ease;
}
.post-bar > li > a:hover{
    text-decoration: none;
    color:var(--thm-color);
}
.post-bar > li i{
    margin-right: 7px;
}
/*
* ----------------------------------------------------------------------------------------
* END  BLOG DESIGN
* ----------------------------------------------------------------------------------------
*/

/*
* ----------------------------------------------------------------------------------------
* START CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
.form-message.error {
	color: var(--thm-white);
	margin-top: 20px;
}
.contact_title{
	font-size: 16px;
	text-transform: uppercase;
	margin-bottom: 25px;
	margin-top: 0;
	color:var(--thm-white);
}
.contact_form {
	padding: 27px;
	background: transparent;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	background: var(--thm-line);
}
.form-control,
.form-control  input[type="text"],
.form-control  input[type="email"],
.form-control  textarea {
	background: var(--thm-white);
}
.form-control{
	border-radius: inherit;
	height: 50px;
	line-height: 50px;
	border: none;
	box-shadow: inherit;
	padding: 10px 18px;
	border-radius: 4px;
}
.form-control:focus{
	border-color: #00c9fd;
	box-shadow: inherit;
}
.contact_form textarea{
	height: 118px;
	line-height: 26px;
	border-radius: 4px;
}
.contact_form .form-group{
	margin-bottom: 25px;
}
.contact_form  input[type="submit"] {
	width: 100%;
	border: none;
	font-weight: 500;
	padding: 14px;
	border-radius: 4px;
	cursor: pointer;
	-webkit-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s eas 0s;
	border-radius: 3px;
	background: -webkit-linear-gradient(left, #20b8ff, #4357fb);
	
}
.contact_form  input[type="submit"]:hover {
	background: -webkit-linear-gradient(left, #4357fb, #20b8ff);
	box-shadow:0 0 10px rgba(0,0,0,0.2);
}
.address-area{
	box-shadow: 0 0 30px rgba(0,0,0,0.1);
	padding: 25px;
	background:var(--thm-line);
}
.address-area .address-heading {
	text-transform: uppercase;
	font-size: 18px;
	margin-top:10px;
	letter-spacing: 1px;
	color:var(--thm-white);
}
.single-address .address-heading {
	margin:20px 0;
} 
.address-area p{
	margin: 0 0 12px;
}
.media-left, .media > .pull-left {
	padding-right: 0px;
}
.media {
	margin-top: 4px;
}
.media-left i {
	margin-right: 15px;
	font-size: 20px;
	color:var(--thm-white);
}
.media-body p{
	color:var(--thm-white);
}
/*
* ----------------------------------------------------------------------------------------
* .END CONTACT DESIGN
* ----------------------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------------------
* START FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
#footer {
	background-repeat: no-repeat;
}
.single_footer img {
	margin-left: -20px;
}
.single_footer ul li {
	display: inline-block;
}
.single_footer ul li a {
	padding: 0px 12px;
	text-transform:uppercase;
	color:var(--thm-white);
	font-size:14px;
}
.footer_content p a:hover,
.single_footer ul li a:hover{
	color:var(--thm-color);
}
.footer_menu {
	margin: 10px 0 30px;
}
.footer_content p{
	color:var(--thm-white);
	padding-top:20px;
}
.footer_content p a{
	color:var(--thm-color1);
	transition:0.3s ease-in-out 0s;
}
.form-message .error{
	margin-top:20px;
}
.aft_footer_2{
	position:relative;
}
.atf-mailchamp-border .form-group .form-control{
	line-height:40px;
}
.atf-mailchamp-subscribe{
	position:relative;
}
.aft_footer_2{
	margin-top:100px;
}
.aft_footer_2 .atf-mailchamp-border {
	position: absolute;
	top: -180px;
	right: 50px;
	background: var(--thm-line);
	padding: 10px 20px;
	border-radius: 8px;
}
.atf-mailchamp-headding h2{
	font-size: 30px;
	color: var(--thm-white);
}
.atf-mailchamp-subscribe form input:focus {
	box-shadow: none;
	outline: 0 none;
	border-color: var(--thm-color);
}
.atf-mailchamp-subscribe form input {
	background: var(--thm-white);
	color: var(--thm-black);
	border: 1px solid #eee;
	width: 100%;
	height: 45px;
	padding-left: 15px;
	font-size: 14px;
	border-radius: 5px;
	display:inline-block;
}
.atf-mailchamp-subscribe  .form-group{
	margin-bottom:0;
}
#subscribe-button i {
	font-size: 30px;
}
.atf-mailchamp-subscribe .atf-themes-btn {
	position: absolute;
	right: 24px;
	padding: 2px 18px;
	top: 75px;
}
.atf-mailchamp-subscribe  .atf-themes-btn:hover {
	color:var(--thm-white);
}
.atf-mailchamp-subscribe .atf-subscription-label {
	color: var(--thm-white);
	margin-top: 15px;
}
/*
* ----------------------------------------------------------------------------------------
* END FOOTER DESIGN
* ----------------------------------------------------------------------------------------
*/
/* RESPONSIVE DESIGN */

@media only screen and (max-width:1199px) {
	.particles-section .content-heading h2 {
		font-size: 45px;
		line-height:60px;
	}
	.welcome_area_text2 {
		margin-top:35px;
		margin-bottom:40px;
	}
	.home_img_area2{
		margin-top:45px;
	}

}
@media only screen and (max-width:992px) {
	.particles-section .content-heading h2 {
		font-size: 45px;
		line-height:60px;
	}
	.welcome_area_text2 {
		margin-top:35px;
		margin-bottom:40px;
	}
	.home_img_area2{
		margin-top:45px;
	}

}

@media only screen and (max-width:480px) {
	.particles-section .content-heading h2 {
		font-size: 40px;
		line-height:50px;
	}

}
@media only screen and (max-width:320px) {
	.particles-section .content-heading h2 {
		font-size: 30px;
		line-height:30px;
	}

}
@media only screen and (max-width: 991px){
	.slicknav_nav {
		width: 300px;
		float: right;
	}
	
	#main-menu{
		display: none;
	}
	/* .atf-top-header {
		margin-top: 70px;
	} */
	#main-menu ul li a .arrow-btn{
		display:none;
	}
	#mobile_menu{
		display: block;
		width: 100%;
	}
	.site-logo{
		margin-bottom:16px;
	}
	.slicknav_nav{
		background-color: var(--thm-black);
	}
	#navigation #mobile_menu li a{
		color: var(--thm-white);
		font-weight: 400;
		font-family: var(--thm-font);
	}
	#navigation #mobile_menu li li a{
		color: var(--thm-black);
	}
	#navigation #mobile_menu li i{
		display: none;
	}
	#navigation ul li ul, #navigation ul {
		transition: .5s;
	}
	#navigation.navbar-fixed #mobile_menu li a{
		color: var(--thm-white);
	}
	.slicknav_nav a{
		padding: 1px 0px;
		transition: .5s;
	}
	#navigation #mobile_menu li a:hover,
	#navigation #mobile_menu li a:focus{
		color: var(--thm-white);
	}
	.slicknav_btn {
		top: 18px;
	}
	.atf-testi-images{
		margin-bottom:30px;
	}
	.border-left{
		border-left:none;
	}
}
@media only screen and (max-width: 575px){
	
	.slicknav_btn {
		margin: 0;
		text-decoration: none;
		position: absolute;
		top: 22px;
		right: 17px;
	}
	.atf-section-title h3{
		font-size:30px;
	}
	
}
@media only screen and (max-width: 991px){
	.mt-sm-30{
		margin-top:30px;
	}
	.mb-sm-30{
		margin-bottom:30px;
	}
	.pt-sm-30{
		padding-top:30px;
	}
	.pb-sm-30{
		padding-bottom:30px;
	}
}