/*--------------------------------------------------------------Template name : RedTheme - IT Website TemplateAuthor :
ZRTHEMESVersion : 2.0File Description : Main css file of the
template--------------------------------------------------------------*/
/*--------------------------------------------------------------# Table of
Conetent--------------------------------------------------------------* General* Header* Breadcrumbs* Single Page*
Scroll top* Preloader* Disable aos animation delay* Top Bar* Desktop Navigation* Mobile Navigation* About Section*
Featured Section* Single Service Page* Skills Section* Clients Section* Testimonials Section* Our Team Section*
Frequently Asked Questions Section* Recent Blog Posts Section* Hero Section* Call To Action Section* Stats Counter
Section* Portfolio Section* Contact Section* Particles* Download Section* Pricing* Contact*
Footer--------------------------------------------------------------*/
/*--------------------------------------------------------------#
General--------------------------------------------------------------*/
:root {
--font-default: 'Poppins', sans-serif;
--font-primary: 'Poppins', sans-serif;
--font-secondary: 'Poppins', sans-serif;
	--primary: #c00113;
	--secondary: #ff9e00;
	--accent: #ff6600;
	--light: #f8f9fa;
	--dark: #212529;
	--gray: #6c757d;
	--light-gray: #e9ecef;
	--border: 1px solid #e2e8f0;
	--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.12);
	--radius: 12px;
	--gradient-primary: linear-gradient(135deg, #c00113 0%, #e63946 100%);
	--gradient-secondary: linear-gradient(135deg, #1a365d 0%, #2d3748 100%);
}

:root {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
color: #5F5F65;
background: #ffffff;
line-height: 2;
letter-spacing: 0.2px;
font-size: 15px;
overflow-x: hidden;
display: block;
}


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

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

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-primary);
}

[class^="flaticon-"]:before,
[class*=" flaticon-"]:before,
[class^="flaticon-"]:after,
[class*=" flaticon-"]:after {
font-size: 44px;
font-style: normal;
color: var(--primary);
}

/*--------------------------------------------------------------# Sections & Section
Header--------------------------------------------------------------*/
.section {
padding: 60px 0;
overflow: hidden;
background: #ffffff;
}

.section-grey {
padding: 60px 0;
overflow: hidden;
background: #fafafa;
}

.sections-bg {
background-color: #fafafa;
}

.section-header {
text-align: center;
padding-bottom: 60px;
position: relative;
}

.section-header h1 {
font-size: 32px;
position: relative;
color: var(--primary);
}

.section-header p {
margin-bottom: 0;
color: #b9b9b9;
}

img {
transition: 0.3s;
width: 100%;
}

img:hover {
transform: translateY(-7px);
}

.text-right {
text-align: right;
}

/*--------------------------------------------------------------#
Breadcrumbs--------------------------------------------------------------*/
.breadcrumbs .page-header {
padding: 120px 0 60px 0;
min-height: 20vh;
background: url(../image/section-bg.jpg) center left;
background-size: cover;
border-radius: 0px;
overflow: hidden;
position: relative;
background-attachment: fixed;
}

.breadcrumbs .page-header::before {
content: '';
background: var(--primary);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.9;
z-index: 0;
}

.breadcrumbs .page-header h2 {
font-size: 34px;
color: #ffffff;
font-weight: 400;
}

.breadcrumbs .page-header h3 {
font-size: 45px;
font-weight: 300;
color: #fff;
font-family: var(--font-secondary);
}

.breadcrumbs .page-header p {
color: #ffffff;
font-weight: 400;
}

.breadcrumbs nav {
background-color: #f6f6f6;
padding: 20px 0;
}

.breadcrumbs nav ol {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 500;
color: var(#222222);
text-align: center;
align-items: center;
/* justify-content: center; */
}

.breadcrumbs nav ol a {
color: var(--primary);
transition: 0.3s;
}

.breadcrumbs nav ol a:hover {
text-decoration: underline;
}

.breadcrumbs nav ol li+li {
padding-left: 10px;
}

.breadcrumbs nav ol li+li::before {
display: inline-block;
padding-right: 10px;
color: var(--secondary);
content: "/";
}

.text-1-line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}

