/*========================================================================

	Template Name: Responsive Multi-Purpose HTML Template
	Author: Rainbow Design

========================================================================*/

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

	Table of contents
	
	01. Common
	02. Header
	03. Slider
	04. Call us banner
	05. About area
	06. Services area
	07. Counter area
	08. Skills area
	09. Portfolio
	10. Pricing area
	11. Call to action
	12. Blog
	13. Footer
	14. Inner page header
	15. Team
	16. Faq
	17. Gallery
	18. Testimonial
	19. Error page 404
	20. Contact us
		
----------------------------------*/

/* Theme Font Use @import url('https@fonts.googleapis.com/css2@family=montserrat_3aital,wght_400,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 */

/* font-family: 'Montserrat', sans-serif; */


/* ===================================
	01. Common
=================================== */
::selection {
	background-color: #6382f7;
	color: #fff;
}

::-moz-selection {
	background-color: #6382f7;
	color: #fff;
}

img {
	max-width: 100%;
}

body {
	font-size: 12px;
	font-family: 'Poppins';
	color: #c5c5c5;
	letter-spacing: 1px;
}

p {
	line-height: 24px;
	font-size: 14px;
	color: #333;
	font-family: 'Poppins';
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0px;
	color: #202020;
	padding: 0px;
	line-height: 1.2;
	letter-spacing: 1px;
	font-family: 'Poppins';
}

h1 {
	font-size: 60px;
	font-weight: 700;
}

h2 {
	font-size: 36px;
	font-weight: 700;
}

h3 {
	font-size: 26px;
	font-weight: 700;
}

h4 {
	font-size: 24px;
	font-weight: 700;
}

h5 {
	font-size: 18px;
	font-weight: 700;
}

h6 {
	font-size: 16px;
	font-weight: 700;
}

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

a {
	text-decoration: none;
	cursor: pointer;
}

a:hover {
	text-decoration: none;
}

/* --- Top Scroll --- */
.scroll-top {
	display: none;
	position: fixed;
	bottom: 2px;
	text-align: center;
	right: 2%;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 12px;
	color: #fff;
	background-color: #000;
	text-decoration: none;
	border-radius: 100%;
	z-index: 9999;
}

.scroll-top:hover {
	color: #fff !important;
	text-decoration: none;
	background-color: #6382f7;
}

/* --- Buttons --- */
.btn-style-1 {
	color: #fff;
	border: 0;
	border-radius: 0px 0px 0px 0px;
	position: relative;
	padding: 16px 30px;
	font-size: 14px;
	text-align: center;
	z-index: 0;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 22px;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	background-color: #6382f7;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.btn-style-1:hover {
	color: #000;
	text-decoration: none;
}

.btn-style-2 {
	color: #fff;
	border: 0;
	border-radius: 0;
	position: relative;
	padding: 16px 30px;
	font-size: 14px;
	text-align: center;
	z-index: 0;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 22px;
	overflow: hidden;
	text-decoration: none;
	display: inline-block;
	background-color: #000;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.btn-style-2:hover {
	color: #fff;
	text-decoration: none;
	background-color: #151515;
}


/* --- section title --- */
.section-title .small-title {
	font-size: 12px;
	color: #6382f7;
}

.section-title h2 {
	position: relative;
	color: #000;
	font-weight: 500;
}

.section-title span.dashed-border {
	border: 1px dashed rgba(0, 0, 0, 0.2);
	width: 200px;
	position: relative;
	display: inline-block;
}

/* ===================================
	02. Header
=================================== */
.header-upper {
	background-color: #f5f5f5;
	padding: 12px 0px;
}

/* header social */
.header-social li {
	margin-right: 20px !important;
}

.header-social li:last-child {
	margin-right: 0px !important;
}

.header-social li a {
	margin: 0px !important;
	text-align: center;
	display: inline-block;
	padding: 0px;
	color: #333;
	font-size: 14px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.header-social li a:hover {
	color: #6382f7;
}

/* header location */
.header-location {
	text-align: right;
}

.header-location li {
	color: #fff;
	padding: 0 30px;
	position: relative;
	margin-right: 0px !important;
}

.header-location li:last-child {
	padding-right: 0px;
}

.header-location li:after {
	content: "";
	height: 40px;
	width: 1px;
	background-color: rgba(0, 0, 0, 0.2);
	display: block;
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
}

.header-location li:last-child:after {
	display: none;
}

.header-location li .icon {
	display: table-cell;
	vertical-align: middle;
}

.header-location li .icon i {
	border: 1px solid;
	position: relative;
	display: inline-block;
	height: 40px;
	width: 40px;
	line-height: 40px;
	border-radius: 100%;
	text-align: center;
	color: #6382f7;
}

.header-location li .title-box {
	display: table-cell;
	vertical-align: middle;
	padding-left: 10px;
	text-align: left;
}

.header-location li .title-box h5 {
	font-size: 16px;
	color: #000;
	font-weight: 600;
	margin-bottom: 2px;
}

.header-location li .title-box p {
	font-size: 14px;
	font-weight: 500;
	color: #5d6576;
	margin-bottom: 0px;
}

.header-location li .title-box p a {
	font-size: 14px;
	font-weight: 500;
	color: #5d6576;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.header-location li .title-box p a:hover {
	color: #6382f7;
}

/* navbar brand */
.header-lover .navbar-brand {
	padding: 0px;
	margin: 0px;
}

/* header lover */
.header-lover {
	padding: 20px 0px;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.header-navigation .navbar {
	padding: 0px 0px;
}

.header-navigation .nav-item .nav-link {
	font-size: 12px;
	color: #000;
	font-weight: 500;
	position: relative;
	padding: 6px 14px;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.header-navigation .nav-item .nav-link:hover,
.header-navigation .nav-item.active .nav-link {
	color: #6382f7;
}

.header-navigation .nav-item:last-child .nav-link {
	padding-right: 0px;
}

.header-navigation .navbar-toggler span {
	background: #000;
}

.header-navigation .dropdown-menu {
	margin: 0px;
	padding: 0px;
	border: 0px;
	border-radius: 0px;
	background-color: #6382f7;
}

.header-navigation .dropdown-menu .dropdown-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
	position: relative;
	font-size: 12px;
	padding: 12px 12px;
	color: #fff;
	font-weight: 500;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.header-navigation .dropdown-menu li:last-child .dropdown-item {
	border-bottom: 0px !important;
}

.header-navigation .dropdown-menu .dropdown-item:hover {
	color: #000;
	padding-left: 20px;
	background-color: transparent;
}

/* Navbar Toogle */
.navbar-toggler {
	border: none;
	padding: 10px 6px;
	background-color: #f5f5f5;
	outline: none !important;
}

.navbar-toggler span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: #333;
}

.navbar-toggler span+span {
	margin-top: 4px;
	width: 18px;
}

.navbar-toggler span+span+span {
	width: 10px;
}

/* sticky */
.is-sticky {
	z-index: 9999;
}

.is-sticky .header-upper {
	z-index: 999 !important;
	background-color: #333 !important;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.is-sticky .header-upper .navbar .nav-item .nav-link {
	color: #ccc;
}

.is-sticky .nav-item.active .nav-link,
.is-sticky .nav-pills .show>.nav-link {
	color: #6382f7 !important;
}

.is-sticky .header-social li a {
	color: #fff;
}

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

	/* shows the dropdown menu on hover */
	.navbar .dropdown:hover .dropdown-menu,
	.navbar .dropdown .dropdown-menu:hover {
		display: block !important;
	}
}

/* ===================================
	03. Slider
=================================== */
.slider .carousel-caption {
	top: 50%;
	bottom: auto;
	left: 0px;
	right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	transform: translateY(-50%);
	z-index: 1;
	text-align: center;
}

.slider .carousel-center-box {
	padding: 30px;
	background-color: #6382f7;
}

.slider .carousel-item:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
	background-color: rgba(0, 0, 0, 0.3);
}

.slider .carousel-item {
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	height: 700px;
	position: relative;
}

.slider .carousel-item.slider-one {
	background-image: url("../images/banner-1.jpg");
	/*edit image*/
}

.slider .carousel-item.slider-two {
	background-image: url("../images/banner-2.jpg");
	/*edit image*/
}

.slider .carousel-item.slider-three {
	background-image: url("../images/banner-3.jpg");
	/*edit image*/
}

.slider .carousel-caption h5 {
	font-weight: 700;
	margin-bottom: 10px;
	font-size: 34px;
	color: #fff;
	line-height: 46px;
	text-transform: capitalize;
}

.slider .carousel-caption h5 span {
	color: #000;
}

.slider .carousel-caption h6 {
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	color: #000;
	font-style: italic;
	margin-bottom: 6px;
}

.slider .carousel-caption p {
	color: #fff;
}

.slider .carousel-control-next,
.slider .carousel-control-prev {
	border-radius: 100%;
	color: #fff;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.6);
	font-size: 18px;
	top: 50%;
	width: 48px;
	height: 48px;
	line-height: 48px;
	bottom: auto;
	display: inline-block;
	transform: translateY(-50%);
}

.slider .carousel-control-next {
	right: 10px;
}

.slider .carousel-control-prev {
	left: 10px;
}

/* ===================================
	04. Call us banner
=================================== */
.callus-banner-box {
	background-image: url(../images/callus-banner-bg.jpg);
	background-position: top center;
	position: relative;
	z-index: 0;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 40px 40px 20px 40px;
}

.callus-banner-box:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -1;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6382f7+0,6382f7+65,6382f7+99&1+0,0.7+65,1+100 */
	background: -moz-linear-gradient(left, rgba(99, 130, 247, 1) 0%, rgba(99, 130, 247, 0.7) 65%, rgba(99, 130, 247, 0.99) 99%, rgba(99, 130, 247, 1) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(99, 130, 247, 1) 0%, rgba(99, 130, 247, 0.7) 65%, rgba(99, 130, 247, 0.99) 99%, rgba(99, 130, 247, 1) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(99, 130, 247, 1) 0%, rgba(99, 130, 247, 0.7) 65%, rgba(99, 130, 247, 0.99) 99%, rgba(99, 130, 247, 1) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6382f7', endColorstr='#6382f7', GradientType=1);
	/* IE6-9 */
}

