/*****************************************************************
    Template Name    : Techex - IT Solutions and Technology Website Template
    Author           : Barakah Themes
    Version          : 1.0
    Created          : 2022
    File Description : Main css file of the template
*****************************************************************/

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

** - 01 - Default CSS
** - 02 - Preloader Section CSS
** - 03 - Navbar Section CSS
** - 04 - Home Section CSS
** - 05 - Features Section CSS
** - 06 - About Section CSS
** - 07 - Services Section CSS
** - 08 - Services Details CSS
** - 09 - Choose Section CSS
** - 10 - Overview Section CSS
** - 11 - Counter Section CSS
** - 12 - Projects Section CSS
** - 13 - Projects Details CSS
** - 14 - Team Section CSS
** - 15 - Testimonial Section CSS
** - 16 - Hire Section CSS
** - 17 - Blog Section CSS
** - 18 - Blog Details CSS
** - 19 - Partner Section CSS
** - 20 - Other Page Banner Title CSS
** - 21 - Faq Page CSS
** - 22 - Pricing Page CSS
** - 23 - Industries Page CSS
** - 24 - Contact Page CSS
** - 25 - Coming Soon Page CSS
** - 26 - 404 Error Page CSS
** - 27 - Terms & Conditions - Privacy Policy CSS
** - 28 - Footer & Copyright Section CSS

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

/**************************************
 ** - 01 - Default CSS
 **************************************/

body {
	padding: 0;
	margin: 0;
	font-size: 15px;
	font-family: 'Kumbh Sans', sans-serif;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 3px;
}

button {
	outline: 0 !important;
}

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

.d-table {
	width: 100%;
	height: 100%;
}

.d-table-cell {
	vertical-align: middle;
}

.ptb-100 {
	padding-top: 100px;
	padding-bottom: 100px;
}

.pb-20 {
	padding-bottom: 20px;
}
.pb-30 {
	padding-bottom: 30px;
}
.pb-40 {
	padding-bottom: 40px;
}
.pb-50 {
	padding-bottom: 50px;
}
.pb-60 {
	padding-bottom: 60px;
}
.pb-70 {
	padding-bottom: 70px;
}
.pb-80 {
	padding-bottom: 80px;
}
.pb-90 {
	padding-bottom: 90px;
}

.pb-100 {
	padding-bottom: 100px;
}

.pt-20 {
	padding-top: 20px;
}
.pt-30 {
	padding-top: 30px;
}
.pt-40 {
	padding-top: 40px;
}
.pt-50 {
	padding-top: 50px;
}
.pt-60 {
	padding-top: 60px;
}
.pt-70 {
	padding-top: 70px;
}
.pt-80 {
	padding-top: 80px;
}
.pt-90 {
	padding-top: 90px;
}
.pt-100 {
	padding-top: 100px;
}

.bg-grey {
	background-color: rgb(215, 215, 215, 0.17);
}

.section-padding {
	padding: 100px 0;
}

a {
	text-decoration: none;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	outline: 0 !important;
	color: #505060;
}

a:hover {
	text-decoration: none;
	color: #5e87eb;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: 1.4;
	font-family: 'Kumbh Sans', sans-serif;
}

p {
	font-size: 15px;
	line-height: 1.8;
	color: #5f5f5f;
	margin-bottom: 15px;
	font-weight: 400;
	font-family: 'Kumbh Sans', sans-serif;
}

p:last-child {
	margin-bottom: 0;
}