.text-2-line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.text-3-line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

.text-4-line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}

/*--------------------------------------------------------------# Single Page
Section--------------------------------------------------------------*/
.single-page ul li {
position: relative;
color: rgb(19 20 20 / 80%);
margin-bottom: 5px;
border-radius: 8px;
}

.single-page .team h4,
.single-page .team span {
color: #000000;
}

.single-page .recent-posts article {
background-color: #f7f7f7;
}

/*--------------------------------------------------------------# Stats Counter
Section--------------------------------------------------------------*/
.stats-counter {
background: url(../image/section-bg.jpg) center left;
background-size: cover;
padding: 100px 0px 20px;
border-radius: 0px;
overflow: hidden;
position: relative;
background-attachment: fixed;
}

.stats-counter:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--primary);
z-index: 0;
opacity: 0.9;
}

.stats-counter .stats-item .purecounter {
padding-right: 0;
}

.stats-counter .stats-item i {
font-size: 4rem;
line-height: 0;
color: var(--primary);
}
.stats-counter .stats-item{
    padding:25px 0;
}
.stats-counter .stats-item i:before {
color: #ffffff;
}

.stats-counter .stats-item span {
font-size: 2rem;
display: block;
color: #ffffff;
line-height: 34px;
}

.stats-counter .stats-item p {
margin: 0;
font-family: var(--font-primary);
font-size: 14px;
display: flex;
flex-direction: column;
align-items: center;
color: white;
}

.stats-counter .icon {
width: 142px;
text-align: center;
margin-right: 5;
margin-bottom: 20px;
}

.stats-counter .icon img {
width: 100%;
max-width: 70px;
}

/*--------------------------------------------------------------# Scroll Top
滚动到顶部--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: -15px;
z-index: 99999;
background: var(--primary);
width: 44px;
height: 44px;
border-radius: 50px;
transition: all 0.4s;
}

.scroll-top i {
font-size: 24px;
color: #fff;
line-height: 0;
}

.scroll-top:hover {
background: rgb(16 16 16 / 80%);
color: #fff;
}

.scroll-top.active {
visibility: visible;
opacity: 1;
bottom: 15px;
}

/*--------------------------------------------------------------# Disable aos animation delay on mobile
devices--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}

/*--------------------------------------------------------------# Top
Bar--------------------------------------------------------------*/
.topbar {
background: #00796b;
height: 40px;
font-size: 14px;
transition: all 0.5s;
color: #fff;
padding: 0;
}

.topbar .contact-info i {
font-style: normal;
color: #fff;
line-height: 0;
}

.topbar .contact-info i a,
.topbar .contact-info i span {
padding-left: 5px;
color: #fff;
}

@media (max-width: 575px) {

.topbar .contact-info i a,
.topbar .contact-info i span {
font-size: 13px;
}
}

.topbar .contact-info i a {
line-height: 0;
transition: 0.3s;
}

.topbar .contact-info i a:hover {
color: #fff;
text-decoration: underline;
}

.topbar .social-links a {
color: rgba(255, 255, 255, 0.7);
line-height: 0;
transition: 0.3s;
margin-left: 20px;
}

.topbar .social-links a:hover {
color: #fff;
}

.header {
transition: all 0.5s;
z-index: 997;
height: 90px;
}

.header.sticked {
position: fixed;
top: 0;
right: 0;
left: 0;
height: 90px;
}

.header .logo img {
max-height: 45px;
margin-right: 6px;
}

.header.stikcy-menu {
background: var(--primary);
}

.header.stikcy-menu .logo h1 {
color: var(--primary);
}

.header .logo h1 {
font-size: 30px;
margin: 0;
letter-spacing: 0.8px;
color: var(--primary);
font-family: var(--font-primary);
}

