:root { --accent-color:#9AD200;--accent-hover:#AEE31A;--background-color:#0E141B;--surface-color:#151C24;--default-color:#E8EEF7;--secondary-color:#9AA6B2;--heading-color:#ffffff;--danger-color:#e71834;} .main { color:var(--default-color);background-color:var(--background-color);} .main .container { margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;} .container-fluid { width:100%;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;} .img-fluid { max-width:100%;height:auto;} .row { display:flex;flex-wrap:wrap;margin-right:-12px;margin-left:-12px;} .row > * { padding-right:12px;padding-left:12px;flex-shrink:0;width:100%;max-width:100%;} .gy-4 { row-gap:1.5rem;} .col-12 { flex:0 0 auto;width:100%;} .col-6 { flex:0 0 auto;width:50%;} .col-auto { flex:0 0 auto;width:auto;} @media (min-width:768px) { .col-md-4 { flex:0 0 auto;width:33.333333%;} .col-md-6 { flex:0 0 auto;width:50%;} .col-md-8 { flex:0 0 auto;width:66.666667%;} .order-md-1 { order:1;} .order-md-2 { order:2;} .justify-content-md-end { justify-content:flex-end !important;} .justify-content-md-center { justify-content:center !important;} .mt-mobile-20 { margin-top:0;} } @media (min-width:992px) { .col-lg-4 { flex:0 0 auto;width:33.333333%;} .col-lg-5 { flex:0 0 auto;width:41.666667%;} .col-lg-6 { flex:0 0 auto;width:50%;} .col-lg-7 { flex:0 0 auto;width:58.333333%;} .col-lg-10 { flex:0 0 auto;width:83.333333%;} .order-lg-1 { order:1 !important;} .order-lg-2 { order:2 !important;} .pt-lg-0 { padding-top:0 !important;} .text-lg-start { text-align:left !important;} .justify-content-lg-start { justify-content:flex-start !important;} .justify-content-lg-end { justify-content:flex-end !important;} .justify-content-lg-between { justify-content:space-between !important;} .px-xl-5 { padding-left:3rem;padding-right:3rem;} } @media (min-width:1200px) { .col-xl-3 { flex:0 0 auto;width:25%;} .col-xl-9 { flex:0 0 auto;width:75%;} .text-xl-start { text-align:left !important;} } .order-1 { order:1;} .order-2 { order:2;} .d-flex { display:flex !important;} .flex-column { flex-direction:column !important;} .flex-grow-1 { flex-grow:1 !important;} .overflow-auto { overflow:auto;} .align-items-center { align-items:center !important;} .align-items-end { align-items:flex-end !important;} .align-items-stretch { align-items:stretch !important;} .justify-content-center { justify-content:center !important;} .justify-content-between { justify-content:space-between !important;} .text-center { text-align:center !important;} .fst-italic { font-style:italic;} .text-decoration-none { text-decoration:none !important;} .w-100 { width:100% !important;} .p-0 { padding:0 !important;} .p-3 { padding:1rem !important;} .py-4 { padding-top:1.5rem !important;padding-bottom:1.5rem !important;} .mt-3 { margin-top:1rem !important;} .mt-4 { margin-top:1.5rem !important;} .my-2 { margin-top:0.5rem !important;margin-bottom:0.5rem !important;} .mb-2 { margin-bottom:0.5rem !important;} .mb-3 { margin-bottom:1rem !important;} .mb-4 { margin-bottom:1.5rem !important;} .border { border:1px solid rgba(255,255,255,0.1) !important;} @media (max-width:767px) { .mt-mobile-20 { margin-top:20px;} } [data-aos] { opacity:0;transition:opacity 0.7s ease, transform 0.7s ease;} [data-aos="fade-up"] { transform:translateY(24px);} [data-aos="zoom-in"] { transform:scale(0.88);} [data-aos="zoom-out"] { transform:scale(1.06);} [data-aos].aos-animate { opacity:1 !important;transform:none !important;} .section { padding:80px 0;overflow:clip;} .section-title { text-align:center;padding-bottom:50px;} .section-title h2 { font-size:2rem;font-weight:700;color:var(--heading-color);margin-bottom:18px;padding-bottom:18px;position:relative;} .section-title h2::after { content:'';position:absolute;display:block;width:50px;height:3px;background:var(--accent-color);left:0;right:0;bottom:0;margin:auto;border-radius:2px;} .section-title p { color:var(--secondary-color);margin:0;} .light-background { background-color:var(--surface-color);} .dark-background { background-color:#080d11;color:#fff;} .hero { padding:80px 0 60px;min-height:85vh;display:flex;align-items:center;} .hero h1 { font-size:clamp(1.7rem, 3.8vw, 2.6rem);font-weight:700;line-height:1.35;color:var(--heading-color);margin-bottom:16px;text-align:left;} .hero a:not(.btn-get-started):not(.btn-read-more) { display:flex;align-items:center;gap:8px;color:var(--default-color);margin-bottom:6px;font-size:0.97rem;} .hero-img { display:flex;align-items:center;justify-content:center;} .animated { animation:heroFloat 3.5s ease-in-out infinite;} @keyframes heroFloat { 0%, 100% { transform:translateY(0);} 50% { transform:translateY(-14px);} } .btn-get-started { display:inline-flex;align-items:center;justify-content:center;gap:10px;background-color:var(--accent-color);color:#0E141B;font-weight:700;font-size:1.05rem;padding:16px 48px;min-width:230px;border-radius:50px;text-decoration:none;transition:background-color 0.25s, transform 0.2s, box-shadow 0.25s;margin-right:14px;white-space:nowrap;cursor:pointer;box-shadow:0 4px 18px rgba(154,210,0,0.25);} .btn-get-started:hover { background-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 24px rgba(154,210,0,0.35);} .btn-read-more { display:inline-flex;align-items:center;justify-content:center;gap:10px;background-color:transparent;color:var(--accent-color);font-weight:600;font-size:1.05rem;padding:14px 46px;min-width:230px;border-radius:50px;border:2px solid var(--accent-color);text-decoration:none;transition:all 0.25s;white-space:nowrap;cursor:pointer;} .btn-read-more:hover { background-color:var(--accent-color);color:#0E141B;} .why-us .content h2 { font-size:1.8rem;font-weight:700;color:var(--heading-color);margin-bottom:12px;} .why-us .content h2 span { color:var(--accent-color);} .why-us .content p { color:var(--secondary-color);margin-bottom:20px;} .why-us .why-us-img { display:flex;align-items:center;justify-content:center;} .why-us .faq-container .faq-item { background:var(--background-color);border:1px solid rgba(255,255,255,0.07);border-radius:8px;margin-bottom:14px;padding:18px 20px 10px;transition:border-color 0.25s;} .why-us .faq-container .faq-item:hover { border-color:rgba(154,210,0,0.25);} .why-us .faq-container .faq-item h3 { font-size:1.05rem;font-weight:600;color:var(--heading-color);margin-bottom:12px;cursor:default;} .why-us .faq-container .faq-item h3 span { display:inline-block;font-size:1.25rem;font-weight:800;color:var(--accent-color);margin-right:10px;min-width:32px;} .why-us .faq-content p { color:var(--secondary-color);font-size:0.93rem;margin-bottom:10px;} .why-us .faq-content { padding-bottom:8px;} .img-pay { height:28px;width:auto;margin-left:8px;filter:brightness(0) invert(1);opacity:0.75;transition:opacity 0.2s;} .img-pay:hover { opacity:1;} .btn-get-clients { display:inline-flex;align-items:center;justify-content:center;gap:8px;background-color:transparent;color:var(--accent-color);font-weight:600;font-size:1rem;padding:13px 28px;border-radius:8px;border:2px solid var(--accent-color);text-decoration:none;transition:all 0.25s;cursor:pointer;} .btn-get-clients:hover { background-color:var(--accent-color);color:#0E141B;} .skills .content h3 { font-size:1.5rem;font-weight:700;color:var(--heading-color);margin-bottom:14px;} .skills .content p { color:var(--secondary-color);font-size:0.93rem;line-height:1.7;margin-bottom:20px;} .ico-list { margin-top:20px;gap:6px;flex-wrap:wrap;} .ico-list i { color:var(--accent-color);} .ico-list img { height:30px;width:auto;filter:brightness(0) invert(1);opacity:0.65;transition:opacity 0.2s;} .ico-list img:hover { opacity:1;} .skills-content .progress { height:auto;background:transparent;border-radius:0;margin-bottom:22px;} .skills-content .skill { display:flex;justify-content:space-between;margin-bottom:7px;color:var(--default-color);font-size:0.88rem;} .skills-content .skill span { font-weight:500;} .skills-content .skill .val { color:var(--accent-color);font-style:normal;font-weight:600;} .progress-bar-wrap { background:rgba(255,255,255,0.07);border-radius:50px;height:9px;overflow:hidden;} .progress-bar { height:9px;border-radius:50px;background:linear-gradient(90deg, var(--accent-color), #AEE31A);width:0;transition:width 1.6s cubic-bezier(0.16, 1, 0.3, 1);} .clients { padding:30px 0 50px;} .clients .section-title { padding-bottom:24px;} .clients .section-title h3 { font-size:1.25rem;font-weight:600;color:var(--secondary-color);margin-bottom:0;} .logo-marquee { overflow:hidden;position:relative;} .logo-marquee::before, .logo-marquee::after { content:'';position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none;} .logo-marquee::before { left:0;background:linear-gradient(90deg, var(--surface-color), transparent);} .logo-marquee::after { right:0;background:linear-gradient(-90deg, var(--surface-color), transparent);} .logo-track { display:flex;width:max-content;animation:logoMarquee 30s linear infinite;} .logo-track:hover { animation-play-state:paused;} .logo-set { display:flex;align-items:center;gap:90px;padding-right:90px;flex-shrink:0;} .logo-set img { max-height:48px;max-width:116px;width:auto;filter:brightness(0) invert(1);opacity:0.4;transition:opacity 0.25s;} .logo-set img:hover { opacity:0.9;} @keyframes logoMarquee { 0% { transform:translateX(0);} 100% { transform:translateX(-50%);} } .pricing .section-title { padding-bottom:40px;} .pricing-item, .pricing-item-featured { background:var(--surface-color);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:36px 28px;text-align:center;height:100%;display:flex;flex-direction:column;transition:box-shadow 0.3s, transform 0.3s;} .pricing-item:hover { box-shadow:0 8px 32px rgba(154,210,0,0.12);transform:translateY(-4px);} .pricing-item-featured.featured { background:linear-gradient(160deg, #192413 0%, #0d1805 100%);border:2px solid var(--accent-color);transform:scale(1.035);box-shadow:0 12px 48px rgba(154,210,0,0.22);} .pricing-item h3, .pricing-item-featured h3 { font-size:1rem;font-weight:600;color:var(--secondary-color);margin-bottom:18px;text-transform:uppercase;letter-spacing:0.05em;} .pricing-item h4, .pricing-item-featured h4 { font-size:2.2rem;font-weight:800;color:var(--heading-color);margin-bottom:22px;} .pricing-item h4 sup, .pricing-item-featured h4 sup { font-size:1.15rem;font-weight:600;top:-14px;color:var(--accent-color);} .pricing-item h4 span, .pricing-item-featured h4 span { font-size:0.95rem;font-weight:400;color:var(--secondary-color);} .pricing-item ul, .pricing-item-featured ul { list-style:none;padding:0;margin:0 0 28px;flex-grow:1;text-align:left;} .pricing-item ul li, .pricing-item-featured ul li { display:flex;align-items:flex-start;gap:8px;padding:7px 0;color:var(--default-color);font-size:0.93rem;border-bottom:1px solid rgba(255,255,255,0.05);} .pricing-item ul li i, .pricing-item-featured ul li i { color:var(--accent-color);flex-shrink:0;margin-top:2px;} .buy-btn { display:block;background-color:var(--accent-color);color:#0E141B;font-weight:700;font-size:1.05rem;padding:15px 28px;border-radius:50px;text-decoration:none;text-align:center;transition:background-color 0.25s, transform 0.2s, box-shadow 0.25s;margin-top:auto;cursor:pointer;box-shadow:0 4px 16px rgba(154,210,0,0.2);} .buy-btn:hover { background-color:var(--accent-hover);transform:translateY(-2px);color:#0E141B;box-shadow:0 6px 22px rgba(154,210,0,0.3);} .discount { font-size:0.82rem;background:rgba(154,210,0,0.18);color:var(--accent-color) !important;padding:2px 8px;border-radius:20px;font-weight:700;} .faq-2 .faq-container .faq-item { background:var(--background-color);border:1px solid rgba(255,255,255,0.07);border-radius:8px;margin-bottom:12px;padding:20px 50px 20px 58px;position:relative;transition:border-color 0.25s;cursor:pointer;} .faq-2 .faq-container .faq-item:hover { border-color:rgba(154,210,0,0.2);} .faq-2 .faq-icon { position:absolute;left:20px;top:20px;font-size:1.2rem;color:var(--accent-color);} .faq-2 .faq-item h3 { font-size:0.97rem;font-weight:600;color:var(--heading-color);margin-bottom:0;line-height:1.5;} .faq-2 .faq-toggle { position:absolute;right:18px;top:50%;transform:translateY(-50%) rotate(0deg);font-size:0.88rem;color:var(--secondary-color);transition:transform 0.3s, color 0.25s;pointer-events:none;} .faq-2 .faq-item.faq-active .faq-toggle { transform:translateY(-50%) rotate(90deg);color:var(--accent-color);} .faq-2 .faq-content { display:none;padding-top:12px;margin-top:12px;border-top:1px solid rgba(255,255,255,0.06);} .faq-2 .faq-item.faq-active .faq-content { display:block;} .faq-2 .faq-content p { color:var(--secondary-color);font-size:0.9rem;margin-bottom:0;line-height:1.65;} .comparison .cptitle { margin-bottom:16px;padding:0;} .comparison .cptitle h4 { font-size:1rem;font-weight:600;color:var(--heading-color);line-height:1.55;margin-top:10px;} .comparison .mb-4-p { margin-bottom:24px;} .comparison .mb-4-sp { margin-bottom:16px;} .scroll-area { height:380px;overflow:hidden;position:relative;border-radius:8px;} .scroll-area::after { content:'';position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(transparent, var(--surface-color));pointer-events:none;z-index:2;} .block-wrapper { display:flex;flex-direction:column;gap:12px;animation:scrollUp 28s linear infinite;} .block-set { display:flex;flex-direction:column;gap:12px;flex-shrink:0;} @keyframes scrollUp { 0% { transform:translateY(0);} 100% { transform:translateY(-50%);} } .block { background:rgba(231,24,52,0.06);border:1px solid rgba(231,24,52,0.22);border-radius:8px;padding:13px 15px;font-size:0.81rem;color:var(--default-color);} .block-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:0.84rem;} .ip-address { color:var(--danger-color);font-family:monospace;font-size:0.77rem;background:rgba(231,24,52,0.1);padding:1px 6px;border-radius:3px;} .block p { color:rgba(255,255,255,0.65);margin-bottom:7px;font-size:0.8rem;} .block .separator { height:1px;background:rgba(231,24,52,0.18);margin:8px 0;} .block .info { color:var(--secondary-color);font-size:0.79rem;margin-bottom:4px;display:flex;align-items:center;gap:6px;} .block .info i { color:var(--danger-color);font-size:0.78rem;} .card { background:var(--surface-color);border:1px solid rgba(154,210,0,0.18);border-radius:10px;} .card.bg-gradient { background:linear-gradient(155deg, #0e1a06 0%, var(--surface-color) 100%);border-color:rgba(154,210,0,0.25);} .card-body { padding:20px;} .card-body h5 { font-size:0.97rem;font-weight:600;color:var(--heading-color);} .scroll-area-1 { border-radius:6px;overflow:hidden;} .scroll-area-1 .border { border:1px solid rgba(154,210,0,0.2) !important;border-radius:6px;padding:12px !important;background:rgba(154,210,0,0.04);} .ip-address-1 { color:var(--accent-color);font-family:monospace;font-size:0.8rem;background:rgba(154,210,0,0.1);padding:1px 6px;border-radius:3px;} .container-l { position:relative;height:56px;overflow:hidden;} .line-container { position:relative;width:2px;height:56px;margin:0 auto;overflow:hidden;background:rgba(154,210,0,0.08);} .moving-line { position:absolute;left:0;right:0;height:16px;background:linear-gradient(180deg, transparent, var(--accent-color), transparent);border-radius:2px;animation:moveLine 1.4s linear infinite;} @keyframes moveLine { 0% { top:-20px;opacity:0;} 15% { opacity:1;} 85% { opacity:1;} 100% { top:100%;opacity:0;} } .container-r { overflow:hidden;} .scroll-area-r { max-height:280px;overflow:hidden;position:relative;} .scroll-area-r::after { content:'';position:absolute;bottom:0;left:0;right:0;height:56px;background:linear-gradient(transparent, #0e1a06);pointer-events:none;z-index:1;} .block-wrapper-r { display:flex;flex-direction:column;gap:10px;animation:scrollUpR 12s linear infinite;} @keyframes scrollUpR { 0% { transform:translateY(0);} 100% { transform:translateY(-50%);} } .block-r { background:rgba(154,210,0,0.04);border:1px solid rgba(154,210,0,0.14);border-radius:6px;padding:11px 14px;font-size:0.81rem;color:var(--default-color);} .block-header-r { display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:0.82rem;} .ip-address-r { color:var(--accent-color);font-family:monospace;font-size:0.77rem;} .blurry-text { filter:blur(4px);user-select:none;color:var(--secondary-color);} .block-pulse { animation:pulseOpacity 2.2s ease-in-out infinite;} @keyframes pulseOpacity { 0%, 100% { opacity:1;} 50% { opacity:0.55;} } .testimonials-grid { display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;align-items:start;} .testimonial-item { background:var(--surface-color);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:24px;text-align:center;} .testimonial-item video { width:100%;max-width:360px;border-radius:8px;margin:0 auto 16px;display:block;} .testimonial-item p { color:var(--secondary-color);font-style:italic;font-size:0.93rem;line-height:1.65;margin:0;} .quote-icon-left, .quote-icon-right { color:var(--accent-color);font-size:1.15rem;vertical-align:middle;} .call-to-action { position:relative;overflow:hidden;padding:80px 0;background:#080d11;} .call-to-action > img.lazy { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0.25;} .call-to-action::before { content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(8,13,17,0.92), rgba(154,210,0,0.12));z-index:1;} .call-to-action .container { position:relative;z-index:2;} .call-to-action h3 { font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:14px;} .call-to-action p { color:rgba(255,255,255,0.7);font-size:0.97rem;line-height:1.65;margin:0;} .cta-btn-container { display:flex;align-items:center;justify-content:center;} .cta-btn { display:inline-block;background-color:var(--accent-color);color:#0E141B;font-weight:700;padding:16px 44px;border-radius:50px;text-decoration:none;font-size:1.1rem;transition:background-color 0.25s, transform 0.2s, box-shadow 0.25s;white-space:nowrap;cursor:pointer;box-shadow:0 4px 18px rgba(154,210,0,0.25);} .cta-btn:hover { background-color:var(--accent-hover);transform:translateY(-2px);color:#0E141B;box-shadow:0 6px 24px rgba(154,210,0,0.35);} .modal { display:none;position:fixed;inset:0;z-index:1050;overflow-y:auto;background:rgba(0,0,0,0.72);backdrop-filter:blur(4px);} .modal.show { display:flex;} .modal-dialog { width:100%;max-width:520px;margin:auto;padding:16px;pointer-events:none;} .modal-dialog-centered { min-height:100%;display:flex;align-items:center;} .modal-content { background:var(--surface-color);border:1px solid rgba(255,255,255,0.1);border-radius:14px;overflow:hidden;width:100%;pointer-events:all;box-shadow:0 24px 64px rgba(0,0,0,0.5);} .modal-header { display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,0.07);} .modal-title { font-size:1.05rem;font-weight:600;color:var(--heading-color);margin:0;} .btn-close { background:none;border:none;color:var(--secondary-color);font-size:1.5rem;line-height:1;cursor:pointer;padding:4px 6px;opacity:0.6;transition:opacity 0.2s;display:flex;align-items:center;} .btn-close:hover { opacity:1;} .btn-close::before { content:'×';} .modal-body { padding:20px;} .btn-cs { display:inline-flex;align-items:center;justify-content:center;gap:8px;background:rgba(255,255,255,0.04);color:var(--secondary-color);font-weight:600;font-size:1rem;padding:13px 20px;border-radius:8px;border:2px solid rgba(255,255,255,0.1);text-decoration:none;transition:all 0.25s;cursor:pointer;width:100%;text-align:center;} .btn-cs:hover { border-color:var(--accent-color);color:var(--accent-color);background:rgba(154,210,0,0.06);} @media (max-width:991px) { .hero { min-height:auto;padding:48px 0 40px;} .hero h1 { font-size:1.75rem;text-align:center;} .hero a:not(.btn-get-started):not(.btn-read-more) { justify-content:center;} .hero-img img { max-width:min(72%, 360px);} .why-us-img img { max-width:min(58%, 300px);} .skills .d-flex img.img-fluid { max-width:min(68%, 340px);} .section { padding:56px 0;} .section-title { padding-bottom:36px;} .call-to-action { text-align:center;} .cta-btn-container { margin-top:28px;} .scroll-area { height:320px;} .testimonials-grid { grid-template-columns:1fr;max-width:520px;margin:0 auto;} } @media (max-width:767px) { .pricing-item-featured.featured { transform:none;} .section-title h2 { font-size:1.6rem;} .comparison .row { flex-direction:column;} .scroll-area { height:260px;} .scroll-area-r { max-height:220px;} .logo-set { gap:48px;padding-right:48px;} .logo-set img { max-height:36px;max-width:90px;} .hero .d-flex { flex-wrap:wrap;gap:12px;} .btn-get-started, .btn-read-more { flex:1 1 auto;margin-right:0;min-width:0;padding-left:24px;padding-right:24px;} .cta-btn { padding:15px 36px;} .mt-mobile-20 .d-flex { justify-content:center;} .img-pay { height:24px;margin:0 5px;} .why-us .faq-container .faq-item { padding:16px 16px 8px;} .faq-2 .faq-container .faq-item { padding:18px 42px 18px 48px;} .faq-2 .faq-icon { left:16px;top:18px;font-size:1.05rem;} .faq-2 .faq-toggle { right:14px;} .testimonial-item { padding:18px;} } @media (max-width:575px) { .section { padding:44px 0;} .section-title { padding-bottom:28px;} .section-title h2 { font-size:1.4rem;} .hero { padding:32px 0 28px;} .hero h1 { font-size:1.45rem;line-height:1.45;} .hero .d-flex { flex-direction:column;align-items:stretch;} .btn-get-started, .btn-read-more { width:100%;font-size:1rem;} .hero-img img { max-width:78%;} .skills .content h3 { font-size:1.3rem;} .ico-list img { height:24px;} .pricing-item, .pricing-item-featured { padding:28px 20px;} .pricing-item h4, .pricing-item-featured h4 { font-size:1.9rem;} .faq-2 .faq-item h3 { font-size:0.92rem;} .comparison .cptitle h4 { font-size:0.92rem;} .scroll-area { height:230px;} .logo-set { gap:32px;padding-right:32px;} .logo-set img { max-height:30px;max-width:78px;} .testimonial-item video { max-width:none;} .call-to-action { padding:56px 0;} .call-to-action h3 { font-size:1.4rem;} .cta-btn { display:block;width:100%;padding:15px 24px;white-space:normal;} .modal-dialog { padding:10px;} .modal-body { padding:14px 10px;} .btn-get-clients, .btn-cs { font-size:0.88rem;padding:12px 8px;gap:6px;} }