.badge,.cta-button,.logo-main
{font-weight:700}

.has-submenu.active .submenu,.language-switcher.active .lang-dropdown,.submenu a
{display:block}

.footer-links ul,nav ul,ul
{list-style:none}

*,.nav-container
{box-sizing:border-box}

.copy-text:hover,.phone-number:hover
{text-decoration:underline}

.has-submenu,.hero-section,.logo-main
{position:relative}

.copyright,.hero-container,.section-header,.service-card h3,.service-card p,.stats-item,.text-center
{text-align:center}

.contact-modal.active,.has-submenu.active>.submenu
{opacity:1;visibility:visible}

:root
{--primary:#1a56a8;--secondary:#ff6f61;--accent:#fadb5f;--light:#f5f7fa;--header-height:70px;
--primary-dark:#2563eb;--accent-dark:#dc2626;--white:#ffffff;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--blue-100:#dbeafe;--red-300:#fca5a5}

@keyframes spin
{0%
{transform:rotate(0)}

100%
{transform:rotate(360deg)}

}

.loading-spinner
{display:inline-block;width:20px;height:20px;border:3px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#007bff;animation:1s ease-in-out infinite spin;margin-right:10px}

.error-message button
{background:#007bff;color:#fff;border:none;padding:5px 15px;border-radius:4px;cursor:pointer;margin-top:10px}

*,.submenu li,body,header
{margin:0;padding:0}

.error-message button:hover
{background:#0056b3}

button.cta-button
{border:none!important;outline:0!important;-webkit-appearance:none;appearance:none;background:var(--secondary)}

@keyframes pulse
{0%,100%
{transform:scale(1)}

50%
{transform:scale(1.05)}

}

header
{background:linear-gradient(135deg,rgba(0,35,102,.9) 0,rgba(0,82,155,.9) 100%),url("/img/bgphoto.webp") center/cover no-repeat;color:#fff;position:fixed;min-height:0;display:flex;flex-direction:column;z-index:100;top:0;left:0;width:100%;height:var(--header-height)}

.header-scrolled
{box-shadow:0 2px 15px rgba(0,0,0,.1)}

main
{padding-top:var(--header-height)}

.nav-container
{display:flex;justify-content:space-between;align-items:center;padding:15px 5%;background-color:#1a56a8;width:100%;min-height:70px}

.feature-item,.logo
{display:flex;align-items:center}

.logo img
{height:40px;margin-right:10px}

.badge
{background:var(--accent);color:var(--primary);padding:3px 8px;font-size:12px;border-radius:4px}

nav ul
{display:flex}

nav ul li
{margin-left:30px}

nav ul li a
{color:#fff;text-decoration:none;font-weight:500;transition:.3s}

nav ul li a:hover
{color:var(--accent)}

.cta-button
{background:var(--secondary);box-shadow:0 4px 15px rgba(255,111,97,.4);animation:2s infinite pulse}

.logo-text
{margin-left:10px}

.logo-main
{background:linear-gradient(#fff,#a8d8ff);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:24px;letter-spacing:.5px}

.logo-main:before
{content:"";background:radial-gradient(rgba(168,216,255,.3),transparent)}

.process-step::before,.process-steps::before
{content:'';top:24px;z-index:1;position:absolute}

.logo-slogan
{color:#666;font-size:13px;margin-top:3px;font-weight:500}

.dropdown-arrow
{margin-left:5px;font-size:12px;transition:transform .3s}

.btn,.faq-answer,.faq-item,.service-link,.submit-btn
{transition:.3s}

.has-submenu .submenu
{display:none;position:absolute;top:100%;left:0;background:var(--primary);min-width:200px;box-shadow:0 5px 15px rgba(0,0,0,.1);z-index:100;padding:10px 0}

.submenu a
{padding:8px 20px}

.submenu a:hover
{background:#f5f5f5;color:var(--primary)!important}

.logo a,a
{color:inherit;text-decoration:none}

body>main>section#home>div.absolute
{
background: linear-gradient(135deg, rgba(0, 82, 155, 0.5) 0%, rgba(0, 82, 155, 0.9) 100%), 
url(/img/hk_scen2.avif) no-repeat center / cover;


}

.mobile-nav-active
{overflow:hidden;height:100vh}

.language-switcher
{position:relative;margin-left:20px;align-self:center}

.language-switcher .lang-current
{background-color:transparent;border:1px solid #ddd;border-radius:5px;padding:8px 12px;cursor:pointer;display:flex;align-items:center;font-size:14px;color:#fff}

.language-switcher .lang-current i
{margin-right:8px}

.language-switcher .lang-dropdown
{display:none;position:absolute;top:100%;right:0;background-color:rgba(0,35,102,.5);border:1px solid #fff;box-shadow:0 4px 8px rgba(0,0,0,.1);list-style:none;padding:5px 0;margin:5px 0 0;min-width:120px;z-index:1000;border-radius:5px}

.language-switcher .lang-dropdown li a
{display:block;padding:10px 15px;color:#fff;text-decoration:none;font-size:14px}

.language-switcher .lang-dropdown li a:hover
{background-color:rgba(0,35,102)}

@media (max-width:992px)
{header
{padding-bottom:0}

.nav-container
{padding:15px 5%}

body.mobile-nav-active #mainNav
{transform:translateX(0)}

.language-switcher
{margin-left:auto;margin-right:10px}

}

.has-submenu.active>.submenu
{display:block}

.faq-item.active .faq-question i,.has-submenu.active>span .desktop-arrow
{transform:rotate(180deg)}

.logo a
{display:flex;align-items:center}

footer
{background:var(--primary);color:#fff;padding:60px 0 30px}

.footer-container
{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px}

.footer-column
{margin-bottom:30px}

.footer-logo
{font-size:24px;font-weight:700;margin-bottom:20px;color:#fff}

.footer-about p
{margin-bottom:20px;opacity:.8;line-height:1.6}

.social-links
{display:flex;gap:15px;margin-top:20px}

.social-links a
{color:#fff;font-size:20px;transition:opacity .3s}

.faq-question i,.service-link i,.submit-btn i
{transition:transform .3s}

.social-links a:hover
{opacity:.8}

.footer-links h3
{font-size:18px;margin-bottom:20px;color:var(--accent)}

.footer-links ul li
{margin-bottom:10px}

.footer-links ul li a
{color:#fff;opacity:.8;text-decoration:none;transition:opacity .3s}

.footer-links ul li a:hover,.toast.show
{opacity:1}

.copyright
{margin-top:50px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);opacity:.7;font-size:14px;grid-column:1/-1}

body
{color:#333;color:var(--gray-800);line-height:1.6;background-color:var(--white);font-family:Arial,sans-serif;min-height:200vh;padding-bottom:80px}

.container
{width:100%;max-width:1200px;margin:0 auto;padding:0 15px}

.qrcode img,img
{max-width:100%;height:auto}

.btn
{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:.375rem;font-weight:500}

.hero-container,.qrcode
{flex-direction:column;display:flex}

.btn-primary
{background-color:var(--accent);color:var(--white)}

.btn-primary:hover
{background-color:var(--accent-dark)}

.btn-phone
{background-color:rgba(255,255,255,.1);color:var(--white);border:1px solid rgba(255,255,255,.3)}

.btn-phone:hover,.feature-icon,.social-icons a:hover
{background-color:rgba(255,255,255,.2)}

.copy-text
{color:var(--primary);margin-left:.5rem;font-size:.875rem;cursor:pointer}

.copy-text:hover
{color:var(--primary-dark)}

.qrcode
{align-items:center;gap:.5rem;margin-top:1rem}

.qrcode img
{border:1px solid var(--gray-200);border-radius:4px}

.qrcode p,.testimonial-header p
{font-size:.875rem;color:var(--gray-600)}

.hero-section
{padding:5rem 0 8rem;color:var(--white);overflow:hidden}

.hero-bg
{position:absolute;inset:0;opacity:.6;z-index:0}

.hero-container
{position:relative;z-index:10;align-items:center}

.hero-content h2
{font-size:3rem;font-weight:800;line-height:1.2;margin-bottom:1.5rem}

.hero-content h2 span
{color:var(--red-300)}

.section-header h2 span,.stats-number
{color:var(--primary)}

.hero-content p
{font-size:1.25rem;margin-bottom:2rem;color:var(--blue-100)}

.section-header h2,.stats-number
{font-size:2.25rem;font-weight:700}

.hero-buttons
{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.5rem}

.hero-features
{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

.feature-badge,.feature-icon
{display:flex;align-items:center}

.feature-icon
{border-radius:50%;padding:.5rem;margin-right:.75rem;justify-content:center}

.stats-item,.stats-section
{background-color:var(--white)}

.feature-icon i,.footer-col ul li a:hover,.footer-links a:hover
{color:var(--white)}

.stats-section
{padding:3rem 0;margin-top:-4rem;position:relative;z-index:20;box-shadow:0 4px 6px rgba(0,0,0,.05)}

.stats-container
{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}

.stats-item
{border:1px solid var(--gray-200);border-radius:.5rem;padding:1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1)}

.stats-number
{margin-bottom:.5rem}

.advantage-item p,.stats-label
{color:var(--gray-600)}

.services-section,.testimonials-section
{padding:5rem 0;background-color:var(--gray-100)}

.section-header
{margin-bottom:4rem}

.section-header h2
{margin-bottom:1rem;color:var(--gray-800)}

.section-header p
{font-size:1.125rem;color:var(--gray-600);max-width:42rem;margin:0 auto}

.services-grid
{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}

.service-card
{background-color:var(--white);border-radius:.5rem;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.05);position:relative;border-top:3px solid var(--primary)}

.service-card.featured
{border-top-color:var(--accent)}

.feature-badge
{background:var(--accent);color:var(--white);justify-content:center}

.service-icon,.service-link
{display:flex;align-items:center;color:var(--primary)}

.service-icon
{width:56px;height:56px;background-color:var(--blue-100);border-radius:50%;justify-content:center;margin:1.5rem auto;font-size:1.5rem}

.service-card h3
{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--gray-800)}

.service-card p,.service-features
{margin-bottom:1.5rem;padding:0 1.5rem}

.service-card p
{color:var(--gray-600)}

.service-features li
{display:flex;align-items:flex-start;margin-bottom:.5rem;color:var(--gray-600)}

.service-features i
{color:#10b981;margin-right:.5rem;margin-top:.25rem}

.advantage-item h3,.process-step h3
{margin-bottom:.5rem;color:var(--gray-800)}

.service-link
{justify-content:center;padding:1rem;font-weight:500;border-top:1px solid var(--gray-200);background-color:var(--gray-100)}

.service-link:hover
{background-color:var(--gray-200)}

.service-link i
{margin-left:.5rem}

.service-link:hover i,.submit-btn:hover i
{transform:translateX(3px)}

.advantages-section,.faq-section
{padding:5rem 0;background-color:var(--white)}

.advantages-content
{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}

.advantages-image img
{border-radius:.5rem;box-shadow:0 10px 15px rgba(0,0,0,.1)}

.advantages-list,.contact-info
{display:flex;flex-direction:column;gap:2rem}

.advantage-item,.footer-links
{display:flex;gap:1.5rem}

.advantage-icon
{width:48px;height:48px;background-color:var(--blue-100);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.25rem;flex-shrink:0}

.advantage-item h3
{font-size:1.25rem;font-weight:600}

.process-section
{padding:3rem 0 5rem;background-color:var(--gray-100)}

.process-steps
{display:flex;justify-content:space-between}

.process-steps::before
{left:0;right:0;height:2px;background-color:var(--gray-300)}

.step-icon
{background-color:var(--white);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.25rem;box-shadow:0 4px 6px rgba(0,0,0,.1);border:2px solid var(--gray-200)}

.step-number
{display:inline-block;background-color:var(--primary);color:var(--white);font-size:.75rem;font-weight:700;padding:.25rem .5rem;border-radius:9999px;margin-bottom:.5rem}

.process-step h3
{font-size:1.125rem;font-weight:600}

.process-step p
{color:var(--gray-600);font-size:.875rem}

.faq-container
{max-width:800px;margin:0 auto}

.faq-item
{border:1px solid var(--gray-200);border-radius:.5rem;overflow:hidden;margin-bottom:1rem}

.faq-question
{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.5rem;text-align:left;background-color:transparent;border:none;cursor:pointer}

.btn-primary,.card-body,.contact-content,.footer-col i,.page-footer,.process-step
{text-align:center}

.faq-question h3
{font-size:1.125rem;font-weight:600;color:var(--gray-800)}

.faq-question i
{color:var(--primary)}

.faq-answer
{padding:0 1.5rem;max-height:0;overflow:hidden}

.faq-answer p
{color:var(--gray-600);padding-bottom:1.5rem}

.testimonials-grid
{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}

.testimonial-card
{background-color:var(--white);padding:2rem;border-radius:.5rem;box-shadow:0 4px 6px rgba(0,0,0,.05)}

.testimonial-header
{display:flex;align-items:center;margin-bottom:1rem}

.client-avatar
{width:48px;height:48px;border-radius:50%;overflow:hidden;margin-right:1rem}

.client-avatar img
{width:100%;height:100%;object-fit:cover}

.testimonial-header h4
{font-weight:600;color:var(--gray-800)}

.testimonial-rating
{color:#f59e0b;margin-bottom:1rem}

.testimonial-content
{font-style:italic;color:var(--gray-600)}

.gradient-bg
{background:linear-gradient(135deg,var(--primary) 0,var(--primary) 100%)}

.contact-section
{padding:5rem 0;background:linear-gradient(to right,var(--primary),var(--primary-dark));color:var(--white)}

.contact-container
{display:grid;grid-template-columns:1fr 1fr;gap:3rem;max-width:1000px;margin:0 auto}

.contact-form
{display:flex;flex-direction:column;gap:1.5rem}

.form-group input,.form-group textarea
{border:1px solid var(--gray-300);font-family:inherit}

.form-group textarea
{min-height:120px;resize:vertical}

.submit-btn
{background-color:var(--white);color:var(--primary);padding:.75rem;border-radius:.375rem;border:none;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem}

.contact-icon,.social-icons a
{background-color:rgba(255,255,255,.1);border-radius:50%}

.contact-item,.social-icons
{gap:1rem;display:flex}

.submit-btn:hover
{background-color:var(--gray-100);transform:translateY(-2px)}

.contact-info h3
{font-size:1.5rem;font-weight:600;margin-bottom:1rem}

.contact-item
{align-items:flex-start}

.contact-icon
{width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:1rem;flex-shrink:0}

.contact-item h4
{font-weight:600;margin-bottom:.25rem}

.contact-item p
{color:var(--blue-100)}

.btn-primary,.footer-col h3,.main-footer,.social-icons a
{color:var(--white)}

.social-links h3
{font-size:1.125rem;margin-bottom:1rem}

.social-icons a
{width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:.3s}

.social-icons a:hover
{transform:translateY(-3px)}

.main-footer
{background-color:var(--gray-900);padding:4rem 0 2rem}

.footer-container
{max-width:1200px;margin:0 auto;padding:0 15px}

.footer-grid
{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:3rem}

.footer-col h3
{font-size:1.125rem;font-weight:600;margin-bottom:1.5rem}

.footer-col p
{color:var(--gray-400);margin-bottom:1rem}

.footer-col ul li
{margin-bottom:.75rem}

.footer-col ul li a
{color:var(--gray-400);transition:color .3s}

.footer-col i
{margin-right:.5rem;width:20px}

.footer-bottom
{border-top:1px solid var(--gray-700);padding-top:2rem;display:flex;justify-content:space-between;align-items:center}

.footer-bottom p
{color:var(--gray-400);font-size:.875rem}

.footer-links a
{color:var(--gray-400);font-size:.875rem;transition:color .3s}

@media (max-width:1024px)
{.advantages-content,.contact-container
{grid-template-columns:1fr}

.advantages-image
{order:-1;margin-bottom:2rem}

.process-steps
{flex-wrap:wrap}

.process-step
{width:48%;margin-bottom:2rem}

}

@media (max-width:768px)
{.chat-box
{width:280px;right:10px}

.contact-entry .contact-text
{display:none!important}

.contact-entry
{width:50px!important;height:50px!important;justify-content:center!important;padding:0!important;border-radius:50%!important}

.has-submenu .submenu
{position:static;box-shadow:none;background:rgba(0,0,0,.1)}

.submenu a
{color:#eee!important;padding-left:30px}

nav ul
{display:none}

.mobile-menu-btn
{display:block;background:0 0;border:none;color:#fff;cursor:pointer;margin-left:15px;padding:2px 8px;font-size:1.3rem}

header
{height:auto;min-height:0;padding-bottom:0}

.nav-container
{height:70px;padding:10px 5%;position:relative}

.mobile-nav-active nav ul
{display:flex;flex-direction:column;position:absolute;left:0;right:0;background:rgba(0,35,102,.95);z-index:1000;top:70px;padding:10px 0;overflow-y:auto;max-height:calc(100vh - 70px)}

.mobile-nav-active nav ul li a
{display:block;padding:15px 20px}

.mobile-nav-active .has-submenu .submenu
{display:none;position:static;background:rgba(0,0,0,.2);box-shadow:none}

.mobile-nav-active .has-submenu.active .submenu
{display:block}

.mobile-nav-active .submenu li
{padding-left:30px}

.has-submenu .desktop-arrow
{margin-left:5px;font-size:12px;transition:transform .3s;display:none}

.has-submenu:hover .desktop-arrow,.mobile-nav-active nav ul li.has-submenu.active>span:after
{transform:rotate(180deg)}

.mobile-nav-active nav ul li.has-submenu>span
{display:block;padding:15px 20px;color:#fff;cursor:pointer;position:relative}

.mobile-nav-active nav ul li.has-submenu>span:after
{content:"\f078";font-family:"Font Awesome 5 Free";font-weight:900;position:absolute;right:20px;top:15px;font-size:14px;transition:transform .3s}

.mobile-nav-active nav ul li
{margin:0;padding:0;width:100%}

.mobile-nav-active nav ul li a,.mobile-nav-active nav ul li.has-submenu>span
{text-align:left;padding-left:20px!important}

.mobile-nav-active .submenu li a
{padding-left:40px!important}

.hero-content h2
{font-size:2.25rem}

.stats-container
{grid-template-columns:repeat(2,1fr)}

.process-step
{width:100%}

}

@media (max-width:480px)
{.hero-content h2
{font-size:1.75rem}

.hero-buttons
{flex-direction:column}

.footer-grid,.stats-container
{grid-template-columns:1fr}

.footer-bottom
{flex-direction:column;gap:1rem;text-align:center}

.footer-links
{justify-content:center}

}

@keyframes fadeIn
{from
{transform:translateX(10px);opacity:0;transform:translateY(20px)}

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

}

.fade-in
{animation:.6s forwards fadeIn}

.delay-1
{animation-delay:.2s}

.delay-2
{animation-delay:.4s}

.delay-3
{animation-delay:.6s}

.floating,.hero-image
{animation:6s ease-in-out infinite float}

.hero-section
{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%)}

.feature-badge:hover
{transform:rotate(15deg) scale(1.1)}

::-webkit-scrollbar
{width:8px}

::-webkit-scrollbar-track
{background:var(--gray-100)}

::-webkit-scrollbar-thumb
{background:var(--primary);border-radius:4px}

@media print
{body
{background:#fff!important;color:#000!important}

}

.btn-primary
{background-color:var(--accent);padding:12px 24px;border-radius:6px;font-weight:600;transition:.3s;display:inline-block}

.process-steps
{display:flex;justify-content:space-between;position:relative;margin:40px 0}

.process-step
{width:23%;position:relative;z-index:2}

.process-step::before
{left:-50%;width:100%;height:2px;background:var(--gray-300)}

.process-step:first-child::before
{display:none}

.step-icon
{width:48px;height:48px;background:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;border:2px solid var(--gray-200);color:var(--primary)}

.contact-btn,.feature-badge
{align-items:center;transition:.3s}

.form-group input,.form-group textarea
{background:#fff;color:var(--gray-800);border:1px solid var(--gray-300);padding:12px 16px;border-radius:6px;width:100%}

.form-group input:focus,.form-group textarea:focus
{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.2)}

.contact-section p
{color:var(--blue-100)!important}

.faq-item.active .faq-answer
{max-height:500px;padding:0 20px 20px}

input,textarea
{color:#333!important;background-color:#fff!important}

input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover
{-webkit-text-fill-color:#333!important;-webkit-box-shadow:0 0 0 1000px #fff inset!important}

.opacity-10
{opacity:.5}

.gradient-bg
{background:linear-gradient(135deg,var(--primary) 0,var(--secondary) 100%)}

.service-card
{transition:.3s;border-top:3px solid var(--primary)}

.service-card:hover
{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.1)}

.floating-btn
{position:fixed;bottom:30px;right:30px;z-index:99;box-shadow:0 4px 12px rgba(0,0,0,.15)}

.faq-item:hover
{box-shadow:0 5px 15px rgba(0,0,0,.05)}

.form-input:focus
{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1)}

@keyframes float
{0%,100%
{transform:translateY(0)}

50%
{transform:translateY(-15px)}

}

.stats-item
{background:rgba(255,255,255,.1);backdrop-filter:blur(10px)}

.feature-badge
{position:absolute;top:-10px;right:-10px;background:var(--accent);color:#fff;border-radius:50%;width:24px;height:24px;display:flex;justify-content:center;font-size:12px}

.cta-button
{display:inline-block;padding:10px 20px;color:#fff;text-decoration:none;border-radius:5px;position:fixed;top:30%;right:20px;transform:translateY(-50%);z-index:999}

.card-body
{display:flex;flex-direction:column;align-items:center;justify-content:center}

.qrcode
{display:flex;flex-direction:column;align-items:center;gap:8px}

body>main>section#home>div.absolute
{opacity:.9}
/* 
@media (max-width:1024px)
{body>main>section#home>div.absolute
{background-image:url('/img/hk_scen4.jpg');background-size:cover;opacity:.6}

} */

/* @media (max-width:768px)
{body>main>section#home>div.absolute
{background-image:url('/img/hk_scen4.jpg');background-size:cover;opacity:.7}

} */

.contact-float
{position:fixed;z-index:9999;display:flex;gap:10px;transition:.3s}

@media (min-width:768px)
{.contact-float
{right:20px;bottom:20px;flex-direction:column}

body
{padding-bottom:0}

}

.contact-btn
{width:50px;height:50px;border-radius:50%;display:flex;justify-content:center;cursor:pointer;position:relative;box-shadow:0 2px 5px rgba(0,0,0,.2)}

.contact-modal,.phone-number
{display:flex;align-items:center}

.contact-btn:hover
{transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.2)}

.contact-btn i
{font-size:24px;color:#fff}

.phone-btn
{background-color:#4caf50}

.wechat-btn
{background-color:#09bb07}

.whatsapp-btn
{background-color:#25d366}

.email-btn
{background-color:#ea4335}

.contact-modal
{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:.3s}

.contact-content
{background-color:#fff;padding:20px;border-radius:8px;max-width:90%;max-height:90%;overflow-y:auto;position:relative}

.contact-content h3
{margin-bottom:15px;color:#333}

.contact-info
{margin-bottom:15px}

.phone-number
{cursor:pointer;justify-content:center;margin-bottom:10px}

.phone-number span
{margin-right:10px;font-size:16px}

.copy-btn
{background-color:#4caf50;color:#fff;border:none;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:14px}

.copy-btn:hover
{background-color:#45a049}

.copy-success
{color:#4caf50;font-size:12px;margin-left:10px;display:none}

.qr-code
{width:200px;height:200px;margin:0 auto 15px;background-color:#f5f5f5;display:flex;align-items:center;justify-content:center}

.qr-code img
{max-width:100%;max-height:100%}

.close-modal
{position:absolute;top:10px;right:10px;font-size:20px;cursor:pointer;color:#777}

.toast
{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background-color:rgba(0,0,0,.7);color:#fff;padding:12px 24px;border-radius:4px;z-index:10001;opacity:0;transition:opacity .3s;pointer-events:none}

@media (max-width:767px)
{.contact-float
{left:0;right:0;bottom:0;flex-direction:row;justify-content:space-around;background-color:rgba(255,255,255,.9);padding:10px 0;box-shadow:0 -2px 10px rgba(0,0,0,.1)}

.contact-content
{width:90%}

.phone-number
{flex-direction:column;align-items:flex-start}

.phone-number span
{margin-bottom:5px;margin-right:0}

.copy-btn
{display:none}

.toast
{bottom:180px;max-width:80%;text-align:center}

}

.page-footer
{background:#f0f0f0;padding:20px;position:absolute;bottom:0;left:0;right:0}

/* 提取页面的tail css */

/* --- 首屏按钮组样式修改（替换） --- */
/* 手机端（默认）: 竖排，宽度一致 */
.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* 间距 */
    margin-bottom: 2.5rem; /* 底部外边距 */
    width: 100%; /* 确保按钮组占满可用宽度 */
    align-items: stretch; /* 让子项（按钮）拉伸填满父容器宽度，实现宽度一致 */
}

.hero-buttons a {
    width: 100%; /* 手机端按钮宽度一致 */
    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
}

/* PC 端（大于或等于 640px，对应 Tailwind 的 'sm' 断点）：横排，宽度自适应，超出换行 */
@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row; /* 横排 */
        flex-wrap: wrap; /* 允许按钮超出容器时自动换行 */
        gap: 1rem; /* 横向和纵向间距都为 1rem */
        justify-content: center; /* 按钮水平居中 */
        width: auto; /* 宽度自适应内容，不再强制100% */
    }
    .hero-buttons a {
        width: auto; /* PC 端按钮宽度自适应内容 */
    }
}
/* --- 首屏按钮组样式修改结束 --- */

/* --- 统计模块样式修改（替换） --- */
.stats-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 手机端默认显示为两列 */
    gap: 1.5rem; /* 卡片之间的间距 */
}

/* PC 端（大于或等于 768px，对应 Tailwind 的 'md' 断点）：显示为四列 */
@media (min-width: 768px) {
    .stats-container {
        grid-template-columns: repeat(4, 1fr); /* PC 端显示四列 */
    }
}


/* 仅修改PC端样式（保持移动端原样） */
@media (min-width: 768px) {
  .contact-float {
    right: 20px;
    bottom: 20px;
    flex-direction: column;
  }

  .contact-btn {
    width: auto;                /* 取消固定宽度 */
    min-width: 50px;            /* 保持最小圆形尺寸 */
    padding: 0 15px;            /* 添加文字内边距 */
    border-radius: 25px;        /* 圆角矩形 */
    justify-content: center;    /* 保持居中 */
  }

  .contact-label {
    display: inline-block;      /* 强制显示文字 */
    margin-left: 8px;          /* 文字与图标间距 */
    font-size: 13px;           /* 适当缩小字体 */
    opacity: 1 !important;      /* 强制显示 */
    color: white;
  }
}


/* 移动端样式（<768px） */
@media (max-width: 767px) {
  .contact-float {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    justify-content: space-around;
    background-color: rgba(255,255,255,.9);
    padding: 10px 0;
     gap: 5px; /* 按钮之间的间距缩小 */
    padding: 8px 0; /* 顶部底部内边距减小 */
  }

  .contact-btn {
    height: auto;
    border-radius: 10px;
    flex-direction: column; /* 纵向排列 */
    width: 56px;    /* 宽度微调 */
    padding: 6px 3px; /* 内边距缩小 */
    margin: 0 2px;  /* 左右外边距缩小 */
  }

  .contact-label {
    display: block;
    text-align: center;
    width: 100%;
    color: white; /* 深色文字更醒目 */
     margin-top: 3px; /* 文字与图标间距缩小 */
    font-size: 11px; /* 文字缩小1px */
    line-height: 1.2; /* 紧凑行高 */
  }

  /* 移动端图标缩小 */
  .contact-btn i {
    font-size: 20px;
  }
}
/* ===== 浮动按钮a标签修复 ===== */
.contact-float a.contact-btn {
  /* 基础重置 */
  all: unset;
  display: flex !important;
  
  /* 重建按钮样式 */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  
  /* 文字样式 */
  color: white !important;
  font: inherit;
  text-decoration: none !important;
}

/* PC端样式 */
@media (min-width: 768px) {
  .contact-float a.contact-btn {
     background-color: var(--primary) !important; /* 使用您的主色 */
    width: auto;
    padding: 0 15px;
    border-radius: 25px;
  }
  .contact-float a.contact-btn .contact-label {
    display: inline;
    margin-left: 8px;
  }
}

/* 移动端样式 */
@media (max-width: 767px) {
  .contact-float a.contact-btn {
     background-color: var(--primary) !important; /* 使用您的主色 */
    flex-direction: column;
    width: 60px;
    height: auto;
    padding: 6px 3px;
    border-radius: 10px;
  }
  .contact-float a.contact-btn .contact-label {
    font-size: 11px;
    margin-top: 3px;
  }
}