/* ============================================================ LCS HOSTING SOLUTIONS — Bootstrap 5.3 Custom Stylesheet Exact match to lcshostingsolutions.com Colors: Gold #FFD338/#FFC107, Dark #1a1a2e, Hero BG #EEFBFF Font: Poppins ============================================================ */ /* ---- Google Fonts already loaded in ---- */ :root { --lcs-gold: #FFD338; --lcs-amber: #FFC107; --lcs-dark: #1a1a2e; --lcs-dark2: #16213e; --lcs-hero-bg: #EEFBFF; --lcs-gray-bg: #F3F3F3; --lcs-text: #334155; --lcs-link: #046BD2; --lcs-white: #ffffff; --lcs-border: #e2e8f0; --lcs-green: #25D366; } * { box-sizing: border-box; } html { scroll-behavior: auto; } body { font-family: 'Poppins', sans-serif; color: var(--lcs-text); background: #fff; -webkit-font-smoothing: antialiased; } /* ============================================================ TOP BAR ============================================================ */ #top-bar { background: var(--lcs-hero-bg); border-bottom: 1px solid rgba(4,107,210,0.1); font-size: 13px; padding: 8px 0; } #top-bar a { color: var(--lcs-link); text-decoration: none; transition: color .2s; } #top-bar a:hover { color: var(--lcs-amber); } #top-bar .top-right a { color: #020202; font-size: 12.5px; } #top-bar .top-right a:hover { color: var(--lcs-amber); } #top-bar .divider { color: #ccc; margin: 0 6px; } #top-bar .icon-sm { width: 14px; height: 14px; margin-right: 4px; vertical-align: middle; } /* ============================================================ MAIN NAVBAR ============================================================ */ #main-navbar { background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,0.08); padding: 0; position: sticky; top: 0; z-index: 1050; transition: box-shadow .3s; } #main-navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.15); } #main-navbar .navbar-brand img { height: 55px; width: auto; } #main-navbar .nav-link { color: var(--lcs-text) !important; font-weight: 600; font-size: 15px; padding: 28px 16px !important; transition: color .2s; position: relative; } #main-navbar .nav-link:hover, #main-navbar .nav-link.active { color: var(--lcs-amber) !important; } #main-navbar .nav-link::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 3px; background: var(--lcs-amber); transform: scaleX(0); transition: transform .2s; } #main-navbar .nav-link:hover::after { transform: scaleX(1); } .btn-submit-ticket { background: var(--lcs-amber) !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important; border-radius: 6px !important; padding: 10px 20px !important; border: none !important; transition: all .2s !important; white-space: nowrap; } .btn-submit-ticket:hover { background: #e6ae00 !important; transform: translateY(-1px); box-shadow: 0 4px 15px rgba(255,193,7,0.4); } /* Mega Menu */ .mega-menu-wrapper { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 3px solid var(--lcs-amber); box-shadow: 0 20px 60px rgba(0,0,0,0.12); z-index: 1049; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all .25s cubic-bezier(.23,1,.32,1); } .mega-menu-wrapper.show { opacity: 1; visibility: visible; transform: translateY(0); } .mega-menu-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 8px; text-decoration: none; color: var(--lcs-text); transition: background .2s; } .mega-menu-item:hover { background: #fffbeb; color: var(--lcs-text); } .mega-menu-icon { width: 40px; height: 40px; background: #fff8e1; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s; } .mega-menu-item:hover .mega-menu-icon { background: var(--lcs-amber); } .mega-menu-item:hover .mega-menu-icon svg { stroke: #fff; } .mega-menu-title { font-weight: 700; font-size: 13.5px; color: var(--lcs-dark); } .mega-menu-desc { font-size: 11.5px; color: #94a3b8; margin-top: 2px; } /* ============================================================ HERO SECTION ============================================================ */ #hero { background: var(--lcs-hero-bg); padding: 60px 0 40px; min-height: 480px; position: relative; overflow: hidden; } .hero-tag { font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--lcs-amber); text-transform: uppercase; margin-bottom: 10px; } .hero-h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--lcs-dark); line-height: 1.1; margin: 0; } .hero-h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; color: var(--lcs-gold); line-height: 1.1; margin: 0 0 12px; } .hero-sub { color: #64748b; font-size: 15px; margin-bottom: 20px; } .hero-slide { display: none; } .hero-slide.active { display: block; animation: fadeSlide .6s ease-out; } @keyframes fadeSlide { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } .hero-dots { display: flex; gap: 6px; margin-top: 16px; } .hero-dot { height: 8px; border-radius: 4px; background: #d1d5db; border: none; cursor: pointer; transition: all .3s; width: 8px; } .hero-dot.active { background: var(--lcs-amber); width: 24px; } /* Domain search */ .domain-search-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 25px rgba(0,0,0,0.1); margin-top: 20px; } .domain-search-label { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 10px; } .domain-input-group .form-control { border: 2px solid var(--lcs-border); border-radius: 8px 0 0 8px !important; font-size: 14px; padding: 10px 14px; height: 46px; } .domain-input-group .form-control:focus { border-color: var(--lcs-amber); box-shadow: none; } .btn-search { background: var(--lcs-amber); color: #fff; font-weight: 700; font-size: 13px; border: none; border-radius: 0 8px 8px 0 !important; padding: 0 20px; height: 46px; letter-spacing: 1px; transition: all .2s; } .btn-search:hover { background: #e6ae00; } .domain-tld-row { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 4px; margin-top: 12px; font-size: 12px; } .domain-tld-row .label { font-weight: 600; color: #64748b; display: flex; align-items: center; } .domain-tld-item { text-align: center; background: #f8fafc; border-radius: 6px; padding: 6px 4px; } .domain-tld-item .tld { font-weight: 700; color: var(--lcs-dark); font-size: 11px; } .domain-tld-item .price { color: var(--lcs-amber); font-weight: 700; font-size: 12px; } .domain-result { margin-top: 12px; padding: 12px 14px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .domain-result.available { background: #f0fdf4; border: 1px solid #86efac; } .domain-result.taken { background: #fef2f2; border: 1px solid #fca5a5; } /* ============================================================ YELLOW PLANS SECTION ============================================================ */ #plans-intro { background: var(--lcs-amber); padding: 60px 0; } #plans-intro h2 { font-size: 26px; font-weight: 900; color: var(--lcs-dark); text-align: center; text-transform: uppercase; } #plans-intro p { text-align: center; color: var(--lcs-dark); font-size: 14.5px; max-width: 700px; margin: 0 auto 30px; line-height: 1.7; } .plan-icon-item { text-align: center; } .plan-icon-circle { width: 70px; height: 70px; background: rgba(26,26,46,0.12); border: 2px solid rgba(26,26,46,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; transition: all .3s; } .plan-icon-item:hover .plan-icon-circle { background: rgba(26,26,46,0.25); transform: scale(1.1); } .plan-icon-label { font-weight: 700; font-size: 13px; color: var(--lcs-dark); } .btn-contact-wa { background: var(--lcs-dark); color: #fff; font-weight: 700; font-size: 14px; border-radius: 50px; padding: 12px 28px; border: none; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all .2s; } .btn-contact-wa:hover { background: #0f3460; color: #fff; transform: translateY(-2px); } /* ============================================================ STATS SECTION ============================================================ */ #stats { background: var(--lcs-gray-bg); padding: 50px 0; } .stat-box { text-align: center; padding: 20px 10px; } .stat-num { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 900; color: var(--lcs-dark); line-height: 1; } .stat-label { font-size: 13px; color: #64748b; margin-top: 6px; font-weight: 500; } /* ============================================================ PRICING SECTION ============================================================ */ #pricing { padding: 70px 0; background: #fff; } .section-title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--lcs-dark); text-align: center; text-transform: uppercase; letter-spacing: .02em; } .section-line { width: 55px; height: 4px; background: var(--lcs-amber); margin: 10px auto 16px; border-radius: 2px; } .section-sub { text-align: center; color: #64748b; font-size: 14px; max-width: 550px; margin: 0 auto 35px; } /* Pricing tabs */ .pricing-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 30px; } .pricing-tab { padding: 8px 22px; border-radius: 50px; font-weight: 600; font-size: 13px; cursor: pointer; border: 2px solid var(--lcs-border); background: #fff; color: #64748b; transition: all .2s; } .pricing-tab.active, .pricing-tab:hover { background: var(--lcs-amber); border-color: var(--lcs-amber); color: var(--lcs-dark); } /* Plan cards */ .plan-card { background: #fff; border: 2px dashed var(--lcs-border); border-radius: 12px; padding: 28px 22px; position: relative; transition: all .3s; height: 100%; } .plan-card:hover { border-color: var(--lcs-amber); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(255,193,7,0.18); } .plan-card.popular { border-style: solid; border-color: var(--lcs-amber); } .popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--lcs-amber); color: var(--lcs-dark); font-size: 11px; font-weight: 800; padding: 4px 14px; border-radius: 50px; white-space: nowrap; } .plan-name { font-size: 18px; font-weight: 800; color: var(--lcs-dark); } .plan-desc { font-size: 12px; color: #94a3b8; margin-bottom: 14px; } .plan-price { font-size: 2.2rem; font-weight: 900; color: var(--lcs-dark); line-height: 1; } .plan-price sup { font-size: 1rem; vertical-align: super; } .plan-period { font-size: 13px; color: #94a3b8; } .plan-annual { font-size: 12px; font-weight: 700; color: var(--lcs-amber); margin: 4px 0 16px; } .btn-order-wa { display: block; width: 100%; background: var(--lcs-amber); color: var(--lcs-dark); font-weight: 700; font-size: 13px; border-radius: 8px; padding: 11px; text-align: center; text-decoration: none; border: none; transition: all .2s; margin-bottom: 18px; } .btn-order-wa:hover { background: #e6ae00; color: var(--lcs-dark); transform: translateY(-1px); } .plan-features { list-style: none; padding: 0; margin: 0; } .plan-features li { font-size: 12.5px; color: #475569; padding: 5px 0; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 8px; } .plan-features li:last-child { border-bottom: none; } .plan-features li::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); color: #22c55e; font-weight: 700; font-size: 12px; flex-shrink: 0; } .plan-includes-card { background: var(--lcs-dark); border-radius: 12px; padding: 28px 22px; height: 100%; } .plan-includes-card h5 { color: #fff; font-weight: 700; font-size: 16px; margin-bottom: 20px; text-align: center; } .plan-includes-card li { color: #cbd5e1; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 8px; } .plan-includes-card li::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFC107' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } /* Tabs panel */ .pricing-panel { display: none; } .pricing-panel.active { display: block; } /* ============================================================ DATA CENTERS ============================================================ */ #data-centers { background: var(--lcs-gray-bg); padding: 60px 0; } .dc-item { display: flex; align-items: center; gap: 14px; padding: 14px; } .dc-circle { width: 56px; height: 56px; border: 3px solid var(--lcs-amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; color: var(--lcs-dark); flex-shrink: 0; } .dc-label { font-weight: 600; font-size: 13px; color: var(--lcs-text); } /* ============================================================ SERVICES SECTION ============================================================ */ #services { padding: 70px 0; background: #fff; } .service-card { background: #fff; border: 1px dashed var(--lcs-border); border-radius: 12px; padding: 28px 20px; text-align: center; transition: all .3s; height: 100%; } .service-card:hover { border-color: var(--lcs-amber); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(255,193,7,0.15); } .service-icon-circle { width: 70px; height: 70px; background: var(--lcs-amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; transition: all .3s; } .service-card:hover .service-icon-circle { transform: scale(1.1) rotate(5deg); } .service-name { font-weight: 800; font-size: 16px; color: var(--lcs-dark); margin-bottom: 6px; } .service-desc { font-size: 12.5px; color: #64748b; margin-bottom: 10px; line-height: 1.6; } .service-price { font-weight: 800; font-size: 17px; color: var(--lcs-dark); margin-bottom: 14px; } .btn-view-detail { background: var(--lcs-amber); color: var(--lcs-dark); font-weight: 700; font-size: 12px; border-radius: 50px; padding: 7px 16px; text-decoration: none; border: none; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; } .btn-view-detail:hover { background: #e6ae00; color: var(--lcs-dark); } .btn-wa-sm { background: var(--lcs-green); color: #fff; font-weight: 700; font-size: 12px; border-radius: 50px; padding: 7px 16px; text-decoration: none; border: none; transition: all .2s; display: inline-flex; align-items: center; gap: 4px; } .btn-wa-sm:hover { background: #1ebe5d; color: #fff; } /* ============================================================ TRUST BAR (marquee) ============================================================ */ #trust-bar { background: var(--lcs-dark); overflow: hidden; padding: 14px 0; } .trust-marquee { display: flex; gap: 60px; animation: marquee 30s linear infinite; white-space: nowrap; } .trust-marquee-item { font-size: 13px; color: #94a3b8; font-weight: 500; flex-shrink: 0; display: flex; align-items: center; gap: 8px; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============================================================ TRUST BADGES ============================================================ */ #trust-badges { background: var(--lcs-gray-bg); padding: 50px 0; } .trust-badge-img { max-height: 60px; width: auto; object-fit: contain; } .trustpilot-widget { text-align: center; } .trustpilot-score { font-size: 2rem; font-weight: 900; color: var(--lcs-dark); } .trustpilot-stars { color: var(--lcs-amber); font-size: 1.4rem; letter-spacing: 2px; } .stat-mini { background: #fff; border-radius: 10px; padding: 14px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .stat-mini-val { font-weight: 900; font-size: 1.3rem; color: var(--lcs-amber); } .stat-mini-label { font-size: 11px; color: #64748b; } /* ============================================================ TESTIMONIALS ============================================================ */ #testimonials { padding: 70px 0; background: #fff; } .testimonial-card { background: #fff; border-radius: 16px; padding: 30px; box-shadow: 0 4px 25px rgba(0,0,0,0.08); position: relative; max-width: 680px; margin: 0 auto; } .testimonial-card::before { content: '"'; font-size: 5rem; color: var(--lcs-amber); position: absolute; top: -10px; left: 24px; font-family: Georgia, serif; line-height: 1; opacity: .35; } .testimonial-text { font-size: 14.5px; color: #475569; line-height: 1.75; font-style: italic; margin-bottom: 16px; padding-top: 20px; } .testimonial-name { font-weight: 700; color: var(--lcs-dark); font-size: 14px; } .testimonial-role { font-size: 12px; color: #94a3b8; } .testimonial-stars { color: var(--lcs-amber); font-size: 14px; margin-bottom: 10px; } .testimonial-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--lcs-border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; font-size: 18px; color: var(--lcs-text); } .testimonial-nav-btn:hover { border-color: var(--lcs-amber); color: var(--lcs-amber); } /* ============================================================ FAQ ============================================================ */ #faq { background: var(--lcs-gray-bg); padding: 70px 0; } .faq-item { border-bottom: 1px solid var(--lcs-border); } .faq-question { font-weight: 600; font-size: 14.5px; color: var(--lcs-dark); cursor: pointer; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: none; width: 100%; text-align: left; transition: color .2s; } .faq-question:hover { color: var(--lcs-amber); } .faq-icon { font-size: 18px; color: var(--lcs-amber); flex-shrink: 0; transition: transform .2s; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-answer { font-size: 13.5px; color: #64748b; line-height: 1.75; padding-bottom: 16px; display: none; } .faq-item.open .faq-answer { display: block; } .btn-start-wa { display: inline-flex; align-items: center; gap: 8px; background: var(--lcs-amber); color: var(--lcs-dark); font-weight: 700; font-size: 14px; border-radius: 50px; padding: 13px 28px; text-decoration: none; border: none; transition: all .2s; } .btn-start-wa:hover { background: #e6ae00; color: var(--lcs-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,193,7,.4); } /* ============================================================ PRE-FOOTER CTA BANNER ============================================================ */ #pre-footer { background: linear-gradient(135deg, var(--lcs-dark) 0%, var(--lcs-dark2) 100%); padding: 50px 0; } #pre-footer p { color: #cbd5e1; font-size: 14px; line-height: 1.7; margin: 0; } .btn-get-start { background: var(--lcs-amber); color: var(--lcs-dark); font-weight: 800; font-size: 14px; border-radius: 8px; padding: 14px 28px; text-decoration: none; border: none; white-space: nowrap; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; } .btn-get-start:hover { background: #e6ae00; color: var(--lcs-dark); transform: translateY(-2px); } /* ============================================================ FOOTER — EXACT MATCH ============================================================ */ #footer-main { background: var(--lcs-gray-bg); padding: 50px 0 20px; } .footer-col-title { font-weight: 700; font-size: 15px; color: var(--lcs-dark); margin-bottom: 16px; padding-bottom: 10px; position: relative; } .footer-col-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 36px; height: 3px; background: var(--lcs-amber); border-radius: 2px; } .footer-link { display: block; color: #64748b; font-size: 13px; text-decoration: none; margin-bottom: 8px; transition: color .2s; } .footer-link:hover { color: var(--lcs-amber); } .footer-logo { max-height: 60px; width: auto; margin-bottom: 12px; } .footer-tagline { font-size: 12.5px; color: #64748b; line-height: 1.6; margin-bottom: 14px; } .footer-social { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .footer-social-btn { width: 34px; height: 34px; border-radius: 50%; background: #e2e8f0; display: flex; align-items: center; justify-content: center; color: var(--lcs-dark); text-decoration: none; font-size: 13px; transition: all .2s; } .footer-social-btn:hover { background: var(--lcs-amber); color: var(--lcs-dark); } .footer-legal-links { display: flex; flex-direction: column; gap: 4px; } .footer-legal-links a { font-size: 12px; color: #64748b; text-decoration: none; } .footer-legal-links a:hover { color: var(--lcs-amber); } .footer-asset-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; } .footer-asset-row img { max-height: 36px; width: auto; object-fit: contain; } /* Footer disclaimer */ #footer-disclaimer { background: var(--lcs-gray-bg); border-top: 1px solid #e2e8f0; padding: 16px 0; } #footer-disclaimer p { font-size: 11px; color: #94a3b8; line-height: 1.6; margin: 0; } #footer-disclaimer strong { color: #64748b; } /* Footer copyright */ #footer-copyright { background: var(--lcs-gray-bg); border-top: 1px solid #e2e8f0; padding: 14px 0; text-align: center; } #footer-copyright p { font-size: 12.5px; color: #64748b; margin: 0; } /* ============================================================ WHATSAPP FLOAT ============================================================ */ #wa-float { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 58px; height: 58px; background: var(--lcs-green); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.5); text-decoration: none; animation: wa-pulse 2.5s infinite; transition: transform .2s; } #wa-float:hover { transform: scale(1.1); animation: none; } @keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } } /* ============================================================ COOKIE CONSENT ============================================================ */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--lcs-dark); color: #fff; padding: 14px 24px; z-index: 9998; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; box-shadow: 0 -4px 20px rgba(0,0,0,.2); animation: slideUp .4s ease-out; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } #cookie-banner p { font-size: 13px; color: #cbd5e1; margin: 0; flex: 1; } #cookie-banner a { color: var(--lcs-amber); } .btn-cookie-accept { background: var(--lcs-amber); color: var(--lcs-dark); font-weight: 700; font-size: 12px; border: none; border-radius: 6px; padding: 8px 18px; cursor: pointer; white-space: nowrap; } .btn-cookie-decline { background: transparent; color: #94a3b8; font-size: 12px; border: 1px solid #475569; border-radius: 6px; padding: 8px 14px; cursor: pointer; white-space: nowrap; } /* ============================================================ ENTRY POPUP ============================================================ */ #popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadeIn .3s ease-out; } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } #popup-overlay.hidden { display: none; } .popup-box { background: #fff; border-radius: 20px; padding: 36px 32px; max-width: 460px; width: 100%; position: relative; animation: popIn .35s cubic-bezier(.23,1,.32,1); } @keyframes popIn { from { transform:scale(.95); opacity:0; } to { transform:scale(1); opacity:1; } } .popup-top-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--lcs-amber), #e85d04); border-radius: 20px 20px 0 0; } .popup-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; } .popup-close:hover { color: var(--lcs-dark); } .btn-popup-wa { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--lcs-green); color: #fff; font-weight: 700; font-size: 15px; border-radius: 50px; padding: 14px; text-decoration: none; border: none; transition: all .2s; } .btn-popup-wa:hover { background: #1ebe5d; color: #fff; } /* ============================================================ AOS OVERRIDES ============================================================ */ [data-aos] { transition-timing-function: cubic-bezier(.23,1,.32,1) !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 991.98px) { #main-navbar .nav-link { padding: 12px 16px !important; } #main-navbar .nav-link::after { display: none; } .hero-h1, .hero-h2 { font-size: 1.9rem; } .domain-tld-row { grid-template-columns: auto repeat(2, 1fr); } } @media (max-width: 767.98px) { #top-bar { display: none; } #hero { padding: 40px 0 30px; } .hero-h1, .hero-h2 { font-size: 1.6rem; } #wa-float { bottom: 20px; right: 16px; width: 50px; height: 50px; } .domain-tld-row { grid-template-columns: auto repeat(2, 1fr); } .plan-card { margin-bottom: 20px; } #pre-footer .d-flex { flex-direction: column; gap: 20px; text-align: center; } } @media (max-width: 575.98px) { .hero-h1, .hero-h2 { font-size: 1.4rem; } .section-title { font-size: 1.3rem; } .popup-box { padding: 28px 20px; } }