/*====================================
CSS TABLE OF CONTENTS
====================================
1.0. Import Vendor
2.0. Global Variables
3.0. Keyframes Animation
4.0. Base Style
5.0. Section Style
6.0. Hero Container Style
7.0. Button Style
8.0. Card Style
9.0. Image Style
10.0. Color Style
11.0. Header Style
12.0. Sidebar Style
13.0. Banner Style
14.0. Form Style
15.0. Heading Style
16.0. Home Content Style
17.0. About Style
18.0. Product Styles
19.0. Video Modal Styles
20.0. Custom List
21.0. Company Overview Styles
22.0. Case Studies Style
23.0. Why Choose Us Style
24.0. Contact Styles
25.0. Testimonial Style
26.0. Partnership Styles
27.0. Contact CTA Style
28.0. Single Product Style
29.0. Faq Style
30.0. Blog Style
31.0. Post Style
32.0. Team Style
33.0. Footer Style
34.0. Accordion Style
35.0. Icon Styles
36.0. Maps Style
37.0. Animate Style
38.0. Underline Style
39.0. Custom Spacing Style
40.0. Grid spacing (row-gap & column-gap)
41.0. Grid spacing (column-gap)
42.0. Grid spacing (row-gap)
====================================*/
/* ====================================
/* 1.0. Import Vendor 
======================================= */
@import url('../webfonts/font-family-plus-jakarta-sans.css');
@import url('../webfonts/font-family-manrope.css'); 
@import url('../css/vendor/bootstrap.min.css'); 
@import url('../css/vendor/swiper-bundle.min.css'); 
@import url('../css/vendor/animate.min.css'); 
@import url('../css/vendor/fontawesome.css'); 
@import url('../css/vendor/solid.css'); 
@import url('../css/vendor/brands.css'); 
@import url('../css/vendor/regular.css');
/* ====================================
/* 2.0. Global Variables
======================================= */
html, body { margin: 0px; padding: 0px; }
body { width: 100%; overflow-x: hidden; }
:root { --primary: #111111; --secondary: #FFFFFF; --text-color: #3D3D3D; --logo-color: #4d84ff; --accent-color: #1a47ac; --accent-light-color: #3f76f7; --accent-color-1:#dadada; --accent-color-2:#F9FAFA; --accent-color-3:#F7F7F7; --accent-color-4:#FFFFFF00; --accent-color-5:#C7C7C74F; --accent-color-6:#2727272E; --accent-video-modal: #00000073; --accent-overlay: #33333380; --font-family-heading: "Plus Jakarta Sans", sans-serif; --font-family-text: "Manrope", sans-serif; --animation-normal: 1.25s; --animation-slow: 2.25s; --animation-fast: 0.75s; --site-header-sticky-top: 96px; }
.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.home-banner-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -30%); z-index: 88 !important; }
.banner-swiper .banner-slide-text, .banner-swiper .banner-slide-actions { opacity: 0; }
.banner-swiper .swiper-slide-active .banner-slide-text { animation: bannerFadeUp 0.75s ease both; }
.banner-swiper .swiper-slide-active .banner-slide-actions { animation: bannerFadeUp 0.75s ease 0.18s both; }
@keyframes bannerFadeUp {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
.banner-swiper { min-height: 450px; position: relative; }
.banner-swiper .swiper-image-wrap::before { content: ''; position: absolute; inset: 0; background-color: var(--primary); opacity: 0.5; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* Swiper Pagination Style */
.banner-swiper .swiper-pagination { bottom: 30px !important; z-index: 3; }
.banner-swiper .swiper-pagination-bullet { width: 13px; height: 13px; background-color: #fff; opacity: 0.5; transition: all 0.3s ease; }
.banner-swiper .swiper-pagination-bullet-active { opacity: 1; background-color: #fff; width: 13px; height: 13px; }
.banner-swiper .swiper-slide { width: 100% !important; height: 100%; display: flex; align-items: center; justify-content: center; min-height: 800px; background-position: center right; }
.banner-swiper .img-fluid { width: 100%; height: 100%; object-fit: cover; object-position: center right; }
.banner-swiper .swiper-image-wrap { width: 100%; height: 800px; }
/* Mobile responsive for banner swiper */
@media (max-width:767px) {
.banner-swiper { min-height: 450px; height: 450px; }
.banner-swiper .swiper-wrapper { height: 450px; }
.banner-swiper .swiper-slide { height: 450px; min-height: 450px; }
.banner-swiper .img-fluid { width: 100%; height: 450px; object-fit: cover; object-position: center; }
.banner-swiper .swiper-image-wrap { width: 100%; height: 450px; }
}
.video-container { margin-bottom: 100px; width: 100%; }
.video-container video { display: block; width: 100%; height: auto; }
.temp-content video, .temp-content img { max-width: 100%; }
/* ====================================
/* 3.0. Keyframes Animation
======================================= */
@property --progress { syntax: '<integer>'; inherits: true; initial-value: 0; }
@keyframes load {
to { --progress: var(var(--value)) }
}
@keyframes ripple {
from { opacity: 1; transform: scale3d(1, 1, 1); transform-origin: center; border-width: 0px; }
to { opacity: 0; transform: scale3d(1.7, 1.7, 1.8); transform-origin: center; border-width: 13px; }
}
@keyframes menu-animation {
0% { opacity: 0; -webkit-transform: scale(.04) translateY(300%); transform: scale(.04) translateY(300%); }
40% { -webkit-transform: scale(.04) translateY(0); transform: scale(.04) translateY(0); -webkit-transition: ease-out; transition: ease-out; }
60% { opacity: 1; -webkit-transform: scale(.02) translateY(0); transform: scale(.02) translateY(0); }
61% { opacity: 1; -webkit-transform: scale(.04) translateY(0); transform: scale(.04) translateY(0); }
99.9% { opacity: 1; height: 0; padding-bottom: 100%; border-radius: 100%; }
100% { opacity: 1; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); height: 100%; padding-bottom: 0; border-radius: 0; }
}
/* ====================================
/* 4.0. Base Style
======================================= */
* { margin: 0px; padding: 0px; box-sizing: border-box; }
body { color: var(--primary); font-size: 1rem; line-height: 1.4em; font-family: var(--font-family-text); }
h1 { font-size: 5rem; font-weight: 700; line-height: 1.125em; }
h2 { font-size: 3rem; font-weight: 700; line-height: 1.15em; }
h3 { font-size: 1.55rem; font-weight: 600; line-height: 1.25em; }
h4 { font-size: 1.313rem; font-weight: 500; line-height: 1em; }
h5 { font-size: 1.25rem; font-weight: 700; line-height: 1.25em; }
h6 { font-size: 1.05rem; font-weight: 600; line-height: 1.35em; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-heading); margin-bottom: 0px; }
p { color: var(--text-color); font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; line-height: 1.5em; }
.button, a, .btn { font-size: 1rem; font-weight: 600;     /* text-transform: uppercase; */ line-height: 1em; text-decoration: none; }
ul { list-style: none; }
/* ====================================
/* 5.0. Section Style
======================================= */
.section { padding: 6em 1em 6em 1em; }
.section-short { padding: 4em 1em 4em 1em; }
.section-none { padding: 0px; }
/* ====================================
/* 6.0. Hero Container Style
======================================= */
.hero-container { max-width: 1440px; margin-left: auto; margin-right: auto; width: 100%; }
.about-content-description-container p { font-size: 15px; line-height: 1.4; margin-bottom: 0px !important; }
.why-choose-us-title{color:var(--accent-color) !important;}
/* ====================================
/* 7.0. Button Style
======================================= */
.btn { display: inline-flex; align-items: center; border: none; justify-content: flex-start; border-radius: 0px 0px 0px 0px; outline: none; box-shadow: none; padding: 15px 30px 15px 30px; overflow: hidden; transition: all 0.4s ease; }
.btn-animated { max-width: 100%; background-color: var(--accent-color-5); color: var(--secondary); fill: var(--secondary); background-image: url('../image/Square.png'); background-repeat: no-repeat; background-size: cover; border: 1px solid var(--accent-color-5); }
.btn-animated--post-1 { background-position: -180px 0px; }
.btn-animated--post-2 { background-position: -222px 0px; }
.btn-animated--post-3 { background-position: -181px 0px; }
.btn-animated--post-4 { background-position: -186px 0px; }
.btn-animated:hover { background-color: var(--accent-color-5); background-image: url('../image/Square.png'); background-position: center center; background-repeat: no-repeat; background-size: cover; border: 1px solid var(--accent-color); }
.btn-accent { background-color: var(--accent-color); color: var(--secondary); fill: var(--secondary); }
.btn-accent:hover { background-color: var(--primary); color: var(--secondary); fill: var(--secondary); transform: scale(0.9); }
.btn-accent--alt { background-color: var(--accent-color); color: var(--secondary); fill: var(--secondary); justify-content: center; }
.btn-accent--alt:hover { background-color: var(--secondary); color: var(--accent-color); }
/* ====================================
/* 8.0. Card Style
======================================= */
.card { border: 0; border-radius: 0px 0px 0px 0px; transition: all 0.4s ease; }
.card-temp-category { background-color: var(--secondary); color: var(--animation-normal); padding: 1.5em 1.5em 1.5em 1.5em; display: flex; flex-direction: column; gap: 20px 20px; }
.card-item { display: flex; flex-direction: column; gap: 15px 15px; justify-content: space-between; align-items: center; border: 1px solid var(--accent-color-5); box-shadow: rgba(0, 0, 0, 0.05) 3px 3px 30px 5px; background-color: var(--secondary); color: var(--primary); padding: 1em 1em 1em 1em; }
.card-item:hover { box-shadow: rgba(0, 0, 0, 0.15) 3px 3px 30px 5px; }
.card-item:hover img { transition: all 0.4s ease; transform: scale(1.05); }
.company-overview-card { width: auto; height: 100%; background-color: var(--accent-color-5); color: var(--secondary); display: flex; flex-direction: column; gap: 30px 30px; justify-content: space-between; padding: 2em 2em 2em 2em; }
.company-overview-card .company-overview-stats-divider { border-bottom: 1px solid var(--accent-color-5); }
.card-contact { background-color: var(--accent-color-6); color: var(--secondary); padding: 8em 2.5em 3em 2.5em; margin-top: -8em; display: flex; flex-direction: column; gap: 30px 30px; position: relative; z-index: 1; }
.card-contact::before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-radius: inherit; background-color: inherit; z-index: -1; }
.banner-contact.banner-light .card-contact { background-color: var(--primary); margin: 0px; padding: 3em 2.5em 3em 2.5em; }
.card-blog { position: relative; box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15); overflow: hidden; }
.card-blog a { display: block; text-decoration: none; }
.card-item-details { display: flex; flex-direction: column; gap: 20px 20px; padding: 2em 2em 2em 2em; }
.card-item-details.product-details { background-color: var(--accent-color-2); color: var(--primary); border: 1px solid var(--accent-color-5); }
.card-item-details.product-category { background-color: var(--primary); color: var(--secondary); }
.card-team { display: flex; flex-direction: column; gap: 15px 15px; text-align: center; border: 1px solid var(--accent-color-5); box-shadow: 3px 3px 30px 5px rgba(0, 0, 0, 0.05); background-color: var(--secondary); color: var(--primary); padding: 2em 2em 2em 2em; transition: all 0.4s ease; }
.card-team:hover { border: 1px solid var(--accent-color); }
.card-post { background-color: var(--secondary); color: var(--animation-normal); padding: 1.5em 1.5em 1.5em 1.5em; display: flex; flex-direction: column; gap: 20px 20px; }
.card-post .contact-text { color: var(--primary); font-size: 1rem; }
.home-card-category { background-color: var(--primary); }
.home-card-category a, .home-card-category h2, .home-card-category h5 { color: #ffffff !important; }
.home-card-category .temp-category-list a:hover, .home-card-category .temp-category-list a.active { color: var(--logo-color) !important; }
.home-card-category .temp-category-list li { border-bottom-color: rgba(255, 255, 255, 0.18); }
.home-card-category .temp-category-toggle { border-color: rgba(255, 255, 255, 0.28); color: #ffffff; }
.home-card-category .temp-category-toggle:hover { border-color: #ffffff; color: #ffffff; }
/* ====================================
/* 9.0. Image Style
======================================= */
.image-container { position: relative; display: inline-block; overflow: hidden; z-index: 1; width: 100%; }
.image-container img { max-width: 100%; height: auto; object-fit: cover; object-position: center center; }
.image-container .pop-img { border: none; }
.about-swiper { width: 100%; }
.about-swiper .swiper-slide img { width: 100%; display: block; }
.about-swiper .swiper-pagination { bottom: 12px !important; }
.about-swiper .swiper-pagination-bullet { background-color: #fff; opacity: 0.5; }
.about-swiper .swiper-pagination-bullet-active { opacity: 1; background-color: var(--accent-color, #fff); }
.chooseus-image { width: 100%; margin: -1em 0em 0em -1em; text-align: right; }
.testimonial-avatar { width: 55px; height: 55px; border-radius: 50px; }
.card-testimonial { display: flex; flex-direction: column; gap: 16px; height: 100%; text-align: center; border: 1px solid var(--accent-color-5); box-shadow: 3px 3px 30px 5px rgba(0, 0, 0, 0.05); background-color: var(--secondary); color: var(--primary); padding: 1.25em; }
.swiper-testimonial .swiper-wrapper { align-items: stretch; }
.swiper-testimonial .swiper-slide { display: flex; height: auto; box-sizing: border-box; }
.swiper-testimonial .swiper-slide .card-testimonial { width: 100%; flex: 1 1 auto; }
/* 固定图片区高度：横图/竖图卡片总高度一致，图片 contain 居中 */
.card-testimonial .testimonial-media { display: flex; align-items: center; justify-content: center; width: 100%; height: 320px; min-height: 320px; max-height: 320px; flex: 0 0 320px; overflow: hidden; }
.card-testimonial .testimonial-media picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; }
.card-testimonial .testimonial-photo { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center center; }
.card-testimonial .testimonial-meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.card-testimonial .testimonial-reviewer-name { font-family: var(--font-family-heading); font-size: 1.125rem; font-weight: 700; line-height: 1.3em; color: var(--primary); }
.card-testimonial .testimonial-designation { font-family: var(--font-family-text); font-size: 0.95rem; font-weight: 400; line-height: 1.4em; color: var(--accent-color); }
.partner-image { max-width: 75%; height: auto; }
.blog-image { position: relative; width: 100%; display: inline-block; }
.blog-image img { width: 100%; display: block; }
.blog-image::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, rgba(0, 0, 0, .35), transparent 75%); background-repeat: no-repeat; opacity: 1; transition: all .3s ease-out; pointer-events: none; }
.blog-image:hover::after { opacity: 0.5; }
.post-image img { width: 100%; }
.team-image { width: 100%; }
.team-image::after { position: absolute; content: ""; left: 0; bottom: 0; height: 100%; width: 100%; background-color: var(--primary); opacity: 0; -webkit-transition: all .4s ease; transition: all 0.4s ease; pointer-events: none; }
.team-image:hover::after { opacity: 0.8; }
.footer-logo img { max-width: 50%; }
.footer-gallery-img img { width: 100%; height: auto; object-fit: cover; display: block; }
/* ====================================
/* 10.0. Color Style
======================================= */
.secondary-accent { color: var(--secondary); }
.accent-color { color: var(--logo-color); text-transform: capitalize; }
.sub-heading .fa-circle { font-size: 0.5em; align-self: center; animation: accentDotPulse 2.4s ease-in-out infinite; }
.sub-heading.is-animated h4.accent-color, .sub-heading.animate__fadeIn h4.accent-color, .sub-heading.animate__fadeInLeft h4.accent-color { animation: accentTextSlide 0.65s ease 0.12s both; }
i.accent-color { display: inline-block; transition: transform 0.3s ease, color 0.3s ease; }
.is-animated i.accent-color, .animate__fadeIn i.accent-color, .animate__fadeInLeft i.accent-color, .animate__fadeInUp i.accent-color, .animate__fadeInRight i.accent-color { animation: accentIconPop 0.55s ease 0.18s both; }
a:hover > i.accent-color, .blog-meta:hover i.accent-color, .contact-info-container:hover i.accent-color { transform: scale(1.15); color: var(--accent-color); }
@keyframes accentDotPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.25); opacity: 0.7; }
}
@keyframes accentTextSlide {
from { opacity: 0; transform: translateX(-14px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes accentIconPop {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.12); }
100% { transform: scale(1); opacity: 1; }
}
.bg-secondary-accent { background-color: var(--secondary); }
.bg-primary-accent { background-color: var(--primary); }
.bg-accent-color { background-color: var(--accent-color); }
.bg-accent-color-3 { background-color: var(--accent-color-3); }
/* ====================================
/* 11.0. Header Style
======================================= */
.header-container { position: relative; margin-bottom: -9em; z-index: 9; }
.header-container.scrolled .header-info-wrapper { opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.header-container.scrolled .header-navbar-fixed { background-color: var(--primary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); top: 0; }
.header-navbar-fixed { position: fixed; background-attachment: scroll; z-index: 3;     /*padding: 0.5em 1em 0.5em 1em;*/ background-color: transparent; width: 100%; transition: background-color 0.4s ease, box-shadow 0.4s ease; z-index: 9; }
.navbar { position: relative; display: flex; flex-direction: row; justify-content: center; padding: 0px; }
.navbar-toggler { outline: none; box-shadow: none; border: none; }
.nav-btn { display: none; padding: 10px 20px; color: var(--secondary); background-color: var(--accent-color); outline: none; box-shadow: none; transition: all 0.4s; border-radius: 0px; font-size: 1rem; }
.nav-btn:hover, .nav-btn:focus { color: var(--accent-color); background-color: var(--secondary); }
.navbar-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
.navbar-container { display: flex; flex-direction: row; justify-content: space-between; width: 100%; gap: 20px; }
.navbar-collapse { display: flex; align-items: center; justify-content: center; }
.navbar-nav { align-items: center; }
.navbar-nav .nav-link:focus { color: var(--accent-color-2); }
.body-vi .nav-link { font-size: 15px; }
.nav-link { height: 66px; line-height: 58px; font-family: var(--font-family-heading); font-size: 1.125rem; font-weight: 500;     /* line-height: 1px; */ color: var(--secondary); padding: 5px 20px 5px 20px; text-transform: capitalize; }
.nav-link:hover, .nav-link.active, .nav-link.show { color: #97b7ff !important; }
.nav-link-wrapper { display: flex; flex-direction: row; justify-content: center; }
.dropdown-menu { top: 100% !important; border-radius: 10px; border: none; min-width: 220px; padding: 0px 0px 0px 0px; overflow: visible; }
.navbar .nav-item.dropdown > .nav-link { position: relative; z-index: 2; }
.navbar .nav-item.dropdown > .dropdown-menu { display: none; top: 100% !important; margin-top: -1px; }
.navbar .nav-item.dropdown:hover > .dropdown-menu, .navbar .nav-item.dropdown:focus-within > .dropdown-menu { display: block; }
.dropdown-item { color: var(--primary); background-color: var(--secondary); font-family: var(--font-family-heading); font-size: 1.125rem; font-weight: 500; line-height: 1.2; text-transform: capitalize; padding: 25px 18px 25px 18px; }
.dropdown-item.active { color: var(--secondary); background-color: var(--accent-color); }
.dropdown-item:hover { background-color: var(--accent-color); color: var(--secondary); }
.dropdown-item:focus { color: var(--secondary); }
.dropdown-toggle::after { display: none !important; }
.navbar .dropdown-submenu { position: relative; }
.navbar .dropdown-submenu > .dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.navbar .dropdown-submenu > .dropdown-item .fa-angle-right { font-size: 0.75rem; }
.navbar .dropdown-submenu > .dropdown-menu { top: 0 !important; left: 100%; margin: 0; display: none; }
.navbar .dropdown-submenu:hover > .dropdown-menu, .navbar .dropdown-submenu:focus-within > .dropdown-menu { display: block; }
.logo-container.header-logo { max-width: 20%; }
.logo-container.header-logo img { height: 50px; }
.navbar-cta-container { display: flex; flex-direction: row; justify-content: flex-end; width: 20%; }
.header-info-wrapper { padding: 0em 1em 0em 1em; border-bottom: 1px solid var(--accent-color-5); background-color: transparent; color: var(--secondary); position: relative; }
.header-info-container { display: flex; flex-direction: row; gap: 20px 20px; }
.header-info { width: 60%; display: flex; flex-direction: row; gap: 5px 5px; }
.header-info-item { display: flex; flex-direction: row; align-items: center; gap: 5px 5px; padding: 0.75em 0em 0.75em 0em; color: var(--secondary); fill: var(--accent-color); }
.header-info-item:nth-child(even) { padding: 0.75em 0.5em 0.75em 0.5em; border-width: 0px 1px 0px 1px; border-style: solid; border-color: var(--accent-color-5); }
.header-info-text { font-family: var(--font-family-heading); font-size: 1rem; font-weight: 400; line-height: 1.5em; }
.header-social { width: 40%; display: flex; flex-direction: row; align-items: center; gap: 5px 5px; justify-content: flex-end; }
.header-social .social-icon:hover { transform: scale(0.9); }
@media (max-width:768px) {
.navbar { padding: 10px; }
}
/* 12. Sidebar Style */
.sidebar { position: fixed; top: 0; left: -350px; width: 350px; height: 100%; background: var(--secondary); color: var(--primary); transition: transform 0.4s ease-in-out; z-index: 99; overflow-y: auto; max-height: 100vh; padding: 0px 16px 0px 5px; }
.sidebar.active { transform: translateX(350px); }
.sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 20px 20px 20px; }
.logo-container.sidebar-logo { max-width: 52%; }
.close-btn { display: inline-block; justify-content: center; background-color: var(--accent-color); border: none; border-radius: 8px 8px 8px 8px; color: var(--secondary); position: relative; font-size: 1rem; cursor: pointer; padding: 8px 18px; }
.menu { list-style: none; padding: 0; margin-top: 20px; }
.menu li { margin-bottom: 10px; }
.menu a { color: var(--primary); text-decoration: none; padding: 10px 10px 10px 10px; display: block; border-radius: 5px; transition: 0.3s; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
.menu a:hover, .menu a.active, .menu a.focus { color: var(--accent-color); background-color: var(--secondary); }
.sidebar-dropdown .dropdown-header { display: flex; justify-content: space-between; align-items: center; }
.sidebar-dropdown-btn { background: none; border: 1px solid var(--primary); color: var(--primary); font-size: 1rem; cursor: pointer; padding: 0px 15px; border-radius: 24px; transition: transform 0.3s ease; }
.sidebar-dropdown-btn:hover { color: var(--accent-color); border: 1px solid var(--accent-color) }
.sidebar-dropdown-menu { list-style: none; padding-left: 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; padding-top: 0; padding-bottom: 0; }
.sidebar-dropdown-menu.active { max-height: 2000px; padding-top: 10px; padding-bottom: 10px; }
.sidebar-dropdown-menu .sidebar-dropdown { margin-bottom: 0; }
.below-dropdown { transition: margin-top 0.1s ease-in-out; margin-top: 0px; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: gray; border-radius: 5px; }
.sidebar-overlay { position: fixed; top: 0; left: -100%; width: 100%; height: 100vh; background: var(--accent-overlay); transition: left 0.4s ease-in-out; z-index: 6; }
.sidebar-overlay.active { left: 0; }
/* 13. Banner Style */
.banner-inner { background-position: center center; background-repeat: no-repeat; background-size: cover; padding: 20em 1em 10em 1em; position: relative; z-index: 1; }
.banner-inner::before { content: ''; position: absolute; inset: 0; background-color: var(--primary); opacity: 0.4; width: 100%; height: 100%; z-index: -1; }
.company-overview__banner { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; }
.company-overview__banner::before { content: ''; position: absolute; background-color: var(--primary); opacity: 0.7; inset: 0; width: 100%; height: 100%; z-index: -1; }
.banner-contact { position: relative; background-color: var(--primary); color: var(--secondary); padding: 8em 1em 8em 1em; z-index: 1; }
.banner-contact::before { content: ''; position: absolute; background-image: url('../image/world-map.png'); background-color: rgba(14, 45, 115, 0.4); background-position: center center; background-repeat: no-repeat; background-size: auto; opacity: 0.65; inset: 0; width: 100%; height: 100%; z-index: -1; }
.banner-contact.banner-light { background-color: var(--secondary); color: var(--primary); }
.banner-contact.banner-light::before { opacity: 0.05; }
.contact-cta-banner { background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 8em 1em 8em 1em; z-index: 1; }
.contact-cta-banner::before { content: ''; position: absolute; background-image: linear-gradient(270deg, var(--accent-color-4) 5%, var(--primary) 55%); inset: 0; opacity: 0.8; width: 100%; height: 100%; z-index: -1; }
/* 14. Form Style */
.form { display: flex; flex-direction: column; gap: 10px 10px; }
.form input, .form textarea { padding: 1em 1em 1em 1em; background-color: var(--accent-color-5); color: var(--secondary); border: 1px solid var(--accent-color-5); border-radius: 0px 0px 0px 0px; font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; line-height: 1.5em; box-shadow: none; outline: none; }
.form input::placeholder, .form textarea::placeholder { color: var(--accent-color-5); font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; line-height: 1.5em; }
.form label { color: var(--logo-color); font-family: var(--font-family-heading); font-size: 1.05rem; font-weight: 600; line-height: 1.35em; }
.form input:autofill, .form input:autofill:focus { color: var(--secondary); transition: background-color 5000s ease-in-out; -webkit-text-fill-color: var(--secondary); }
#newsletter-form { display: flex; flex-direction: row; align-items: stretch; gap: 10px; width: 100%; }
#newsletter-form input { flex: 1 1 auto; min-width: 0; }
#newsletter-form button { white-space: nowrap; }
.alert .form-validaton { color: var(--secondary); }
/* 15. Heading Style */
.heading-wrapper-title { width: 75%; height: 100%; overflow: hidden; }
.heading-wrapper-link { display: flex; width: 25%; height: 100%; align-self: center; justify-content: end; }
/* 16. Home Content Style */
.home-sub-heading-container { width: 20%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; }
.home-sub-heading { width: 100%; border-right: 2px solid var(--accent-color); text-transform: uppercase; color: var(--accent-color); align-self: flex-start; }
.home-heading-container { width: 80%; display: flex; flex-direction: column; gap: 30px 30px; padding: 0px; padding-left: 2em; color: var(--secondary); }
.home-heading-highlight { display: inline-block; background-color: transparent; color: var(--secondary); padding: 0px 0px 0px 0px; background-image: linear-gradient(180deg, var(--accent-color-4) 70%, var(--accent-color) 40%); border-radius: 0px 0px 0px 0px; line-height: 0.8em; }
.banner-inner-content { display: flex; flex-direction: column; gap: 30px 30px; }
.banner-inner-title { color: var(--secondary); font-size: clamp(20px, 4vw, 80px); font-weight: 700; text-align: left; }
.banner-inner-excerpt { width: 50%; color: var(--secondary); font-size: 0.9rem; }
.home-banner-container .btn-animated { min-width: 250px; justify-content: space-between; gap: 10px; color: var(--secondary); background-color: rgba(17, 17, 17, 0.42); background-image: none; border: 1px solid rgba(255, 255, 255, 0.35); border-left: 6px solid var(--accent-color); padding-left: 24px; text-transform: uppercase; }
.home-banner-container .btn-animated span, .home-banner-container .btn-animated i { color: inherit; }
.home-banner-container .btn-animated:hover { color: var(--secondary); background-color: var(--accent-color); background-image: url('../image/Square.png'); background-position: center center; border-color: var(--accent-color); border-left-color: var(--accent-color); }
.sub-heading { display: flex; flex-direction: row; gap: 10px 10px; color: var(--accent-color); fill: var(--accent-color); }
/* 18. Product Styles */
.temp-category-container { flex: 0 0 30%; max-width: 30%; min-width: 0; display: flex; flex-direction: column; gap: 20px 20px; position: sticky; top: var(--site-header-sticky-top); z-index: 5; }
.temp-category-content { flex: 1 1 0; min-width: 0; width: auto; }
.temp-content-container { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 15px; box-sizing: border-box; }
.temp-content-container > a { display: block; min-width: 0; height: 100%; }
.temp-content-container .image-container { display: block; width: 100%; }
.temp-content-container .card-item { height: 100%; }
.temp-content-container .item-title { width: 100%; color: var(--primary); font-size: 1rem; transition: all 0.35s ease; }
.temp-content-container .card-item:hover .item-title { color: var(--logo-color); }
/* 证书列表：横竖图统一区域，contain + 居中 */
.temp-content-container .card-item-certificate { justify-content: flex-start; }
.temp-content-container .certificate-card-media { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 280px; flex: 1 1 auto; }
.temp-content-container .certificate-card-media picture { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 400px; margin: 0; }
.temp-content-container .certificate-card-media img { display: block; max-width: 100%; max-height: 400px; width: auto; height: auto; object-fit: contain; object-position: center center; }
.temp-content-container .item-introduction { color: var(--primary); }
.about-section-anchor { scroll-margin-top: 110px; }
/* 17. Certificate Styles */
.temp-content-container .card-certificate { height: 100%; }
.temp-content-container .certificate-title { color: var(--primary); }
.temp-content-container .certificate-introduction { color: var(--primary); }
.temp-content2-title { margin-bottom: 15px; font-size: 22px; color: #333333; }
.temp-content2-content { margin: 10px 0; width: 100%; }
.temp-content2-content p { font-size: 16px; line-height: 1.4; color: #333333; }
.temp-content2-images { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 10px 0; gap: 20px; width: 100%; }
.temp-content2-images img { flex: 1 1 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); width: 100%; height: auto; display: block; object-fit: contain; }
/* 19. Video Modal Styles */
.request-loader { position: relative; width: auto; height: 70px; border-radius: 50% !important; border: none; background-color: var(--accent-color); display: flex; justify-content: center; align-items: center; color: var(--secondary); font-size: 18px; aspect-ratio: 1/1; transition: all 300ms ease-in-out; z-index: 2; }
.request-loader:hover { border: none; color: var(--accent-color); background-color: var(--secondary); }
.request-loader::after, .request-loader::before { opacity: 0.2; display: flex; flex-direction: row; justify-content: center; align-items: center; position: absolute; content: ''; height: 100%; width: 100%; color: var(--accent-color); border: 4px solid currentColor; border-radius: 50%; animation-name: ripple; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.65, 0, .34, 1); z-index: 0; }
.request-loader::after { animation-delay: 0.5s; animation-duration: 3s; }
.request-loader::before { animation-delay: 0.2s; animation-duration: 3s; }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--accent-video-modal); z-index: 15; justify-content: center; align-items: center; }
.my-modal { background-color: #000; padding: 0; border-radius: 0; position: relative; width: min(90%, 1100px); max-width: 90%; max-height: 90%; overflow: visible; line-height: 0; font-size: 0; }
.my-modal iframe, .my-modal video { display: block; width: 100%; height: auto; max-height: 80vh; aspect-ratio: 16 / 9; border: 0; background: #000; object-fit: contain; }
.my-modal video { display: none; }
.my-close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #111; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; font-weight: 700; z-index: 16; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.my-close:hover { background: #f2f2f2; color: #000; }
.btn-close-modal { position: absolute; right: 0px; top: 0px; background-color: var(--accent-color-2); padding: 16px 16px 16px 16px; opacity: 1; z-index: 16; }
/* 20. Custom List */
.chevron-circle-list { list-style: none; padding-left: 0; }
.chevron-circle-list li { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: start; margin-bottom: 10px; color: var(--text-color); font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; line-height: 1.4em; }
.chevron-circle-list a { color: var(--primary); font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; text-transform: capitalize; line-height: 1.5em; }
.chevron-circle-list li:last-child { margin-bottom: 0px; }
.chevron-circle-list li::before { content: "\f138"; font-family: "Font Awesome 7 Free"; font-weight: 900; color: var(--accent-color); margin-right: 0.5em; font-size: 18px; display: inline-block; }
.temp-category-list { list-style: none; padding-left: 0; }
.temp-category-list li { position: relative; display: flex; flex-direction: row; align-items: center; justify-content: start; border-bottom: 1px solid var(--accent-color-5); color: var(--secondary); font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; text-transform: capitalize; line-height: 1.5em; }
.temp-category-list a { display: block; width: 100%; padding-top: 15px; padding-bottom: 15px; color: var(--primary); font-family: var(--font-family-text); font-size: 14px; font-weight: 700; text-transform: capitalize; line-height: 1.5em; }
.temp-category-list a:hover, .temp-category-list a.active { color: var(--logo-color); }
.temp-category-list li:last-child { margin-bottom: 0px; }
.temp-category-list li a::before { content: "\f054"; font-family: "Font Awesome 7 Free"; font-weight: 900; color: var(--logo-color); margin-right: 0.5em; font-size: 1.125rem; display: inline-block; }
.temp-category-list li.has-children { flex-direction: column; align-items: stretch; }
.temp-category-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 15px; padding-bottom: 15px; gap: 8px; }
.temp-category-item > a { display: inline-flex; align-items: center; width: auto; flex: 0 0 auto; padding-top: 0; padding-bottom: 0; font-weight: 700; transition: all 0.35s ease; }
.temp-category-toggle { flex-shrink: 0; width: 32px; height: 32px; margin-left: auto; border: 1px solid var(--accent-color-5); border-radius: 50%; background: transparent; color: var(--accent-color); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; }
.temp-category-toggle i { font-size: 0.75rem; transition: transform 0.2s ease; }
.temp-category-toggle:hover { border-color: var(--accent-color); color: var(--accent-color); }
.temp-category-list li.has-children.expanded > .temp-category-item .temp-category-toggle i { transform: rotate(180deg); }
.temp-category-sublist { list-style: none; padding: 0 0 0 1.25em; margin: 0; width: 100%; display: none; }
.temp-category-list li.has-children.expanded > .temp-category-sublist { display: block; }
.temp-category-sublist li { border-bottom: none; }
.temp-category-sublist a { padding-top: 10px; padding-bottom: 10px; font-size: 0.9375rem; }
.temp-category-sublist li a::before { font-size: 0.875rem; }
.single-product-list { list-style: none; padding: 0; }
.single-product-list li { position: relative; padding-left: 24px; margin-bottom: 8px; transition: all 0.3s ease; font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; line-height: 1.5em; color: var(--text-color); }
.single-product-list a { font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; line-height: 1.5em; color: var(--text-color); text-transform: capitalize; transition: all 0.3s ease; }
.single-product-list.white-list li { padding-bottom: 10px; border-bottom: 1px solid var(--accent-color-5); }
.single-product-list.white-list li:last-child { padding-bottom: 0; border-bottom: none; }
.single-product-list.white-list a { color: var(--secondary); }
.single-product-list a:hover { color: var(--logo-color); }
.single-product-list li:hover { color: var(--logo-color); }
.single-product-list li::before { content: "\f054"; font-family: "Font Awesome 7 Free"; font-weight: 900; position: absolute; left: 0; color: var(--logo-color); font-size: 14px; }
/* 21. Company Overview Styles */
.circle-list { list-style: none; padding: 0px 0px 0px 24px; }
.circle-list li { position: relative; padding-left: 24px; margin-bottom: 8px; transition: all 0.3s ease; font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; line-height: 1.5em; color: var(--text-color); }
.circle-list li::before { content: "\f111"; font-family: "Font Awesome 7 Free"; font-weight: 900; position: absolute; left: 0; color: var(--accent-color); font-size: 8px; }
.company-overview__container { display: flex; flex-direction: row; gap: 30px 30px; }
.company-overview__content { width: 60%; display: flex; flex-direction: column; justify-content: center; overflow: hidden; gap: 30px 30px; color: var(--secondary); }
.company-overview__stat-content { width: 40%; display: flex; flex-direction: row; }
.company-overview-stat-container { display: flex; flex-direction: column; gap: 10px 10px; justify-content: center; align-items: center; }
.company-overview__stat { font-family: var(--font-family-heading); font-size: 3rem; font-weight: 700; line-height: 1.15em; }
.company-overview__stat-suffix { color: var(--accent-color); font-family: var(--font-family-heading); font-size: 1.55rem; font-weight: 600; line-height: 1.25em; }
.company-overview-card.bg-accent-color .company-overview__stat-suffix { color: var(--secondary); }
/* 23. Why Choose Us Style */
.whychooseus-title-container { width: 35%; display: flex; flex-direction: column; gap: 30px 30px; justify-content: center; }
.whychooseus-image-container { width: 25%; background-color: var(--primary); padding: 0em 0em 1em 0em; position: relative; }
.whychooseus-feature { width: 40%; height: 100%; display: flex; flex-direction: column; gap: 15px 15px; justify-content: space-between; overflow: hidden; }
/* 24. Contact Styles */
.contact-content { display: flex; flex-direction: column; gap: 15px 15px; padding: 0em 3em 0em 0em; color: var(--secondary); }
.contact-content .temp-h2 { color: var(--logo-color) !important }
.contact-content .form label { color: var(--logo-color) !important }
.banner-contact.banner-light .contact-content { color: var(--primary); }
.contact-info-container { display: flex; flex-direction: column; gap: 15px 15px; }
.contact-info-container .footer-contact-text { color: var(--secondary); margin: 0px; }
/* 26. Partnership Styles */
.partnership-title { display: flex; align-items: center; padding: 5px 0px 5px 0px; justify-content: space-between; }
.partnership-title::after { content: ""; display: block; width: 65%; height: 1px; background-color: var(--accent-color-6); margin-left: 30px; }
.partnership-content-container { margin-top: 50px; display: flex; flex-direction: column; gap: 20px 20px; }
.swiper.swiper-partner { padding: 1em 0em 1em 0em; }
/* 27. Contact CTA Style */
.contact-cta-content { width: 60%; display: flex; flex-direction: column; gap: 30px 30px; color: var(--secondary); overflow: hidden; }
.contact-cta-description { color: var(--secondary); }
/* 28. Single Product Style */
.single-product-content-container { display: flex; flex-direction: row; gap: 30px 30px; width: auto; height: 100%; }
.product-detail-content { width: 70%; display: flex; flex-direction: column; gap: 30px 30px; position: relative; }
.product-detail-sidebar { width: 30%; position: relative; }
.product-detail-sidebar-content { display: flex; flex-direction: column; gap: 30px 30px; position: sticky; top: var(--site-header-sticky-top); z-index: 5; }
/* 30. Blog Style */
.blog-content { display: flex; flex-direction: column; gap: 15px 15px; padding: 1.25em 1.5em 0.625em 1.5em; }
.blog-link { height: 50px; line-height: 25px; color: var(--primary); font-family: var(--font-family-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.25em; text-transform: none; }
.blog-introduction { height: 69px; line-height: 23px; text-transform: none; color: var(--accent-video-modal); font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; }
.blog-meta { color: var(--primary); font-family: var(--font-family-heading); font-size: 1rem; font-weight: 400; line-height: 1em; }
.blog-meta-divider { font-size: 0.313rem; }
/* 31. Post Style */
.banner-post-content { display: flex; flex-direction: column; gap: 50px 50px; justify-content: center; align-items: center; text-align: center; color: var(--secondary); }
.banner-post-meta { display: flex; flex-direction: row; gap: 20px 20px; justify-content: center; align-items: center; flex-wrap: wrap; }
.post-meta-item { display: flex; flex-direction: row; align-items: center; gap: 10px 10px; padding: 0px 25px 0px 25px; font-size: 1rem; width: 400; line-height: 1.5em; }
.post-meta-item:nth-child(even) { border-left: 2px solid var(--accent-color-5); border-right: 2px solid var(--accent-color-5); }
.post-content-container { width: 70%; display: flex; flex-direction: column; gap: 30px 30px; }
.post-sidebar-container { width: 30%; display: flex; flex-direction: column; gap: 30px 30px; }
.news-detail-content { width: 100%; display: flex; flex-direction: column; gap: 30px 30px; }
.news-detail-content p { width: 100%; display: flex; flex-direction: column; gap: 30px 30px; font-size: 1rem !important; }
.news-detail-content video, .news-detail-content img { max-width: 100%; object-fit: cover; object-position: center; }
.news-nav a { font-size: 1.25rem; color: var(--primary); }
/* 32. Team Style */
.recent-blog-list { display: flex; flex-direction: column; gap: 20px; }
.recent-blog-item { display: flex; flex-direction: row; align-items: center; gap: 15px; text-decoration: none; }
.recent-blog-item img { width: 90px; height: auto; object-fit: cover; object-position: center; aspect-ratio: auto 1200 / 800; }
.recent-blog-date { font-family: var(--font-family-text); font-size: 1rem; font-weight: 400; text-transform: capitalize; color: var(--accent-color); display: block; margin-bottom: 2px; }
.recent-blog-content { display: flex; flex-direction: column; gap: 10px 10px; color: var(--primary); }
.recent-blog-heading { text-transform: capitalize; font-family: var(--font-family-heading); transition: 0.3s ease; }
.recent-blog-item:hover .recent-blog-heading { color: var(--accent-color); }
.team-social-container { position: absolute; bottom: 15px; left: 50%; display: flex; flex-direction: row; align-items: center; gap: 5px 5px; justify-content: center; transform: translate(-50%, -50%); transition: all 0.4s ease; z-index: 1; opacity: 0; }
.team-image:hover .team-social-container { opacity: 1; transform: translate(-50%, -40px); }
/* 33. Footer Style */
.footer-container { display: flex; flex-direction: column; gap: 0px 0px; color: var(--secondary); }
.footer-content-wrapper { display: flex; flex-direction: row; }
.footer-content-container { display: flex; flex-direction: row; gap: 0px; padding: 0em 1em 0em 1em; }
.footer-contact-container { display: flex; flex-direction: column; gap: 30px 30px; }
.footer-info-container { width: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 30px 30px; border-width: 0px 1px 0px 1px; border-style: solid; border-color: var(--accent-color-5); padding: 4em 0em 2em 0em; }
.footer-info-text { width: 75%; color: var(--secondary); }
.footer-link { color: var(--secondary); font-family: var(--font-family-heading); font-size: 1.05em; font-weight: 600; line-height: 1.35em; text-transform: capitalize; letter-spacing: normal; transition: all 0.3s ease; }
.footer-link:hover { color: var(--accent-color); }
.footer-menu { }
.footer-menu h5 { color: #fff; margin-bottom: 25px; font-size: 1.125rem; }
.footer-menu ul { padding: 0px; }
.footer-menu ul li { list-style: none; margin-bottom: 12px; }
.footer-menu li a { transition: all 0.3s ease; font-size: 1rem; color: #c0c0c0; text-decoration: none; font-weight: 400; }
.footer-menu li a:hover { color: var(--accent-color); }
.footer-cta-container { display: flex; flex-direction: column; gap: 15px 15px; }
.footer-divider { margin: 15px 0px 15px 0px; border-bottom: 1px solid var(--accent-color-5); width: 100%; }
.footer-info-container .swiper-gallery { width: 90%; }
.footer-info-container .overflow-hidden { width: 100%; }
.footer-copyright-wrapper { border-top: 1px solid var(--accent-color-5); }
.footer-copyright-container { padding: 1em 1em 1em 1em; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px 10px; }
.copyright-text { max-width: 100%; color: var(--secondary); margin-bottom: 0px; }
.legallink-container { max-width: 100%; display: flex; flex-direction: row; align-items: center; }
.legallink { color: var(--secondary); font-family: var(--font-family-heading); font-size: 1rem; font-weight: 400; line-height: 1.5em; text-transform: capitalize; transition: all 0.3s ease; padding: 0px 25px 0px 25px; }
.legallink:hover { color: var(--accent-color); }
.legallink:nth-child(even) { border-width: 0px 2px 0px 2px; border-style: solid; border-color: var(--accent-color-5); }
/* 34. Accordion Style */
.accordion .accordion-item { background-color: transparent; border: none; color: var(--primary); outline: none; border-radius: 4px; }
.accordion .accordion-item .accordion-body { color: var(--text-color); font-family: var(--font-2); text-align: start; padding: 1.75em 3em 1.5em 3em; }
.accordion-button:focus { box-shadow: none; }
.accordion .accordion-button { background-color: var(--accent-color-1); border: 1px solid var(--accent-color-5); outline: none;     /* border-radius:20px !important; */ font-family: var(--font-family-heading); font-size: 1.05rem; font-weight: 600; line-height: 1.25em; position: relative; text-transform: none; overflow: hidden; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 18px 18px 18px 18px; color: var(--primary); }
.accordion-button::after { display: none; }
.accordion-button .fa-chevron-down { flex-shrink: 0; margin-left: 1rem; font-size: 0.875rem; transition: transform 0.2s ease; }
.accordion-button:not(.collapsed) .fa-chevron-down { transform: rotate(180deg); }
.accordion .accordion-button:not(.collapsed) { background-color: var(--accent-color); color: var(--secondary); fill: var(--secondary); outline: none; }
/* 35. Icon Styles */
.social-icon { width: 36px; height: 36px; font-size: 1.125rem; padding: 10px 10px 10px 10px; border-radius: 0px 0px 0px 0px; background-color: var(--accent-color-5); color: var(--secondary); transition: all 0.4s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.social-icon:hover { background-color: var(--accent-color); color: var(--secondary); }
.social-icon.social-icon-accent { background-color: var(--accent-color); color: var(--secondary); }
.social-icon.social-icon-accent:hover { background-color: var(--primary); color: var(--secondary); }
.social-icon.social-icon-accent--alt { background-color: var(--accent-color); color: var(--secondary); }
.social-icon.social-icon-accent--alt:hover { background-color: var(--secondary); color: var(--accent-color); }
.whychooseus-icon { padding: 15px 15px 15px 15px; font-size: 30px; background-color: var(--accent-color); color: var(--secondary); fill: var(--secondary); border: none; border-radius: 0px 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.contact-icon { color: var(--accent-color); fill: var(--accent-color); font-size: 1.125rem; }
/* 36. Maps Style */
.maps { max-width: 100%; width: 100%; height: 500px; filter: brightness(80%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg); transition: all 1s ease-in-out; }
.maps:hover { filter: brightness(100%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg); }
/* 37. Animate Style */
.animate-box { opacity: 0; will-change: opacity, transform; }
.animate-box.is-shown, .animate-box.is-animated { opacity: 1; }
/* vendor zoomIn 仅 0%/50%，结束后易回退到 opacity:0，出现“闪一下再出现” */
@keyframes yehuiZoomIn {
from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
to { opacity: 1; transform: scale3d(1, 1, 1); }
}
.animate__zoomIn { animation-name: yehuiZoomIn !important; }
.animated { animation-duration: var(--animation-normal); }
.animated-delay-fast { animation-duration: var(--animation-fast); }
.animated-delay-slow { animation-duration: var(--animation-slow); }
.card-item, .card-blog, .card-post, .company-overview-card { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.card-item:hover, .card-blog:hover { transform: translateY(-4px); }
.card-item:hover, .card-blog:hover { color: var(--logo-color) }
.card-item .blog-link, .card-blog .blog-link { transition: all 0.35s ease; }
.card-item:hover .blog-link, .card-blog:hover .blog-link { color: var(--logo-color) }
@media (prefers-reduced-motion:reduce) {
.animate-box, [data-animate-stagger] > * { opacity: 1 !important; animation: none !important; transform: none !important; }
.banner-swiper .banner-slide-text, .banner-swiper .banner-slide-actions { opacity: 1 !important; animation: none !important; transform: none !important; }
.sub-heading .fa-circle, i.accent-color, .sub-heading h4.accent-color { animation: none !important; transform: none !important; }
.card-item:hover, .card-blog:hover { transform: none; }
}
/* 38. Underline Style */
.underline-accent-color { border-bottom: 1px solid var(--accent-color); }
.underline-accent-5 { border-bottom: 1px solid var(--accent-color-5); }
.underline-accent-6 { border-bottom: 1px solid var(--accent-color-6); }
/* 39. Custom Spacing Style */
.gspace-0 { gap: 0px 0px; }
.gspace-1 { gap: 10px 10px; }
.gspace-2 { gap: 20px 20px; }
.gspace-3 { gap: 30px 30px; }
.gspace-4 { gap: 40px 40px; }
.gspace-5 { gap: 50px 50px; }
.gspace-100 { gap: 100px 100px; }
.gspace-x-0 { column-gap: 0px; }
.gspace-x-1 { column-gap: 10px; }
.gspace-x-2 { column-gap: 20px; }
.gspace-x-3 { column-gap: 30px; }
.gspace-x-4 { column-gap: 40px; }
.gspace-x-5 { column-gap: 50px; }
.gspace-x-100 { column-gap: 100px; }
.gspace-y-0 { row-gap: 0px; }
.gspace-y-1 { row-gap: 10px; }
.gspace-y-2 { row-gap: 20px; }
.gspace-y-3 { row-gap: 30px; }
.gspace-y-4 { row-gap: 40px; }
.gspace-y-5 { row-gap: 50px; }
.gspace-y-100 { row-gap: 100%; }
.grid-spacer-0 { --bs-gutter-x: 0px; --bs-gutter-y: 0px; }
.grid-spacer-1 { --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
.grid-spacer-2 { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }
.grid-spacer-3 { --bs-gutter-x: 30px; --bs-gutter-y: 30px; }
.grid-spacer-4 { --bs-gutter-x: 40px; --bs-gutter-y: 40px; }
.grid-spacer-5 { --bs-gutter-x: 50px; --bs-gutter-y: 50px; }
.grid-spacer-100 { --bs-gutter-x: 100px; --bs-gutter-y: 100px; }
/* 40. Grid spacing (row-gap & column-gap) */
/* 41. Grid spacing (column-gap) */
.grid-spacer-x-0 { --bs-gutter-x: 0px; }
.grid-spacer-x-1 { --bs-gutter-x: 10px; }
.grid-spacer-x-2 { --bs-gutter-x: 20px; }
.grid-spacer-x-3 { --bs-gutter-x: 30px; }
.grid-spacer-x-4 { --bs-gutter-x: 40px; }
.grid-spacer-x-5 { --bs-gutter-x: 50px; }
.grid-spacer-x-100 { --bs-gutter-x: 100px }
/* 42. Grid spacing (row-gap) */
.grid-spacer-y-0 { --bs-gutter-y: 0px; }
.grid-spacer-y-1 { --bs-gutter-y: 10px; }
.grid-spacer-y-2 { --bs-gutter-y: 20px; }
.grid-spacer-y-3 { --bs-gutter-y: 30px; }
.grid-spacer-y-4 { --bs-gutter-y: 40px; }
.grid-spacer-y-5 { --bs-gutter-y: 50px; }
.grid-spacer-y-100 { --bg-gutter-y: 100px }
/* ====================================
/* 43.0. Pagination Style (Bootstrap 5.3)
======================================= */
.pagination { --bs-pagination-padding-x: 1rem; --bs-pagination-padding-y: 0.375rem; --bs-pagination-font-size: 1rem; --bs-pagination-color: var(--accent-color); --bs-pagination-bg: var(--secondary); --bs-pagination-border-width: 1px; --bs-pagination-border-color: #dee2e6; --bs-pagination-border-radius: 0.375rem; --bs-pagination-hover-color: var(--accent-color); --bs-pagination-hover-bg: #e9ecef; --bs-pagination-hover-border-color: #dee2e6; --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(230, 6, 25, 0.25); --bs-pagination-active-color: #fff; --bs-pagination-active-bg: var(--accent-color); --bs-pagination-active-border-color: var(--accent-color); --bs-pagination-disabled-color: #6c757d; --bs-pagination-disabled-bg: #fff; --bs-pagination-disabled-border-color: #dee2e6; display: flex; padding-left: 0; list-style: none; gap: 0.25rem; margin: 2rem 0; justify-content: center; }
.pagination li { position: relative; }
.pagination li a, .pagination li span { position: relative; display: block; padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x); font-size: var(--bs-pagination-font-size); color: var(--bs-pagination-color); text-decoration: none; background-color: var(--bs-pagination-bg); border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color); border-radius: var(--bs-pagination-border-radius); transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; min-width: 2.5rem; min-height: 2.5rem; text-align: center; line-height: 1.5; box-sizing: border-box; }
.pagination li a:hover { z-index: 2; color: var(--bs-pagination-hover-color); background-color: var(--bs-pagination-hover-bg); border-color: var(--bs-pagination-hover-border-color); }
.pagination li a:focus { z-index: 3; color: var(--bs-pagination-focus-color, var(--bs-pagination-hover-color)); background-color: var(--bs-pagination-focus-bg, #e9ecef); outline: 0; box-shadow: var(--bs-pagination-focus-box-shadow); }
.pagination li.active span { z-index: 3; color: var(--bs-pagination-active-color); background-color: var(--bs-pagination-active-bg); border-color: var(--bs-pagination-active-border-color); font-weight: 600; }
.pagination li.disabled span { color: var(--bs-pagination-disabled-color); pointer-events: none; background-color: var(--bs-pagination-disabled-bg); border-color: var(--bs-pagination-disabled-border-color); opacity: 0.6; cursor: not-allowed; }
.pagination li:first-child a, .pagination li:first-child span { border-top-left-radius: var(--bs-pagination-border-radius); border-bottom-left-radius: var(--bs-pagination-border-radius); }
.pagination li:last-child a, .pagination li:last-child span { border-top-right-radius: var(--bs-pagination-border-radius); border-bottom-right-radius: var(--bs-pagination-border-radius); }
/* Small pagination */
.pagination-sm { --bs-pagination-padding-x: 0.5rem; --bs-pagination-padding-y: 0.25rem; --bs-pagination-font-size: 1rem; --bs-pagination-border-radius: 0.25rem; }
.pagination-sm li a, .pagination-sm li span { padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x); font-size: var(--bs-pagination-font-size); min-width: 2rem; min-height: 2rem; }
/* Large pagination */
.pagination-lg { --bs-pagination-padding-x: 1rem; --bs-pagination-padding-y: 0.5rem; --bs-pagination-font-size: 1.25rem; --bs-pagination-border-radius: 0.5rem; }
.pagination-lg li a, .pagination-lg li span { padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x); font-size: var(--bs-pagination-font-size); min-width: 3rem; min-height: 3rem; }
/** Product Image Slider */
.product-image-wrap { width: 100%; height: auto; overflow: hidden; }
.product-image-wrap .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; }
.product-image-wrap .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-image-wrap .swiper { width: 100%; height: auto; margin-left: auto; margin-right: auto; }
.product-image-wrap .swiper-slide { background-size: cover; background-position: center; }
.product-swiper { height: 80%; width: auto; }
.product-swiper-thumb { height: 20%; box-sizing: border-box; padding: 10px 0; }
.product-swiper-thumb .swiper-slide { width: 25%; height: 100%; opacity: 0.4; }
.product-swiper-thumb .swiper-slide-thumb-active { opacity: 1; }
.product-swiper-thumb .swiper-slide img { display: block; width: 100%; height: auto; object-fit: cover; }
.product-image-wrap .swiper-button-next, .product-image-wrap .swiper-button-prev { background-color: #ffffff; width: 42px; height: 42px; overflow: hidden; cursor: pointer; border-radius: 50%; box-shadow: 0 0 8px #c3c3c3; }
.product-image-wrap .swiper-button-next:after, .product-image-wrap .swiper-button-prev:after { color: var(--primary); font-size: 22px; }
/* 43.1. IM Style */
.im { position: fixed; right: 2px; top: auto; bottom: 40px; z-index: 11 }
.im-l { color: #fff; width: 40px; height: 60px; cursor: pointer; background-color: var(--accent-color); box-shadow: 0 0 8px #4e4e4e; border-radius: 4px 0 0 4px; display: block; text-align: center; line-height: 60px; float: left }
.im-l i { font-size: 20px }
#select { display: none }
.im .box { float: right; width: 60px; background-color: var(--accent-color); border-radius: 0 4px 4px 4px; display: none; }
.im .box ul { background-color: #fff; list-style-type: none; margin: 5px; padding: 0px; }
.im .box ul li { height: 50px; width: 50px; overflow: hidden; text-align: center; line-height: 50px }
.im .box ul li a { text-decoration: none; display: block }
.im .box ul li i { font-size: 24px; color: #f39d22 }
.im .box ul li i.fa-skype { color: #00aff0 }
.im .box ul li i.fa-square-whatsapp { color: #00d51b; font-size: 30px; }
.im .box ul li i.fa-user { color: #F66 }
.im .box ul li i.fa-skype, .im .box ul li i.fa-envelope { font-size: 30px }
.im .box ul li a:hover i { color: #343537 }
#select:checked + .box { display: block }
#cus_ser1 .msn { background-image: url(../images/c.html); background-repeat: no-repeat; height: 50px; width: 50px }
.im .skype { background-image: url(../images/c.html); background-repeat: no-repeat; background-position: -47px 0; height: 50px; width: 47px }
.im .mail { background-image: url(../images/c.html); background-repeat: no-repeat; background-position: -94px 0; height: 50px; width: 47px }
.im .kefu_01 { background-repeat: no-repeat; background-position: center center; height: 50px; width: 50px; overflow: hidden; background-color: #FFF }
.im .whatsapp { background-repeat: no-repeat; background-position: center center; height: 50px; width: 50px; overflow: hidden; background-color: #FFF }
@media screen and (min-width:768px) {
.im { width: 100px; position: fixed; right: 0px; top: 250px; transition: right .5s; bottom: auto; z-index: 11 }
.im:hover { right: 0 }
.im .box { position: absolute; display: block; width: 60px; right: 0; top: 0 }
}
/* 44. Resource table */
.resource-section { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.resource-section::before { content: ''; position: absolute; inset: 0; z-index: 0; background-color: rgba(255, 255, 255, 0.75); pointer-events: none; }
.resource-wrap { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; }
.resource-title { color: var(--accent-color); text-align: center; margin-bottom: 0.5em; }
.resource-table-box { background-color: var(--secondary); border: 1px solid var(--accent-color-5); border-radius: 8px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 3px 3px 30px 5px; }
.resource-table-scroll { overflow-x: auto; }
.resource-table-inner { min-width: 1400px; }
.resource-table-head, .resource-table-row { display: grid; grid-template-columns: 1.4fr 1.5fr 0.9fr 1fr 1.2fr 1.2fr 0.9fr 1fr; text-align: center; align-items: center; }
.resource-table-head { background-color: var(--accent-color); color: var(--secondary); font-family: var(--font-family-heading); font-weight: 600; min-height: 52px; padding: 10px 6px; font-size: 0.95rem; }
.resource-table-row { height: 50px; color: var(--primary); padding: 0 6px; font-size: 0.9rem; border-bottom: 1px solid var(--accent-color-5); background-color: var(--secondary); }
.resource-swiper .swiper-slide:nth-child(even) .resource-table-row { background-color: var(--accent-color-3); }
.resource-table-row > div, .resource-table-head > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.resource-swiper { height: 500px; overflow: hidden; }
.resource-swiper .swiper-slide { height: 50px !important; }
.resource-table-full .resource-table-body { overflow: visible; }
.resource-table-full .resource-table-row:nth-child(even) { background-color: var(--accent-color-3); }
.resource-table-full .resource-table-row:last-child { border-bottom: none; }

html[dir="rtl"] .resource-table-head,html[dir="rtl"] .resource-table-row {grid-template-columns: 1.4fr 1.5fr 0.9fr 0.7fr 1fr 0.8fr 0.9fr 1fr;}
html[dir="rtl"] .resource-table-row:not(:nth-child(5)) > div { direction: ltr; }
/* Arabic: layout stays LTR; only copy flows RTL */
.body-ar .banner-inner-title { text-align: right; }
.body-ar .chevron-circle-list li::before { transform: scaleX(-1); margin-left: 0.5em; margin-right: 0em; }
/* dir=rtl 会镜像方向性图标，按钮内 chevron 保持「向右」视觉 */
html[dir="rtl"] .fa-chevron-right, .body-ar .fa-chevron-right { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .temp-category-list li a::before, .body-ar .temp-category-list li a::before { transform: scaleX(-1); margin-left: 0.5em; margin-right: 0em; }
 html[dir="rtl"] .temp-h2{line-height: 1.2;}
/* html[dir="rtl"] .hero-container .temp-h2{line-height: 55px;}  */
/* 手机端：侧栏/IM/横幅按钮；标题区不裁切 fadeInUp */
@media (max-width:767.98px) {
.sidebar { left: -350px; right: auto; direction: ltr; transform: none !important; }
.sidebar.active { transform: translateX(350px) !important; }
.sidebar-overlay { left: -100%; right: auto; }
.sidebar-overlay.active { left: 0; }
.im { left: auto; right: 2px; direction: ltr; }
.im-l { float: left; border-radius: 4px 0 0 4px; }
.request-loader { direction: ltr; }
.request-loader::before, .request-loader::after { inset: 0; margin: auto; }
/* .home-banner-container .banner-slide-actions { direction: ltr; justify-content: flex-start !important; } */
.header-navbar-fixed .navbar, .header-navbar-fixed .container-fluid { direction: ltr; }
.heading-wrapper-title, .about-section .about-heading-sub, .about-section .about-media.image-container { height: auto; overflow: visible; }
}
/* 15. Heading Style */
.heading-wrapper-title { width: 75%; height: 100%; overflow: hidden; }
.heading-wrapper-link { display: flex; width: 25%; height: 100%; align-self: center; justify-content: end; }
.heading-wrapper-text { display: flex; width: 25%; height: 100%; align-self: center; justify-content: end; }
/* 17. About Style */
.about-media-content { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 30px; align-items: start; }
.about-media { width: 100%; }
.about-content-description-container { display: flex; flex-direction: column; gap: 30px 30px; justify-content: center; padding-left: 3em; }
.about-meta-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.about-stat-container { display: flex; flex-direction: column; gap: 20px 20px; align-items: center; justify-content: center; height: 100%; }
.about-stat { font-family: var(--font-family-heading); font-size: 8rem; font-weight: 800; line-height: 1em; color: var(--accent-color); }
.about-stat img { width: 180px; vertical-align: bottom; }
.temp-h2 { color: var(--accent-color); text-transform: capitalize; }
.company-icons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.company-item { display: flex; align-items: center; gap: 20px; background-color: #ffffff; border-radius: 10px; padding: 30px; }
.company-content { width: calc(100% - 140px); }
.company-icon { flex: 1; }
.company-icon img { width: 100%; height: 100%; object-fit: cover; }
.company-content h3 { margin-bottom: 10px; }
.company-content p { margin-bottom: 0; }
.company-content h3 { margin-bottom: 10px; }
.company-icons .company-icon { width: 120px; height: 120px; border-radius: 50%; background-color: #eee; display: flex; justify-content: center; align-items: center; }
.company-icons .company-icon img { width: 65px; height: 65px; object-fit: contain; }
.company-icons .company-item:nth-child(1) img { width: 60px; height: 60px; }