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

Template Name: Anaton - SaaS Landing Page Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Outfit
Main Color   : #ff8a43

-------------------------------------

[Typography]

Body copy:    15px 'Outfit', sans-serif
Header:     36px 'Outfit', sans-serif
Input, textarea:  16px 'Outfit', sans-serif
Sidebar heading:  22px 'Outfit', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
        - Accordion
        - Tabs
    02. Preloader
    03 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
    04. Banner
        - Content Double (Version One)
        - Software Banner (Version Two)
        - Animated Banner (Version Three)
    05. Feature
        - Version One
        - Version Two
        - Version Three
    06. Brand / Partner
    07. Overview / Software Details
    08. Services
        - Version One
        - Version Two
        - Version Three
        - Service Details
    09. World Wide user / Total Customers
    10. Pricing
        - Version One
        - Version Two
        - Version Three
    11. Testimonials
        - Version One
        - Version Two
    12. Faq
        - Version One
        - Version Two
    13. Work Process
    13. Why Choose Us
    15. Sign Up Form
    16. Technology / Featured With
    17. Software Premium Content
    18. Team
    19. Team Details
    20. Projects
    21. Projects Details
    22. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    23. Error 404
    24. Footer
    25. PHP Contact Form
    26. Others

*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');


/* Varialbes */
:root {
	--font-default: 'Outfit', sans-serif;
	--font-heading: 'Outfit', sans-serif;
	--fontawesome: "Font Awesome 5 Pro";
	--black: #000000;
	--dark: #10393b;
	--dark-secondary: #041637;
	--white: #ffffff;
	--color-primary: #ff8a43;
	--color-secondary: #fa7070;
	--color-optional: #5153ff;
	--color-heading: #04000b;
	--color-paragraph: #666666;
	--box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6);
	--box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4);
	--box-shadow-regular: 0px 2px 12px 0px #e7e7e7;
	--bg-gray: #efefff;
	--bg-gradient: linear-gradient(90deg, #ff8a43  20%, #fa7070 100%);
	--bg-gradient-reverse: linear-gradient(90deg, var(--color-optional)  0%, #a60599 100%);
}



/* ============================================================== 
     # Reset Browsers
=================================================================== */

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body,
html {
	height: 100%;
}

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	scroll-behavior: smooth;
}

html, body, div, span, img,
ol, ul, li, a, p, h1, h2, h3,
h4, h5, footer, header, nav {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

.wrapper {
	height: 100%;
}

img {
	border: none;
	outline: none;
	max-width: 100%;
}

a {
	outline: none;
	text-decoration: none;
	color: var(--color-heading);
}

a img {
	border: none;
}

a:active {
	outline: none;
	text-decoration: none;
	color: var(--color-heading);
	opacity: 1;
}

a:focus {
	outline: none;
	text-decoration: none;
	color: var(--color-heading);
}

a:hover {
	outline: none;
	text-decoration: none;
	color: var(--color-primary);
	opacity: 1;
}

.secondary a:hover {
	color: var(--color-optional);
}

button {
	outline: medium none;
}

input {
	border: 1px solid #e7e7e7;
	border-radius: inherit;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	min-height: 50px;
}

input:focus {
	outline: none;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}

textarea:focus {
	outline: none;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}

ul {
	list-style-type: none;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

b {
	font-weight: 800;
}

strong {
	font-weight: 800;
}

.row {
	--bs-gutter-x: 30px;
}


/* ============================================================== 
    # Template Default Styles
=================================================================== */

body {
	font-family: var(--font-default);
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	overflow-x: hidden;
	background-color: var(--white);
	color: var(--color-paragraph);
}

h1, h2, h3, h4, h5 {
	color: var(--color-heading);
	font-weight: normal;
	line-height: 1.2;
	font-family: var(--font-heading);
	letter-spacing: 0;
	margin: 0;
	margin-bottom: 15px;
}

h1 {
	font-size: 40px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 27px;
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 18px;
}

a, .btn, button {
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	outline: medium none;
	text-decoration: none;
	font-weight: 600;
}

p {
	color: var(--color-paragraph);
	margin: 0 0 15px;
	text-transform: none;
	font-weight: 400;
	font-family: var(--font-default);
}


/* ============================================================== 
    # Helper CSS
=================================================================== */

@media (min-width: 1250px) {
	.container {
		max-width: 1250px;
	}
}

@media only screen and (min-width: 1367px) {
	.container-stage {
		margin-left: calc((100% - 1250px)/ 2);
		width: auto;
		min-width: auto;
		max-width: inherit;
		padding-right: 0;
	}
}

@media only screen and (max-width: 767px) {
	.row {
		--bs-gutter-x: 1.5rem;
	}
}

.bg-cover {
	background-position: center center !important;
	background-size: cover !important;
}

.bg-fixed {
	background-attachment: fixed !important;
	background-position: center center !important;
	background-size: cover !important;
}

.bg-gray {
	background: var(--bg-gray);
}

.bg-dark {
	background-color: var(--dark) !important;
}

.text-light {
	color: var(--white);
}

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light p,
.text-light span,
.text-light a {
	color: var(--white);
}

.default-padding,
.default-padding-bottom {
	position: relative;
}

.default-padding {
	padding-top: 120px;
	padding-bottom: 120px;
}

@media only screen and (max-width: 767px) {
	.default-padding {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

.default-padding-bottom {
	padding-bottom: 120px;
}

@media only screen and (max-width: 767px) {
	.default-padding-bottom {
		padding-bottom: 50px;
	}
}

.default-padding.bottom-less {
	padding-top: 120px;
	padding-bottom: 90px;
}

@media only screen and (max-width: 767px) {
	.default-padding.bottom-less {
		padding-top: 50px;
		padding-bottom: 20px;
	}
}

.default-padding-bottom.bottom-less {
	margin-bottom: -30px;
}

@media only screen and (max-width: 767px) {
	.default-padding-bottom.bottom-less {
		margin-bottom: 0;
	}
}

@media only screen and (min-width: 1200px) {
	.align-center {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}
}

.relative {
	position: relative;
}

.overflow-hidden {
	overflow: hidden;
}

.heading {
	font-weight: 600;
	margin-bottom: 25px;
	margin-top: -5px;
	font-size: 42px !important;
	line-height: 1.3;
}

.heading span {
	font-weight: 400;
}

.site-heading {
	margin-bottom: 60px;
}

.site-heading strong {
	display: inline-block;
	font-weight: 600;
	position: relative;
	z-index: 1;
}

.site-heading strong::after {
	position: absolute;
	left: 0;
	bottom: -5px;
	content: "";
	height: 100%;
	width: 100%;
	background: url(../img/shape/35.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;
	z-index: -1;
}

.title {
	font-weight: 600;
	font-size: 42px;
	line-height: 1.3;
}

.site-heading .title {
	margin-bottom: 0;
}

.sub-title {
	text-transform: uppercase;
	color: var(--color-primary);
	font-weight: 600;
	background: var(--bg-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	position: relative;
	z-index: 1;
}

.site-heading p {
	margin-bottom: 0;
	margin-top: 25px;
	padding: 0 10%;
}

@media (max-width: 767px) {
	.site-heading p {
		padding: 0;
	}
}

@media only screen and (max-width: 767px) {
	.site-heading {
		margin-bottom: 30px;
	}
}

.heading-left {
	position: relative;
	z-index: 1;
	margin-bottom: 60px;
}

.heading-left .heading {
	font-weight: 600;
	margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.heading-left .heading {
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 767px) {
	.heading-left .heading {
		margin-bottom: 15px;
	}
}

.heading-left p {
	margin-bottom: 0;
}

.heading-left .btn {
	margin-top: 30px;
}

@media only screen and (max-width: 767px) {
	.heading-left {
		margin-bottom: 30px;
	}
}

.bg-dark .heading-left p {
	opacity: 0.8;
}



/* ============================================================== 
    # Video Play Button 
=================================================================== */

@-webkit-keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

@keyframes pulse-border {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

/* ============================================================== 
    # Template Animation
=================================================================== */

/* Video Paly */
@-webkit-keyframes video-play {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

@keyframes video-play {
	0% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1;
	}

	100% {
		-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0;
	}
}

/*Zoom Animation */

/* Slider Zoom Effect */
@-webkit-keyframes zoom {
	from {
		-webkit-transform: scale(1, 1);
	}

	to {
		-webkit-transform: scale(1.2, 1.2);
	}
}

@keyframes zoom {
	from {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}

	to {
		-webkit-transform: scale(1.2, 1.2);
		transform: scale(1.2, 1.2);
	}
}

/* Spiner Animation */

/*Preloader Spiner Animation */
@-webkit-keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}

@keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}


/* Spiner Animation */

/*Preloader Spiner Animation */
@-webkit-keyframes spinnerReverse {
	to {
		-webkit-transform: rotateZ(-360deg);
		transform: rotateZ(-360deg);
	}
}

@keyframes spinnerReverse {
	to {
		-webkit-transform: rotateZ(-360deg);
		transform: rotateZ(-360deg);
	}
}

/* Infinite Up Down Animation */
@keyframes UpDown {
	0% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}

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

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

/* Animation UpDown */

@-webkit-keyframes UpDown {
	0% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}

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

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

/* Animation Left Right */

/* Fade Left Right */
@keyframes fadeLeftRight {
	0%, 100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}

	50% {
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
	}
}

@-webkit-keyframes fadeLeftRight {
	0%, 100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}

	50% {
		-webkit-transform: translateX(100px);
		transform: translateX(100px);
	}
}

/* Animation Right Left */

@keyframes fadeRightLeft {
	0%, 100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}

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

@-webkit-keyframes fadeRightLeft {
	0%, 100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}

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

/* Animation Zoom Up Down */

/* Zoom Up Down */
@keyframes zoomUpDown {
	0%, 100% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}

	50% {
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
	}
}

@-webkit-keyframes zoomUpDown {
	0%, 100% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}

	50% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
}

/* Animation Moving */

/* Mooving Animation */
@-webkit-keyframes moving {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}

	20% {
		-webkit-transform: translate(0px, -30px);
		transform: translate(0px, -30px);
	}

	50% {
		-webkit-transform: translate(-100px, -30px);
		transform: translate(-100px, -30px);
	}

	70% {
		-webkit-transform: translate(-100px, 0px);
		transform: translate(-100px, 0px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}
}

@keyframes moving {
	0% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}

	20% {
		-webkit-transform: translate(0px, -30px);
		transform: translate(0px, -30px);
	}

	50% {
		-webkit-transform: translate(-100px, -30px);
		transform: translate(-100px, -30px);
	}

	70% {
		-webkit-transform: translate(-100px, 0px);
		transform: translate(-100px, 0px);
	}

	100% {
		-webkit-transform: translate(0px, 0px);
		transform: translate(0px, 0px);
	}
}

/* Animation Rotation */
@keyframes infinite-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes infinite-rotate {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* Button Border Animation */
@-webkit-keyframes open {
	0% {
		width: 0;
		height: 0;
	}

	50% {
		width: 100px;
		height: 0;
	}

	100% {
		width: 100px;
		height: 55px;
	}
}

@keyframes open {
	0% {
		width: 0;
		height: 0;
	}

	50% {
		width: 100px;
		height: 0;
	}

	100% {
		width: 100px;
		height: 55px;
	}
}

@-webkit-keyframes openB {
	0% {
		width: 0px;
	}

	100% {
		width: 100px;
	}
}

@keyframes openB {
	0% {
		width: 0px;
	}

	100% {
		width: 100px;
	}
}

/* Animation Shine (A shine color will move inside the text) */

@-webkit-keyframes shine {
	0% {
		background-position: 0;
	}

	60% {
		background-position: 180px;
	}

	100% {
		background-position: 180px;
	}
}

@keyframes shine {
	0% {
		background-position: 0;
	}

	60% {
		background-position: 180px;
	}

	100% {
		background-position: 180px;
	}
}

@-webkit-keyframes infiniteMove {
	0% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}

	50% {
		border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
	}

	100% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
}

@keyframes infiniteMove {
	0% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}

	50% {
		border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
	}

	100% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
}

