/* Start custom CSS for html, class: .elementor-element-fa4b34e *//* =========================================
STORE IPTV - FAQ
PREMIUM BLACK + NEON GREEN
========================================= */
/* =========================================
VARIABLES
========================================= */
:root {
--bg-main: #050706;
--bg-secondary: #090D0B;
--card: #0D1210;
--green: #00FF88;
--green-dark: #00C96B;
--white: #FFFFFF;
--text-secondary: #929D97;
--text-muted: #7E8B83;
--border: rgba(255,255,255,0.08);
--green-border: rgba(0,255,136,0.30);
--container: 1180px;
}
/* =========================================
RESET
========================================= */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
width: 100%;
min-height: 100vh;
background: var(--bg-main);
color: var(--white);
font-family: "Inter", sans-serif;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
button,
a,
summary {
-webkit-tap-highlight-color: transparent;
}
.container {
width: 92%;
max-width: var(--container);
margin: 0 auto;
}
/* =========================================
BADGES
========================================= */
.badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(0,255,136,0.06);
border: 1px solid rgba(0,255,136,0.20);
border-radius: 50px;
color: var(--green);
font-size: 10px;
font-weight: 800;
letter-spacing: 1.4px;
line-height: 1;
}
.dot {
width: 6px;
height: 6px;
flex-shrink: 0;
background: var(--green);
border-radius: 50%;
box-shadow:
0 0 8px rgba(0,255,136,0.70),
0 0 16px rgba(0,255,136,0.35);
}
/* =========================================
HERO
========================================= */
.hero {
position: relative;
min-height: 570px;
display: flex;
align-items: center;
overflow: hidden;
background:
radial-gradient(
circle at 50% -10%,
rgba(0,255,136,0.11),
transparent 40%
),
var(--bg-main);
}
.hero-content {
position: relative;
z-index: 2;
max-width: 850px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* =========================================
HERO TITLE
========================================= */
.hero h1 {
margin-top: 25px;
color: #FFFFFF;
font-size: clamp(48px, 7vw, 82px);
line-height: 0.98;
font-weight: 900;
letter-spacing: -4px;
}
.hero h1 span {
display: block;
margin-top: 8px;
color: var(--green);
}
.hero p {
max-width: 620px;
margin-top: 28px;
color: var(--text-secondary);
font-size: 17px;
line-height: 1.7;
}
/* =========================================
GLOW
========================================= */
.glow {
position: absolute;
width: 420px;
height: 420px;
border-radius: 50%;
background: rgba(0,255,136,0.08);
filter: blur(140px);
pointer-events: none;
animation: glowFloat 6s ease-in-out infinite;
}
.glow-one {
top: -300px;
left: 20%;
}
.glow-two {
right: -300px;
bottom: -300px;
opacity: 0.45;
animation-delay: 2s;
}
@keyframes glowFloat {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
/* =========================================
QUICK SECTION
========================================= */
.quick-section {
position: relative;
z-index: 5;
margin-top: -50px;
padding-bottom: 110px;
}
.quick-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.quick-card {
min-height: 110px;
padding: 22px;
display: flex;
align-items: center;
gap: 16px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow:
0 15px 40px rgba(0,0,0,0.22);
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.quick-card:hover {
transform: translateY(-5px);
border-color: var(--green-border);
box-shadow:
0 20px 50px rgba(0,0,0,0.38);
}
/* =========================================
QUICK ICON
========================================= */
.icon {
width: 50px;
height: 50px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--green);
background: rgba(0,255,136,0.07);
border: 1px solid rgba(0,255,136,0.15);
border-radius: 14px;
font-size: 14px;
font-weight: 800;
}
.quick-card h3 {
color: #FFFFFF;
font-size: 14px;
font-weight: 800;
}
.quick-card p {
margin-top: 6px;
color: var(--text-muted);
font-size: 12px;
line-height: 1.5;
}
/* =========================================
FAQ SECTION
========================================= */
.faq-section {
padding: 115px 0;
background: var(--bg-secondary);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
/* =========================================
SECTION HEADING
========================================= */
.section-heading {
max-width: 700px;
margin-bottom: 55px;
}
.section-heading h2 {
margin-top: 23px;
color: #FFFFFF;
font-size: clamp(40px, 5vw, 62px);
line-height: 1;
font-weight: 900;
letter-spacing: -3px;
}
.section-heading h2 span {
display: block;
margin-top: 6px;
color: var(--green);
}
.section-heading p {
max-width: 610px;
margin-top: 23px;
color: var(--text-secondary);
font-size: 16px;
line-height: 1.7;
}
/* =========================================
FAQ GRID
========================================= */
.faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.faq-column {
display: flex;
flex-direction: column;
gap: 14px;
}
/* =========================================
FAQ CARD
========================================= */
.faq-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: 19px;
overflow: hidden;
box-shadow:
0 12px 35px rgba(0,0,0,0.16);
transition:
transform 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease;
}
.faq-card:hover {
transform: translateY(-4px);
border-color: var(--green-border);
box-shadow:
0 20px 45px rgba(0,0,0,0.32);
}
.faq-card[open] {
border-color: rgba(0,255,136,0.24);
}
/* =========================================
FAQ QUESTION
========================================= */
.faq-card summary {
min-height: 78px;
padding: 20px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
cursor: pointer;
color: #FFFFFF;
font-size: 14px;
font-weight: 700;
list-style: none;
user-select: none;
}
.faq-card summary::-webkit-details-marker {
display: none;
}
/* =========================================
PLUS ICON
========================================= */
.faq-card summary strong {
width: 34px;
height: 34px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--green);
background: rgba(0,255,136,0.07);
border: 1px solid rgba(0,255,136,0.15);
border-radius: 10px;
font-size: 21px;
font-weight: 500;
transition:
transform 0.25s ease,
background 0.25s ease;
}
.faq-card[open] summary strong {
transform: rotate(45deg);
background: rgba(0,255,136,0.12);
}
/* =========================================
FAQ ANSWER
========================================= */
.answer {
padding: 0 22px 22px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.answer p {
padding-top: 18px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.75;
}
/* =========================================
CTA
========================================= */
.cta-section {
padding: 115px 0;
background: var(--bg-main);
}
.cta-card {
position: relative;
min-height: 420px;
padding: 70px 25px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-align: center;
background:
radial-gradient(
circle at 50% 0%,
rgba(0,255,136,0.10),
transparent 45%
),
var(--card);
border: 1px solid var(--border);
border-radius: 24px;
box-shadow:
0 20px 70px rgba(0,0,0,0.25);
}
.cta-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
}
/* =========================================
CTA TITLE
========================================= */
.cta-card h2 {
margin-top: 23px;
color: #FFFFFF;
font-size: clamp(40px, 5vw, 62px);
line-height: 1;
font-weight: 900;
letter-spacing: -3px;
}
.cta-card h2 span {
display: block;
margin-top: 6px;
color: var(--green);
}
.cta-card p {
max-width: 610px;
margin-top: 23px;
color: var(--text-secondary);
font-size: 16px;
line-height: 1.7;
}
/* =========================================
CTA GLOW
========================================= */
.cta-glow {
position: absolute;
width: 350px;
height: 350px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: rgba(0,255,136,0.07);
filter: blur(130px);
border-radius: 50%;
pointer-events: none;
}
/* =========================================
BUTTONS
========================================= */
.buttons {
margin-top: 31px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.btn {
min-height: 51px;
padding: 0 23px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 12px;
font-size: 13px;
font-weight: 800;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
background 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
/* =========================================
PRIMARY BUTTON
========================================= */
.btn.primary {
color: #031009;
background:
linear-gradient(
135deg,
#00FF88 0%,
#00D875 100%
);
border: 1px solid transparent;
box-shadow:
0 10px 30px rgba(0,255,136,0.14);
}
.btn.primary:hover {
transform: translateY(-3px);
box-shadow:
0 17px 42px rgba(0,255,136,0.25);
}
.btn.primary span {
font-size: 17px;
line-height: 1;
}
/* =========================================
SECONDARY BUTTON
========================================= */
.btn.secondary {
color: #FFFFFF;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.12);
}
.btn.secondary:hover {
color: #031009;
background: var(--green);
border-color: var(--green);
transform: translateY(-3px);
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.quick-grid {
grid-template-columns: 1fr;
}
.faq-grid {
grid-template-columns: 1fr;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.container {
width: 92%;
}
/* HERO */
.hero {
min-height: 500px;
}
.hero h1 {
font-size: clamp(42px, 12vw, 58px);
letter-spacing: -3px;
}
.hero p {
margin-top: 23px;
font-size: 15px;
}
/* QUICK */
.quick-section {
margin-top: -30px;
padding-bottom: 75px;
}
/* FAQ */
.faq-section {
padding: 75px 0;
}
.section-heading {
margin-bottom: 40px;
}
.section-heading h2 {
font-size: clamp(38px, 10vw, 50px);
letter-spacing: -2.5px;
}
.section-heading p {
font-size: 15px;
}
/* FAQ CARD */
.faq-card summary {
min-height: 72px;
padding: 18px;
font-size: 13px;
}
.answer {
padding: 0 18px 20px;
}
.answer p {
font-size: 13px;
}
/* CTA */
.cta-section {
padding: 75px 0;
}
.cta-card {
min-height: 450px;
padding: 55px 20px;
}
.cta-card h2 {
font-size: clamp(38px, 10vw, 50px);
letter-spacing: -2.5px;
}
.cta-card p {
font-size: 15px;
}
.buttons {
width: 100%;
flex-direction: column;
gap: 10px;
}
.buttons .btn {
width: 100%;
}
}
/* =========================================
SMALL MOBILE - 390PX
========================================= */
@media (max-width: 390px) {
.hero h1 {
font-size: 41px;
letter-spacing: -2.5px;
}
.section-heading h2,
.cta-card h2 {
font-size: 37px;
letter-spacing: -2px;
}
.quick-card {
padding: 18px;
}
.faq-card summary {
padding: 17px;
}
}
/* =========================================
REDUCE MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}/* End custom CSS */