.default-btn {
	border: none;
	position: relative;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	z-index: 1;
	color: #ffffff;
	background-color: #5e87eb;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 50px;
	font-weight: 600;
	font-size: 15px;
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.default-btn span {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	background-color: #3e57d0;
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
	border-radius: 30px;
}

.default-btn:hover, .default-btn:focus {
	color: #ffffff;
}

.default-btn:hover span, .default-btn:focus span {
	width: 225%;
	height: 562.5px;
}

.default-btn-one {
	border: none;
	position: relative;
	display: inline-block;
	text-align: center;
	overflow: hidden;
	z-index: 1;
	color: #5e87eb;
	background-color: #ffffff;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 50px;
	font-weight: 600;
	font-size: 15px;
	padding-left: 35px;
	padding-right: 35px;
	padding-top: 12px;
	padding-bottom: 12px;
	margin-top: 5px;
	margin-right: 20px;
	box-shadow: 0 7px 25px rgb(123,104,238,0.25);
}

.default-btn-one span {
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-radius: 50%;
	background-color: #3e57d0;
	-webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: -1;
	border-radius: 30px;
}

.default-btn-one:hover, .default-btn-one:focus {
	color: #ffffff;
}

.default-btn-one:hover span, .default-btn-one:focus span {
	width: 225%;
	height: 562.5px;
}

.btn-style-four {
	position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding-left: 15px;
}
.btn-style-four:before {
    position: absolute;
    content: '';
    width: 7px;
    height: 7px;
    left: 0px;
    top: 16px;
    border-radius: 50%;
    transition: all 500ms ease;
}
.btn-style-four:before{
	background: #5e87eb;
}

.btn-style-four{
	color: #2d275e;
}

.btn-style-four span{
	font-size: 23px;
	padding-left: 5px;
}
.btn-style-four:hover{
	color: #5e87eb !important;
}


.section-title {
	text-align: center;
	margin-bottom: 65px;
	line-height: 1.5;
}

.section-title h6 {
	font-size: 16px;
	font-weight: 600;
	color: #5e87eb;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.section-title h2 {
	font-size: 35px;
	color: #505060;
	margin: 0 0 0 0;
	font-weight: 700;
}

.color-text {
    color: #5e87eb;
}

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

/* [ Start Overlay ] */
[data-overlay-dark],
[data-overlay-light] {
	position: relative;
}

[data-overlay-dark] .container,
[data-overlay-light] .container {
	position: relative;
	z-index: 2;
}

[data-overlay-dark]:before,
[data-overlay-light]:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

[data-overlay-dark]:before {
	background: #02050b;
}

[data-overlay-light]:before {
	background: #fff;
}

[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.bg-dark span,
.bg-color h1,
.bg-color h2,
.bg-color h3,
.bg-color h4,
.bg-color h5,
.bg-color h6,
.bg-color span {
	color: #fff;
}

[data-overlay-dark] p,
.bg-dark p,
.bg-color p {
	color: #dad6d6;
}

[data-overlay-dark="0"]:before,
[data-overlay-light="0"]:before {
	opacity: 0;
}

[data-overlay-dark="1"]:before,
[data-overlay-light="1"]:before {
	opacity: .1;
}

[data-overlay-dark="2"]:before,
[data-overlay-light="2"]:before {
	opacity: .2;
}

[data-overlay-dark="3"]:before,
[data-overlay-light="3"]:before {
	opacity: .3;
}

[data-overlay-dark="4"]:before,
[data-overlay-light="4"]:before {
	opacity: .4;
}

[data-overlay-dark="5"]:before,
[data-overlay-light="5"]:before {
	opacity: .5;
}

[data-overlay-dark="6"]:before,
[data-overlay-light="6"]:before {
	opacity: .6;
}

[data-overlay-dark="7"]:before,
[data-overlay-light="7"]:before {
	opacity: .7;
}

[data-overlay-dark="8"]:before,
[data-overlay-light="8"]:before {
	opacity: .8;
}

[data-overlay-dark="9"]:before,
[data-overlay-light="9"]:before,
[data-overlay-color="9"]:before {
	opacity: .9;
}

[data-overlay-dark="10"]:before,
[data-overlay-light="10"]:before {
	opacity: 1;
}

/* [ End Overlay ] */
/*
 .... - - .--. ... ---... -..-. -..-. .-- .-- .-- .-.-.- - . -- .--. .-.. .- - . -- --- -. ... - . .-. .-.-.- -.-. --- -- -..-. .- ..- - .... --- .-. ... -..-. -... .- .-. .- -.- .- .... - .... . -- . ... -..-.
*/

/*****************************************
 ** - 00 -  Go Top CSS
 ******************************************/
.go-top {
	position: fixed;
	cursor: pointer;
	top: 0;
	right: 15px;
	color: #ffffff;
	background-color: #5e87eb;
	text-align: center;
	z-index: 4;
	width: 45px;
	height: 45px;
	line-height: 45px;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .9s;
	transition: .9s;
	border-radius: 3px;
}

.go-top.active {
	top: 97%;
	-webkit-transform: translateY(-98%);
	transform: translateY(-98%);
	opacity: 1;
	visibility: visible;
}

.go-top i {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: 0 auto;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.go-top i:last-child {
	opacity: 0;
	visibility: hidden;
	top: 60%;
}

.go-top::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #505060;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 3px;
}

.go-top:hover, .go-top:focus {
	color: #ffffff;
}

.go-top:hover::before, .go-top:focus::before {
	opacity: 1;
	visibility: visible;
}

.go-top:hover i:first-child, .go-top:focus i:first-child {
	opacity: 0;
	top: 0;
	visibility: hidden;
}

.go-top:hover i:last-child, .go-top:focus i:last-child {
	opacity: 1;
	visibility: visible;
	top: 50%;
}

/**************************************
 ** - 02 - Preloader Section CSS
 **************************************/
.preloader {
    position: fixed;
    z-index: 999999;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    text-align: center;
    left: 0;
    right: 0;
}
.preloader .lds-spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.preloader .lds-spinner div {
    -webkit-transform-origin: 40px 40px;
    transform-origin: 40px 40px;
    -webkit-animation: lds-spinner 1.2s linear infinite;
    animation: lds-spinner 1.2s linear infinite;
}
.preloader .lds-spinner div::after {
    content: " ";
    display: block;
    position: absolute;
    top: 5px;
    left: 35px;
    width: 5px;
    height: 20px;
    border-radius: 20%;
    background: #5e87eb;
}
.preloader .lds-spinner div:nth-child(1){
    -webkit-transform:rotate(0deg);
    transform:rotate(0deg);
    -webkit-animation-delay:-1.1s;
    animation-delay:-1.1s
}
.preloader .lds-spinner div:nth-child(2){
    -webkit-transform:rotate(30deg);
    transform:rotate(30deg);
    -webkit-animation-delay:-1s;
    animation-delay:-1s
}
.preloader .lds-spinner div:nth-child(3){
    -webkit-transform:rotate(60deg);
    transform:rotate(60deg);
    -webkit-animation-delay:-.9s;
    animation-delay:-.9s
}
.preloader .lds-spinner div:nth-child(4){
    -webkit-transform:rotate(90deg);
    transform:rotate(90deg);
    -webkit-animation-delay:-.8s;
    animation-delay:-.8s
}
.preloader .lds-spinner div:nth-child(5){
    -webkit-transform:rotate(120deg);
    transform:rotate(120deg);
    -webkit-animation-delay:-.7s;
    animation-delay:-.7s
}
.preloader .lds-spinner div:nth-child(6){
    -webkit-transform:rotate(150deg);
    transform:rotate(150deg);
    -webkit-animation-delay:-.6s;
    animation-delay:-.6s
}
.preloader .lds-spinner div:nth-child(7){
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
    -webkit-animation-delay:-.5s;
    animation-delay:-.5s
}
.preloader .lds-spinner div:nth-child(8){
    -webkit-transform:rotate(210deg);
    transform:rotate(210deg);
    -webkit-animation-delay:-.4s;
    animation-delay:-.4s
}
.preloader .lds-spinner div:nth-child(9){
    -webkit-transform:rotate(240deg);
    transform:rotate(240deg);
    -webkit-animation-delay:-.3s;
    animation-delay:-.3s
}
.preloader .lds-spinner div:nth-child(10){
    -webkit-transform:rotate(270deg);
    transform:rotate(270deg);
    -webkit-animation-delay:-.2s;
    animation-delay:-.2s
}
.preloader .lds-spinner div:nth-child(11){
    -webkit-transform:rotate(300deg);
    transform:rotate(300deg);
    -webkit-animation-delay:-.1s;
    animation-delay:-.1s
}
.preloader .lds-spinner div:nth-child(12){
    -webkit-transform:rotate(330deg);
    transform:rotate(330deg);
    -webkit-animation-delay:0s;
    animation-delay:0s
}
@-webkit-keyframes lds-spinner{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}
@keyframes lds-spinner{
    0%{
        opacity:1
    }
    100%{
        opacity:0
    }
}

/**************************************
 ** - 03 - Navbar Section CSS
 **************************************/
.techex-responsive-nav {
	display: none;
}

.techex-nav {
	background-color: transparent;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-right: 0;
	padding-left: 0;
}

.techex-nav .navbar {
	padding-right: 0;
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 0;
}

.techex-nav .navbar ul {
	padding-left: 0;
	list-style-type: none;
	margin-bottom: 0;
}

.techex-nav .navbar .navbar-nav {
	margin: auto;
}

.techex-nav .navbar .navbar-nav .nav-item {
	position: relative;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 0;
	padding-right: 0;
}

.techex-nav.index-navber .navbar .navbar-nav .nav-item a {
	color: #555;
}
.techex-nav .navbar .navbar-nav .nav-item a {
	font-size: 16px;
	font-weight: 500;
	color: #fff;
	text-transform: capitalize;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	margin-left: 15px;
	margin-right: 15px;
}
/*
.techex-nav .navbar .navbar-nav .nav-item a:hover, .techex-nav .navbar .navbar-nav .nav-item a:focus, .techex-nav .navbar .navbar-nav .nav-item a.active {
	color: #5e87eb;
}
*/
.techex-nav .navbar .navbar-nav .nav-item a i {
	font-size: 10px;
	position: relative;
	top: -1px;
	margin-left: 1px;
}

.techex-nav .navbar .navbar-nav .nav-item:last-child a {
	margin-right: 0;
}

.techex-nav .navbar .navbar-nav .nav-item:first-child a {
	margin-left: 0;
}
/*
.techex-nav .navbar .navbar-nav .nav-item:hover a, .techex-nav .navbar .navbar-nav .nav-item:focus a, .techex-nav .navbar .navbar-nav .nav-item.active a {
	color: #5e87eb;
}
*/
.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu {
	-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
	background: #ffffff;
	position: absolute;
	border: none;
	top: 80px;
	left: 0;
	width: 230px;
	z-index: 99;
	display: block;
	opacity: 0;
	visibility: hidden;
	border-radius: 5px;
    overflow: hidden;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	padding: 0px;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li {
	padding: 0;
	border-bottom: 1px solid #f1f1f1;
}
.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li:last-child {
	border-bottom: 0px solid transparent;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li a {
	text-transform: capitalize;
	padding: 10px 15px;
	margin: 0;
	position: relative;
	color: #505060;
	font-size: 15px;
	font-weight: 500;
	border-left: 3px solid transparent;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:hover, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li a:focus, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li a.active {
	color: #505060;
	background: #f8f8f8;
	padding-left: 20px;
	border-left: 3px solid #ffc107;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu {
	left: -245px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a {
	color: #696997;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:hover, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a:focus, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li a.active {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: -245px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: -245px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: 195px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: 195px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu {
	left: 195px;
	top: 0;
	opacity: 0;
	visibility: hidden;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a {
	color: #696997;
	text-transform: capitalize;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:hover, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a:focus, .techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li a.active {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li.active a {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li.active a {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li.active a {
	color: #5e87eb;
}

.techex-nav .navbar .navbar-nav .nav-item .dropdown-menu li:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: -15px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.techex-nav .navbar .navbar-nav .nav-item:hover .dropdown-menu {
	opacity: 1;
	visibility: visible;
	top: 100%;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.techex-nav .navbar .other-option {
	margin-left: 0;
	margin-top: 5px;
}

.techex-nav .navbar .other-option .default-btn {
    font-size: 15px;
	box-shadow: 0 2px 15px rgb(123, 104, 238, 0.15);
}

.techex-nav .navbar .other-option .default-btn.nav-btn-1 {
	margin-right: 15px;
}

.techex-nav .black-logo {
	display: none;
}

.navbar-area {
	background-color: transparent;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	position: absolute;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
}

.navbar-area.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	-webkit-box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
	background: #ffffff !important;
	-webkit-animation: 500ms ease-in-out 0s normal fadeInDown;
	animation: 500ms ease-in-out 0s normal fadeInDown;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.navbar-area.is-sticky .navbar-nav .nav-item a {
	color: #505050;
}

.navbar-area.is-sticky .navbar-nav .nav-item a:hover, .navbar-area.is-sticky .navbar-nav .nav-item a:focus, .navbar-area.is-sticky .navbar-nav .nav-item a.active {
	color: #5e87eb;
}

.navbar-area.is-sticky .techex-nav .navbar-brand .white-logo {
	display: none;
}

.navbar-area.is-sticky .techex-nav .navbar-brand .black-logo {
	display: block;
}

@media only screen and (max-width: 991px) {
	.navbar-area {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.navbar-area.is-sticky {
		border-bottom: none;
		-webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		padding-top: 20px;
		padding-bottom: 20px;
	}

	.navbar-area.is-sticky .logo .white-logo {
		display: none;
	}

	.navbar-area.is-sticky .logo .black-logo {
		display: block;
	}

	.techex-responsive-nav {
		display: block;
	}

	.techex-responsive-nav .techex-responsive-menu {
		position: relative;
	}

	.techex-responsive-nav .techex-responsive-menu.mean-container .mean-nav ul {
		font-size: 15px;
	}

	.techex-responsive-nav .techex-responsive-menu.mean-container .mean-nav ul li a {
		font-size: 15px;
	}

	.techex-responsive-nav .techex-responsive-menu.mean-container .mean-nav ul li a.active {
		color: #5e87eb;
	}

	.techex-responsive-nav .techex-responsive-menu.mean-container .mean-nav ul li li a {
		font-size: 15px;
	}

	.techex-responsive-nav .techex-responsive-menu.mean-container .navbar-nav {
		overflow-y: scroll;
		height: 270px;
		-webkit-box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 7px 13px 0 rgba(0, 0, 0, 0.1);
	}

	.techex-responsive-nav .techex-responsive-menu.mean-container .others-options {
		display: none;
	}

	.techex-responsive-nav .mean-container a.meanmenu-reveal {
		color: #505060;
	}

	.techex-responsive-nav .mean-container a.meanmenu-reveal span {
		background: #505060;
	}

	.techex-responsive-nav .logo {
		position: relative;
		width: 50%;
		z-index: 999;
	}

	.techex-responsive-nav .logo .white-logo {
		display: block;
	}

	.techex-responsive-nav .logo .black-logo {
		display: none;
	}

	.techex-nav {
		display: none;
	}
}

/**************************************
 ** - 04 - Home Section CSS
 **************************************/
.home-area {
	overflow: hidden;
	position: relative;
	z-index: 1;
	height: 670px;
	background: url(../img/home-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/*
.home-area:before {
    content: "";
    position: absolute;
	z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
	background-color: #100426;
    background: url(../img/dot-shape.png) no-repeat center/cover;
}
*/
.grey-cr {
    height: 500px;
    width: 500px;
    border-radius: 500px;
    position: absolute;
    bottom: -20%;
    left: -10%;
	z-index: -1;
    background: rgb(215, 215, 215, 0.17);
}
.main-banner-content {
	padding-top: 70px;
}

.main-banner-content h3 {
	font-size: 15px;
    color: #3e57d0;
    margin: 0 0 15px 0;
    font-weight: 600;
    padding: 6px 25px;
    background: #ffffff;
    display: inline-block;
    border-radius: 50px;
    text-transform: uppercase;
    word-spacing: 5px;
    letter-spacing: 0.5px;
}

.main-banner-content h1 {
	font-size: 45px;
	color: #333;
	margin: 0 0 20px 0;
	font-weight: 700;
}

.main-banner-content p {
	color: #333;
	font-size: 16px;
	margin: 0 0 0 0;
}

.main-banner-content .banner-btn {
	margin-top: 25px;
}

.home-area .banner-image {
    text-align: center;
    padding-top: 70px;
}

.home-area .creative-shape {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

/**************************************
 ** - 05 - Features Section CSS
 **************************************/
.features-section .section-title {
	margin-bottom: 35px;
}

.single-features-item {
	position: relative;
	z-index: 1;
	display: block;
	padding: 40px 25px;
	text-align: center;
	border-radius: 10px;
	background-color: #ffffff;
	margin-top: 30px;
	overflow: hidden;
	-webkit-box-shadow: 0px 2px 25px 0px rgb(110, 110, 110, 0.12);
    -moz-box-shadow: 0px 2px 25px 0px rgb(110, 110, 110, 0.12);
    box-shadow: 0px 2px 25px 0px rgb(110, 110, 110, 0.12);
    -webkit-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}

.single-features-item:hover {
	-webkit-transform: translateY(-10px);
	transform: translateY(-10px);
}

.features-icon {
    display: inline-block;
    margin-bottom: 25px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    will-change: transform;
}

.single-features-item:hover .features-icon i{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.features-icon i {
    color: #5e87eb;
	font-size: 38px;
	width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background: rgb(215, 215, 215, 0.17);
    border-radius: 50%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.single-features-item h3 {
	font-size: 18px;
    font-weight: 600;
	margin-bottom: 0;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.single-features-item h3 a {
	display: inline-block;
}

.single-features-item p {
	font-size: 15px;
	margin-top: 15px;
	margin-bottom: 0;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    will-change: transform;
}

.single-features-item .features-btn-link {
	margin-top: 16px;
}

.single-features-item .features-btn-link .features-link {
    display: inline-block;
    font-size: 16px;
    color: #5e87eb;
	letter-spacing: 0.5px;
    font-weight: 600;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
	text-decoration: underline;
}

/**************************************
 ** - 06 - About Section CSS
 **************************************/
.about-area {
	position: relative;
	z-index: 1;
}
.about-content {
    margin-left: 0px;
}

.about-content.about-content-2 {
    margin-right: 0;
    margin-left: 0;
}

.about-content h6 {
	color: #5e87eb;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.about-content h2 {
	font-size: 38px;
	font-weight: 700;
	margin-bottom: 20px;
}

.about-content p {
	margin-bottom: 15px;
}

.about-content .about-feature-list {
    margin-top: 20px;
}

.about-content .about-feature-list li {
	color: #747576;
    margin-bottom: 10px;
}

.about-content .about-feature-list li:last-child {
    margin-bottom: 0px;
}

.about-content .about-feature-list i {
	color: #5e87eb;
    font-size: 14px;
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    margin-right: 10px;
    background-color: transparent;
    border-left: 1px solid rgb(0, 0, 0, 0.1);
    border-radius: 50px;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    text-align: center;
    background: -webkit-gradient(90deg, rgb(215, 215, 215, 0.03) 0%, rgb(215, 215, 215, 0.0) 100%);
    background: linear-gradient(90deg, rgb(215, 215, 215, 0.3) 0%, rgb(215, 215, 215, 0.0) 100%);
}

.about-image {
    text-align: center;
}
.about-image img {
	border-radius: 3px;
}

.about-area .skills {
	margin-top: 30px;
}
.about-area .skills .skill-item {
	margin-bottom: 25px;
}

.about-area .skills .skill-item:last-child {
	margin-bottom: 0px;
}

.about-area .skills .skill-item h6 {
	position: relative;
	z-index: 4;
	font-size: 15px;
	text-transform: capitalize;
	font-weight: 600;
	margin-bottom: 10px;
}
.about-area .skills .skill-item h6 em {
	float: right;
	font-size: 15px;
	font-style: normal;
}
.about-area .skills .skill-item .skill-progress {
	position: relative;
	height: 5px;
	border-radius: 5px;
	background: #f1f1fa;
}
.about-area .skills .skill-item .skill-progress .progres {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 10%;
	background-color: #5e87eb;
	-webkit-transition: all 1.5s;
	transition: all 1.5s;
}

.about-image .waves-box {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
.about-image .iq-video {
    background: #3F51B5;
    display: inline-block;
    width: 70px;
    height: 70px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    border-radius: 100%;
    line-height: 70px;
    z-index: 9;
    position: relative;
}
.about-image .iq-video:hover {
    background: #fff;
    color: #3F51B5;
}
.about-image .iq-video i {
	margin-left: 5px;
}
.about-image .iq-waves {
	position: absolute;
	left: -30px;
	top: -30px;
	z-index: 2;
}
.about-image .iq-waves .waves {
	position: absolute;
	width: 130px;
	height: 130px;
    background: rgba(255, 255, 255, 0.65);
	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;
}
.about-image .iq-waves .wave-1 {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
.about-image .iq-waves .wave-2 {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
.about-image .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)";
	}
}

.about-image .years-design {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;text-align: left;
    padding: 10px 40px 20px 40px;
    background: #ffffff;
    border-bottom: 3px solid #5e87eb;
	-webkit-box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
	box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
}

.about-image .years-design h2 {
    font-size: 75px;
    font-weight: 700;
    background: url(../img/banner-bg.jpg) no-repeat;
    background-position: 50% 65%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    margin: 0;
}
.about-image .years-design h5 {
    color: #5e87eb;
    font-size: 18px;
    font-weight: 600;
    margin-top: 10px;
}

/**************************************
 ** - 07 - Services Section CSS
 **************************************/
.services-section .section-title {
	margin-bottom: 35px;
}

.single-services-item {
	position: relative;
	z-index: 1;
	display: block;
	padding: 35px 30px;
	text-align: center;
	border-radius: 5px;
	background-color: #ffffff;
	margin-top: 30px;
	overflow: hidden;
	-webkit-box-shadow: 0px 2px 25px 0px rgb(110, 110, 110, 0.12);
    -moz-box-shadow: 0px 2px 25px 0px rgb(110, 110, 110, 0.12);
    box-shadow: 0px 2px 25px 0px rgb(110, 110, 110, 0.12);
    -webkit-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
}
.single-services-item::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
    width: 70%;
    height: 3px;
    margin: 0 auto;
    border-radius: 5px;
    background-color: #5e87eb;
    background-image: linear-gradient(-135deg, #611bdd 0%, #5e87eb 100%);
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
}
.single-services-item:hover::before {
    width: 100%;
    height: 100%;
}

.services-icon {
	width: 85px;
    height: 85px;
	padding: 17px 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 25px;
    border-radius: 50%;
    background: -webkit-gradient(90deg, rgb(215, 215, 215, 0.03) 0%, rgb(215, 215, 215, 0.2) 100%);
    background: linear-gradient(90deg, rgb(215, 215, 215, 0.03) 0%, rgb(215, 215, 215, 0.2) 100%);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.services-icon img {
}

.single-services-item h3 {
	font-size: 18px;
    font-weight: 600;
	margin-bottom: 0;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.single-services-item h3 a {
	display: inline-block;
}

.single-services-item p {
	font-size: 15px;
	margin-top: 15px;
	margin-bottom: 0;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    will-change: transform;
}

.single-services-item .services-btn-link {
	margin-top: 16px;
}

.single-services-item .services-btn-link .services-link {
    display: inline-block;
    font-size: 16px;
    color: #5e87eb;
    font-weight: 600;
	text-decoration: underline;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

.single-services-item:hover {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
}

.single-services-item:hover .services-icon {
    background: #fff;
}

.single-services-item:hover h3 {
	color: #fff;
}
.single-services-item:hover p {
	color: #fff;
}
.single-services-item:hover .services-btn-link .services-link {
	color: #fff;
}
/************************************************
 ** - 08 - Services Details CSS
 ************************************************/
.services-details-image {
	text-align: center;
    margin-bottom: 40px;
}
.services-details-image img {
    border-radius: 5px;
}

.services-details-content h3 {
    font-size: 25px;
    margin-bottom: 15px;
}
.services-details-content .features-text {
    margin-top: 20px;
}

.services-details-content .features-text h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.services-details-content .features-text .service-features-list {
    margin-bottom: 25px;
}

.services-details-content .features-text .service-features-list li {
	color: #747576;
    margin-bottom: 10px;
}

.services-details-content .features-text .service-features-list li:last-child {
    margin-bottom: 0px;
}

.services-details-content .features-text .service-features-list i {
	color: #5e87eb;
    font-size: 12px;
    display: inline-block;
    height: 30px;
    width: 30px;
    line-height: 30px;
    margin-right: 10px;
    background-color: transparent;
    border-left: 1px solid rgb(0, 0, 0, 0.2);
    border-radius: 50px;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    text-align: center;
}

.services-widget .widget {
	padding: 30px 25px;
	margin-top: 35px;
    border-radius: 5px;
	background-color: rgb(11, 11, 49, 0.05);
}

.services-widget .widget:first-child {
	margin-top: 0;
}

.services-widget .widget .widget-title {
	position: relative;
	font-size: 22px;
	padding-bottom: 10px;
	margin-bottom: 30px;
	text-transform: capitalize;
	border-bottom: 1px solid #ffffff;
}

.services-widget .widget .widget-title::before {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 50px;
	height: 1px;
	background-color: #5e87eb;
}

.services-widget .widget_categories ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.services-widget .widget_categories ul li {
	position: relative;
	color: #747576;
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 12px;
}

.services-widget .widget_categories ul li:last-child {
	margin-bottom: 0;
}


.services-widget .widget_categories ul li a {
	color: #ffffff;
	font-size: 15px;
	font-weight: 600;
    padding: 12px 15px;
    display: block;
    border-radius: 5px;
    background-color: #5e87eb;
    transition: all ease 350ms;
    -moz-transition: all ease 350ms;
    -webkit-transition: all ease 350ms;
}

.services-widget .widget_categories ul li a:hover {
	color: #ffffff;
    background-color: #3e57d0;
}
.widget_download_btn a {
    padding: 12px 20px;
    display: block;
    border-radius: 5px;
}
.widget_download_btn a:first-child {
    margin: 0 0 12px;
}

/**************************************
 ** - 09 - Choose Section CSS
 **************************************/
.choose-images {
	text-align: center;
}
.choose-content-info h6 {
    color: #5e87eb;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.choose-content-info h2 {
    font-size: 33px;
	font-weight: 700;
    margin-bottom: 35px;
}

.choose-feature-box {
    margin-top: 25px;
}
.choose-content-2 .choose-feature-box {
    margin-top: 0px;
}

.choose-content .choose-single-feature {
	position: relative;
    padding: 0;
    margin-bottom: 30px;
}
.choose-content-2 .choose-single-feature {
    margin-bottom: 45px;
}

.choose-single-feature:last-child {
	margin-bottom: 0px;
}
.choose-features-icon {
    position: absolute;
    z-index: 1;
	left: 0;
	top: 5px;
    text-align: center;
    border-radius: 5px;
    border: 0;
}

.choose-features-icon img {
	width: 85px;
    height: 85px;
	padding: 18px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 25px;
    border-radius: 50%;
    background: -webkit-gradient(90deg, rgb(215, 215, 215, 0.03) 0%, rgb(215, 215, 215, 0.2) 100%);
    background: linear-gradient(90deg, rgb(215, 215, 215, 0.03) 0%, rgb(215, 215, 215, 0.2) 100%);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}

.choose-features-info {
    padding-left: 110px;
}

.choose-features-info p {
    margin: 0;
}

.choose-features-info h3 {
    font-size: 18px;
	margin-bottom: 10px;
}

/**************************************
 ** - 10 - Overview Section CSS
 **************************************/
.overview-content h6 {
    color: #5e87eb;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.overview-content h2 {
	color: #505060;
	font-size: 33px;
	font-weight: 700;
	margin: 8px 0 15px 0;
}

.overview-content p {
	margin: 0 0 0 0;
}

.overview-content .features-list {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-left: 0;
	list-style-type: none;
	margin-bottom: 0;
	margin-top: 16px;
	margin-left: -10px;
	margin-right: -10px;
}

.overview-content .features-list li {
	-ms-flex: 0 0 50%;
	-webkit-box-flex: 0;
	flex: 0 0 50%;
	max-width: 50%;
	margin-top: 25px;
	padding-left: 10px;
	padding-right: 10px;
}

.overview-content .features-list li span {
	position: relative;
	z-index: 1;
	color: #505060;
	font-size: 15px;
	font-weight: 600;
	padding: 15px 15px;
	padding-left: 20px;
	display: block;
	background-color: #ffffff;
	border-radius: 5px 5px;
	border-left: 2px solid #5e87eb;
	-webkit-box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
	box-shadow: -1px 3px 20px 0px rgb(82, 90, 101, 0.1);
	overflow: hidden;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.overview-content .features-list li span:hover {
	color: #ffffff;
	padding-left: 25px;
}
.overview-content .features-list li span.active {
    color: #fff;
	padding-left: 25px;
}

.overview-content .features-list li span::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
    right: 100%;
	bottom: 0;
	border-radius: 5px 5px;
	background-color: #5e87eb;
	background-image: linear-gradient(-135deg, #611bdd 0%, #5e87eb 100%);
	z-index: -1;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.overview-content .features-list li span.active:before {
    right: 0;
}
.overview-content .features-list li span:hover::before {
	right: 0;
}

.overview-image {
	text-align: center;
}

/**************************************
 ** - 11 - Counter Section CSS
 **************************************/
.counter-area {
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
	text-align: center;
	background: url(../img/banner-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}
.counter-area::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	opacity: 0.3;
	background-color: #111428;
}
.counter-area .section-title h5 {
	color: #ffffff;
}
.counter-area .section-title h2 {
	color: #fff;
}
.counter-contents h2 {
	color: #fff;
	font-size: 45px;
	font-weight: 700;
	margin-bottom: 5px;
	word-spacing: -10px;
}
.counter-contents h3 {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
}

/**************************************
 ** - 12 - Projects Section CSS
 **************************************/
.project-area {
	position: relative;
}

.project-area .project-list {
	text-align: center;
	margin-bottom: 25px;
}

.project-area .project-list .nav {
	display: inline-block;
	margin: 0;
	position: relative;
}

.project-area .project-list .nav li {
	display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 10px;
    padding: 12px 30px;
    background-color: #fff;
    cursor: pointer;
    border-radius: 3px;
    -webkit-box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15);
    box-shadow: 0px 5px 30px 0px rgba(148, 146, 245, 0.15);
    transition: all 0.4s ease 0s;
	-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;
}

.project-area .project-list .nav li:hover, .project-area .project-list .nav li.filter-active {
    color: #fff;
    background-color: #5e87eb;
	-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;
}

.project-area .project-container {
	display: inline-block;
	width: 100%;
}

.project-area .project-grid-item {
	overflow: hidden;
}

.project-grid-item img {
	width: 100%;
    border-radius: 3px;
}

.project-item {
	position: relative;
	display: block;
	overflow: hidden;
    border-radius: 0px;
	margin-top: 30px;
}

.project-item .project-content-overlay {
    position: absolute;
    z-index: 2;
    left: 10px;
    right: 10px;
    bottom: -20px;
    background-color: #fff;
    border-radius: 3px;
    padding: 20px 20px;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
.project-item .project-content-overlay p {
    color: #5e87eb;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
    -webkit-transition: all .4s;
    transition: all .4s;
}
.project-item .project-content-overlay h3 {
    color: #1b1b1b;
    font-size: 18px;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
    -webkit-transition: all .4s;
    transition: all .4s;
}
.project-item:hover .project-content-overlay p,
.project-item:hover .project-content-overlay h3 {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition-delay: .3s;
	transition-delay: .3s;
}
.project-item:hover .project-content-overlay {
    bottom: 10px;
    opacity: 1;
    visibility: visible;
}

/************************************************
 ** - 13 - Projects Details CSS
 ************************************************/
.projects-details-image {
	text-align: center;
	margin-bottom: 45px;
}
.projects-details-desc h2 {
	margin-bottom: 20px;
    font-size: 33px;
    font-weight: 700;
}

.projects-details-desc h3 {
	margin-bottom: 13px;
	font-size: 25px;
}

.projects-details-desc .features-text {
	margin-top: 25px;
	margin-bottom: 25px;
}

.projects-details-desc .features-text h4 {
	margin-bottom: 12px;
	font-size: 20px;
	font-weight: 600;
}

.projects-details-desc .features-text h4 i {
	font-size: 16px;
	margin-right: 4px;
	color: #5e87eb;
}

.projects-details-desc .project-details-info {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
	margin-top: 35px;
}

.projects-details-desc .project-details-info .single-info-box {
	-ms-flex: 0 0 20%;
	-webkit-box-flex: 0;
	flex: 0 0 20%;
	max-width: 20%;
	padding-left: 15px;
	padding-right: 15px;
}

.projects-details-desc .project-details-info .single-info-box h4 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 15px;
}

.projects-details-desc .project-details-info .single-info-box span {
	display: block;
	color: #333;
	font-size: 15px;
}

.projects-details-desc .project-details-info .single-info-box .social {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.projects-details-desc .project-details-info .single-info-box .social li {
	display: inline-block;
	margin-right: 8px;
}

.projects-details-desc .project-details-info .single-info-box .social li a {
	color: #5e87eb;
	display: inline-block;
	background: transparent;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	border: 1px dashed #5e87eb;
	border-radius: 25px;
}

.projects-details-desc .project-details-info .single-info-box .social li a:hover {
	color: #fff;
	background-color: #5e87eb;
}

.projects-details-desc .project-details-info .single-info-box .default-btn {
	padding: 10px 30px;
}

/**************************************
 ** - 14 - Team Section CSS
 **************************************/
.team-area {
}

.team-area .section-title {
	margin-bottom: 35px;
}
.single-team-box {
	margin-top: 30px;
	overflow: hidden;
    background-color: #fff;
    border-radius: 5px;
	-webkit-box-shadow: 0px 2px 30px 0px rgb(82, 90, 101, 0.1);
	box-shadow: 0px 2px 30px 0px rgb(82, 90, 101, 0.1);
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.team-image {
	position: relative;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 auto;
}

.team-image::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    background-color: #000;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.single-team-box:hover .team-image::before {
    opacity: .8;
    visibility: visible;
}

.single-team-box .team-image img {
	width: 100%;
	height: auto;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.single-team-box:hover .team-image img {
	-webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.team-social-icon {
    position: absolute;
    z-index: 5;
    bottom: -50px;
    width: 100%;
	text-align: center;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}
.single-team-box:hover .team-social-icon {
    bottom: 20px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.team-social-icon a {
    margin: 5px;
    color: #5e87eb;
	font-size: 16px;
	display: inline-block;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
	will-change: transform;
}
.team-social-icon a i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #ffffff;
	border-radius: 3px;
}

.team-info {
    padding: 20px 15px 20px;
    text-align: center;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.team-info h3 {
	color: #333;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 5px;
}
.team-info span {
	color: #5e87eb;
	font-size: 15px;
	font-weight: 500;
	display: block;
}

/**************************************
 ** - 15 - Testimonial Section CSS
 **************************************/
.testimonial-section {
	text-align: center;
	position: relative;
	z-index: 1;
}

.single-testimonial {
	position: relative;
	background: #fff;
	padding: 30px 15px;
	border-radius: 5px;
}

.single-testimonial .testimonial-content {
	margin-bottom: 25px;
	text-align: center;
}

.single-testimonial .rating-box {
	margin-bottom: 10px;
}
.rating-box ul li {
	display: inline-block;
	margin-right: 0px;
}

.rating-box ul li i {
	color: #ffce39;
	font-size: 16px;
}

.single-testimonial .testimonial-content p {
	font-size: 15px;
	color: #333;
	font-style: italic;
	line-height: 1.8;
	letter-spacing: 1px;
}

.single-testimonial .avatar {
	margin: 0 auto;
	margin-bottom: 15px;
}

.single-testimonial .avatar img {
	border-radius: 50%;
	border: 5px solid #f8f8f8;
	width: 90px;
	margin: 0 auto;
}

.single-testimonial .testimonial-bio {
	text-align: center;
}

.single-testimonial .testimonial-bio .bio-info h3 {
	color: #333;
	font-size: 18px;
	font-weight: 600;
	margin-top: 0;
}

.single-testimonial .testimonial-bio .bio-info span {
	color: #333;
	font-size: 15px;
	font-weight: 500;
}

.testimonial-slider.owl-theme .owl-nav {
	opacity: 0;
	visibility: hidden;
	margin-top: 0;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.testimonial-slider.owl-theme .owl-nav [class*=owl-] {
	position: absolute;
	left: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	background-color: #fff;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	color: #333;
	font-size: 18px;
	width: 50px;
	height: 45px;
	line-height: 50px;
}

.testimonial-slider.owl-theme .owl-nav [class*=owl-].owl-next {
	left: auto;
	right: 10px;
}

.testimonial-slider.owl-theme .owl-nav [class*=owl-]:hover {
	color: #5e87eb;
	background-color: transparent;
}

.testimonial-slider.owl-theme .owl-dots {
	line-height: .01;
	margin-top: 30px;
	margin-bottom: 0;
}

.testimonial-slider.owl-theme .owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 0 4px;
	background-color: #fff;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 30px;
}

.testimonial-slider.owl-theme .owl-dots .owl-dot:hover span {
	background-color: #5e87eb;
}

.testimonial-slider.owl-theme .owl-dots .owl-dot.active span {
	background-color: #5e87eb;
}

.testimonial-slider.owl-theme:hover .owl-nav {
	opacity: 1;
	visibility: visible;
}

/***************************************************
 ** - 15 - Testimonial Design Two Section CSS
 ***************************************************/
.testimonial-design-two {
	position: relative;
	z-index: 1;
}

.testimonial-design-two .section-title {
    margin-bottom: 30px;
}

.testimonial-design-two .owl-stage-outer {
	margin: 0 -8px;
	padding-left: 8px;
	padding-top: .35rem;
}
.single-testimonial-two .testimonial-two-content {
    display: block;
    margin: 0px 15px;
}
.testimonial-two-content .testimonial-text {
	position: relative;
    display: block;
    background: #fff;
    padding: 45px 30px 40px 30px;
    margin: 40px 0px;
    box-shadow: 0 10px 35px 15px #ededf1;
    border-radius: 5px;
}
.testimonial-two-content .testimonial-text:after {
	position: absolute;
    content: '';
    background: #ffffff;
    width: 50px;
    height: 50px;
    left: 25px;
    bottom: -20px;
    transform: rotate(-45deg);
}
.testimonial-two-content .testimonial-text .logo-box {
    display: inline-block;
    margin-bottom: 10px;
}

.testimonial-two-content .testimonial-text p {
}

.testimonial-two-content .testimonial-text .rating-box {
	margin-top: 15px;
}

.testimonial-two-content .testimonial-text .rating-box ul li {
	display: inline-block;
}

.testimonial-two-content .testimonial-text .rating-box ul li i {
	color: #ffce39;
	font-size: 16px;
}
.testimonial-two-content .author-info-box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: row;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    text-align: left;
	padding: 20px 0px;
	margin-left: 10px;
}

.testimonial-two-content .author-info-box .author-img img {
    border-radius: 50%;
    border: 5px solid #fff;
    width: 90px;
    margin: 0 auto;
	-webkit-box-shadow: 0 3px 15px rgba(218, 225, 232, 0.85);
	box-shadow: 0 3px 15px rgba(218, 225, 232, 0.85);
}
.testimonial-two-content .author-info-box .author-img {
	margin-right: 18px;
}
.testimonial-two-content .author-info-box h3 {
    color: #333;
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
}

.testimonial-two-content .author-info-box span {
	color: #5e87eb;
    font-size: 15px;
    font-weight: 500;
}

/* owl theme */

.owl-theme .owl-nav.disabled+.owl-dots {
	margin-top: 20px;
}
.owl-theme .owl-dots .owl-dot span {
	width: 7px;
	height: 7px;
	margin: 5px 5px;
	background-color: rgba(0, 0, 0, 0.1);
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;
	border-radius: 3px;
	transition: .3s;
	border: 2px solid transparent;
}
.owl-theme .owl-dots .owl-dot.active span {
	background-color: #5764ec !important;
	width: 7px;
	height: 7px;
	transition: .3s;
	-webkit-box-shadow: 0 1px 5px #5764ec;
	box-shadow: 0 1px 5px #5764ec;
}
.owl-theme .owl-dots .owl-dot:hover span {
	background-color: transparent;
	border: 2px solid #5764ec;
	transition: .3s;
}

/**************************************
 ** - 16 - Hire Section CSS
 **************************************/
.hire-section {
	position: relative;
	z-index: 1;
	background-image: url(../img/banner-bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
	padding: 70px 0;
}

.hire-section::before {
	content: "";
	position: absolute;
    z-index: -1;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0.3;
	background-color: #111428;
}

.hire-content h6 {
	font-size: 16px;
	font-weight: 600;
	color: #5e87eb;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.hire-content h2 {
	font-size: 33px;
	color: #fff;
	margin: 0;
	font-weight: 700;
}

.hire-content p {
	color: #fff;
	font-size: 16px;
	margin: 20px 0 0 0;
}

.hire-content .hire-btn {
	margin-top: 20px;
}

.hire-content .hire-btn .default-btn {
    margin-right: 15px;
}

/**************************************
 ** - 17 - Blog Section CSS
 **************************************/
.blog-single-item {
	border-radius: 5px;
	overflow: hidden;
	background-color: #ffffff;
	position: relative;
	margin-bottom: 30px;
	-webkit-box-shadow: 0px 2px 30px 0px rgb(82, 90, 101, 0.1);
	box-shadow: 0px 2px 30px 0px rgb(82, 90, 101, 0.1);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.blog-single-item .blog-description {
	border-top: none;
	text-align: center;
	padding: 25px 20px;
}

.blog-single-item .blog-description .blog-list {
	padding-left: 0;
	margin-bottom: 10px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.blog-single-item .blog-description .blog-list li {
	list-style-type: none;
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	margin-right: 15px;
	color: #5e87eb;
}

.blog-single-item .blog-description .blog-list li:last-child {
	margin-right: 0;
}

.blog-single-item .blog-description .blog-list li i {
	margin-right: 3px;
	position: relative;
	top: -1px;
}

.blog-single-item .blog-description .blog-list li i::before {
	font-size: 15px;
}

.blog-single-item .blog-description .blog-list a {
	color: #5e87eb;
	text-decoration: none;
}

.blog-single-item .blog-description .blog-content {
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.blog-single-item .blog-description .blog-content h3 {
	color: #505060;
	font-size: 18px;
	margin-bottom: 15px;
	line-height: 25px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
	line-height: 32px;
	font-weight: 600;
	display: inline-block;
}

.blog-single-item .blog-description .blog-content h3:hover {
	color: #5e87eb;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	text-decoration: none;
}

.blog-single-item .blog-description .blog-content p {
	margin: 0;
	font-size: 15px;
	color: #6a6c72;
}

.blog-single-item .blog-description .blog-content a {
	text-decoration: none;
}

.blog-single-item .blog-description .blog-content .blog-btn {
	margin-top: 20px;
}

.blog-single-item:hover .blog-content h3 {
	color: #5e87eb;
}

/**************************************
 ** - 18 - Blog Details CSS
 **************************************/
.blog-details-desc .article-content {
	margin-top: 30px;
}

.blog-details-desc .article-content .entry-meta {
	margin-bottom: -8px;
}

.blog-details-desc .article-content .entry-meta ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.blog-details-desc .article-content .entry-meta ul li {
	position: relative;
	display: inline-block;
	color: #505060;
	margin-right: 21px;
}

.blog-details-desc .article-content .entry-meta ul li span {
	display: inline-block;
	color: #505060;
	font-weight: 500;
}

.blog-details-desc .article-content .entry-meta ul li a {
	display: inline-block;
	color: #5f5f5f;
}

.blog-details-desc .article-content .entry-meta ul li a:hover {
	color: #5e87eb;
}

.blog-details-desc .article-content .entry-meta ul li i {
	color: #5e87eb;
	margin-right: 2px;
}

.blog-details-desc .article-content .entry-meta ul li::before {
	content: '';
	position: absolute;
	top: 12px;
	right: -15px;
	width: 6px;
	height: 1px;
	background: #5e87eb;
}

.blog-details-desc .article-content .entry-meta ul li:last-child {
	margin-right: 0;
}

.blog-details-desc .article-content .entry-meta ul li:last-child::before {
	display: none;
}

.blog-details-desc .article-content h3 {
	margin-bottom: 15px;
	margin-top: 25px;
	font-size: 24px;
}

.blog-details-desc .article-content .wp-block-gallery.columns-3 {
	padding-left: 0;
	list-style-type: none;
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -10px;
	margin-left: -10px;
	margin-bottom: 30px;
	margin-top: 30px;
}

.blog-details-desc .article-content .wp-block-gallery.columns-3 li {
	-ms-flex: 0 50%;
	-webkit-box-flex: 0;
	flex: 0 50%;
	max-width: 50%;
	padding-right: 10px;
	padding-left: 10px;
}

.blog-details-desc .article-content .wp-block-gallery.columns-3 li figure {
	margin-bottom: 0;
}

.blog-details-desc .article-footer {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-top: 30px;
}

.blog-details-desc .article-footer .article-tags {
	-ms-flex: 0 0 50%;
	-webkit-box-flex: 0;
	flex: 0 0 50%;
	max-width: 50%;
	color: #5f5f5f;
}

.blog-details-desc .article-footer .article-tags span {
	display: inline-block;
	color: #333;
	font-size: 15px;
	font-weight: 600;
	margin-right: 5px;
}

.blog-details-desc .article-footer .article-tags a:last-child {
    margin-right: 0px;
}
.blog-details-desc .article-footer .article-tags a {
    display: inline-block;
    color: #5e87eb;
    font-weight: 600;
    font-size: 14px !important;
    padding: 6px 13px;
    border: 1px solid #5e87eb;
    background: transparent;
    margin-top: 8px;
    margin-right: 5px;
    border-radius: 50px;
}

.blog-details-desc .article-footer .article-tags a:hover {
    color: #ffffff;
    background-color: #5e87eb;
    border-color: #5e87eb;
}

.blog-details-desc .article-footer .article-share {
	-ms-flex: 0 0 50%;
	-webkit-box-flex: 0;
	flex: 0 0 50%;
	max-width: 50%;
}

.blog-details-desc .article-footer .article-share .social {
	padding-left: 0;
	list-style-type: none;
	text-align: right;
	margin-bottom: 0;
}

.blog-details-desc .article-footer .article-share .social li {
	display: inline-block;
	margin-right: 5px;
}
.blog-details-desc .article-footer .article-share .social li:last-child {
	margin-right: 0;
}

.blog-details-desc .article-footer .article-share .social li span {
	display: inline-block;
	margin-right: 5px;
	color: #333;
	font-size: 15px;
	font-weight: 600;
}

.blog-details-desc .article-footer .article-share .social li a {
    color: #5e87eb;
    display: inline-block;
    background: transparent;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px dashed #5e87eb;
    border-radius: 25px;
}

.blog-details-desc .article-footer .article-share .social li a i {
	font-size: 14px;
	line-height: 30px;
}

.blog-details-desc .article-footer .article-share .social li a:hover {
	color: #ffffff;
	background-color: #5e87eb;
}

.blog-details-desc .post-navigation {
	margin-top: 30px;
}

blockquote, .blockquote {
	overflow: hidden;
	background-color: #fafafa;
	padding: 50px !important;
	position: relative;
	text-align: center;
	z-index: 1;
	margin-bottom: 20px;
	margin-top: 20px;
}

blockquote p, .blockquote p {
	color: #505060;
	line-height: 1.6;
	margin-bottom: 0;
	font-style: italic;
	font-weight: 500;
	font-size: 24px !important;
}

blockquote cite, .blockquote cite {
	display: none;
}

blockquote::before, .blockquote::before {
	color: #efefef;
	content: "\f10e";
	position: absolute;
	left: 50px;
	top: -50px;
	z-index: -1;
	font-family: "Font Awesome 5 Free";
	font-size: 140px;
	font-weight: 900;
}

blockquote::after, .blockquote::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: #5e87eb;
	margin-top: 20px;
	margin-bottom: 20px;
}

.post-navigation {
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
	padding-top: 20px;
	padding-bottom: 20px;
}

.post-navigation .navigation-links {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.post-navigation .navigation-links .nav-previous {
	-ms-flex: 0 0 50%;
	-webkit-box-flex: 0;
	flex: 0 0 50%;
	max-width: 50%;
}

.post-navigation .navigation-links .nav-previous a i {
	margin-right: 2px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.post-navigation .navigation-links .nav-previous a:hover i {
	margin-right: 0;
}

.post-navigation .navigation-links .nav-next {
	-ms-flex: 0 0 50%;
	-webkit-box-flex: 0;
	flex: 0 0 50%;
	max-width: 50%;
	text-align: right;
}

.post-navigation .navigation-links .nav-next a i {
	margin-left: 2px;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.post-navigation .navigation-links .nav-next a:hover i {
	margin-left: 0;
}

.post-navigation .navigation-links div a {
	display: inline-block;
	font-weight: 600;
}

.comments-area {
	padding: 25px;
	margin-top: 30px;
	-webkit-box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.08);
	box-shadow: 0px 0px 29px 0px rgba(102, 102, 102, 0.08);
	background-color: #ffffff;
}

.comments-area .comments-title {
	position: relative;
	margin-bottom: 30px;
	line-height: initial;
	font-size: 24px;
	font-weight: 600;
}

.comments-area ol, .comments-area ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.comments-area .comment-list {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.comments-area .comment-body {
	border-bottom: 1px solid #eeeeee;
	padding-left: 65px;
	color: #505060;
	font-size: 14px;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.comments-area .comment-list .children {
    padding-left: 90px;
}
.comments-area .comment-body .reply {
	margin-top: 15px;
}

.comments-area .comment-body .reply a {
	border: 1px solid #ded9d9;
	color: #505060;
	display: inline-block;
	padding: 5px 20px;
	border-radius: 30px;
	text-transform: capitalize;
	position: relative;
	z-index: 1;
	font-size: 16px;
	font-weight: 600;
}

.comments-area .comment-body .reply a:hover {
	color: #ffffff;
	background-color: #5e87eb;
	border-color: #5e87eb;
}

.comments-area .comment-author {
	font-size: 17px;
	margin-bottom: 0.1em;
	position: relative;
	z-index: 2;
}

.comments-area .comment-author .avatar {
	height: 50px;
	left: -65px;
	position: absolute;
	width: 50px;
}

.comments-area .comment-author .fn {
	font-weight: 600;
}

.comments-area .comment-author .says {
	display: none;
}

.comments-area .comment-metadata {
	margin-bottom: .8em;
	color: #5f5f5f;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	font-size: 13px;
	font-weight: 400;
}

.comments-area .comment-metadata a {
	color: #5f5f5f;
}

.comments-area .comment-metadata a:hover {
	color: #5e87eb;
}

.comments-area .comment-respond {
	margin-top: 30px;
}

.comments-area .comment-respond .comment-reply-title {
	margin-bottom: 0;
	position: relative;
	font-size: 24px;
	font-weight: 600;
}

.comments-area .comment-respond .comment-reply-title #cancel-comment-reply-link {
	display: inline-block;
}

.comments-area .comment-respond .comment-form {
	overflow: hidden;
}

.comments-area .comment-respond .comment-notes {
	margin-bottom: 0;
	margin-top: 10px;
}

.comments-area .comment-respond .comment-form-comment {
	margin-top: 20px;
    float: left;
    width: 100%;
    margin-bottom: 25px;
}

.comments-area .comment-respond label {
	display: block;
	font-weight: 600;
	color: #505060;
	margin-bottom: 5px;
}

.comments-area .comment-respond input[type="date"], .comments-area .comment-respond input[type="time"], .comments-area .comment-respond input[type="datetime-local"], .comments-area .comment-respond input[type="week"], .comments-area .comment-respond input[type="month"], .comments-area .comment-respond input[type="text"], .comments-area .comment-respond input[type="email"], .comments-area .comment-respond input[type="url"], .comments-area .comment-respond input[type="password"], .comments-area .comment-respond input[type="search"], .comments-area .comment-respond input[type="tel"], .comments-area .comment-respond input[type="number"], .comments-area .comment-respond textarea {
	display: block;
	width: 100%;
	background-color: #ffffff;
	border: 1px solid #eeeeee;
	padding: 0.625em 0.7375em;
	outline: 0;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.comments-area .comment-respond input[type="date"]:focus, .comments-area .comment-respond input[type="time"]:focus, .comments-area .comment-respond input[type="datetime-local"]:focus, .comments-area .comment-respond input[type="week"]:focus, .comments-area .comment-respond input[type="month"]:focus, .comments-area .comment-respond input[type="text"]:focus, .comments-area .comment-respond input[type="email"]:focus, .comments-area .comment-respond input[type="url"]:focus, .comments-area .comment-respond input[type="password"]:focus, .comments-area .comment-respond input[type="search"]:focus, .comments-area .comment-respond input[type="tel"]:focus, .comments-area .comment-respond input[type="number"]:focus, .comments-area .comment-respond textarea:focus {
	border-color: #5e87eb;
}

.comments-area .comment-respond .comment-form-author {
	float: left;
    width: 50%;
    padding-right: 10px;
    margin-top: 20px;
    margin-bottom: 0;
}

.comments-area .comment-respond .comment-form-email {
    float: left;
    width: 50%;
    padding-left: 12px;
    margin-top: 20px;
    margin-bottom: 0;
}

.comments-area .comment-respond .form-submit {
	float: left;
	width: 100%;
}

.comments-area .comment-respond .form-submit input {
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 30px;
	display: inline-block;
	cursor: pointer;
	outline: 0;
	border: none;
	border: none;
	border-radius: 0;
	background-color: #5e87eb;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.comments-area .comment-respond .form-submit input:hover, .comments-area .comment-respond .form-submit input:focus {
	color: #ffffff;
	background-color: #505060;
}

/************************************************
 ** - 18 - Blog Page Sidebar Widget CSS
 ************************************************/
.widget-area .widget {
	padding: 30px 25px;
    border-radius: 5px;
	margin-top: 35px;
	background-color: rgb(11, 11, 49, 0.05);
}

.widget-area .widget:first-child {
	margin-top: 0;
}

.widget-area .widget .widget-title {
	position: relative;
	font-size: 22px;
	padding-bottom: 10px;
	margin-bottom: 25px;
	border-bottom: 1px solid #ffffff;
	text-transform: capitalize;
}

.widget-area .widget .widget-title::before {
	content: '';
	position: absolute;
	background: #5e87eb;
	bottom: -1px;
	left: 0;
	width: 50px;
	height: 1px;
}

.widget-area .widget_search {
}

.widget-area .widget_search form {
	position: relative;
}

.widget-area .widget_search form label {
	display: block;
	margin-bottom: 0;
}

.widget-area .widget_search form .screen-reader-text {
	display: none;
}

.widget-area .widget_search form .search-field {
	font-size: 15px;
	font-weight: 500;
	height: 50px;
	padding: 6px 15px;
	width: 100%;
	display: block;
	outline: 0;
	border: 1px solid #eeeeee;
	background-color: #ffffff;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.widget-area .widget_search form .search-field:focus {
	border-color: #5e87eb;
}

.widget-area .widget_search form button {
	position: absolute;
	right: 0;
	outline: 0;
	bottom: 0;
	height: 50px;
	width: 50px;
	z-index: 1;
	border: none;
	color: #ffffff;
	background-color: #5e87eb;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.widget-area .widget_search form button:hover {
	background-color: #505060;
	color: #ffffff;
}

.widget-area .widget_techex_posts_thumb {
	position: relative;
	overflow: hidden;
}

.widget-area .widget_techex_posts_thumb .item {
	overflow: hidden;
	margin-bottom: 15px;
}

.widget-area .widget_techex_posts_thumb .item:last-child {
	margin-bottom: 0;
}

.widget-area .widget_techex_posts_thumb .item .thumb {
    float: left;
    width: 90px;
    overflow: hidden;
    border-radius: 3px;
    margin-right: 15px;
}

.widget-area .widget_techex_posts_thumb .item .info {
	overflow: hidden;
	margin-top: 0px;
}

.widget-area .widget_techex_posts_thumb .item .info span {
	display: block;
	color: #5f5f5f;
	text-transform: capitalize;
	margin-top: 3px;
	font-size: 14px;
}

.widget-area .widget_techex_posts_thumb .item .info .title {
	margin-bottom: 0;
	line-height: 1.4;
	font-size: 15px;
}

.widget-area .widget_techex_posts_thumb .item .info .title a {
	display: inline-block;
}

.widget-area .widget_recent_entries ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.widget-area .widget_recent_entries ul li {
	position: relative;
	margin-bottom: 12px;
	color: #505060;
	padding-left: 14px;
	line-height: 1.5;
	font-weight: 400;
	font-size: 15.5px;
}

.widget-area .widget_recent_entries ul li:last-child {
	margin-bottom: 0;
}

.widget-area .widget_recent_entries ul li::before {
	background: #5e87eb;
	height: 8px;
	width: 8px;
	content: '';
	left: 0;
	top: 7px;
	position: absolute;
	border-radius: 50px;
	border-right-style: inset;
}

.widget-area .widget_recent_entries ul li a {
	display: inline-block;
	color: #505060;
}

.widget-area .widget_recent_entries ul li a:hover {
	color: #5e87eb;
}

.widget-area .widget_recent_entries ul li .post-date {
	display: block;
	font-size: 13px;
	color: #5f5f5f;
	margin-top: 4px;
}

.widget-area .widget_categories ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.widget-area .widget_categories ul li {
	color: #5f5f5f;
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 12px;
}

.widget-area .widget_categories ul li:last-child {
	margin-bottom: 0;
}

.widget-area .widget_categories ul li a {
	color: #505060;
	font-size: 15px;
	font-weight: 600;
    padding: 12px 15px;
	display: flex;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 5px;
}

.widget-area .widget_categories ul li a:hover {
	color: #fff;
    background: #5e87eb;
}

.widget-area .widget_categories ul li .post-count {
	float: right;
}

.widget-area .widget_meta ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.widget-area .widget_meta ul li {
	position: relative;
	margin-bottom: 12px;
	color: #505060;
	padding-left: 14px;
	font-size: 15.5px;
	font-weight: 400;
}

.widget-area .widget_meta ul li:last-child {
	margin-bottom: 0;
}

.widget-area .widget_meta ul li::before {
	background: #5e87eb;
	height: 8px;
	width: 8px;
	content: '';
	left: 0;
	top: 7px;
	position: absolute;
	border-radius: 50px;
	border-right-style: inset;
}

.widget-area .widget_meta ul li a {
	display: inline-block;
	color: #505060;
}

.widget-area .widget_meta ul li a:hover {
	color: #5e87eb;
}

.widget-area .widget_tag_cloud .widget-title {
	margin-bottom: 12px;
}

.widget-area .tagcloud a {
    display: inline-block;
    color: #505060;
	font-size: 15px;
	font-weight: 600;
    padding: 10px 12px;
    margin-top: 10px;
    margin-right: 8px;
    background-color: #fff;
    border-radius: 5px;
}

.widget-area .tagcloud a:hover, .widget-area .tagcloud a:focus {
	color: #ffffff;
	background-color: #5e87eb;
	border-color: #5e87eb;
}

.widget-area .widget_event_details ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
}

.widget-area .widget_event_details ul li {
	border-bottom: 1px solid #eeeeee;
	color: #888f96;
	padding-bottom: 10px;
	padding-top: 10px;
}

.widget-area .widget_event_details ul li:first-child {
	padding-top: 0;
}

.widget-area .widget_event_details ul li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.widget-area .widget_event_details ul li span {
	display: inline-block;
	color: #505060;
	font-weight: 400;
}

.widget-area .widget_event_details ul li a {
	display: inline-block;
	color: #888f96;
}

.widget-area .widget_event_details ul li a:hover {
	color: #5e87eb;
}

/************************************************
 ** - 18 - Blog Page Number Pagination CSS
 ************************************************/
.pagination-area {
	margin-top: 20px;
	text-align: center;
}

.pagination-area .page-numbers {
	width: 45px;
	height: 45px;
	margin: 0 3px;
	display: inline-block;
	background-color: #ffffff;
	line-height: 48px;
	color: #505060;
	-webkit-box-shadow: 0 2px 10px 0 #d8dde6;
	box-shadow: 0 2px 10px 0 #d8dde6;
	font-size: 18px;
	font-weight: 600;
}

.pagination-area .page-numbers.current, .pagination-area .page-numbers:hover, .pagination-area .page-numbers:focus {
	background: #5e87eb;
	color: #ffffff;
	-webkit-box-shadow: 0 2px 10px 0 #d8dde6;
	box-shadow: 0 2px 10px 0 #d8dde6;
}

/**************************************
 ** - 19 - Partner Section CSS
 **************************************/
.partner-section {
	position: relative;
	background-color: #fff;
	overflow: hidden;
	z-index: 1;
}

.partner-list {
	display: -ms-flexbox;
	display: -webkit-box;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}

.partner-list .partner-item {
	-ms-flex: 0 0 20%;
	-webkit-box-flex: 0;
	flex: 0 0 20%;
	max-width: 20%;
	padding-left: 10px;
	padding-right: 10px;
	margin-bottom: 20px;
}

.partner-list .partner-item a {
	display: block;
	text-align: center;
	position: relative;
	padding: 0px 0px;
	border: 1px solid #ebebeb;
}

/**************************************
 ** - 19 - Partner Slider CSS
 **************************************/
.partner-area {
	padding: 50px 0px;
}

.partner-slide-item {
	padding: 0px 0px;
	margin: 0px 15px;
}

.partner-area .partner-carousel img {
	max-width: 100%;
	width: inherit!important;
	margin: 0 auto;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.partner-area .partner-carousel img:hover {
	opacity: .7;
	cursor: pointer;
}

/**********************************************
 ** - 20 - Other Page Banner Title CSS
 **********************************************/
.page-title-area {
	position: relative;
	z-index: 1;
	background-image: url(../img/banner-bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 400px;
}

.page-title-area::before {
	content: "";
	position: absolute;
	z-index: -1;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	opacity: 0.3;
    background-color: #111428;
}

.page-title-content {
	text-align: center;
	margin-top: 45px;
}

.page-title-content h2 {
	margin-bottom: 0;
	color: #ffffff;
	font-size: 38px;
	font-weight: 700;
}

.page-title-content ul {
	padding-left: 0;
	list-style-type: none;
	margin-top: 12px;
	margin-bottom: 0;
}

.page-title-content ul li {
	color: #ffffff;
	display: inline-block;
	position: relative;
	font-weight: 600;
	font-size: 17px;
	margin-left: 10px;
	margin-right: 10px;
}

.page-title-content ul li a {
	display: inline-block;
	color: #ffffff;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.page-title-content ul li a:hover {
	color: #5e87eb;
}

.page-title-content ul li::before {
    content: '';
    position: absolute;
    right: -15px;
    top: 10px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #3e57d0;
}

.page-title-content ul li:last-child::before {
	display: none;
}

.item-bg1 {
	background-image: url(../img/page-title-bg-2.jpg);
}

.item-bg2 {
	background-image: url(../img/page-title-bg-3.jpg);
}

/**************************************
 ** - 21 - Faq Page CSS
 **************************************/
.faq-accordion .accordion {
	list-style-type: none;
	padding: 0;
	margin: 0;
	padding-left: 0;
	margin-bottom: 0;
	position: relative;
}

.faq-accordion .accordion .accordion-item {
	display: block;
    margin-bottom: 0px;
    border-bottom: 1px solid rgb(231 231 231);
}

.faq-accordion .accordion .accordion-item:last-child {
	margin-bottom: 0;
}

.faq-accordion .accordion .accordion-item .accordion-title {
    color: #333;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    display: block;
    padding: 25px 0;
    background-color: transparent;
    border-radius: 0;
    cursor: pointer;
}

.faq-accordion .accordion .accordion-item .accordion-title:hover {
    color: #5e87eb;
}
.faq-accordion .accordion .accordion-item .active.accordion-title {
    color: #5e87eb;
}

.faq-accordion .accordion .accordion-item .accordion-title i {
	position: absolute;
	right: 15px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #333;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	font-size: 15px;
}

.faq-accordion .accordion .accordion-item .active.accordion-title i {
	color: #5e87eb;
}

.faq-accordion .accordion .accordion-item .accordion-title.active i::before {
	content: "\f0d8";
}

.faq-accordion .accordion .accordion-item .accordion-content {
	display: none;
    font-size: 15px;
    padding-bottom: 20px;
	margin-bottom: 0;
}

.faq-accordion .accordion .accordion-item .accordion-content.show {
	display: block;
}

/**************************************
 ** - 22 - Pricing Page CSS
 **************************************/
.price-area {
}
.price-area .section-title {
    text-align: center;
    margin-bottom: 35px;
}
.single-price-item {
	background: #ffffff;
	box-shadow: 0 3px 30px -3px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	overflow: hidden;
	margin-top: 30px;
	transition: box-shadow 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease;
    transition: box-shadow 0.2s ease, transform 0.2s ease, z-index 0s 0.2s ease, -webkit-transform 0.2s ease;
}
.single-price-item:hover {
    transform: translate3d(0, -5px, 0);
    -webkit-transform: translate3d(0, -5px, 0);
    -webkit-box-shadow: 0 10px 40px rgba(0,0,0,.1);
    box-shadow: 0 10px 40px rgba(0,0,0,.1);
}
.single-price-item.active .pricing-header {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.single-price-item.active .pricing-header:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
	background: #5e87eb;
}
.home-1-price .single-price-item.active .pricing-header:before {
	background: #5e87eb;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #ff5e62, #5e87eb);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #ff5e62, #5e87eb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.home-2-price .single-price-item.active .pricing-header:before {
	background: #5e87eb;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #5e87eb, #5e87eb);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #5e87eb, #5e87eb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.single-price-item.active .pricing-header .pricing-title {
	color: #fff;
}

.single-price-item .pricing-header {
	text-align: center;
	display: block;
	position: relative;
	padding: 50px 15px;background: #f9fafa;
}

.single-price-item .pricing-header .pricing-title {
	font-weight: 700;
	font-size: 25px;
	color: #3B566E;
}

.single-price-item .pricing-body {
	margin-bottom: 30px;
}

.single-price-item .pricing-body .price-content {
	text-align: center;
	margin-top: 40px;
	margin-bottom: 30px;
}

.single-price-item .pricing-body .price-content .currency {
	height: 47px;
	font-weight: 600;
	font-size: 18px;
	color: #5e87eb;
	position: relative;
	top: -15px;
}

.single-price-item .pricing-body .price-content .price {
	font-weight: 700;
	font-size: 34px;
	color: #5e87eb;
	letter-spacing: 1px;
}

.single-price-item .pricing-body .price-content .period {
	font-weight: 700;
	font-size: 15px;
	color: #333;
	letter-spacing: 0.88px;
}

.single-price-item .pricing-body .list li {
	text-align: center;
	margin-bottom: 12px;
	font-weight: 400;
	font-size: 15px;
	color: #CCDCEA;
	letter-spacing: 0.3px;
	text-decoration: line-through;
}

.single-price-item .pricing-body .list li.active {
	color: #333;
	text-decoration: none;
}

.single-price-item .pricing-footer {
	text-align: center;
}

.single-price-item .pricing-footer a {
    margin-bottom: 40px;
    margin-top: 0;
}

/*********************************************
 ** - 23 - Industries Page CSS
 *********************************************/
.tab .tabs_item {
    display: none;
}

.tab .tabs_item:first-child {
    display: block;
}

.solutions-list-tab .tabs {
    padding-left: 0;
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
}

.solutions-list-tab .tabs li {
    -webkit-box-flex: 4;
    -ms-flex: 4 0 16.6666666667%;
    flex: 4 0 16.6666666667%;
    max-width: 23.666667%;
    text-align: center;
    margin-right: 30px;
    margin-left: 0;
}

.solutions-list-tab .tabs li:last-child {
    margin-right: 0;
}

.solutions-list-tab .tabs li a {
    display: block;
    color: #292a2c;
    font-size: 16px;
    font-weight: 600;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 3px;
    -webkit-box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11);
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.11);
}

.solutions-list-tab .tabs li a span {
    display: block;
    margin-top: 0;
}

.solutions-list-tab .tabs li.current a,
.solutions-list-tab .tabs li:hover a {
    color: #ffffff;
    background-color: #5e87eb;
}
.home-1-tab .solutions-list-tab .tabs li.current a,
.home-1-tab .solutions-list-tab .tabs li:hover a {
    color: #ffffff;
	background: #5e87eb;
}

.home-2-tab .solutions-list-tab .tabs li.current a,
.home-2-tab .solutions-list-tab .tabs li:hover a {
    color: #ffffff;
	background: #5e87eb;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content h3 {
    font-size: 33px;
    color: #393953;
    margin: 0 0 15px 0;
	font-weight: 700;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content p {
    margin: 0 0 0 0;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list {
    padding-left: 0;
    margin-bottom: 25px;
    margin-top: 25px;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li {
    font-size: 15px;
    color: #5f5f5f;
    list-style-type: none;
    padding-bottom: 10px;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list li:last-child {
    padding-bottom: 0;
}

.solutions-list-tab .tab_content .tabs_item .tab-solution-content .tab-list i {
	font-size: 15px;
    color: #5e87eb;
    margin-right: 5px;
}

.tab-image {
    text-align: center;
}

/**************************************
 ** - 24 - Contact Page CSS
 **************************************/
.contact-section .contact-form-1 form .form-control {
    font-size: 15px;
    width: 100%;
    padding: 10px 20px;
    height: 52px;
    color: #333;
    border: none;
    background-color: #f3f3f3;
    font-weight: 600;
    border-radius: 5px;
    text-transform: capitalize;
    border-left: 2px solid #b4b7bd;
    transition: all 0.4s;
}
.contact-section .contact-form-1 form input:focus,
.contact-section .contact-form-1 form textarea:focus {
	outline: none;
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-left: 2px solid #5e87eb;
}
.contact-information-box-1 {
    background: #fff;
    padding: 25px 20px;
    border-radius: 5px;
    border-bottom: 2px solid #5e87eb;
	-webkit-box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
	box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05), 0 5px 15px rgba(0, 0, 0, 0.03);
}
.contact-information-box-1 .single-contact-info-box {
    position: relative;
    z-index: 1;
    padding: 10px 10px;
    display: block;
    border-radius: 3px;
    text-align: left;
    margin-bottom: 10px;
    overflow: hidden;
}
.contact-information-box-1 .contact-info {
	position: relative;
    z-index: 1;
}

.contact-information-box-1 .contact-info h6 {
	font-weight: 600;
    font-size: 18px;
    color: #333;
    margin-bottom: 7px;
    text-transform: capitalize;
}

.contact-information-box-1 .contact-info p {
	color: #333;
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}
.contact-information-box-1 .single-contact-info-box .contact-info-bg-icon {
    color: #5e87eb;
    opacity: .2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    margin: 0 auto;
    z-index: -1;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.contact-information-box-1 .single-contact-info-box .contact-info-bg-icon i {
    font-size: 100px;
}
.contact-section .contact-form .form-group {
    margin-bottom: 30px;
}
.contact-section .contact-form form textarea.form-control {
    height: auto;
    padding-top: 15px;
    line-height: initial;
}

.contact-section .form-message {
	margin: 0;
}
.contact-section .form-message.success {
	background: #03b103;
	color: #fff;
	padding: 10px 15px;
	border-radius: 3px;
	margin-bottom: 30px;
}

.contact-section .form-message.error {
	background: #ff4d15;
	color: #fff;
	padding: 10px 15px;
	border-radius: 3px;
	margin-bottom: 30px;
}
/*********************************************
 ** - 24 - Map Section CSS
 *********************************************/
.map-content #contact-map {
	position: relative;
	width: 100%;
	height: 500px;
	border: 0;
	margin-bottom: -2px;
}

/**************************************
 ** - 25 - Coming Soon Page CSS
 **************************************/
.coming-soon-area {
	position: relative;
	z-index: 1;
	height: 100vh;
	background-image: url(../img/banner-bg.jpg);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.coming-soon-area::before {
	position: absolute;
	content: '';
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	background-color: #111428;
}

.coming-soon-area .social-list {
	padding: 0;
	margin: 0;
	list-style-type: none;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	bottom: 30px;
}

.coming-soon-area .social-list li {
	display: inline-block;
}

.coming-soon-area .social-list li.list-heading {
	display: block;
	color: #ffffff;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 500;
}

.coming-soon-area .social-list li a {
	color: #ffffff;
	width: 35px;
	height: 35px;
	line-height: 35px;
	background: #5e87eb;
	border: 1px solid #5e87eb;
	border-radius: 50%;
	margin: 0 2px;
	display: inline-block;
}

.coming-soon-area .social-list li a:hover {
	background-color: transparent;
	color: #5e87eb;
	-webkit-transition: .6s;
	transition: .6s;
	-webkit-transition: 0.5s;
}

.coming-soon-content {
	text-align: center;
	max-width: 820px;
	margin: -80px auto 0;
}

.coming-soon-content h1 {
	color: #ffffff;
	margin-bottom: 15px;
	font-size: 46px;
	font-weight: 600;
}

.coming-soon-content p {
	color: #ffffff;
	margin: 0 auto;
	max-width: 620px;
	line-height: 30px;
}

.coming-soon-content form {
	position: relative;
	margin: 35px auto 55px;
	max-width: 520px;
}

.coming-soon-content form .email-input {
	display: block;
	width: 100%;
	height: 56px;
	border: none;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 5px rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1), 0px 0px 0px 5px rgba(255, 255, 255, 0.3);
	border-radius: 40px;
	padding: 15px 25px;
	outline: 0 !important;
	background: #F1F2F3;
}

.coming-soon-content form .submit-btn {
	position: absolute;
	right: 3px;
	top: 3px;
	height: 50px;
	background: #5e87eb;
	color: #ffffff;
	border: none;
	border-radius: 40px;
	width: 130px;
	outline: 0 !important;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 600;
}

.coming-soon-content form .submit-btn:hover, .coming-soon-content form .submit-btn:focus {
	background-color: #5e87eb;
}

.coming-soon-content #timer div {
	background: #ffffff;
	display: inline-block;
	border-radius: 50%;
	width: 120px;
	height: 120px;
	color: #5e87eb;
	-webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
	box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.5);
	margin: 0 10px;
	padding-top: 18px;
	font-size: 40px;
	font-weight: 600;
}

.coming-soon-content #timer div span {
	display: block;
	margin-top: -4px;
	color: #777777;
	font-size: 15px;
	font-weight: 600;
}

/**************************************
 ** - 26 - 404 Error Page CSS
 **************************************/
.error-area {
	padding: 100px 0;
}

.error-content {
	text-align: center;
	margin: 0 auto;
	max-width: 700px;
}

.error-content h3 {
	font-size: 35px;
	margin-top: 10px;
	margin-bottom: 18px;
}

.error-content p {
	max-width: 520px;
	margin: 0 auto 20px;
	line-height: 30px;
}

.error-content .default-btn-one {
	display: inline-block;
	padding: 12px 30px;
	background: #7b68ee;
	border: 2px solid #7b68ee;
	color: #ffffff;
	font-size: 16px;
	font-weight: 400;
	-webkit-transition: .6s;
	transition: .6s;
	margin-right: 0;
}

.error-content .default-btn-one:hover {
	text-decoration: none;
	background-color: #ffffff;
	color: #7b68ee;
}

/**********************************************************
 ** - 27 - Terms & Conditions - Privacy Policy CSS
 **********************************************************/
.single-privacy h3 {
	font-size: 22px;
	margin: 0 0 12px 0;
}
.single-terms h3 {
	font-size: 22px;
	margin: 0 0 12px 0;
}

/**********************************************
 ** - 28 - Footer & Copyright Section CSS
 **********************************************/
.footer-area {
	position: relative;
	z-index: 1;
	padding: 100px 0;
	background-color: #111428;  /* fallback for old browsers */
}

.footer-about {
    padding-right: 15px;
}
.footer-logo {
	margin-bottom: 20px;
	display: inline-block;
}

.footer-list h5 {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 25px;
}

.footer-list p {
	font-size: 16px;
	color: #efefef;
}

.footer-list ul li {
	margin-bottom: 12px;
	color: #efefef;
}

.footer-list ul li:last-child {
	margin-bottom: 0px;
}

.footer-list .footer-contact-info ul li i {
	color: #5e87eb;
	font-size: 16px;
	margin-right: 5px;
}

.footer-list ul li a {
	display: inline-block;
	font-size: 16px;
	color: #efefef;
}

.footer-list ul li a:hover {
	color: #5e87eb;
    text-decoration: underline;
}

.footer-contact-info .footer-contact-list li span {
	display: inline-block;
	color: #efefef;
	font-size: 16px;
	font-weight: 700;
}

.footer-social-icon {
	margin-top: 25px;
}

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

.footer-social-icon li a {
	color: #fff !important;
	font-size: 15px !important;
	width: 40px;
	height: 40px;
	line-height: 40px;
    border-radius: 30px;
    text-align: center;
    border: 1px solid rgb(255, 255, 255, 0.25);
    background: transparent;
	display: block;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.footer-social-icon li a:hover {
	color: #fff !important;
    border: 1px solid #5e87eb;
	background: #5e87eb;
}

.newsletter-form {
	max-width: 580px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
}

.newsletter-form .input-newsletter {
	display: block;
	color: #0b0b31;
	width: 100%;
	height: 54px;
	font-weight: 500;
	padding-left: 15px;
	border-radius: 3px;
	outline: 0;
	border: none;
	margin-bottom: 20px;
	background-color: #ffffff;
}

.newsletter-form .input-newsletter::-webkit-input-placeholder {
	color: #747576;
}

.newsletter-form .input-newsletter:-ms-input-placeholder {
	color: #747576;
}

.newsletter-form .input-newsletter::-ms-input-placeholder {
	color: #747576;
}

.newsletter-form .input-newsletter::placeholder {
	color: #747576;
}

.newsletter-form button {
	width: 100%;
	color: #ffffff;
	font-size: 16px;
	border: none;
    height: 46px;
    line-height: 46px;
	padding: 0 20px;
	border-radius: 3px;
    -webkit-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    will-change: transform;
}
/* .- ..- - .... --- .-. ---... / -... .- .-. .- -.- .- .... / - .... . -- . ... */
.copyright-area {
    padding: 35px 0;
    border-top: 1px solid rgb(255, 255, 255, 0.15);
    background-color: #111428;
}

.copyright-area p {
	color: #efefef;
	font-size: 16px;
}

.copyright-area ul {
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
	text-align: right;
}

.copyright-area ul li {
	display: inline-block;
	color: #efefef;
	font-size: 16px;
	position: relative;
	margin-left: 10px;
	margin-right: 10px;
}

.copyright-area ul li a {
	display: inline-block;
	color: #efefef;
}

.copyright-area ul li a:hover {
	color: #5e87eb;
}

.copyright-area ul li::before {
	content: '';
	position: absolute;
	top: 5px;
	right: -13px;
	width: 1px;
	height: 14px;
	background-color: #ffffff;
}

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

.copyright-area ul li:last-child::before {
	display: none;
}

.copyright-area ul li:first-child {
	margin-left: 0;
}
/* Newsletter 按钮文字 */
.newsletter-form .default-btn,
.newsletter-form button.default-btn,
.newsletter-form .wpcf7-submit {
	color: #ffffff !important;
	font-size: 16px;
	font-weight: 600;
	opacity: 1 !important;
}

/* 防止按钮内部装饰层挡住文字 */
.newsletter-form .default-btn {
	position: relative;
	overflow: hidden;
}

/* Contact Form 7 提交结果提示 */
.newsletter-form .wpcf7-response-output,
.wpcf7 form .wpcf7-response-output {
	color: #ffffff !important;
	font-size: 16px;
	line-height: 1.6;
	opacity: 1 !important;
}

/* 提交成功 */
.wpcf7 form.sent .wpcf7-response-output {
	color: #ffffff !important;
	border-color: #46b450 !important;
}

/* 验证失败 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	color: #ffffff !important;
	border-color: #ffb900 !important;
}

/* 邮箱字段错误提示 */
.newsletter-form .wpcf7-not-valid-tip {
	color: #ff6b6b !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 18px;
	border: 1px solid #46b450 !important;
	border-radius: 4px;
	background: rgba(70, 180, 80, 0.12);
	color: #ffffff !important;
	font-size: 15px;
}
/* Newsletter 提交按钮 */
.newsletter-form .newsletter-submit {
	width: 100%;
	height: 58px !important;
	padding: 0 24px !important;

	background: #5b82e8 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;

	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 58px !important;
	text-align: center !important;

	border: none !important;
	border-radius: 5px !important;
	cursor: pointer;

	opacity: 1 !important;
	visibility: visible !important;
}

/* 防止主题伪元素覆盖文字 */
.newsletter-form .newsletter-submit::before,
.newsletter-form .newsletter-submit::after {
	display: none !important;
}

/* 鼠标经过 */
.newsletter-form .newsletter-submit:hover {
	background: #496fd4 !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}
/*主页*/
/*
    * 首页导航独占一层：保持 functions.php 不动。
    * 原主题把 .navbar-area 设为 absolute，因此会覆盖到轮播图上。
    * 这里让导航重新进入正常文档流，同时保留顶部吸附效果。
    */
.navbar-area,
.navbar-area.is-sticky {
	position: -webkit-sticky !important;
	position: sticky !important;
	top: 0 !important;
	left: auto !important;
	width: 100% !important;
	background: #ffffff !important;
	z-index: 9999 !important;
	box-shadow: 0 1px 0 rgba(19, 31, 55, 0.06), 0 8px 24px rgba(19, 31, 55, 0.04) !important;
	animation: none !important;
	-webkit-animation: none !important;
	transition: box-shadow .25s ease, background-color .25s ease !important;
}

.techex-nav.index-navber,
.techex-responsive-nav.index-navber-responsive {
	background: #ffffff !important;
}

.techex-nav.index-navber .navbar .navbar-nav .nav-item > a {
	color: #4f4f4f !important;
}

.techex-nav.index-navber .navbar .navbar-nav .nav-item > a:hover,
.techex-nav.index-navber .navbar .navbar-nav .nav-item > a:focus,
.techex-nav.index-navber .navbar .navbar-nav .nav-item > a.active {
	color: #5e87eb !important;
}

/* 导航和轮播图是上下两个独立区域，不允许相互覆盖。 */
.hjk-home-slider {
	clear: both;
	margin-top: 0 !important;
}

@media only screen and (max-width: 991px) {
	.navbar-area,
	.navbar-area.is-sticky {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.techex-responsive-nav.index-navber-responsive {
		min-height: 52px;
	}
}
.hjk-home-slider {
	--hjk-slider-height: clamp(560px, 72vh, 760px);
	position: relative;
	width: 100%;
	height: var(--hjk-slider-height);
	min-height: 560px;
	overflow: hidden;
	background: #0d1322;
	isolation: isolate;
}

.hjk-home-slider-track,
.hjk-home-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hjk-home-slide {
	opacity: 0;
	visibility: hidden;
	transform: scale(1.025);
	transition: opacity .8s ease, visibility .8s ease, transform 6s ease;
	z-index: 0;
}

.hjk-home-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
	z-index: 1;
}

.hjk-home-slide-bg,
.hjk-home-slide-overlay {
	position: absolute;
	inset: 0;
}

.hjk-home-slide-bg {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	transform: scale(1.04);
	transition: transform 6s cubic-bezier(.2,.7,.2,1);
}

.hjk-home-slide.is-active .hjk-home-slide-bg {
	transform: scale(1);
}

.hjk-home-slide-overlay {
	background:
			linear-gradient(90deg, rgba(8,15,31,.88) 0%, rgba(8,15,31,.73) 36%, rgba(8,15,31,.26) 72%, rgba(8,15,31,.08) 100%),
			linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.28));
}

.hjk-home-slide-container {
	position: relative;
	z-index: 2;
	height: 100%;
}

.hjk-home-slide-container .min-vh-row {
	min-height: var(--hjk-slider-height);
}

.hjk-home-slide-content {
	max-width: 820px;
	padding: 90px 0 80px;
	color: #fff;
}

.hjk-home-slide-content h1 {
	margin: 0 0 24px;
	color: #fff;
	font-size: clamp(42px, 5vw, 76px);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -1.7px;
	text-shadow: 0 8px 28px rgba(0,0,0,.22);
	opacity: 0;
	transform: translateY(34px);
}

.hjk-home-slide-desc {
	max-width: 700px;
	margin-bottom: 32px;
	color: rgba(255,255,255,.88);
	font-size: 18px;
	line-height: 1.8;
	opacity: 0;
	transform: translateY(28px);
}

.hjk-home-slide-desc p {
	margin-bottom: 0;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

.hjk-home-slide-buttons {
	opacity: 0;
	transform: translateY(24px);
}

.hjk-home-slide.is-active .hjk-home-slide-content h1,
.hjk-home-slide.is-active .hjk-home-slide-desc,
.hjk-home-slide.is-active .hjk-home-slide-buttons {
	animation: hjkSlideUp .72s ease forwards;
}

.hjk-home-slide.is-active .hjk-home-slide-desc { animation-delay: .12s; }
.hjk-home-slide.is-active .hjk-home-slide-buttons { animation-delay: .22s; }

@keyframes hjkSlideUp {
	to { opacity: 1; transform: translateY(0); }
}

.hjk-slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255,255,255,.45);
	border-radius: 50%;
	background: rgba(0,0,0,.18);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transform: translateY(-50%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: .28s ease;
	pointer-events: auto !important;
	touch-action: manipulation;
}

.hjk-slider-arrow:hover {
	background: #5f86ed;
	border-color: #5f86ed;
	transform: translateY(-50%) scale(1.06);
}

.hjk-slider-prev { left: 28px; }
.hjk-slider-next { right: 28px; }

.hjk-slider-dots {
	position: absolute;
	left: 50%;
	bottom: 34px;
	z-index: 4;
	display: flex;
	gap: 10px;
	transform: translateX(-50%);
}

.hjk-slider-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	transition: width .3s ease, background .3s ease;
	pointer-events: auto !important;
	touch-action: manipulation;
}

.hjk-slider-dot.is-active {
	width: 32px;
	background: #fff;
}

.hjk-slider-progress {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255,255,255,.18);
	overflow: hidden;
}

.hjk-slider-progress span {
	display: block;
	width: 0;
	height: 100%;
	background: #5f86ed;
}

.hjk-home-slider.is-running .hjk-slider-progress span {
	animation: hjkSliderProgress 5.5s linear forwards;
}

@keyframes hjkSliderProgress {
	from { width: 0; }
	to { width: 100%; }
}

@media (max-width: 991px) {
	.hjk-home-slider {
		--hjk-slider-height: 620px;
		min-height: 620px;
	}

	.hjk-home-slide-overlay {
		background: linear-gradient(90deg, rgba(8,15,31,.84), rgba(8,15,31,.46));
	}

	.hjk-home-slide-content {
		padding: 90px 38px 80px 38px;
	}

	.hjk-home-slide-content h1 {
		font-size: clamp(38px, 7vw, 58px);
	}

	.hjk-slider-prev { left: 14px; }
	.hjk-slider-next { right: 14px; }
	.hjk-slider-arrow { width: 44px; height: 44px; }
}

@media (max-width: 767px) {
	.hjk-home-slider {
		--hjk-slider-height: 560px;
		min-height: 560px;
	}

	.hjk-home-slide-overlay {
		background: linear-gradient(180deg, rgba(8,15,31,.62), rgba(8,15,31,.82));
	}

	.hjk-home-slide-content {
		padding: 72px 8px 80px;
		text-align: center;
		margin: 0 auto;
	}

	.hjk-home-slide-content h1 {
		font-size: clamp(34px, 10vw, 48px);
		letter-spacing: -.8px;
	}

	.hjk-home-slide-desc {
		margin-left: auto;
		margin-right: auto;
		font-size: 16px;
		line-height: 1.65;
	}

	.hjk-home-slide-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
	}

	.hjk-home-slide-buttons a {
		margin: 0 !important;
	}

	.hjk-slider-arrow {
		display: none;
	}

	.hjk-slider-dots {
		bottom: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hjk-home-slide,
	.hjk-home-slide-bg,
	.hjk-home-slide-content h1,
	.hjk-home-slide-desc,
	.hjk-home-slide-buttons,
	.hjk-slider-progress span {
		animation: none !important;
		transition: none !important;
	}

	.hjk-home-slide.is-active .hjk-home-slide-content h1,
	.hjk-home-slide.is-active .hjk-home-slide-desc,
	.hjk-home-slide.is-active .hjk-home-slide-buttons {
		opacity: 1;
		transform: none;
	}
}
.home-hot-products {
	position: relative;
	padding: 92px 0 100px;
	overflow: hidden;
	background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}
.home-hot-products::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -170px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(89,132,237,.12) 0%, rgba(89,132,237,0) 70%);
	pointer-events: none;
}
.hot-products-heading {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 36px;
	margin-bottom: 42px;
}
.hot-products-heading-copy { max-width: 730px; }
.hot-products-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	color: #5f86ed;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
}
.hot-products-kicker::before {
	content: "";
	width: 30px;
	height: 2px;
	background: currentColor;
}
.hot-products-heading h2 {
	margin: 0 0 14px;
	color: #17213a;
	font-size: clamp(34px, 4vw, 48px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.8px;
}
.hot-products-heading p {
	max-width: 680px;
	margin: 0;
	color: #687083;
	font-size: 16px;
	line-height: 1.8;
}
.hot-products-view-all {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 22px;
	border: 1px solid #dde4ef;
	border-radius: 8px;
	background: #fff;
	color: #17213a;
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 8px 28px rgba(23,33,58,.06);
	transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hot-products-view-all:hover {
	transform: translateY(-2px);
	border-color: #5f86ed;
	background: #5f86ed;
	color: #fff;
}
.hot-products-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 25px;
}
.hot-product-card {
	overflow: hidden;
	min-width: 0;
	border: 1px solid #ebeff5;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 34px rgba(25,40,74,.06);
	transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.hot-product-card:hover {
	transform: translateY(-9px);
	border-color: rgba(95,134,237,.28);
	box-shadow: 0 24px 58px rgba(25,40,74,.14);
}
.hot-product-media {
	position: relative;
	display: block;
	height: auto;
	aspect-ratio: auto;
	overflow: hidden;
	background: #ffffff;
	line-height: 0;
}
.hot-product-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(7,18,42,0) 45%, rgba(7,18,42,.28) 100%);
	opacity: 0;
	transition: opacity .35s ease;
}
.hot-product-media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: initial;
	object-position: initial;
	transition: filter .35s ease, opacity .35s ease;
}
.hot-product-card:hover .hot-product-media img {
	filter: saturate(1.04) contrast(1.02);
}
.hot-product-card:hover .hot-product-media::after { opacity: 1; }
.hot-product-hover-cta {
	position: absolute;
	left: 50%;
	bottom: 18px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: 7px;
	background: rgba(255,255,255,.96);
	color: #17213a;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	opacity: 0;
	transform: translate(-50%, 16px);
	box-shadow: 0 10px 24px rgba(0,0,0,.15);
	transition: opacity .3s ease, transform .3s ease;
}
.hot-product-card:hover .hot-product-hover-cta {
	opacity: 1;
	transform: translate(-50%, 0);
}
.hot-product-body { padding: 23px 22px 25px; }
.hot-product-meta {
	min-height: 18px;
	margin-bottom: 8px;
	color: #5f86ed;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
}
.hot-product-body h3 {
	margin: 0 0 11px;
	font-size: 19px;
	line-height: 1.42;
	font-weight: 750;
}
.hot-product-body h3 a { color: #17213a; transition: color .25s ease; }
.hot-product-body h3 a:hover { color: #5f86ed; }
.hot-product-body p {
	display: -webkit-box;
	margin: 0 0 18px;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: #747b8b;
	font-size: 14px;
	line-height: 1.7;
}
.hot-product-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #17213a;
	font-size: 14px;
	font-weight: 700;
	transition: color .25s ease, gap .25s ease;
}
.hot-product-link span { color: #5f86ed; }
.hot-product-link:hover { gap: 12px; color: #5f86ed; }
.hot-products-empty {
	padding: 22px 24px;
	border: 1px dashed #d7deea;
	border-radius: 10px;
	background: #fff;
	color: #667085;
}
@media (max-width: 1199px) {
	.hot-products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
	.home-hot-products { padding: 72px 0 78px; }
	.hot-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.home-hot-products { padding: 58px 0 64px; }
	.hot-products-heading { display: block; margin-bottom: 30px; }
	.hot-products-view-all { margin-top: 20px; }
	.hot-products-grid { grid-template-columns: 1fr; gap: 20px; }
	.hot-product-media { height: auto; }
}
@media (max-width: 480px) {
	.hot-product-media { height: auto; }
	.hot-product-body { padding: 21px 19px 23px; }
}
/* ==================================================
      Fan Company Strength
   ================================================== */

.fan-company-about {
	position: relative;
	background: #ffffff;
}

.fan-company-about .about-content > h6 {
	margin-bottom: 14px;
	color: #5e87eb;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 1.8px;
}

.fan-company-about .about-content > h2 {
	max-width: 650px;
	margin-bottom: 22px;
	color: #111a35;
	font-size: 44px;
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -1px;
}

.fan-company-about .about-content > p {
	max-width: 650px;
	margin-bottom: 14px;
	color: #687080;
	font-size: 16px;
	line-height: 1.8;
}


/* Strength Items */

.fan-strength-list {
	margin-top: 32px;
}

.fan-strength-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 22px;
}

.fan-strength-icon {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 12px;

	background: rgba(94, 135, 235, .10);

	color: #5e87eb;
	font-size: 20px;

	transition: all .3s ease;
}

.fan-strength-item:hover .fan-strength-icon {
	background: #5e87eb;
	color: #ffffff;
	transform: translateY(-3px);
}

.fan-strength-content h3 {
	margin: 0 0 6px;
	color: #111a35;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 750;
}

.fan-strength-content p {
	margin: 0;
	color: #737b89;
	font-size: 14px;
	line-height: 1.7;
}


/* Buttons */

.fan-about-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.fan-about-buttons a {
	margin: 0 !important;
}


/* Image */

.fan-about-image {
	position: relative;
	overflow: visible;
}

.fan-about-image img {
	display: block;
	width: 100%;
	height: auto;

	border-radius: 18px;

	box-shadow:
			0 20px 55px
			rgba(18, 35, 70, .12);
}

.fan-about-badge {
	position: absolute;
	left: -28px;
	bottom: 28px;

	min-width: 205px;
	padding: 18px 22px;

	border-radius: 12px;

	background: #ffffff;

	box-shadow:
			0 15px 40px
			rgba(18, 35, 70, .15);
}

.fan-about-badge strong {
	display: block;
	margin-bottom: 3px;

	color: #5e87eb;
	font-size: 22px;
	font-weight: 800;
}

.fan-about-badge span {
	color: #656d7b;
	font-size: 13px;
	font-weight: 600;
}


/* Responsive */

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

	.fan-company-about .about-content {
		margin-bottom: 45px;
	}

	.fan-company-about .about-content > h2 {
		font-size: 38px;
	}

	.fan-about-badge {
		left: 20px;
	}

}

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

	.fan-company-about .about-content > h2 {
		font-size: 31px;
	}

	.fan-strength-item {
		gap: 14px;
	}

	.fan-strength-icon {
		flex-basis: 46px;
		width: 46px;
		height: 46px;
	}

	.fan-about-buttons {
		margin-bottom: 10px;
	}

	.fan-about-badge {
		left: 15px;
		bottom: 15px;
		min-width: auto;
		padding: 13px 16px;
	}

	.fan-about-badge strong {
		font-size: 18px;
	}

}
/* ==================================================
      Products Center
   ================================================== */

.home-products-center {

	position: relative;

	padding:
			95px
			0
			100px;

	overflow: hidden;

	background:
			linear-gradient(
					180deg,
					#f7f9fc 0%,
					#ffffff 100%
			);
}


/* Background Decoration */

.home-products-center::before {

	content: "";

	position: absolute;

	top: -230px;
	right: -220px;

	width: 520px;
	height: 520px;

	border-radius: 50%;

	background:
			radial-gradient(
					circle,
					rgba(
							94,
							135,
							235,
							.10
					),
					rgba(
							94,
							135,
							235,
							0
					)
					68%
			);

	pointer-events: none;
}


/* ==================================================
   Heading
================================================== */

.products-center-heading {

	position: relative;

	z-index: 1;

	margin-bottom: 48px;
}


.products-center-heading-left {

	max-width: 760px;
}


.products-center-eyebrow {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	margin-bottom: 14px;

	color: #5e87eb;

	font-size: 13px;

	font-weight: 800;

	letter-spacing: 2px;
}


.products-center-eyebrow::before {

	content: "";

	width: 28px;

	height: 2px;

	background: #5e87eb;
}


.products-center-heading h2 {

	margin:
			0
			0
			16px;

	color: #111a35;

	font-size: 44px;

	line-height: 1.15;

	font-weight: 800;

	letter-spacing: -1px;
}


.products-center-heading p {

	max-width: 690px;

	margin: 0;

	color: #697181;

	font-size: 16px;

	line-height: 1.8;
}



/* ==================================================
   Product Grid
================================================== */

.products-center-grid {

	position: relative;

	z-index: 1;

	display: grid;

	grid-template-columns:
            repeat(
                4,
				minmax(
						0,
						1fr
				)
            );

	gap: 26px;
}



/* ==================================================
   Product Card
================================================== */

.products-center-card {

	position: relative;

	min-width: 0;

	overflow: hidden;

	border:
			1px
			solid
			#e9edf4;

	border-radius: 14px;

	background: #ffffff;

	box-shadow:
			0
			8px
			30px
			rgba(
					18,
					34,
					70,
					.055
			);

	transition:
			transform
			.4s
			ease,
			box-shadow
			.4s
			ease,
			border-color
			.4s
			ease;
}


.products-center-card:hover {

	transform:
			translateY(
					-8px
			);

	border-color:
			rgba(
					94,
					135,
					235,
					.25
			);

	box-shadow:
			0
			22px
			55px
			rgba(
					18,
					34,
					70,
					.13
			);
}



/* ==================================================
   Product Image
================================================== */

.products-center-image {

	position: relative;

	display: block;

	width: 100%;

	overflow: hidden;

	background: #f5f7fa;
}


.products-center-image img {

	display: block;

	width: 100%;

	height: auto;

	transition:
			transform
			.6s
			cubic-bezier(
					.2,
					.7,
					.2,
					1
			);
}


/*
 * 轻微放大，
 * 保留动态感但不过度裁切产品图。
 */
.products-center-card:hover
.products-center-image img {

	transform:
			scale(
					1.035
			);
}



/* ==================================================
   Image Hover Overlay
================================================== */

.products-center-overlay {

	position: absolute;

	inset: 0;

	display: flex;

	align-items: center;

	justify-content: center;

	background:
			rgba(
					15,
					28,
					58,
					.40
			);

	opacity: 0;

	transition:
			opacity
			.3s
			ease;
}


.products-center-overlay > span {

	display: inline-flex;

	align-items: center;

	gap: 9px;

	padding:
			11px
			17px;

	border-radius: 6px;

	background: #ffffff;

	color: #111a35;

	font-size: 13px;

	font-weight: 700;

	transform:
			translateY(
					12px
			);

	transition:
			transform
			.3s
			ease;
}


.products-center-card:hover
.products-center-overlay {

	opacity: 1;
}


.products-center-card:hover
.products-center-overlay > span {

	transform:
			translateY(
					0
			);
}



/* ==================================================
   Product Content
================================================== */

.products-center-content {

	padding:
			24px
			23px
			26px;
}



/* Category */

.products-center-category {

	margin-bottom: 9px;

	color: #5e87eb;

	font-size: 12px;

	line-height: 1.3;

	font-weight: 750;

	letter-spacing: .6px;

	text-transform: uppercase;
}



/* Product Title */

.products-center-content h3 {

	margin:
			0
			0
			11px;

	font-size: 19px;

	line-height: 1.4;

	font-weight: 750;
}


.products-center-content h3 a {

	color: #111a35;

	transition:
			color
			.25s
			ease;
}


.products-center-content h3 a:hover {

	color: #5e87eb;
}



/* Description */

.products-center-content p {

	display: -webkit-box;

	margin:
			0
			0
			18px;

	overflow: hidden;

	-webkit-box-orient:
			vertical;

	-webkit-line-clamp:
			2;

	color: #717987;

	font-size: 14px;

	line-height: 1.7;
}



/* Product Link */

.products-center-link {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	color: #111a35;

	font-size: 14px;

	font-weight: 700;

	transition:
			color
			.25s
			ease,
			gap
			.25s
			ease;
}


.products-center-link span {

	color: #5e87eb;

	font-size: 18px;
}


.products-center-link:hover {

	color: #5e87eb;

	gap: 13px;
}



/* ==================================================
   Bottom More Button
================================================== */

.products-center-bottom {

	position: relative;

	z-index: 1;

	margin-top: 45px;

	text-align: center;
}


.products-center-more-btn {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 11px;

	min-height: 52px;

	padding:
			0
			30px;

	border-radius: 7px;

	background: #5e87eb;

	color: #ffffff;

	font-size: 14px;

	font-weight: 700;

	box-shadow:
			0
			10px
			28px
			rgba(
					94,
					135,
					235,
					.24
			);

	transition:
			all
			.3s
			ease;
}


.products-center-more-btn:hover {

	color: #ffffff;

	transform:
			translateY(
					-3px
			);

	box-shadow:
			0
			15px
			34px
			rgba(
					94,
					135,
					235,
					.32
			);
}



/* ==================================================
   Admin Debug
================================================== */

.products-center-empty {

	padding: 25px;

	border:
			1px
			dashed
			#d8dee9;

	border-radius: 10px;

	background: #ffffff;

	color: #697181;

	text-align: center;
}



/* ==================================================
   Responsive
================================================== */

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

	.products-center-grid {

		grid-template-columns:
                repeat(
                    3,
					minmax(
							0,
							1fr
					)
                );
	}

}


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

	.home-products-center {

		padding:
				75px
				0
				80px;
	}


	.products-center-heading h2 {

		font-size: 37px;
	}


	.products-center-grid {

		grid-template-columns:
                repeat(
                    2,
					minmax(
							0,
							1fr
					)
                );
	}

}


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

	.home-products-center {

		padding:
				60px
				0
				65px;
	}


	.products-center-heading {

		margin-bottom: 32px;
	}


	.products-center-heading h2 {

		font-size: 31px;
	}


	.products-center-heading p {

		font-size: 15px;
	}


	.products-center-grid {

		grid-template-columns:
                1fr;

		gap: 20px;
	}


	.products-center-bottom {

		margin-top: 32px;
	}

}
/* ==================================================
      Fan Why Choose Us
   ================================================== */

.fan-why-choose {
	position: relative;

	background: #ffffff;

	overflow: hidden;
}


/* subtle background light */

.fan-why-choose::before {
	content: "";

	position: absolute;

	right: -220px;
	top: -180px;

	width: 520px;
	height: 520px;

	border-radius: 50%;

	background:
			radial-gradient(
					circle,
					rgba(94, 135, 235, .08),
					rgba(94, 135, 235, 0) 70%
			);

	pointer-events: none;
}



/* ==================================================
   Left Video
================================================== */

.fan-video-area {
	position: relative;

	margin-right: 30px;
}


.fan-video-trigger {
	position: relative;

	display: block;

	width: 100%;

	padding: 0;

	border: 0;
	border-radius: 20px;

	background: #111a35;

	overflow: hidden;

	cursor: pointer;

	box-shadow:
			0 24px 60px
			rgba(16, 31, 64, .15);
}


.fan-video-trigger img {
	display: block;

	width: 100%;
	height: auto;

	transition:
			transform .7s
			cubic-bezier(.2, .7, .2, 1);
}


.fan-video-trigger:hover img {
	transform: scale(1.045);
}



/* overlay */

.fan-video-overlay {
	position: absolute;

	inset: 0;

	background:
			linear-gradient(
					180deg,
					rgba(8, 18, 42, .05) 20%,
					rgba(8, 18, 42, .62) 100%
			);

	transition:
			background .3s ease;
}


.fan-video-trigger:hover
.fan-video-overlay {
	background:
			linear-gradient(
					180deg,
					rgba(8, 18, 42, .10) 15%,
					rgba(8, 18, 42, .70) 100%
			);
}



/* ==================================================
   Play Button
================================================== */

.fan-video-play {
	position: absolute;

	left: 50%;
	top: 50%;

	z-index: 3;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 82px;
	height: 82px;

	border-radius: 50%;

	background: #ffffff;

	color: #5e87eb;

	font-size: 22px;

	transform:
			translate(
					-50%,
					-50%
			);

	box-shadow:
			0 12px 35px
			rgba(0, 0, 0, .18);

	transition:
			transform .3s ease,
			background .3s ease,
			color .3s ease;
}


.fan-video-play > i {
	position: relative;

	z-index: 2;

	margin-left: 4px;
}


.fan-video-trigger:hover
.fan-video-play {
	transform:
			translate(
					-50%,
					-50%
			)
			scale(1.08);

	background: #5e87eb;

	color: #ffffff;
}



/* pulse animation */

.fan-video-play-ring {
	position: absolute;

	inset: -12px;

	border:
			1px
			solid
			rgba(255, 255, 255, .60);

	border-radius: 50%;

	animation:
			fanVideoPulse
			2s
			ease-out
			infinite;
}


@keyframes fanVideoPulse {

	0% {
		transform: scale(.82);
		opacity: .85;
	}

	100% {
		transform: scale(1.35);
		opacity: 0;
	}

}



/* ==================================================
   Video Caption
================================================== */

.fan-video-caption {
	position: absolute;

	left: 32px;
	bottom: 30px;

	z-index: 3;

	display: block;

	text-align: left;
}


.fan-video-caption small {
	display: block;

	margin-bottom: 5px;

	color:
			rgba(
					255,
					255,
					255,
					.72
			);

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 1.7px;
}


.fan-video-caption strong {
	display: block;

	color: #ffffff;

	font-size: 20px;

	font-weight: 750;
}



/* ==================================================
   Floating Badge
================================================== */

.fan-video-badge {
	position: absolute;

	right: -20px;
	bottom: 35px;

	z-index: 5;

	padding:
			17px
			21px;

	border-radius: 12px;

	background: #ffffff;

	box-shadow:
			0 15px 38px
			rgba(18, 34, 70, .16);
}


.fan-video-badge strong {
	display: block;

	margin-bottom: 2px;

	color: #5e87eb;

	font-size: 21px;

	font-weight: 800;
}


.fan-video-badge span {
	color: #6f7785;

	font-size: 12px;

	font-weight: 600;
}



/* ==================================================
   Right Content
================================================== */

.fan-choose-content {
	padding-left: 25px;
}


.fan-choose-content
.choose-content-info h6 {
	margin-bottom: 13px;

	color: #5e87eb;

	font-size: 13px;

	font-weight: 800;

	letter-spacing: 1.8px;
}


.fan-choose-content
.choose-content-info h2 {
	margin-bottom: 20px;

	color: #111a35;

	font-size: 42px;

	line-height: 1.2;

	font-weight: 800;

	letter-spacing: -1px;
}


.fan-choose-content
.choose-content-info > p {
	margin:
			0
			0
			30px;

	color: #6d7584;

	font-size: 16px;

	line-height: 1.8;
}



/* ==================================================
   Features
================================================== */

.fan-choose-feature-box {
	margin-top: 20px;
}


.fan-choose-item {
	display: flex;

	align-items: flex-start;

	gap: 18px;

	padding:
			20px
			0;

	border-bottom:
			1px
			solid
			#edf0f5;

	transition:
			transform .3s ease;
}


.fan-choose-item:first-child {
	padding-top: 0;
}


.fan-choose-item:last-child {
	border-bottom: 0;
}


.fan-choose-item:hover {
	transform:
			translateX(
					5px
			);
}



/* Icon */

.fan-choose-icon {
	flex:
			0
			0
			54px;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 54px;
	height: 54px;

	border-radius: 13px;

	background:
			rgba(
					94,
					135,
					235,
					.10
			);

	color: #5e87eb;

	font-size: 20px;

	transition:
			all
			.3s
			ease;
}


.fan-choose-item:hover
.fan-choose-icon {
	background: #5e87eb;

	color: #ffffff;

	transform:
			translateY(
					-2px
			);
}



/* Info */

.fan-choose-item
.choose-features-info h3 {
	margin:
			0
			0
			7px;

	color: #111a35;

	font-size: 18px;

	line-height: 1.4;

	font-weight: 750;
}


.fan-choose-item
.choose-features-info p {
	margin: 0;

	color: #737b88;

	font-size: 14px;

	line-height: 1.7;
}



/* ==================================================
   Buttons
================================================== */

.fan-choose-buttons {
	display: flex;

	flex-wrap: wrap;

	gap: 14px;

	margin-top: 30px;
}


.fan-choose-buttons a {
	margin: 0 !important;
}



/* ==================================================
   Video Modal
================================================== */

.fan-video-modal {
	position: fixed;

	inset: 0;

	z-index: 999999;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 30px;

	opacity: 0;

	visibility: hidden;

	transition:
			opacity .3s ease,
			visibility .3s ease;
}


.fan-video-modal.is-open {
	opacity: 1;

	visibility: visible;
}


.fan-video-modal-backdrop {
	position: absolute;

	inset: 0;

	background:
			rgba(
					4,
					9,
					21,
					.88
			);

	backdrop-filter:
			blur(
					6px
			);

	-webkit-backdrop-filter:
			blur(
					6px
			);
}


.fan-video-modal-dialog {
	position: relative;

	z-index: 2;

	width:
			min(
					1100px,
					94vw
			);

	transform:
			scale(
					.94
			);

	opacity: 0;

	transition:
			transform .32s ease,
			opacity .32s ease;
}


.fan-video-modal.is-open
.fan-video-modal-dialog {
	transform:
			scale(
					1
			);

	opacity: 1;
}



/* player */

.fan-video-player {
	overflow: hidden;

	border-radius: 14px;

	background: #000000;

	box-shadow:
			0
			28px
			80px
			rgba(
					0,
					0,
					0,
					.48
			);
}


.fan-video-player video {
	display: block;

	width: 100%;

	max-height: 82vh;

	background: #000000;
}



/* Close */

.fan-video-close {
	position: absolute;

	top: -50px;
	right: 0;

	z-index: 3;

	width: 42px;
	height: 42px;

	border: 0;

	border-radius: 50%;

	background:
			rgba(
					255,
					255,
					255,
					.13
			);

	color: #ffffff;

	font-size: 18px;

	cursor: pointer;

	transition:
			all
			.25s
			ease;
}


.fan-video-close:hover {
	background: #ffffff;

	color: #111a35;

	transform:
			rotate(
					90deg
			);
}



/* ==================================================
   Responsive
================================================== */

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

	.fan-video-area {
		margin:
				0
				0
				55px;
	}


	.fan-choose-content {
		padding-left: 0;
	}


	.fan-choose-content
	.choose-content-info h2 {
		font-size: 36px;
	}


	.fan-video-badge {
		right: 20px;
	}

}


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

	.fan-choose-content
	.choose-content-info h2 {
		font-size: 30px;
	}


	.fan-video-caption {
		left: 20px;
		bottom: 20px;
	}


	.fan-video-caption strong {
		font-size: 17px;
	}


	.fan-video-play {
		width: 66px;
		height: 66px;

		font-size: 18px;
	}


	.fan-video-badge {
		display: none;
	}


	.fan-choose-item {
		gap: 14px;
	}


	.fan-choose-icon {
		flex-basis: 46px;

		width: 46px;
		height: 46px;

		font-size: 17px;
	}


	.fan-video-modal {
		padding: 18px;
	}


	.fan-video-close {
		top: -48px;
	}

}
/* =========================================================
      Factory Section
   ========================================================= */

.yx-factory-section {
	position: relative;
	overflow: hidden;
	background: #ffffff;
}


/* =========================================================
   Heading
========================================================= */

.yx-factory-heading {
	max-width: 820px;
	margin: 0 auto 36px;
	text-align: center;
}

.yx-factory-eyebrow {
	display: block;
	margin-bottom: 12px;

	color: #5e87eb;

	font-size: 13px;
	line-height: 1.2;
	font-weight: 800;

	letter-spacing: 2px;
}

.yx-factory-heading h2 {
	margin: 0 0 16px;

	color: #111a35;

	font-size: 44px;
	line-height: 1.15;
	font-weight: 800;

	letter-spacing: -1px;
}

.yx-factory-heading p {
	max-width: 760px;
	margin: 0 auto;

	color: #6e7685;

	font-size: 16px;
	line-height: 1.8;
}


/* =========================================================
   Filters
========================================================= */

.yx-factory-filters {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	gap: 10px;

	margin-bottom: 42px;
}

.yx-factory-filter {
	appearance: none;
	-webkit-appearance: none;

	padding: 11px 21px;

	border: 1px solid #e0e5ee;
	border-radius: 999px;

	background: #ffffff;

	color: #4e5667;

	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 700;

	cursor: pointer;

	box-shadow:
			0 5px 20px
			rgba(30, 45, 80, .04);

	transition:
			color .25s ease,
			background .25s ease,
			border-color .25s ease,
			transform .25s ease,
			box-shadow .25s ease;
}

.yx-factory-filter:hover {
	color: #5e87eb;
	border-color: #5e87eb;

	transform: translateY(-2px);
}

.yx-factory-filter.is-active {
	color: #ffffff;

	background: #5e87eb;
	border-color: #5e87eb;

	box-shadow:
			0 10px 25px
			rgba(94, 135, 235, .24);
}


/* =========================================================
   GRID
   完全不依赖 Isotope
========================================================= */

.yx-factory-grid {
	display: grid !important;

	grid-template-columns:
           repeat(3, minmax(0, 1fr));

	gap: 28px;

	width: 100%;
}


/* =========================================================
   Card
========================================================= */

.yx-factory-card {
	display: block;

	width: 100%;
	min-width: 0;

	margin: 0;
	padding: 0;

	opacity: 1;
	visibility: visible;

	transform: translateY(0);

	transition:
			opacity .32s ease,
			transform .32s ease;
}


/* JS 筛选后隐藏 */

.yx-factory-card.is-hidden {
	display: none !important;
}


/* 切换出现动画 */

.yx-factory-card.is-entering {
	animation:
			yxFactoryEnter
			.45s
			ease
			both;
}

@keyframes yxFactoryEnter {

	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}


/* =========================================================
   Image Card
========================================================= */

.yx-factory-image {
	position: relative;

	width: 100%;
	height: 380px;

	overflow: hidden;

	border-radius: 16px;

	background: #eef1f5;

	box-shadow:
			0 10px 35px
			rgba(18, 34, 70, .09);
}

.yx-factory-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
			transform .65s
			cubic-bezier(.2, .7, .2, 1);
}

.yx-factory-card:hover
.yx-factory-image img {
	transform: scale(1.055);
}


/* =========================================================
   Overlay
========================================================= */

.yx-factory-overlay {
	position: absolute;

	left: 0;
	right: 0;
	bottom: 0;

	z-index: 2;

	padding:
			80px
			26px
			25px;

	background:
			linear-gradient(
					180deg,
					rgba(8, 17, 38, 0) 0%,
					rgba(8, 17, 38, .72) 48%,
					rgba(8, 17, 38, .94) 100%
			);
}

.yx-factory-overlay > span {
	display: block;

	margin-bottom: 7px;

	color: #8cabff;

	font-size: 11px;
	line-height: 1.2;
	font-weight: 800;

	letter-spacing: 1.4px;
}

.yx-factory-overlay h3 {
	margin: 0 0 7px;

	color: #ffffff;

	font-size: 21px;
	line-height: 1.35;
	font-weight: 750;
}

.yx-factory-overlay p {
	max-width: 95%;

	margin: 0;

	color: rgba(255,255,255,.78);

	font-size: 13px;
	line-height: 1.65;

	opacity: 0;

	transform: translateY(10px);

	transition:
			opacity .3s ease,
			transform .3s ease;
}

.yx-factory-card:hover
.yx-factory-overlay p {
	opacity: 1;
	transform: translateY(0);
}


/* =========================================================
   Responsive
========================================================= */

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

	.yx-factory-grid {
		grid-template-columns:
               repeat(3, minmax(0, 1fr));

		gap: 22px;
	}

	.yx-factory-image {
		height: 330px;
	}

}


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

	.yx-factory-heading h2 {
		font-size: 37px;
	}

	.yx-factory-grid {
		grid-template-columns:
               repeat(2, minmax(0, 1fr));
	}

	.yx-factory-image {
		height: 350px;
	}

}


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

	.yx-factory-heading {
		margin-bottom: 28px;
	}

	.yx-factory-heading h2 {
		font-size: 30px;
	}

	.yx-factory-heading p {
		font-size: 15px;
	}

	.yx-factory-filters {
		justify-content: flex-start;

		gap: 8px;

		margin-bottom: 28px;
	}

	.yx-factory-filter {
		padding: 9px 15px;

		font-size: 12px;
	}

	.yx-factory-grid {
		grid-template-columns: 1fr;

		gap: 20px;
	}

	.yx-factory-image {
		height: 330px;
	}

	.yx-factory-overlay {
		padding:
				70px
				22px
				22px;
	}

	.yx-factory-overlay p {
		opacity: 1;
		transform: none;
	}

}


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

	.yx-factory-image {
		height: 290px;
	}

}
/* ==========================================================
       Qualification Section
    ========================================================== */

.yx-qualification-section {
	position: relative;

	overflow: hidden;

	background:
			linear-gradient(
					180deg,
					#f7f9fc 0%,
					#ffffff 100%
			);
}


/* ==========================================================
   Heading
========================================================== */

.yx-qualification-heading {
	max-width: 780px;

	margin:
			0
			auto
			45px;

	text-align: center;
}


.yx-qualification-kicker {
	display: block;

	margin-bottom: 12px;

	color: #5e87eb;

	font-size: 13px;
	line-height: 1.2;

	font-weight: 800;

	letter-spacing: 2px;
}


.yx-qualification-heading h2 {
	margin:
			0
			0
			16px;

	color: #111a35;

	font-size: 44px;
	line-height: 1.15;

	font-weight: 800;

	letter-spacing: -1px;
}


.yx-qualification-heading p {
	max-width: 700px;

	margin:
			0
			auto;

	color: #6e7685;

	font-size: 16px;
	line-height: 1.8;
}



/* ==========================================================
   Slider
========================================================== */

.yx-qualification-slider {
	position: relative;

	width: 100%;

	overflow: hidden;

	padding:
			10px
			0
			35px;
}


/*
 * Left & right soft mask
 */
.yx-qualification-slider::before,
.yx-qualification-slider::after {
	content: "";

	position: absolute;

	top: 0;
	bottom: 0;

	z-index: 5;

	width: 90px;

	pointer-events: none;
}


.yx-qualification-slider::before {
	left: 0;

	background:
			linear-gradient(
					90deg,
					#f8fafd 0%,
					rgba(
							248,
							250,
							253,
							0
					) 100%
			);
}


.yx-qualification-slider::after {
	right: 0;

	background:
			linear-gradient(
					270deg,
					#ffffff 0%,
					rgba(
							255,
							255,
							255,
							0
					) 100%
			);
}



/* ==========================================================
   Track
========================================================== */

.yx-qualification-track {
	display: flex;

	align-items: stretch;

	width: max-content;

	gap: 26px;

	padding:
			0
			13px;

	animation:
			yxQualificationScroll
			45s
			linear
			infinite;

	will-change: transform;
}


/*
 * Pause when visitor wants to view.
 */
.yx-qualification-slider:hover
.yx-qualification-track {
	animation-play-state: paused;
}


@keyframes yxQualificationScroll {

	from {
		transform:
				translateX(
						0
				);
	}

	to {
		transform:
				translateX(
						calc(
								-50%
								- 13px
						)
				);
	}

}



/* ==========================================================
   Certificate Card
========================================================== */

.yx-qualification-card {
	flex:
			0
			0
			300px;

	width: 300px;

	overflow: hidden;

	border:
			1px
			solid
			#e7ebf2;

	border-radius: 14px;

	background: #ffffff;

	box-shadow:
			0
			10px
			35px
			rgba(
					18,
					34,
					70,
					.07
			);

	transition:
			transform
			.35s
			ease,
			box-shadow
			.35s
			ease,
			border-color
			.35s
			ease;
}


.yx-qualification-card:hover {
	transform:
			translateY(
					-8px
			);

	border-color:
			rgba(
					94,
					135,
					235,
					.28
			);

	box-shadow:
			0
			22px
			50px
			rgba(
					18,
					34,
					70,
					.14
			);
}



/* ==========================================================
   Certificate Image
========================================================== */

.yx-qualification-image {
	position: relative;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 380px;

	padding: 18px;

	overflow: hidden;

	border: 0;

	background: #f5f7fa;

	cursor: pointer;
}


.yx-qualification-image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;

	transition:
			transform
			.45s
			ease;
}


.yx-qualification-card:hover
.yx-qualification-image img {
	transform:
			scale(
					1.025
			);
}



/* Hover View */

.yx-qualification-view {
	position: absolute;

	left: 50%;
	bottom: 22px;

	z-index: 3;

	display: inline-flex;

	align-items: center;

	gap: 7px;

	padding:
			10px
			15px;

	border-radius: 6px;

	background:
			rgba(
					17,
					26,
					53,
					.90
			);

	color: #ffffff;

	font-size: 12px;
	font-weight: 700;

	white-space: nowrap;

	opacity: 0;

	transform:
			translate(
					-50%,
					12px
			);

	transition:
			opacity
			.3s
			ease,
			transform
			.3s
			ease;
}


.yx-qualification-card:hover
.yx-qualification-view {
	opacity: 1;

	transform:
			translate(
					-50%,
					0
			);
}



/* ==========================================================
   Card Content
========================================================== */

.yx-qualification-content {
	padding:
			20px
			20px
			22px;

	text-align: center;
}


.yx-qualification-content h3 {
	margin:
			0
			0
			7px;

	color: #111a35;

	font-size: 17px;
	line-height: 1.45;

	font-weight: 750;
}


.yx-qualification-content p {
	display: -webkit-box;

	margin: 0;

	overflow: hidden;

	color: #727a88;

	font-size: 13px;
	line-height: 1.65;

	-webkit-box-orient:
			vertical;

	-webkit-line-clamp:
			2;
}



/* ==========================================================
   Lightbox
========================================================== */

.yx-qualification-modal {
	position: fixed;

	inset: 0;

	z-index: 999999;

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 30px;

	opacity: 0;

	visibility: hidden;

	transition:
			opacity
			.3s
			ease,
			visibility
			.3s
			ease;
}


.yx-qualification-modal.is-open {
	opacity: 1;

	visibility: visible;
}


.yx-qualification-modal-bg {
	position: absolute;

	inset: 0;

	background:
			rgba(
					5,
					10,
					24,
					.90
			);

	backdrop-filter:
			blur(
					6px
			);

	-webkit-backdrop-filter:
			blur(
					6px
			);
}


.yx-qualification-modal-dialog {
	position: relative;

	z-index: 2;

	width:
			min(
					850px,
					92vw
			);

	max-height: 90vh;

	text-align: center;
}


.yx-qualification-preview {
	display: flex;

	align-items: center;
	justify-content: center;

	max-height: 82vh;

	padding: 20px;

	overflow: hidden;

	border-radius: 12px;

	background: #ffffff;
}


.yx-qualification-preview img {
	display: block;

	max-width: 100%;
	max-height: 76vh;

	object-fit: contain;
}


.yx-qualification-preview-title {
	margin-top: 15px;

	color: #ffffff;

	font-size: 16px;

	font-weight: 700;
}



/* Close */

.yx-qualification-close {
	position: absolute;

	top: -48px;
	right: 0;

	z-index: 5;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	border: 0;

	border-radius: 50%;

	background:
			rgba(
					255,
					255,
					255,
					.14
			);

	color: #ffffff;

	cursor: pointer;

	transition:
			all
			.25s
			ease;
}


.yx-qualification-close:hover {
	background: #ffffff;

	color: #111a35;

	transform:
			rotate(
					90deg
			);
}



/* ==========================================================
   Empty
========================================================== */

.yx-qualification-empty {
	padding: 25px;

	border:
			1px
			dashed
			#d8dee9;

	border-radius: 10px;

	background: #ffffff;

	color: #697181;

	text-align: center;
}



/* ==========================================================
   Responsive
========================================================== */

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

	.yx-qualification-heading h2 {
		font-size: 37px;
	}


	.yx-qualification-card {
		flex-basis: 270px;

		width: 270px;
	}


	.yx-qualification-image {
		height: 345px;
	}

}


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

	.yx-qualification-heading {
		margin-bottom: 30px;
	}


	.yx-qualification-heading h2 {
		font-size: 30px;
	}


	.yx-qualification-heading p {
		font-size: 15px;
	}


	.yx-qualification-slider::before,
	.yx-qualification-slider::after {
		width: 30px;
	}


	.yx-qualification-card {
		flex-basis: 235px;

		width: 235px;
	}


	.yx-qualification-image {
		height: 300px;

		padding: 13px;
	}


	.yx-qualification-view {
		display: none;
	}


	.yx-qualification-content {
		padding:
				17px
				15px
				19px;
	}


	.yx-qualification-content h3 {
		font-size: 15px;
	}


	.yx-qualification-track {
		animation-duration: 35s;
	}

}


/*
 * Accessibility:
 * disable automatic animation if user
 * requests reduced motion.
 */
@media (
prefers-reduced-motion:
		reduce
) {

	.yx-qualification-track {
		animation: none;
	}

}
/* ==========================================
      Fan Inquiry CTA
   ========================================== */

.fan-inquiry-section {
	position: relative;
	overflow: hidden;
}

.fan-inquiry-section .hire-content {
	text-align: center;
}

.fan-inquiry-kicker {
	display: inline-block;

	margin-bottom: 14px;

	color: #ffffff;

	font-size: 13px;
	line-height: 1.2;

	font-weight: 800;

	letter-spacing: 2px;

	opacity: .82;
}

.fan-inquiry-section .hire-content h2 {
	max-width: 760px;

	margin:
			0
			auto
			20px;

	color: #ffffff;

	font-size: 46px;
	line-height: 1.18;

	font-weight: 800;

	letter-spacing: -1px;
}

.fan-inquiry-section .hire-content p {
	max-width: 760px;

	margin:
			0
			auto
			30px;

	color:
			rgba(
					255,
					255,
					255,
					.84
			);

	font-size: 16px;
	line-height: 1.8;
}


/* Buttons */

.fan-inquiry-buttons {
	display: flex;

	align-items: center;
	justify-content: center;

	flex-wrap: wrap;

	gap: 14px;
}

.fan-inquiry-buttons a {
	margin: 0 !important;
}

.fan-products-btn {
	border:
			1px
			solid
			rgba(
					255,
					255,
					255,
					.35
			);

	background:
			rgba(
					255,
					255,
					255,
					.08
			);

	color: #ffffff;

	backdrop-filter:
			blur(6px);

	-webkit-backdrop-filter:
			blur(6px);
}

.fan-products-btn:hover {
	border-color: #ffffff;

	background: #ffffff;

	color: #111a35;
}


/* Responsive */

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

	.fan-inquiry-section .hire-content h2 {
		font-size: 31px;
	}

	.fan-inquiry-section .hire-content p {
		font-size: 15px;
		line-height: 1.7;
	}

	.fan-inquiry-buttons {
		gap: 10px;
	}

}
/* ==========================================
       Homepage News
    ========================================== */

.home-news-section {
	position: relative;
	background: #ffffff;
}


/* Heading */

.home-news-title {
	max-width: 760px;
	margin:
			0
			auto
			45px;

	text-align: center;
}

.home-news-kicker {
	display: block;

	margin-bottom: 10px;

	color: #5e87eb;

	font-size: 13px;
	line-height: 1.2;

	font-weight: 800;

	letter-spacing: 2px;
}

.home-news-title h2 {
	margin:
			0
			0
			15px;

	color: #111a35;

	font-size: 44px;
	line-height: 1.15;

	font-weight: 800;

	letter-spacing: -1px;
}

.home-news-title p {
	max-width: 680px;

	margin:
			0
			auto;

	color: #707887;

	font-size: 16px;
	line-height: 1.8;
}


/* ==========================================
   Card
========================================== */

.home-news-card {
	height: calc(100% - 30px);

	margin-bottom: 30px;

	overflow: hidden;

	border-radius: 14px;

	background: #ffffff;

	box-shadow:
			0
			10px
			34px
			rgba(
					18,
					34,
					70,
					.07
			);

	transition:
			transform .35s ease,
			box-shadow .35s ease;
}

.home-news-card:hover {
	transform:
			translateY(
					-7px
			);

	box-shadow:
			0
			22px
			50px
			rgba(
					18,
					34,
					70,
					.13
			);
}


/* Image */

.home-news-image {
	overflow: hidden;
}

.home-news-image img {
	display: block;

	width: 100%;
	height: 250px;

	object-fit: cover;

	transition:
			transform
			.6s
			cubic-bezier(
					.2,
					.7,
					.2,
					1
			);
}

.home-news-card:hover
.home-news-image img {
	transform:
			scale(
					1.05
			);
}


/* Meta */

.home-news-card
.blog-list span,
.home-news-card
.blog-list time {
	color: #747b88;

	font-size: 13px;
}

.home-news-card
.blog-list i {
	margin-right: 5px;

	color: #5e87eb;
}


/* Title */

.home-news-card
.blog-content h3 {
	line-height: 1.45;
}

.home-news-card
.blog-content h3 a {
	color: #111a35;

	transition:
			color
			.25s
			ease;
}

.home-news-card
.blog-content h3 a:hover {
	color: #5e87eb;
}


/* Description */

.home-news-card
.blog-content p {
	display: -webkit-box;

	overflow: hidden;

	-webkit-box-orient:
			vertical;

	-webkit-line-clamp:
			3;
}


/* ==========================================
   View All
========================================== */

.home-news-more {
	margin-top: 15px;

	text-align: center;
}

.home-news-more-link {
	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 10px;

	min-height: 50px;

	padding:
			0
			26px;

	border:
			1px
			solid
			#dfe4ee;

	border-radius: 7px;

	background: #ffffff;

	color: #111a35;

	font-size: 14px;

	font-weight: 700;

	transition:
			all
			.3s
			ease;
}

.home-news-more-link:hover {
	color: #ffffff;

	background: #5e87eb;

	border-color: #5e87eb;

	transform:
			translateY(
					-2px
			);
}


/* Empty */

.home-news-empty {
	padding: 25px;

	border:
			1px
			dashed
			#d8dee9;

	border-radius: 10px;

	color: #687080;

	text-align: center;
}


/* Responsive */

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

	.home-news-title h2 {
		font-size: 37px;
	}

}

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

	.home-news-title {
		margin-bottom: 32px;
	}

	.home-news-title h2 {
		font-size: 30px;
	}

	.home-news-title p {
		font-size: 15px;
	}

	.home-news-image img {
		height: auto;
	}

}
.yx-partner-area {
	position: relative;
	padding: 85px 0 90px;
	overflow: hidden;
}

.yx-partner-heading {
	max-width: 760px;
	margin: 0 auto 42px;
	text-align: center;
}

.yx-partner-kicker {
	display: block;
	margin-bottom: 11px;
	color: #5e87eb;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
}

.yx-partner-heading h2 {
	margin: 0 0 14px;
	color: #111a35;
	font-size: 42px;
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -1px;
}

.yx-partner-heading p {
	max-width: 680px;
	margin: 0 auto;
	color: #707887;
	font-size: 16px;
	line-height: 1.8;
}

.yx-partner-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 10px 0;
}

.yx-partner-slider::before,
.yx-partner-slider::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 4;
	width: 70px;
	pointer-events: none;
}

.yx-partner-slider::before {
	left: 0;
	background: linear-gradient(90deg, #f7f7f7 0%, rgba(247,247,247,0) 100%);
}

.yx-partner-slider::after {
	right: 0;
	background: linear-gradient(270deg, #f7f7f7 0%, rgba(247,247,247,0) 100%);
}

.yx-partner-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 24px;
	animation: yxPartnerScroll 42s linear infinite;
	will-change: transform;
}

.yx-partner-slider:hover .yx-partner-track {
	animation-play-state: paused;
}

@keyframes yxPartnerScroll {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - 12px)); }
}

.yx-partner-item {
	flex: 0 0 190px;
	width: 190px;
}

.yx-partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 110px;
	padding: 18px;
	border: 1px solid #e6eaf0;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 8px 24px rgba(18,34,70,.05);
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.yx-partner-logo:hover {
	transform: translateY(-5px);
	border-color: rgba(94,135,235,.32);
	box-shadow: 0 16px 34px rgba(18,34,70,.11);
}

.yx-partner-logo img {
	display: block;
	max-width: 100%;
	max-height: 72px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: .72;
	transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}

.yx-partner-logo:hover img {
	filter: grayscale(0%);
	opacity: 1;
	transform: scale(1.03);
}

.yx-partner-empty {
	padding: 22px 25px;
	border: 1px dashed #d7dde8;
	border-radius: 10px;
	background: #fff;
	color: #687080;
	text-align: center;
}

@media only screen and (max-width: 991px) {
	.yx-partner-heading h2 { font-size: 36px; }
	.yx-partner-item { flex-basis: 165px; width: 165px; }
	.yx-partner-logo { height: 100px; padding: 15px; }
}

@media only screen and (max-width: 767px) {
	.yx-partner-area { padding: 65px 0 70px; }
	.yx-partner-heading { margin-bottom: 30px; }
	.yx-partner-heading h2 { font-size: 30px; }
	.yx-partner-heading p { font-size: 15px; }
	.yx-partner-slider::before,
	.yx-partner-slider::after { width: 25px; }
	.yx-partner-item { flex-basis: 145px; width: 145px; }
	.yx-partner-logo { height: 90px; padding: 13px; }
	.yx-partner-logo img { max-height: 58px; }
	.yx-partner-track { animation-duration: 32s; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.yx-partner-track { animation: none; }
}


/**************************************
 ** SEO Content Overview Card
 **************************************/
.yx-content-overview {
    overflow: hidden;
    margin: 0 0 40px;
    border: 1px solid #d8e5f4;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(23, 54, 91, 0.08);
}

.yx-content-overview__header {
    position: relative;
    overflow: hidden;
    padding: 48px 52px 42px;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, #11b8df 0%, #1779e6 46%, #6c72f2 100%) 1;
    background: linear-gradient(135deg, #f4f9ff 0%, #eef6ff 100%);
}

.yx-content-overview__header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 92% 6%, rgba(25, 126, 232, 0.10), transparent 34%);
    pointer-events: none;
}

.yx-content-overview__rings {
    position: absolute;
    right: -88px;
    bottom: -150px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(45, 131, 225, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.yx-content-overview__rings::before,
.yx-content-overview__rings::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(45, 131, 225, 0.10);
    border-radius: 50%;
}

.yx-content-overview__rings::before {
    inset: 42px;
}

.yx-content-overview__rings::after {
    inset: 92px;
}

.yx-content-overview__kicker {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
    color: #1778e5;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 2.1px;
}

.yx-content-overview__kicker > span {
    display: inline-block;
    width: 40px;
    height: 2px;
    background: #13b6df;
}

.services-details-content .yx-content-overview h1 {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 0 20px;
    color: #102442;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.03em;
}

.yx-content-overview__summary {
    position: relative;
    z-index: 1;
    max-width: 770px;
    margin: 0;
    color: #536d8d;
    font-size: 17px;
    line-height: 1.95;
}

.yx-content-overview__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 26px;
    color: #7589a3;
    font-size: 13px;
    font-weight: 600;
}

.yx-content-overview__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.yx-content-overview__meta i {
    color: #7089a9;
    font-size: 13px;
}

.yx-content-overview__meta strong {
    color: #687f9c;
    font-weight: 700;
}

.yx-content-overview__body {
    padding: 42px 52px 50px;
    border-top: 1px solid #dfe9f5;
    background: #ffffff;
}

.yx-content-overview__content {
    color: #435c78;
    font-size: 17px;
    line-height: 1.95;
}

.yx-content-overview__content > p:first-child,
.yx-content-overview__content > .wp-block-group:first-child,
.yx-content-overview__lead {
    margin: 0 0 34px;
    padding: 26px 30px;
    border: 1px solid #cfe1f5;
    border-left: 5px solid #19b9df;
    border-radius: 14px;
    background: #f4f9ff;
    color: #365574;
    font-size: 17px;
    line-height: 1.9;
}

.yx-content-overview__content > p:first-child {
    margin-top: 0;
}

.yx-content-overview__content p {
    margin-bottom: 22px;
    color: #435c78;
    font-size: 17px;
    line-height: 1.95;
}

.yx-content-overview__content h2,
.yx-content-overview__content h3,
.yx-content-overview__content h4 {
    color: #173653;
    font-weight: 700;
    line-height: 1.35;
}

.yx-content-overview__content h2 {
    margin: 38px 0 18px;
    font-size: 27px;
}

.yx-content-overview__content h3 {
    margin: 32px 0 16px;
    font-size: 23px;
}

.yx-content-overview__content h4 {
    margin: 28px 0 14px;
    font-size: 20px;
}

.yx-content-overview__content ul,
.yx-content-overview__content ol {
    margin: 0 0 26px;
    padding-left: 24px;
}

.yx-content-overview__content li {
    margin-bottom: 10px;
    color: #435c78;
    font-size: 17px;
    line-height: 1.8;
}

.yx-content-overview__content a {
    color: #197ce4;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.yx-content-overview__content a:hover {
    color: #0faacb;
}

.yx-content-overview__content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

@media only screen and (max-width: 991px) {
    .yx-content-overview__header {
        padding: 40px 38px 36px;
    }
    .yx-content-overview__body {
        padding: 36px 38px 42px;
    }
    .services-details-content .yx-content-overview h1 {
        font-size: 33px;
    }
}

@media only screen and (max-width: 767px) {
    .yx-content-overview {
        border-radius: 14px;
    }
    .yx-content-overview__header {
        padding: 30px 24px 28px;
    }
    .yx-content-overview__body {
        padding: 28px 24px 34px;
    }
    .yx-content-overview__kicker {
        gap: 10px;
        margin-bottom: 16px;
        font-size: 11px;
        letter-spacing: 1.7px;
    }
    .yx-content-overview__kicker > span {
        width: 28px;
    }
    .services-details-content .yx-content-overview h1 {
        margin-bottom: 16px;
        font-size: 27px;
        line-height: 1.28;
    }
    .yx-content-overview__summary,
    .yx-content-overview__content p,
    .yx-content-overview__content li,
    .yx-content-overview__content > p:first-child,
    .yx-content-overview__lead {
        font-size: 15px;
    }
    .yx-content-overview__summary,
    .yx-content-overview__content p {
        line-height: 1.8;
    }
    .yx-content-overview__meta {
        flex-direction: column;
        gap: 9px;
        margin-top: 22px;
    }
    .yx-content-overview__content > p:first-child,
    .yx-content-overview__lead {
        padding: 20px 20px;
    }
    .yx-content-overview__content h2 {
        font-size: 23px;
    }
    .yx-content-overview__content h3 {
        font-size: 20px;
    }
    .yx-content-overview__rings {
        right: -145px;
        bottom: -165px;
    }
}


/** YANXUAN Dynamic Fan Factory Banner **/
.page-title-area.yx-fan-factory-banner {
    position: relative;
    height: 430px;
    overflow: hidden;
    isolation: isolate;
    background-image:
        radial-gradient(circle at 18% 25%, rgba(42, 201, 255, 0.26), transparent 28%),
        radial-gradient(circle at 82% 68%, rgba(94, 135, 235, 0.35), transparent 34%),
        linear-gradient(120deg, #071633 0%, #0b2b5d 43%, #0b4c89 72%, #0d78a8 100%);
    background-size: 100% 100%;
    background-position: center;
}

.page-title-area.yx-fan-factory-banner::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: 1;
    background:
        linear-gradient(90deg, rgba(5, 17, 43, 0.72) 0%, rgba(5, 22, 52, 0.36) 45%, rgba(4, 25, 57, 0.18) 100%),
        linear-gradient(180deg, rgba(2, 12, 31, 0.08) 0%, rgba(2, 12, 31, 0.42) 100%);
}

.page-title-area.yx-fan-factory-banner::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -12%;
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(700px) rotateX(62deg) translateY(15%);
    transform-origin: center bottom;
    animation: yxFactoryGridMove 12s linear infinite;
}

.yx-fan-factory-banner > .d-table {
    position: relative;
    z-index: 3;
}

.yx-factory-banner-content {
    position: relative;
    z-index: 4;
    margin-top: 34px;
}

.yx-factory-banner-content .yx-factory-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 8px 15px;
    border: 1px solid rgba(151, 224, 255, 0.45);
    border-radius: 999px;
    color: #bcecff;
    background: rgba(9, 49, 95, 0.42);
    box-shadow: inset 0 0 20px rgba(61, 181, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1;
}

.yx-factory-banner-content .yx-factory-kicker i {
    color: #57d8ff;
    font-size: 13px;
}

.yx-fan-factory-banner .page-title-content h2 {
    position: relative;
    color: #ffffff;
    font-size: 44px;
    line-height: 1.15;
    text-shadow: 0 5px 22px rgba(0, 0, 0, 0.24);
}

.yx-factory-subtitle {
    max-width: 780px;
    margin: 14px auto 0;
    color: rgba(232, 247, 255, 0.88);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.25px;
    line-height: 1.6;
}

.yx-fan-factory-banner .page-title-content ul {
    margin-top: 17px;
}

.yx-fan-factory-banner .page-title-content ul li,
.yx-fan-factory-banner .page-title-content ul li a {
    color: rgba(255, 255, 255, 0.92);
}

.yx-fan-factory-banner .page-title-content ul li a:hover {
    color: #70dcff;
}

.yx-factory-motion {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.yx-factory-icon {
    position: absolute;
    left: 3.5%;
    bottom: -42px;
    color: rgba(173, 230, 255, 0.09);
    font-size: 230px;
    line-height: 1;
    transform: skewX(-3deg);
}

.yx-fan-machine {
    position: absolute;
    right: 7.5%;
    top: 50%;
    width: 235px;
    height: 235px;
    transform: translateY(-47%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(46, 169, 233, 0.15) 0 39%, rgba(5, 29, 66, 0.12) 40% 100%);
    box-shadow: 0 0 70px rgba(62, 191, 255, 0.22), inset 0 0 38px rgba(141, 227, 255, 0.12);
}

.yx-fan-outer-ring,
.yx-fan-inner-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(167, 229, 255, 0.28);
}

.yx-fan-outer-ring {
    inset: 0;
    animation: yxRingPulse 3.2s ease-in-out infinite;
}

.yx-fan-inner-ring {
    inset: 24px;
    border-color: rgba(123, 213, 255, 0.18);
    animation: yxRingPulse 3.2s ease-in-out 0.55s infinite;
}

.yx-fan-rotor {
    position: absolute;
    top: 50%;
    left: 50%;
    color: rgba(174, 232, 255, 0.72);
    font-size: 150px;
    line-height: 1;
    filter: drop-shadow(0 0 15px rgba(97, 208, 255, 0.30));
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    animation: yxFanRotor 4.6s linear infinite;
}

.yx-airflow {
    position: absolute;
    right: 19%;
    height: 34px;
    width: 180px;
    border-top: 2px solid rgba(133, 222, 255, 0.38);
    border-radius: 50%;
    opacity: 0;
    animation: yxAirFlow 3.6s ease-in-out infinite;
}

.yx-airflow-one { top: 34%; animation-delay: 0s; }
.yx-airflow-two { top: 47%; width: 215px; animation-delay: 0.7s; }
.yx-airflow-three { top: 60%; width: 165px; animation-delay: 1.4s; }

.yx-factory-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(30px);
    opacity: 0.20;
    background: #48caff;
    animation: yxFactoryGlow 7s ease-in-out infinite alternate;
}

.yx-glow-one { left: -70px; top: 40px; }
.yx-glow-two { right: 13%; bottom: -170px; width: 420px; height: 420px; animation-delay: 1.2s; }

.yx-spark {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #9ce9ff;
    box-shadow: 0 0 14px rgba(126, 226, 255, 0.75);
    opacity: 0.18;
    animation: yxSparkFloat 6s ease-in-out infinite;
}

.yx-spark-one { left: 20%; top: 27%; animation-delay: 0s; }
.yx-spark-two { left: 72%; top: 22%; animation-delay: 1.7s; }
.yx-spark-three { left: 62%; bottom: 21%; animation-delay: 3.1s; }

@keyframes yxFanRotor {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes yxRingPulse {
    0%, 100% { transform: scale(0.96); opacity: 0.38; }
    50% { transform: scale(1.04); opacity: 0.92; }
}

@keyframes yxAirFlow {
    0% { transform: translateX(34px) scaleX(0.58); opacity: 0; }
    25% { opacity: 0.62; }
    70% { opacity: 0.34; }
    100% { transform: translateX(-90px) scaleX(1.10); opacity: 0; }
}

@keyframes yxFactoryGlow {
    from { transform: translate3d(0, 0, 0) scale(0.92); }
    to { transform: translate3d(40px, -24px, 0) scale(1.08); }
}

@keyframes yxSparkFloat {
    0%, 100% { transform: translateY(10px) scale(0.8); opacity: 0.16; }
    50% { transform: translateY(-28px) scale(1.25); opacity: 0.70; }
}

@keyframes yxFactoryGridMove {
    from { background-position: 0 0, 0 0; }
    to { background-position: 64px 64px, 64px 64px; }
}

@media only screen and (max-width: 1199px) {
    .yx-fan-machine { right: 3.5%; width: 205px; height: 205px; }
    .yx-fan-rotor { font-size: 130px; }
    .yx-factory-icon { left: 1%; font-size: 190px; }
}

@media only screen and (max-width: 991px) {
    .page-title-area.yx-fan-factory-banner { height: 390px; }
    .yx-fan-machine { right: -35px; width: 185px; height: 185px; opacity: 0.55; }
    .yx-fan-rotor { font-size: 116px; }
    .yx-factory-icon { left: -18px; font-size: 160px; }
    .yx-airflow { right: 9%; opacity: 0.35; }
    .yx-fan-factory-banner .page-title-content h2 { font-size: 40px; }
}

@media only screen and (max-width: 767px) {
    .page-title-area.yx-fan-factory-banner { height: 360px; }
    .yx-factory-banner-content { margin-top: 26px; }
    .yx-factory-banner-content .yx-factory-kicker {
        padding: 7px 11px;
        font-size: 10px;
        letter-spacing: 1.2px;
    }
    .yx-fan-factory-banner .page-title-content h2 { font-size: 34px; }
    .yx-factory-subtitle { max-width: 92%; font-size: 13px; }
    .yx-fan-machine {
        right: -58px;
        top: 52%;
        width: 150px;
        height: 150px;
        opacity: 0.28;
    }
    .yx-fan-rotor { font-size: 94px; }
    .yx-factory-icon { left: -36px; bottom: -20px; font-size: 125px; opacity: 0.6; }
    .yx-airflow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .yx-fan-rotor,
    .yx-fan-outer-ring,
    .yx-fan-inner-ring,
    .yx-airflow,
    .yx-factory-glow,
    .yx-spark,
    .page-title-area.yx-fan-factory-banner::after {
        animation: none !important;
    }
}
/** YANXUAN Manufacturing Process Fan Banner **/
.page-title-area.yx-manufacturing-banner {
    position: relative;
    height: 470px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 82% 46%, rgba(28, 165, 224, 0.22), transparent 26%),
        radial-gradient(circle at 12% 20%, rgba(83, 120, 255, 0.18), transparent 32%),
        linear-gradient(118deg, #07111f 0%, #0b1f35 42%, #0c3553 70%, #0a5d77 100%);
}

.page-title-area.yx-manufacturing-banner::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(3, 13, 25, 0.82) 0%, rgba(5, 22, 38, 0.54) 47%, rgba(4, 25, 39, 0.12) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0.32));
}

.page-title-area.yx-manufacturing-banner::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, #16c2d9 0%, #2f86ef 45%, #77ddff 73%, #16c2d9 100%);
    background-size: 220% 100%;
    animation: yxMfgAccent 5s linear infinite;
}

.yx-manufacturing-banner > .d-table {
    position: relative;
    z-index: 5;
}

.yx-mfg-content {
    position: relative;
    z-index: 5;
    max-width: 820px;
    margin: 24px 0 0;
    text-align: left;
}

.yx-mfg-content .yx-mfg-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    margin-bottom: 17px;
    border: 1px solid rgba(91, 218, 246, 0.35);
    border-radius: 4px;
    color: #9eeaff;
    background: rgba(7, 42, 63, 0.62);
    box-shadow: inset 0 0 18px rgba(58, 204, 239, 0.06);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.7px;
    line-height: 1;
}

