:root { --color-black: #101010; --color-dark: #262626; --color-gray-dark: #454545; --color-gray: #595959; --color-gray-light: #bfbfbf; --color-gray-lighter: #d9d9d9; --color-gray-bg: #f0f0f0; --color-gray-bg-light: #f5f5f5; --color-white-off: #fcfcfc; --color-accent: #b3ff00; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background-color: var(--color-white-off); color: var(--color-black); overflow-x: hidden; } /* Typography Utility Classes */ .text-h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 500; line-height: 1.1em; letter-spacing: -0.04em; } .text-h2 { font-size: clamp(30px, 4.5vw, 42px); font-weight: 500; line-height: 1.2em; letter-spacing: 0em; } .text-h3 { font-size: clamp(26px, 3.5vw, 32px); font-weight: 500; line-height: 1.2em; } .text-h5 { font-size: clamp(20px, 2.5vw, 24px); font-weight: 500; line-height: 1.2em; } .text-h6 { font-size: 20px; font-weight: 500; line-height: 1.2em; } .text-body { font-size: 18px; font-weight: 400; line-height: 1.5em; } .text-small { font-size: 14px; font-weight: 400; line-height: 1.5em; } .text-label { font-size: 13px; font-weight: 500; line-height: 1.2em; letter-spacing: 0.03em; text-transform: uppercase; } .text-gray { color: var(--color-gray); } .text-white { color: var(--color-white-off); } .text-dark { color: var(--color-dark); } /* Layout Utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all 0.3s ease; text-align: center; } .btn-primary { background: var(--color-accent); color: var(--color-black); border-color: var(--color-accent); } .btn-secondary { background: transparent; color: var(--color-black); border-color: var(--color-black); } .btn-white { background: transparent; color: var(--color-white-off); border-color: var(--color-white-off); } .btn-dark { background: var(--color-black); color: var(--color-accent); border-color: var(--color-black); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); } /* Header */ header { position: sticky; top: 0; z-index: 100; width: 100%; padding: 16px 0; background: var(--color-white-off); } .nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1440px; margin: 0 auto; padding: 12px 24px; background: var(--color-gray-bg-light); border-radius: 100px; } .logo { font-size: 20px; font-weight: 700; color: var(--color-black); text-decoration: none; display: flex; align-items: center; gap: 6px; z-index: 10; } .logo span { color: var(--color-accent); } .desktop-nav { display: flex; gap: 6px; background: var(--color-gray-lighter); border-radius: 100px; padding: 6px; } .desktop-nav a { padding: 8px 16px; border-radius: 50px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-black); transition: all 0.3s; } .desktop-nav a.active { background: var(--color-accent); } .desktop-nav a:hover:not(.active) { background: rgba(0,0,0,0.05); } .header-actions { display: flex; gap: 10px; } /* Mobile Menu */ .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: var(--color-gray-lighter); flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 10; } .mobile-menu-btn span { display: block; width: 18px; height: 2px; background: var(--color-black); transition: 0.3s; } .mobile-nav { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--color-white-off); z-index: 90; flex-direction: column; justify-content: center; align-items: center; gap: 30px; transform: translateY(-100%); transition: transform 0.4s ease; } .mobile-nav.open { transform: translateY(0); } .mobile-nav a { font-size: 24px; font-weight: 500; color: var(--color-black); text-decoration: none; } /* Hero Section */ .hero { padding: 80px 24px 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; } .hero-content { max-width: 900px; display: flex; flex-direction: column; gap: 24px; } .trust-badge { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; } .avatar-stack { display: flex; } .avatar-stack img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid white; margin-left: -10px; object-fit: cover; } .avatar-stack img:first-child { margin-left: 0; } .hero-cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* Marquee */ .marquee-container { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; padding: 24px 0; border-top: 1px solid var(--color-gray-lighter); border-bottom: 1px solid var(--color-gray-lighter); background: white; } .marquee-track { display: flex; animation: marquee 20s linear infinite; width: max-content; } .marquee-item { padding: 0 30px; font-size: 15px; color: var(--color-gray); white-space: nowrap; font-weight: 500; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Section Base */ section { padding: 80px 24px; } .section-inner { max-width: 1200px; margin: 0 auto; } /* About Section */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .about-img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4/3; } .about-text { display: flex; flex-direction: column; gap: 20px; justify-content: center; } .about-btns { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } /* Quote Section */ .quote-section { position: relative; padding: 100px 40px; color: white; text-align: left; display: flex; align-items: center; justify-content: center; } .quote-bg { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; z-index: -2; } .quote-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(16,16,16,0.85); z-index: -1; } .quote-content { max-width: 800px; border-left: 4px solid var(--color-accent); padding-left: 30px; } /* Services Accordion */ .services-accordion { max-width: 900px; margin: 0 auto; } .service-item { border-bottom: 1px solid var(--color-gray-lighter); } .service-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; user-select: none; } .service-header h5 { margin: 0; transition: color 0.3s; } .service-header:hover h5 { color: var(--color-gray); } .service-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--color-white-off); display: flex; align-items: center; justify-content: center; transition: 0.3s; border: 1px solid var(--color-black); font-size: 18px; flex-shrink: 0; margin-left: 16px; } .service-item.active .service-icon { background: var(--color-black); color: white; transform: rotate(45deg); } .service-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .service-body-inner { padding-bottom: 24px; max-width: 800px; } .service-item.active .service-body { max-height: 300px; } /* CTA Banner */ .cta-banner { background: var(--color-black); border-radius: 16px; padding: 60px 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; color: white; } /* Blog Grid */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .blog-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; transition: transform 0.3s; } .blog-card:hover .blog-img { transform: scale(1.02); } /* Footer Ticker */ .footer-ticker { background: var(--color-black); padding: 50px 0; overflow: hidden; } .footer-ticker .marquee-item { color: rgba(255,255,255,0.4); font-size: clamp(36px, 6vw, 54px); font-weight: 500; letter-spacing: -0.01em; } .footer-ticker .marquee-item.accent { color: var(--color-white-off); -webkit-text-stroke: 1px var(--color-white-off); -webkit-text-fill-color: transparent; } /* Footer */ footer { background:rgb(0, 0, 0); padding: 0 24px; } .footer-cta { border-top: 1px solid var(--color-black); border-bottom: 1px solid var(--color-black); padding: 30px 0; display: flex; justify-content: space-between; align-items: center; } .footer-main { padding: 60px 0; grid-template-columns: 1.5fr 3fr; gap: 60px; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .footer-link-group h6 { margin-bottom: 20px; font-size: 18px; } .footer-link-group a { display: block; color: var(--color-gray); text-decoration: none; margin-bottom: 12px; font-size: 16px; transition: color 0.2s; } .footer-link-group a:hover { color: var(--color-black); text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--color-gray-light); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-gray); flex-wrap: wrap; gap: 20px; } .footer-contact { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .footer-contact a { color: var(--color-gray); text-decoration: none; transition: color 0.2s; } .footer-contact a:hover { color: var(--color-black); } .divider-v { width: 1px; height: 16px; background: var(--color-gray-light); } /* Floating Call Button */ .float-call { position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); text-decoration: none; color: white; transition: transform 0.3s, box-shadow 0.3s; } .float-call:hover { transform: scale(1.1); box-shadow: 0 12px 25px rgba(0,0,0,0.3); } /* ====================== */ /* RESPONSIVE MEDIA RULES */ /* ====================== */ /* Tablet */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } .about-img { max-height: 400px; object-position: top; } .cta-banner { flex-direction: column; text-align: center; } .blog-grid { grid-template-columns: 1fr 1fr; } .desktop-nav { display: none; } .mobile-menu-btn { display: flex; } .mobile-nav { display: flex; } .header-actions .btn-secondary { display: none; } } /* Mobile */ @media (max-width: 768px) { section { padding: 60px 16px; } .hero { padding: 40px 16px 40px; gap: 24px; } .text-body { font-size: 16px; } .text-h6 { font-size: 18px; } .nav-inner { padding: 10px 16px; } .logo { font-size: 18px; } .avatar-stack img { width: 36px; height: 36px; } .blog-grid { grid-template-columns: 1fr; } .quote-section { padding: 60px 20px; } .quote-content { padding-left: 20px; border-left-width: 3px; } .cta-banner { padding: 40px 24px; } .cta-banner h3 { font-size: 24px; } .footer-main { grid-template-columns: 1fr; gap: 40px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-cta { flex-direction: column; gap: 20px; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; align-items: center; } .footer-contact { flex-direction: column; gap: 10px; align-items: center; } .divider-v { display: none; } .float-call { width: 56px; height: 56px; bottom: 20px; right: 20px; } } /* Small Mobile */ @media (max-width: 380px) { .hero-cta-group { flex-direction: column; width: 100%; } .hero-cta-group .btn { width: 100%; } .about-btns { flex-direction: column; width: 100%; } .about-btns .btn { width: 100%; } } /* Ticker */ .footer-ticker { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 14px 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; gap: 12px; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-item { white-space: nowrap; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgb(0, 0, 0); padding: 0 10px; } .marquee-item::after { content: '·'; margin-left: 10px; color: rgba(255,255,255,0.06); } .marquee-item.accent { color: #c0ff00; } .marquee-item.accent::after { color: rgba(192,255,0,0.2); } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* CTA */ .footer-cta { padding: 72px 0; } .footer-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 48px 56px; background: rgba(0, 0, 0, 0); border: 1px solid rgb(0, 0, 0); border-radius: 20px; } .footer-cta-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #c0ff00; background-color: #000; padding: 5px 14px; border: 1px solid rgba(192,255,0,0.2); border-radius: 100px; margin-bottom: 18px; } .footer-cta-text h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #000000; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; } .footer-cta-text h2 em { font-style: normal; color: #c0ff00; } .footer-cta-text p { font-size: 15px; color: rgba(0, 0, 0, 0.4); line-height: 1.7; max-width: 420px; } .footer-cta-btns { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Main Grid */ .footer-main { padding: 60px 0 44px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr 1.1fr; gap: 44px; } .footer-about { font-size: 14px; line-height: 1.75; color: rgb(255, 255, 255); margin-bottom: 24px; max-width: 300px; } .footer-socials { display: flex; gap: 8px; margin-left: 110px; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(163 255 18); border: 1px solid rgba(255,255,255,0.7); color: rgb(0, 0, 0); transition: all 0.25s ease; } .footer-social-link:hover { background: rgb(255, 255, 255); border-color: rgba(192,255,0,0.2); color: #c0ff00; transform: translateY(-2px); } .footer-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.327); } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-links li a { font-size: 14px; color: rgb(0, 0, 0); text-decoration: none; transition: all 0.25s ease; display: inline-block; } .footer-links li a:hover { color: #c0ff00; transform: translateX(4px); } .footer-contact-list { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 14px; } .footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.25); } .footer-contact-list li svg { color: #b3ff00; } .footer-contact-list li a { color: rgb(0, 0, 0); text-decoration: none; transition: color 0.25s; } .footer-contact-list li a:hover { color: #b3ff00; } /* Newsletter */ .footer-newsletter p { font-size: 11px; color: rgb(0, 0, 0); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; } .footer-nl-form { display: flex; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); transition: border-color 0.3s; } .footer-nl-form:focus-within { border-color: rgba(192,255,0,0.25); } .footer-nl-form input { flex: 1; background: #00000024; border: none; outline: none; padding: 10px 14px; font-size: 13px; color: #fff; font-family: inherit; min-width: 0; } .footer-nl-form input::placeholder { color: rgba(255,255,255,0.15); } .footer-nl-msg { display: block; font-size: 11px; margin-top: 6px; min-height: 14px; } .footer-nl-msg.success { color: #c0ff00; } /* Bottom */ .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 0; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; } .footer-bottom p { font-size: 12px; color: rgb(255, 255, 255); } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.15); text-decoration: none; transition: color 0.25s; } .footer-bottom-links a:hover { color: #c0ff00; } /* Back to Top */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: rgba(192,255,0,0.08); border: 1px solid rgba(192,255,0,0.15); color: #c0ff00; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: all 0.35s ease; z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #c0ff00; color: #0a0a0a; transform: translateY(-3px); box-shadow: 0 0 30px rgba(192,255,0,0.25); } /* Responsive */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-cta-box { flex-direction: column; text-align: center; padding: 36px 28px; } .footer-cta-text p { max-width: 100%; } } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-cta { padding: 48px 0; } .footer-cta-btns { flex-direction: column; width: 100%; } .footer-cta-btns .btn { justify-content: center; } .footer-bottom-inner { flex-direction: column; gap: 10px; text-align: center; } .back-to-top { bottom: 18px; right: 18px; width: 40px; height: 40px; } } :root { --color-black: #101010; --color-dark: #262626; --color-gray-dark: #454545; --color-gray: #595959; --color-gray-light: #bfbfbf; --color-gray-lighter: #d9d9d9; --color-gray-bg: #f0f0f0; --color-gray-bg-light: #f5f5f5; --color-white-off: #fcfcfc; --color-accent: #b3ff00; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background-color: var(--color-white-off); color: var(--color-black); overflow-x: hidden; } /* Typography Utility Classes */ .text-h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 500; line-height: 1.1em; letter-spacing: -0.04em; } .text-h2 { font-size: clamp(30px, 4.5vw, 42px); font-weight: 500; line-height: 1.2em; letter-spacing: 0em; } .text-h3 { font-size: clamp(26px, 3.5vw, 32px); font-weight: 500; line-height: 1.2em; } .text-h5 { font-size: clamp(20px, 2.5vw, 24px); font-weight: 500; line-height: 1.2em; } .text-h6 { font-size: 20px; font-weight: 500; line-height: 1.2em; } .text-body { font-size: 18px; font-weight: 400; line-height: 1.5em; } .text-small { font-size: 14px; font-weight: 400; line-height: 1.5em; } .text-label { font-size: 13px; font-weight: 500; line-height: 1.2em; letter-spacing: 0.03em; text-transform: uppercase; } .text-gray { color: var(--color-gray); } .text-white { color: var(--color-white-off); } .text-dark { color: var(--color-dark); } /* Layout Utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all 0.3s ease; text-align: center; } .btn-primary { background: var(--color-accent); color: var(--color-black); border-color: var(--color-accent); } .btn-secondary { background: transparent; color: var(--color-black); border-color: var(--color-black); } .btn-white { background: transparent; color: var(--color-white-off); border-color: var(--color-white-off); } .btn-dark { background: var(--color-black); color: var(--color-accent); border-color: var(--color-black); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); } /* Header */ header { position: sticky; top: 0; z-index: 100; width: 100%; padding: 16px 0; background: var(--color-white-off); } .nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1440px; margin: 0 auto; padding: 12px 24px; background: var(--color-gray-bg-light); border-radius: 100px; } .logo { font-size: 20px; font-weight: 700; color: var(--color-black); text-decoration: none; display: flex; align-items: center; gap: 6px; z-index: 10; } .logo span { color: var(--color-accent); } .desktop-nav { display: flex; gap: 6px; background: var(--color-gray-lighter); border-radius: 100px; padding: 6px; } .desktop-nav a { padding: 8px 16px; border-radius: 50px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-black); transition: all 0.3s; } .desktop-nav a.active { background: var(--color-accent); } .desktop-nav a:hover:not(.active) { background: rgba(0,0,0,0.05); } .header-actions { display: flex; gap: 10px; } /* Mobile Menu */ .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: var(--color-gray-lighter); flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 10; } .mobile-menu-btn span { display: block; width: 18px; height: 2px; background: var(--color-black); transition: 0.3s; } .mobile-nav { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--color-white-off); z-index: 90; flex-direction: column; justify-content: center; align-items: center; gap: 30px; transform: translateY(-100%); transition: transform 0.4s ease; } .mobile-nav.open { transform: translateY(0); } .mobile-nav a { font-size: 24px; font-weight: 500; color: var(--color-black); text-decoration: none; } /* Hero Section */ .hero { padding: 80px 24px 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; } .hero-content { max-width: 900px; display: flex; flex-direction: column; gap: 24px; } .trust-badge { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; } .avatar-stack { display: flex; } .avatar-stack img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid white; margin-left: -10px; object-fit: cover; } .avatar-stack img:first-child { margin-left: 0; } .hero-cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* Marquee */ .marquee-container { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; padding: 24px 0; border-top: 1px solid var(--color-gray-lighter); border-bottom: 1px solid var(--color-gray-lighter); background: white; } .marquee-track { display: flex; animation: marquee 20s linear infinite; width: max-content; } .marquee-item { padding: 0 30px; font-size: 15px; color: var(--color-gray); white-space: nowrap; font-weight: 500; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Section Base */ section { padding: 80px 24px; } .section-inner { max-width: 1200px; margin: 0 auto; } /* About Section */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .about-img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4/3; } .about-text { display: flex; flex-direction: column; gap: 20px; justify-content: center; } .about-btns { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } /* Quote Section */ .quote-section { position: relative; padding: 100px 40px; color: white; text-align: left; display: flex; align-items: center; justify-content: center; } .quote-bg { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; z-index: -2; } .quote-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(16,16,16,0.85); z-index: -1; } .quote-content { max-width: 800px; border-left: 4px solid var(--color-accent); padding-left: 30px; } /* Services Accordion */ .services-accordion { max-width: 900px; margin: 0 auto; } .service-item { border-bottom: 1px solid var(--color-gray-lighter); } .service-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; user-select: none; } .service-header h5 { margin: 0; transition: color 0.3s; } .service-header:hover h5 { color: var(--color-gray); } .service-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--color-white-off); display: flex; align-items: center; justify-content: center; transition: 0.3s; border: 1px solid var(--color-black); font-size: 18px; flex-shrink: 0; margin-left: 16px; } .service-item.active .service-icon { background: var(--color-black); color: white; transform: rotate(45deg); } .service-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .service-body-inner { padding-bottom: 24px; max-width: 800px; } .service-item.active .service-body { max-height: 300px; } /* CTA Banner */ .cta-banner { background: var(--color-black); border-radius: 16px; padding: 60px 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; color: white; } /* Blog Grid */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .blog-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; transition: transform 0.3s; } .blog-card:hover .blog-img { transform: scale(1.02); } /* Footer Ticker */ .footer-ticker { background: var(--color-black); padding: 50px 0; overflow: hidden; } .footer-ticker .marquee-item { color: rgba(255,255,255,0.4); font-size: clamp(36px, 6vw, 54px); font-weight: 500; letter-spacing: -0.01em; } .footer-ticker .marquee-item.accent { color: var(--color-white-off); -webkit-text-stroke: 1px var(--color-white-off); -webkit-text-fill-color: transparent; } /* Footer */ footer { background:white); padding: 0 24px; } .footer-cta { border-top: 1px solid var(--color-black); border-bottom: 1px solid var(--color-black); padding: 30px 0; display: flex; justify-content: space-between; align-items: center; } .footer-main { padding: 60px 0; grid-template-columns: 1.5fr 3fr; gap: 60px; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .footer-link-group h6 { margin-bottom: 20px; font-size: 18px; } .footer-link-group a { display: block; color: var(--color-gray); text-decoration: none; margin-bottom: 12px; font-size: 16px; transition: color 0.2s; } .footer-link-group a:hover { color: var(--color-black); text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--color-gray-light); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-gray); flex-wrap: wrap; gap: 20px; } .footer-contact { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .footer-contact a { color: var(--color-gray); text-decoration: none; transition: color 0.2s; } .footer-contact a:hover { color: var(--color-black); } .divider-v { width: 1px; height: 16px; background: var(--color-gray-light); } /* Floating Call Button */ .float-call { position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); text-decoration: none; color: white; transition: transform 0.3s, box-shadow 0.3s; } .float-call:hover { transform: scale(1.1); box-shadow: 0 12px 25px rgba(0,0,0,0.3); } /* ====================== */ /* RESPONSIVE MEDIA RULES */ /* ====================== */ /* Tablet */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } .about-img { max-height: 400px; object-position: top; } .cta-banner { flex-direction: column; text-align: center; } .blog-grid { grid-template-columns: 1fr 1fr; } .desktop-nav { display: none; } .mobile-menu-btn { display: flex; } .mobile-nav { display: flex; } .header-actions .btn-secondary { display: none; } } /* Mobile */ @media (max-width: 768px) { section { padding: 60px 16px; } .hero { padding: 40px 16px 40px; gap: 24px; } .text-body { font-size: 16px; } .text-h6 { font-size: 18px; } .nav-inner { padding: 10px 16px; } .logo { font-size: 18px; } .avatar-stack img { width: 36px; height: 36px; } .blog-grid { grid-template-columns: 1fr; } .quote-section { padding: 60px 20px; } .quote-content { padding-left: 20px; border-left-width: 3px; } .cta-banner { padding: 40px 24px; } .cta-banner h3 { font-size: 24px; } .footer-main { grid-template-columns: 1fr; gap: 40px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-cta { flex-direction: column; gap: 20px; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; align-items: center; } .footer-contact { flex-direction: column; gap: 10px; align-items: center; } .divider-v { display: none; } .float-call { width: 56px; height: 56px; bottom: 20px; right: 20px; } } /* Small Mobile */ @media (max-width: 380px) { .hero-cta-group { flex-direction: column; width: 100%; } .hero-cta-group .btn { width: 100%; } .about-btns { flex-direction: column; width: 100%; } .about-btns .btn { width: 100%; } } /* Ticker */ .footer-ticker { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 14px 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; gap: 12px; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-item { white-space: nowrap; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgb(0, 0, 0); padding: 0 10px; } .marquee-item::after { content: '·'; margin-left: 10px; color: rgba(255,255,255,0.06); } .marquee-item.accent { color: #c0ff00; } .marquee-item.accent::after { color: rgba(192,255,0,0.2); } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* CTA */ .footer-cta { padding: 72px 0; } .footer-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 48px 56px; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; } .footer-cta-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #c0ff00; background-color: #000; padding: 5px 14px; border: 1px solid rgba(192,255,0,0.2); border-radius: 100px; margin-bottom: 18px; } .footer-cta-text h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #000000; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; } .footer-cta-text h2 em { font-style: normal; color: #c0ff00; } .footer-cta-text p { font-size: 15px; color: rgba(0, 0, 0, 0.4); line-height: 1.7; max-width: 420px; } .footer-cta-btns { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Main Grid */ .footer-main { padding: 60px 0 44px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr 1.1fr; gap: 44px; } .footer-about { font-size: 14px; line-height: 1.75; color: rgb(255, 255, 255); margin-bottom: 24px; max-width: 300px; } .footer-socials { display: flex; gap: 8px; margin-left: 110px; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(163 255 18); border: 1px solid rgba(255,255,255,0.7); color: rgb(0, 0, 0); transition: all 0.25s ease; } .footer-social-link:hover { background: rgb(255, 255, 255); border-color: rgba(192,255,0,0.2); color: #c0ff00; transform: translateY(-2px); } .footer-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.327); } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-links li a { font-size: 14px; color: rgb(0, 0, 0); text-decoration: none; transition: all 0.25s ease; display: inline-block; } .footer-links li a:hover { color: #c0ff00; transform: translateX(4px); } .footer-contact-list { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 14px; } .footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.25); } .footer-contact-list li svg { color: #b3ff00; } .footer-contact-list li a { color: rgb(0, 0, 0); text-decoration: none; transition: color 0.25s; } .footer-contact-list li a:hover { color: #b3ff00; } /* Newsletter */ .footer-newsletter p { font-size: 11px; color: rgb(0, 0, 0); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; } .footer-nl-form { display: flex; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); transition: border-color 0.3s; } .footer-nl-form:focus-within { border-color: rgba(192,255,0,0.25); } .footer-nl-form input { flex: 1; background: #00000024; border: none; outline: none; padding: 10px 14px; font-size: 13px; color: #fff; font-family: inherit; min-width: 0; } .footer-nl-form input::placeholder { color: rgba(255,255,255,0.15); } .footer-nl-msg { display: block; font-size: 11px; margin-top: 6px; min-height: 14px; } .footer-nl-msg.success { color: #c0ff00; } /* Bottom */ .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 0; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; } .footer-bottom p { font-size: 12px; color: rgb(255, 255, 255); } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.15); text-decoration: none; transition: color 0.25s; } .footer-bottom-links a:hover { color: #c0ff00; } /* Back to Top */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: rgba(192,255,0,0.08); border: 1px solid rgba(192,255,0,0.15); color: #c0ff00; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: all 0.35s ease; z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #c0ff00; color: #0a0a0a; transform: translateY(-3px); box-shadow: 0 0 30px rgba(192,255,0,0.25); } /* Responsive */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-cta-box { flex-direction: column; text-align: center; padding: 36px 28px; } .footer-cta-text p { max-width: 100%; } } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-cta { padding: 48px 0; } .footer-cta-btns { flex-direction: column; width: 100%; } .footer-cta-btns .btn { justify-content: center; } .footer-bottom-inner { flex-direction: column; gap: 10px; text-align: center; } .back-to-top { bottom: 18px; right: 18px; width: 40px; height: 40px; } } /* HERO */ .hero { padding:80px 8%; } .hero h1 { font-size:42px; max-width:600px; } .hero p { color:var(--muted); max-width:500px; } /* SERVICES */ .services { padding:60px 8%; } .services h2 { font-size:28px; margin-bottom:10px; } .services-grid { /* display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); */ gap:25px; margin-top:40px; display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; } .card { background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; transition:0.4s; box-shadow:0 10px 30px rgba(0,0,0,0.4); } .card:hover { transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.4); } .card img { width:100%; height:200px; object-fit:cover; } .card-content { padding:20px; } .card h3 { margin:0 0 10px; } .card p { font-size:14px; color:var(--muted); } /* HOW WE WORK */ .process { padding:80px 8%; background-color: #a3ff12; } .process h2 { font-size:30px; } .timeline { display:flex; justify-content:space-between; margin-top:40px; flex-wrap:wrap; } .step { width:18%; min-width:150px; margin-bottom:20px; } .bar { height:6px; background:#ffffff; border-radius:10px; margin-top:10px; } .bar span { display:block; height:100%; background:black; border-radius:10px; } /* CTA */ .cta { background:#ffffff; text-align:center; padding:70px 20px; } .cta h2 { font-size:28px; } .cta p { color:var(--muted); max-width:500px; margin:auto; } .cta button { margin-top:20px; padding:12px 25px; border:none; border-radius:30px; background:var(--accent); cursor:pointer; font-weight:600; } :root { --accent: #a3ff12; } :root { --color-black: #101010; --color-dark: #262626; --color-gray-dark: #454545; --color-gray: #595959; --color-gray-light: #bfbfbf; --color-gray-lighter: #d9d9d9; --color-gray-bg: #f0f0f0; --color-gray-bg-light: #f5f5f5; --color-white-off: #fcfcfc; --color-accent: #b3ff00; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background-color: var(--color-white-off); color: var(--color-black); overflow-x: hidden; } /* Typography Utility Classes */ .text-h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 500; line-height: 1.1em; letter-spacing: -0.04em; } .text-h2 { font-size: clamp(30px, 4.5vw, 42px); font-weight: 500; line-height: 1.2em; letter-spacing: 0em; } .text-h3 { font-size: clamp(26px, 3.5vw, 32px); font-weight: 500; line-height: 1.2em; } .text-h5 { font-size: clamp(20px, 2.5vw, 24px); font-weight: 500; line-height: 1.2em; } .text-h6 { font-size: 20px; font-weight: 500; line-height: 1.2em; } .text-body { font-size: 18px; font-weight: 400; line-height: 1.5em; } .text-small { font-size: 14px; font-weight: 400; line-height: 1.5em; } .text-label { font-size: 13px; font-weight: 500; line-height: 1.2em; letter-spacing: 0.03em; text-transform: uppercase; } .text-gray { color: var(--color-gray); } .text-white { color: var(--color-white-off); } .text-dark { color: var(--color-dark); } /* Layout Utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all 0.3s ease; text-align: center; } .btn-primary { background: var(--color-accent); color: var(--color-black); border-color: var(--color-accent); } .btn-secondary { background: transparent; color: var(--color-black); border-color: var(--color-black); } .btn-white { background: transparent; color: var(--color-white-off); border-color: var(--color-white-off); } .btn-dark { background: var(--color-black); color: var(--color-accent); border-color: var(--color-black); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); } /* Header */ header { position: sticky; top: 0; z-index: 100; width: 100%; padding: 16px 0; background: var(--color-white-off); } .nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1440px; margin: 0 auto; padding: 12px 24px; background: var(--color-gray-bg-light); border-radius: 100px; } .logo { font-size: 20px; font-weight: 700; color:white !important; text-decoration: none; display: flex; align-items: center; gap: 6px; z-index: 10; } .logo span { color: var(--color-accent); } .desktop-nav { display: flex; gap: 6px; background: var(--color-gray-lighter); border-radius: 100px; padding: 6px; } .desktop-nav a { padding: 8px 16px; border-radius: 50px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-black); transition: all 0.3s; } .desktop-nav a.active { background: var(--color-accent); } .desktop-nav a:hover:not(.active) { background: rgba(0,0,0,0.05); } .header-actions { display: flex; gap: 10px; } /* Mobile Menu */ .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: var(--color-gray-lighter); flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 10; } .mobile-menu-btn span { display: block; width: 18px; height: 2px; background: var(--color-black); transition: 0.3s; } .mobile-nav { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--color-white-off); z-index: 90; flex-direction: column; justify-content: center; align-items: center; gap: 30px; transform: translateY(-100%); transition: transform 0.4s ease; } .mobile-nav.open { transform: translateY(0); } .mobile-nav a { font-size: 24px; font-weight: 500; color: var(--color-black); text-decoration: none; } /* Hero Section */ .hero { padding: 80px 24px 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; } .hero-content { max-width: 900px; display: flex; flex-direction: column; gap: 24px; } .trust-badge { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; } .avatar-stack { display: flex; } .avatar-stack img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid white; margin-left: -10px; object-fit: cover; } .avatar-stack img:first-child { margin-left: 0; } .hero-cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* Marquee */ .marquee-container { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; padding: 24px 0; border-top: 1px solid var(--color-gray-lighter); border-bottom: 1px solid var(--color-gray-lighter); background: white; } .marquee-track { display: flex; animation: marquee 20s linear infinite; width: max-content; } .marquee-item { padding: 0 30px; font-size: 15px; color: var(--color-gray); white-space: nowrap; font-weight: 500; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Section Base */ section { padding: 80px 24px; } .section-inner { max-width: 1200px; margin: 0 auto; } /* About Section */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .about-img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4/3; } .about-text { display: flex; flex-direction: column; gap: 20px; justify-content: center; } .about-btns { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } /* Quote Section */ .quote-section { position: relative; padding: 100px 40px; color: white; text-align: left; display: flex; align-items: center; justify-content: center; } .quote-bg { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; z-index: -2; } .quote-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(16,16,16,0.85); z-index: -1; } .quote-content { max-width: 800px; border-left: 4px solid var(--color-accent); padding-left: 30px; } /* Services Accordion */ .services-accordion { max-width: 900px; margin: 0 auto; } .service-item { border-bottom: 1px solid var(--color-gray-lighter); } .service-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; user-select: none; } .service-header h5 { margin: 0; transition: color 0.3s; } .service-header:hover h5 { color: var(--color-gray); } .service-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--color-white-off); display: flex; align-items: center; justify-content: center; transition: 0.3s; border: 1px solid var(--color-black); font-size: 18px; flex-shrink: 0; margin-left: 16px; } .service-item.active .service-icon { background: var(--color-black); color: white; transform: rotate(45deg); } .service-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .service-body-inner { padding-bottom: 24px; max-width: 800px; } .service-item.active .service-body { max-height: 300px; } /* CTA Banner */ .cta-banner { background: var(--color-black); border-radius: 16px; padding: 60px 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; color: white; } /* Blog Grid */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .blog-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; transition: transform 0.3s; } .blog-card:hover .blog-img { transform: scale(1.02); } /* Footer Ticker */ .footer-ticker { background: var(--color-black); padding: 50px 0; overflow: hidden; } .footer-ticker .marquee-item { color: rgba(255,255,255,0.4); font-size: clamp(36px, 6vw, 54px); font-weight: 500; letter-spacing: -0.01em; } .footer-ticker .marquee-item.accent { color: var(--color-white-off); -webkit-text-stroke: 1px var(--color-white-off); -webkit-text-fill-color: transparent; } /* Footer */ footer { background:white); padding: 0 24px; } .footer-cta { border-top: 1px solid var(--color-black); border-bottom: 1px solid var(--color-black); padding: 30px 0; display: flex; justify-content: space-between; align-items: center; } .footer-main { padding: 60px 0; grid-template-columns: 1.5fr 3fr; gap: 60px; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .footer-link-group h6 { margin-bottom: 20px; font-size: 18px; } .footer-link-group a { display: block; color: var(--color-gray); text-decoration: none; margin-bottom: 12px; font-size: 16px; transition: color 0.2s; } .footer-link-group a:hover { color: var(--color-black); text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--color-gray-light); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-gray); flex-wrap: wrap; gap: 20px; } .footer-contact { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .footer-contact a { color: var(--color-gray); text-decoration: none; transition: color 0.2s; } .footer-contact a:hover { color: var(--color-black); } .divider-v { width: 1px; height: 16px; background: var(--color-gray-light); } /* Floating Call Button */ .float-call { position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); text-decoration: none; color: white; transition: transform 0.3s, box-shadow 0.3s; } .float-call:hover { transform: scale(1.1); box-shadow: 0 12px 25px rgba(0,0,0,0.3); } /* ====================== */ /* RESPONSIVE MEDIA RULES */ /* ====================== */ /* Tablet */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } .about-img { max-height: 400px; object-position: top; } .cta-banner { flex-direction: column; text-align: center; } .blog-grid { grid-template-columns: 1fr 1fr; } .desktop-nav { display: none; } .mobile-menu-btn { display: flex; } .mobile-nav { display: flex; } .header-actions .btn-secondary { display: none; } } /* Mobile */ @media (max-width: 768px) { section { padding: 60px 16px; } .hero { padding: 40px 16px 40px; gap: 24px; } .text-body { font-size: 16px; } .text-h6 { font-size: 18px; } .nav-inner { padding: 10px 16px; } .logo { font-size: 18px; } .avatar-stack img { width: 36px; height: 36px; } .blog-grid { grid-template-columns: 1fr; } .quote-section { padding: 60px 20px; } .quote-content { padding-left: 20px; border-left-width: 3px; } .cta-banner { padding: 40px 24px; } .cta-banner h3 { font-size: 24px; } .footer-main { grid-template-columns: 1fr; gap: 40px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-cta { flex-direction: column; gap: 20px; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; align-items: center; } .footer-contact { flex-direction: column; gap: 10px; align-items: center; } .divider-v { display: none; } .float-call { width: 56px; height: 56px; bottom: 20px; right: 20px; } } /* Small Mobile */ @media (max-width: 380px) { .hero-cta-group { flex-direction: column; width: 100%; } .hero-cta-group .btn { width: 100%; } .about-btns { flex-direction: column; width: 100%; } .about-btns .btn { width: 100%; } } /* Ticker */ .footer-ticker { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 14px 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; gap: 12px; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-item { white-space: nowrap; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgb(0, 0, 0); padding: 0 10px; } .marquee-item::after { content: '·'; margin-left: 10px; color: rgba(255,255,255,0.06); } .marquee-item.accent { color: #c0ff00; } .marquee-item.accent::after { color: rgba(192,255,0,0.2); } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* CTA */ .footer-cta { padding: 72px 0; } .footer-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 48px 56px; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; } .footer-cta-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #c0ff00; background-color: #000; padding: 5px 14px; border: 1px solid rgba(192,255,0,0.2); border-radius: 100px; margin-bottom: 18px; } .footer-cta-text h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #000000; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; } .footer-cta-text h2 em { font-style: normal; color: #c0ff00; } .footer-cta-text p { font-size: 15px; color: rgba(0, 0, 0, 0.4); line-height: 1.7; max-width: 420px; } .footer-cta-btns { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Main Grid */ .footer-main { padding: 60px 0 44px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr 1.1fr; gap: 44px; } .footer-about { font-size: 14px; line-height: 1.75; color: rgb(255, 255, 255); margin-bottom: 24px; max-width: 300px; } .footer-socials { display: flex; gap: 8px; margin-left: 110px; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(163 255 18); border: 1px solid rgba(255,255,255,0.7); color: rgb(0, 0, 0); transition: all 0.25s ease; } .footer-social-link:hover { background: rgb(255, 255, 255); border-color: rgba(192,255,0,0.2); color: #c0ff00; transform: translateY(-2px); } .footer-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.327); } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-links li a { font-size: 14px; color: rgb(0, 0, 0); text-decoration: none; transition: all 0.25s ease; display: inline-block; } .footer-links li a:hover { color: #c0ff00; transform: translateX(4px); } .footer-contact-list { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 14px; } .footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.25); } .footer-contact-list li svg { color: #b3ff00; } .footer-contact-list li a { color: rgb(0, 0, 0); text-decoration: none; transition: color 0.25s; } .footer-contact-list li a:hover { color: #b3ff00; } /* Newsletter */ .footer-newsletter p { font-size: 11px; color: rgb(0, 0, 0); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; } .footer-nl-form { display: flex; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); transition: border-color 0.3s; } .footer-nl-form:focus-within { border-color: rgba(192,255,0,0.25); } .footer-nl-form input { flex: 1; background: #00000024; border: none; outline: none; padding: 10px 14px; font-size: 13px; color: #fff; font-family: inherit; min-width: 0; } .footer-nl-form input::placeholder { color: rgba(255,255,255,0.15); } .footer-nl-msg { display: block; font-size: 11px; margin-top: 6px; min-height: 14px; } .footer-nl-msg.success { color: #c0ff00; } /* Bottom */ .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 0; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; } .footer-bottom p { font-size: 12px; color: rgb(255, 255, 255); } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.15); text-decoration: none; transition: color 0.25s; } .footer-bottom-links a:hover { color: #c0ff00; } /* Back to Top */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: rgba(192,255,0,0.08); border: 1px solid rgba(192,255,0,0.15); color: #c0ff00; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: all 0.35s ease; z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #c0ff00; color: #0a0a0a; transform: translateY(-3px); box-shadow: 0 0 30px rgba(192,255,0,0.25); } /* Responsive */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-cta-box { flex-direction: column; text-align: center; padding: 36px 28px; } .footer-cta-text p { max-width: 100%; } } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-cta { padding: 48px 0; } .footer-cta-btns { flex-direction: column; width: 100%; } .footer-cta-btns .btn { justify-content: center; } .footer-bottom-inner { flex-direction: column; gap: 10px; text-align: center; } .back-to-top { bottom: 18px; right: 18px; width: 40px; height: 40px; } } /* HERO */ .hero{ padding:80px 8%; background: url(images/infinity.jpg); background-repeat: no-repeat; background-size: cover; } .hero h1{ font-size:40px; } .hero p{ color:var(--muted); max-width:500px; } /* CONTACT GRID */ .contact{ padding:60px 8%; display:grid; grid-template-columns:1fr 1fr; gap:40px; } /* INFO CARDS */ .info{ display:grid; gap:20px; } .info-box{ border:1px solid var(--border); padding:20px; border-radius:15px; } .info-box h4{ margin-bottom:5px; } /* FORM */ form{ /* border:1px solid black; */ padding:25px; border-radius:15px; box-shadow: 0px 2px 5px black; width: 80%; } form input, form textarea{ width:100%; padding:12px; margin-bottom:15px; border:1px solid black; border-radius:10px; outline:none; } form button{ background:var(--accent); border:none; padding:12px 20px; border-radius:25px; cursor:pointer; font-weight:600; } /* MAP */ .map{ padding:0 8% 60px; } .map iframe{ width:100%; height:300px; border:0; border-radius:15px; } /* CTA */ .cta{ background:#111827; color:#fff; text-align:center; padding:60px 20px; } .cta button{ margin-top:15px; padding:12px 25px; background:var(--accent); border:none; border-radius:30px; cursor:pointer; } /* RESPONSIVE */ @media(max-width:768px){ .contact{ grid-template-columns:1fr; } } :root { --color-black: #101010; --color-dark: #262626; --color-gray-dark: #454545; --color-gray: #595959; --color-gray-light: #bfbfbf; --color-gray-lighter: #d9d9d9; --color-gray-bg: #f0f0f0; --color-gray-bg-light: #f5f5f5; --color-white-off: #fcfcfc; --color-accent: #b3ff00; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background-color: var(--color-white-off); color: var(--color-black); overflow-x: hidden; } /* Typography Utility Classes */ .text-h1 { font-size: clamp(42px, 6vw, 72px); font-weight: 500; line-height: 1.1em; letter-spacing: -0.04em; } .text-h2 { font-size: clamp(30px, 4.5vw, 42px); font-weight: 500; line-height: 1.2em; letter-spacing: 0em; } .text-h3 { font-size: clamp(26px, 3.5vw, 32px); font-weight: 500; line-height: 1.2em; } .text-h5 { font-size: clamp(20px, 2.5vw, 24px); font-weight: 500; line-height: 1.2em; } .text-h6 { font-size: 20px; font-weight: 500; line-height: 1.2em; } .text-body { font-size: 18px; font-weight: 400; line-height: 1.5em; } .text-small { font-size: 14px; font-weight: 400; line-height: 1.5em; } .text-label { font-size: 13px; font-weight: 500; line-height: 1.2em; letter-spacing: 0.03em; text-transform: uppercase; } .text-gray { color: var(--color-gray); } .text-white { color: var(--color-white-off); } .text-dark { color: var(--color-dark); } /* Layout Utilities */ .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 50px; text-decoration: none; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; border: 1px solid transparent; transition: all 0.3s ease; text-align: center; } .btn-primary { background: var(--color-accent); color: var(--color-black); border-color: var(--color-accent); } .btn-secondary { background: transparent; color: var(--color-black); border-color: var(--color-black); } .btn-white { background: transparent; color: var(--color-white-off); border-color: var(--color-white-off); } .btn-dark { background: var(--color-black); color: var(--color-accent); border-color: var(--color-black); } .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.15); } /* Header */ header { position: sticky; top: 0; z-index: 100; width: 100%; padding: 16px 0; background: var(--color-white-off); } .nav-inner { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1440px; margin: 0 auto; padding: 12px 24px; background: black; border-radius: 100px; } .logo { font-size: 20px; font-weight: 700; color: var(--color-black); text-decoration: none; display: flex; align-items: center; gap: 6px; z-index: 10; } .logo span { color: var(--color-accent); } .desktop-nav { display: flex; gap: 6px; background: var(--color-gray-lighter); border-radius: 100px; padding: 6px; } .desktop-nav a { padding: 8px 16px; border-radius: 50px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-black); transition: all 0.3s; } .desktop-nav a.active { background: var(--color-accent); } .desktop-nav a:hover:not(.active) { background: rgba(0,0,0,0.05); } .header-actions { display: flex; gap: 10px; } /* Mobile Menu */ .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; background: var(--color-gray-lighter); flex-direction: column; align-items: center; justify-content: center; gap: 5px; z-index: 10; } .mobile-menu-btn span { display: block; width: 18px; height: 2px; background: var(--color-black); transition: 0.3s; } .mobile-nav { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--color-white-off); z-index: 90; flex-direction: column; justify-content: center; align-items: center; gap: 30px; transform: translateY(-100%); transition: transform 0.4s ease; } .mobile-nav.open { transform: translateY(0); } .mobile-nav a { font-size: 24px; font-weight: 500; color: var(--color-black); text-decoration: none; } /* Hero Section */ .hero { padding: 80px 24px 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; } .hero-content { max-width: 900px; display: flex; flex-direction: column; gap: 24px; } .trust-badge { display: flex; align-items: center; gap: 20px; justify-content: center; flex-wrap: wrap; } .avatar-stack { display: flex; } .avatar-stack img { width: 42px; height: 42px; border-radius: 50%; border: 2px solid white; margin-left: -10px; object-fit: cover; } .avatar-stack img:first-child { margin-left: 0; } .hero-cta-group { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* Marquee */ .marquee-container { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; padding: 24px 0; border-top: 1px solid var(--color-gray-lighter); border-bottom: 1px solid var(--color-gray-lighter); background: white; } .marquee-track { display: flex; animation: marquee 20s linear infinite; width: max-content; } .marquee-item { padding: 0 30px; font-size: 15px; color: var(--color-gray); white-space: nowrap; font-weight: 500; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Section Base */ section { padding: 80px 24px; } .section-inner { max-width: 1200px; margin: 0 auto; } /* About Section */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .about-img { width: 100%; border-radius: 12px; object-fit: cover; aspect-ratio: 4/3; } .about-text { display: flex; flex-direction: column; gap: 20px; justify-content: center; } .about-btns { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } /* Quote Section */ .quote-section { position: relative; padding: 100px 40px; color: white; text-align: left; display: flex; align-items: center; justify-content: center; } .quote-bg { position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; z-index: -2; } .quote-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(16,16,16,0.85); z-index: -1; } .quote-content { max-width: 800px; border-left: 4px solid var(--color-accent); padding-left: 30px; } /* Services Accordion */ .services-accordion { max-width: 900px; margin: 0 auto; } .service-item { border-bottom: 1px solid var(--color-gray-lighter); } .service-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; user-select: none; } .service-header h5 { margin: 0; transition: color 0.3s; } .service-header:hover h5 { color: var(--color-gray); } .service-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--color-white-off); display: flex; align-items: center; justify-content: center; transition: 0.3s; border: 1px solid var(--color-black); font-size: 18px; flex-shrink: 0; margin-left: 16px; } .service-item.active .service-icon { background: var(--color-black); color: white; transform: rotate(45deg); } .service-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .service-body-inner { padding-bottom: 24px; max-width: 800px; } .service-item.active .service-body { max-height: 300px; } /* CTA Banner */ .cta-banner { background: var(--color-black); border-radius: 16px; padding: 60px 40px; display: flex; justify-content: space-between; align-items: center; gap: 40px; color: white; } /* Blog Grid */ .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .blog-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; } .blog-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; transition: transform 0.3s; } .blog-card:hover .blog-img { transform: scale(1.02); } /* Footer Ticker */ .footer-ticker { background: var(--color-black); padding: 50px 0; overflow: hidden; } .footer-ticker .marquee-item { color: rgba(255,255,255,0.4); font-size: clamp(36px, 6vw, 54px); font-weight: 500; letter-spacing: -0.01em; } .footer-ticker .marquee-item.accent { color: var(--color-white-off); -webkit-text-stroke: 1px var(--color-white-off); -webkit-text-fill-color: transparent; } /* Footer */ footer { background:white); padding: 0 24px; } .footer-cta { border-top: 1px solid var(--color-black); border-bottom: 1px solid var(--color-black); padding: 30px 0; display: flex; justify-content: space-between; align-items: center; } .footer-main { padding: 60px 0; grid-template-columns: 1.5fr 3fr; gap: 60px; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .footer-link-group h6 { margin-bottom: 20px; font-size: 18px; } .footer-link-group a { display: block; color: var(--color-gray); text-decoration: none; margin-bottom: 12px; font-size: 16px; transition: color 0.2s; } .footer-link-group a:hover { color: var(--color-black); text-decoration: underline; } .footer-bottom { border-top: 1px solid var(--color-gray-light); padding: 24px 0; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--color-gray); flex-wrap: wrap; gap: 20px; } .footer-contact { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .footer-contact a { color: var(--color-gray); text-decoration: none; transition: color 0.2s; } .footer-contact a:hover { color: var(--color-black); } .divider-v { width: 1px; height: 16px; background: var(--color-gray-light); } /* Floating Call Button */ .float-call { position: fixed; bottom: 24px; right: 24px; z-index: 90; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); text-decoration: none; color: white; transition: transform 0.3s, box-shadow 0.3s; } .float-call:hover { transform: scale(1.1); box-shadow: 0 12px 25px rgba(0,0,0,0.3); } /* ====================== */ /* RESPONSIVE MEDIA RULES */ /* ====================== */ /* Tablet */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 30px; } .about-img { max-height: 400px; object-position: top; } .cta-banner { flex-direction: column; text-align: center; } .blog-grid { grid-template-columns: 1fr 1fr; } .desktop-nav { display: none; } .mobile-menu-btn { display: flex; } .mobile-nav { display: flex; } .header-actions .btn-secondary { display: none; } } /* Mobile */ @media (max-width: 768px) { section { padding: 60px 16px; } .hero { padding: 40px 16px 40px; gap: 24px; } .text-body { font-size: 16px; } .text-h6 { font-size: 18px; } .nav-inner { padding: 10px 16px; } .logo { font-size: 18px; } .avatar-stack img { width: 36px; height: 36px; } .blog-grid { grid-template-columns: 1fr; } .quote-section { padding: 60px 20px; } .quote-content { padding-left: 20px; border-left-width: 3px; } .cta-banner { padding: 40px 24px; } .cta-banner h3 { font-size: 24px; } .footer-main { grid-template-columns: 1fr; gap: 40px; } .footer-links { grid-template-columns: 1fr 1fr; gap: 30px; } .footer-cta { flex-direction: column; gap: 20px; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; align-items: center; } .footer-contact { flex-direction: column; gap: 10px; align-items: center; } .divider-v { display: none; } .float-call { width: 56px; height: 56px; bottom: 20px; right: 20px; } } /* Small Mobile */ @media (max-width: 380px) { .hero-cta-group { flex-direction: column; width: 100%; } .hero-cta-group .btn { width: 100%; } .about-btns { flex-direction: column; width: 100%; } .about-btns .btn { width: 100%; } } /* Ticker */ .footer-ticker { border-bottom: 1px solid rgba(255,255,255,0.05); padding: 14px 0; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); } .marquee-track { display: flex; gap: 12px; width: max-content; animation: marqueeScroll 30s linear infinite; } .marquee-item { white-space: nowrap; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgb(0, 0, 0); padding: 0 10px; } .marquee-item::after { content: '·'; margin-left: 10px; color: rgba(255,255,255,0.06); } .marquee-item.accent { color: #c0ff00; } .marquee-item.accent::after { color: rgba(192,255,0,0.2); } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* CTA */ .footer-cta { padding: 72px 0; } .footer-cta-box { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding: 48px 56px; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 20px; } .footer-cta-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: #c0ff00; background-color: #000; padding: 5px 14px; border: 1px solid rgba(192,255,0,0.2); border-radius: 100px; margin-bottom: 18px; } .footer-cta-text h2 { font-size: clamp(26px, 4vw, 40px); font-weight: 700; color: #000000; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; } .footer-cta-text h2 em { font-style: normal; color: #c0ff00; } .footer-cta-text p { font-size: 15px; color: rgba(0, 0, 0, 0.4); line-height: 1.7; max-width: 420px; } .footer-cta-btns { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } /* Main Grid */ .footer-main { padding: 60px 0 44px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr 1.1fr; gap: 44px; } .footer-about { font-size: 14px; line-height: 1.75; color: rgb(255, 255, 255); margin-bottom: 24px; max-width: 300px; } .footer-socials { display: flex; gap: 8px; margin-left: 110px; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(163 255 18); border: 1px solid rgba(255,255,255,0.7); color: rgb(0, 0, 0); transition: all 0.25s ease; } .footer-social-link:hover { background: rgb(255, 255, 255); border-color: rgba(192,255,0,0.2); color: #c0ff00; transform: translateY(-2px); } .footer-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.5); margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.327); } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-links li a { font-size: 14px; color: rgb(255, 255, 255); text-decoration: none; transition: all 0.25s ease; display: inline-block; } .footer-links li a:hover { color: #c0ff00; transform: translateX(4px); } .footer-contact-list { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 14px; } .footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.25); } .footer-contact-list li svg { color: #b3ff00; } .footer-contact-list li a { color: rgb(255, 255, 255); text-decoration: none; transition: color 0.25s; } .footer-contact-list li a:hover { color: #b3ff00; } /* Newsletter */ .footer-newsletter p { font-size: 11px; color: rgb(255, 255, 255); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; } .footer-nl-form { display: flex; border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.02); transition: border-color 0.3s; } .footer-nl-form:focus-within { border-color: rgba(192,255,0,0.25); } .footer-nl-form input { flex: 1; background: #00000024; border: none; outline: none; padding: 10px 14px; font-size: 13px; color: #fff; font-family: inherit; min-width: 0; } .footer-nl-form input::placeholder { color: rgba(255,255,255,0.15); } .footer-nl-msg { display: block; font-size: 11px; margin-top: 6px; min-height: 14px; } .footer-nl-msg.success { color: #c0ff00; } /* Bottom */ .footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding: 20px 0; } .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; } .footer-bottom p { font-size: 12px; color: rgb(255, 255, 255); } .footer-bottom-links { display: flex; gap: 24px; } .footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,0.15); text-decoration: none; transition: color 0.25s; } .footer-bottom-links a:hover { color: #c0ff00; } /* Back to Top */ .back-to-top { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; border-radius: 50%; background: rgba(192,255,0,0.08); border: 1px solid rgba(192,255,0,0.15); color: #c0ff00; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); transition: all 0.35s ease; z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { background: #c0ff00; color: #0a0a0a; transform: translateY(-3px); box-shadow: 0 0 30px rgba(192,255,0,0.25); } /* Responsive */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } .footer-cta-box { flex-direction: column; text-align: center; padding: 36px 28px; } .footer-cta-text p { max-width: 100%; } } @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-cta { padding: 48px 0; } .footer-cta-btns { flex-direction: column; width: 100%; } .footer-cta-btns .btn { justify-content: center; } .footer-bottom-inner { flex-direction: column; gap: 10px; text-align: center; } .back-to-top { bottom: 18px; right: 18px; width: 40px; height: 40px; } } /* HERO */ .hero{ padding:80px 8%; } .hero h1{ font-size:42px; max-width:600px; } .hero p{ color:var(--muted); max-width:500px; } /* WHO WE ARE */ .about{ padding:60px 8%; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; } .about img{ width:100%; border-radius:20px; } .about h2{ font-size:28px; } /* VIDEO */ .video{ padding:60px 8%; } .video-box{ position:relative; } .video-box img{ width:100%; border-radius:20px; } .play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--accent); width:60px; height:60px; border-radius:50%; display:flex; justify-content:center; align-items:center; font-weight:bold; } /* STATS */ .stats{ text-align:center; padding:40px 8%; } .stats-grid{ display:flex; justify-content:space-around; flex-wrap:wrap; } .stat{ margin:20px; } .stat h2{ font-size:32px; } /* TEAM */ .team{ padding:60px 8%; } .team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; } .member img{ width:100%; border-radius:15px; } .member h4{ margin:10px 0 5px; } /* JOBS */ .jobs{ padding:60px 8%; } .job{ display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--border); } .btn{ background:var(--accent); border:none; padding:8px 15px; border-radius:20px; cursor:pointer; } /* CTA */ .cta{ background:#ffffff; color:#000000; text-align:center; padding:60px 20px; } .cta button{ margin-top:15px; padding:12px 25px; background:#b3ff00; border:none; border-radius:30px; cursor:pointer; } /* FOOT STRIP */ .strip{ background:#000; color:#fff; padding:20px; text-align:center; font-size:20px; } /* RESPONSIVE */ @media(max-width:768px){ .about{ grid-template-columns:1fr; } } .ai-gallery{ padding:80px 8%; text-align:center; /* background:linear-gradient(135deg,#0f172a,#1e293b); */ color:#000000; } .ai-gallery h2{ font-size:32px; } .ai-gallery .sub{ color:#94a3b8; margin-bottom:40px; } /* SLIDER */ .slider{ overflow:hidden; position:relative; } .track{ display:flex; gap:25px; width:calc(380px * 10); /* match new image width */ animation:scroll 25s linear infinite; } .track img{ width:400px; /* increased size */ height:500px; /* increased height */ object-fit:cover; border-radius:18px; transition:0.4s; border:1px solid rgba(255,255,255,0.1); } .track img:hover{ transform:scale(1.05); } /* ANIMATION */ @keyframes scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} } /* RESPONSIVE */ @media(max-width:768px){ .track img{ width:250px; height:300px; } } /* SECTION */ section{ padding:80px 8%; } .mission{ background-color: #a3ff12; } .why{ background-color: #000; } .why h2{ color: rgb(255, 255, 255); } .why-grid{ text-align: center; } .why-grid div{ color:#a3ff12 ; } /* HEADINGS */ h1,h2,h3{ font-weight:600; text-align: center; } h2{ font-size:32px; margin-bottom:15px; text-align: center; } /* TEXT */ p{ color:var(--muted); line-height:1.6; text-align: center; } /* BUTTON */ .btn{ display:inline-block; padding:12px 25px; background:var(--accent); color:#000; border-radius:30px; text-decoration:none; font-weight:600; transition:0.3s; } .btn:hover{ transform:translateY(-3px); box-shadow:0 10px 25px rgba(182,255,26,0.3); } /* CARD STYLE */ .card{ background:var(--card-bg); border:1px solid var(--border); border-radius:20px; padding:20px; backdrop-filter:blur(10px); transition:0.4s; } .card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.5); } /* GRID */ .grid{ display:grid; gap:25px; } /* TWO COLUMN */ .grid-2{ grid-template-columns:1fr 1fr; } /* RESPONSIVE */ @media(max-width:768px){ .grid-2{ grid-template-columns:1fr; } } /* INPUT FIELDS */ input, textarea{ width:100%; padding:12px; margin-bottom:15px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.05); color:#fff; } input::placeholder, textarea::placeholder{ color:#94a3b8; } /* FORM BUTTON */ button{ background:var(--accent); border:none; padding:12px 20px; border-radius:25px; font-weight:600; cursor:pointer; } /* LOGO STRIP */ .logos img{ background:#fff; padding:10px; border-radius:10px; } /* FAQ */ .faq-item{ background:var(--card-bg); border:1px solid var(--border); padding:15px; border-radius:10px; margin-bottom:10px; } .sap{ text-align: center; } /* GRID */ .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px; } /* CARD */ .service-card{ position:relative; border-radius:20px; overflow:hidden; cursor:pointer; transition:0.4s; box-shadow:0 5px 5px rgba(0,0,0,0.6); } .service-card img{ width:100%; height:260px; object-fit:cover; transition:0.5s; } /* OVERLAY */ .overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.2)); } /* CONTENT */ .content{ position:absolute; bottom:20px; left:20px; right:20px; text-align:left; } .content h3{ margin-bottom:8px; font-size:20px; color: white; } .content p{ font-size:14px; color:#e0e0e0; } /* HOVER EFFECT */ .service-card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,0.6); } .service-card:hover img{ transform:scale(1.1); } .service-card:hover .overlay{ background:linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.3)); } /* RESPONSIVE */ @media(max-width:768px){ .service-card img{ height:220px; } } .process{ padding:80px 8%; text-align:center; background:white; color:#fff; } .process h2{ font-size:34px; color: black; } .process .sub{ color:#222324; margin-bottom:50px; } /* GRID */ .process-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; } /* CARD */ .process-card{ background:rgb(0, 0, 0); border:1px solid rgba(255,255,255,0.1); border-radius:20px; padding:30px 20px; backdrop-filter:blur(12px); position:relative; transition:0.4s; transform-style:preserve-3d; } /* NUMBER */ .process-card span{ position:absolute; top:-15px; left:20px; background:#b6ff1a; color:#000; padding:6px 12px; border-radius:10px; font-weight:600; } /* TEXT */ .process-card h3{ margin-top:10px; margin-bottom:10px; } .process-card p{ font-size:14px; color:#cbd5f5; } /* HOVER 3D EFFECT */ .process-card:hover{ transform:translateY(-12px) scale(1.03); box-shadow:0 20px 50px rgba(0,0,0,0.6); } /* GLOW BORDER */ .process-card::before{ content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background:linear-gradient(135deg,transparent,#b6ff1a,transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:0.4s; } .process-card:hover::before{ opacity:1; } /* GRID */ .nxp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } /* BOX */ .nxp-box{ background:rgb(163 255 18); border:1px solid rgba(255,255,255,0.1); padding:25px; border-radius:18px; backdrop-filter:blur(12px); text-align:center; transition:0.4s; } .nxp-box:hover{ transform:translateY(-8px); box-shadow:0 20px 50px rgba(0,0,0,0.6); } /* APPROACH */ #nxp-approach{ text-align:center; } #nxp-approach p{ color:#94a3b8; } /* PRICING */ .nxp-price-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; } .nxp-price-card{ background:rgba(255,255,255,0.05); border:2px solid rgb(163 255 18); padding:30px; border-radius:20px; text-align:center; transition:0.4s; } .nxp-price-card:hover{ transform:translateY(-10px); box-shadow:0 20px 60px rgba(0,0,0,0.7); } .nxp-highlight{ border:1px solid #b6ff1a; transform:scale(1.05); } /* BUTTON */ .nxp-btn{ display:inline-block; margin-top:10px; padding:10px 20px; background:#b6ff1a; color:#000; border-radius:25px; text-decoration:none; font-weight:600; } /* TOOLS */ .nxp-tools-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:20px; } /* FAQ */ .nxp-faq-item{ background:rgba(255, 255, 255, 0.05); border:1px solid rgba(255,255,255,0.1); padding:20px; border-radius:12px; margin-bottom:15px; } /* CTA */ #nxp-cta{ text-align:center; background:#ffffff; padding:70px 20px; } #nxp-cta p{ color:#94a3b8; margin:10px 0 20px; } /* GRID */ .nxp-industry-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:25px; } /* CARD */ .nxp-ind-card{ position:relative; border-radius:18px; overflow:hidden; cursor:pointer; transition:0.4s; } /* IMAGE */ .nxp-ind-card img{ width:100%; height:220px; object-fit:cover; transition:0.5s; } /* OVERLAY TEXT */ .nxp-ind-overlay{ position:absolute; bottom:0; left:0; right:0; padding:15px; background:linear-gradient(to top, rgba(0,0,0,0.8), transparent); color:#fff; font-weight:600; font-size:18px; } /* HOVER EFFECT */ .nxp-ind-card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(0,0,0,0.6); } .nxp-ind-card:hover img{ transform:scale(1.1); } /* RESPONSIVE */ @media(max-width:992px){ .nxp-industry-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:600px){ .nxp-industry-grid{ grid-template-columns:1fr; } }