/* توجه: variables.css / animations.css / utilities.css اکنون مستقیماً در هر صفحه با جداگانه لود می‌شوند (نه با @import اینجا)، تا مرورگر بتواند همه‌ی فایل‌های CSS را موازی دانلود کند و صفحه با تأخیر و چشمک نارنجی/سفید در بارگذاری اولیه ظاهر نشود. */ /* ========================== CSS RESET ========================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-family); background: var(--white); color: var(--gray-800); line-height: 1.8; overflow-x: hidden; opacity: 0; } /* هدر و فوتر با جاوااسکریپت (fetch) جداگانه توی صفحه تزریق می‌شوند؛ تا وقتی این تزریق کامل نشده صفحه مخفی می‌ماند تا آن چشمک سفید/نارنجی موقع بالا آمدن سایت دیده نشود، و بعد یک‌جا و با یک محو ملایم ظاهر می‌شود */ html.app-ready body { opacity: 1; transition: opacity 0.25s ease; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { border: none; background: none; cursor: pointer; font-family: inherit; } input, textarea, select { font-family: inherit; } /* ========================== CONTAINER ========================== */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; } section { padding: 80px 0; } h1 { font-size: var(--fs-4xl); font-weight: 900; } h2 { font-size: var(--fs-3xl); font-weight: 800; } h3 { font-size: var(--fs-xl); font-weight: 700; } p { color: var(--gray-600); } /* ========================== BUTTONS ========================== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border-radius: var(--radius-md); transition: var(--transition); font-weight: 700; } .btn-primary { background: var(--secondary); color: white; } .btn-primary:hover { background: var(--secondary-dark); transform: translateY(-3px); } .btn-outline { border: 2px solid var(--secondary); color: var(--secondary); } .btn-outline:hover { background: var(--secondary); color: white; } /* ========================== SECTION TITLE ========================== */ .section-title { text-align: center; max-width: 700px; margin: 0 auto 70px; } .section-title span { display: inline-block; color: #f59e0b; background: #fff7e6; padding: 8px 20px; border-radius: 30px; font-size: 0.95rem; font-weight: 700; } .section-title h2 { margin-top: 20px; font-size: 2.8rem; color: #111827; margin-bottom: 20px; } .section-title p { color: #64748b; line-height: 2; font-size: 18px; max-width: 650px; margin-inline: auto; } .section-badge { display: inline-block; padding: 10px 22px; background: rgba(245, 158, 11, 0.12); color: #f59e0b; border-radius: 999px; font-size: 15px; font-weight: 700; margin-bottom: 20px; } .section-header { text-align: center; margin-bottom: 60px; } .section-header span { color: var(--secondary); font-weight: 700; } .section-header h2 { margin: 15px 0; } /* ========================== ACCESSIBILITY ========================== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--secondary); outline-offset: 4px; } ::selection { background: var(--secondary); color: var(--white); } /* ========================== SCROLLBAR ========================== */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--gray-100); } ::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 20px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary-dark); } /* =================================== HEADER =================================== */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 22px 0; background: transparent; transition: transform 0.35s ease, background 0.35s ease, padding 0.35s ease; transform: translateY(0); } .header.scrolled { background: rgba(15, 23, 42, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25); padding: 16px 0; } .header.hide { transform: translateY(-100%); } .header.hide { transform: translateY(-100%); } .header:hover { transform: translateY(0); } /* وقتی هدر روی بخش‌های سفید قرار دارد */ .header:not(.scrolled) .nav a, .header:not(.scrolled) .logo, .header:not(.scrolled) .btn { color: #ffffff; } /* وقتی اسکرول کردی */ .header.scrolled .nav a, .header.scrolled .logo { color: #0f172a; } .header.scrolled .nav a:hover, .header.scrolled .nav a.active { color: #f59e0b; } .navbar { display: flex; justify-content: space-between; align-items: center; min-height: 90px; } .logo img { height: 55px; } .nav ul { display: flex; gap: 32px; align-items: center; } .nav a { font-weight: 700; color: #ffffff; transition: var(--transition); } .nav a:hover, .nav a.active { color: var(--secondary); } /* ========================== HERO ========================== */ .hero { position: relative; min-height: 100vh; overflow: hidden; } .home-hero { position: relative; min-height: 100vh; background: url("../assets/images/hero-banner.webp") center/cover no-repeat; overflow: hidden; } /* ================= Brands ================= */ .brands { padding: 70px 0; background: #fff; position: relative; overflow: hidden; } .brands::before { content: ""; position: absolute; top: 0; right: 0; width: 120px; height: 100%; pointer-events: none; background: linear-gradient(to left, #fff, transparent); z-index: 1; } .brands::after { content: ""; position: absolute; top: 0; left: 0; width: 120px; height: 100%; pointer-events: none; background: linear-gradient(to right, #fff, transparent); z-index: 1; } .brands-banner { display: block; width: 100%; max-width: 1250px; margin: auto; border-radius: 24px; padding: 30px 40px; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); transition: all 0.4s ease; } .brands-banner:hover { transform: scale(1.015); } /*========================== SERVICES ==========================*/ .services { padding: 120px 0; background: #f8fafc; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; } .service-card { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; padding: 40px 30px; text-decoration: none; color: #0f172a; transition: 0.35s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .service-card::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 5px; background: #f59e0b; transform: scaleX(0); transition: 0.35s; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12); } .service-card:hover::before { transform: scaleX(1); } .service-icon { width: 82px; height: 82px; margin: 0 auto 28px; border-radius: 50%; background: #fff7e8; display: flex; align-items: center; justify-content: center; font-size: 34px; color: #f59e0b; transition: 0.35s; } .service-card:hover .service-icon { transform: rotate(12deg) scale(1.08); } .service-card h3 { font-size: 25px; font-weight: 800; margin-bottom: 18px; text-align: center; } .service-card p { color: #64748b; line-height: 2; text-align: center; flex-grow: 1; min-height: 130px; } .service-link { margin-top: 30px; display: flex; justify-content: center; align-items: center; gap: 8px; color: #f59e0b; font-weight: 700; transition: 0.3s; } .service-card:hover .service-link { gap: 14px; } @media (max-width: 992px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } .service-card { padding: 30px 24px; } } /* ====================================== WHY US ====================================== */ .why-us { padding: 120px 0; background: #f8fafc; } .why-us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .why-image { position: relative; overflow: hidden; border-radius: 28px; } .why-image img { width: 100%; border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18); transition: 0.45s; } .why-image:hover img { transform: scale(1.03); } .why-content h2 { font-size: 46px; color: #0f172a; margin: 22px 0; line-height: 1.3; } .why-content p { color: #64748b; line-height: 2; font-size: 18px; margin-bottom: 40px; } .why-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .why-item { display: flex; align-items: center; gap: 14px; background: white; padding: 18px 22px; border-radius: 18px; box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05); transition: 0.35s; } .why-item:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); } .why-item i { color: #f59e0b; font-size: 22px; } .why-item span { font-weight: 700; color: #0f172a; } /* ========================== STATS ========================== */ .stats { padding: 100px 0; background: #f8fafc; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .stat-card { background: #fff; padding: 45px 30px; text-align: center; border-radius: 24px; box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08); transition: 0.35s; } .stat-card:hover { transform: translateY(-10px); box-shadow: 0 20px 45px rgba(255, 107, 0, 0.18); } .stat-card i { font-size: 40px; color: #ff6b00; margin-bottom: 20px; } .stat-card h3 { font-size: 42px; color: #0f172a; margin-bottom: 10px; } .stat-card p { color: #64748b; } /* ====================== FOOTER ====================== */ .footer { background: #0f172a; color: #fff; padding: 80px 0 0; position: relative; overflow: hidden; } .footer::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff6b00, #ff8c33, #ff6b00); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; align-items: start; } .footer h3, .footer h4 { margin-bottom: 25px; color: #fff; } .footer-about h3 { font-size: 32px; font-weight: 800; color: #ff6b00; } .footer p, .footer li, .footer a { color: #cbd5e1; line-height: 2; } .footer ul { list-style: none; } .footer ul li { margin-bottom: 12px; } .footer a { text-decoration: none; transition: 0.3s; } .footer a:hover { color: #ff6b00; } .footer-contact li { display: flex; align-items: center; gap: 12px; } .footer-contact i { color: #ff6b00; width: 20px; } .footer-bottom { margin-top: 60px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 25px 0; text-align: center; } .social-links { display: flex; gap: 15px; margin-top: 30px; } .social-links a { width: 45px; height: 45px; background: rgba(255, 255, 255, 0.08); border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: all 0.3s ease; } .social-links a i { color: #fff; font-size: 18px; } .social-links a:hover { background: #ff6b00; transform: translateY(-6px); } /* ====================== NAVIGATION CARD (Footer Map) ====================== */ .navigation-card { margin-top: 20px; margin-bottom: 35px; display: flex; align-items: center; gap: 15px; padding: 16px 20px; background: rgba(255, 255, 255, 0.05); border: 2px solid #ff6b00; border-radius: 20px; text-decoration: none; color: #fff; transition: 0.3s; } .navigation-card:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 15px 30px rgba(255, 107, 0, 0.3); } .navigation-card img { width: 60px; height: 60px; border-radius: 12px; background: #fff; padding: 4px; } .navigation-card span { display: block; font-weight: 700; font-size: 15px; } .navigation-card small { display: block; margin-top: 5px; color: #94a3b8; font-size: 13px; } /* ====================== MAPS MODAL ====================== */ .map-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); display: none; justify-content: center; align-items: center; z-index: 9999; } .map-modal.active { display: flex; } .map-box { width: 360px; max-width: 90%; background: #fff; padding: 35px; border-radius: 25px; text-align: center; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25); } .map-box h3 { margin-bottom: 25px; color: #0f172a; font-size: 22px; } .map-link { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 15px; margin-bottom: 15px; background: #f8fafc; border-radius: 15px; text-decoration: none; color: #0f172a; font-weight: 600; transition: all 0.3s ease; } .map-link i { font-size: 18px; } .map-link:hover { background: #ff6b00; color: #fff; transform: translateY(-3px); } .map-link.google-link { border-right: 4px solid #4285f4; } .map-link.neshan-link { border-right: 4px solid #00c4a7; } .map-link.balad-link { border-right: 4px solid #ff6b00; } .close-modal { width: 100%; margin-top: 10px; padding: 15px; border: none; border-radius: 15px; background: #0f172a; color: #fff; font-family: inherit; font-size: 15px; cursor: pointer; transition: 0.3s; } .close-modal:hover { background: #1e293b; } .location-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 22px; background: #ff6b00; color: #fff !important; border-radius: 50px; transition: 0.3s; } .location-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(255, 107, 0, 0.35); } /* ========================== ANIMATIONS ========================== */ @keyframes heroZoom { from { background-size: 100%; } to { background-size: 108%; } } @keyframes heroContent { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } /*====================================== SERVICE HERO ======================================*/ .service-hero { padding: 180px 0 120px; background: linear-gradient(rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.85)), url("../assets/images/workshop-bg.jpg"); background-size: cover; background-position: center; text-align: center; /* اضافه شد */ } .service-hero .container { display: flex; /* اضافه شد */ flex-direction: column; /* اضافه شد */ align-items: center; /* اضافه شد */ } .service-hero h1 { font-size: 64px; margin: 25px 0; color: #ffffff; text-shadow: 0 8px 30px rgba(0, 0, 0, 0.55); } .service-hero p { max-width: 750px; margin: auto; line-height: 2; color: rgba(255, 255, 255, 0.9); font-size: 20px; margin-bottom: 45px; } /*====================================== SERVICE OVERVIEW ======================================*/ .service-overview { padding: 120px 0; background: #fff; } .service-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .overview-content h2 { font-size: 46px; color: #0f172a; margin: 20px 0; } .overview-content p { line-height: 2.1; color: #64748b; margin-bottom: 40px; } .overview-image img { width: 100%; border-radius: 24px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15); } .overview-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .feature { display: flex; align-items: center; gap: 12px; padding: 18px; background: #f8fafc; border-radius: 16px; } .feature i { color: #f59e0b; font-size: 20px; } /*====================================== PROCESS ======================================*/ .service-process { padding: 120px 0; background: #f8fafc; } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 70px; } .process-card { background: white; padding: 40px 30px; border-radius: 24px; text-align: center; box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08); transition: 0.35s; } .process-card:hover { transform: translateY(-10px); } .process-number { width: 70px; height: 70px; margin: auto; margin-bottom: 25px; border-radius: 50%; background: #f59e0b; color: white; display: flex; justify-content: center; align-items: center; font-size: 28px; font-weight: 800; } .process-card h3 { margin-bottom: 18px; color: #0f172a; } .process-card p { color: #64748b; line-height: 2; } /*====================================== SERVICE GALLERY ======================================*/ .service-gallery { padding: 120px 0; background: white; } .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 60px; } .gallery-grid img { width: 100%; height: 320px; object-fit: cover; border-radius: 22px; transition: 0.4s; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12); } .gallery-grid img:hover { transform: scale(1.03); } /*====================================== SERVICE BENEFITS ======================================*/ .service-benefits { padding: 120px 0; background: #f8fafc; } .benefits-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 60px; } .benefit-card { background: white; padding: 40px 30px; border-radius: 24px; text-align: center; transition: 0.35s; box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08); } .benefit-card:hover { transform: translateY(-10px); } .benefit-card i { font-size: 42px; color: #f59e0b; margin-bottom: 25px; } .benefit-card h3 { margin-bottom: 18px; color: #0f172a; } .benefit-card p { color: #64748b; line-height: 1.9; } /*====================================== ENGINE SERVICES ======================================*/ .engine-services { padding: 120px 0; background: #ffffff; } .engine-list { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .engine-list .item { display: flex; align-items: center; gap: 15px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; padding: 22px 24px; font-size: 18px; font-weight: 600; color: #0f172a; transition: 0.35s; } .engine-list .item i { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: #f59e0b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; } .engine-list .item:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08); } /*====================================== ENGINE WARNING ======================================*/ .engine-warning { padding: 120px 0; background: #f8fafc; } .warning-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-top: 60px; } .warning-item { background: white; border-radius: 18px; padding: 24px 28px; display: flex; align-items: center; gap: 18px; font-size: 18px; font-weight: 600; color: #0f172a; border: 1px solid #e2e8f0; transition: 0.35s; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05); } .warning-item:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1); } .warning-item i { width: 46px; height: 46px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #fef3c7; color: #f59e0b; font-size: 20px; flex-shrink: 0; } .hero-logo { width: 100%; max-width: 650px; margin: auto; display: block; filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.55)); animation: heroLogo 1.2s ease; } @keyframes heroLogo { from { opacity: 0; transform: translateY(40px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .service-hero p { max-width: 750px; margin: auto; line-height: 2; color: rgba(255, 255, 255, 0.9); font-size: 20px; margin-bottom: 45px; } .service-hero-content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 500px; } .service-hero-content h1, .service-hero-content p, .service-hero-content .section-badge, .service-hero-content .btn { margin-left: auto; margin-right: auto; } .services { padding: 100px 0; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .service-card { background: #fff; padding: 30px; border-radius: 20px; text-decoration: none; color: #111; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: 0.3s; display: flex; flex-direction: column; gap: 15px; } .service-card:hover { transform: translateY(-10px); } .service-icon { width: 60px; height: 60px; background: #fff3d6; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; color: #f59e0b; } @media (max-width: 992px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } } /*====================================== PRICING ======================================*/ .pricing-section { padding: 120px 0; background: #f8fafc; } .pricing-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; } .pricing-card { position: relative; background: #fff; border-radius: 25px; padding: 45px 35px; text-align: center; border: 1px solid #e5e7eb; box-shadow: 0 15px 40px rgba(15, 23, 42, 0.06); transition: 0.35s; overflow: hidden; } .pricing-card:hover { transform: translateY(-12px); box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12); } .pricing-card::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 5px; background: #f59e0b; } .pricing-icon { width: 90px; height: 90px; margin: auto; border-radius: 50%; background: #fff7e8; display: flex; justify-content: center; align-items: center; font-size: 38px; color: #f59e0b; margin-bottom: 25px; } .pricing-card h3 { font-size: 28px; margin-bottom: 20px; color: #0f172a; } .price { font-size: 34px; font-weight: 900; color: #f59e0b; margin-bottom: 30px; } .price span { display: block; font-size: 15px; color: #64748b; margin-top: 8px; font-weight: 500; } .pricing-card ul { list-style: none; text-align: right; margin: 35px 0; } .pricing-card ul li { position: relative; padding-right: 28px; margin-bottom: 16px; color: #475569; } .pricing-card ul li::before { content: "✓"; position: absolute; right: 0; color: #16a34a; font-weight: bold; } .featured { transform: scale(1.05); border: 2px solid #f59e0b; } .featured:hover { transform: scale(1.05) translateY(-12px); } .pricing-badge { position: absolute; top: 20px; left: -40px; background: #f59e0b; color: #fff; padding: 8px 55px; transform: rotate(-45deg); font-size: 13px; font-weight: 700; } .pricing-card .btn { width: 100%; } /*====================================== PRICING FEATURES ======================================*/ .pricing-features { padding: 120px 0; background: #ffffff; } .features-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .feature-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; padding: 45px 30px; text-align: center; transition: 0.35s; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); } .feature-box:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12); } .feature-box i { width: 85px; height: 85px; margin: auto; margin-bottom: 25px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff7e8; color: #f59e0b; font-size: 34px; transition: 0.3s; } .feature-box:hover i { transform: rotate(12deg) scale(1.1); } .feature-box h3 { font-size: 24px; margin-bottom: 18px; color: #0f172a; } .feature-box p { color: #64748b; line-height: 2; font-size: 16px; } /*====================================== FAQ ======================================*/ .faq-section { padding: 120px 0; background: #f8fafc; } .faq-list { max-width: 900px; margin: 60px auto 0; } .faq-item { background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; margin-bottom: 20px; overflow: hidden; transition: 0.35s; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05); } .faq-item:hover { box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08); } .faq-question { width: 100%; background: none; border: none; padding: 28px 30px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: inherit; font-size: 20px; font-weight: 700; color: #0f172a; } .faq-question i { color: #f59e0b; transition: 0.3s; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; } .faq-answer p { padding: 0 30px 30px; color: #64748b; line-height: 2; } .faq-item.active .faq-answer { max-height: 250px; } .faq-item.active .faq-question i { transform: rotate(45deg); } /*====================================== FOOTER ======================================*/ .footer { background: #0f172a; color: #fff; padding: 90px 0 30px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 60px; } .footer h3 { font-size: 38px; margin-bottom: 25px; color: #fff; } .footer h4 { font-size: 22px; margin-bottom: 25px; position: relative; } .footer h4::after { content: ""; position: absolute; bottom: -10px; right: 0; width: 55px; height: 3px; background: #f59e0b; border-radius: 50px; } .footer p { color: #cbd5e1; line-height: 2.2; } .footer ul { list-style: none; padding: 0; margin: 0; } .footer ul li { margin-bottom: 18px; } .footer ul li a { color: #cbd5e1; text-decoration: none; transition: 0.3s; } .footer ul li a:hover { color: #f59e0b; padding-right: 8px; } .footer-contact ul li { display: flex; align-items: center; gap: 12px; color: #cbd5e1; } .footer-contact i { color: #f59e0b; font-size: 18px; } .footer-social { display: flex; gap: 15px; margin-top: 30px; } .footer-social a { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; justify-content: center; align-items: center; color: #fff; text-decoration: none; transition: 0.35s; } .footer-social a:hover { background: #f59e0b; transform: translateY(-6px); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); margin-top: 70px; padding-top: 25px; text-align: center; color: #94a3b8; font-size: 15px; } /*====================================== FLOATING BUTTONS ======================================*/ .whatsapp-btn { position: fixed; left: 25px; bottom: 25px; width: 65px; height: 65px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 34px; text-decoration: none; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25); z-index: 9999; transition: 0.35s; animation: whatsappPulse 2s infinite; } .whatsapp-btn:hover { transform: scale(1.12); } @keyframes whatsappPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } #backToTop { position: fixed; right: 25px; bottom: 25px; width: 58px; height: 58px; border: none; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 22px; cursor: pointer; display: none; z-index: 9999; transition: 0.35s; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); } #backToTop:hover { transform: translateY(-6px); background: #d97706; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(5, 8, 15, 0.88) 0%, rgba(5, 8, 15, 0.7) 45%, rgba(5, 8, 15, 0.15) 100% ); } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 50px; margin-bottom: 35px; background: rgba(12, 16, 28, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); color: #fff; font-size: 15px; box-shadow: 0 0 30px rgba(255, 166, 0, 0.18); } .hero-badge i { color: #ff9800; font-size: 18px; } .hero-logo { width: 700px; max-width: 100%; display: block; filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.22)) drop-shadow(0 0 35px rgba(255, 150, 0, 0.18)); } .hero-subtitle { margin-top: 25px; color: #ff9800; font-size: 44px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 20px rgba(255, 166, 0, 0.35); } .hero-buttons { display: flex; gap: 20px; margin-top: 45px; flex-wrap: wrap; } .hero-buttons a { display: flex; align-items: center; justify-content: center; gap: 10px; height: 58px; padding: 0 34px; border-radius: 60px; text-decoration: none; font-weight: 700; transition: 0.35s; position: relative; overflow: hidden; } .btn-primary { background: #ff9800; color: #111; box-shadow: 0 10px 35px rgba(255, 152, 0, 0.35); } .btn-primary:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(255, 152, 0, 0.55); } .btn-secondary { color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(18px); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); } .hero-buttons a::before { content: ""; position: absolute; left: -120%; top: 0; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.35), transparent ); transition: 0.7s; } .hero-buttons a:hover::before { left: 120%; } .home-hero { position: relative; min-height: 100vh; background: url("../assets/images/hero-banner.webp") center/cover no-repeat; overflow: hidden; display: flex; align-items: center; } .hero-container { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; } .hero-left { width: 100%; max-width: 400px; color: white; text-align: right; } .home-hero { direction: ltr !important; } .hero-container { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .hero-left { order: 1; text-align: right; } .header { position: absolute; top: 25px; left: 0; width: 100%; z-index: 1000; } .navbar { display: flex; align-items: center; justify-content: space-between; background: rgba(8, 12, 20, 0.55); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 18px; padding: 15px 28px; } .logo img { height: 58px; display: block; } .nav ul { display: flex; gap: 35px; list-style: none; } .nav a { color: #fff; text-decoration: none; font-weight: 600; transition: 0.3s; } .nav a:hover, .nav a.active { color: #ff9800; } .header-call { display: flex; align-items: center; gap: 10px; padding: 12px 22px; background: #ff9800; color: #111; text-decoration: none; border-radius: 40px; font-weight: 700; transition: 0.3s; } .header-call:hover { transform: translateY(-3px); } .hero-buttons { display: flex; gap: 20px; margin-top: 500px; } .hero-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 34px; border-radius: 60px; text-decoration: none; font-size: 17px; font-weight: 700; transition: 0.35s; } .hero-primary { background: #f6a000; color: #111; box-shadow: 0 15px 35px rgba(246, 160, 0, 0.35); } .hero-primary:hover { transform: translateY(-5px); } .hero-secondary { background: rgba(255, 255, 255, 0.05); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(18px); } .hero-secondary:hover { background: rgba(255, 255, 255, 0.09); } .hero-features { display: flex; gap: 18px; margin-top: 45px; flex-wrap: wrap; } .feature-card { display: flex; align-items: center; gap: 18px; width: 250px; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px); transition: 0.35s; } .feature-card:hover { transform: translateY(-8px); border-color: #f6a000; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .feature-card i { width: 58px; height: 58px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #f6a000; background: rgba(255, 255, 255, 0.05); } .feature-card h4 { color: #fff; margin-bottom: 6px; font-size: 18px; } .feature-card span { color: #9ca3af; font-size: 14px; } .hero-logo { width: 700px; margin-bottom: 35px; } .hero-logo img { width: 100%; display: block; filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.45)); } .hero-logo { width: 720px; max-width: 100%; margin-bottom: 40px; display: flex; justify-content: center; } .hero-logo img { width: 100%; height: auto; display: block; background: transparent; mix-blend-mode: screen; filter: drop-shadow(0 0 35px rgba(255, 150, 0, 0.35)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6)); } /* =========================== Mobile Responsive Header =========================== */ .menu-toggle { display: none; font-size: 30px; color: #fff; cursor: pointer; } @media (max-width: 768px) { .header .container { padding: 0 15px; } .navbar { height: 70px; padding: 0 15px; justify-content: space-between; } .logo img { width: 120px; } .nav { position: fixed; top: 70px; right: -100%; width: 260px; height: calc(100vh - 70px); background: #081018; transition: 0.4s; z-index: 999; } .nav.active { right: 0; } .nav ul { display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 40px; } .btn-primary { display: none; } .menu-toggle { display: block; } } @media (max-width: 768px) { .hero-left { max-width: 100%; text-align: center; } } /*========================== DIAG PAGE ==========================*/ .diag-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 50px; } .diag-list .item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 18px 20px; transition: 0.3s; } .diag-list .item::before { content: "✓"; width: 28px; height: 28px; border-radius: 50%; background: #fff7e8; color: #f59e0b; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .diag-list .item:hover { transform: translateY(-4px); border-color: #f59e0b; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } @media (max-width: 992px) { .diag-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .diag-list { grid-template-columns: 1fr; } }