.header .logo h1 span {
color: var(--primary);
}

.sticked-header-offset {
margin-top: 0;
}

section {
scroll-margin-top: 70px;
}

.mb-25 {
margin-bottom: 25px;
}

/*--------------------------------------------------------------# Desktop
Navigation--------------------------------------------------------------*/
@media (min-width: 1280px) {
.navbar {
padding: 0;
}

.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}

.navbar li {
position: relative;
}

.navbar>ul>li {
white-space: nowrap;
padding: 10px 0 10px 28px;
}

.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-secondary);
font-size: 16px;
font-weight: 600;
color: #ffffff;
white-space: nowrap;
transition: 0.3s;
position: relative;
}

.navbar a i,
.navbar a:focus i {
font-size: 16px;
line-height: 0;
margin-left: 5px;
font-weight: 800;
}

.navbar a:hover:before,
.navbar li:hover>a:before,
.navbar .active:before {
visibility: visible;
width: 100%;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #ffffff;
}

.navbar .dropdown ul {
display: block;
position: absolute;
left: 28px;
top: calc(100% + 30px);
margin: 0;
padding: 10px 0;
z-index: 99;
opacity: 0;
visibility: hidden;
background: #ffffff;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: 0.3s;
border-radius: 8px;
}

.navbar .dropdown ul li {
min-width: 230px;
}

.navbar .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
font-weight: 600;
color: var(--primary);
}

.navbar .dropdown ul a i {
font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
font-weight: 700;
color: #fff;
}

.navbar .dropdown ul li:hover {
background-color: var(--primary);
}

.navbar .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}

.navbar .dropdown .dropdown ul {
top: 0;
left: calc(100% - 30px);
visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: 100%;
visibility: visible;
}
}

@media (min-width: 1280px) and (max-width: 1366px) {
.navbar .dropdown .dropdown ul {
left: -90%;
}

.navbar .dropdown .dropdown:hover>ul {
left: -100%;
}
}

@media (min-width: 1280px) {

.mobile-nav-show,
.mobile-nav-hide {
display: none;
}
}

/*--------------------------------------------------------------# Mobile
Navigation--------------------------------------------------------------*/
@media (max-width: 1279px) {
.navbar {
position: fixed;
top: 0;
right: -100%;
width: 100%;
max-width: 400px;
bottom: 0;
transition: 0.3s;
z-index: 9997;
}

.navbar ul {
position: absolute;
padding: 50px 0 10px 0;
margin: 0;
background: var(--primary);
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
width: 100%;
height: 100%;
}

.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
font-family: var(--font-primary);
font-size: 15px;
color: rgb(255 255 255);
white-space: nowrap;
transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #fff;
}

.navbar .getstarted,
.navbar .getstarted:focus {
background: var(--primary);
padding: 8px 20px;
border-radius: 4px;
margin: 15px;
color: #fff;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
color: #fff;
background: rgba(0, 131, 116, 0.8);
}

.navbar .dropdown ul,
.navbar .dropdown .dropdown ul {
position: static;
display: none;
padding: 10px 0;
margin: 10px 20px;
transition: all 0.5s ease-in-out;
background-color: var(--primary);
}

.navbar .dropdown>.dropdown-active,
.navbar .dropdown .dropdown>.dropdown-active {
display: block;
}

.mobile-nav-show {
color: rgb(255 255 255);
font-size: 28px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
z-index: 9999;
margin-right: 10px;
}

.mobile-nav-hide {
color: #fff;
font-size: 32px;
cursor: pointer;
line-height: 0;
transition: 0.5s;
position: fixed;
right: 20px;
top: 20px;
z-index: 9999;
}

.mobile-nav-active {
overflow: hidden;
}

.mobile-nav-active .navbar {
right: 0;
}

.mobile-nav-active .navbar:before {
content: "";
position: fixed;
inset: 0;
background: rgb(0 0 0 / 80%);
z-index: 9996;
}
}