.callus-banner-box .text {
	color: #fff;
	font-weight: 600;
	font-size: 20px;
}

.callus-banner-box .text span {
	font-size: 16px;
	font-weight: 500;
}

.callus-banner-box .number {
	color: #000;
	font-weight: 700;
	font-size: 22px;
}

/* ===================================
	05. About area
=================================== */
.about-text h2 {
	font-size: 30px;
	line-height: 28px;
	font-weight: 600;
	color: #6382f7;
	text-transform: capitalize;
}

.about-img-holder {
	position: relative;
}

.about-img-holder img {
	transition: all .3s ease;
}

.about-img-holder:hover img {
	border-radius: 0px 0px 40px 0px;
}

.about-img-holder .hoverlay {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.about-img-holder .hoverlay a {
	background-color: #6382f7;
	color: #fff;
	display: inline-block;
	padding: 10px 20px;
	font-size: 14px;
	border-radius: 0px 0px 0px 0px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.about-img-holder .hoverlay a:hover {
	background-color: #000;
}

.about-box {
	text-align: left;
	padding: 15px;
	border: 1px solid #6382f7;
	position: relative;
}

.about-box p {
	margin-bottom: 0px;
}

.about-box h4 {
	color: #000;
	margin-bottom: 10px;
	font-weight: 500;
	font-size: 18px;
}

/* ===================================
	06. Services area
=================================== */
.service-box .image {
	position: relative;
	overflow: hidden;
	z-index: 0;
	margin-bottom: 0px;
}

.service-box .image img {
	position: relative;
	width: 100%;
	display: block;
	-webkit-filter: grayscale(100%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.service-box:hover .image img {
	-webkit-filter: grayscale(0%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

.service-box .image .overlay {
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.service-box:hover .image .overlay {
	opacity: 1;
}

.service-box .image .overlay:before {
	content: "";
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border: 1px solid #6382f7;
	position: absolute;
	left: 10px;
	top: 10px;
}

.service-box .image .overlay a {
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 16px;
	border: 1px solid #6382f7;
	height: 40px;
	width: 40px;
	color: #6382f7;
	text-align: center;
	border-radius: 100%;
	line-height: 40px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.service-box .caption {
	padding: 0px;
	background-color: #f5f5f5;
	text-align: center;
}

.service-box .caption p {
	margin-bottom: 0px;
	padding: 16px 20px;
}

.service-box h4 {
	font-weight: 500;
	margin-bottom: 8px;
	font-size: 18px;
	background-color: #6382f7;
	padding: 14px 20px;
}

.service-box h4 a {
	color: #fff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.service-box h4 a:hover {
	color: #000;
}

/* service sidebar link */
.service-sidebar-link {
	background-color: #f5f5f5;
	overflow: hidden;
}

.service-sidebar-link li a {
	color: #333;
	text-decoration: none;
	padding: 0px 10px;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	display: inline-block;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	position: relative;
	width: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.service-sidebar-link li.active a,
.service-sidebar-link li a:hover {
	background-color: #6382f7;
	padding-left: 20px;
	color: #fff;
}

.service-sidebar-link li a i {
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	font-size: 12px;
	height: 50px;
	width: 40px;
	background-color: rgba(255, 255, 255, 0.1);
	text-align: center;
	line-height: 50px;
}

.service-sidebar-link li:last-child a {
	border-bottom: 0px;
}

/* download brochures widget */
.brochure-widget-title {
	font-weight: 500;
	font-size: 22px;
	color: #000;
}

.download-brochures-widget {
	background-color: #f5f5f5;
	padding: 20px 20px 16px 20px;
	text-align: center;
	overflow: hidden;
}

.download-brochures-widget a {
	display: block;
	margin-bottom: 4px;
}

/* call us widget */
.call-us-widget {
	background-color: #f5f5f5;
	overflow: hidden;
	text-align: center;
}

.call-us-widget .des {
	padding: 20px;
}

.call-us-widget ul li {
	padding-bottom: 10px;
	font-size: 14px;
	color: #000;
}

.call-us-widget ul li.call {
	font-size: 21px;
	color: #6382f7;
}

.call-us-widget ul li:last-child {
	padding-bottom: 0px;
}

/* single service content */
.single-service-content h3 {
	position: relative;
	color: #6382f7;
	font-weight: 400;
	font-size: 28px;
}

.single-service-content h4 {
	position: relative;
	color: #000;
	font-weight: 400;
	font-size: 22px;
}

/* blockquote */
.single-service-content figure {
	background-color: #6382f7;
	padding: 25px;
	position: relative;
}

.single-service-content figure .blockquote {
	margin-bottom: 10px;
}

.single-service-content figure .blockquote p {
	color: #fff;
	font-size: 16px;
	font-style: italic;
	line-height: 28px;
}

.single-service-content figure .blockquote i {
	color: #000;
	font-size: 30px;
}

.single-service-content .blockquote-footer {
	margin-bottom: 0px;
	display: inline-block;
	color: #000;
	font-size: 12px;
}

/* ===================================
	07. Counter area
=================================== */
.counter-area {
	background-image: url(../images/counter-bg.jpg);
	background-position: bottom center;
	position: relative;
	z-index: 0;
	background-size: cover;
	background-repeat: no-repeat;
}

.counter-area:after {
	position: absolute;
	content: "";
	background-color: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: -1;
}

.counter-box {
	text-align: center;
	position: relative;
}

.counter-box .icon {
	width: 80px;
	height: 80px;
	margin: auto auto 20px auto;
	line-height: 80px;
	font-size: 22px;
	color: #fff;
	background-color: #6382f7;
	text-align: center;
	border-radius: 100% 100% 0 100%;
}

.counter-box:hover:before {
	top: 20px;
}

.counter-box h3 {
	font-size: 18px;
	color: #fff;
	font-weight: 500;
	padding-bottom: 6px;
}

.counter-box span {
	color: #6382f7;
	font-size: 26px;
}


/* ===================================
	09. Portfolio
=================================== */
.portfolio-box {
	position: relative;
	overflow: hidden;
}

.portfolio-box .portfolio-box-img {
	position: relative;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.2);
}

.portfolio-box .portfolio-box-img img {
	border: 1px solid transparent;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.portfolio-box:hover .portfolio-box-img img {
	transform: scale(0.9);
	opacity: 0.3;
	border: 1px solid #fff;
}

.portfolio-box .des {
	position: absolute;
	top: 50%;
	left: 0px;
	right: 0;
	margin: auto;
	text-align: center;
	transform: translateY(-50%);
	z-index: 5;
}

.portfolio-box h5 {
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
	font-style: italic;
	padding: 10px 20px;
	background-color: rgba(0, 0, 0, 0.6);
	display: inline-block;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.portfolio-box .readmore {
	color: #fff;
	font-size: 14px;
	position: absolute;
	right: 0px;
	bottom: 0px;
	background-color: #6382f7;
	opacity: 0;
	margin: auto;
	width: 0px;
	height: 0px;
	line-height: 0px;
	text-align: center;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.portfolio-box:hover .readmore {
	opacity: 1;
	width: 60px;
	height: 60px;
	line-height: 60px;
}


/* project info */
.project-info {
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 20px 30px;
}

.project-info .table tr th,
.project-info .table tr td {
	padding: 14px 0px 14px 0px;
	color: #000;
	font-size: 14px;
}

.project-info .table tr:last-child th,
.project-info .table tr:last-child td {
	border-bottom: 0px;
}

.project-info .table> :not(caption)>*>* {
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}


.products-items .table{
	margin-top: 30px;
}
.products-items .table tr{
	background: #000000;
}

.products-items .table tr:nth-child(2n+1) {
    background-color: rgb(243, 243, 243);
}
.products-items .table tr:nth-child(2n) {
    background-color: rgb(255, 255, 255);
}
.products-items .table tr td{
	padding: 10px 20px;
	    word-break: keep-all;
	    border: 1px solid #6382f7;
	    text-align: center;
	    line-height: 1.5;
	    color: #181818;
	    font-size: 16px;
		background-color: transparent;
}

.products-items h3{
				position: relative;
				    margin-bottom: 20px;
				    padding-bottom: 15px;
				    font-size: 28px;
				    line-height: 30px;
				    font-weight: 600;
				    font-family: "Barlow", sans-serif;
				    background: #444444;
				    -webkit-background-clip: text;
				    -webkit-text-fill-color: transparent;
				    text-transform: inherit;
			}
.products-items h3::before{
				content: "";
				    position: absolute;
				    bottom: 0;
				    width: 10%;
				    height: 4px;
				    background: linear-gradient(45deg, #6382f7 45%, #ffd732 5%);
			}

.products-items h4, .products-items h2, .products-items h5{
	margin-bottom:10px;
}




.calculation-formula p{
	font-size: 18px;
	margin-top: 15px;
	line-height: 30px;
}


/* ===================================
	12. Blog
=================================== */
.blog-item {
	border: 1px solid rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.blog-item-content {
	padding: 20px 20px 20px 20px;
	position: relative;
}

.blog-item-content h6 a {
	color: #000;
	font-weight: 400;
	font-size: 20px;
	text-align: center;
	display: inline-block;
	margin: 0 0 30px 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.blog-item-content h6 a:hover {
	color: #6382f7;
}

.blog-item .blog-item-img {
	position: relative;
	-webkit-filter: grayscale(100%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.blog-item:hover .blog-item-img {
	-webkit-filter: grayscale(0%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

.blog-item .blog-item-img .read-icon {
	position: absolute;
	top: 0;
	left: 0px;
	right: 0px;
	text-align: center;
	width: 0px;
	height: 0px;
	margin: auto;
	z-index: 1;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.5);
	transition: all 0.4s ease 0s;
}

.blog-item .blog-item-img a {
	position: relative;
	top: 50%;
	text-align: center;
	transform: translateY(-50%);
	background-color: #000;
	display: inline-block;
	text-decoration: none;
	color: #fff;
	border-radius: 4px;
	padding: 10px 20px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.blog-item .blog-item-img a:hover {
	background-color: #6382f7;
}

.blog-item:hover .blog-item-img .read-icon {
	opacity: 1;
	width: 100%;
	height: 100%;
}

.blog-item-content .tag {
	text-align: center;
	font-size: 14px;
	margin-bottom: 14px;
	color: #6382f7;
}

.blog-item-content ul li a {
	color: #000;
	font-size: 12px;
	font-weight: 400;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.blog-item-content ul li a:hover {
	color: #6382f7;
}

/* sidebar widget */
.sidebar-widget {
	background-color: #f5f5f5;
	padding: 25px;
}

/* widget title */
.sidebar-widget .sidebar-widget-title {
	font-size: 18px;
	font-weight: 400;
	color: #6382f7;
	margin-bottom: 16px;
}

/* sidebar search */
.sidebar-search {
	position: relative;
}

.sidebar-search input {
	position: relative;
	display: block;
	background-color: rgba(0, 0, 0, 0.1);
	border: 0px;
	color: #828282;
	font-size: 15px;
	font-weight: 400;
	height: 60px;
	width: 100%;
	padding-left: 20px;
	padding-right: 65px;
	transition: all 500ms ease 0s;
}

.sidebar-search button {
	position: absolute;
	top: 50%;
	right: 10px;
	display: block;
	background-color: transparent;
	color: #6382f7;
	transform: translateY(-50%);
	font-size: 20px;
	border: 0px;
	text-align: center;
	border-radius: 0px;
}

/* categories */
.sidebar-categories li a {
	display: block;
	margin-bottom: 10px;
	color: #000;
	position: relative;
	font-size: 14px;
	padding-bottom: 10px;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.sidebar-categories li:last-child a {
	border: none;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.sidebar-categories li:hover a {
	color: #6382f7;
}

.sidebar-categories li a span {
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	color: #6382f7;
}

/* recent post */
.sidebar-recent-post li {
	display: block;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
	margin: 0px 0px 15px 0px;
	padding: 0px 0px 15px 0px;
}

.sidebar-recent-post li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

.sidebar-recent-post li .post-date {
	color: #fff;
	margin-top: 8px;
	border: 1px solid #6382f7;
	display: inline-block;
	font-size: 10px;
	background-color: #6382f7;
	padding: 4px 12px;
}

.sidebar-recent-post li .post-title {
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
}

.sidebar-recent-post li .post-title a {
	color: #000;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.sidebar-recent-post li .post-title a:hover {
	color: #6382f7;
}

/* popular tag */
.popular-tag li {
	display: inline-block;
	margin: 2px;
}

.popular-tag li a {
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 4px 10px;
	color: #000;
	font-size: 14px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.popular-tag li a:hover {
	color: #fff;
	background-color: #6382f7;
}

/* blog post meta */
.blog-post-meta {
	position: relative;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
	padding-bottom: 20px;
	text-align: center;
}

.blog-post-meta li {
	position: relative;
	margin-right: 20px !important;
}

.blog-post-meta li:last-child {
	margin-right: 0px !important;
}

.blog-post-meta li a {
	color: #000;
	font-size: 12px;
	font-weight: 500;
}

.blog-post-meta li a:hover {
	color: #6382f7;
}

.blog-post-meta li:after {
	position: absolute;
	content: "/";
	border-radius: 100%;
	top: 50%;
	transform: translateY(-50%);
	right: -15px;
}

.blog-post-meta li:last-child:after {
	display: none;
}

.blog-post-content h6 {
	color: #000;
	font-weight: 500;
	font-size: 24px;
	display: inline-block;
}

.blog-post-feature li {
	margin-bottom: 12px;
	color: #333;
	font-size: 14px;
	text-transform: capitalize;
}

.blog-post-feature li:last-child {
	margin-bottom: 0px;
}

.blog-post-feature li i {
	font-size: 10px;
	color: #6382f7;
	padding-right: 4px;
}

/* blockquote */
.blog-post-content figure {
	background-color: #6382f7;
	padding: 25px;
	position: relative;
}

.blog-post-content figure .blockquote {
	margin-bottom: 10px;
}

.blog-post-content figure .blockquote p {
	color: #fff;
	font-size: 16px;
	font-style: italic;
	line-height: 28px;
}

.blog-post-content figure .blockquote i {
	color: #000;
	font-size: 30px;
}

.blog-post-content .blockquote-footer {
	margin-bottom: 0px;
	display: inline-block;
	color: #000;
	font-size: 12px;
}

/* single tag */
.blog-single-tag li:first-child {
	font-weight: 600;
	font-size: 14px;
	color: #6382f7;
}

.blog-single-tag li a {
	color: #333;
	font-size: 14px;
}

.blog-single-tag li a:hover {
	color: #6382f7;
}

.blog-single-social li:first-child {
	font-weight: 600;
	font-size: 14px;
	color: #6382f7;
}

.blog-single-social li a {
	color: #333;
	font-size: 14px;
}

.blog-single-social li a:hover {
	color: #6382f7;
}

/* comments block */
.blog-post-subtitle {
	color: #6382f7;
	font-weight: 500;
	font-size: 24px;
	display: inline-block;
}

.comments-block ul li {
	width: 100%;
	margin-bottom: 30px;
}

.comments-block ul li:last-child {
	margin-bottom: 0px;
	padding-bottom: 0px;
	border-bottom: 0px;
}

.comments-block ul li ul li {
	margin-top: 30px;
	padding-left: 10px;
	margin-left: 20px;
	border-left: 2px solid #6382f7;
}

.comments-block ul li .d-flex .flex-shrink-0 {
	position: relative;
}

.comments-block ul li ul li:last-child {
	margin-bottom: 0px !important;
}

.comments-block ul li h5 {
	font-size: 20px;
	color: #000;
	font-weight: 500;
	margin-bottom: 4px;
}

.comments-block ul li h5 small {
	font-size: 12px;
	color: #333;
	width: 100%;
	display: inline-block;
}

.comments-block ul li .d-flex .flex-shrink-0:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 0;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.comments-block ul li p {
	margin-bottom: 0px;
}

.comments-block ul li a.reply {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
	color: #6382f7;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 600;
	z-index: 2;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.comments-block ul li .d-flex:hover a.reply,
.comments-block ul li .d-flex:hover .flex-shrink-0:after {
	opacity: 1;
}

/* leave a comments block */
.leave-reply-form input {
	padding: 0px 10px;
	background-color: #fff;
	border: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	height: 55px;
	border-radius: 0px;
	font-size: 14px;
	color: #000;
}

.leave-reply-form textarea {
	background-color: #fff;
	border: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 10px 10px;
	border-radius: 0px;
	font-size: 14px;
	color: #000;
}

.leave-reply-form input:focus,
.leave-reply-form textarea:focus {
	background-color: #fff;
	border-bottom: 1px solid #6382f7 !important;
	color: #000;
	box-shadow: none;
}

/* ===================================
	13. Footer
=================================== */
.footer-main {
	background-color: #eaeaea;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-upper {
	background-image: url(../images/footer-bg.png);
	background-repeat: no-repeat;
	background-position: center center;
}

/* footer title */
.footer-title {
	font-size: 22px;
	color: #000;
	margin-bottom: 15px;
}

/* footer link */
.footer-link li {
	margin-bottom: 10px;
}

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

.footer-link li a {
	color: #000;
	font-size: 14px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.footer-link li a:hover {
	color: #6382f7;
}

.footer-link li i {
	margin-right: 6px;
}

/* footer instagram */
.footer-instagram {
	clear: both;
	overflow: hidden;
	margin: -7px;
	list-style: none;
}

.footer-instagram li {
	width: 33.33%;
	float: left;
	list-style-type: none;
	padding: 6px;
}

.footer-instagram li img {
	-webkit-filter: grayscale(100%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.footer-instagram li:hover img {
	-webkit-filter: grayscale(0%);
	/* Safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

/* footer address */
.footer-address li {
	margin-bottom: 10px;
	color: #000;
	font-size: 14px;
}

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

.footer-address li a {
	color: #000;
	font-size: 14px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.footer-address li a:hover {
	color: #6382f7;
}

.footer-address li i {
	margin-right: 6px;
}

/* footer social */
.footer-social a {
	border-radius: 4px;
	display: inline-block;
	font-size: 12px;
	height: 30px;
	line-height: 30px;
	position: relative;
	text-align: center;
	width: 30px;
	color: #fff;
	background-color: #1a1a1a;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.footer-social a:hover {
	background-color: #6382f7;
}

/* footer copyright */
.footer-copyright {
	padding: 15px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-copyright p {
	color: #333;
	font-size: 14px;
}

/* ===================================
	14. Inner page header
=================================== */
.inner-page-header-bg {
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	z-index: 0;
	background-size: cover;
}

.inner-page-header-bg:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.inner-page-title {
	padding: 20px 0 200px 0;
}

.inner-page-title h2 {
	color: #fff;
	text-align: center;
	font-weight: 400;
	font-size: 40px;
}

/* breadcrumb */
.breadcrumb-box {
	padding: 0;
	margin-bottom: 80px;
}

.breadcrumb-box .breadcrumb {
	margin: auto;
	display: inline-block;
}

.breadcrumb-box .breadcrumb li {
	display: inline-block;
	color: #ccc;
	font-size: 14px;
}

.breadcrumb-box .breadcrumb li a {
	color: #6382f7;
}

/* ===================================
	15. Team
=================================== */
.team-item {
	overflow: hidden;
	position: relative;
}

.team-item .image {
	overflow: hidden;
}

.team-item .image img {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.team-item:hover .image img {
	transform: scale(1.1);
}

.team-item:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	opacity: 0.5;
	z-index: 0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+48,000000+100&0.9+0,0.2+49,0.9+100 */
	background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.21) 48%, rgba(0, 0, 0, 0.2) 49%, rgba(0, 0, 0, 0.9) 100%);
	/* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.21) 48%, rgba(0, 0, 0, 0.2) 49%, rgba(0, 0, 0, 0.9) 100%);
	/* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.21) 48%, rgba(0, 0, 0, 0.2) 49%, rgba(0, 0, 0, 0.9) 100%);
	/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e6000000', endColorstr='#e6000000', GradientType=0);
	/* IE6-9 */
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.team-item:hover:after {
	opacity: 1;
}

.team-item .team-item-caption {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 2;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.team-item .team-item-caption p {
	color: #fff;
}

.team-item .team-item-caption h4 {
	font-size: 20px;
	letter-spacing: 1px;
	text-transform: capitalize;
	margin-bottom: 15px;
	font-weight: 500;
	color: #fff;
	padding-bottom: 8px;
	position: relative;
}

.team-item .team-item-caption h4:after {
	position: absolute;
	content: "";
	width: 70px;
	height: 1px;
	bottom: 0px;
	left: 0px;
	background-color: #fff;
}

.team-item .team-item-caption h4:before {
	position: absolute;
	content: "";
	width: 40px;
	height: 1px;
	bottom: -6px;
	left: 0px;
	background-color: #fff;
}

.team-social {
	position: absolute;
	right: 15px;
	bottom: 15px;
	padding: 0px;
	margin: 0px;
	width: auto;
	z-index: 2;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.team-social li a {
	color: #fff;
	border-bottom: 1px solid #fff;
	padding: 14px 0;
	width: 22px;
	display: block;
	text-align: center;
	font-size: 14px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.team-social li a:hover {
	color: #6382f7;
}

.team-social li:last-child a {
	border-bottom: 0px;
	padding-bottom: 0px;
}

.team-item:hover .team-item-caption h4,
.team-item:hover .team-item-caption p {
	color: #fff;
}

.team-item:hover .overlay,
.team-item:hover .team-social {
	opacity: 1;
}

/* ===================================
	16. Faq
=================================== */
.faq-box {
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 10px 30px 10px 30px;
}

.faq-box .accordion-item .accordion-header .accordion-button {
	color: #6382f7 !important;
	padding: 20px 0px !important;
	border-bottom: 0;
	font-size: 14px;
	border-radius: 0px;
	background-color: transparent;
	text-transform: capitalize;
	font-weight: 500;
	position: relative;
	text-align: left;
}

.faq-box .accordion-item .accordion-header .accordion-button span {
	margin-right: 6px;
	font-weight: 600;
}

.faq-box .accordion-item .accordion-header .accordion-button.collapsed span {
	color: #6382f7;
	margin-right: 6px;
	font-weight: 600;
}

.faq-box .accordion-item .accordion-header .accordion-button.collapsed:after,
.faq-box .accordion-item .accordion-header .accordion-button:after {
	display: none;
}

.faq-box .accordion-item .accordion-header .accordion-button {
	display: flex;
}

.faq-box .accordion-item .accordion-header .accordion-button i {
	font-size: 14px;
	margin-left: auto;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.faq-box .accordion-item .accordion-header .accordion-button[aria-expanded=true] i {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.faq-box .accordion-item .accordion-header .accordion-button:focus {
	border-color: transparent;
	box-shadow: none;
}

.faq-box .accordion-item .accordion-header {
	padding: 0px;
	border-bottom: 0;
	background-color: transparent;
}

.faq-box .accordion-item .accordion-header .accordion-button.collapsed {
	color: #000 !important;
	padding: 20px 0px !important;
	font-size: 14px;
	background-color: transparent;
	text-transform: capitalize;
	font-weight: 500;
}

.faq-box .accordion-item {
	background-color: transparent;
	border-radius: 0px !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	overflow: hidden;
	border-left: 0;
	border-right: 0;
}

.faq-box .accordion-item:last-child {
	border-bottom: 0px;
}

.faq-box .accordion-item:first-child {
	border-top: 0px;
}

.faq-box .accordion-item .accordion-body {
	line-height: 24px;
	padding: 20px 0px 20px 0px;
	color: #333;
	margin-top: 1px;
}

/* ===================================
	17. Gallery
=================================== */
.gallery-box {
	position: relative;
	overflow: hidden;
}

.gallery-box:after {
	position: absolute;
	left: 4%;
	top: 4%;
	width: 92%;
	height: 92%;
	content: "";
	background-color: rgba(255, 255, 255, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.gallery-box:before {
	position: absolute;
	content: "";
	width: 0;
	height: 100%;
	top: 0px;
	right: 0px;
	opacity: 0;
	background-color: rgba(0, 0, 0, 0.5);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.gallery-box:hover:before {
	opacity: 1;
	width: 100%;
}

.gallery-zoom-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	right: 50%;
	bottom: 50%;
	transform: translate(-50%);
	z-index: 2;
}

.gallery-box .gallery-zoom {
	display: inline-block;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 24px;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.gallery-box .gallery-box-img img {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.gallery-box:hover .gallery-zoom,
.gallery-box:hover:after {
	opacity: 1;
}

.gallery-box .gallery-zoom:hover {
	color: #6382f7;
}

/* ===================================
	18. Testimonial
=================================== */
.testimonial-item {
	background-color: #f5f5f5;
}

.testimonial-img {
	width: 100%;
	text-align: center;
}

.testimonial-img .testimonial-user-img img {
	border: 2px solid #e1e1e1;
	border-radius: 50%;
	width: 100px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.testimonial-user-name {
	margin: 10px 0 5px 0;
	width: 100%;
	font-size: 20px;
	line-height: 18px;
	font-weight: 500;
	color: #6382f7;
}

.testimonial-user-position {
	margin: 5px 0 10px 0;
	width: 100%;
	font-size: 12px;
	line-height: 20px;
	color: #333;
}

.testimonial-des {
	padding: 20px;
}

.testimonial-item p {
	margin-bottom: 0px;
}

/* ===================================
	19. Error page 404
=================================== */
.error-page {
	background-position: center top;
	background-repeat: no-repeat;
	position: relative;
	z-index: 0;
	padding: 100px 0px;
	background-size: cover;
}

.error-page:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	background-color: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;
	z-index: -1;
}

.error-page-item {
	text-align: center;
}

.error-page-item h2 {
	margin-bottom: 12px;
	font-weight: 400;
	font-size: 32px;
	color: #6382f7;
}

.error-page-item p {
	color: #fff;
}

/* ===================================
	20. Contact us
=================================== */
.contact-box {
	background-color: #f5f5f5;
	padding: 25px;
}

.contact-box .icon {
	font-size: 30px;
	margin-bottom: 8px;
	color: #6382f7;
}

.contact-box h4 {
	line-height: 22px;
	color: #000;
	font-size: 22px;
	font-weight: 500;
}

.contact-box p {
	font-size: 14px;
	margin-bottom: 0px;
	color: #333;
	width: 100%;
	display: inline-block;
}

.contact-form-map {
	background-color: #111;
}

/* contact form */
.contact-form input {
	padding: 0px 10px;
	background-color: #fff;
	border: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	height: 55px;
	border-radius: 0px;
	font-size: 14px;
	color: #000;
}

.contact-form textarea {
	background-color: #fff;
	border: 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	padding: 10px 10px;
	border-radius: 0px;
	font-size: 14px;
	color: #000;
}

.contact-form input:focus,
.contact-form textarea:focus {
	background-color: #fff;
	border-bottom: 1px solid #6382f7 !important;
	color: #000;
	box-shadow: none;
}

.help-block ul {
	color: #842029;
	background-color: #f8d7da;
	border-color: #f5c2c7;
	padding: 10px;
	border-radius: 4px;
}

/* map */
.map-box iframe {
	width: 100%;
	border: 0px;
	height: 400px;
	overflow: hidden;
}


/* home product */

.home-product {
	background: #e3e9f3;
	position: relative;
	z-index: 2;
}


.titles {
	padding: 0 0 68px 48px;
	position: relative;
	z-index: 1
}

.titles a {
	color: #6382f7;
}

.tit-zs {
	position: absolute;
	left: 0;
	top: 15px;
	z-index: -1
}

.tit-zs i {
	width: 24px;
	height: 24px;
	background: #6382f7;
	font-size: 16px;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-align: center;
	line-height: 22px;
	border-radius: 50%;
	display: block
}

.tit-zs i:after,
.tit-zs i:before,
.tit-zs:before {
	content: "";
	border: 1px solid #c4cbd7;
	border-radius: 50%;
	position: absolute;
	left: -20px;
	right: -20px;
	top: -20px;
	bottom: -20px
}

.tit-zs i:after {
	left: -66px;
	right: -66px;
	top: -66px;
	bottom: -66px
}

/* .tit-zs:before {
    border: 1px solid #d8dfe9;
    left: -135px;
    right: -135px;
    top: -135px;
    bottom: -135px
}

 */


.home-pro dl {
	position: relative;
	z-index: 1
}

.home-pro dl:before {
	right: -8px;
	bottom: -8px;
}

.home-pro dl:before {
	content: "";
	width: 36px;
	height: 36px;
	border-right: 2px solid #6382f7;
	border-bottom: 2px solid #6382f7;
	font-size: 20px;
	color: #6382f7;
	text-align: center;
	line-height: 36px;
	display: block;
	position: absolute;
	transition: all .5s ease;
}

.home-pro dl dd a {
	display: block;
	position: relative
}

.home-pro dl dd a:before {
	content: "";
	background: rgba(0, 0, 0, 0);
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	transition: all .5s ease
}

.home-pro dl:hover dd a:before {
	background: rgba(1, 29, 45, .6)
}

.home-pro dl dt {
	background: #fff;
	padding: 20px;
	position: relative
}

.home-pro dl dt:before {
	content: "";
	background: #6382f7;
	display: block;
	position: absolute;
	left: 0;
	top: 0
}

.home-pro dl dt h3 {
	margin-top: 15px;
}

.home-pro dl dt h3 a {
	font-size: 18px;
	color: #21252d;
	font-weight: 700;
	display: block
}

.home-pro dl dt .ys {
	font-size: 0;
	margin: -11px 0 0 -8px
}

.home-pro dl dt .ys span {
	font-size: 12px;
	color: #6382f7;
	border: 1px solid #6382f7;
	border-radius: 50px;
	padding: 3px 10px;
	margin: 11px 0 0 8px;
	display: inline-block
}

.home-pro dl dt .text {
	font-size: 16px;
	color: #888b8f;
	line-height: 24px;
	margin-top: 20px
}

.home-pro dl dt:before {
	content: "";
	background: #6382f7;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

.home-pro dt:before {
	width: 4px;
	height: 60px;
}

.case-area {
	background: url(../images/case-bg.jpg) center bottom no-repeat;
	background-size: cover;
	padding: 52px 0;
	margin-top: 60px;
}

.home-case-list li {
	width: 23%;
	background: #fff;
	float: left;
	margin: 96px 0 0 2%;
	border-radius: 10px;
	padding: 0 17px 9px;
	box-shadow: 0 3px 27px rgba(2, 130, 184, .23);
	position: relative
}


.home-case-list li:before {
	content: "";
	border: 1px dashed #eaecee;
	border-radius: 10px;
	position: absolute;
	left: 8px;
	right: 8px;
	top: 8px;
	bottom: 8px
}

.home-case-list li .pic {
	margin-top: -50px;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 3px 10px rgba(205, 209, 210, .84)
}

.home-case-list li .pic p:after,
.home-case-list li .pic p:before,
.home-case-list li .pic:after,
.home-case-list li .pic:before {
	content: "";
	width: 14px;
	height: 14px;
	display: block;
	position: absolute;
	z-index: 1;
	transform: scale(0);
	transition: all ease .5s
}

.home-case-list li .pic:before {
	border-left: 4px solid #fff;
	border-top: 4px solid #fff;
	left: 15px;
	top: 15px
}

.home-case-list li .pic:after {
	border-right: 4px solid #fff;
	border-top: 4px solid #fff;
	right: 15px;
	top: 15px
}

.home-case-list li .pic p {
	margin: 0;
}

.home-case-list li .pic p:before {
	border-left: 4px solid #fff;
	border-bottom: 4px solid #fff;
	left: 15px;
	bottom: 15px
}

.home-case-list li .pic p:after {
	border-right: 4px solid #fff;
	border-bottom: 4px solid #fff;
	right: 15px;
	bottom: 15px
}

.home-case-list li .pic p a:before {
	content: "";
	background: #03161f;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	opacity: 0;
	transition: all ease .5s
}

.home-case-list li .pic .look {
	width: 146px;
	height: 39px;
	border: 1px solid #6382f7;
	border-radius: 50px;
	font-size: 16px;
	color: #fff;
	text-align: center;
	line-height: 36px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -20px 0 0 -73px;
	transform: scale(0);
	transition: all ease .5s
}

.home-case-list li .pic .look:before {
	content: "";
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #fff;
	display: inline-block;
	margin-right: 6px
}

.home-case-list li p {
	position: relative;
}

.home-case-list li p a {
	font-size: 12px;
	color: #494d56;
	text-align: center;
	/* line-height: 48px; */
	display: block;
	/* text-overflow: ellipsis; */
	/* white-space: nowrap; */
	/* overflow: hidden; */
	font-weight: 600;
}

.home-case-list li:hover:before {
	border: 1px dashed #6382f7
}

.home-case-list li:hover p a {
	color: #6382f7
}

.home-case-list li:hover .pic p a:before {
	opacity: .5
}

.home-case-list li:hover .pic .look,
.home-case-list li:hover .pic p:after,
.home-case-list li:hover .pic p:before,
.home-case-list li:hover .pic:after,
.home-case-list li:hover .pic:before {
	transform: scale(1)
}

@media (max-width:980px) {
	.home-case-list li {
		width: 48%;
	}
}



.home-new-list ul {
	overflow: hidden;
	margin-top: 70px;
	position: relative
}

.home-new-list ul:before {
	content: "";
	width: 2px;
	background: #6382f7;
	display: block;
	position: absolute;
	right: 50%;
	top: 30px;
	bottom: 30px
}


.home-new-list ul li {
	width: 50%;
	float: left;
	padding: 0 4%;
	margin: 20px 0;
	position: relative
}



.home-new-list ul li:before {
	content: "";
	background: #6382f7;
	position: absolute;
	left: 50%;
	right: 50%;
	top: -15px;
	bottom: -15px;
	z-index: -1;
	transition: all .3s
}

.home-new-list ul li h5 {
	position: relative;
	width: 80%;
	font-size: 20px;
	color: #333;
	line-height: 38px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
	padding-bottom: 5px
}

.home-new-list ul li h5::before {
	content: "";
	width: 20px;
	height: 20px;
	background: url(../images/hot.png) center no-repeat;
	border: none;
	border-radius: 0;
	left: 0;
	display: inline-block;
	padding-right: 8px;
}


.home-new-list ul li p {
	height: 60px;
	font-size: 16px;
	color: #444;
	line-height: 28px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden
}

.home-new-list ul li span {
	font-size: 16px;
	color: #6382f7;
	line-height: 38px;
	position: absolute;
	right: 8%;
	top: 0
}

.home-new-list ul li:hover:before {
	left: 4.8%;
	right: 4.8%
}

.home-new-list ul li:hover h5,
.home-new-list ul li:hover p,
.home-new-list ul li:hover span {
	color: #fff
}


/* about page */
.sub_navs {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	justify-content: center;
	-ms-justify-content: center;
	-webkit-justify-content: center;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	padding-bottom: 20px;
}

.sub_navs .item {
	width: auto;
	min-width: 220px;
	line-height: 48px;
	font-size: 16px;
	color: #444;
	padding: 0 15px;
	text-align: center;
	border: 1px solid #d2d2d2;
	margin: 0 13px 15px;
}

.sub_navs .item.hover {
	color: #fff;
	background: #6382f7;
}

.sub_navs .item.hover:hover,
.sub_navs .item:hover {
	color: #fff;
	background: #000000;
}


.about-what h2 {
	margin-bottom: 30px;
}

.about-pic {
	display: flex;
	align-items: center;
	padding: 0;
}

.about-pic .pic-box {
	position: relative;
}

.about-pic .pic-box img {
	width: 100%;
	object-fit: cover;
}

.about-pic .v-box {
	position: absolute;
	right: 0;
	bottom: -36px;
	background: #fff;
	width: 82%;
	padding: 16px 24px;
	box-sizing: border-box;
	box-shadow: 0 2px 20px 0 rgba(227, 230, 230, 0.6);
}

.about-pic .v-box p {
	color: #222222;
	font-size: 14px;
	line-height: 1.8;
}

.about-pic .v-box .v {
	margin: 20px 0 0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}

.about-pic .v-box .v h5 {
	font-size: 14px;
}

.about-pic .v-box .v hr {
	width: 200px;
	height: 4px;
	background: #f4f4f4
}

.about-pic .v-box .v a {
	width: 40px;
	position: relative;
	display: block;
	transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0s;
	background-color: #6382f7;
	border-radius: 50%;
}

.about-pic .v-box .v a::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, #6382f7 50%, transparent 25%);
	animation: scale2 2s linear infinite
}

@media (max-width: 992px) {
	.about-pic .v-box {
		position: static;
		width: 100%;
	}
}

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

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

	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}



.about-service h2,
.about-equipment h2 {
	text-align: center;
	font-weight: 600;
	position: relative;
	margin-bottom: 40px;
}

.about-service h2::after,
.about-equipment h2::after {
	content: "";
	display: block;
	position: absolute;
	background: url(../images/tit_icon.png) no-repeat;
	width: 292px;
	height: 20px;
	left: 50%;
	margin-left: -146px;
	bottom: -40px;
}

.about-service ul {
	margin-top: 60px;
}

.about-service li {
	margin-bottom: 74px;
}

.about-service li .img {
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: url(../images/about-line.png) #f32b1c no-repeat center;
	padding: 15px;
	margin-top: -46px;
	position: relative;
	z-index: 2;
}

.about-service li .img img {
	display: block;
	border-radius: 50%;
}

.about-service li .txt {
	border: 1px solid #f5f5f5;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
	position: relative;
	background: #ffffff;
}

.about-service li .txt h4 {
	font-size: 28px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #f32b1c;
	font-weight: bold;
	margin-top: 25px;
}

.about-service li .txt p {
	font-size: 16px;
	line-height: 2;
	margin: 20px 0 24px;
}

.about-service .about-li .txt {
	margin-left: 19.6%;
	padding: 0 50px 0 11.3%;
	border-radius: 0 0 40px 0;
}

.about-service .about-li .img {
	float: left;
}

.about-service .about-li1 .img {
	float: right;
}

.about-service .about-li1 .txt {
	margin-right: 19.6%;
	padding: 0 11.3% 0 50px;
	border-radius: 0 0 0 40px;
}

.about-service li:nth-child(3) .txt p {
	margin: 20px 0 56px;
}

.about-service li.about-li1 .txt::after {
	content: '';
	width: 656px;
	height: 256px;
	background: url(../images/about-bj.png) no-repeat;
	position: absolute;
	top: -40px;
	right: 0;
	z-index: -1;
	transform: rotateY(180deg);
}

.about-service li.about-li .txt::after {
	content: '';
	width: 656px;
	height: 256px;
	background: url(../images/about-bj.png) no-repeat;
	position: absolute;
	top: -40px;
	left: 0;
	z-index: -1;
}

@media (max-width:992px) {
	.about-service li .img {
		width: 220px;
		height: 220px;
		margin-top: -32px;
	}

	.about-service li.about-li1 .txt::after,
	.about-service li.about-li .txt::after {
		width: 430px;
		height: 206px;
		top: -30px;
	}

	.about-service .about-li .txt {
		margin-left: 14%;
		padding: 0 30px 0 16%;
	}

	.about-service .about-li1 .txt {
		margin-right: 14%;
		padding: 0 13% 0 30px;
	}

	.about-service li .txt h4 {
		font-size: 22px;
	}

	.about-service li .txt p {
		font-size: 14px;
		min-height: 84px;
		margin: 8px 0 16px;
	}

	.about-service li:nth-child(3) .txt p {
		margin: 10px 0 15px;
	}
}

@media (max-width:768px) {
	.about-service .about-li .txt {
		padding: 0 20px 0 20%;
	}

	.about-service li {
		margin-bottom: 40px;
	}

	.about-service li .img {
		width: 180px;
		height: 180px;
		margin-top: -10px;
	}

	.about-service li .txt h4 {
		font-size: 18px;
	}
}

@media (max-width:680px) {

	.about-service li.about-li1 .txt::after,
	.about-service li.about-li .txt::after {
		display: none;
	}

	.about-service li .txt h4 {
		margin-top: 15px;
	}

	.about-service li .img {
		width: 150px;
		height: 150px;
		padding: 6px;
		margin-top: 0;
	}

	.about-service .about-li .txt {
		padding: 0 20px 0 13%;
	}

	.about-service .about-li1 .txt {
		padding: 0 10% 0 20px;
	}

	.about-service ul {
		padding-top: 0;
	}

}

@media (max-width:540px) {
	.about-service li .img {
		width: 100px;
		height: 100px;
		padding: 4px;
		margin-top: 0;
	}

	.about-service .about-li1 .txt {
		padding: 0 20px 0 8%;
	}
}



.about-equipment_item a {
	display: block;
	position: relative;
	overflow: hidden;
}

.about-equipment_item a img {
	width: 100%;
	transition: transform 0.3s ease;
}

.about-equipment_item:hover img {
	transform: scale(1.1, 1.1);
	-webkit-transform: scale(1.1, 1.1);
}

.about-equipment_tt {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 200px;
	color: #fff;
	font-size: 18px;
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	align-items: flex-end;
	-webkit-align-items: flex-end;
	-ms-align-items: flex-end;
	padding: 0 5% 30px;
	background: url(../images/equipment_bg.png) repeat-x center bottom /auto 100%;
}


/* .about-honor ul li {
	vertical-align: top;
	position: relative;
	display: inline-block;
} */

.about-honor ul li:after {
	content: "";
	width: 3.75vw;
	height: 1px;
	display: block;
	margin-top: .57vw;
	background: #999999
}

.about-honor ul li .pic {
	display: block;
	border-radius: 1.04vw;
	overflow: hidden
}

.about-honor ul li .pic img {
	width: 100%;
	display: block
}

.about-honor ul li .title {
	max-height: 3.13vw;
	display: block;
	margin-top: 1.04vw;
	font-size: 1.04vw;
	color: #999999;
	font-weight: normal;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden
}

.about-honor ul li:hover:after {
	background: #fab248;
	background: -webkit-linear-gradient(left, #fab248, #e3870b)
}

.about-honor ul li:hover .title {
	color: #e3870b;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: -webkit-linear-gradient(left, #e3870b, #fab248)
}

.about-honor::before {
	right: 0;
	top: 0;
	background: url(../images/products2zs1.jpg) right top no-repeat;
	background-size: 100%;
}

.about-honor::after {
	content: "";
	left: 0;
	bottom: -30%;
	background: url(../images/products2zs2.jpg) left bottom no-repeat;
	background-size: 100%;
}

.about-honor {
	position: relative;
	overflow: hidden;
}

.about-honor:before,
.about-honor:after {
	content: "";
	width: 50vw;
	height: 50vw;
	max-width: 960px;
	max-height: 960px;
	position: absolute;
	z-index: -1;
	opacity: 0.5
}

.about-honor h2,
.about-test h2 {
	margin-bottom: 30px;
	text-align: center;
}



.about-test .cppic {
	display: block;
	position: relative;
	overflow: hidden;
}

.about-test .cppic::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	bottom: 0;
	background-image: linear-gradient(transparent, #000);
	opacity: 0;
	transition: all linear 0.4s;

}

.about-test .cppic .more {
	display: block;
	position: absolute;
	left: -40%;
	bottom: 7.5%;
	opacity: 0;
	font-size: 22px;
	color: #ffffff;
	font-family: "PingFang_Bold";
	transition: all linear 0.4s;
}


.about-test .test-item:hover .cppic:before {
	opacity: 1;
}

.about-test .cppic:hover .more {
	left: 8.69565%;
	opacity: 1;
}



/* application page */

.bt h3 {
	font-size: 40px;
	color: #212121;
	font-weight: 700;
	line-height: 1;
	position: relative;
	z-index: 20;
}

.bt h3::before {
	display: block;
	content: attr(data-tit);
	white-space: nowrap;
	color: #fff;
	position: absolute;
	left: 0;
	top: -38px;
	font-size: 98px;
	line-height: 1;
	z-index: -1;
	text-shadow: rgba(210, 217, 221, 0.75) 1px 0 0, rgba(210, 217, 221, 0.75) 0 1px 0, rgba(210, 217, 221, 0.75) -1px 0 0, rgba(210, 217, 221, 0.75) 0 -1px 0;
}

.bt h3::after {
	display: block;
	content: '';
	width: 80px;
	height: 2px;
	background: #6382f7;
	margin: 10px auto 0 0;
}

.bt p {
	margin: 40px 0 0;
	line-height: 36px;
	font-size: 17px;
	color: #666;
}

.application-area ul li>a {
	position: relative;
	overflow: hidden;
	display: block;
}

.application-area ul li img {
	display: block;
	width: 100%;
	/* aspect-ratio: 1/ 1; */
	object-fit: cover;
}

.application-area ul li .txt {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 10;
	padding: 0 34px 29px;
	transition: opacity 0.2s, transform 0.35s;
	display: flex;
	justify-content: flex-end;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.application-area ul li .txt::after {
	content: "";
	background: #6382f7;
	opacity: 0.85;
	height: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	transition: all 0.3s ease 0s;
}

.application-area ul li .txt>* {
	position: relative;
	z-index: 10;
}

.application-area ul li .txt h4 {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	line-height: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}


.application-area ul li .txt .more {
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	margin: 25px 0 0;

}

.application-area ul li .txt .more i {
	color: #fff;
	font-size: 12px;
	border-radius: 50%;
	width: 26px;
	height: 26px;
	border: 1px solid #fff;
	line-height: 24px;
	display: inline-block;
	text-align: center;
	margin-right: 20px;
}

.application-area ul li:hover .txt::after {
	height: 100%;
}


.application-area ul li:hover .more i {
	background: #FAFBFB;
	color: #000000;
	border-color: #FAFBFB;
}

/* page-form */

.page-form {
	background: url(../images/form-bg.jpg) no-repeat center center / cover;
	padding: 45px 0;
}

.footer_inq_con {
	display: flex;
}

.footer_inq_con_l {
	width: 30%;
}

.footer_inq_con_l h3 {
	color: white;
}

.footer_inq_con_l p {
	color: #FFFFFF;
}

.footer_inq_con_r {
	width: 65%;
	float: right;
	padding-left: 15px;
}

.footer_inq_form {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	justify-content: space-between;
	-ms-justify-content: space-between;
	-webkit-justify-content: space-between;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.footer_inq_form dd {
	width: calc((100% - 28px) / 3);
	margin-bottom: 14px;
}

.footer_inq_form dd.ddw {
	width: 100%;
}

.footer_inq_form_text {
	display: block;
	width: 100%;
	height: 50px;
	padding-left: 20px;
	font-size: 16px;
	color: #fff;
	background: rgba(255, 255, 255, .25);
	border: 1px solid rgba(255, 255, 255, .5);
}

.footer_inq_form_text::-webkit-input-placeholder {
	color: #fff;
}

.footer_inq_form_btn {}

.footer_inq_form dd:last-child {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	justify-content: flex-end;
	-ms-justify-content: flex-end;
	-webkit-justify-content: flex-end;
	margin-bottom: 0;
}

.footer_inq_form_btn {
	display: flex;
	display: -ms-flexbox;
	display: -webkit-flex;
	justify-content: center;
	-ms-justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	width: 150px;
	line-height: 40px;
	font-size: 14px;
	text-align: center;
	color: #fff;
	background: #f32b1c;
	border: none;
}

.btnHover2 {
	position: relative;
	overflow: hidden;
}

.btnHover2:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	-o-transition: all .5s;
	transition: all .5s;
	opacity: 1;
	-webkit-transform: translate(-105%, 0);
	transform: translate(-105%, 0);
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #fff;
	background-color: rgba(255, 255, 255, .25);
}

.btnHover2:hover:before {
	opacity: 0;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}


/* product page */



.product-inner {
	background: white;
	border-radius: 32px;
	box-shadow: 0 20px 35px -8px rgba(0, 10, 30, 0.15);
	overflow: hidden;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: row;
	gap: 2rem;
	padding: 2rem 2rem 2rem 2rem;
}

/* ---------- 左侧 图片区 ---------- */
.gallery-area {
	flex: 1 1 50%;
	min-width: 280px;
}

.main-image-container {
	background: #f8fafc;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.02), 0 8px 20px -8px rgba(0, 20, 40, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.03);
	aspect-ratio: 5 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main-image-container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: #f0f3f7;
	transition: opacity 0.15s ease;
	display: block;
}

.thumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	list-style: none;
}

.thumb-list li {
	width: 90px;
	height: 70px;
	border-radius: 14px;
	border: 2px solid transparent;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.2s ease;
	background: white;
	box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.08);
	flex-shrink: 0;
}

.thumb-list li.active {
	border-color: #6382f7;
	box-shadow: 0 6px 14px -4px #1f5fdf60;
	transform: scale(1.02);
}

.thumb-list li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.details-area {
	flex: 1 1 45%;
	padding: 0.5rem 0 0.5rem 1rem;
	display: flex;
	flex-direction: column;
}

.details-area h1 {
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.2;
	color: #0b1a33;
	margin-bottom: 0.75rem;
}


.details-area p {
	color: #2c3d55;
	line-height: 1.6;
	margin: 1rem 0;
	font-size: 1rem;
	border-top: 1px solid #e7ecf3;
	padding-top: 1.5rem;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #f9fbfe;
	border-radius: 22px;
	padding: 1.2rem 1.5rem;
	margin: 1.2rem 0 1.8rem;
	border: 1px solid #eef2f8;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #1f2c40;
}

.meta-item .label {
	font-weight: 500;
	min-width: 70px;
	color: #617388;
}

.meta-item .value {
	font-weight: 600;
}

.add-to-cart {
	background: #6382f7;
	color: white;
	border: none;
	padding: 1rem 2rem;
	font-size: 1.2rem;
	font-weight: 600;
	border-radius: 60px;
	cursor: pointer;
	box-shadow: 0 12px 20px -10px #6382f7b0;
	transition: all 0.2s ease;
	width: fit-content;
	min-width: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 0.5rem;
	border: 1px solid #144bb0;
}

.add-to-cart:hover {
	background: #000000;
	box-shadow: 0 16px 24px -8px #1f5fdfcc;
	transform: translateY(-2px);
}

.add-to-cart:active {
	background: #0c3892;
	transform: translateY(1px);
	box-shadow: 0 6px 12px -6px #1f5fdf;
}
@media (max-width: 980px){
	.details-area h1{font-size:1.8rem;}
	.p-con h2{font-size:28px;}
	.p-con h3{font-size:22px;}
	.p-con h4{font-size:20px;}
}

@media (max-width: 760px) {
	.product-inner {
		flex-direction: column;
		padding: 1.5rem;
	}

	.details-area {
		padding-left: 0;
	}

	.thumb-list li {
		width: 80px;
		height: 65px;
	}

	.product-title {
		font-size: 1.8rem;
	}
	.details-area h1{font-size:20px;}
}

@media (max-width: 420px) {
	.thumb-list li {
		width: 70px;
		height: 58px;
	}
}

.p-con h2 {
	padding: 8px 0;
	font-size: 30px;
}

.p-con h3 {
	position: relative;
	padding-left: 0;
    margin: 8px 0;
}

.p-con h3::after {
	content: '';
	z-index: -1;
	position: absolute;
	bottom: 2px;
	width: 109px;
	height: 9px;
	left: 0;
	right: 0;
	background: #6382f7;
}

.p-con img {
	display: block;
	margin: 8px auto;

}

.p-con p{
	padding-left:0px;
	padding-right:0px;
}

.p-con p a {
	text-decoration: underline;
	text-decoration-style: wavy;
	text-decoration-color: black;
	color: #f32b1c;
	font-weight: 600;
}

.p-con p strong{
	color:#6382f7;
}

.p-con .table-responsive {
	border-radius: 1.5rem;
	box-shadow: 0 20px 35px -10px rgba(0, 20, 30, 0.15),
		0 2px 8px -4px rgba(0, 0, 0, 0.05);
	border: 1px solid #e9edf2;
	overflow: hidden;
	width: 100%;
	
	transition: box-shadow 0.2s ease;
	margin: 30px 0;
	padding: 0;
}

.p-con .table-header {
	padding: 1.25rem 1.5rem 0.25rem 1.5rem;
	background: white;
	font-size: 1.35rem;
	font-weight: 550;
	letter-spacing: -0.01em;
	color: #0b1c2e;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 1px solid transparent;
}

.p-con .table-header span {
	background: #1f2a3f;
	color: white;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.2rem 0.7rem;
	border-radius: 30px;
	margin-left: 0.75rem;
	letter-spacing: 0.3px;
}

.p-con .table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	table-layout: auto;
	min-width: 600px;
}


.p-con .table thead tr {
	background-color: #1f2937;
}

.p-con .table th {
	color: #ffffff;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 1rem 1.2rem;
	white-space: nowrap;
	border-bottom: 3px solid #3f4a5a;
	text-align: left;
	background: #000000;
}


.p-con .table td {
	padding: 1rem 1.2rem;
	border-bottom: 1px solid #e6ecf2;
	background-color: transparent;
	color: #1e2b3a;
	line-height: 1.45;
}

.p-con .table tbody tr:nth-child(even) {
	background-color: #f8fafd;
}

.p-con .table tbody tr:hover {
	background-color: #ecf3fa;
	transition: background-color 0.15s ease;
	cursor: default;
}

.p-con .table tbody tr:last-child td {
	border-bottom: none;
}



.p-con .table td:first-child {
	font-weight: 500;
	color: #0f263b;
}

@media (max-width: 480px) {

	.p-con .table-header {
		padding: 1rem 1rem 0.25rem 1rem;
		font-size: 1.2rem;
	}

	.p-con .table th,
	.p-con .table td {
		padding: 0.85rem 1rem;
	}
}

.p-con h1{
	border-bottom: 4px solid #d2d2d2;
	font-size: 36px;
	color: #6382f7;
	padding-left: 0;
	margin-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.p-con ul li {
	position: relative;
	padding-left: 1.5rem;
	color: #333;
	font-size: 14px;
	line-height: 25px;
	margin: 8px 0;
}

.p-con ul li::before {
	content: '\2726';
	font-family: 'iconfont';
	font-size: 20px;
	color: #f32b1c;
	position: absolute;
	left: 0;
	top: 0px;
}

.p-con ol li {
	position: relative;
	padding-left: 2.5em;
	margin-bottom: 0.8em;
	font-size: 14px;
	line-height: 25px;
	color: #333;
	font-size: 14px;
	margin: 8px 0;
}


.p-con ol li::before {
	counter-increment: step-counter;
	content: counter(step-counter);
	position: absolute;
	left: 8px;
	width: 1.5em;
	height: 1.5em;
	background: #6382f7;
	color: #ffffff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	top: 0px;
}



.related-products ul li {
	float: left;
	width: 23.28125%;
	margin-left: 2.26562%;
	padding: 27px 29px;
	position: relative;
	box-shadow: 4px 4px 6px rgba(20, 28, 79, 0.15);
	margin-bottom: 30px;
}

.related-products ul li img {
	z-index: 2;
	position: relative;
	margin-bottom: 15px;
}

.related-products ul li:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	top: 0;
	left: 0;
	background: url(../images/sevice-libg.png) center no-repeat;
	background-size: cover
}

.related-products ul li:after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 16px;
	right: 16px;
	background: #3359a2;
	transform: skewY(3deg);
	border: 1px solid #fff
}

.related-products ul li:first-child {
	margin-left: 0
}

.related-products ul li .letter {
	position: relative;
	z-index: 5;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related-products ul li h4 a {
	position: relative;
	z-index: 5;
	color: #333;
	font-size: 18px;
}

.related-products ul li:hover h4 a{
	color:#458beb;
}


.related-products ul li span {
	margin-bottom: 14px;
	display: block;
	color: #fff;
	font-size: 14px;
	background: #3359a2;
	width: 46px;
	height: 21px;
	border-radius: 7px;
	text-align: center;
	line-height: 21px;
	position: relative;
	z-index: 5
}

@media screen and (max-width: 992px) {
	.related-products ul li:first-child {
		margin-left: 2%;
	}

	.related-products ul li {
		width: 47%;
		margin-left: 3%;
		margin-top: .64rem;
		padding: .56rem;
		box-shadow: .05333rem .05333rem .08rem rgba(20, 28, 79, 0.15);
	}

	.related-products ul li:after {
		left: .24rem;
		right: .24rem;
	}
}


.latest-news h3,
.related-products h3 {
	display: table;
	margin: 0 auto 4.17vw;
	font-size: 2.6vw;
	text-transform: uppercase;
	font-family: "arialbd";
}

.latest-news h3 a,
.related-products h3 a {
	display: block;
	color: #458beb;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	background-image: -webkit-linear-gradient(left, #b9c7ff, #6382f7);
}

.latest-news .list {
	margin-left: -7.87879%;
	position: relative;
	overflow: hidden
}

.latest-news .list:before {
	content: "";
	width: 1px;
	position: absolute;
	left: 54%;
	top: 0;
	bottom: 0;
	background: #e7effb
}

.latest-news .list li {
	width: 42.12121%;
	float: left;
	margin-left: 7.87879%
}

.latest-news .list li .news_title {
	display: block;
	font-size: 16px;
	color: #333333;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	transition: all linear 0.4s
}

.latest-news .list li .news_title i {
	width: 16px;
	height: 16px;
	display: inline-block;
	margin-right: 10px;
	position: relative;
	background: #68a9f3;
	background: linear-gradient(#192c3e, #6382f7);
	border-radius: 50%;
	transition: all linear 0.4s
}

.latest-news .list li .news_title i:before {
	content: "";
	display: block;
	position: absolute;
	left: .1vw;
	right: .1vw;
	top: .1vw;
	bottom: .1vw;
	background: #6382f7;
	border-radius: 50%;
	box-shadow: 0 0 .16vw .1vw #fff inset;
	transition: all linear 0.4s
}

.latest-news .list li .news_time {
	display: block;
	margin-top: 10px;
	font-size: 12px;
	color: #6382f7;
}

.latest-news .list li .news_text {
	height: 40px;
	display: block;
	margin-top: 10px;
	font-size: 14px;
	color: #999999;
	line-height: 20px;
	text-align: justify;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	transition: all linear 0.4s
}

.latest-news .list li:hover .news_title {
	color: #f32b1c;
}

.latest-news .list li:hover .news_title i {
	background: #e3870b;
	background: linear-gradient(#b9c7ff, #6382f7)
}

.latest-news .list li:hover .news_title i:before {
	background: #f32b1c;
}

.latest-news .list li:hover .news_text {
	color: #444;
}

.latest-news .list li+li+li {
	margin-top: 3.44vw
}

@media (max-width: 960px) {
	.latest-news .list li {
		width: 100%;
		float: none;
		margin-left: 0;
	}

	.latest-news .list:before {
		display: none
	}

}


/* news */

.top-text h1,
.news-list h1 {
	font-size: 2.2rem;
	border-left: 6px solid #f32b1c;
	padding-left: 20px;
	color: #093457;
}

.top-text p {
	background: #f0f9ff;
	padding: 16px 24px;
	border-radius: 40px 40px 40px 12px;
	max-width: 90%;
	margin-top: 12px;
	border: 1px solid #d3e6f7;
}


.new-slick {
	position: relative;
	margin: 40px 0 36px;
	background: #f9fdff;
	border-radius: 32px;
	border: 1px solid #d6ddf9;
	padding: 30px;
}

.slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	background: #ffffff;
	border: 2px solid #bed9f0;
	border-radius: 50%;
	cursor: pointer;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #1d5a8b;
	transition: 0.2s;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
	user-select: none;
}

.slick-arrow:hover {
	background: #6382f7;
	border-color: #6382f7;
	color: white;
}

.slick-prev {
	left: -20px;
}

.slick-next {
	right: -20px;
}

.slick-card {
	position: relative;
	min-height: 350px;
}

.card-item {
	display: none;
	gap: 30px;
	align-items: center;
}

.card-item.active {
	display: flex;
}

.card-image {
	flex: 0 0 40%;
	border-radius: 24px;
	overflow: hidden;
	aspect-ratio: 310 / 200;
	background: #e3effa;
	box-shadow: 0 12px 24px -10px rgba(0, 60, 100, 0.3);
}

.card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card-content {
	flex: 1;
}

.card-content .tit {
	font-size: 2rem;
	font-weight: 600;
	color: #0a314b;
	text-decoration: none;
	line-height: 1.3;
	display: inline-block;
	margin-bottom: 12px;
}

.card-content .tit:hover {
	color: #f32b1c;
}

.card-content .date {
	display: inline-block;
	background: #e7ecff;
	padding: 6px 22px;
	border-radius: 50px;
	font-size: 1rem;
	color: #20668f;
	font-weight: 500;
	margin: 8px 0 18px;
}

.card-content p {
	color: #2b4a6b;
	font-size: 1.1rem;
	line-height: 1.8;
	margin-bottom: 30px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-content .more-a {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 2px solid #bed9f0;
	padding: 12px 34px;
	border-radius: 50px;
	font-weight: 600;
	color: #0d3b5e;
	text-decoration: none;
	gap: 10px;
	transition: 0.2s;
}

.card-content .more-a:hover {
	background: #6382f7;
	border-color: #6382f7;
	color: #fff;
}

.card-content .more-a img {
	width: 18px;
	height: 14px;
	filter: invert(30%) sepia(30%) saturate(800%) hue-rotate(165deg);
	transition: 0.2s;
}

.card-content .more-a:hover img {
	filter: brightness(0) invert(1);
	transform: translateX(5px);
}

.slick-dots {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
	list-style: none;
}

.slick-dots li {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #c2d8ec;
	cursor: pointer;
	transition: 0.2s;
}

.slick-dots li.active {
	background: #f32b1c;
	transform: scale(1.3);
}

@media screen and (max-width: 900px) {
	.card-item.active {
		flex-direction: column;
		text-align: center;
	}

	.card-image {
		flex: auto;
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}

	.card-content .tit {
		font-size: 1.8rem;
	}
}

@media screen and (max-width: 600px) {
	.new-slick {
		padding: 20px;
	}

	.slick-arrow {
		width: 40px;
		height: 40px;
		font-size: 24px;
	}

	.slick-prev {
		left: -10px;
	}

	.slick-next {
		right: -10px;
	}

	.card-content .tit {
		font-size: 1.5rem;
	}
}

.top-list {
	margin-top: 30px;
	border-top: 2px solid #d6ddf9;
	padding-top: 32px;
	list-style: none;
	width: 100%;
}

.top-list li {
	float: left;
	overflow: hidden;
	margin-bottom: 10px;
	border-bottom: 1px dashed #c8ddef;
}

.top-list li a {
	display: block;
	color: #000000;
	line-height: 38px;
	font-size: 18px;
	padding-left: 30px;
	background: url(../images/icon.png) no-repeat left center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.top-list li span {
	display: block;
	float: right;
	line-height: 38px;
	font-size: 16px;
	color: #999999;
	margin-left: 40px
}

.top-list li:hover a {
	padding-left: 50px;
	color: #f64949
}





.news-ul li .img {
	float: left;
	display: block;
	width: 30%;
	object-fit: cover;
	overflow: hidden;
	height: 160px;
}

.news-ul li .img img {
	display: block;
	width: 100%
}

.news-ul li .text {
	float: right;
	width: 68%;
	padding-left: 18px;
	position: relative
}

.news-ul li .text .tit {
	display: block;
	font-size: 18px;
	color: #333333;
	line-height: 28px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
	margin-bottom: 10px
}

.news-ul li .text p {
	font-size: 16px;
	color: #666666;
	line-height: 28px;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	height: 56px;
	margin-bottom: 30px
}

.news-ul li .text span {
	font-size: 16px;
	color: #666666;
	line-height: 26px;
	display: inline-block
}

.news-ul li .text .more {
	display: block;
	width: 80px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #cf3535;
	background: -moz-linear-gradient(left, #fd4c4c 0%, #cf3535 100%);
	background: -webkit-linear-gradient(left, #fd4c4c 0%, #cf3535 100%);
	background: -o-linear-gradient(left, #fd4c4c 0%, #cf3535 100%);
	background: -ms-linear-gradient(left, #fd4c4c 0%, #cf3535 100%);
	background: linear-gradient(to right, #fd4c4c 0%, #cf3535 100%);
	background-position: left center;
	background-size: 200% 100%;
	background-repeat: no-repeat;
	transition: background-position .6s ease;
	position: absolute;
	right: 0;
	bottom: 0px;
	border-radius: 4px 0 4px 0
}

.news-ul li .text .more:hover {
	background-position: right center
}

.news-ul li:hover {
	-webkit-box-shadow: 4px 10px 16px rgba(69, 0, 5, 0.05);
	-moz-box-shadow: 4px 10px 16px rgba(69, 0, 5, 0.05);
	-ms-box-shadow: 4px 10px 16px rgba(69, 0, 5, 0.05);
	-o-box-shadow: 4px 10px 16px rgba(69, 0, 5, 0.05);
	box-shadow: 4px 10px 16px rgba(69, 0, 5, 0.05);
	background-color: #fff
}

.news-ul li:hover .text .tit {
	color: #f32b1c
}



.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 30px 0;
	font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}


.pagination {
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px
}

.pagination>li {
    display: inline
}

.pagination>li>a,.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd
}

.pagination>li>a:hover,.pagination>li>span:hover,.pagination>li>a:focus,.pagination>li>span:focus {
    color: #2a6496;
    background-color: #eee;
    border-color: #ddd
}

.pagination>.active>a,.pagination>.active>span,.pagination>.active>a:hover,.pagination>.active>span:hover,.pagination>.active>a:focus,.pagination>.active>span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #6382f7;
    border-color: #224ff9;
}

.pagination>.disabled>span,.pagination>.disabled>span:hover,.pagination>.disabled>span:focus,.pagination>.disabled>a,.pagination>.disabled>a:hover,.pagination>.disabled>a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd
}

.pagination-lg>li>a,.pagination-lg>li>span {
    padding: 10px 16px;
    font-size: 18px
}

.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px
}

.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px
}

.pagination-sm>li>a,.pagination-sm>li>span {
    padding: 5px 10px;
    font-size: 12px
}

.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px
}

.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px
}
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 8px;
	border-radius: 8px;
	background-color: #f5f7fa;
	color: #2c3e50;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.2s ease;
	border: 1px solid transparent;
	box-sizing: border-box;
	user-select: none;
}

.pagination a:hover {
	background-color: #f32b1c;
	border-color: #d0d7de;
	color: #ffffff;
}

.pagination .current {
	background-color: #6382f7;
	border-color: #224ff9;
	color: white;
	font-weight: 600;
	cursor: default;
	pointer-events: none;
}

.pagination .prev,
.pagination .next {
	background-color: #ffffff;
	border: 1px solid #dde0e5;
	padding: 0 16px;
	gap: 4px;
}

.pagination .prev:hover,
.pagination .next:hover {
	background-color: #f1f3f5;
	border-color: #bdc3cd;
}

.pagination .disabled {
	background-color: #f1f3f5;
	color: #a0aec0;
	border-color: #e2e8f0;
	cursor: not-allowed;
	pointer-events: none;
}

.pagination .ellipsis {
	background: transparent;
	border: none;
	color: #7f8c8d;
	font-weight: 400;
	min-width: auto;
	padding: 0 4px;
	pointer-events: none;
}



.article-tag {
	border-top: 2px solid #e2eaf2;
	padding-top: 35px;
	margin-top: 30px;
}


.entry-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 12px 18px;
	margin-bottom: 30px;
}

.entry-tags .section-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2b4f6e;
	letter-spacing: 0.5px;
	background: #ecf3fa;
	padding: 6px 18px;
	border-radius: 50px;
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tag-list a {
	background: #f0f6fd;
	color: #1d4e7a;
	padding: 8px 20px;
	border-radius: 40px;
	font-size: 0.95rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid #d6ddf9;
	transition: all 0.2s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.tag-list a i {
	font-size: 0.8rem;
	color: #6382f7;
}

.tag-list a:hover {
	background: #6382f7;
	border-color: #6382f7;
	color: white;
}

.tag-list a:hover i {
	color: white;
}


.share-section {
	margin-bottom: 35px;
	padding: 20px 0;
	border-top: 1px dashed #c5d7e8;
	border-bottom: 1px dashed #c5d7e8;
}

.share-section .section-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2b4f6e;
	background: #ecf3fa;
	padding: 6px 18px;
	border-radius: 50px;
	float: left;
}

.share-section p {
	float: left;
	padding-left: 15px;
	margin-top: 10px;
}

.share-section p a {
	text-decoration: none;
}

.share-section p a:hover{
	color: #f32b1c;
}



.post-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.post-navigation .nav-link {
	flex: 1 1 240px;
	background: #f9fcff;
	border: 1px solid #d6ddf9;
	border-radius: 28px;
	padding: 18px 24px;
	text-decoration: none;
	transition: 0.2s;
	display: flex;
	align-items: center;
	gap: 15px;
}

.post-navigation .nav-link.prev {
	text-align: left;
}

.post-navigation .nav-link.next {
	text-align: right;
	justify-content: flex-end;
}

.post-navigation .nav-link:hover {
	background: #6382f7;
	border-color: #6382f7;
}

.post-navigation .nav-link:hover .nav-direction,
.post-navigation .nav-link:hover .nav-title {
	color: white;
}

.post-navigation .nav-direction {
	font-size: 1rem;
	font-weight: 500;
	color: #6f8fa8;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color 0.2s;
}

.post-navigation .nav-link.prev .nav-direction i {
	font-size: 1.2rem;
}

.post-navigation .nav-link.next .nav-direction i {
	font-size: 1.2rem;
	order: 2;
}

.post-navigation .nav-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #1a405e;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 300px;
	transition: color 0.2s;
}

.post-navigation .nav-link:hover .nav-title {
	color: white;
}

.date {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.date span {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 18px;
	color: #444;
	
}


.date time {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-size: 18px;
	color: #444;

}

.date time img, .date span img {
	margin-right: 15px;
}

.p-con ol{
	counter-reset: step-counter;
}