@-webkit-keyframes infiniteMove2 {
	0% {
		border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%;
	}

	50% {
		border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
	}

	100% {
		border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%;
	}
}

@keyframes infiniteMove2 {
	0% {
		border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%;
	}

	50% {
		border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
	}

	100% {
		border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%;
	}
}

/* ============================================================== 
    # Button Styles
=================================================================== */
.btn {
	display: inline-block;
	font-weight: 500;
	text-transform: capitalize;
	transition: all 0.35s ease-in-out;
	overflow: hidden;
	border-radius: 7px;
	border: 2px solid transparent;
	-webkit-box-shadow: inherit;
	box-shadow: none !important;
	font-size: 16px;
	letter-spacing: 0;
	padding: 13px 30px;
	background: #E7EDF8;
	position: relative;
	z-index: 1;
}

.btn:focus, .btn.active {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	border: 2px solid transparent;
}

.btn:hover {
	background-color: var(--color-primary);
	color: var(--white);
}

.btn.btn-border {
	border: 2px solid #dddddd;
	background: transparent;
	position: relative;
	z-index: 1;
	overflow: hidden;
	font-weight: 600;
}

.btn.btn-border::after {
	position: absolute;
	top: inherit;
	right: inherit;
	bottom: inherit;
	left: -5%;
	content: "";
	height: 150px;
	width: 115%;
	z-index: -1;
	background-color: var(--dark);
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	-webkit-transform: translateY(-45%) skew(25deg) scale(0);
	transform: translateY(-45%) skew(25deg) scale(0);
}

.btn.btn-border:hover::after {
	-webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
	transform: translateY(-45%) skew(25deg) scale(1.2);
}

.btn.btn-border:hover {
	border-color: var(--dark);
}

.btn.btn-border.animation::after {
	position: absolute;
	top: 0;
	right: inherit;
	bottom: inherit;
	left: 0;
	content: "";
	height: 100%;
	width: 0;
	z-index: -1;
	background: #e7e7e7;
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}

.btn.btn-border.animation:hover {
	border-color: #e7e7e7;
	color: var(--dark);
}

.btn.btn-border.animation:hover::after {
	width: 100%;
}

.btn.btn-gradient {
	border: none;
	color: var(--white);
}