.yx-mfg-kicker i {
    color: #35c7e5;
}

.yx-manufacturing-banner .page-title-content h2,
.yx-manufacturing-banner .page-title-content h1 {
    color: #fff;
    margin: 0;
    font-size: 46px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-shadow: 0 5px 24px rgba(0,0,0,0.28);
}

.yx-mfg-subtitle {
    max-width: 760px;
    margin: 15px 0 0;
    color: rgba(224, 240, 248, 0.88);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
}

.yx-mfg-process {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 20px 0 0;
}

.yx-mfg-process span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 11px;
    border: 1px solid rgba(105, 205, 232, 0.18);
    border-radius: 5px;
    color: rgba(237, 249, 252, 0.94);
    background: rgba(9, 45, 65, 0.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.yx-mfg-process span b {
    color: #55d7ee;
    font-size: 10px;
    letter-spacing: 0.6px;
}

.yx-mfg-process > i {
    color: rgba(110, 215, 239, 0.43);
    font-size: 9px;
}

.yx-manufacturing-banner .page-title-content ul {
    justify-content: flex-start;
    margin-top: 18px;
}

.yx-manufacturing-banner .page-title-content ul li,
.yx-manufacturing-banner .page-title-content ul li a {
    color: rgba(255,255,255,0.88);
}

.yx-manufacturing-banner .page-title-content ul li a:hover {
    color: #6bddf2;
}

.yx-mfg-scene {
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.yx-mfg-grid {
    position: absolute;
    inset: 0;
    opacity: 0.11;
    background-image:
        linear-gradient(rgba(156, 224, 240, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(156, 224, 240, 0.14) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent 2%, #000 45%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 45%, #000 100%);
    animation: yxMfgGrid 14s linear infinite;
}

.yx-mfg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(42px);
    opacity: 0.22;
    background: #29c3e4;
    animation: yxMfgGlow 6.5s ease-in-out infinite alternate;
}

.yx-mfg-glow-one {
    width: 280px;
    height: 280px;
    left: 10%;
    top: -115px;
}

.yx-mfg-glow-two {
    width: 430px;
    height: 430px;
    right: -85px;
    bottom: -245px;
    background: #2484d8;
    animation-delay: 1.3s;
}

.yx-mfg-scan {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 3%;
    width: 360px;
    height: 100%;
    opacity: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(94, 224, 247, 0.08) 48%, rgba(157, 241, 255, 0.26) 50%, rgba(94, 224, 247, 0.08) 52%, transparent 100%);
    transform: translateX(240px) skewX(-8deg);
    animation: yxMfgScan 5.4s ease-in-out infinite;
}

.yx-mfg-fan-unit {
    position: absolute;
    z-index: 3;
    right: 6.5%;
    top: 49%;
    width: 270px;
    height: 270px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(9, 62, 87, 0.28) 0 43%, rgba(7, 32, 50, 0.18) 44% 70%, rgba(4, 18, 29, 0.10) 71% 100%);
    box-shadow:
        0 0 0 1px rgba(119, 218, 239, 0.12),
        0 0 70px rgba(46, 182, 221, 0.18),
        inset 0 0 48px rgba(90, 216, 242, 0.08);
}

.yx-mfg-fan-housing,
.yx-mfg-fan-ring {
    position: absolute;
    border-radius: 50%;
}

.yx-mfg-fan-housing {
    inset: 5px;
    border: 10px solid rgba(134, 207, 224, 0.10);
    border-top-color: rgba(110, 219, 239, 0.32);
    border-right-color: rgba(84, 174, 217, 0.18);
    animation: yxMfgHousing 9s linear infinite;
}

.yx-mfg-fan-ring {
    inset: 22px;
    border: 1px solid rgba(123, 224, 245, 0.30);
    box-shadow: inset 0 0 20px rgba(86, 203, 230, 0.08);
}

.yx-mfg-fan-ring-inner {
    inset: 44px;
    border-color: rgba(120, 217, 239, 0.15);
}

.yx-mfg-fan-rotor {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    color: rgba(164, 229, 244, 0.74);
    font-size: 172px;
    line-height: 1;
    filter: drop-shadow(0 0 18px rgba(75, 210, 237, 0.30));
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    animation: yxMfgRotor 3.2s linear infinite;
}

.yx-mfg-hub {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%);
    border: 6px solid rgba(166, 235, 248, 0.56);
    border-radius: 50%;
    background: #0b2638;
    box-shadow: 0 0 16px rgba(101, 223, 245, 0.35);
}

