* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-green: #2ecc71;
--primary-blue: #3498db;
--primary-cyan: #1abc9c;
--dark-blue: #2980b9;
--dark-bg: #2c3e50;
--light-bg: #ecf0f1;
--white: #ffffff;
--text-dark: #2c3e50;
--text-light: #7f8c8d;
--accent-red: #e74c3c;
--shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
--shadow-light: 0 2px 10px rgba(0, 0, 0, 0.08);
--transition: all 0.3s ease;
--border-radius: 12px;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Segoe UI', 'Arial', 'Helvetica', sans-serif;
line-height: 1.6;
color: var(--text-dark);
background-color: var(--white);
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.containerss{
padding: 77px 20px; 
} .navbar { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
position: sticky;
top: 0;
z-index: 1000;
transition: var(--transition);
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 20px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.8rem;
font-weight: bold;
color: var(--primary-green);
}
.logo i {
font-size: 2rem;
}
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
font-size: 0.95rem;
transition: var(--transition);
position: relative;
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-green);
transition: var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
color: var(--primary-green);
}
.nav-links a:hover::after,
.nav-links a.active::after {
width: 100%;
}
.nav-icons {
display: flex;
gap: 1.5rem;
}
.nav-icons i {
font-size: 1.3rem;
color: var(--text-dark);
cursor: pointer;
transition: var(--transition);
}
.nav-icons i:hover {
color: var(--primary-green);
transform: scale(1.1);
}
.menu-toggle {
display: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--text-dark);
} .hero-section {
min-height: 80%;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://www.tktevgo.com/wp-content/themes/ev-charging-pro/assets/nes/122.jpg) no-repeat;
background-size: 100% 100%;
opacity: 1;
}
.hero-section .container {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content {
flex: 1;
padding-right: 3rem;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
color: var(--white);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero-title span {
color: var(--primary-green);
background: var(--white);
padding: 0.2rem 1rem;
border-radius: 5px;
}
.hero-tags {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 2rem;
}
.tag {
background: rgba(255, 255, 255, 0.2);
color: var(--white);
padding: 0.6rem 1.2rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 500;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.cta-button {
background: var(--primary-green);
color: var(--white);
border: none;
padding: 1rem 2.5rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: var(--transition);
box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(46, 204, 113, 0.4);
}
.cta-button.large {
padding: 1.2rem 3rem;
font-size: 1.2rem;
}
.hero-image {
flex: 1;
display: flex;
justify-content: center;
}
.product-showcase img {
max-width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
} section { }
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-dark);
text-align: center;
text-align: center;
margin-bottom: 2.5rem;
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: var(--primary-green);
margin: 1rem auto 2rem;
border-radius: 2px;
}
.section-description {
text-align: center;
font-size: 1.1rem;
color: var(--text-light);
max-width: 700px;
margin: 0 auto 3rem;
} .tech-support {
background: var(--light-bg);
text-align: center;
}
.tech-support .section-title {
font-size: 2rem;
} .app-support {
background: var(--white);
}
.app-support-content {
display: flex;
gap: 4rem;
align-items: center;
}
.images_appsupport {
position: relative;
width: 600px;
height: 400px;
}
.support-image {
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px; object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.support-image.active {
opacity: 1;
pointer-events: auto;
}
.app-image img {
width: 100%;
max-width: 400px;
border-radius: 20px;
box-shadow: var(--shadow);
}
.app-features-tabs {
flex: 1;
display: flex;
justify-content: space-between;
position: absolute;
z-index: 9999;
margin: 0 auto;
margin-left: 19%;
width: 80%;
}
.tabs-nav {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 2rem;
width: 20%;
}
.tab-btn {
width: 100%;
padding: 2rem 2rem;
background: #3a3a3a;
border: none;
border-radius: 0;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: var(--white);
transition: var(--transition);
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
text-align: left;
}
.tab-btn:hover {
background: var(--primary-green);
transform: none;
}
.tab-btn.active {
background: var(--primary-green);
color: var(--white);
}
.tab-btn i {
font-size: 1.5rem;
min-width: 24px;
}
.tabs-content { padding: 2.5rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-light);
margin-right: 10%;
width: 56%;
}
.tab-pane {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-pane.active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tab-pane h3 {
font-size: 1.8rem;
color: var(--text-dark);
margin-bottom: 1rem;
}
.tab-pane p {
color: var(--text-light);
margin-bottom: 1.5rem;
line-height: 1.8;
}
.feature-list {
list-style: none;
margin-bottom: 2rem;
}
.feature-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 0.5rem 0;
font-size: 1.4rem;
color: #35bf4a;
font-weight: 600;
}
.feature-list i {
color: var(--primary-green);
font-size: 1.2rem;
}
.feature-btn {
background: var(--primary-blue);
color: var(--white);
border: none;
padding: 0.8rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: var(--transition);
}
.feature-btn:hover {
background: var(--dark-blue);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(52, 152, 219, 0.3);
} .product-carousel {
background: linear-gradient(to bottom, #f8f9fa, #ffffff);
}
.carousel-wrapper {
position: relative;
overflow: hidden;
padding: 2rem 0;
}
.carousel-track {
display: flex;
gap: 2rem;
transition: transform 0.5s ease;
cursor: grab;
}
.carousel-track:active {
cursor: grabbing;
}
.carousel-item {
flex: 0 0 calc(33.333% - 1.5rem);
}
.product-card {
background: var(--white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-light);
transition: var(--transition);
height: 100%;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.product-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.product-card h3 {
padding: 1.5rem 1.5rem 0.5rem;
font-size: 1.3rem;
color: #fff;
}
.product-card p {
padding: 0 1.5rem;
color: #fff;
font-size: 0.95rem;
margin-bottom: 1rem;
}
.product-card .price {
display: block;
padding: 0 1.5rem 1.5rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-green);
}
.carousel-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
display: flex;
justify-content: space-between;
pointer-events: none;
padding: 0 2rem;
}
.carousel-arrow {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--white);
border: none;
box-shadow: var(--shadow);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--text-dark);
transition: var(--transition);
pointer-events: auto;
}
.carousel-arrow:hover {
background: var(--primary-green);
color: var(--white);
transform: scale(1.1);
} .charging-network {
background: var(--white);
}
.network-content {
display: flex;
gap: 3rem;
align-items: flex-start;
}
.map-container {
flex: 2;
}
.map-container img {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
.search-form {
flex: 1;
background: var(--light-bg);
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow-light);
}
.search-form h3 {
font-size: 1.5rem;
color: var(--text-dark);
margin-bottom: 1.5rem;
}
.search-form .form-group {
position: relative;
margin-bottom: 1.5rem;
}
.search-form input,
.search-form select {
width: 100%;
padding: 1rem 1rem 1rem 3rem;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
}
.search-form input:focus,
.search-form select:focus {
outline: none;
border-color: var(--primary-green);
}
.search-form .form-group i {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--primary-green);
font-size: 1.2rem;
}
.submit-btn {
width: 100%;
padding: 1rem;
background: var(--primary-green);
color: var(--white);
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: var(--transition);
}
.submit-btn:hover {
background: var(--dark-blue);
transform: translateY(-2px);
} .service-locations {
background: var(--light-bg);
}
.locations-content {
display: flex;
gap: 4rem;
align-items: flex-start;
}
.locations-image {
flex: 1;
position: relative; }
.locations-image img {
width: 100%;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.locations-image img.active {
opacity: 1;
}
.locations-accordion {
flex: 1;
}
.accordion-item {
background: var(--white);
margin-bottom: 1rem;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-light);
transition: var(--transition);
}
.accordion-item:hover {
box-shadow: var(--shadow);
}
.accordion-header {
width: 100%;
padding: 1.3rem 1.5rem;
background: var(--white);
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.1rem;
font-weight: 600;
color: var(--text-dark);
transition: var(--transition);
}
.accordion-header:first-child {
color: var(--primary-green);
}
.accordion-header:hover {
background: var(--light-bg);
}
.accordion-header.active {
background: var(--primary-green);
color: var(--white);
}
.accordion-header .fa-chevron-down {
margin-left: auto;
transition: transform 0.3s ease;
}
.accordion-header.active .fa-chevron-down {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.3s ease;
background: var(--light-bg);
}
.accordion-content.active {
max-height: 500px;
padding: 1.5rem;
}
.accordion-content p {
color: var(--text-light);
line-height: 1.8;
margin-bottom: 1rem;
}
.accordion-content .learn-more {
color: var(--primary-green);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 5px;
transition: var(--transition);
}
.accordion-content .learn-more:hover {
color: var(--primary-blue);
gap: 10px;
} .cta-section {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-cyan));
text-align: center;
padding: 6rem 0;
}
.cta-section h2 {
font-size: 3rem;
color: var(--white);
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 2rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
} .footer {
background: var(--dark-bg);
color: var(--white);
padding: 4rem 0 0;
}
.footer-content {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-brand .logo {
color: var(--primary-green);
margin-bottom: 1.5rem;
}
.footer-brand p {
color: var(--text-light);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 10px;
}
.footer-brand i {
color: var(--primary-green);
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-links a {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.social-links a:hover {
background: var(--primary-green);
transform: translateY(-3px);
}
.footer-links h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
color: var(--white);
}
.footer-links ul {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: var(--text-light);
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--primary-green);
padding-left: 5px;
}
.footer-contact h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
color: var(--white);
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 1rem;
margin-bottom: 1rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: var(--white);
font-size: 0.95rem;
transition: var(--transition);
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--primary-green);
background: rgba(255, 255, 255, 0.1);
}
.contact-form textarea {
resize: vertical;
}
.contact-form button {
width: 100%;
padding: 1rem;
background: var(--primary-green);
color: var(--white);
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.contact-form button:hover {
background: var(--dark-blue);
transform: translateY(-2px);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
text-align: center;
color: var(--text-light);
font-size: 0.9rem;
} @media (max-width: 1200px) {
.carousel-item {
flex: 0 0 calc(50% - 1rem);
}
}
@media (max-width: 992px) {
.hero-content {
padding-right: 2rem;
}
.hero-title {
font-size: 2.8rem;
}
.app-support-content,
.locations-content {
flex-direction: column;
align-items: center;
}
.app-image,
.locations-image {
width: 100%;
max-width: 400px;
}
.app-features-tabs,
.locations-accordion {
width: 100%;
}
.network-content {
flex-direction: column;
}
.map-container,
.search-form {
width: 100%;
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
flex-direction: column;
padding: 1rem;
gap: 0;
box-shadow: var(--shadow);
}
.nav-links.active {
display: flex;
}
.nav-links a {
padding: 1rem;
border-bottom: 1px solid #f0f0f0;
}
.menu-toggle {
display: block;
}
.hero-section {
min-height: auto;
padding: 3rem 0;
}
.hero-section .container {
flex-direction: column;
text-align: center;
}
.hero-content {
padding-right: 0;
margin-bottom: 2rem;
}
.hero-title {
font-size: 2rem;
}
.hero-tags {
justify-content: center;
}
.carousel-item {
flex: 0 0 calc(100% - 1rem);
}
.footer-content {
grid-template-columns: 1fr;
}
section {
padding: 3rem 0;
}
.section-title {
font-size: 1.8rem;
}
} ::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--primary-green);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--dark-blue);
} ::selection {
background: var(--primary-green);
color: var(--white);
}
@media screen and (max-width: 768px) {
.containerss{
margin-top: 3rem !important;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url(https://www.tktevgo.com/wp-content/themes/ev-charging-pro/assets/nes/122.jpg) no-repeat;
background-size: cover;
opacity: 1;
}
.hero-section {
min-height: 10rem;
padding: 3rem 0;
}
.container {
padding: 1.5rem;
}
h2, .section-title {
font-size: 1.4rem;
margin-bottom: 1.5rem;
}
p, .section-description {
font-size: 0.95rem;
} .app-support-content {
display: flex !important;
flex-direction: column !important;
height: auto !important;
position: relative !important;
gap: 2rem;
}
.images_appsupport {
width: 100% !important;
height: 280px !important;
position: relative !important;
top: auto !important;
left: auto !important;
}
.support-image {
width: 100% !important;
height: 100% !important;
position: absolute !important;
border-radius: 15px;
}
.yinying, .yinying2 {
position: absolute !important;
width: 100% !important;
height: 100% !important;
z-index: 5 !important;
left: 0 !important;
top: 0 !important;
}
.yinying {
background: rgba(0, 0, 0, 0.15) !important;
}
.yinying2 {
background: rgba(0, 0, 0, 0.3) !important;
}
.app-features-tabs {
width: 100% !important;
display: flex !important;
flex-direction: column !important;
margin-left: 0rem;
}
.tabs-nav {
display: flex !important;
flex-direction: column !important;
background: rgba(0, 0, 0, 0.8);
padding: 1.5rem;
border-radius: 10px;
order: -1;
}
.tabs-nav .section-title {
font-size: 1.3rem !important;
color: #fff !important;
margin: 0 0 1.5rem 0 !important;
}
.tab-btn {
padding: 0.9rem 1rem !important;
font-size: 0.9rem !important;
width: 100% !important;
margin-bottom: 0.5rem;
background: rgba(46, 204, 113, 0.2) !important;
border: 1px solid #2ecc71 !important;
text-align: left;
}
.tab-btn.active {
background: #2ecc71 !important;
color: #000 !important;
}
.tabs-content {
display: block !important;
padding: 1.5rem 0 !important;
background: transparent !important;
box-shadow: none !important;
margin-right: 0 !important;
width: 100% !important;
border-radius: 0 !important;
}
.tab-pane {
display: none !important;
}
.tab-pane.active {
display: block !important;
}
.feature-list222 {
margin: 1.5rem 0 0 0 !important;
padding: 1.5rem;
background: rgba(0, 0, 0, 0.6);
border-radius: 10px;
color: #fff;
}
.feature-list222 li {
display: block !important;
margin-bottom: 1.2rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-list222 li:last-child {
margin-bottom: 0;
border-bottom: none;
}
.feature-list222 li i {
color: #2ecc71;
margin-right: 0.8rem;
}
.feature-list222 li p {
margin: 0.5rem 0 0 0 !important;
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 400 !important;
font-size: 0.9rem !important;
} #products .section-title {
text-align: center;
margin-bottom: 2rem;
}
.carousel-wrapper {
padding: 0 1rem;
} .locations-content {
flex-direction: column !important;
}
.locations-image {
width: 100% !important;
margin-bottom: 2rem !important;
}
.locations-image img {
width: 100%;
height: auto;
border-radius: 10px; position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.locations-image img.active {
opacity: 1;
}
.locations-accordion {
width: 100% !important;
}
.accordion-item {
margin-bottom: 0.5rem;
}
.accordion-header {
padding: 1rem 1.2rem !important;
font-size: 0.95rem !important;
background: #f5f5f5;
}
.accordion-header.active {
background: #2ecc71;
color: #fff;
}
.accordion-content {
padding: 1rem 1.2rem !important;
font-size: 0.9rem !important;
background: #fafafa;
display: none;
}
.accordion-content.active {
display: block !important;
}
.accordion-content p {
margin-bottom: 1rem;
line-height: 1.6;
} .footer-content {
flex-direction: column !important;
gap: 2rem;
}
.footer-brand,
.footer-links,
.footer-contact {
width: 100% !important;
}
.cta-section h2 {
font-size: 1.3rem !important;
}
.cta-button {
padding: 0.9rem 1.8rem !important;
font-size: 0.95rem !important;
}
} #support h6 {
width: 240px;
margin: 0 auto 12px;
text-align: center;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: #35b04a;
}
h6::before {
content: "";
left: 0;
top: 0;
bottom: 0;
margin: auto 0;
width: 24px;
height: 2px;
position: absolute;
background-color: var(--e-global-color-accent);
} .app-support-content {
height: 100vh;
position: relative;
}
.images_appsupport {
width: 100%;
height: 100%;
position: absolute;
top: 0rem;
left: 0rem;
}
.yinying {
position: absolute;
width: 35%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
z-index: 5;
left: 0rem;
top: 0rem;
}
.tabs-nav .section-title {
font-size: 2rem;
color: #fff !important;
margin-bottom: 6.3rem;
margin-top: 2rem;
text-align: left;
}
.tabs-nav .section-title::after { margin: unset;
margin-top: 1rem;
}
.feature-list222 li {
display: block;
}
.feature-list222 li p {
margin-bottom: 0;
color: #fff;
font-weight: 400;
font-size: 1.2rem;
}
.feature-list222 {
margin-top: 9rem;
}
.yinying2 {
width: 100%;
height: 100%;
position: absolute;
left: 0rem;
top: 0rem;
background: rgba(0,0,0,0.5);
z-index: 9;
}
#products .section-title { } @media screen and (max-width: 480px) {
.container {
padding: 0rem !important;
}
h1, .hero-content h1 {
font-size: 1.3rem !important;
}
h2, .section-title {
font-size: 1.2rem !important;
margin-bottom: 1rem;
}
h3 {
font-size: 1rem !important;
}
p, .section-description {
font-size: 0.85rem !important;
margin-bottom: 1rem;
} .app-support-content {
flex-direction: column !important;
height: auto !important;
position: relative !important;
gap: 1.5rem !important;
}
.images_appsupport {
width: 100% !important;
height: 726px !important;
position: relative !important;
top: auto !important;
left: auto !important;
margin-bottom: 0 !important;
border-radius: 12px;
overflow: hidden;
}
.support-image {
width: 100% !important;
height: 100% !important;
border-radius: 12px;
}
.yinying, .yinying2 {
position: absolute !important;
width: 100% !important;
height: 100% !important;
}
.app-features-tabs {
width: 100% !important;
}
.tabs-nav {
display: flex !important;
flex-direction: column !important;
background: rgba(0, 0, 0, 0.85);
padding: 1.2rem;
border-radius: 8px;
order: -1;
width: 100%;
gap: 0;
}
.tabs-nav .section-title {
font-size: 1.1rem !important;
color: #fff !important;
margin: 0 0 1.2rem 0 !important;
}
.tab-btn {
padding: 0.8rem !important;
font-size: 0.85rem !important;
width: 100% !important;
margin-bottom: 0.4rem !important;
background: rgba(46, 204, 113, 0.15) !important;
border: 1px solid rgba(46, 204, 113, 0.5) !important;
text-align: left !important;
border-radius: 6px;
}
.tab-btn.active {
background: #2ecc71 !important;
color: #000 !important;
border-color: #2ecc71 !important;
}
.tabs-content {
display: block !important;
padding: 1.2rem 0 !important;
background: transparent !important;
box-shadow: none !important;
margin-right: 0 !important;
width: 100% !important;
border-radius: 0 !important;
}
.tab-pane {
display: none !important;
}
.tab-pane.active {
display: block !important;
}
.feature-list222 {
margin: 1.2rem 0 0 0 !important;
padding: 1.2rem;
background: rgba(0, 0, 0, 0.7);
border-radius: 8px;
color: #fff;
list-style: none;
}
.feature-list222 li {
display: block !important;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.feature-list222 li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.feature-list222 li i {
color: #2ecc71;
margin-right: 0.6rem;
}
.feature-list222 li p {
margin: 0.4rem 0 0 0 !important;
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 400 !important;
font-size: 0.8rem !important;
line-height: 1.4;
} #products {
padding: 2rem 0 !important;
}
#products .section-title {
text-align: center;
margin-bottom: 1.5rem;
}
.carousel-wrapper {
padding: 0 0.5rem !important;
} .service-locations {
padding: 2rem 0 !important;
}
.locations-content {
flex-direction: column !important;
}
.locations-image {
width: 100% !important;
margin-bottom: 1.5rem !important;
}
.locations-image img {
width: 100%;
height: auto;
border-radius: 8px;
}
.locations-accordion {
width: 100% !important;
}
.accordion-item {
margin-bottom: 0.4rem;
}
.accordion-header {
padding: 0.8rem 1rem !important;
font-size: 0.85rem !important;
background: #f0f0f0;
border-radius: 6px;
gap: 0.5rem;
}
.accordion-header i:first-child {
font-size: 0.9rem;
}
.accordion-header.active {
background: #2ecc71;
color: #fff;
}
.accordion-content {
padding: 0.8rem 1rem !important;
font-size: 0.8rem !important;
background: #fafafa;
border-radius: 0 0 6px 6px;
display: none;
}
.accordion-content.active {
display: block !important;
}
.accordion-content p {
margin-bottom: 0.8rem;
line-height: 1.5;
}
.learn-more {
font-size: 0.8rem !important;
} .cta-section {
padding: 2rem 0 !important;
}
.cta-section h2 {
font-size: 1.2rem !important;
margin-bottom: 0.8rem;
}
.cta-section p {
font-size: 0.85rem !important;
margin-bottom: 1.2rem;
}
.cta-button {
padding: 0.75rem 1.5rem !important;
font-size: 0.85rem !important;
} .footer {
padding: 2rem 0 0.5rem !important;
}
.footer-content {
flex-direction: column !important;
gap: 1.5rem;
}
.footer-brand,
.footer-links,
.footer-contact {
width: 100% !important;
}
.ddr img{
width: 3rem !important;
}
.footer-brand .logo {
font-size: 1.2rem;
}
.footer-phone,
.footer-hours {
font-size: 0.85rem !important;
}
.footer-links h3,
.footer-contact h3 {
font-size: 1rem !important;
margin-bottom: 0.8rem;
}
.footer-links ul li {
margin-bottom: 0.4rem;
}
.contact-form input,
.contact-form textarea,
.contact-form button {
font-size: 0.85rem !important;
padding: 0.6rem !important;
}
.footer-bottom p {
font-size: 0.75rem !important;
}
}.carousel-track.horizontal-accordion {
display: flex !important;
height: 81vh;
gap: 10px;
padding: 0;
overflow: visible;
}
.carousel-track.horizontal-accordion .carousel-item {
flex: 1 !important;
cursor: pointer;
transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s ease !important;
overflow: hidden;
border-radius: var(--border-radius);
min-flex-basis: 100px;
position: relative;
}
.carousel-track.horizontal-accordion .carousel-item.active {
flex: 4 !important;
position: relative;
}
.carousel-track.horizontal-accordion .product-card {
height: 100%;
display: flex;
flex-direction: column;
background: transparent;
box-shadow: none;
border-radius: var(--border-radius);
overflow: hidden;
}
.carousel-track.horizontal-accordion .product-card img {
width: 100%;
height: 100%;
object-fit: cover;
padding: 0;
}
.carousel-track.horizontal-accordion .card-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
color: var(--white);
padding: 1.5rem;
opacity: 0;
transition: opacity 0.3s ease;
font-size: 0.8rem;
}
.carousel-track.horizontal-accordion .carousel-item:hover .card-info {
opacity: 1;
}
.carousel-track.horizontal-accordion .carousel-item.active .card-info {
position: absolute; color: var(--text-dark);
opacity: 1;
padding: 2rem;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
text-align: left;
}
.card-info {}
.carousel-track.horizontal-accordion .card-info h3 {
font-size: 2rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
}
.carousel-track.horizontal-accordion .card-info p {
font-size: 1.2rem;
margin: 0 0 1rem 0;
line-height: 1.5;
}
.carousel-track.horizontal-accordion .card-info .price {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-green);
margin: 0;
padding: 0;
} .carousel-track.horizontal-accordion ~ .carousel-controls {
display: none !important;
}  @media screen and (max-width: 768px) {
.carousel-track.horizontal-accordion {
height: 280px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
gap: 10px !important;
padding: 0 1rem !important;
}
.carousel-track.horizontal-accordion .carousel-item {
flex: 0 0 160px !important;
min-flex-basis: 160px !important;
border-radius: 12px;
}
.carousel-track.horizontal-accordion .carousel-item.active {
flex: 0 0 160px !important;
width: 29rem;
}
.carousel-track.horizontal-accordion .product-card {
height: 100% !important;
border-radius: 12px;
}
.carousel-track.horizontal-accordion .product-card img {
border-radius: 12px;
}
.carousel-track.horizontal-accordion .card-info {
padding: 1rem !important;
font-size: 0.8rem !important;
border-radius: 12px;
bottom: 0;
}
.carousel-track.horizontal-accordion .carousel-item:hover .card-info {
opacity: 1 !important;
}
.carousel-track.horizontal-accordion .card-info h3 {
font-size: 1.1rem !important;
margin: 0 0 0.4rem 0 !important;
font-weight: 600;
}
.carousel-track.horizontal-accordion .card-info p {
font-size: 0.85rem !important;
margin: 0 !important;
line-height: 1.3;
}
} @media screen and (max-width: 480px) {
.carousel-track.horizontal-accordion {
height: 260px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 8px !important;
padding: 0 0.8rem !important;
}
.carousel-track.horizontal-accordion .carousel-item {
flex: 0 0 130px !important;
min-flex-basis: 130px !important;
border-radius: 10px;
}
.carousel-track.horizontal-accordion .carousel-item.active {
flex: 0 0 320px !important;
}
.carousel-track.horizontal-accordion .product-card {
height: 100% !important;
border-radius: 10px;
}
.carousel-track.horizontal-accordion .product-card img {
border-radius: 10px;
}
.carousel-track.horizontal-accordion .card-info {
padding: 0.8rem !important;
font-size: 0.7rem !important;
border-radius: 10px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7)) !important;
bottom: 0;
}
.carousel-track.horizontal-accordion .carousel-item:hover .card-info {
opacity: 1 !important;
}
.carousel-track.horizontal-accordion .carousel-item.active .card-info {
opacity: 1 !important;
}
.carousel-track.horizontal-accordion .card-info h3 {
font-size: 0.95rem !important;
margin: 0 0 0.2rem 0 !important;
font-weight: 600;
}
.carousel-track.horizontal-accordion .card-info p {
font-size: 0.75rem !important;
margin: 0 !important;
line-height: 1.2;
}
.carousel-track.horizontal-accordion .card-info .price {
font-size: 0.9rem !important;
margin: 0.3rem 0 0 0 !important;
}
}