/*--------------------------------------------------------------
# Featured Section
--------------------------------------------------------------*/
.featured {
position: relative;
}

.featured p {
margin-bottom: 20px;
}

.featured .description p {
margin-bottom: 0;
}

.left {
text-align: left;
}

.right {
text-align: left;
}

.list-wrap {
display: flex;
margin-bottom: 20px;
background: #fafafa;
border-radius: 8px;
padding: 20px;
transition: 0.2s;
}

.list-wrap:hover {
transform: translateY(-7px) !important;
}

.list-wrap h4 {
font-size: 1rem;
font-weight: 700;
}

.list-wrap p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.list-wrap:nth-child(3),
.list-wrap:nth-child(6) {
margin-bottom: 0;
}

.featured .icon {
width: 142px;
text-align: center;
margin-right: 5px;
margin-bottom: 20px;
}

.featured .icon img {
width: 100%;
max-width: 70px;
margin-right: 5px;
}

.list-center-wrap {
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
height: 100%;
flex-direction: column;
}

.list-center-wrap img {
width: 100%;
}

.center-icon {
width: 170px;
text-align: center;
}

.center-icon svg {
width: 100%;
}

.default-theme-btn {
position: relative;
z-index: 1;
overflow: hidden;
color: #ffffff;
font-size: 15px;
font-weight: 600;
text-align: center;
padding-left: 40px;
padding-right: 40px;
padding-top: 12px;
padding-bottom: 12px;
border-radius: 5px;
display: inline-block;
background-color: var(--primary);
box-shadow: 0 7px 25px rgb(192 1 19 / 27%);
-webkit-transition: 0.4s;
transition: 0.4s;
border: none;
}

.default-theme-btn span {
position: absolute;
z-index: -1;
width: 0;
height: 0;
display: block;
border-radius: 30px;
background-color: #a00311;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-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;
}

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

.default-theme-btn:hover span,
.default-theme-btn:focus span {
width: 200%;
height: 500px;
}

.default-theme-btn-one {
position: relative;
z-index: 1;
overflow: hidden;
color: var(--primary);
font-size: 15px;
font-weight: 600;
padding-top: 12px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 12px;
border-radius: 30px;
text-align: center;
display: inline-block;
background-color: #ffffff;
box-shadow: 0 7px 25px rgb(192 1 19 / 27%);
-webkit-transition: 0.4s;
transition: 0.4s;
border: none;
margin-top: 5px;
margin-right: 20px;
}

.default-theme-btn-one span {
position: absolute;
z-index: -1;
width: 0;
height: 0;
display: block;
border-radius: 30px;
background-color: #a00311;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-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;
}

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

.default-theme-btn-one:hover span,
.default-theme-btn-one:focus span {
width: 200%;
height: 500px;
}

.default-theme-btn-two {
position: relative;
z-index: 1;
overflow: hidden;
color: #ffffff;
font-weight: 600;
font-size: 15px;
padding-top: 12px;
padding-left: 40px;
padding-right: 40px;
padding-bottom: 12px;
text-align: center;
border-radius: 30px;
display: inline-block;
background-color: #a00311;
box-shadow: 0 7px 25px rgb(192 1 19 / 27%);
-webkit-transition: 0.4s;
transition: 0.4s;
border: none;
margin-top: 5px;
margin-right: 20px;
}

.default-theme-btn-two span {
position: absolute;
z-index: -1;
width: 0;
height: 0;
display: block;
border-radius: 30px;
background-color: #ffffff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-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;
}

.default-theme-btn-two:hover,
.default-theme-btn-two:focus {
color: var(--primary);
}

.default-theme-btn-two:hover span,
.default-theme-btn-two:focus span {
width: 200%;
height: 500px;
}

/*--------------------------------------------------------------# Clients Section
客户部分/友情链接--------------------------------------------------------------*/
.clients {
padding: 45px 0;
}