.yx-mfg-gear {
    position: absolute;
    z-index: 2;
    color: rgba(125, 216, 234, 0.18);
    line-height: 1;
}

.yx-mfg-gear-one {
    right: 28.5%;
    bottom: 56px;
    font-size: 76px;
    animation: yxMfgGear 11s linear infinite;
}

.yx-mfg-gear-two {
    right: 24.2%;
    bottom: 30px;
    font-size: 46px;
    animation: yxMfgGearReverse 8s linear infinite;
}

.yx-mfg-conveyor {
    position: absolute;
    z-index: 2;
    right: 2.5%;
    bottom: 16px;
    width: 390px;
    height: 29px;
    border-top: 3px solid rgba(93, 190, 215, 0.15);
    border-bottom: 3px solid rgba(93, 190, 215, 0.10);
    overflow: hidden;
}

.yx-mfg-conveyor span {
    position: absolute;
    top: 6px;
    width: 30px;
    height: 11px;
    border: 1px solid rgba(128, 218, 238, 0.24);
    border-radius: 2px;
    background: rgba(38, 121, 151, 0.13);
    animation: yxMfgConveyor 7s linear infinite;
}

.yx-mfg-conveyor span:nth-child(1) { left: -20px; animation-delay: 0s; }
.yx-mfg-conveyor span:nth-child(2) { left: 55px; animation-delay: -1.4s; }
.yx-mfg-conveyor span:nth-child(3) { left: 130px; animation-delay: -2.8s; }
.yx-mfg-conveyor span:nth-child(4) { left: 205px; animation-delay: -4.2s; }
.yx-mfg-conveyor span:nth-child(5) { left: 280px; animation-delay: -5.6s; }

