@charset "UTF-8"; * { box-sizing: border-box; margin: 0; padding: 0; border: 0; } html, body { font-family: "Noto Sans SC", "Serif"; } body { background: #F9F8F2; min-height: 100vh; color: #001D2E; line-height: 1.5; font-weight: 400; } .no-scroll { overflow: hidden; } /* Customize website's scrollbar like Mac OS Not supports in Firefox and IE */ .scrollbar { overflow: overlay; } /* total width */ .scrollbar::-webkit-scrollbar { background-color: rgba(0, 0, 0, 0); width: 16px; height: 16px; z-index: 999999; } /* background of the scrollbar except button or resizer */ .scrollbar::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0); } /* scrollbar itself */ .scrollbar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0); border-radius: 16px; border: 0px solid #fff; } /* set button(top and bottom of the scrollbar) */ .scrollbar::-webkit-scrollbar-button { display: none; } /* scrollbar when element is hovered */ .scrollbar:hover::-webkit-scrollbar-thumb { background-color: #a0a0a5; border: 4px solid #fff; } /* scrollbar when scrollbar is hovered */ .scrollbar::-webkit-scrollbar-thumb:hover { background-color: #a0a0a5; border: 4px solid #f4f4f4; } h2, h3 { margin-bottom: 15px; } h2 { text-align: center; font-size: 40px; font-weight: 900; } h3 { font-size: 30px; } .heading { width: 100%; font-weight: 900; color: #001D2E; line-height: 1.5; font-family: "Noto Serif SC", "Serif"; } .sub-heading { font-size: 20px; text-align: center; color: rgba(255, 255, 255, 0.7); margin: 16px 0; } :root { --primary-color: #FFC200; --secondary-color: #F36F63; --text-color: white; --light-text-color: white; --background-color: rgba(255, 255, 255, 0.9); } .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .floating-popup { cursor: pointer; display: flex; background: url(../img/popup-bg.webp); background-size: cover; background-position: center; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); max-width: 300px; width: 100%; text-align: center; justify-content: center; align-items: center; position: fixed; bottom: 20px; right: 20px; transition: all .3s; z-index: 10; justify-content: space-between; } .floating-popup:hover { filter: brightness(0.9); } .floating-popup .popup-inner { width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 10px; text-align: left; line-height: 1; position: relative; padding: 1.2rem; } .floating-popup .popup-inner .title-wrap { display: flex; flex-wrap: wrap; white-space: nowrap; width: 110px; } .floating-popup .popup-inner .timer { display: flex; flex-wrap: nowrap; font-size: 18px; width: auto; max-width: 80px; text-align: center; justify-content: center; margin-bottom: 0; } .floating-popup h2 { font-size: 24px; margin-bottom: 12px; color: var(--text-color); position: relative; font-weight: 600; } .floating-popup p { margin-bottom: 0px; color: var(--light-text-color); position: relative; } .floating-popup .timer { font-size: 40px; font-weight: bold; margin-bottom: 1rem; color: var(--text-color); position: relative; } .floating-btn { display: flex; align-items: center; justify-content: center; background: #FFC200; border: none; border-radius: 50%; width: 40px !important; height: 40px !important; font-size: 16px; color: #001D2E; cursor: pointer; transition: all .3s; } .popup { background: url(../img/popup-bg.webp); background-size: cover; background-position: center; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding: 2rem; max-width: 400px; width: 90%; text-align: center; position: relative; overflow: hidden; } .popup::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .popup h2 { font-size: 32px; margin-bottom: 8px; color: var(--text-color); position: relative; font-weight: 600; } .popup p { margin-bottom: 10px; color: var(--light-text-color); position: relative; } .popup .timer { font-size: 40px; font-weight: bold; margin-bottom: 1rem; color: var(--text-color); position: relative; } .close-btn { position: absolute; top: 10px; right: 10px; font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 18px; cursor: pointer; background: rgba(255, 255, 255, 0.8); border-radius: 50%; border: none; color: #001D2E; z-index: 1; } .discount-btn { display: inline-block; background-color: var(--primary-color); color: #001E2F; text-decoration: none; font-weight: 400; padding: 0.75rem 1.5rem; border-radius: 180px; font-weight: bold; transition: background-color 0.3s ease; position: relative; } .discount-btn:hover { background-color: var(--secondary-color); } header { position: fixed; top: 0; left: 0; width: 100%; display: flex; padding: 0 16px; height: 70px; background: rgba(0, 0, 255, 0); backdrop-filter: blur(20px); z-index: 99; transition: background-color 0.3s ease; } header.scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .header-wrap { display: flex; width: 100%; height: 100%; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 0; position: relative; } .header-logo img { display: block; max-height: 24px; } .header-nav { display: flex; list-style: none; padding: 0; align-items: center; height: 100%; margin: 0; font-family: "Noto Serif SC", "Serif"; font-weight: 600; } .header-nav li { display: flex; height: 100%; align-items: center; padding: 0 20px; position: relative; } .header-nav li::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 15px; transform: translateY(-50%); background: rgba(0, 29, 46, 0.25); } .header-nav li:nth-child(1) { padding: 0 20px 0 0; } .header-nav li:nth-last-child(1) { padding: 0 0 0 20px; } .header-nav li:nth-last-child(1)::after { display: none; } .header-nav li a { display: flex; color: rgba(0, 29, 46, 0.6); align-items: center; justify-content: center; text-decoration: none; position: relative; font-size: 15px; padding: 0 6px; height: 32px; border-radius: 6px; transition: all .3s; } .header-nav li a:hover, .header-nav li a.active { color: #001D2E; font-weight: 900; } .header-usr { display: flex; height: 100%; align-items: center; } .usr-btn { text-decoration: none; display: flex; align-items: center; justify-content: center; transition: all .3s; padding: 0 20px; font-size: 14px; height: 40.8px; border-radius: 180px; white-space: nowrap; } .signup { background: #001D2E; color: white; } .signup:hover { background: #F3F4F6; color: #001D2E; } .login { color: #001D2E; margin-right: 8px; padding: 0 16px; } .banner-wrap { position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 2/1; color: white; padding: 0 16px; margin: 0 auto; overflow: hidden; background-image: url("../img/bg.webp"); background-position: top center; background-repeat: no-repeat; background-size: 100%; line-height: 1.7; } .banner-wrap .banner-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 1440px; width: 100%; margin-top: -5%; text-align: center; } .banner-wrap .banner-content h1 { width: 100%; font-size: 56px; font-weight: 900; color: #001D2E; line-height: 1.2; margin: 0 0 32px; } .banner-wrap .banner-content .banner-description { width: 100%; margin-bottom: 24px; color: #001D2E; font-size: 18px; letter-spacing: 1px; } .banner-wrap .banner-content .cta-btns { display: flex; gap: 24px; margin-bottom: 16px; } .banner-wrap .banner-content #cta_btns_register i { font-size: 10px; margin-right: 8px; color: #39C47C; animation: textBlink 1.4s infinite; } .banner-wrap .banner-content .link { background: #001D2E; display: flex; justify-content: center; align-items: center; height: 60px; border: none; padding: 0 32px; border-radius: 180px; transition: all 0.1s; font-size: 15px; font-weight: bold; text-align: center; color: white; text-decoration: none; } .banner-wrap .banner-content .link:hover { background: #F3F4F6; color: #001D2E; } .banner-wrap .banner-content .primary { background: #D43642; } .banner-wrap .banner-content .primary:hover { color: #001D2E; background: #FF5E6A; } .link { background: #001D2E; display: flex; justify-content: center; align-items: center; height: 54px; border: none; padding: 0 32px; border-radius: 180px; transition: all 0.1s; font-size: 15px; font-weight: bold; text-align: center; color: white; text-decoration: none; max-width: 140px; white-space: nowrap; } .link:hover { background: #F3F4F6; color: #001D2E; } @keyframes textBlink { 0%, 100% { text-shadow: 0 0 8px rgba(57, 196, 124, 0); } 50% { text-shadow: 0 0 8px #39c47c; } } .primary { background: #D43642; } .primary:hover { color: #001D2E; background: #FF5E6A; } .guide { border: 1.5px solid #D43642; font-weight: 600; background: white; color: #D43642; } .guide:hover { border: 1.5px solid transparent; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } #cursor_desktop { animation: blink 0.7s infinite; } span.desktop-text { display: inline; } .mobile-text { display: none; height: 128px; } .timer { width: 100%; color: #001D2E; font-size: 15px; } .timer #runtime { font-weight: bold; } .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px 0; } .hamburger { display: block; width: 20px; height: 2.5px; background: #001D2E; position: relative; transition: all 0.3s; border-radius: 24px; } .hamburger::before, .hamburger::after { content: ''; position: absolute; width: 20px; height: 2.5px; background: #001D2E; transition: all 0.3s; border-radius: 24px; left: 0; } .hamburger::before { top: -6px; } .hamburger::after { bottom: -6px; } .menu-toggle.active .hamburger { background: transparent; } .menu-toggle.active .hamburger::before { transform: rotate(45deg); top: 0; } .menu-toggle.active .hamburger::after { transform: rotate(-45deg); bottom: 0; } .content-splitter { max-width: 1440px; margin: 15px auto 90px; padding: 0 32px; } .content-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 0 auto; max-width: 1080px; } .content-block:nth-last-child(1) { margin-bottom: 0; } .text-content { display: flex; flex-wrap: wrap; width: 100%; text-align: left; padding: 30px 0 30px 60px; } .text-content .feature { display: flex; background: #001D2E; color: white; border-radius: 180px; padding: 6px 12px; font-size: 14px; margin-bottom: 12px; } .text-content p { font-size: 16px; line-height: 2; } .image-content { width: 100%; display: flex; justify-content: center; } .image-content img { display: block; max-width: 400px; width: 100%; } .image-content img svg { width: 100% !important; } .cta-btn { display: flex; justify-content: center; } .tabbed-content { background: white; padding: 90px 0; } .tabs-wrap { max-width: 900px; margin: 0 auto; } .tabs { display: flex; justify-content: center; gap: 30px; margin-bottom: 10px; border-bottom: 1px solid #DDE0E4; } a.tab-button { text-decoration:none; padding: 16px; cursor: pointer; color: rgba(0, 29, 47, 0.6); background-color: white; margin-right: 5px; display: flex; align-items: center; font-size: 16px; } .tab-button.active { color: #001D2E; border-bottom: 1px solid #001D2E; } .tab-button i { margin-right: 12px; font-size: 24px; } .tab-panel { display: none; } .tab-panel.active { display: block; } .content-wrapper { display: flex; align-items: center; } .title { text-align: center; margin-bottom: 30px; } .title h2 { margin-bottom: 15px; } .sub-text { display: block; color: rgba(0, 29, 46, 0.6); margin-bottom: 15px; width: 100%; } .product-features { width: 100%; font-size: 16px; padding-left: 10px; margin-bottom: 20px; line-height: 2; list-style: none; } .product-features li::before { display: inline-block; content: "\f00c"; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 8px; color: #168090; } .download-success-content { height: auto; color: #001D2E; background-color: #fefefe; border-radius: 12px; max-width: 600px; transition: transform 0.3s; } .download-success-inner { display: flex; justify-content: center; flex-wrap: wrap; padding: 20px; text-align: center; } .download-success-inner img { width: 90px; } .download-success-inner p { width: 100%; } .download-success-inner .success-message { line-height: 1.5; font-size: 30px; font-weight: 600; margin-bottom: 15px; } .download-success-inner .sub-text a { color: #D43642; } .download-success-inner .sub-text a:hover { color: #991722; } .download-success-banner { display: flex; width: 100%; border-bottom: 1px solid rgba(0, 29, 46, 0.1); justify-content: flex-end; } .download-success-banner .close { position: static; padding: 20px; } .modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); padding: 90px 32px 40px; justify-content: center; align-items: center; } .download-success { padding: 30px; } .modal-content { background-color: #fefefe; margin: 0 auto; padding: 30px; border: 1px solid #888; max-width: 768px; width: 100%; border-radius: 12px; position: relative; height: 100%; overflow: hidden; } .modal-content h3 { font-size: 25px; margin-bottom: 30px; } .modal-content h4 { font-family: "Noto Serif SC", "Serif"; margin-bottom: 10px; font-size: 20px; font-weight: 900; } .modal-content h5 { font-size: 16px; font-weight: 600; margin-bottom: 10px; } .modal-content strong { font-weight: 600; } .modal-content p { margin-bottom: 15px; line-height: 2; } .modal-content p:nth-last-child(1) { margin-bottom: 0; } .modal-content a { text-decoration: none; color: #D43642; transition: all .1s; } .modal-content a:hover { color: #991722; } .modal-content ul, .modal-content ol { margin-bottom: 30px; padding-left: 30px; line-height: 2; } .modal-content ul:nth-last-child(1), .modal-content ol:nth-last-child(1) { margin-bottom: 0; } .modal-content img { display: flex; max-width: 100%; margin-bottom: 30px; } .modal-content img:nth-last-child(1) { margin-bottom: 0; } .modal-content .button { display: flex; justify-content: center; align-items: center; background: #D43642; color: white; border-radius: 180px; padding: 10px 20px; margin: 10px 0 30px; max-width: 160px; } .modal-content .button:hover { background: #FF5E6A; color: #001D2E; } code { display: flex; background: #ffedee; padding: 10px 20px; margin: 10px 0; border-left: 4px solid #D43642; } .close { position: absolute; top: 10px; right: 10px; font-size: 24px; font-weight: bold; background: none; cursor: pointer; height: 30px; width: 30px; display: flex; justify-content: center; align-items: center; z-index: 10; color: #001D2E; } .close:hover, .close:focus { color: black; } .modal-inner-content { overflow-y: scroll; width: 100%; height: 100%; padding-bottom: 68px; } .subscription-plans { margin: 0 auto; padding: 90px 30px; background: #F3F4F6; } .subscription-plans .plans { padding: 30px; display: flex; max-width: 1080px; margin: 0 auto; justify-content: space-between; } .subscription-plans .plan { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; flex: 1; margin: 10px; padding: 50px 30px 40px; box-shadow: 0 .2rem 1.5rem #0000001a; border-radius: 16px; text-align: center; background: white; transition: all .3s; } .subscription-plans .plan:hover { transform: scale(1.05); } .subscription-plans .plan h3 { width: 100%; font-size: 20px; margin-bottom: 20px; } .subscription-plans .plan .price { line-height: 1; font-size: 48px; font-weight: bold; gap: 10px; } .subscription-plans .plan .discount-price { color: #D43642; } .subscription-plans .plan .price-wrap { justify-content: center; align-items: center; font-size: 13px; display: flex; width: 100%; margin-bottom: 15px; gap: 6px; } .subscription-plans .plan .discount-priced-wrap { display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; width: 40px; gap: 2px; text-align: left; } .subscription-plans .plan .discount-priced-wrap span { width: 100%; } .subscription-plans .plan .original-price { font-size: 17px; color: #667782; text-decoration: line-through; } .subscription-plans .plan .plan-description { width: 100%; font-size: 13px; color: #667782; margin-bottom: 25px; } .subscription-plans .plan .link { width: 100%; max-width: 160px; height: 48px; } .subscription-plans .plan ul { width: 100%; list-style: none; margin-bottom: 20px; line-height: 2; } .subscription-plans .plan ul li::before { display: inline-block; content: "\f00c"; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-right: 8px; color: #168090; } .subscription-plans .highlight { position: relative; } .subscription-plans .highlight::before { content: ""; position: absolute; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #001D2E; background: #FFC200; padding: 5px 15px; border-radius: 30px; top: -12px; left: 50%; transform: translateX(-50%); } .subscription-plans .advanced::before { content: "现省21%"; } .subscription-plans .premium::before { content: "现省35%"; } #plan_basic { border: 1.5px solid #D43642; font-weight: 600; background: white; color: #D43642; } #plan_basic:hover { border: 1.5px solid transparent; background: #FF5E6A; color: #001D2E; } .user-reviews { padding: 0 0 90px; background: #F3F4F6; } .user-reviews .reviews { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1080px; margin: 0 auto 20px; gap: 20px; justify-content: space-between; overflow-x: scroll; padding: 32px; } .user-reviews .review { padding: 20px; text-align: center; position: relative; box-shadow: 0 .2rem 1.5rem #0000001a; border-radius: 16px; background: white; } .user-reviews .review .device { display: flex; width: 100%; margin-bottom: 15px; color: rgba(0, 29, 46, 0.6); font-size: 14px; } .user-reviews .review p { text-align: left; font-weight: 600; line-height: 1.5; margin-bottom: 30px; } .user-reviews .review .usr { display: flex; align-items: center; } .user-reviews .review .usr-photo { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; } .user-reviews .review .usr-account { display: flex; flex-wrap: wrap; } .server-locations { padding: 90px 0; background-color: white; background-image: url(../img/map.svg); background-position: center; background-size: 1000px; background-repeat: no-repeat; color: #001D2E; } .server-locations .title h2 { margin-bottom: 30px; color: #001D2E; } .server-locations .subtitle { line-height: 2; } .server-locations-wrap { max-width: 1080px; margin: 0 auto; padding: 20px; } .flags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .flags .flag { cursor: pointer; border: 2px solid transparent; border-radius: 6px; } .flags .flag:hover { transform: scale(1.1); border: 2px solid rgba(0, 29, 46, 0.25); } .faq { padding: 90px 0; background-color: #F9F8F2; } .faq-wrap { max-width: 768px; margin: 0 auto; padding: 0 30px; } .faq-item { margin-bottom: 10px; } .faq-question { width: 100%; padding: 16px 16px 16px 0; font-size: 18px; font-weight: 600; background: none; cursor: pointer; text-align: left; outline: none; border-bottom: 1px solid rgba(0, 29, 46, 0.1); position: relative; color: #001D2E; } .faq-question i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .faq-question.active { border-bottom: none; } .faq-answer { transition: all .2s ease-in-out; max-height: 0; overflow: hidden; padding: 0 16px; line-height: 2; } .faq-answer ol, .faq-answer ul { padding-left: 20px; } .faq-answer a { text-decoration: none; color: #D43642; transition: all .1s; } .faq-answer a:hover { color: #991722; } .faq-answer.active { max-height: 500px; /* Adjust as needed */ padding: 8px 16px 16px; } footer { padding: 160px 0 0; color: rgba(255, 255, 255, 0.5); background-image: linear-gradient(to bottom, #F9F8F2, #FBDA79, #FF8343); position: relative; font-size: 15px; } .footer { background: #042129; position: relative; font-size: 14px; } .footer-bg { width: 100%; background-image: url(../img/footer-bg.svg); background-position: center 101%; background-size: 100%; background-repeat: no-repeat; aspect-ratio: 144/9; } .footer-wrap { max-width: 1440px; padding: 40px 30px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; } .copyright { margin-right: 20px; } .footer-links { display: flex; align-items: center; flex-wrap: wrap; line-height: 2; gap: 10px; } .footer-links-wrap { display: flex; list-style: none; } .footer-links-wrap li { padding: 0 15px; position: relative; } .footer-links-wrap li::after { content: ''; position: absolute; right: 0; top: 50%; width: 1px; height: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.25); } .footer-links-wrap li:nth-child(1) { padding: 0 15px 0 0; } .footer-links-wrap li:nth-last-child(1) { padding: 0 0 0 15px; } .footer-links-wrap li:nth-last-child(1)::after { display: none; } .footer-links-wrap a { color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: all .1s; white-space: nowrap; } .footer-links-wrap a:hover { color: white; } .recommended-sites { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } .recommended-sites a { font-size: 0; } .recommended-sites .site { opacity: 0.5; height: 30px; transition: all .1s; } .recommended-sites .site:hover { opacity: 1; } @media screen and (max-width: 1200px) { .banner-wrap .banner-content h1 { font-size: 40px; } h2 { font-size: 32px; } h3 { font-size: 24px; } .footer-wrap { justify-content: center; } .footer-links { text-align: center; justify-content: center; } footer { padding: 80px 0 0; } .text-content .feature { font-size: 13px; margin-bottom: 15px; } } @media screen and (max-width: 992px) { .banner-wrap { background-image: url("../img/bg-t.webp"); aspect-ratio: 1/1; } } @media screen and (max-width: 768px) { .menu-toggle { order: 3; display: block; } .header-nav { order: 2; display: none; position: absolute; top: calc(100% + 16px); height: 100%; left: 50%; width: 100%; max-width: 400px; transform: translateX(-50%); background: white; padding: 30px; border-radius: 16px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); flex-wrap: wrap; justify-content: center; gap: 0; } .header-nav.active { display: flex; height: auto; } .header-nav li { width: 100%; padding: 15px 0; border-bottom: 1px solid rgba(0, 29, 46, 0.1); } .header-nav li:nth-child(1) { padding: 0 0 15px; } .header-nav li:nth-last-child(1) { padding: 15px 0 0; border-bottom: none; } .header-nav li::after { display: none; } .header-nav li a { width: 100%; justify-content: flex-start; font-size: 18px; } .usr-btn { font-size: 16px; } .content-block { grid-template-columns: 1fr; gap: 0; } .content-splitter h3, .content-splitter p { text-align: center; } .text-content { justify-content: center; padding: 0 30px 30px 30px; } .text-content h3, .text-content .sub-text { text-align: center; } .text-content .product-features { display: flex; justify-content: center; flex-wrap: wrap; } .text-content .product-features li { margin-right: 30px; } .flip .text-content { order: 1; } .flip .image-content { order: 0; } .content-wrapper { flex-wrap: wrap; } .content-wrapper .image-content { padding: 0 32px; } .tabs { flex-wrap: wrap; gap: 8px; margin-bottom: 0; } .download-text-d { order: 2; } .download-img-d { order: 1; } .image-content { width: 100%; display: flex; justify-content: center; } .image-content img { display: block; max-width: 70%; margin: 0 auto -10px; } .close { top: 15px; right: 15px; } .server-locations { background-size: 992px; } .subscription-plans { padding: 90px 0; } .subscription-plans .plans { padding: 30px; overflow-x: scroll; gap: 32px; } .subscription-plans .plan { min-width: 300px; white-space: nowrap; margin: 0; } .flags .flag { width: 60px; } .copyright { margin-right: 0; } } @media screen and (max-width: 480px) { .popup-overlay { align-items: flex-end; } .popup { border-radius: 8px 8px 0 0; max-width: 100%; width: 100%; padding: 2rem 1.5rem; transform: translateY(100%); transition: transform 0.3s ease-out; background-position: top; } .popup.show { transform: translateY(0); } .discount-btn { font-size: 14px; padding: 10px 20px; } .close-btn { top: 5px; right: 5px; } .floating-popup { bottom: 0; right: 0; max-width: 100%; border-radius: 0; } .floating-popup h2 { font-size: 30px; text-align: left; margin-bottom: 0; } .floating-popup p { text-align: left; margin-bottom: 0; } .floating-popup .popup-inner .title-wrap { flex-wrap: nowrap; } .floating-popup .title-wrap { display: flex; flex-wrap: nowrap; gap: 20px; align-items: center; width: auto; } .floating-popup .timer { display: flex; font-size: 16px; position: absolute; background: rgba(39, 130, 152, 0.8); padding: 4px 8px; border-radius: 180px; top: -30px; left: 20px; } .popup-inner { align-items: center; justify-content: center; gap: 10px; padding: 1.2rem 1.5rem; } .banner-wrap { background-image: url("../img/bg-m.webp"); aspect-ratio: 5/8; padding: 160px 20px; } .banner-wrap .banner-content .cta-btns { width: 100%; flex-wrap: nowrap; justify-content: center; gap: 20px; } .banner-wrap .banner-content h1 { line-height: 1.3; font-size: 48px; margin-bottom: 25px; } .banner-wrap .banner-content .banner-description { font-size: 17px; } .banner-wrap .link { max-width: 150px; flex-grow: 1; white-space: nowrap; } .banner-wrap .primary { flex-grow: 2; } h3 { font-size: 26px; } .login { padding: 0 8px; } .text-content .product-features { gap: 0; } .text-content .product-features li { margin-right: 0; width: 300px; } .content-wrapper .text-content { padding: 0 30px; } .content-splitter { margin-bottom: 45px; } .tabbed-content { padding: 45px 0; } .subscription-plans { padding: 45px 0; } .user-reviews { padding: 45px 0; } .faq { padding: 45px 0; } .tabs { border-bottom: none; gap: 0; padding: 0 15px; gap: 10px; display: flex; flex-wrap: wrap; margin-bottom: 25px; justify-content: center; } .tab-content .image-content { display: none; } .tab-button { padding: 8px 12px; font-size: 16px; border: 1px solid rgba(0, 29, 46, 0.1); border-radius: 180px; margin-right: 0; justify-content: center; max-width: 150px; flex: 0 0 45%; /* Adjusts the width to allow two buttons per row */ } .tab-button i { font-size: 14px; } .tab-button.active { border: 1px solid #001d2e; background: #001D2E; color: white; } .desktop-text { display: none; } span.desktop-text { display: none; } .mobile-text { display: block; } #cursor_desktop { display: none; } .modal { padding: 90px 10px 30px; } .modal-content { padding: 20px; } .content-wrapper .text-content { justify-content: center; } .link { height: 55px; max-width: 160px; width: 100%; } .subscription-plans .plans { display: flex; flex-direction: row; gap: 15px; padding: 30px 35px; overflow-x: auto; /* Allows horizontal scrolling */ } .subscription-plans .plans .plan { min-width: 100%; } .subscription-plans .plans .plan:hover { transform: scale(1); } .subscription-plans .plans .plan.advanced { order: 1; /* This will make the advanced plan appear in the center */ } .subscription-plans .plans .plan.basic { order: 0; /* This will make the basic plan appear to the left */ } .subscription-plans .plans .plan.premium { order: 2; /* This will make the premium plan appear to the right */ } .footer-bg { height: 27px; } }