.clients .swiper {
padding: 10px 0;
}

.clients .swiper-slide img {
transition: 0.3s;
filter: grayscale(50%);
opacity: 1;
border-radius: 8px;
height: 50px;
}

.clients .swiper-slide img:hover {
transform: scale(1.1);
}

.clients .swiper-pagination {
margin-top: 20px;
position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: #fff;
opacity: 1;
background-color: #ddd;
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--primary);
}

/*--------------------------------------------------------------# Hero Section
首页头图--------------------------------------------------------------*/
.hero {
width: 100%;
position: relative;
background: url(../image/hero-bg.png) top center;
background-size: cover;
padding: 60px 0 0 0;
height: 100vh;
min-height: 600px;
max-height: 700px;
display: flex;
align-items: center;
overflow: hidden;
background-repeat: no-repeat;
}

.hero .circle {
color: var(--primary);
}

.social {
margin-top: 15px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}

.social a {
color: #a2a2a2;
transition: 0.3s;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}

.social a:hover {
color: var(--primary);
border-color: var(--primary);
}

.social i {
font-size: 14px;
margin: 0 2px;
}

.mr-20 {
margin-right: 20px !important;
}

.hero h1 {
font-size: 2rem;
margin-bottom: 20px;
font-weight: 700;
color: #ffffff;
text-transform: capitalize;
font-family: 'Comfortaa', sans-serif;
}

.hero h2 {
font-size: 1.2rem;
margin-bottom: 20px;
color: #ffffff;
text-transform: capitalize;
letter-spacing: 2px;
}

.hero span {
color: #ffffff;
font-weight: 800;
}

.hero p {
color: #a2a2a2;
font-weight: 400;
margin-bottom: 30px;
}

.hero .social i {
color: #ffffff;
}

.btn-get-started {
font-family: var(--font-primary);
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 14px 20px;
border-radius: 50px;
transition: 0.3s;
color: #ffffff;
background: transparent;
border: 2px solid #ffffff;
}

.btn-get-started:hover {
border-color: rgba(255, 255, 255, 1);
}

.hero .btn-watch-video {
font-size: 16px;
transition: 0.5s;
margin-left: 25px;
color: #fff;
}

.hero .btn-watch-video i {
color: rgba(255, 255, 255, 0.5);
font-size: 32px;
transition: 0.3s;
line-height: 0;
margin-right: 8px;
}

.hero .btn-watch-video:hover i {
color: #fff;
}

@media (max-width: 991px) {
.hero {
height: 100vh;
min-height: 900px;
max-height: 900px;
justify-content: flex-start;
align-items: flex-start;
}

.hero h2 {
font-size: 48px;
}

.call-to-action {
background: url(../images/cta-bg.jpg) center left;
background-size: cover;
padding: 150px 60px;
border-radius: 0px;
overflow: hidden;
text-align: center;
margin-top: 10px;
}

.text-right {
text-align: center;
}

.hero img {
max-width: 400px;
margin: 0 auto;
}
}

@media (max-width: 991px) {
.text-left.caption {
text-align: center;
margin-top: 200px;
}

.hero h1 {
font-size: 2rem;
}

.hero h2 {
font-size: 1rem
}

.caption .justify-content-start {
justify-content: center !important;
}

.caption .social {
justify-content: center;
}

.btn-get-started,
.hero .btn-watch-video {
font-size: 14px;
}

.icon-boxes .card-two {
margin-top: var(--bs-gutter-y);
margin-bottom: 0px;
padding-left: calc(var(--bs-gutter-x) * .5);
padding-right: calc(var(--bs-gutter-x) * .5);
}
}

@media (min-width: 768px) {

.btn-get-started,
.hero .btn-watch-video {
font-size: 14px;
}

.icon-boxes .card-two {
margin-top: -20px;
margin-bottom: -20px;
}
}

@media (max-width: 768px) {
.text-right {
text-align: center;
}

.left {
margin-bottom: 20px;
}
}