.yx-mfg-spark {
    position: absolute;
    z-index: 4;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #a9efff;
    box-shadow: 0 0 14px rgba(138, 232, 255, 0.78);
    opacity: 0;
    animation: yxMfgSpark 2.8s ease-out infinite;
}

.yx-mfg-spark-one { right: 11%; top: 25%; animation-delay: 0s; }
.yx-mfg-spark-two { right: 20%; top: 38%; animation-delay: 0.8s; }
.yx-mfg-spark-three { right: 8%; bottom: 29%; animation-delay: 1.6s; }
.yx-mfg-spark-four { right: 27%; bottom: 24%; animation-delay: 2.1s; }

@keyframes yxMfgRotor {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes yxMfgHousing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes yxMfgGear {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes yxMfgGearReverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

@keyframes yxMfgConveyor {
    from { transform: translateX(-15px); }
    to { transform: translateX(92px); }
}

@keyframes yxMfgScan {
    0%, 12% { opacity: 0; transform: translateX(250px) skewX(-8deg); }
    28% { opacity: 0.78; }
    65% { opacity: 0.28; }
    82%, 100% { opacity: 0; transform: translateX(-330px) skewX(-8deg); }
}

@keyframes yxMfgSpark {
    0% { opacity: 0; transform: translate(0, 10px) scale(0.65); }
    18% { opacity: 0.88; }
    100% { opacity: 0; transform: translate(-28px, -38px) scale(1.15); }
}

@keyframes yxMfgGrid {
    from { background-position: 0 0, 0 0; }
    to { background-position: 48px 48px, 48px 48px; }
}

@keyframes yxMfgGlow {
    from { transform: translate3d(0,0,0) scale(0.94); }
    to { transform: translate3d(32px,-18px,0) scale(1.08); }
}

@keyframes yxMfgAccent {
    from { background-position: 0 0; }
    to { background-position: 220% 0; }
}

@media only screen and (max-width: 1199px) {
    .yx-mfg-fan-unit { right: 2%; width: 230px; height: 230px; }
    .yx-mfg-fan-rotor { font-size: 145px; }
    .yx-mfg-gear-one { right: 25%; }
    .yx-mfg-gear-two { right: 20%; }
    .yx-mfg-conveyor { width: 315px; }
    .yx-mfg-content { max-width: 735px; }
}

@media only screen and (max-width: 991px) {
    .page-title-area.yx-manufacturing-banner { height: 440px; }
    .yx-mfg-content { max-width: 78%; }
    .yx-manufacturing-banner .page-title-content h2,
.yx-manufacturing-banner .page-title-content h1 { font-size: 40px; }
    .yx-mfg-fan-unit { right: -60px; width: 205px; height: 205px; opacity: 0.58; }
    .yx-mfg-fan-rotor { font-size: 128px; }
    .yx-mfg-gear { opacity: 0.55; }
    .yx-mfg-conveyor { right: -45px; width: 270px; opacity: 0.55; }
    .yx-mfg-process { gap: 5px; }
    .yx-mfg-process span { padding: 0 8px; font-size: 11px; }
}

@media only screen and (max-width: 767px) {
    .page-title-area.yx-manufacturing-banner { height: 455px; }
    .yx-mfg-content {
        max-width: 100%;
        margin-top: 20px;
        text-align: center;
    }
    .yx-mfg-content .yx-mfg-kicker {
        font-size: 9px;
        letter-spacing: 1.15px;
    }
    .yx-manufacturing-banner .page-title-content h2,
.yx-manufacturing-banner .page-title-content h1 { font-size: 33px; }
    .yx-mfg-subtitle {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        font-size: 12.5px;
        line-height: 1.62;
    }
    .yx-mfg-process {
        justify-content: center;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }
    .yx-mfg-process > i { display: none; }
    .yx-mfg-process span { height: 30px; font-size: 10px; padding: 0 8px; }
    .yx-manufacturing-banner .page-title-content ul { justify-content: center; margin-top: 15px; }
    .yx-mfg-fan-unit {
        right: -68px;
        top: 50%;
        width: 170px;
        height: 170px;
        opacity: 0.18;
    }
    .yx-mfg-fan-rotor { font-size: 106px; }
    .yx-mfg-conveyor,
    .yx-mfg-gear { display: none; }
    .yx-mfg-grid { opacity: 0.06; }
}

@media (prefers-reduced-motion: reduce) {
    .page-title-area.yx-manufacturing-banner::after,
    .yx-mfg-grid,
    .yx-mfg-glow,
    .yx-mfg-scan,
    .yx-mfg-fan-housing,
    .yx-mfg-fan-rotor,
    .yx-mfg-gear,
    .yx-mfg-conveyor span,
    .yx-mfg-spark {
        animation: none !important;
    }
}


/** Single post manufacturing banner: SEO title handling **/
.yx-manufacturing-banner .yx-single-post-title {
    max-width: 800px;
    margin: 0;
    color: #fff;
    font-weight: 700;
    overflow-wrap: anywhere;
}
@media only screen and (max-width: 991px) {
    .yx-manufacturing-banner .yx-single-post-title { max-width: 680px; }
}
@media only screen and (max-width: 767px) {
    .yx-manufacturing-banner .yx-single-post-title {
        max-width: 100%;
        font-size: 30px;
        line-height: 1.18;
    }
}

/**************************************
 ** Single Article SEO Overview / TOC
 **************************************/
.yx-article-overview {
    position: relative;
    overflow: hidden;
    margin: 0 0 42px;
    border: 1px solid #dce5ef;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 16px 42px rgba(25, 54, 85, 0.07);
}

.yx-article-overview__hero {
    position: relative;
    overflow: hidden;
    padding: 38px 38px 36px;
    background:
        radial-gradient(circle at 96% 0%, rgba(94, 135, 235, 0.12), transparent 30%),
        linear-gradient(135deg, #f9fbfe 0%, #f4f8fd 58%, #f7fbff 100%);
}

.yx-article-overview__hero::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, #12b7df 0%, #2c7fe7 52%, #6c72ef 100%);
}

.yx-article-overview__hero::after {
    content: '';
    position: absolute;
    right: -78px;
    top: -94px;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(47, 126, 226, 0.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(47, 126, 226, 0.035),
        0 0 0 70px rgba(47, 126, 226, 0.02);
    pointer-events: none;
}

.yx-article-overview__accent {
    display: inline-block;
    width: 36px;
    height: 2px;
    margin-right: 10px;
    vertical-align: middle;
    background: #14b8df;
}

.yx-article-overview__kicker,
.yx-article-toc__kicker {
    position: relative;
    z-index: 1;
    display: inline-block;
    color: #1f74d8;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blog-details-desc .yx-article-overview h2 {
    position: relative;
    z-index: 1;
    margin: 13px 0 24px;
    color: #15283d;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.yx-article-overview__summary {
    position: relative;
    z-index: 1;
    margin: 0 0 28px;
    padding: 20px 24px;
    border: 1px solid #d9e8f7;
    border-left: 4px solid #2c82e8;
    border-radius: 0 14px 14px 0;
    background: #eef6ff;
}

.yx-article-overview__summary p {
    margin: 0;
    color: #405b77;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.85;
}

.yx-article-overview__meta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.yx-article-meta-card {
    min-width: 0;
    padding: 16px 17px;
    border: 1px solid #dfe6ee;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
}

.yx-article-meta-card > span {
    display: block;
    margin-bottom: 5px;
    color: #7a8899;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.yx-article-meta-card strong,
.yx-article-meta-card time,
.yx-article-meta-card a {
    display: block;
    overflow: hidden;
    color: #1e3045;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-overflow: ellipsis;
}

.yx-article-meta-card a {
    color: #246fd0;
}

.yx-article-meta-card a:hover {
    color: #11a8cf;
}

.yx-article-toc {
    margin: 0;
    padding: 32px 38px 36px;
    border-top: 1px solid #e1e8f0;
    background: #ffffff;
}

.blog-details-desc .yx-article-toc h2 {
    margin: 10px 0 22px;
    color: #15283d;
    font-size: 27px;
    font-weight: 800;
    line-height: 1.25;
}

.yx-article-toc__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.yx-article-toc__item {
    min-width: 0;
    margin: 0;
}

.yx-article-toc__item a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 4px;
    border-radius: 8px;
    color: #42566d;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.45;
}

.yx-article-toc__item a:hover {
    color: #246fd0;
    background: #f5f9fe;
    transform: translateX(2px);
}

.yx-article-toc__number {
    flex: 0 0 25px;
    color: #2a7fe0;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.65;
}

.yx-article-toc__text {
    min-width: 0;
}

.yx-article-toc__item--h3 a {
    padding-left: 17px;
    color: #60748a;
    font-size: 13px;
    font-weight: 600;
}

.yx-article-toc__item--h3 .yx-article-toc__number {
    color: #8aa3bd;
}

.yx-seo-article-content {
    margin-top: 0 !important;
}

.yx-seo-article-content h2,
.yx-seo-article-content h3 {
    scroll-margin-top: 120px;
}

.yx-seo-article-content h2 {
    margin-top: 42px;
    margin-bottom: 16px;
    color: #18334f;
    font-size: 27px;
    font-weight: 750;
}

.yx-seo-article-content h3 {
    margin-top: 30px !important;
    margin-bottom: 14px !important;
    color: #203c57;
    font-size: 22px !important;
    font-weight: 700;
}

.yx-seo-article-content p,
.yx-seo-article-content li {
    color: #53677d;
    font-size: 16px;
    line-height: 1.9;
}

.yx-seo-article-content p {
    margin-bottom: 20px;
}

@media only screen and (max-width: 991px) {
    .yx-article-overview__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media only screen and (max-width: 767px) {
    .yx-article-overview {
        margin-bottom: 32px;
        border-radius: 14px;
    }

    .yx-article-overview__hero {
        padding: 28px 22px 26px;
    }

    .blog-details-desc .yx-article-overview h2 {
        margin: 10px 0 18px;
        font-size: 28px;
    }

    .yx-article-overview__summary {
        margin-bottom: 20px;
        padding: 17px 18px;
    }

    .yx-article-overview__summary p {
        font-size: 15px;
        line-height: 1.75;
    }

    .yx-article-overview__meta {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .yx-article-meta-card {
        padding: 13px 14px;
    }

    .yx-article-toc {
        padding: 26px 22px 28px;
    }

    .blog-details-desc .yx-article-toc h2 {
        font-size: 24px;
    }

    .yx-article-toc__list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .yx-article-toc__item--h3 a {
        padding-left: 13px;
    }
}

@media only screen and (max-width: 480px) {
    .yx-article-overview__meta {
        grid-template-columns: 1fr;
    }
}

/**************************************
 ** - Custom Fan Inquiry Form
 **************************************/
.yx-fan-inquiry {
    margin-top: 48px;
    padding: 40px 38px 34px;
    border: 1px solid #dce7f2;
    border-radius: 22px;
    background:
        radial-gradient(circle at 100% 0%, rgba(45, 132, 232, 0.08), transparent 33%),
        linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 48px rgba(24, 57, 92, 0.06);
    overflow: hidden;
    position: relative;
}

.yx-fan-inquiry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #20b8df, #2d7eea 55%, #6c75ee);
}

.yx-fan-inquiry__header {
    margin-bottom: 30px;
}

.yx-fan-inquiry__kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f75d6;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.yx-fan-inquiry__kicker i {
    font-size: 12px;
}

.blog-details-desc .yx-fan-inquiry h2 {
    margin: 11px 0 12px;
    color: #15283d;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.yx-fan-inquiry__header p {
    max-width: 760px;
    margin: 0;
    color: #60748a;
    font-size: 15px;
    line-height: 1.8;
}

.yx-fan-inquiry__form {
    margin: 0;
}

.yx-fan-inquiry__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}

.yx-fan-field {
    min-width: 0;
}

.yx-fan-field--full {
    grid-column: 1 / -1;
}

.yx-fan-field label {
    display: block;
    margin-bottom: 9px;
    color: #31465f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

.yx-fan-field label span {
    color: #2381dd;
}

.yx-fan-field input,
.yx-fan-field select,
.yx-fan-field textarea {
    width: 100%;
    border: 1px solid #d9e2ec;
    border-radius: 11px;
    background: #ffffff;
    color: #20344a;
    font-family: 'Kumbh Sans', sans-serif;
    font-size: 15px;
    font-weight: 400;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.yx-fan-field input,
.yx-fan-field select {
    height: 56px;
    padding: 0 16px;
}

.yx-fan-field select {
    cursor: pointer;
}

.yx-fan-field textarea {
    min-height: 170px;
    padding: 15px 16px;
    line-height: 1.7;
    resize: vertical;
}

.yx-fan-field input::placeholder,
.yx-fan-field textarea::placeholder {
    color: #98a6b6;
}

.yx-fan-field input:focus,
.yx-fan-field select:focus,
.yx-fan-field textarea:focus {
    border-color: #2b82e7;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(43, 130, 231, 0.10);
}

.yx-fan-inquiry__actions {
    margin-top: 26px;
}

.yx-fan-inquiry__submit {
    min-height: 54px;
    padding: 14px 27px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #2386e7, #315ed9);
    color: #ffffff;
    font-family: 'Kumbh Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 10px 24px rgba(43, 112, 216, 0.22);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.yx-fan-inquiry__submit i {
    margin-left: 9px;
    font-size: 12px;
}

.yx-fan-inquiry__submit:hover,
.yx-fan-inquiry__submit:focus {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(43, 112, 216, 0.28);
    filter: brightness(1.03);
}

.yx-fan-inquiry__privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e7edf4;
    color: #657a90;
    font-size: 13px;
    line-height: 1.65;
}

.yx-fan-inquiry__privacy i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #2c7fdf;
    font-size: 15px;
}

.yx-fan-inquiry__notice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 26px;
    padding: 16px 18px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.55;
}

.yx-fan-inquiry__notice i {
    margin-top: 2px;
    font-size: 17px;
}

.yx-fan-inquiry__notice strong,
.yx-fan-inquiry__notice span {
    display: block;
}

.yx-fan-inquiry__notice strong {
    margin-bottom: 3px;
    font-weight: 700;
}

.yx-fan-inquiry__notice ul {
    margin: 5px 0 0;
    padding-left: 18px;
    list-style: disc;
}

.yx-fan-inquiry__notice--success {
    border: 1px solid #ccebdc;
    background: #f0fbf6;
    color: #236c4a;
}

.yx-fan-inquiry__notice--error {
    border: 1px solid #f3d2d2;
    background: #fff6f6;
    color: #954343;
}

.yx-fan-inquiry__honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media only screen and (max-width: 767px) {
    .yx-fan-inquiry {
        margin-top: 36px;
        padding: 30px 22px 26px;
        border-radius: 16px;
    }

    .blog-details-desc .yx-fan-inquiry h2 {
        font-size: 27px;
    }

    .yx-fan-inquiry__grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .yx-fan-field--full {
        grid-column: auto;
    }

    .yx-fan-field input,
    .yx-fan-field select {
        height: 52px;
    }

    .yx-fan-field textarea {
        min-height: 155px;
    }

    .yx-fan-inquiry__submit {
        width: 100%;
    }
}

/* Contact Form 7 integration for the custom fan inquiry block */
.yx-fan-inquiry__cf7 .wpcf7,
.yx-fan-inquiry__cf7 .wpcf7-form,
.yx-fan-inquiry__cf7 .yx-fan-inquiry__form {
    margin: 0;
}

.yx-fan-inquiry__cf7 .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

.yx-fan-inquiry__cf7 .wpcf7-form-control-wrap input,
.yx-fan-inquiry__cf7 .wpcf7-form-control-wrap select,
.yx-fan-inquiry__cf7 .wpcf7-form-control-wrap textarea {
    margin: 0;
}

.yx-fan-inquiry__cf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 7px;
    color: #b63d3d;
    font-size: 12px;
    line-height: 1.45;
}

.yx-fan-inquiry__cf7 .wpcf7-response-output {
    margin: 22px 0 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #d7e5f4 !important;
    border-radius: 11px;
    background: #f5f9fd;
    color: #38516b;
    font-size: 13px;
    line-height: 1.6;
}

.yx-fan-inquiry__cf7 form.sent .wpcf7-response-output {
    border-color: #ccebdc !important;
    background: #f0fbf6;
    color: #236c4a;
}

.yx-fan-inquiry__cf7 form.invalid .wpcf7-response-output,
.yx-fan-inquiry__cf7 form.unaccepted .wpcf7-response-output,
.yx-fan-inquiry__cf7 form.payment-required .wpcf7-response-output {
    border-color: #f3d2d2 !important;
    background: #fff6f6;
    color: #954343;
}

.yx-fan-inquiry__cf7 .wpcf7-spinner {
    margin: 0 0 0 12px;
    vertical-align: middle;
}

.yx-fan-inquiry__cf7 .wpcf7-submit:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}