.btn.btn-gradient::after {
	position: absolute;
	top: 0;
	right: inherit;
	bottom: inherit;
	left: 0;
	content: "";
	height: 100%;
	width: 100%;
	z-index: -1;
	background-image: linear-gradient(to left, #ff8a43 , #e03535, #ff8a43 );
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	background-size: 220%;
}

.btn.btn-gradient:hover::after {
	background-position: -70% 0;
}

.btn.btn-gradient.active {
	background-position: -70% 0;
}

.btn.btn-theme {
	color: var(--white);
	border: none;
	background: var(--color-primary);
}

.btn.btn-theme::after {
	position: absolute;
	top: inherit;
	right: inherit;
	bottom: inherit;
	left: -5%;
	content: "";
	height: 150px;
	width: 115%;
	z-index: -1;
	background-color: var(--dark);
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	-webkit-transform: translateY(-45%) skew(25deg) scale(0);
	transform: translateY(-45%) skew(25deg) scale(0);
}

.btn.btn-theme:hover::after {
	-webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
	transform: translateY(-45%) skew(25deg) scale(1.2);
}

button {
	display: inline-block;
	font-weight: 500;
	text-transform: capitalize;
	transition: all 0.35s ease-in-out;
	overflow: hidden;
	border-radius: 7px;
	border: 2px solid transparent;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	font-size: 16px;
	letter-spacing: 0;
	padding: 14px 40px;
	background: #E7EDF8;
	position: relative;
	z-index: 1;
	color: var(--white);
	border: none;
	background: var(--color-primary);
}

button::after {
	position: absolute;
	top: inherit;
	right: inherit;
	bottom: inherit;
	left: -5%;
	content: "";
	height: 150px;
	width: 115%;
	z-index: -1;
	background-color: var(--dark);
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	-webkit-transform: translateY(-45%) skew(25deg) scale(0);
	transform: translateY(-45%) skew(25deg) scale(0);
}

button:hover::after {
	-webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
	transform: translateY(-45%) skew(25deg) scale(1.2);
}

button i {
	margin-right: 4px;
}

.btn.btn-theme.secondary {
	color: var(--white);
	border: none;
	background: var(--color-optional);
}

.btn.btn-theme.secondary::after {
	position: absolute;
	top: inherit;
	right: inherit;
	bottom: inherit;
	left: -5%;
	content: "";
	height: 150px;
	width: 115%;
	z-index: -1;
	background-color: var(--dark);
	-webkit-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	-webkit-transform: translateY(-45%) skew(25deg) scale(0);
	transform: translateY(-45%) skew(25deg) scale(0);
}

.text-light .btn.btn-theme.secondary::after {
	background-color: var(--white);
}

.text-light .btn.btn-theme.secondary:hover {
	color: var(--color-heading);
}

.btn.btn-theme.secondary:hover::after {
	-webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
	transform: translateY(-45%) skew(25deg) scale(1.2);
}

.btn i {
	position: relative;
	top: 1px;
	margin-left: 5px;
}

.btn.circle {
	border-radius: 30px !important;
}

.btn-md {
	padding: 16px 52px;
	font-size: 17px;
}

.btn-sm {
	padding: 16px 50px;
	font-size: 14px;
}

/* ============================================================== 
    # Nice Select Styles
=================================================================== */
.nice-select {
	-webkit-tap-highlight-color: transparent;
	background-color: var(--white);
	border: solid 1px #e8e8e8;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	clear: both;
	cursor: pointer;
	display: block;
	float: left;
	font-family: inherit;
	font-size: 16px;
	font-weight: normal;
	height: 50px;
	line-height: 50px;
	outline: none;
	padding-left: 18px;
	padding-right: 30px;
	position: relative;
	text-align: left !important;
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
	width: 100%;
	margin-bottom: 15px;
}

.nice-select:hover {
	border-color: #dbdbdb;
}

.nice-select:active, .nice-select:focus {
	border-color: #999999;
}

.nice-select::after {
	border-bottom: 2px solid #999999;
	border-right: 2px solid #999999;
	content: '';
	display: block;
	height: 5px;
	margin-top: -6px;
	pointer-events: none;
	position: absolute;
	right: 12px;
	top: 50%;
	-webkit-transform-origin: 66% 66%;
	transform-origin: 66% 66%;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: all 0.15s ease-in-out;
	transition: all 0.15s ease-in-out;
	width: 5px;
}

.nice-select.right {
	float: right;
}


/* ============================================================== 
    # Breadcrumb Styles
=================================================================== */
.breadcrumb-area {
	padding: 150px 0;
	padding-top: 200px;
	position: relative;
	z-index: 1;
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center right;
}

.breadcrumb-area .row {
	position: relative;
	z-index: 1;
}

.breadcrumb-area .breadcrumb {
	background: transparent none repeat scroll 0 0;
	display: inline-block;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

.breadcrumb-area .breadcrumb > li + li::before {
	content: "\f105";
	font-family: "Font Awesome 5 Pro";
	font-weight: 700;
	padding: 0 5px;
	color: var(--white);
	display: none;
}

.breadcrumb-area .breadcrumb li {
	padding: 0 10px;
	position: relative;
	display: inline-block;
	z-index: 1;
	font-weight: 600;
	color: var(--white);
	font-family: var(--font-default);
	text-transform: uppercase;
	font-size: 14px;
}

.breadcrumb-area .breadcrumb li a {
	color: var(--white);
	font-family: var(--font-default);
	font-weight: 600;
}

.breadcrumb-area .breadcrumb li a:hover {
	color: var(--color-primary);
}

.breadcrumb-area.secondary .breadcrumb li a:hover {
	color: var(--white);
}

.breadcrumb-area .breadcrumb li.active {
	color: var(--color-primary);
}

.breadcrumb-area.secondary .breadcrumb li.active {
	color: var(--color-optional);
}

.breadcrumb-area .breadcrumb li::after {
	content: "\f105";
	font-family: "Font Awesome 5 Pro";
	font-weight: 500;
	right: -5px;
	position: absolute;
	line-height: 0;
	top: 50%;
	font-size: 14px;
}

.breadcrumb-area .breadcrumb li i {
	margin-right: 3px;
}

.breadcrumb-area .breadcrumb li:last-child::after {
	display: none;
}

.breadcrumb-area h1 {
	display: inline-block;
	font-weight: 600;
	margin-top: -10px;
	position: relative;
	z-index: 1;
}

.breadcrumb-area h1::after {
	position: absolute;
	left: -100px;
	top: -50px;
	content: "";
	height: 150px;
	width: 150px;
	background: var(--white);
	z-index: -1;
	border-radius: 50%;
	opacity: 0.05;
}

@media only screen and (max-width: 767px) {
	.breadcrumb-area {
		padding: 80px 0;
	}
}


/* ============================================================== 
    # Topbar Styles
=================================================================== */

/* ============================================================== 
    # Banner Styles
=================================================================== */

/* ============================================================== 
    # Banner Custom Style
=================================================================== */

.banner-style-one-area {
	background-size: cover;
	background-position: bottom;
	position: relative;
	z-index: 1;
}

.banner-style-one .content {
	padding-top: 220px;
	padding-bottom: 220px;
}

.banner-shape-left-top {
	position: absolute;
	left: 0;
	top: 0;
	height: 60%;
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.5;
	z-index: -1;
}

.banner-shape-left-top img {
	width: 100%;
}

.banner-style-one .thumb {
	padding-left: 20%;
	margin-right: -20%;
	position: relative;
	z-index: 1;
	margin-bottom: 150px;
}

.banner-style-one .thumb .inner {
	position: absolute;
	left: 0;
	bottom: 80px;
	max-width: 200px;
}

.banner-style-one .thumb .thumb-right {
	position: absolute;
	max-width: 250px;
	right: 50px;
	bottom: -80px;
}

.banner-style-one .information {
	margin-top: -50px;
}

.banner-style-one .thumb .shape {
	position: absolute;
	right: -100px;
	top: -100px;
	z-index: -1;
	max-width: 100px;
}

.banner-style-one h2 {
	font-size: 50px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 20px;
}

.banner-style-one p {
	padding-right: 15%;
	font-size: 18px;
	line-height: 1.7;
	opacity: 0.7;
}

/* Banner Style Two */

/* Banner Style Three */


/* ============================================================== 
    # Feature
=================================================================== */

.bg-contain-right-bottom {
	background-size: 10%;
	background-repeat: no-repeat;
	background-position: right bottom;
}

.feature-style-one {
	padding: 50px 30px;
	box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%);
	border-radius: 10px;
	margin-top: 30px;
	background: var(--white);
}

.feature-style-one:first-child {
	margin-top: 0;
}

.feature-style-one h4 {
	font-weight: 600;
	margin: 0;
}

.feature-style-one p {
	margin: 0;
	margin-top: 15px;
}

.feature-style-one i {
	display: inline-block;
	font-size: 60px;
	margin-bottom: 20px;
	color: var(--color-heading);
}

.feature-style-one.active {
	position: relative;
	border: 1px solid var(--color-primary);
	z-index: 1;
	box-shadow: inherit;
}

.feature-style-one.active i {
	color: var(--color-primary);
	margin-bottom: 30px;
}

.feature-style-one.active::after {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	height: 100%;
	width: 100%;
	background: var(--color-primary);
	z-index: -1;
	opacity: 0.1;
}

.feature-style-one-box {
	position: relative;
	z-index: 1;
}

.feature-shape {
	position: absolute;
	left: -25%;
	bottom: -30px;
	z-index: -1;
	max-width: 43%;
	transform: rotate(45deg);
}

.list-check li {
	color: var(--color-heading);
	font-weight: 500;
	font-size: 18px;
	line-height: 1.6;
	position: relative;
	z-index: 1;
	padding-left: 30px;
	margin-top: 10px;
}

.list-check {
	margin-top: 30px;
}

.list-check li::after {
	position: absolute;
	left: 0;
	top: 0;
	content: "\f00c";
	font-family: "Font Awesome 5 Pro";
	font-weight: 100;
}

.list-check li:first-child {
	margin-top: 0;
}

.description-layout-one h2 {
	margin-bottom: 25px;
}

/* Feature Style Two */


/* Feature Style Three */


/* ============================================================== 
    # About Style
=================================================================== */
.about-thumb {
	position: relative;
	padding-left: 100px;
	padding-top: 80px;
}

.about-thumb .user-fun-fact {
	position: absolute;
	left: 0;
	top: 0;
	background: var(--bg-gradient);
	padding: 50px;
}

.about-thumb .fun-fact .counter {
	color: var(--white);
}

.about-thumb .medium {
	color: var(--white);
}

.about-thumb .user-fun-fact .fun-fact {
	border-color: rgba(255, 255, 255, 0.4);
}


/* ============================================================== 
    # Brand Style
=================================================================== */
.brand-style-one .swiper img {
	height: 40px;
	margin: auto;
}

.brand-style-one-items {
	border-radius: 10px;
	position: relative;
	z-index: 1;
	background-size: 300px;
	background-repeat: no-repeat;
	background-position: right bottom;
}

.brand-style-one h2 {
	margin-bottom: 30px;
	font-weight: 600;
	font-size: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.brand-style-one h2 strong {
	display: inline-block;
	font-weight: 600;
	color: var(--color-primary);
	font-size: 50px;
	position: relative;
	z-index: 1;
	margin: 0 10px;
}

.brand-style-one h2 strong::after {
	position: absolute;
	left: 50%;
	top: 50%;
	content: "";
	height: 120%;
	width: 120%;
	background: url(../img/shape/7.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	z-index: -1;
	transform: translate(-50%, -50%);
}


/* ============================================================== 
    # Soft Info Style
=================================================================== */


/* ============================================================== 
    # Integrated Tools Style
=================================================================== */

.tools-integrations {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.tools-list .icon {
	height: 100px;
	width: 100px;
	background: var(--white);
	box-shadow: 0 3px 25px 0 rgb(0 0 0 / 10%);
	border-radius: 10px;
	font-size: 50px;
	position: relative;
	border: 2px solid #e3ecf6;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.tools-list li:nth-child(2) i {
	position: relative;
}

.tools-list li:nth-child(4) i {
	top: 50px;
}

.tools-list li:nth-child(7) i {
	top: -50px;
}

.tools-list li:nth-child(10) i {
	top: 50px;
}

.tools-list li {
	text-align: center;
	position: relative;
	display: inline-block;
	padding: 20px;
}

.tools-list li:nth-child(2n) .icon {
	width: 180px;
	height: 180px;
	line-height: 180px;
	font-size: 80px;
	position: relative;
}

.tools-list li:nth-child(3) .icon {
	top: 70px;
}

.tools-list li:first-child .icon {
	top: 70px;
}

.tools-list li:nth-child(4) .icon {
	top: 50px;
}

.tools-list li:nth-child(10) .icon {
	top: 50px;
}

.tools-list li:nth-child(5) .icon {
	position: relative;
	top: -50px;
}

.tools-list li:nth-child(6) .icon {
	top: 50px;
}

.tools-list li:nth-child(8) .icon {
	top: 50px;
}

.tools-list li:nth-child(9) .icon {
	top: 50px;
}

.tools-list .icon img {
	height: 45px;
}

.tools-list li:nth-child(2n) .icon img {
	height: 70px;
}

/* ============================================================== 
    # Choose Us Style
=================================================================== */


/* Choose Us Right Info */


/* ============================================================== 
    # Trial From Style
=================================================================== */

/* ============================================================== 
    # Software Details Style
=================================================================== */

.software-details-area {
	background-size: 17%;
	background-repeat: no-repeat;
	background-position: right top;
}

.circle-process li {
	display: inline-block;
	margin-right: 50px;
	border-right: 1px solid #e7e7e7;
	padding-right: 50px;
}

.circle-process li:last-child {
	margin-right: 0;
	padding-right: 0;
	border: none;
}

.circle-process li .circle {
	position: relative;
	display: inline-block;
	text-align: center;
}

.circle-process li .circle strong {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-weight: 600;
	color: var(--color-heading);
	font-size: 20px;
}

.circle-process li h4 {
	margin: 0;
	font-weight: 600;
	margin-top: 15px;
}

.soft-details-carousel .swiper-wrapper {
	padding-bottom: 200px;
	position: relative;
}

.soft-details-info h4 {
	font-weight: 600;
	font-size: 24px;
}

.list-circle li {
	position: relative;
	z-index: 1;
	padding-left: 20px;
	color: var(--color-heading);
	font-weight: 500;
	margin-top: 5px;
}

.list-circle.secondary li {
	color: var(--color-paragraph);
}

.list-circle li::after {
	position: absolute;
	left: 0;
	top: 10px;
	content: "";
	height: 10px;
	width: 10px;
	background: var(--bg-gradient);
	border-radius: 3px;
	opacity: 0.7;
}

.list-circle.secondary li::after {
	background: var(--color-optional);
	opacity: 1;
	height: 6px;
	width: 6px;
	border-radius: 50%;
	top: 12px;
}

.shape-left-bottom {
	position: absolute;
	left: 15%;
	bottom: 130px;
	z-index: 1;
}

/* ============================================================== 
    # Services Style
=================================================================== */
.software-style-one-area {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
}

.services-style-one {
	padding: 60px 30px;
	background: var(--white);
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.services-style-one.active::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: "";
	height: 100%;
	width: 100%;
	background: url(../img/shape/4.png);
	background-size: 20%;
	background-repeat: no-repeat;
	background-position: left bottom;
	z-index: -1;
	opacity: 0.3;
}

.services-style-one.active {
	background: var(--dark);
}

.services-style-one.active span, .services-style-one.active h4 a {
	color: var(--white);
}

.services-style-one.active .icon i::after {
	background: linear-gradient(180deg, #443b3b 40%, #FBFBFD00 70%);
}

.services-style-one .icon i {
	display: inline-block;
	color: var(--color-primary);
	position: relative;
	z-index: 1;
	margin-top: 30px;
	font-size: 65px;
	margin-bottom: 40px;
}

.services-style-one.active .icon i {
	color: var(--color-primary);
}

.services-style-one .icon i::after {
	position: absolute;
	left: 50%;
	top: -35px;
	content: "";
	height: 160px;
	width: 160px;
	background: linear-gradient(180deg, #fff0f0 40%, #FBFBFD00 70%);
	z-index: -1;
	transform: translateX(-50%);
	border-radius: 50%;
}

.services-style-one span {
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 700;
	display: block;
	margin-bottom: 5px;
}

.services-style-one h4 {
	font-size: 22px;
	margin-bottom: 0;
}

.icon-btn {
	display: inline-block;
	height: 50px;
	width: 50px;
	text-align: center;
	line-height: 50px;
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-radius: 50%;
	margin-top: 25px;
	position: relative;
	z-index: 9;
}

.icon-btn i {
	font-weight: 400;
}

/* Services Style TWo */


/* Services Details */

/* ============================================================== 
    # Team Style
=================================================================== */



/* ============================================================== 
     # Team Single  
=================================================================== */

/* ============================================================== 
    # App Type Style
=================================================================== */


/* ============================================================== 
    # Current User Style
=================================================================== */

.current-user-area {
	position: relative;
	z-index: 1;
}

.shape-left-bottom-extra {
	position: absolute;
	left: 0;
	bottom: 20%;
	max-width: 6%;
	z-index: -1;
}

.fun-fact .counter {
	position: relative;
	display: flex;
	align-items: center;
	font-size: 60px;
	font-weight: 600;
	color: var(--color-heading);
	line-height: 1;
	margin-bottom: 5px;
}

.user-fun-fact.secondary .fun-fact .counter {
	color: var(--color-optional);
}

.fun-fact .medium {
	font-weight: 400;
}

.user-fun-fact .fun-fact {
	border-top: 1px solid #e7e7e7;
	margin-top: 20px;
	padding-top: 20px;
}

.user-fun-fact .fun-fact:first-child {
	margin-top: 0;
	padding-top: 0;
	border: none;
}

.active-user-banner {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
	grid-column-gap: 40px;
	grid-row-gap: 40px;
}

.active-user-banner .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.active-user-banner .item img {
	margin-top: 40px;
	border-radius: 10px;
	box-shadow: 0 10px 30px 0 rgb(44 130 237 / 10%);
}

.active-user-banner .item img:first-child {
	margin-top: 0;
}

.active-user-info {
	position: relative;
	z-index: 1;
	padding: 30px;
}

.shape-globe {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 80%;
	width: 80%;
	z-index: -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.shape-globe img {
	animation: rotate-animation 30s infinite linear;
}

.fun-fact.flex {
	display: flex;
	align-items: center;
}

.fun-fact.flex img {
	height: 90px;
	margin-right: 30px;
	border-right: 1px solid #d8d5d5;
	padding-right: 30px;
}


/* Animation Rotation */
@keyframes rotate-animation {
	0% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(180deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


/* ============================================================== 
    # Pricing Style
=================================================================== */
.pricing-style-one {
	overflow: hidden;
	padding: 0;
	border-right: 2px solid var(--bg-gray);
	background: var(--white);
}

.pricing-style-one-items {
	margin-right: 15px;
	margin-left: 15px;
	position: relative;
	border-radius: 10px;
	box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%);
	margin-top: 30px;
	margin-bottom: 18px;
}

.pricing-style-one .item {
	background: var(--white);
}

.pricing-style-one .pricing-header {
	padding: 50px 30px;
	background: var(--dark);
}

.pricing-style-one:last-child {
	border: none;
	padding-left: 15px;
}

.pricing-style-one .pricing-content {
	padding: 45px 30px;
}

.pricing-style-one.active {
	transform: scale(1.1);
	border: 2px solid var(--color-primary);
	border-radius: 10px;
}

.pricing-style-one.active .pricing-header {
	background: var(--bg-gradient);
	padding: 53px 30px;
}

.pricing-style-one:first-child {
	border-radius: 10px 0 0 10px;
}

.pricing-style-one:last-child {
	border-radius: 0 10px 10px 0;
}

.pricing-style-one .pricing-header h4 {
	text-transform: capitalize;
	font-weight: 600;
	color: var(--white);
}

.pricing-style-one .pricing-header p {
	margin-bottom: 0;
	color: #cccccc;
}

.pricing-style-one.active .pricing-header p {
	color: var(--white);
}

.pricing-style-one span {
	display: block;
	font-weight: 500;
	color: var(--color-heading);
	margin-top: 15px;
	font-size: 15px;
}

.pricing-style-one .pricing-content h2 {
	font-weight: 600;
	font-size: 42px;
}

.pricing-style-one .pricing-content h2 strong {
	font-weight: 600;
	color: var(--color-secondary);
}

.pricing-style-one .pricing-content h2 sub {
	font-size: 15px;
	font-weight: 400;
	left: -5px;
}

.pricing-style-one .pricing-content h2 sup {
	font-size: 25px;
	top: -18px;
}

.pricing-style-one li {
	display: flex;
	margin-top: 7px;
}

.pricing-style-one li i {
	display: inline-block;
	font-weight: 100;
	margin-right: 10px;
	position: relative;
	top: 7px;
	font-size: 15px;
}

.pricing-style-one li:first-child {
	margin-top: 0;
}

/* Pricing Style Two */


/* ============================================================== 
     # Gallery 
=================================================================== */

.gallery-area .magnific-mix-gallery {
	margin: -15px;
}

.gallery-items.colums-3 .gallery-item {
	float: left;
	padding: 15px;
	width: 33.3333%;
}

.gallery-items.colums-2 .gallery-item {
	float: left;
	padding: 15px;
	width: 50%;
}

.gallery-style-one {
	overflow: hidden;
	border-radius: 15px;
}

.gallery-style-one .content {
	padding: 30px;
	border: 1px solid #e7e7e7;
	border-radius: 0 0 15px 15px;
}

.gallery-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gallery-list li {
	display: inline-block;
	margin-right: 15px;
	font-weight: 600;
	position: relative;
	z-index: 1;
	color: #888585;
}

.gallery-list li::after {
	position: absolute;
	right: -12px;
	top: 50%;
	content: "";
	height: 5px;
	width: 5px;
	background: #aaa3a3;
	z-index: -1;
	border-radius: 50%;
	margin-top: -1px;
}

.gallery-list li:last-child::after {
	display: none;
}

.gallery-list li:last-child {
	margin: 0;
}

.gallery-style-one h4 {
	margin-bottom: 10px;
}

.gallery-style-one .thumb {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.gallery-style-one .thumb a {
	position: absolute;
	left: 60px;
	bottom: 30px;
	height: 50px;
	width: 50px;
	line-height: 50px;
	text-align: center;
	background: var(--bg-gradient);
	color: var(--white);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	z-index: 9;
}

.gallery-style-one:hover .thumb a {
	left: 30px;
	opacity: 1;
	visibility: visible;
}

.gallery-style-one .thumb::after {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	height: 230px;
	width: 100%;
	background: var(--bg-gradient);
	transform: skewY(48deg);
	transition: all 0.35s ease-in-out;
	opacity: 0;
}

.gallery-style-one:hover .thumb::after {
	top: 100%;
	opacity: 0.6;
	background: var(--dark);
}

.gallery-style-one .thumb::before {
	position: absolute;
	left: 0;
	bottom: -100px;
	content: "";
	height: 50%;
	width: 100%;
	background: var(--bg-gradient);
	transform: skewY(48deg);
	transition: all 0.35s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

.gallery-style-one:hover .thumb::before {
	height: 200%;
	bottom: 0;
	opacity: 0.7;
	visibility: visible;
}



/* ============================================================== 
    # Testimonails Style
=================================================================== */

.testimonials-area {
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: left bottom;
	overflow: hidden;
}

.testimonial-style-one {
	background: var(--white);
	padding: 60px;
	border-radius: 10px;
	position: relative;
	z-index: 1;
}

.testimonial-style-one::after {
	position: absolute;
	right: -15px;
	bottom: -15px;
	content: "";
	top: 30px;
	left: 30px;
	background: var(--white);
	z-index: -1;
	border-radius: 10px;
	opacity: 0.6;
}

.carousel-stage-right {
	padding-bottom: 15px;
	padding-right: 15px;
}

.testimonial-style-one .thumb {
	position: relative;
	z-index: 1;
}

.testimonial-style-one .thumb img {
	border-radius: 50%;
	margin-right: 30px;
	height: 80px;
}

.testimonial-style-one h4 {
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 24px;
}

.testimonial-style-one .privider {
	display: flex;
	align-items: center;
	margin-top: 30px;
}

.testimonial-style-one p {
	font-size: 24px;
	line-height: 1.7;
}

.testimonial-style-one .thumb::after {
	position: absolute;
	right: 17px;
	top: 50%;
	content: "";
	height: 35px;
	width: 35px;
	background-image: url(../img/shape/quote.png);
	background-repeat: no-repeat;
	background-color: var(--color-primary);
	border-radius: 50%;
	background-position: center;
	transform: translateY(-50%);
}

.testimonial-button-prev,
.testimonial-button-next {
	height: 45px;
	width: 45px;
	line-height: 45px;
	background: var(--white);
	position: relative;
	z-index: 1;
}

.testimonial-button-next::after {
	position: absolute;
	left: 50%;
	top: 50%;
	content: "\f061";
	font-family: "Font Awesome 5 Pro";
	transform: translate(-50%, -50%);
	margin-top: 1px;
}

.testimonial-button-prev::after {
	position: absolute;
	left: 50%;
	top: 50%;
	content: "\f060";
	font-family: "Font Awesome 5 Pro";
	transform: translate(-50%, -50%);
	margin-top: 1px;
}

.testimonial-nav {
	display: flex;
	position: absolute;
	left: 0;
	top: -100px;
	z-index: 999;
	justify-content: right;
	padding: 0 30px;
}

@media (min-width: 1250px) {
	.testimonial-nav {
		width: 1250px;
	}
}

@media (min-width: 1200px) {
	.testimonial-nav {
		width: 1140px;
	}
}

@media (min-width: 992px) {
	.testimonial-nav {
		width: 960px;
	}
}

.testimonail-item-one-items {
	position: relative;
	z-index: 1;
}

.testimonail-item-one-items::after {
	position: absolute;
	right: -20%;
	bottom: 170px;
	content: "";
	height: 100%;
	width: 70%;
	background: var(--bg-gradient);
	z-index: -1;
	border-top-left-radius: 30px;
}

.testimonial-nav > div {
	margin-left: 10px;
	border-radius: 50%;
}

/* Testimonial Style Two */

.testimonial-style-two .item {
	padding: 50px;
	background: var(--white);
	border-radius: 10px;
	position: relative;
	z-index: 1;
}

.testimonial-style-two .item::after {
	position: absolute;
	left: 50px;
	right: 50px;
	bottom: -22px;
	background: var(--white);
	height: 100%;
	z-index: -1;
	content: "";
	border-radius: 0 0 10px 10px;
	opacity: 0.6;
}

.testimonial-style-two .item p {
	font-size: 25px;
	line-height: 1.6;
}

.testimonial-style-two .item .thumb {
	position: absolute;
	left: 50%;
	bottom: -70px;
	transform: translateX(-50%);
	background: var(--white);
	border-radius: 50%;
	padding: 5px;
	border: 20px solid var(--bg-gray);
}

.testimonial-style-two .item .thumb::after {
	position: absolute;
	left: 50%;
	bottom: -10px;
	content: "";
	height: 35px;
	width: 35px;
	background-image: url(../img/shape/quote.png);
	background-repeat: no-repeat;
	background-color: var(--color-primary);
	border-radius: 50%;
	background-position: center;
	transform: translateX(-50%);
}

.secondary .testimonial-style-two .item .thumb::after {
	background-color: var(--color-optional);
}

.testimonial-style-two .item .thumb img {
	height: 70px;
	width: 70px;
	border-radius: 50%;
}

.testimonial-style-two-carousel .swiper-wrapper {
	padding-bottom: 60px;
}

.testimonial-style-two .item .provider h4 {
	font-weight: 600;
	margin-bottom: 5px;
	font-size: 24px;
}

.testimonial-style-two .item .provider {
	margin-bottom: 30px;
	margin-top: 20px;
	display: inline-block;
	min-width: 50%;
}



/* ============================================================== 
    # Process Style
=================================================================== */


/* ============================================================== 
    # Faq Style
=================================================================== */
.faq-style-one {
	background: var(--bg-gray);
	padding: 80px;
	padding-bottom: 0;
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--bg-gray);
}

.faq-tab-navs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	border: none;
	position: relative;
	z-index: 1;
	margin-top: 60px;
}

.faq-tab-navs .nav-link {
	border: none;
	margin: 0;
	padding: 20px;
	color: var(--color-heading);
	background: var(--white);
	transition: all 0.35s ease-in-out;
	border-radius: 10px 10px 0 0;
}

.faq-tab-navs::before, .faq-tab-navs::after {
	display: none;
}

.faq-tab-navs::after {
	position: absolute;
	left: -100px;
	right: -100px;
	bottom: 0;
	content: "";
	background: var(--dark);
	height: 100%;
}

.faq-tab-navs .nav-link::after {
	display: none;
}

.faq-tab-navs .nav-link.active {
	background: var(--dark);
	color: var(--white);
}

.faq-tab-navs .nav-link:hover {
	background: var(--color-primary);
	color: var(--white);
}

.faq-style-one button.accordion-button {
	color: var(--color-heading);
	font-size: 18px;
	font-weight: 600;
	padding: 25px 0 !important;
	background: transparent !important;
	padding-right: 60px !important;
	position: relative;
	box-shadow: inherit;
	border: none;
	border-bottom: 2px solid var(--color-heading) !important;
	border-radius: inherit !important;
}

.faq-style-one button.accordion-button::after {
	background: transparent;
	content: "\f107";
	font-family: "Font Awesome 5 Pro";
	font-weight: 100;
	font-size: 25px;
	position: absolute;
	top: 22px;
	right: 25px;
}

.faq-style-one button.accordion-button::after,
.faq-style-one button.accordion-button:hover::after {
	transform: inherit !important;
}

.faq-style-one button.accordion-button:not(.collapsed)::after {
	-webkit-transform: inherit;
	transform: inherit;
	content: "\f106";
}

.faq-style-one button.accordion-button:focus {
	background: transparent;
	color: var(--color-heading);
	border: none;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	padding-left: 0;
	font-weight: 600;
}

.faq-style-one .accordion-item {
	background: transparent;
	border: none;
}

.faq-style-one .accordion-body {
	padding-left: 0;
	padding-top: 25px;
}

.faq-style-one-content {
	margin-top: -15px;
}

.faq-style-one .accordion-body p:last-child {
	margin: 0;
}

/* Faq Style Two */

.faq-style-two-area {
	background-size: 7%;
	background-repeat: no-repeat;
	background-position: left bottom;
}

.faq-style-two {
	position: relative;
	z-index: 1;
}

.faq-style-two button.accordion-button {
	color: var(--color-heading);
	font-size: 18px;
	font-weight: 600;
	padding: 25px 0 !important;
	background: transparent !important;
	padding-right: 60px !important;
	position: relative;
	box-shadow: inherit;
	border: none;
	border-bottom: 2px solid var(--color-heading) !important;
	border-radius: inherit !important;
}

.faq-style-two button.accordion-button::after {
	background: transparent;
	content: "\f107";
	font-family: "Font Awesome 5 Pro";
	font-weight: 100;
	font-size: 25px;
	position: absolute;
	top: 22px;
	right: 25px;
	opacity: 1;
	left: inherit;
	z-index: 1;
	transform: inherit;
}

.faq-style-two button.accordion-button:not(.collapsed)::after {
	-webkit-transform: inherit;
	transform: inherit;
	content: "\f106";
}

.faq-style-two button.accordion-button:focus {
	background: transparent;
	color: var(--color-heading);
	border: none;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	padding-left: 0;
	font-weight: 600;
}

.faq-style-two .accordion-item {
	background: transparent;
	border: none;
}

.faq-style-two .accordion-body {
	padding-left: 0;
	padding-top: 25px;
}

.faq-style-two .accordion-body p:last-child {
	margin: 0;
}

/* ============================================================== 
    # Contact Style
=================================================================== */
.contact-style-one-info {
	padding: 50px;
	position: relative;
	z-index: 1;
}

.contact-style-one-info h2 {
	font-weight: 600;
	margin-top: -8px;
}

.contact-style-one-info .title {
	font-size: 20px;
	margin-top: 3px;
}

.contact-style-one-info li {
	display: flex;
	margin-top: 20px;
	border-top: 1px dashed rgba(255, 255, 255, 0.6);
	padding-top: 20px;
}

.contact-style-one-info li i {
	display: inline-block;
	font-weight: 100;
	font-size: 20px;
	height: 60px;
	width: 60px;
	text-align: center;
	line-height: 60px;
	background: var(--dark);
	color: var(--white);
	border-radius: 50%;
	margin-right: 20px;
}

.contact-style-one-info li h4 {
	margin-bottom: 3px;
}

.contact-style-one-info li p {
	margin: 0;
}

.contact-style-one-info li a {
	font-weight: 400;
}

.contact-style-one-info li:first-child {
	margin-top: 0;
	padding-top: 0;
	border: none;
}

.contact-style-one-info h3 {
	font-weight: 600;
}

.contact-area {
	background-size: 41%;
	background-repeat: no-repeat;
	background-position: right bottom;
}

.contact-form-style-one .sub-title {
	margin-bottom: 10px;
}

.contact-form-style-one input, 
.contact-form-style-one textarea {
	border: none;
	border-bottom: 1px solid #e7e7e7;
	border-radius: inherit;
	padding: 0;
	box-shadow: inherit;
}

.contact-form-style-one .form-group {
	margin-bottom: 30px;
}

.contact-form-style-one textarea {
	min-height: 180px;
}

.contact-form-style-one {
	padding: 80px;
	box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%);
	background: var(--white);
	position: relative;
	z-index: 1;
}

.contact-form-style-one .shape-right-bottom {
	position: absolute;
	right: -110px;
	bottom: -50px;
	max-width: 170px;
}

.contact-form-style-one .title {
	font-size: 36px;
}

img.loader {
	margin-left: 10px;
}

/* ============================================================== 
    # Footer Style
=================================================================== */
footer {
	overflow: hidden;
}

.footer-item {
	margin-top: 50px;
}

footer .f-items {
	padding-top: 70px;
}

.f-item.about {
	position: relative;
	z-index: 1;
	padding-right: 50px;
	bottom: 40px;
}

.f-item.about::after {
	position: absolute;
	right: 0;
	top: -50%;
	content: "";
	height: 200%;
	width: 500%;
	background: var(--bg-gray);
	z-index: -1;
}

footer .logo {
	height: 120px;
	/* margin-bottom: 30px; */
}

footer .widget-title {
	font-weight: 600;
	margin-bottom: 30px;
}

footer .f-item.link li {
	margin-top: 10px;
	font-size: 15px;
}

footer .f-item.link li a {
	display: inline-block;
	color: #d2d2d4;
	font-weight: 400;
}

footer .f-item.link li a:hover {
	color: var(--white);
}

footer .about p {
	color: var(--color-paragraph);
}

footer {
	position: relative;
	z-index: 1;
}

.f-item.about::before {
	position: absolute;
	right: 0;
	top: -120px;
	content: "";
	height: 1px;
	width: 500%;
	background: #e7e7e7;
	z-index: 1;
}

.newsletter form {
	position: relative;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.newsletter form input {
	width: 100%;
	position: relative;
	border: none;
	padding: 0 20px;
	border-radius: 5px;
	box-shadow: 0 3px 10px 0 rgb(0 0 0 / 10%);
	margin-right: 15px;
	min-height: 55px;
}

.newsletter button {
	background: var(--color-primary);
	border: none;
	color: var(--white);
	border-radius: 5px;
	height: 53px;
	padding: 0 30px;
	font-weight: 600;
	font-size: 15px;
	min-width: 130px;
}

.secondary .newsletter button {
	background: var(--color-optional);
}

.newsletter button:hover {
	background: var(--dark);
}

.copyright-text p {
	margin: 0;
	font-size: 14px;
}

.copyright-text p a {
	color: var(--color-primary);
}

.secondary .copyright-text p a {
	color: var(--color-optional);
}

.footer-social li {
	display: inline-block;
	margin-right: 10px;
}

.footer-social li a {
	display: inline-block;
	height: 40px;
	width: 40px;
	line-height: 42px;
	background: var(--dark);
	text-align: center;
	border-radius: 50%;
}

.footer-item.contact li {
	display: flex;
	margin-top: 30px;
}

.footer-item.contact li strong {
	display: block;
	text-transform: uppercase;
	color: var(--white);
	font-size: 14px;
}

.footer-item.contact li i {
	display: inline-block;
	height: 45px;
	width: 45px;
	text-align: center;
	line-height: 45px;
	border-radius: 50%;
	margin-right: 20px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
	font-weight: 300;
	font-size: 18px;
}

.footer-item.contact li {
	color: #dedede;
}

.footer-item.contact li p {
	margin: 0;
	color: #dedede;
}

.footer-item.contact li a {
	color: #dedede;
	font-weight: 500;
}

.footer-item.contact li a:hover {
	color: var(--color-secondary);
}

.secondary .footer-item.contact li a:hover {
	color: var(--color-optional);
}

.foter-shape-right-bottom {
	position: absolute;
	right: 2%;
	bottom: 120px;
	z-index: -1;
	max-width: 10%;
	opacity: 0.1;
}

.footer-bottom {
	position: relative;
	z-index: 1;
	padding: 25px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: none;
}

.footer-bottom p {
	margin: 0;
}

@media (max-width: 1023px) {
	.footer-bottom {
		display: block;
	}
}

/* ============================================================== 
    # 404 page
=================================================================== */
.error-page-area .shape-left {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
	width: 20%;
	background-position: left !important;
	background-repeat: no-repeat !important;
	z-index: -1;
	opacity: 0.3;
	background-size: contain !important;
}

.error-page-area .shape-right {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 100%;
	width: 20%;
	background-position: right !important;
	background-repeat: no-repeat !important;
	z-index: -1;
	opacity: 0.3;
	background-size: contain !important;
}

.error-box h1 {
	font-size: 150px;
	line-height: 110px;
	font-weight: 700;
	margin-bottom: 40px;
	text-shadow: 3px 3px #ff8a43;
}

.error-box h2 {
	font-weight: 600;
	margin-bottom: 20px;
}

.error-box p {
	padding: 0 10%;
}


/* ============================================================== 
     # Dark CSS
=================================================================== */
.dark-layout .bg-dark {
	background: rgba(0, 0, 0, 0.3) !important;
}

.dark-layout .banner-style-one .thumb {
	margin-bottom: 0;
}

.dark-layout .banner-style-one .information {
	margin-top: 50px;
}

.dark-layout .feature-style-one {
	background: rgba(255, 255, 255, 0.07);
}

.dark-layout .feature-style-one i {
	color: var(--white);
}

.dark-layout .feature-style-one.active::after {
	display: none;
}

.dark-layout .feature-style-one.active {
	border: none;
	background: var(--bg-gradient);
}

.dark-layout .list-check li {
	color: var(--white);
	opacity: 0.9;
}

.dark-layout .feature-shape {
	left: -25%;
	max-width: 30%;
}

.dark-layout .list-circle li {
	color: var(--white);
	opacity: 0.8;
}

.dark-layout .circle-process li .circle strong {
	color: var(--white);
}

.dark-layout .circle-process li {
	border-color: rgba(255, 255, 255, 0.3);
}

.dark-layout .bg-gray {
	background: rgba(0, 0, 0, 0.3);
}

.dark-layout .services-style-one {
	background: rgba(255, 255, 255, 0.05);
}

.dark-layout .services-style-one .icon i::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 40%, #FBFBFD00 70%);
}

.dark-layout .icon-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark-layout .services-style-one.active::after {
	display: none;
}

.dark-layout nav.navbar.validnavs.navbar-fixed {
	background: #002f4f !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-layout nav.navbar.validnavs.navbar-fixed.no-background {
	background: transparent !important;
	border-bottom: none;
}

.dark-layout .fun-fact .counter {
	color: var(--white);
}

.dark-layout .pricing-style-one .item {
	background: transparent;
}

.dark-layout .pricing-style-one {
	background: rgba(0, 0, 0, 0.3);
	border: none;
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.dark-layout .pricing-style-one.active {
	background: #00274b;
}

.dark-layout .btn.btn-border::after {
	background: var(--color-primary);
}

.dark-layout .btn.btn-border:hover {
	border-color: var(--color-primary);
}

.dark-layout .pricing-style-one .pricing-content h2 strong {
	color: var(--color-primary);
}

.dark-layout .testimonial-button-prev, .dark-layout .testimonial-button-next {
	color: var(--color-heading);
}

.dark-layout .testimonial-style-one {
	background: #00274b;
}

.dark-layout .testimonial-style-one::after {
	background: #00274b;
	opacity: 0.4;
}

.dark-layout .faq-style-one {
	background: #00274b;
	border-color: rgba(255, 255, 255, 0.4);
}

.dark-layout .faq-style-one button.accordion-button {
	color: var(--white);
	border-color: var(--white) !important;
}

.dark-layout .faq-tab-navs .nav-link.active {
	background: var(--color-primary);
}

.dark-layout .faq-tab-navs .nav-link {
	margin: 0 2px;
}

.dark-layout .blog-area .meta li, .dark-layout .blog-area .meta li a {
	color: var(--white);
	opacity: 0.8;
}

.dark-layout .blog-area .meta li::after {
	background: var(--white);
}

.dark-layout .f-item.about::after {
	background: #00274b;
}

.dark-layout .f-item.about::before {
	background: rgba(255, 255, 255, 0.3);
}

.dark-layout footer .about p {
	color: var(--white);
	opacity: 0.9;
}

.dark-layout .footer-social li a {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.4);
	line-height: 40px;
}

.dark-layout .faq-style-two button.accordion-button {
	color: var(--white);
	border-color: var(--white) !important;
}

.dark-layout .navbar .attr-right .attr-nav li a:nth-child(2) {
	color: var(--white);
	border-color: var(--white);
}

.dark-layout .navbar .attr-right .attr-nav li.button a::after {
	background: var(--white);
}

.dark-layout .navbar .attr-right .attr-nav li.button a:hover {
	color: var(--color-heading);
}

.dark-layout .tools-list .icon {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.2);
}

.dark-layout .testimonial-style-two .item {
	background: rgba(255, 255, 255, 0.06);
}

.dark-layout .testimonial-style-two .item::after {
	background: rgba(255, 255, 255, 0.2);
	opacity: 1;
	height: 22px;
}

.dark-layout .testimonial-style-two .item .thumb {
	border-color: #01132d;
	background: transparent;
}

.dark-layout nav.navbar.validnavs .navbar-toggle i {
	color: var(--white);
}

@media (max-width: 1023px) {
	.dark-layout nav.navbar.validnavs.navbar-fixed.no-background {
		background: #00274b !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	}
}

@media only screen and (max-width: 767px) {
	.dark-layout .banner-style-one .information {
		margin-top: 0;
	}

	.dark-layout .banner-style-one .content {
		padding-bottom: 110px;
	}

	.dark-layout .feature-style-one {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(0, 0, 0, 0.2);
	}

	.dark-layout .pricing-style-one {
		background: transparent;
	}

	.dark-layout .pricing-style-one .item {
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.dark-layout .pricing-style-one .pricing-header {
		background: rgba(0, 0, 0, 0.3);
	}

	.dark-layout .pricing-style-one.active .pricing-header {
		background: var(--bg-gradient);
	}

	.dark-layout .faq-tab-navs .nav-link {
		margin: 0;
		margin-top: 10px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.dark-layout .banner-style-one .information {
		margin-top: 0;
	}

	.dark-layout .banner-style-one .content {
		padding-top: 110px;
		padding-bottom: 250px;
	}

	.dark-layout .feature-style-one {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: rgba(0, 0, 0, 0.2);
	}

	.dark-layout .pricing-style-one {
		background: transparent;
		border: none;
	}

	.dark-layout .pricing-style-one .item {
		background: rgba(255, 255, 255, 0.1);
		border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.dark-layout .pricing-style-one .pricing-header {
		background: rgba(0, 0, 0, 0.3);
	}

	.dark-layout .pricing-style-one.active .pricing-header {
		background: var(--bg-gradient);
	}

	.dark-layout .faq-tab-navs .nav-link {
		margin: 0;
		margin-top: 10px;
	}

	.dark-layout .pricing-style-one.active {
		background: transparent;
	}
}

/* ============================================================== 
    # Responsive CSS
=================================================================== */

/* Tablet Layout: 768px.*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
	/* Banner */

	.banner-style-one .content {
		padding-top: 120px;
	}

	.banner-style-one .thumb {
		padding: 0 50px;
		margin: 0;
		margin-top: 50px;
		margin-bottom: 120px;
	}

	.banner-style-one .thumb .thumb-right {
		right: 0;
	}

	.banner-style-one .thumb .shape {
		right: 0;
		top: -50px;
	}

	.banner-style-one .information {
		margin-top: 0;
	}

	.banner-style-one .thumb {
		padding: 0 50px;
		margin: 0;
		margin-top: 50px;
		margin-bottom: 120px;
	}

	.banner-style-one .thumb .thumb-right {
		right: 0;
	}

	.banner-style-one .thumb .shape {
		right: 0;
		top: -50px;
	}

	.banner-style-one {
		text-align: center;
	}

	.banner-style-one p {
		padding: 0;
	}

	/* Banner Two */

	/* Banner Three */

	/* About */
	.about-thumb {
		padding: 0;
	}

	.about-thumb .user-fun-fact {
		position: inherit;
		margin-top: 30px;
	}

	/* Feature */
	.feature-style-one-box .item-grid {
		display: flex;
		grid-column-gap: 30px;
	}

	.feature-style-one {
		margin: 0;
		text-align: center;
	}

	.feature-shape {
		display: none;
	}

	.feature-style-one {
		width: 50%;
	}

	.feature-style-one.active {
		width: 48%;
	}

	.feature-style-one.active p {
		padding: 0 10%;
	}

	/* Brand */
	.brand-style-one-items {
		padding: 120px 30px;
	}

	.brand-style-one h2 {
		font-size: 22px;
	}

	.brand-style-one h2 strong {
		font-size: 42px;
	}


	/* Soft Premium Info */

  /* Team Details */	


	/* Software Details */

	/* Active Current User */
	.user-fun-fact {
		text-align: center;
	}

	.user-fun-fact .fun-fact .counter {
		justify-content: center;
	}

	.current-user-area .list-circle {
		display: inline-block;
	}

	.current-user-area .list-circle li::after {
		display: none;
	}

	.current-user-area .list-circle li {
		padding: 0;
	}

	.active-user-info {
		margin-top: 30px;
	}

	/* Pricing */
	.pricing-style-one-items {
		margin: 0;
		box-shadow: inherit;
		margin-top: -30px;
	}

	.pricing-style-one {
		padding: 0 15px;
		border: none;
		background: transparent;
		overflow: inherit;
	}

	.pricing-style-one {
		margin-top: 30px;
	}

	.pricing-style-one .item {
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%);
	}

	.pricing-style-one.active {
		transform: inherit;
		border: none;
	}

	/* Pricing Style Two */
	


	/* Testimonials */

	.testimonials-area {
		text-align: center;
	}

	.testimonial-style-one .privider {
		display: block;
	}

	.testimonial-style-one .thumb {
		display: inline-flex;
	}

	.testimonial-style-one .thumb img {
		margin: 0;
		margin-bottom: 30px;
	}

	.testimonial-style-one .thumb::after {
		left: 50%;
		transform: translateX(-50%);
	}

	.testimonial-nav {
		top: auto;
		bottom: 0;
		right: auto;
		width: auto;
		display: inline-block;
		padding: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.testimonial-nav > div {
		display: inline-block;
	}

	.testimonail-item-one-items::after {
		display: none;
	}

	.testimonail-item-one-items {
		padding-bottom: 100px;
	}

	.testimonial-style-one p {
		font-size: 17px;
	}

	.testimonial-style-one h4 {
		font-size: 20px;
	}

	.testimonial-style-one {
		padding: 60px 37px;
	}

	.testimonials-area .heading-left .content-left .title {
		padding: 0 15%;
	}

	.carousel-stage-right {
		padding-right: 15px;
	}


	/* Choose Us */

	/* Free Trial */

	/* Fun Fact */
	.faq-style-two .fun-fact.secondary {
		display: none;
	}

	.faq-style-two-area {
		background-image: none !important;
	}


	/* Process */

	/* Feature Style Two */

	.list-circle li {
		font-size: 15px;
	}


	/* Feature Style Three */

	.tools-list li:nth-child(8) .icon {
		height: 100px;
		width: 100px;
	}

	.tools-list li:nth-child(10) .icon {
		height: 100px;
		width: 100px;
		top: 40px;
	}

	.tools-list li:nth-child(6) .icon {
		height: 100px;
		width: 100px;
	}

	.tools-list li:nth-child(4) .icon {
		height: 100px;
		width: 100px;
	}

	.tools-list li:nth-child(5) .icon {
		height: 150px;
		width: 150px;
		top: 60px;
	}

	.tools-list li:nth-child(9) .icon {
		height: 150px;
		width: 150px;
	}

	.tools-list li:nth-child(6) .icon {
		top: 0;
	}

	.tools-list li:first-child .icon {
		height: 150px;
		width: 150px;
	}

	.tools-list li:nth-child(3) .icon {
		top: 50px;
	}

	.tools-list li:nth-child(7) .icon {
		height: 150px;
		width: 150px;
		top: 55px;
	}

/* Team */


/* Portfolio */
	.gallery-items.colums-3 .gallery-item {
		width: 50%;
	}


/* Contact */

	.contact-style-one-info {
		padding: 0;
		margin-bottom: 50px;
	}


	/* Footer */

	.f-item.about::after {
		display: none;
	}

	footer .logo {
		background-color: #10393b; /* 设置底色为 #10393b */
		height: 120px;
		/* filter: brightness(0) invert(1); */
	}

	.newsletter form {
		display: block;
		margin-top: 30px;
	}

	.newsletter button {
		width: 100%;
		margin-top: 13px;
	}

	footer .about p {
		color: #d2d2d4;
	}

	.f-item .copyright-text {
		display: none;
	}

	.footer-social {
		display: none;
	}

	.f-item.about::before {
		display: none;
	}
}

/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {

	/* Defautl */
	.title {
		font-size: 36px;
		line-height: 1.2;
	}

	/* Banner */
	.banner-style-one h2 {
		font-size: 36px;
	}

	.banner-style-one .thumb {
		padding: 0;
		margin: 0;
		margin-top: 50px;
	}

	.banner-style-one .thumb .inner {
		display: none;
	}

	.banner-style-one .thumb .thumb-right {
		display: none;
	}

	.banner-style-one .content {
		padding-bottom: 150px;
		padding-top: 60px;
	}

	.banner-style-one .thumb .shape {
		display: none;
	}

	.banner-style-one .information {
		margin-top: 0;
	}

	/* Banner Two */

	/* Banner Three */

	/* About */
	.about-thumb {
		padding: 0;
	}

	.about-thumb .user-fun-fact {
		position: inherit;
		margin-top: 30px;
	}

	/* Feature */
	.feature-style-one-box {
		text-align: center;
	}

	.feature-shape {
		display: none;
	}

	/* Brand */
	.brand-style-one h2 {
		display: block;
		font-size: 20px;
	}

	.brand-style-one-items {
		padding: 50px;
	}

	.brand-style-one h2 strong {
		font-size: 36px;
	}

	.brand-style-one .swiper img {
		height: auto;
		padding: 0 5%;
	}

	/* Software Details */

	.shape-left-bottom {
		display: none;
	}

	.soft-details-carousel .swiper-wrapper {
		padding: 0;
	}


	/* Choose us */

	/* Free Trial */

	/* Service */
	.software-style-one-area {
		background-image: none !important;
		background-color: var(--bg-gray);
	}
	

	/* Feature Style Two */

	.list-circle li {
		font-size: 15px;
	}

	/* Fun Fact */
	.faq-style-two .fun-fact.secondary {
		display: none;
	}


	/* Soft Premium Info */


	/* Pricing */
	.pricing-style-one-items {
		margin: 0;
		box-shadow: inherit;
	}

	.pricing-style-one {
		padding: 0 15px;
		border: none;
		background: transparent;
		overflow: inherit;
	}

	.pricing-style-one:first-child {
		margin-top: 0;
	}

	.pricing-style-one {
		margin-top: 30px;
	}

	.pricing-style-one .item {
		border-radius: 10px;
		overflow: hidden;
		box-shadow: 0 3px 40px 0 rgb(0 0 0 / 10%);
	}

	.pricing-style-one.active {
		transform: inherit;
		border: none;
	}

	/* Pricing Style Two */


	/* Feature Style Three */
	.tools-integrations-area.default-padding.text-center {
		overflow: hidden;
	}

	/* Team */

	/* Team Single */



	/* Testimonials */

	.testimonials-area {
		text-align: center;
	}

	.testimonial-style-one .privider {
		display: block;
	}

	.testimonial-style-one .thumb {
		display: inline-flex;
	}

	.testimonial-style-one .thumb img {
		margin: 0;
		margin-bottom: 30px;
	}

	.testimonial-style-one .thumb::after {
		left: 50%;
		transform: translateX(-50%);
	}

	.testimonial-nav {
		top: auto;
		bottom: 0;
		right: auto;
		width: auto;
		display: inline-block;
		padding: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.testimonial-nav > div {
		display: inline-block;
	}

	.testimonail-item-one-items::after {
		display: none;
	}

	.testimonail-item-one-items {
		padding-bottom: 100px;
	}

	.carousel-stage-right {
		padding-right: 15px;
	}

	.testimonial-style-one p {
		font-size: 18px;
	}

	.testimonial-style-one {
		padding: 50px 37px;
	}

	.testimonial-style-one h4 {
		font-size: 20px;
	}

	
	

	/* Active Current User */
	.user-fun-fact {
		text-align: center;
	}

	.user-fun-fact .fun-fact .counter {
		justify-content: center;
	}

	.current-user-area .list-circle {
		display: inline-block;
	}

	.current-user-area .list-circle li::after {
		display: none;
	}

	.current-user-area .list-circle li {
		padding: 0;
	}

	.active-user-banner {
		grid-column-gap: 30px;
		grid-row-gap: 30px;
	}

	.active-user-banner .item img {
		margin-top: 30px;
	}

	.active-user-info {
		margin-top: 30px;
	}

	.faq-style-two-area {
		background-image: none !important;
	}


	/* Accordion */

	.faq-style-one {
		padding: 50px 30px;
	}

	.faq-tab-navs {
		display: block;
	}

	.faq-tab-navs .nav-link {
		width: 100%;
		border-radius: 10px;
		margin-top: 15px;
	}

	.faq-tab-navs .nav-link:first-child {
		margin-top: 0;
	}


	/* Tools List */
	.tools-list {
		text-align: center;
		display: inline-block;
		margin-top: 15px;
		margin-bottom: -40px;
	}

	.tools-list .icon {
		top: 0 !important;
	}

	.tools-list li:nth-child(2n) .icon {
		height: 100px;
		width: 100px;
		line-height: inherit;
	}

	.tools-list li:nth-child(2n) .icon img {
		height: 45px;
	}

	.tools-list li {
		padding: 15px;
	}


	/* Process */

	/* Contact */

	.contact-style-one-info {
		padding: 0;
		margin-bottom: 50px;
	}

	/* Portfolio */
	.gallery-items.colums-3 .gallery-item {
		width: 100%;
	}


	/* Footer */

	footer .f-items {
		padding-top: 0;
	}

	.f-item.about::after {
		display: none;
	}

	footer .logo {
		height: 120px;
		/* filter: brightness(0) invert(1); */
	}

	.newsletter form {
		display: block;
		margin-top: 30px;
	}

	.newsletter button {
		width: 100%;
		margin-top: 13px;
	}

	footer .about p {
		color: #d2d2d4;
	}

	.f-item .copyright-text {
		display: none;
	}

	.footer-social {
		display: none;
	}

	.f-item.about {
		padding-right: 0;
	}

	.f-item.about::before {
		display: none;
	}
}

/* Max Wide Mobile Layout: 600px. */
@media only screen and (min-width: 600px) and (max-width: 767px) {

/* Portfolio */
	.gallery-items.colums-2 .pf-item,
.gallery-items.colums-3 .pf-item {
		width: 50%;
	}
}

/* Max Wide Mobile Layout: 600px. */
@media only screen and (min-width: 600px) and (max-width: 1200px) {

	/* Portfolio */
}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.attr-nav {
		display: inline-block;
	}
}

@media screen and (max-width: 991px) {

/* global reset - start */
}

/* Custom Layout */
@media only screen and (max-width: 480px) {
	/* Brand */
	.soft-details-style-one {
		text-align: center;
	}

	.circle-process li {
		display: block;
		border: none;
		margin: 0;
		padding: 0;
		margin-top: 40px;
	}

	/* Free Trial */

	.contact-form-style-one {
		padding: 50px 37px;
	}
}

/* Desktop Mini */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

	/* Team Single */

	/* Software Details */

	.soft-details-style-one {
		text-align: center;
	}

	
	/* Banner Two */

	/* Portfolio */
	.gallery-style-one .thumb::after {
		height: 267px;
		width: 127%;
		transform: skewY(40deg);
	}

	.gallery-style-one:hover .thumb::after {
		top: 100%;
		opacity: 0.6;
		background: var(--dark);
	}

	.gallery-style-one .thumb::before {
		transform: skewY(40deg);
	}

	.gallery-style-one:hover .thumb::before {
		height: 200%;
		bottom: 32px;
	}
}


/* ============================================================== 
     # Home Ai Writer 
=================================================================== */

/* Banner */



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

xclip 

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


/* Process Style Two */



/* ============================================================== 
     # Service Overview 
=================================================================== */

/* ============================================================== 
     # Choose Us Style Two 
=================================================================== */

.btn.btn-border.secondary::after {
	background: var(--color-optional);
}

.btn.btn-border.secondary:hover {
	border-color: var(--color-optional);
}

.site-heading.secondary strong::after {
	position: absolute;
	left: -10%;
	bottom: -5px;
	content: "";
	height: 120%;
	width: 120%;
	background: url(../img/shape/33.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom center;
	z-index: -1;
}

/* ============================================================== 
     # Testimonial 
=================================================================== */

/* ============================================================== 
     # Pricing 
=================================================================== */

.btn.btn-border.btn-sm {
	padding: 14px 50px;
}

/* ============================================================== 
     # Faq 
=================================================================== */

.dark-layout .newsletter button {
	background: var(--color-optional);
}

.dark-layout .copyright-text p a {
	color: var(--white);
}

@media (max-width: 1023px) {
	nav.navbar.validnavs .navbar-nav>li>a {
		color: var(--color-heading);
	}

	nav.navbar.validnavs .navbar-collapse.collapse button i {
		color: var(--color-heading);
	}
}


/* Tablet */

/* Mobile */
@media only screen and (max-width: 767px) {

	.heading {
		font-size: 36px !important;
	}
}


/* Custom Mobile  */

/* ============================================================== 
     # Home Personal Portfolio 
=================================================================== */

/* Performance */


/* About */


/* Services */

body {
	overflow: unset;
}


/* Portfolio */
.portfolio-items.colums-2 .pf-item {
	float: left;
	width: 50%;
	padding: 15px;
}

.portfolio-items {
	margin: -15px;
}

.pf-item .thumb {
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.pf-item .thumb::after {
	position: absolute;
	left: 50%;
	top: 50%;
	content: "";
	height: 0;
	width: 0;
	background: var(--color-optional);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	transition: all 0.35s ease-in-out;
	opacity: 0;
	visibility: hidden;
}

.pf-item:hover .thumb::after {
	height: 1000px;
	width: 1000px;
	opacity: 0.8;
	visibility: visible;
}

.pf-item .thumb a {
	display: inline-block;
	height: 60px;
	width: 60px;
	line-height: 60px;
	background: var(--white);
	position: absolute;
	left: 50%;
	top: 50%;
	text-align: center;
	transform: translate(-50%, -10%);
	border-radius: 50%;
	z-index: 1;
	opacity: 0;
	visibility: hidden;
}

.pf-item:hover .thumb a {
	transform: translate(-50%, -50%);
	visibility: visible;
	opacity: 1;
}

.pf-item .thumb a:hover {
	color: var(--color-optional);
}

.mix-item-menu {
	float: right;
	background: var(--white);
	padding: 15px;
	border-radius: 50px;
	border: 2px solid #e8e2ff;
}

.mix-item-menu button {
	padding: 10px 50px;
	color: var(--color-heading);
	margin: 0 2px;
	border-radius: 30px;
	background: #f6f6f6;
}

.mix-item-menu button.active,
.mix-item-menu button:hover {
	color: var(--white);
}

.mix-item-menu button::after {
	background: var(--color-optional);
}

.mix-item-menu button.active::after {
	-webkit-transform: translateY(-45%) skew(25deg) scale(1.2);
	transform: translateY(-45%) skew(25deg) scale(1.2);
}

.pf-item .info {
	margin-top: 20px;
}

.pf-item .info h4 {
	margin-bottom: 5px;
}

.pf-item .info h4 a:hover {
	color: var(--color-optional);
}

.col-xl-12 .mix-item-menu {
    text-align: center;
    float: none;
    display: inline-block;
}

/* Pricing */

.bg-dark .testimonail-item-one-items::after {
	background: var(--bg-gradient-reverse);
}

.bg-dark .testimonial-style-one .thumb::after {
	background-color: var(--color-optional);
}

.secondary button {
	background: var(--color-optional);
}

/* Responsive */

@media only screen and (min-width: 992px) and (max-width: 1199px) {

	/* Banner */

	.mix-item-menu {
		float: left;
		margin-top: 30px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

	/* Banner */

	.mix-item-menu {
		float: left;
	}
}

@media only screen and (max-width: 767px) {

	/* Banner */


	/* About */

	/* Portfolio */
	
	.mix-item-menu button {
		display: block;
		width: 100%;
		margin-top: 15px;
		background: var(--white);
		padding: 15px;
	}

	.mix-item-menu {
		float: none;
		background: transparent;
		border: none;
		padding: 0;
	}

	.portfolio-items.colums-2 .pf-item {
		width: 100%;
	}
}

@media only screen and (max-width: 480px) {
}


/* ============================================================== 
     # Home Comming Soon 
=================================================================== */

/* ============================================================== 
     # Preloader 
=================================================================== */

.anaton-preloader {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	cursor: default;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 100%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 9000;
}

.anaton-preloader .animation-preloader {
	z-index: 1000;
}

.anaton-preloader .animation-preloader .spinner {
	-webkit-animation: spinner 1s infinite linear;
	animation: spinner 1s infinite linear;
	border-radius: 50%;
	border: 3px solid rgba(0, 0, 0, 0.2);
	border-top-color: var(--color-primary);
	height: 100px;
	margin: 0 auto 30px auto;
	width: 100px;
}

.anaton-preloader .animation-preloader .txt-loading {
	font: bold 56px var(--font-heading);
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.anaton-preloader .animation-preloader .txt-loading .letters-loading {
	color: rgba(0, 0, 0, 0.2);
	position: relative;
}

.anaton-preloader .animation-preloader .txt-loading .letters-loading:before {
	-webkit-animation: letters-loading 4s infinite;
	animation: letters-loading 4s infinite;
	color: #000000;
	content: attr(data-text-preloader);
	left: 0;
	opacity: 0;
	font-family: var(--font-heading);
	position: absolute;
	top: -3px;
	-webkit-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
}

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(2):before {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(3):before {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(4):before {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(5):before {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(6):before {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(7):before {
	-webkit-animation-delay: 1.2s;
	animation-delay: 1.2s;
}

.anaton-preloader
.animation-preloader
.txt-loading
.letters-loading:nth-child(8):before {
	-webkit-animation-delay: 1.4s;
	animation-delay: 1.4s;
}

.anaton-preloader p {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 8px;
	color: #3b3b3b;
}

.anaton-preloader .loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	z-index: 1;
	pointer-events: none;
}

.anaton-preloader .loader .row {
	height: 100%;
}

.anaton-preloader .loader .loader-section {
	padding: 0px;
}

.anaton-preloader .loader .loader-section .bg {
	background-color: #ffffff;
	height: 100%;
	left: 0;
	width: 100%;
	-webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
	transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}

@-webkit-keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}

@keyframes spinner {
	to {
		-webkit-transform: rotateZ(360deg);
		transform: rotateZ(360deg);
	}
}

@-webkit-keyframes letters-loading {
	0%,
  	75%,
  	100% {
		opacity: 0;
		-webkit-transform: rotateY(-90deg);
		transform: rotateY(-90deg);
	}

	25%,
  	50% {
		opacity: 1;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
}

@keyframes letters-loading {
	0%,
  	75%,
  	100% {
		opacity: 0;
		-webkit-transform: rotateY(-90deg);
		transform: rotateY(-90deg);
	}

	25%,
  	50% {
		opacity: 1;
		-webkit-transform: rotateY(0deg);
		transform: rotateY(0deg);
	}
}

@media screen and (max-width: 767px) {
	.anaton-preloader .animation-preloader .txt-loading {
		font: bold 3.5em var(--font-heading);
	}
}

@media screen and (max-width: 500px) {
	.anaton-preloader .animation-preloader .txt-loading {
		font: bold 2em  var(--font-heading);
	}
}

/* ============================================================== 
     # Home Creative Agency 
=================================================================== */

/* Services */

/* About */

/* Portfolio */

/* Fun Factor */



/* ============================================================== 
     # Home Chatbot
=================================================================== */

/* Feature */

.btn .fa-arrow-right {
    transform: rotate(-45deg);
    font-weight: 500;
}


/* About */


/* Technology */

/* Faq Style Four */

/* Pricing */



/* ============================================================== 
     # Home App Landing
=================================================================== */

/* Fun Factor */

/* Feture */


/* Free Trial */

/* App Process */

.secondary .pricing-style-one.active .pricing-header {
    background: var(--color-optional);
}

.secondary .pricing-style-one.active {
    border-color: var(--color-optional);
}
.secondary .btn.btn-theme {
    background: var(--color-optional);
    color: var(--white);
}

.secondary .btn:hover {
    color: var(--white);
}

.secondary .pricing-style-one .pricing-content h2 strong {
    color: var(--color-heading);
}

/* ============================================================== 
    # Responsive CSS
=================================================================== */

/* Desktop Mini */
@media only screen and (min-width: 992px) and (max-width: 1199px) {

	/* Home Chatbot */

	/* Home Creative Agency */

	/* Home App Landing */
	



}

/* Tablet To Mobile */
@media (max-width: 991px) {
}

/* Tablet Layout: 768px.*/
@media only screen and (min-width: 768px) and (max-width: 991px) {

	/* Home Chatbot */

	/* Home Creative Agency */

	/* Home App Landing */



}

/* Mobile */
@media (max-width: 767px) {


	/* Home Creative Agency */
	
	.faq-area.bg-cover.text-light {
		background-image: none !important;
		padding-top: 0;
	}

	/* Home Software Landing */

	/* Home ChatBot */
	

	
}