.icon-box span {
position: absolute;
z-index: -1;
width: 0;
height: 0;
top: 0;
display: block;
border-radius: 30px;
background-color: var(--primary);
-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;
}

.icon-box:hover span,
.icon-box:focus span {
width: 200%;
height: 200%;
}

.icon-box {
padding: 20px 20px;
position: relative;
overflow: hidden;
border-radius: 8px;
z-index: 1;
height: 100%;
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
-webkit-box-shadow: 0px 0px 13px 0px rgba(82, 90, 101, 0.12);
-moz-box-shadow: 0px 0px 13px 0px rgba(82, 90, 101, 0.12);
box-shadow: 0px 0px 13px 0px rgba(82, 90, 101, 0.12);
-webkit-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}

.icon-box .icon img {
width: 50px;
}

.icon-box .title {
margin-bottom: 15px;
font-size: 1.2rem;
color: var(--primary);
font-weight: 700;
}

.icon-box .title a {
color: var(--primary);
transition: 0.3s;
}

.icon-box p {
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: #5f5f5f;
}

.icon-box .icon {
transition: all 0.3s ease-in-out;
color: var(--primary);
background: #fafafa;
width: 93px;
height: 93px;
margin-bottom: 10px;
border-radius: 20%;
display: flex;
justify-content: center;
align-items: center;
}

.icon-box .icon i {
color: var(--primary);
font-size: 30px;
}

.icon-box ul {
list-style-type: none;
text-align: left;
margin-left: -185px;
line-height: 2.1;
}

.icon-box li:before {
content: "✓";
color: var(--primary);
margin-right: 10px;
}

.icon-box .icon i:before {
color: var(--primary);
font-size: 40px;
}

.icon-box:hover p,
.icon-box:hover .title,
.icon-box:hover .icon,
.icon-box:hover li:before {
color: #ffffff;
}

.icon-box:hover,
.icon-box:focus {
color: #ffffff;
}

/*--------------------------------------------------------------# Call To Action
Section--------------------------------------------------------------*/
.call-to-action {
 background: url(../image/section-bg.jpg) center left; 
background-size: cover;
padding: 30px 0px;
border-radius: 0px;
overflow: hidden;
position: relative;
background-attachment: fixed;
}

.call-to-action h3 {
color: #fff;
font-size: 28px;
margin-bottom: 0;
}

.call-to-action p {
color: #fff;
max-width: 500px;
margin: 0 auto;
margin-bottom: 20px;
}

.call-to-action .play-btn {
width: 94px;
height: 94px;
margin-bottom: 20px;
background: radial-gradient(var(--primary) 50%, rgba(0, 131, 116, 0.4) 52%);
border-radius: 50%;
display: inline-block;
position: relative;
overflow: hidden;
}

.call-to-action .play-btn:before {
content: "";
position: absolute;
width: 120px;
height: 120px;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation: pulsate-btn 2s;
animation: pulsate-btn 2s;
-webkit-animation-direction: forwards;
animation-direction: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: steps;
animation-timing-function: steps;
opacity: 1;
border-radius: 50%;
border: 5px solid rgba(0, 131, 116, 0.7);
top: -15%;
left: -15%;
background: rgba(198, 16, 0, 0);
}

.call-to-action:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--primary);
z-index: 0;
opacity: 0.9;
}

.call-to-action .play-btn:hover:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border: none;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 200;
-webkit-animation: none;
animation: none;
border-radius: 0;
}

.call-to-action .play-btn:hover:after {
border-left: 15px solid var(--primary);
transform: scale(20);
}

.call-to-action .cta-btn {
font-family: var(--font-primary);
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 48px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
border: 2px solid #fff;
color: #fff;
}

.call-to-action .cta-btn:hover {
background: var(--primary);
border: 2px solid var(--primary);
}