/**************************************
 ** - Compact CF7 Fan Inquiry + Clear Status
 **************************************/
/* Reduce the vertical whitespace added by CF7/theme defaults. */
.yx-fan-inquiry__cf7 .wpcf7-form,
.yx-fan-inquiry__cf7 .wpcf7-form p,
.yx-fan-inquiry__cf7 .yx-fan-field p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.yx-fan-inquiry__cf7 .yx-fan-field > br,
.yx-fan-inquiry__cf7 .yx-fan-field label + br {
    display: none !important;
}

.yx-fan-inquiry__cf7 .yx-fan-inquiry__grid {
    gap: 14px 18px !important;
}

.yx-fan-inquiry__cf7 .yx-fan-field label {
    margin: 0 0 6px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

.yx-fan-inquiry__cf7 .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.yx-fan-inquiry__cf7 .yx-fan-field input,
.yx-fan-inquiry__cf7 .yx-fan-field select {
    height: 50px !important;
    min-height: 50px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    line-height: 50px !important;
}

.yx-fan-inquiry__cf7 .yx-fan-field select {
    line-height: normal !important;
}

.yx-fan-inquiry__cf7 .yx-fan-field textarea {
    min-height: 132px !important;
    height: 132px;
    padding: 12px 14px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.yx-fan-inquiry__cf7 .yx-fan-inquiry__actions {
    margin-top: 18px !important;
}

.yx-fan-inquiry__cf7 .yx-fan-inquiry__submit,
.yx-fan-inquiry__cf7 input.wpcf7-submit.yx-fan-inquiry__submit {
    min-height: 50px !important;
    padding: 12px 25px !important;
    font-size: 14px !important;
}

.yx-fan-inquiry__cf7 .yx-fan-inquiry__privacy {
    margin-top: 20px !important;
    padding-top: 16px !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}

.yx-fan-inquiry__cf7 .wpcf7-not-valid-tip {
    margin-top: 5px !important;
    font-size: 11.5px !important;
}

/* Make Contact Form 7 delivery status impossible to miss. */
.yx-fan-inquiry__cf7 .wpcf7-response-output {
    position: relative;
    margin: 18px 0 0 !important;
    padding: 15px 18px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
}

.yx-fan-inquiry__cf7 form.sent .wpcf7-response-output {
    min-height: 60px;
    padding: 18px 20px 18px 62px !important;
    border: 1px solid #82d3a6 !important;
    border-left: 4px solid #20a65a !important;
    background: linear-gradient(135deg, #e9faef 0%, #f7fff9 100%) !important;
    color: #145c35 !important;
    box-shadow: 0 10px 26px rgba(32, 166, 90, 0.12);
}

.yx-fan-inquiry__cf7 form.sent .wpcf7-response-output::before {
    content: "\2713";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    background: #20a65a;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 30px;
    text-align: center;
    box-shadow: 0 5px 12px rgba(32, 166, 90, 0.22);
}

.yx-fan-inquiry__cf7 form.invalid .wpcf7-response-output,
.yx-fan-inquiry__cf7 form.unaccepted .wpcf7-response-output,
.yx-fan-inquiry__cf7 form.payment-required .wpcf7-response-output,
.yx-fan-inquiry__cf7 form.failed .wpcf7-response-output,
.yx-fan-inquiry__cf7 form.aborted .wpcf7-response-output,
.yx-fan-inquiry__cf7 form.spam .wpcf7-response-output {
    padding-left: 50px !important;
    border: 1px solid #efaaaa !important;
    border-left: 4px solid #d84a4a !important;
    background: #fff5f5 !important;
    color: #8e3030 !important;
}

.yx-fan-inquiry__cf7 form.invalid .wpcf7-response-output::before,
.yx-fan-inquiry__cf7 form.unaccepted .wpcf7-response-output::before,
.yx-fan-inquiry__cf7 form.payment-required .wpcf7-response-output::before,
.yx-fan-inquiry__cf7 form.failed .wpcf7-response-output::before,
.yx-fan-inquiry__cf7 form.aborted .wpcf7-response-output::before,
.yx-fan-inquiry__cf7 form.spam .wpcf7-response-output::before {
    content: "!";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background: #d84a4a;
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

@media only screen and (max-width: 767px) {
    .yx-fan-inquiry__cf7 .yx-fan-inquiry__grid {
        gap: 13px !important;
    }

    .yx-fan-inquiry__cf7 .yx-fan-field input,
    .yx-fan-inquiry__cf7 .yx-fan-field select {
        height: 48px !important;
        min-height: 48px !important;
    }

    .yx-fan-inquiry__cf7 .yx-fan-field textarea {
        min-height: 125px !important;
        height: 125px;
    }

    .yx-fan-inquiry__cf7 .yx-fan-inquiry__actions {
        margin-top: 16px !important;
    }

    .yx-fan-inquiry__cf7 form.sent .wpcf7-response-output {
        padding: 16px 16px 16px 56px !important;
    }

    .yx-fan-inquiry__cf7 form.sent .wpcf7-response-output::before {
        left: 15px;
    }
}
/*video*/

.fan-video-page{padding:80px 0;background:#f7faff}
.video-header{text-align:center;margin-bottom:50px}
.video-header h1{font-size:42px;color:#162238}
.video-header p{color:#64748b;font-size:18px}

.fan-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.fan-video-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 15px 40px rgba(0,0,0,.08);transition:.35s}
.fan-video-card:hover{transform:translateY(-8px)}

.video-thumb{height:260px;position:relative;overflow:hidden}
.video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,26,56,.08),rgba(9,26,56,.22));pointer-events:none}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:.5s}
.fan-video-card:hover img{transform:scale(1.08)}

.play-video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;border:0;background:linear-gradient(135deg,#29b7ff 0%,#0d92ea 100%);color:#fff;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 42px rgba(13,146,234,.38),0 0 0 10px rgba(255,255,255,.18);animation:playBreath 2.4s ease-in-out infinite;transition:transform .25s ease,box-shadow .25s ease}
.play-video:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 22px 48px rgba(13,146,234,.48),0 0 0 14px rgba(255,255,255,.22)}
.play-video:focus-visible{outline:3px solid rgba(255,255,255,.85);outline-offset:4px}
.play-video::before,.play-video::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(41,183,255,.5);z-index:-1}
.play-video::before{animation:rippleOne 2.2s ease-out infinite}
.play-video::after{animation:rippleTwo 2.2s ease-out infinite .8s}
.play-video .play-icon{font-size:40px;line-height:1;position:relative;left:4px;text-shadow:0 8px 16px rgba(0,0,0,.12);animation:iconPulse 2.4s ease-in-out infinite}
.play-video .play-icon::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),rgba(255,255,255,0));z-index:-1}
.play-video::marker{display:none}