@keyframes pulsate-btn {
0% {
transform: scale(0.6, 0.6);
opacity: 1;
}

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

/*--------------------------------------------------------------# Particles
运动粒子--------------------------------------------------------------*/
#particles-js {
position: absolute;
z-index: 0;
top: 0;
right: 0;
left: 0;
bottom: 0;
}

canvas {
display: block;
vertical-align: bottom;
}

.count-particles {
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}

.js-count-particles {
font-size: 1.1em;
}

#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}

#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}

.count-particles {
border-radius: 0 0 3px 3px;
}

/*--------------------------------------------------------------# Footer
脚底--------------------------------------------------------------*/
.footer-section {
background: url(../image/footer-bg.jpg) center left;
background-size: cover;
padding: 90px 0 0 0;
border-radius: 0px;
position: relative;
background-attachment: fixed;
}

.footer-section:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: var(--primary);
z-index: 0;
opacity: 0.9;
}

.footer-cta {
border-bottom: 1px solid #373636;
}

.copyright-text {
margin-top: 60px;
border-top: 1px solid rgb(255 255 255 / 29%);
padding-top: 30px;
}

.single-cta i {
color: var(--primary);
font-size: 30px;
float: left;
margin-top: 8px;
}

.cta-text {
padding-left: 15px;
display: inline-block;
}

.cta-text h4 {
color: var(--primary);
font-size: 20px;
font-weight: 500;
margin-bottom: 2px;
}

.cta-text span {
color: #757575;
font-size: 15px;
}

.footer-content {
position: relative;
z-index: 2;
}

.footer-content .list {
padding-left: 0;
}

.footer-pattern img {
position: absolute;
top: 0;
left: 0;
height: 330px;
background-size: cover;
background-position: 100% 100%;
}

.footer-logo {
margin-bottom: 30px;
}

.footer-logo a {
color: #fff;
}

.footer-logo img {
max-width: 220px;
}

.footer-widget ul li,
.footer-widget ul li a {
font-size: 14px;
}

.footer-text p {
margin-bottom: 14px;
font-size: 14px;
color: #ffffff;
line-height: 28px;
}

.footer-social-icon span {
color: #ffffff;
display: block;
font-size: 20px;
font-family: 'Poppins', sans-serif;
margin-bottom: 20px;
}

.footer-social-icon a {
color: #fff;
font-size: 16px;
margin-right: 15px;
}

.footer-social-icon i {
height: 40px;
width: 40px;
text-align: center;
line-height: 41px;
border-radius: 50%;
}

.facebook-bg {
background: var(--primary);
}

.twitter-bg {
background: var(--primary);
}

.google-bg {
background: var(--primary);
}

.footer-widget-heading h3 {
color: #ffffff;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 40px;
position: relative;
}

.footer-widget ul li {
display: inline-block;
float: left;
width: 100%;
margin-bottom: 12px;
}

.footer-widget ul li a:hover {
color: #ffffff;
text-decoration: underline;
}

.footer-widget ul li a {
color: #ffffff;
text-transform: capitalize;
}

.subscribe-form {
position: relative;
overflow: hidden;
border-radius: 50px;
}

.subscribe-form form {
display: flex;
}

.subscribe-form input {
width: 100%;
padding: 14px 28px;
background: #e4e4e4;
border: 1px solid #e4e4e4;
color: var(--primary);
outline: 0;
}

.subscribe-form button {
background: var(--primary);
padding: 10px 20px;
border: 1px solid var(--primary);
color: #fff;
}

.subscribe-form button i {
color: #fff;
font-size: 22px;
transform: rotate(-6deg);
}

.copyright-area {
padding: 25px 0;
}

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

.copyright-text p a {
color: #ffffff;
}

.footer-menu li {
display: inline-block;
margin-left: 20px;
}

.footer-menu li:hover a {
color: var(--primary);
}

.footer-menu li a {
font-size: 14px;
color: #b9b9b9;
}

.footer-menu li a:hover {
color: #000000;
}