.play-cta{position:absolute;left:50%;top:calc(50% + 78px);transform:translateX(-50%);z-index:2;background:rgba(255,255,255,.92);color:#0e7fca;font-size:13px;font-weight:700;letter-spacing:.03em;padding:8px 16px;border-radius:999px;box-shadow:0 10px 24px rgba(9,26,56,.16);animation:ctaFloat 2s ease-in-out infinite;white-space:nowrap}

.video-label{position:absolute;top:20px;left:20px;background:#34445b;color:#fff;padding:8px 18px;border-radius:20px;z-index:2}

.video-content{padding:30px}
.video-content h2{font-size:24px}
.video-content p{color:#64748b;line-height:1.8}

.video-btn{display:inline-block;background:#169fe8;color:white;padding:12px 28px;border-radius:30px;cursor:pointer}

.video-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center}
.video-box{width:80%;position:relative}
.video-box video{width:100%}
.close-video{position:absolute;right:0;top:-50px;font-size:40px;background:none;border:0;color:#fff}

@keyframes playBreath{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes rippleOne{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.55);opacity:0}}
@keyframes rippleTwo{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.85);opacity:0}}
@keyframes ctaFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}}

@media(max-width:900px){.fan-video-grid{grid-template-columns:1fr}.play-video{width:96px;height:96px}.play-cta{top:calc(50% + 68px)}}


/* Dynamic Fan News Banner */
.page-title-area.item-bg3{
	position:relative;
	overflow:hidden;
	background:
			radial-gradient(circle at 50% 120%, rgba(30,170,255,.45), transparent 45%),
			linear-gradient(135deg,#06152f,#102d55);
}

.page-title-area.item-bg3:before{
	content:"";
	position:absolute;
	inset:-20%;
	background:
			radial-gradient(circle,rgba(0,190,255,.35) 0 2px,transparent 3px);
	background-size:55px 55px;
	animation:fanStarMove 18s linear infinite;
	opacity:.35;
}

.page-title-area.item-bg3:after{
	content:"";
	position:absolute;
	width:500px;
	height:500px;
	right:8%;
	bottom:-250px;
	border-radius:50%;
	border:2px solid rgba(30,190,255,.25);
	box-shadow:0 0 80px rgba(30,190,255,.25);
	animation:fanEnergy 6s ease-in-out infinite;
}

.page-title-content{
	position:relative;
	z-index:2;
}

.page-title-content h2{
	color:#fff;
	text-transform:uppercase;
	letter-spacing:1px;
}

.page-title-content h2:after{
	content:" Fan News & Product Videos";
	display:block;
	font-size:16px;
	font-weight:400;
	margin-top:15px;
	color:rgba(255,255,255,.75);
}

@keyframes fanStarMove{
	from{transform:translateY(0)}
	to{transform:translateY(120px)}
}

@keyframes fanEnergy{
	0%,100%{transform:scale(1);opacity:.5}
	50%{transform:scale(1.15);opacity:1}
}

/* Real banner section */
.fan-video-banner{
	position:relative;
	height:360px;
	overflow:hidden;
	background:linear-gradient(135deg,#071a38,#103c68,#0a82bb);
	display:flex;
	align-items:center;
	text-align:center;
}
.fan-video-banner:before{
	content:"";
	position:absolute;
	width:600px;
	height:600px;
	right:-120px;
	bottom:-300px;
	border-radius:50%;
	border:2px solid rgba(255,255,255,.18);
	animation:fanRotate 12s linear infinite;
}
.fan-video-banner:after{
	content:"";
	position:absolute;
	left:-100px;
	top:80px;
	width:260px;
	height:260px;
	border-radius:50%;
	background:rgba(0,190,255,.18);
	filter:blur(20px);
	animation:fanGlow 5s ease-in-out infinite;
}
.fan-banner-particles{
	position:absolute;
	inset:0;
	background-image:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 2px);
	background-size:45px 45px;
	animation:fanParticles 18s linear infinite;
}
.fan-banner-content{position:relative;z-index:2;color:#fff;width:100%}
.fan-banner-content h1{font-size:48px;margin:0 0 20px;text-transform:uppercase}
.fan-banner-content p{font-size:20px;color:rgba(255,255,255,.85)}
.fan-banner-tags{margin-top:25px;font-size:14px;letter-spacing:1px;color:#d9f5ff}
@keyframes fanParticles{from{transform:translateY(0)}to{transform:translateY(120px)}}
@keyframes fanRotate{to{transform:rotate(360deg)}}
@keyframes fanGlow{50%{transform:scale(1.25);opacity:.7}}
/*products*/

.product-banner{
	height:420px;
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	background:linear-gradient(120deg,#07172f,#124b85,#07172f);
	color:#fff;
}

.product-banner:before{
	content:"";
	position:absolute;
	inset:0;
	background-image:radial-gradient(#5fd8ff 1px,transparent 2px);
	background-size:50px 50px;
	animation:moveParticle 15s linear infinite;
	opacity:.35;
}

.banner-content{
	position:relative;
	z-index:2;
	text-align:center;
}

.banner-content h1{
	font-size:48px;
	text-transform:uppercase;
}

.banner-content p{
	font-size:20px;
	color:#dbeafe;
}

.fan-animation{
	position:absolute;
	right:15%;
	width:180px;
	height:180px;
	border-radius:50%;
	border:10px solid rgba(255,255,255,.2);
	animation:rotateFan 8s linear infinite;
}

.fan-animation:before,
.fan-animation:after{
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:90px;
	height:12px;
	background:#59d9ff;
	transform-origin:left center;
}

.fan-animation:before{
	transform:rotate(120deg);
}

.fan-animation:after{
	transform:rotate(240deg);
}

.product-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:30px;
	padding:80px 0;
}

.product-card{
	background:#fff;
	border-radius:25px;
	overflow:hidden;
	box-shadow:0 15px 45px rgba(0,0,0,.08);
	transition:.4s;
}

.product-card:hover{
	transform:translateY(-10px);
}

.product-image{
	height:320px;
	overflow:hidden;
}

.product-image img{
	width:100%;
	height:100%;
	object-fit:cover;
	transition:.5s;
}

.product-card:hover img{
	transform:scale(1.08);
}

.product-info{
	padding:30px;
}

.product-info h2{
	font-size:25px;
}

.product-btn{
	display:inline-block;
	margin-top:20px;
	padding:12px 25px;
	border-radius:30px;
	background:#168fe5;
	color:#fff;
}

@keyframes rotateFan{
	to{transform:rotate(360deg)}
}

@keyframes moveParticle{
	from{transform:translateY(0)}
	to{transform:translateY(100px)}
}

@media(max-width:900px){
	.product-grid{
		grid-template-columns:1fr;
	}
}


.product-pagination{
	text-align:center;
	margin:30px 0 60px;
}

.product-pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:42px;
	height:42px;
	margin:0 5px;
	padding:0 14px;
	border-radius:22px;
	background:#f1f5f9;
	color:#334155;
	text-decoration:none;
	transition:.3s;
}

.product-pagination .page-numbers:hover,
.product-pagination .page-numbers.current{
	background:#168fe5;
	color:#fff;
}
/*分页*/

.pagination-area{
	text-align:center;
	margin:50px 0;
}
.pagination-area .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:42px;
	height:42px;
	margin:0 5px;
	padding:0 14px;
	border-radius:22px;
	background:#f1f5f9;
	color:#334155;
	text-decoration:none;
}
.pagination-area .current,
.pagination-area .page-numbers:hover{
	background:#168fe5;
	color:#fff;
}
/* Fix CF7 spacing inside page.php services content */

.services-details-content .yx-fan-inquiry__grid {
	row-gap:32px;
}


.services-details-content .yx-fan-field {
	margin-bottom:0 !important;
}


.services-details-content .yx-fan-field label {
	margin-bottom:12px !important;
}


.services-details-content .yx-fan-field input,
.services-details-content .yx-fan-field select,
.services-details-content .yx-fan-field textarea {

	margin-bottom:0 !important;

}
.services-details-content p {
	margin-bottom:0;
}


.services-details-content br {
	display:none;
}