/* ==========================================================================
   VERTEX IPTV - GLOBAL PREMIUM STYLESHEET
   PART 1 - FOUNDATION
   ========================================================================== */

/* ==========================
   GOOGLE FONT
========================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* ==========================
   ROOT VARIABLES
========================== */

:root{

--bg-black:#09090b;
--bg-dark:#121214;
--bg-card:#1c1c1f;

--primary-red:#e50914;
--primary-hover:#b80710;
--primary-light:#ff3b45;

--text-white:#ffffff;
--text-muted:#a1a1aa;
--text-dim:#71717a;

--success:#22c55e;
--warning:#f59e0b;
--danger:#ef4444;

--border:rgba(255,255,255,.08);
--border-red:rgba(229,9,20,.20);

--shadow-sm:0 5px 15px rgba(0,0,0,.25);
--shadow-md:0 10px 30px rgba(0,0,0,.35);
--shadow-lg:0 20px 60px rgba(0,0,0,.45);

--radius-sm:8px;
--radius:12px;
--radius-lg:16px;
--radius-xl:20px;

--transition:.30s ease;

--header-height:80px;

}


/* ==========================
   RESET
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:var(--primary-red) var(--bg-dark);
}

body{

font-family:'Poppins',sans-serif;
background:var(--bg-black);
color:var(--text-white);
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;

}


/* ==========================
   GLOBAL ELEMENTS
========================== */

img{

display:block;
max-width:100%;
height:auto;

}

svg{

display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

button{

font-family:inherit;
cursor:pointer;
transition:var(--transition);

}

input,
textarea,
select{

font-family:inherit;

}

ul{

list-style:none;

}


/* ==========================
   CONTAINER
========================== */

.container{

width:100%;
max-width:1280px;
margin:auto;
padding:0 24px;

}


/* ==========================
   SECTION SPACING
========================== */

section{

position:relative;

}

.section-padding{

padding:80px 0;

}

.page-padding{

padding:140px 0 80px;

}


/* ==========================
   HEADINGS
========================== */

h1{

font-size:3.8rem;
font-weight:800;
line-height:1.15;

}

h2{

font-size:2.6rem;
font-weight:800;
line-height:1.2;

}

h3{

font-size:1.8rem;
font-weight:700;

}

h4{

font-size:1.2rem;
font-weight:600;

}

p{

color:var(--text-muted);

}

span.red{

color:var(--primary-red);

}


/* ==========================
   SECTION TITLE
========================== */

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title h2{

margin-bottom:15px;

}

.section-title h2 span{

color:var(--primary-red);

}

.section-title p{

max-width:700px;
margin:auto;

}


/* ==========================
   BUTTONS
========================== */

.btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;

height:54px;
padding:0 28px;

border:none;
border-radius:12px;

font-size:15px;
font-weight:700;

transition:var(--transition);

}

.btn-primary{

background:var(--primary-red);
color:#fff;
box-shadow:0 10px 25px rgba(229,9,20,.30);

}

.btn-primary:hover{

background:var(--primary-hover);
transform:translateY(-3px);

}

.btn-secondary{

background:transparent;
color:#fff;
border:1px solid var(--border);

}

.btn-secondary:hover{

border-color:var(--primary-red);
background:rgba(229,9,20,.08);

}


/* ==========================
   GLOBAL CARD
========================== */

.card{

background:var(--bg-card);

border:1px solid var(--border);

border-radius:var(--radius-lg);

box-shadow:var(--shadow-md);

transition:var(--transition);

}

.card:hover{

transform:translateY(-8px);

border-color:var(--border-red);

}


/* ==========================
   INPUTS
========================== */

.input-group{

display:flex;
flex-direction:column;
gap:8px;
margin-bottom:22px;

}

.input-group label{

font-size:14px;
font-weight:600;
color:#fff;

}

.input-group input,
.input-group textarea,
.input-group select{

width:100%;

padding:15px;

background:var(--bg-dark);

border:1px solid var(--border);

border-radius:10px;

color:#fff;

font-size:15px;

transition:var(--transition);

}

.input-group textarea{

resize:vertical;
min-height:140px;

}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{

outline:none;

border-color:var(--primary-red);

box-shadow:0 0 0 3px rgba(229,9,20,.15);

}


/* ==========================
   TEXT SELECTION
========================== */

::selection{

background:var(--primary-red);
color:#fff;

}

::-moz-selection{

background:var(--primary-red);
color:#fff;

}


/* ==========================
   SCROLLBAR
========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:var(--bg-dark);

}

::-webkit-scrollbar-thumb{

background:var(--primary-red);
border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-hover);

}


/* ==========================
   RESPONSIVE FOUNDATION
========================== */

@media(max-width:992px){

h1{

font-size:3rem;

}

h2{

font-size:2.2rem;

}

.container{

padding:0 20px;

}

}

@media(max-width:768px){

.page-padding{

padding:120px 0 60px;

}

.section-padding{

padding:70px 0;

}

h1{

font-size:2.4rem;

}

h2{

font-size:2rem;

}

h3{

font-size:1.5rem;

}

.container{

padding:0 18px;

}

.btn{

width:100%;

}

}

@media(max-width:480px){

h1{

font-size:2rem;

}

h2{

font-size:1.7rem;

}

.container{

padding:0 16px;

}

}
/* ==========================================================
   PART 2
   HEADER • NAVBAR • MOBILE MENU
========================================================== */

/* ==========================
HEADER
========================== */

.main-header{

position:fixed;
top:0;
left:0;
width:100%;
height:80px;

display:flex;
align-items:center;

background:rgba(9,9,11,.92);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.06);

z-index:9999;

transition:.35s ease;

}

.main-header.scrolled{

height:72px;

background:rgba(9,9,11,.98);

box-shadow:0 8px 30px rgba(0,0,0,.35);

}


/* ==========================
HEADER CONTAINER
========================== */

.header-container{

width:100%;
max-width:1280px;

margin:auto;

padding:0 24px;

display:flex;
align-items:center;
justify-content:space-between;

}


/* ==========================
LOGO
========================== */

.logo{

display:flex;
align-items:center;
gap:12px;

font-size:28px;
font-weight:800;

color:#fff;

letter-spacing:.5px;

}

.logo img{

height:44px;
width:auto;

}

.logo span{

color:var(--primary-red);

}

.logo:hover{

opacity:.95;

}


/* ==========================
NAVIGATION
========================== */

.nav-menu{

display:flex;
align-items:center;
gap:34px;

}

.nav-link{

position:relative;

font-size:15px;
font-weight:600;

color:var(--text-muted);

transition:.30s;

}

.nav-link:hover{

color:#fff;

}

.nav-link.active{

color:#fff;

}

.nav-link::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:0;

height:2px;

background:var(--primary-red);

border-radius:20px;

transition:.30s;

}

.nav-link:hover::after,
.nav-link.active::after{

width:100%;

}


/* ==========================
HEADER BUTTON
========================== */

.header-actions{

display:flex;
align-items:center;
gap:15px;

}

.btn-signin{

height:48px;

padding:0 22px;

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.08);

border-radius:12px;

color:#fff;

font-size:14px;
font-weight:700;

transition:.30s;

}

.btn-signin:hover{

background:var(--primary-red);

border-color:var(--primary-red);

transform:translateY(-2px);

}


/* ==========================
HAMBURGER
========================== */

.hamburger{

display:none;

width:48px;
height:48px;

border:none;

background:transparent;

color:#fff;

font-size:26px;

cursor:pointer;

}


/* ==========================
MOBILE
========================== */

@media(max-width:991px){

.hamburger{

display:flex;

align-items:center;
justify-content:center;

}

.nav-menu{

position:fixed;

top:80px;
left:-100%;

width:100%;
height:calc(100vh - 80px);

background:#09090b;

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:center;

padding:45px 25px;

gap:28px;

transition:.35s ease;

overflow-y:auto;

}

.nav-menu.active{

left:0;

}

.nav-link{

font-size:18px;

}

.header-actions{

width:100%;

margin-top:10px;

justify-content:center;

}

.btn-signin{

width:100%;
max-width:280px;

}

body.menu-open{

overflow:hidden;

}

}


/* ==========================
SMALL MOBILE
========================== */

@media(max-width:768px){

.main-header{

height:74px;

}

.header-container{

padding:0 18px;

}

.logo{

font-size:24px;

}

.logo img{

height:38px;

}

.nav-menu{

top:74px;

height:calc(100vh - 74px);

}

}


/* ==========================
EXTRA SMALL
========================== */

@media(max-width:480px){

.header-container{

padding:0 16px;

}

.logo{

font-size:21px;

}

.logo img{

height:34px;

}

.nav-link{

font-size:17px;

}

.btn-signin{

height:50px;

}

}
/* ==========================================================
   PART 3
   HERO • TRUST BADGES • COMMON SECTIONS
==========================================================*/

/* ==========================
   HERO SECTION
========================== */

.hero-section{

position:relative;

padding:170px 0 110px;

overflow:hidden;

background:
radial-gradient(circle at top,rgba(229,9,20,.18) 0%,transparent 55%),
linear-gradient(180deg,#09090b 0%,#121214 100%);

}

.hero-section::before{

content:"";

position:absolute;

top:-250px;
left:50%;

transform:translateX(-50%);

width:850px;
height:850px;

background:radial-gradient(circle,
rgba(229,9,20,.12),
transparent 70%);

pointer-events:none;

}

.hero-container{

position:relative;

z-index:2;

display:flex;
flex-direction:column;

align-items:center;

text-align:center;

}


/* ==========================
PREMIUM BADGE
========================== */

.badge-premium{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

margin-bottom:30px;

background:rgba(229,9,20,.10);

border:1px solid rgba(229,9,20,.25);

border-radius:50px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

color:var(--primary-red);

text-transform:uppercase;

}

.badge-premium i{

font-size:14px;

}


/* ==========================
HERO TITLE
========================== */

.hero-section h1{

max-width:900px;

margin-bottom:22px;

font-size:4.2rem;

font-weight:800;

line-height:1.12;

letter-spacing:-1px;

}

.hero-section h1 span{

color:var(--primary-red);

}


/* ==========================
HERO TEXT
========================== */

.hero-section p{

max-width:760px;

margin:auto;

margin-bottom:42px;

font-size:19px;

line-height:1.9;

color:var(--text-muted);

}


/* ==========================
BUTTONS
========================== */

.hero-actions{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

flex-wrap:wrap;

}

.hero-actions .btn{

min-width:200px;

}


/* ==========================
HERO STATS
========================== */

.hero-stats{

display:flex;

justify-content:center;

gap:50px;

margin-top:70px;

flex-wrap:wrap;

}

.hero-stat{

text-align:center;

}

.hero-stat h2{

font-size:40px;

color:var(--primary-red);

margin-bottom:8px;

}

.hero-stat p{

font-size:14px;

color:var(--text-muted);

text-transform:uppercase;

letter-spacing:.5px;

}


/* ==========================
TRUST SECTION
========================== */

.trust-badges{

padding:70px 0;

background:#121214;

border-top:1px solid rgba(255,255,255,.05);

border-bottom:1px solid rgba(255,255,255,.05);

}

.badges-container{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}


/* ==========================
BADGE CARD
========================== */

.badge-item{

background:#1c1c1f;

border:1px solid rgba(255,255,255,.05);

border-radius:16px;

padding:28px;

display:flex;

align-items:center;

gap:18px;

transition:.30s;

}

.badge-item:hover{

transform:translateY(-6px);

border-color:rgba(229,9,20,.25);

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.badge-item i{

width:58px;
height:58px;

display:flex;
align-items:center;
justify-content:center;

border-radius:14px;

background:rgba(229,9,20,.10);

color:var(--primary-red);

font-size:24px;

}

.badge-item h4{

font-size:18px;

margin-bottom:6px;

}

.badge-item p{

font-size:14px;

color:var(--text-muted);

line-height:1.7;

}


/* ==========================
COMMON SECTION
========================== */

.section{

padding:100px 0;

}

.section-title{

margin-bottom:65px;

text-align:center;

}

.section-title h2{

margin-bottom:18px;

}

.section-title h2 span{

color:var(--primary-red);

}

.section-title p{

max-width:720px;

margin:auto;

font-size:17px;

}


/* ==========================
RESPONSIVE
========================== */

@media(max-width:991px){

.hero-section{

padding:150px 0 90px;

}

.hero-section h1{

font-size:3.2rem;

}

.hero-section p{

font-size:17px;

}

.badges-container{

grid-template-columns:repeat(2,1fr);

}

.hero-stats{

gap:35px;

}

}

@media(max-width:768px){

.hero-section{

padding:130px 0 70px;

}

.hero-section h1{

font-size:2.5rem;

}

.hero-section p{

font-size:16px;

}

.hero-actions{

flex-direction:column;

width:100%;

}

.hero-actions .btn{

width:100%;

}

.badges-container{

grid-template-columns:1fr;

}

.hero-stats{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-top:50px;

}

.section{

padding:70px 0;

}

}

@media(max-width:480px){

.hero-section h1{

font-size:2rem;

}

.hero-section p{

font-size:15px;

}

.hero-stat h2{

font-size:30px;

}

.hero-stat p{

font-size:13px;

}

.hero-stats{

grid-template-columns:1fr 1fr;

gap:20px;

}

.badge-item{

padding:22px;

}

}
/* ==========================================================
   PART 4
   PRICING • PAYMENT METHODS
========================================================== */


/* ==========================
PRICING SECTION
========================== */

.pricing-section{

padding:110px 0;

position:relative;

}

.pricing-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

align-items:stretch;

}


/* ==========================
CARD
========================== */

.pricing-card{

position:relative;

display:flex;

flex-direction:column;

background:linear-gradient(180deg,#1d1d20,#161618);

border:1px solid rgba(255,255,255,.06);

border-radius:20px;

padding:38px 30px;

overflow:hidden;

transition:.35s;

box-shadow:0 15px 40px rgba(0,0,0,.35);

}

.pricing-card:hover{

transform:translateY(-10px);

border-color:rgba(229,9,20,.30);

box-shadow:0 25px 60px rgba(0,0,0,.55);

}

.pricing-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:var(--primary-red);

opacity:0;

transition:.35s;

}

.pricing-card:hover::before{

opacity:1;

}


/* ==========================
POPULAR CARD
========================== */

.pricing-card.popular{

border:2px solid var(--primary-red);

transform:scale(1.03);

}

.pricing-card.popular:hover{

transform:scale(1.05);

}


/* ==========================
BEST VALUE
========================== */

.pricing-card.premium-best{

border:2px solid #d4af37;

}


/* ==========================
BADGES
========================== */

.badge-popular,
.badge-best{

position:absolute;

top:18px;
right:18px;

padding:8px 14px;

font-size:11px;

font-weight:700;

border-radius:30px;

letter-spacing:1px;

text-transform:uppercase;

color:#fff;

}

.badge-popular{

background:var(--primary-red);

}

.badge-best{

background:linear-gradient(135deg,#d4af37,#b98b18);

}


/* ==========================
HEADER
========================== */

.card-header{

text-align:center;

padding-bottom:28px;

margin-bottom:28px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.card-header h3{

font-size:26px;

margin-bottom:18px;

}

.price{

display:flex;

align-items:flex-end;

justify-content:center;

gap:10px;

}

.current-price{

font-size:52px;

font-weight:800;

line-height:1;

}

.old-price{

font-size:20px;

text-decoration:line-through;

color:var(--text-dim);

}


/* ==========================
FEATURES
========================== */

.card-features{

display:flex;

flex-direction:column;

gap:18px;

list-style:none;

margin-bottom:35px;

flex:1;

}

.card-features li{

display:flex;

align-items:flex-start;

gap:12px;

font-size:15px;

line-height:1.7;

color:var(--text-muted);

}

.card-features li i{

margin-top:4px;

color:var(--primary-red);

}

.notice-feature{

background:rgba(229,9,20,.08);

padding:15px;

border-radius:12px;

border-left:4px solid var(--primary-red);

color:#fff !important;

}


/* ==========================
BUTTON
========================== */

.btn-card{

width:100%;

height:54px;

font-weight:700;

border-radius:12px;

}

.pricing-card.popular .btn-card{

background:var(--primary-red);

}

.pricing-card.popular .btn-card:hover{

background:#c70812;

}


/* ==========================
PAYMENTS
========================== */

.payment-methods{

padding:100px 0;

background:#121214;

border-top:1px solid rgba(255,255,255,.05);

}

.payment-grid{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:22px;

}

.payment-item{

background:#1d1d20;

border:1px solid rgba(255,255,255,.06);

border-radius:18px;

padding:28px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

transition:.35s;

}

.payment-item:hover{

transform:translateY(-8px);

border-color:rgba(229,9,20,.25);

}

.payment-item i{

font-size:42px;

margin-bottom:18px;

}

.payment-item span{

font-size:15px;

font-weight:600;

color:#fff;

}


/* Colors */

.fa-cc-paypal{

color:#0070ba;

}

.fa-bitcoin{

color:#f7931a;

}

.fa-google-pay{

color:#4285F4;

}

.fa-apple-pay{

color:#ffffff;

}

.fa-credit-card{

color:#2ecc71;

}

.fa-university{

color:#e74c3c;

}


/* ==========================
RESPONSIVE
========================== */

@media(max-width:1200px){

.pricing-grid{

grid-template-columns:repeat(2,1fr);

}

.payment-grid{

grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.pricing-section{

padding:80px 0;

}

.pricing-grid{

grid-template-columns:1fr;

}

.pricing-card.popular{

transform:none;

}

.pricing-card.popular:hover{

transform:translateY(-8px);

}

.payment-grid{

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.current-price{

font-size:44px;

}

}

@media(max-width:480px){

.payment-grid{

grid-template-columns:1fr;

}

.payment-item{

padding:22px;

}

.card-header h3{

font-size:22px;

}

.current-price{

font-size:38px;

}

.card-features li{

font-size:14px;

}

}
/* ==========================================================
   PART 5
   GLOBAL FORMS • AUTH PAGES • CONTACT • TRIAL
==========================================================*/


/*==========================
GLOBAL FORM PAGE
==========================*/

.form-page{

padding:140px 20px 90px;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

}


/*==========================
COMMON FORM CARD
==========================*/

.form-card{

width:100%;

max-width:720px;

background:linear-gradient(180deg,#1d1d20,#17171a);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:45px;

box-shadow:0 25px 70px rgba(0,0,0,.45);

transition:.35s;

}

.form-card:hover{

border-color:rgba(229,9,20,.25);

}


/*==========================
TOP
==========================*/

.form-top{

text-align:center;

margin-bottom:38px;

}

.form-top h1{

font-size:40px;

font-weight:800;

margin-bottom:15px;

}

.form-top span{

color:var(--primary-red);

}

.form-top p{

max-width:520px;

margin:auto;

color:var(--text-muted);

line-height:1.8;

}


/*==========================
FORM
==========================*/

.form{

display:flex;

flex-direction:column;

gap:24px;

}


/*==========================
GRID
==========================*/

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

}


/*==========================
LABEL
==========================*/

.input-group{

display:flex;

flex-direction:column;

gap:8px;

}

.input-group label{

font-size:14px;

font-weight:600;

color:#fff;

}


/*==========================
INPUT
==========================*/

.input-group input,
.input-group textarea,
.input-group select{

width:100%;

height:56px;

padding:0 18px;

background:#101114;

border:1px solid rgba(255,255,255,.08);

border-radius:12px;

color:#fff;

font-size:15px;

transition:.30s;

}

textarea{

height:180px !important;

padding:18px !important;

resize:vertical;

}

.input-group input:focus,
.input-group textarea:focus,
.input-group select:focus{

outline:none;

border-color:var(--primary-red);

box-shadow:0 0 0 4px rgba(229,9,20,.12);

}


/*==========================
PLACEHOLDER
==========================*/

input::placeholder,
textarea::placeholder{

color:#777;

}


/*==========================
PASSWORD
==========================*/

.password-box{

position:relative;

}

.password-box input{

padding-right:55px;

}

.password-toggle{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

background:none;

border:none;

font-size:18px;

cursor:pointer;

color:#aaa;

transition:.30s;

}

.password-toggle:hover{

color:#fff;

}


/*==========================
CHECKBOX
==========================*/

.checkbox-area{

display:flex;

align-items:center;

gap:10px;

font-size:14px;

color:var(--text-muted);

}

.checkbox-area input{

width:18px;

height:18px;

accent-color:var(--primary-red);

}


/*==========================
BUTTON
==========================*/

.form .btn{

width:100%;

height:56px;

font-size:16px;

font-weight:700;

border-radius:12px;

}


/*==========================
LINKS
==========================*/

.form-links{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

margin-top:8px;

}

.form-links a{

color:var(--primary-red);

font-weight:600;

transition:.30s;

}

.form-links a:hover{

opacity:.8;

}


/*==========================
DIVIDER
==========================*/

.form-divider{

display:flex;

align-items:center;

gap:15px;

margin:5px 0;

}

.form-divider::before,
.form-divider::after{

content:"";

flex:1;

height:1px;

background:rgba(255,255,255,.08);

}

.form-divider span{

font-size:14px;

color:var(--text-muted);

}


/*==========================
SUCCESS BOX
==========================*/

.success-popup{

position:fixed;

right:30px;

bottom:30px;

width:360px;

background:#18191c;

border-left:5px solid #22c55e;

border-radius:16px;

padding:22px;

box-shadow:0 25px 60px rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transform:translateY(40px);

transition:.40s;

z-index:99999;

}

.success-popup.show-popup{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.popup-content{

display:flex;

gap:18px;

align-items:flex-start;

}

.popup-content i{

font-size:32px;

color:#22c55e;

}

.popup-content h4{

margin-bottom:6px;

font-size:18px;

}

.popup-content p{

color:var(--text-muted);

font-size:14px;

line-height:1.7;

}


/*==========================
RESPONSIVE
==========================*/

@media(max-width:992px){

.form-grid{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.form-page{

padding:120px 15px 60px;

}

.form-card{

padding:28px;

border-radius:18px;

}

.form-top h1{

font-size:32px;

}

.form-links{

flex-direction:column;

align-items:flex-start;

}

.success-popup{

left:15px;

right:15px;

bottom:20px;

width:auto;

}

}


@media(max-width:480px){

.form-card{

padding:22px;

}

.form-top h1{

font-size:28px;

}

.input-group input,
.input-group select{

height:52px;

font-size:14px;

}

textarea{

height:160px !important;

}

.form .btn{

height:52px;

}

}
/* ==========================================================
   PART 6
   DASHBOARD • PROFILE • ORDERS • BILLING • SUPPORT
==========================================================*/

/*==========================
COMMON DASHBOARD PAGE
==========================*/

.dashboard-page{

padding:140px 0 90px;

min-height:100vh;

background:var(--bg-black);

}


/*==========================
COMMON CARD
==========================*/

.dashboard-card,
.profile-card,
.orders-card,
.billing-card,
.support-card,
.detail-card,
.subscription-box,
.summary-card{

background:linear-gradient(180deg,#1d1d20,#17171a);

border:1px solid rgba(255,255,255,.08);

border-radius:20px;

box-shadow:0 20px 60px rgba(0,0,0,.35);

transition:.35s;

}

.dashboard-card:hover,
.profile-card:hover,
.orders-card:hover,
.billing-card:hover,
.support-card:hover,
.detail-card:hover,
.subscription-box:hover{

border-color:rgba(229,9,20,.20);

transform:translateY(-4px);

}


/*==========================
WELCOME
==========================*/

.dashboard-hero{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

margin-bottom:35px;

}

.welcome-card{

padding:45px;

}

.welcome-card h1{

font-size:42px;

font-weight:800;

margin-bottom:18px;

}

.welcome-card h1 span{

color:var(--primary-red);

}

.welcome-card p{

color:var(--text-muted);

line-height:1.9;

}

.welcome-buttons{

display:flex;

gap:15px;

margin-top:30px;

flex-wrap:wrap;

}


/*==========================
PROFILE
==========================*/

.profile-card{

padding:35px;

text-align:center;

}

.profile-card h3{

font-size:24px;

margin-bottom:8px;

}

.profile-card p{

color:var(--text-muted);

}

.status-active{

color:#22c55e;

font-weight:700;

}


/*==========================
STATS
==========================*/

.dashboard-stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-bottom:40px;

}

.dashboard-card{

padding:30px;

text-align:center;

}

.dashboard-card i{

font-size:34px;

color:var(--primary-red);

margin-bottom:15px;

}

.dashboard-card h4{

color:var(--text-muted);

font-size:15px;

margin-bottom:8px;

}

.dashboard-card h2{

font-size:32px;

}


/*==========================
DETAILS
==========================*/

.details-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:22px;

}

.detail-card{

padding:25px;

display:flex;

align-items:center;

gap:18px;

}

.detail-icon{

width:58px;
height:58px;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

background:rgba(229,9,20,.10);

color:var(--primary-red);

font-size:22px;

}

.detail-card h4{

margin-bottom:6px;

}

.detail-card p{

color:var(--text-muted);

}


/*==========================
SUBSCRIPTION
==========================*/

.subscription-box{

padding:35px;

margin-top:35px;

}

.subscription-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.subscription-info{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:20px;

}

.subscription-info div{

background:rgba(255,255,255,.03);

padding:20px;

border-radius:14px;

}

.subscription-info h5{

margin-bottom:8px;

font-size:14px;

color:var(--text-muted);

}


/*==========================
TABLES
==========================*/

.table-responsive{

overflow-x:auto;

}

.orders-table{

width:100%;

min-width:750px;

border-collapse:collapse;

}

.orders-table th{

background:rgba(255,255,255,.05);

font-size:14px;

}

.orders-table th,
.orders-table td{

padding:18px;

border-bottom:1px solid rgba(255,255,255,.08);

}

.orders-table tr:hover{

background:rgba(255,255,255,.02);

}


/*==========================
SUMMARY
==========================*/

.order-summary,
.billing-overview,
.subscription-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:22px;

margin-top:30px;

}

.summary-card,
.billing-box{

padding:25px;

text-align:center;

background:rgba(255,255,255,.03);

border-radius:14px;

}

.summary-card i,
.billing-box i{

font-size:42px;

color:var(--primary-red);

margin-bottom:15px;

}


/*==========================
PAYMENT METHODS
==========================*/

.payment-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:22px;

margin-top:35px;

}

.payment-card{

background:rgba(255,255,255,.03);

padding:28px;

border-radius:16px;

text-align:center;

transition:.35s;

}

.payment-card:hover{

transform:translateY(-5px);

border:1px solid rgba(229,9,20,.25);

}

.payment-card i{

font-size:42px;

margin-bottom:15px;

color:var(--primary-red);

}


/*==========================
SUPPORT
==========================*/

.support-form{

display:flex;

flex-direction:column;

gap:20px;

}

.support-form textarea{

min-height:180px;

resize:vertical;

}

.ticket-history{

margin-top:60px;

}


/*==========================
SECTION TITLE
==========================*/

.dashboard-section-title{

text-align:center;

margin:60px 0 35px;

}

.dashboard-section-title h2{

font-size:36px;

}

.dashboard-section-title span{

color:var(--primary-red);

}


/*==========================
RESPONSIVE
==========================*/

@media(max-width:1100px){

.dashboard-hero{

grid-template-columns:1fr;

}

.dashboard-stats{

grid-template-columns:repeat(2,1fr);

}

.details-grid{

grid-template-columns:1fr;

}

.subscription-info{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.dashboard-page{

padding:120px 0 70px;

}

.welcome-card{

padding:28px;

}

.welcome-card h1{

font-size:30px;

}

.dashboard-stats{

grid-template-columns:1fr;

}

.subscription-info{

grid-template-columns:1fr;

}

.welcome-buttons{

flex-direction:column;

}

.welcome-buttons .btn{

width:100%;

}

.profile-card,
.orders-card,
.billing-card,
.support-card{

padding:22px;

}

.dashboard-section-title h2{

font-size:28px;

}

}

@media(max-width:480px){

.dashboard-card{

padding:22px;

}

.dashboard-card h2{

font-size:28px;

}

.orders-table{

min-width:650px;

}

}
/* ==========================================================
   PART 7
   LEGAL • ABOUT • FAQ • DOWNLOADS • ERROR 404
==========================================================*/

/*==========================
COMMON PAGE HERO
==========================*/

.page-hero{

padding:150px 20px 90px;

text-align:center;

background:
linear-gradient(180deg,#09090b,#121214);

}

.page-hero h1{

font-size:48px;

font-weight:800;

margin-bottom:18px;

}

.page-hero h1 span{

color:var(--primary-red);

}

.page-hero p{

max-width:760px;

margin:auto;

line-height:1.9;

font-size:17px;

color:var(--text-muted);

}


/*==========================
LEGAL PAGES
==========================*/

.legal-section{

padding:90px 0;

}

.legal-content{

max-width:980px;

margin:auto;

background:linear-gradient(180deg,#1d1d20,#17171a);

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:50px;

box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.legal-content h2{

font-size:28px;

margin:45px 0 18px;

padding-left:18px;

border-left:4px solid var(--primary-red);

}

.legal-content h2:first-child{

margin-top:0;

}

.legal-content p{

color:var(--text-muted);

line-height:1.95;

margin-bottom:20px;

}

.legal-content ul{

margin:25px;

}

.legal-content li{

margin-bottom:14px;

line-height:1.8;

color:var(--text-muted);

}

.legal-content strong{

color:#fff;

}


/*==========================
FAQ
==========================*/

.faq-section{

padding:90px 0;

}

.faq-container{

max-width:900px;

margin:auto;

}

.faq-item{

background:#1b1b1f;

border:1px solid rgba(255,255,255,.08);

border-radius:16px;

margin-bottom:18px;

overflow:hidden;

transition:.35s;

}

.faq-item:hover{

border-color:rgba(229,9,20,.20);

}

.faq-question{

width:100%;

padding:24px;

background:none;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

font-size:17px;

font-weight:700;

color:#fff;

cursor:pointer;

}

.faq-question i{

transition:.35s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:.35s;

}

.faq-answer p{

padding:0 24px 24px;

line-height:1.8;

color:var(--text-muted);

}

.faq-item.active .faq-answer{

max-height:350px;

}

.faq-item.active i{

transform:rotate(180deg);

}


/*==========================
ABOUT
==========================*/

.about-section{

padding:90px 0;

}

.features-grid,
.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:45px;

}

.feature-card,
.stat-box{

background:#1b1b1f;

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

padding:35px;

text-align:center;

transition:.35s;

}

.feature-card:hover,
.stat-box:hover{

transform:translateY(-6px);

border-color:rgba(229,9,20,.25);

}

.feature-card i{

font-size:48px;

margin-bottom:18px;

color:var(--primary-red);

}

.feature-card h3{

margin-bottom:15px;

}

.feature-card p{

line-height:1.8;

color:var(--text-muted);

}

.stat-box h2{

font-size:42px;

margin-bottom:12px;

color:var(--primary-red);

}


/*==========================
DOWNLOADS
==========================*/

.downloads-section{

padding:90px 0;

}

.downloads-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(270px,1fr));

gap:25px;

}

.download-card{

background:#1b1b1f;

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

padding:35px;

text-align:center;

transition:.35s;

}

.download-card:hover{

transform:translateY(-6px);

border-color:rgba(229,9,20,.25);

}

.download-card i{

font-size:55px;

margin-bottom:20px;

color:var(--primary-red);

}

.download-card h3{

margin-bottom:12px;

}

.download-card p{

line-height:1.8;

margin-bottom:22px;

color:var(--text-muted);

}

.download-card .btn{

width:100%;

}


/*==========================
404 PAGE
==========================*/

.error-section{

padding:150px 20px 100px;

display:flex;

justify-content:center;

align-items:center;

min-height:80vh;

}

.error-box{

max-width:850px;

width:100%;

background:#1b1b1f;

border:1px solid rgba(255,255,255,.08);

border-radius:22px;

padding:60px;

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.error-box h1{

font-size:140px;

font-weight:900;

line-height:1;

color:var(--primary-red);

margin-bottom:15px;

}

.error-box h2{

font-size:34px;

margin-bottom:18px;

}

.error-box p{

max-width:650px;

margin:auto;

line-height:1.9;

color:var(--text-muted);

margin-bottom:35px;

}

.error-buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}


/*==========================
RESPONSIVE
==========================*/

@media(max-width:768px){

.page-hero{

padding:120px 20px 70px;

}

.page-hero h1{

font-size:34px;

}

.page-hero p{

font-size:15px;

}

.legal-content{

padding:28px;

}

.legal-content h2{

font-size:22px;

}

.error-box{

padding:35px 25px;

}

.error-box h1{

font-size:90px;

}

.error-box h2{

font-size:26px;

}

.error-buttons{

flex-direction:column;

}

.error-buttons .btn{

width:100%;

}

}

@media(max-width:480px){

.feature-card,
.stat-box,
.download-card{

padding:25px;

}

.error-box h1{

font-size:72px;

}

.page-hero h1{

font-size:28px;

}

}
/* ==========================================================
   PART 8
   FINAL PREMIUM POLISH
   FOOTER • MODALS • LOADER • SCROLL BUTTON
   ANIMATIONS • UTILITIES • MOBILE FIXES
==========================================================*/


/*==========================
FOOTER
==========================*/

.main-footer{

background:#050506;

border-top:1px solid rgba(255,255,255,.06);

padding:80px 0 0;

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

padding-bottom:50px;

}

.footer-brand p{

margin-top:20px;

color:var(--text-muted);

line-height:1.9;

max-width:420px;

}

.footer-contact h4,
.footer-legal h4{

margin-bottom:20px;

font-size:18px;

}

.footer-contact p{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

color:var(--text-muted);

}

.footer-contact i{

color:var(--primary-red);

}

.footer-legal ul{

list-style:none;

}

.footer-legal li{

margin-bottom:14px;

}

.footer-legal a{

color:var(--text-muted);

transition:.3s;

}

.footer-legal a:hover{

color:#fff;

padding-left:6px;

}

.footer-bottom{

border-top:1px solid rgba(255,255,255,.05);

padding:25px;

text-align:center;

font-size:14px;

color:#888;

}


/*==========================
MODAL
==========================*/

.modal{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.75);

backdrop-filter:blur(8px);

justify-content:center;

align-items:center;

padding:20px;

z-index:99999;

}

.modal-content{

background:#18191c;

width:100%;

max-width:750px;

padding:35px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

animation:popup .35s ease;

max-height:85vh;

overflow:auto;

}

@keyframes popup{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.close-btn{

position:absolute;

right:20px;

top:15px;

font-size:30px;

cursor:pointer;

color:#aaa;

}

.close-btn:hover{

color:#fff;

}


/*==========================
LOADER
==========================*/

.page-loader{

position:fixed;

inset:0;

background:#09090b;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.loader-circle{

width:70px;

height:70px;

border:5px solid rgba(255,255,255,.08);

border-top:5px solid var(--primary-red);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}


/*==========================
SCROLL BUTTON
==========================*/

.scroll-top{

position:fixed;

right:25px;

bottom:25px;

width:52px;

height:52px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:var(--primary-red);

color:#fff;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

box-shadow:0 10px 25px rgba(229,9,20,.35);

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

.scroll-top:hover{

transform:translateY(-5px);

}


/*==========================
GLOBAL ANIMATIONS
==========================*/

.fade-up{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:none;

}

}

.fade{

animation:fade .7s ease both;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}


/*==========================
HOVER EFFECT
==========================*/

.card-hover{

transition:.35s;

}

.card-hover:hover{

transform:translateY(-6px);

box-shadow:0 25px 60px rgba(0,0,0,.35);

}


/*==========================
UTILITY CLASSES
==========================*/

.text-center{

text-align:center;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mt-40{

margin-top:40px;

}

.mt-60{

margin-top:60px;

}

.mb-20{

margin-bottom:20px;

}

.mb-40{

margin-bottom:40px;

}

.w-100{

width:100%;

}

.hidden{

display:none!important;

}


/*==========================
IMAGE
==========================*/

img{

max-width:100%;

height:auto;

display:block;

}


/*==========================
FOCUS
==========================*/

button:focus,
input:focus,
textarea:focus,
select:focus{

outline:none;

}


/*==========================
SMOOTH
==========================*/

a,
button,
input,
textarea,
select{

transition:.3s;

}


/*==========================
MOBILE
==========================*/

@media(max-width:992px){

.footer-container{

grid-template-columns:1fr;

gap:40px;

}

}

@media(max-width:768px){

.footer-container{

text-align:center;

}

.footer-contact p{

justify-content:center;

}

.scroll-top{

right:15px;

bottom:15px;

width:46px;

height:46px;

font-size:18px;

}

.modal-content{

padding:25px;

}

}

@media(max-width:480px){

.footer-bottom{

font-size:13px;

}

.modal-content{

padding:20px;

}

}


/*==========================
PERFORMANCE
==========================*/

html{

scroll-behavior:smooth;

}

body{

overflow-x:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}

*{

-webkit-tap-highlight-color:transparent;

}
/*==========================
      PREMIUM FOOTER
==========================*/

.footer{
    background:linear-gradient(180deg,#111111,#050505);
    border-top:2px solid #d40000;
    padding:80px 0 0;
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(212,0,0,.18),transparent 70%);
    top:-220px;
    left:50%;
    transform:translateX(-50%);
    filter:blur(40px);
}

.footer-top{
    max-width:1300px;
    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:45px;
}

.footer-box h3{
    color:#fff;
    font-size:22px;
    margin-bottom:25px;
    position:relative;
}

.footer-box h3::after{
    content:"";
    width:55px;
    height:3px;
    background:#d40000;
    position:absolute;
    left:0;
    bottom:-10px;
}

.footer-logo{
    font-size:34px;
    font-weight:800;
    color:#fff;
}

.footer-logo span{
    color:#d40000;
}

.footer-box p{
    color:#bdbdbd;
    line-height:1.8;
    font-size:15px;
}

.footer-box ul{
    list-style:none;
    padding:0;
}

.footer-box ul li{
    margin:14px 0;
}

.footer-box ul li a{
    color:#c8c8c8;
    text-decoration:none;
    transition:.3s;
}

.footer-box ul li a:hover{
    color:#ff2b2b;
    padding-left:8px;
}

.footer-contact{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:16px;
    color:#d5d5d5;
}

.footer-contact i{
    color:#d40000;
    font-size:18px;
    width:22px;
}

.footer-social{
    display:flex;
    gap:14px;
    margin-top:20px;
}

.footer-social a{
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    background:#181818;
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    transition:.35s;
}

.footer-social a:hover{
    background:#d40000;
    color:#fff;
    transform:translateY(-5px);
    box-shadow:0 0 20px rgba(212,0,0,.45);
}

.footer-bottom{
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    padding:25px 0;
}

.footer-bottom p{
    color:#8f8f8f;
    font-size:14px;
}

.footer-bottom a{
    color:#ff2b2b;
    text-decoration:none;
}

.footer-bottom a:hover{
    color:#fff;
}

/*==========================
      Responsive
==========================*/

@media(max-width:768px){

.footer-top{
grid-template-columns:1fr;
gap:35px;
}

.footer-logo{
font-size:30px;
}

.footer{
padding-top:60px;
}

}
/*==============================
        CONTACT FORM
===============================*/

.form-wrapper{
    width:100%;
    max-width:750px;
    margin:80px auto;
    padding:45px;
    background:#111111;
    border:1px solid rgba(255,0,0,.20);
    border-radius:20px;
    box-shadow:0 0 35px rgba(255,0,0,.15);
    text-align:center;
}

.form-wrapper h3{
    font-size:38px;
    color:#ffffff;
    margin-bottom:10px;
    font-weight:700;
}

.form-wrapper h3 span{
    color:#d40000;
}

.form-wrapper p{
    color:#bfbfbf;
    margin-bottom:35px;
    line-height:1.7;
}

.web3-form-element{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.input-group{
    text-align:left;
}

.input-group label{
    display:block;
    margin-bottom:8px;
    color:#ffffff;
    font-weight:600;
    font-size:15px;
}

.input-group input,
.input-group textarea{
    width:100%;
    padding:16px 18px;
    background:#1b1b1b;
    border:1px solid #333;
    border-radius:12px;
    color:#fff;
    font-size:15px;
    outline:none;
    transition:.3s;
    box-sizing:border-box;
}

.input-group input::placeholder,
.input-group textarea::placeholder{
    color:#888;
}

.input-group input:focus,
.input-group textarea:focus{
    border-color:#d40000;
    box-shadow:0 0 15px rgba(212,0,0,.30);
}

.input-group textarea{
    resize:vertical;
    min-height:150px;
}

.form-submit-btn{
    width:100%;
    padding:16px;
    background:linear-gradient(135deg,#d40000,#8b0000);
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:17px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.form-submit-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 25px rgba(212,0,0,.45);
}

.form-submit-btn:active{
    transform:scale(.98);
}

/*==============================
        MOBILE
===============================*/

@media(max-width:768px){

.form-wrapper{
    width:92%;
    padding:30px 20px;
    margin:60px auto;
}

.form-wrapper h3{
    font-size:30px;
}

.form-wrapper p{
    font-size:14px;
}

.input-group input,
.input-group textarea{
    padding:14px;
}

.form-submit-btn{
    padding:15px;
}

}
.footer{
    z-index:9999;
}

.footer-top{
    position:relative;
    z-index:9999;
}

.footer-box{
    position:relative;
    z-index:9999;
}

.footer-box ul li a{
    display:inline-block;
    position:relative;
    z-index:99999;
    pointer-events:auto;
}
/*==========================
      TRIAL PAGE
==========================*/

.trial-page{
    min-height:100vh;
    padding:130px 20px 80px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0b0b0b;
}

.trial-page .container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
}

.trial-card{
    width:100%;
    max-width:720px;
    background:#141414;
    border:2px solid #d40000;
    border-radius:20px;
    padding:50px;
    box-shadow:0 0 35px rgba(212,0,0,.25);
}

.trial-header{
    text-align:center;
    margin-bottom:40px;
}

.trial-header .badge-premium{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#d40000;
    color:#fff;
    padding:10px 24px;
    border-radius:40px;
    font-size:14px;
    font-weight:700;
    margin-bottom:25px;
}

.trial-header h1{
    color:#fff;
    font-size:42px;
    font-weight:800;
    margin-bottom:18px;
}

.trial-header p{
    color:#bdbdbd;
    font-size:17px;
    line-height:1.8;
    max-width:600px;
    margin:0 auto;
}

/*==========================
      TRIAL FORM
==========================*/

.trial-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.input-group{
    display:flex;
    flex-direction:column;
}

.input-group label{
    color:#fff;
    font-size:15px;
    font-weight:600;
    margin-bottom:8px;
}

.input-group input{
    width:100%;
    padding:16px 18px;
    background:#1a1a1a;
    border:1px solid #333;
    border-radius:12px;
    color:#fff;
    font-size:15px;
    font-family:'Poppins',sans-serif;
    transition:.3s;
    outline:none;
    box-sizing:border-box;
}

.input-group input::placeholder{
    color:#888;
}

.input-group input:focus{
    border-color:#d40000;
    box-shadow:0 0 20px rgba(212,0,0,.35);
}

.trial-form .btn-primary{
    width:100%;
    padding:17px;
    margin-top:10px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#d40000,#8b0000);
    color:#fff;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.trial-form .btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 0 25px rgba(212,0,0,.45);
}

/*==========================
      MOBILE
==========================*/

@media(max-width:768px){

.trial-page{
    padding:110px 15px 50px;
}

.trial-card{
    padding:30px 20px;
}

.trial-header h1{
    font-size:30px;
}

.trial-header p{
    font-size:15px;
}

}
/*=========================
   DEVICE TABS
=========================*/

.device-menu-section{
    padding:40px 20px;
}

.device-grid{
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.device-tab{
    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:28px 15px;
    cursor:pointer;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:15px;

    color:#fff;

    transition:.35s;
}

.device-tab i{
    font-size:42px;
    color:#d40000;
}

.device-tab span{
    font-size:17px;
    font-weight:600;
    text-align:center;
    line-height:1.4;
}

.device-tab:hover{
    transform:translateY(-8px);
    border-color:#d40000;
    box-shadow:0 0 25px rgba(212,0,0,.35);
}

.device-tab.active{
    background:linear-gradient(135deg,#d40000,#8b0000);
    border-color:#d40000;
}

.device-tab.active i,
.device-tab.active span{
    color:#fff;
}

/*=========================
 GUIDE BOX
=========================*/

#guideViewer{
    max-width:900px;
    margin:40px auto 0;
    background:#151515;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:40px;
    color:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,.5);
}

#guideViewer h3{
    margin-bottom:18px;
    font-size:30px;
}

#guideViewer p{
    color:#bdbdbd;
    line-height:1.8;
}

/*=========================
 MOBILE
=========================*/

@media(max-width:992px){

.device-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.device-grid{
grid-template-columns:1fr;
}

.device-tab{
padding:22px;
}

.device-tab i{
font-size:36px;
}

.device-tab span{
font-size:16px;
}

#guideViewer{
padding:25px;
}

}
/* ===========================
   DOWNLOAD PAGE HERO CENTER
=========================== */

.legal-hero{
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 140px 20px 80px;
}

.legal-hero .container{
    max-width: 900px;
    margin: 0 auto;
}

.legal-hero .badge-premium{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 25px;
}

.legal-hero h1{
    font-size: clamp(42px,6vw,72px);
    line-height: 1.1;
    margin-bottom: 20px;
}

.legal-hero p{
    max-width: 700px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.8;
    color: rgba(255,255,255,.8);
}
/* ===========================
   SIGN IN PAGE
=========================== */

.signin-page{
    padding:160px 20px 100px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.signin-box{
    width:100%;
    max-width:560px;
    margin:auto;
    background:#161616;
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:45px;
    box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.signin-top{
    text-align:center;
    margin-bottom:35px;
}

.signin-top h1{
    font-size:46px;
    font-weight:800;
    color:#fff;
    margin:20px 0 12px;
}

.signin-top p{
    color:#bdbdbd;
    line-height:1.7;
    font-size:15px;
}

.signin-form{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.input-group{
    display:flex;
    flex-direction:column;
}

.input-group label{
    color:#fff;
    font-weight:600;
    margin-bottom:10px;
}

.input-group input{
    width:100%;
    height:58px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.08);
    background:#0f0f0f;
    color:#fff;
    padding:0 18px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.input-group input:focus{
    border-color:#ff5b00;
    box-shadow:0 0 15px rgba(255,91,0,.3);
}

.password-box{
    position:relative;
}

.password-box input{
    padding-right:60px;
}

.password-toggle{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:none;
    color:#bbb;
    cursor:pointer;
    font-size:18px;
}

.password-toggle:hover{
    color:#ff5b00;
}

.signin-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#ccc;
    font-size:14px;
}

.remember-me{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.forgot-link{
    color:#ff5b00;
    text-decoration:none;
    font-weight:600;
}

.forgot-link:hover{
    color:#ff7d2d;
}

.signin-btn,
.create-account-btn{
    width:100%;
    height:58px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:14px;
    font-weight:700;
    font-size:16px;
}

.signin-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#888;
    font-weight:600;
    position:relative;
}

.signin-divider::before,
.signin-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:rgba(255,255,255,.08);
}

.signin-divider span{
    padding:0 16px;
}

.create-account-btn{
    background:transparent;
    border:2px solid #ff5b00;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}

.create-account-btn:hover{
    background:#ff5b00;
    color:#fff;
}

/* Mobile */

@media(max-width:768px){

.signin-page{
    padding:130px 15px 70px;
}

.signin-box{
    padding:30px 22px;
}

.signin-top h1{
    font-size:34px;
}

.signin-options{
    flex-direction:column;
    gap:15px;
}

}
/* ===========================
   SUPPORT PAGE
=========================== */

.support-section{
    padding:80px 20px;
}

.support-card{
    max-width:1100px;
    margin:auto;
    background:#141414;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:40px;
    box-shadow:0 15px 45px rgba(0,0,0,.35);
}

.support-card h2{
    color:#fff;
    font-size:30px;
    margin-bottom:25px;
}

.support-card h2 i{
    color:#ff4d00;
    margin-right:10px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:20px;
}

.form-group{
    display:flex;
    flex-direction:column;
    margin-bottom:20px;
}

.form-group label{
    color:#fff;
    margin-bottom:8px;
    font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    background:#1e1e1e;
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    border-radius:12px;
    padding:15px;
    font-size:15px;
    transition:.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#ff4d00;
    outline:none;
    box-shadow:0 0 0 3px rgba(255,77,0,.15);
}

.form-group textarea{
    resize:vertical;
}

.support-form .btn-primary{
    width:100%;
    margin-top:10px;
    padding:15px;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:700;
}

/* Ticket History */

.ticket-history{
    margin-top:60px;
}

.table-responsive{
    overflow-x:auto;
}

.orders-table{
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}

.orders-table th{
    background:#ff4d00;
    color:#fff;
    padding:16px;
    text-align:left;
}

.orders-table td{
    padding:16px;
    background:#1b1b1b;
    border-bottom:1px solid rgba(255,255,255,.05);
    color:#ddd;
}

.orders-table tr:hover td{
    background:#222;
}

.status-active{
    color:#00d26a;
    font-weight:700;
}

.status-expired{
    color:#ff4444;
    font-weight:700;
}

/* Support Options */

.support-options{
    margin-top:60px;
}

.payment-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.payment-card{
    background:#1a1a1a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    text-align:center;
    padding:35px 25px;
    transition:.35s;
}

.payment-card:hover{
    transform:translateY(-8px);
    border-color:#ff4d00;
    box-shadow:0 15px 35px rgba(255,77,0,.2);
}

.payment-card i{
    font-size:45px;
    color:#ff4d00;
    margin-bottom:15px;
}

.payment-card h3{
    color:#fff;
    margin-bottom:10px;
}

.payment-card p{
    color:#bdbdbd;
    margin-bottom:20px;
    line-height:1.6;
}

.btn-card{
    display:inline-block;
    padding:12px 28px;
    background:#ff4d00;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    font-weight:600;
    transition:.3s;
}

.btn-card:hover{
    background:#ff6a00;
}

/* Responsive */

@media(max-width:992px){

.payment-grid{
grid-template-columns:1fr;
}

.form-grid{
grid-template-columns:1fr;
}

.support-card{
padding:25px;
}

}

@media(max-width:600px){

.support-card h2{
font-size:24px;
}

.orders-table th,
.orders-table td{
padding:12px;
font-size:13px;
}

.payment-card{
padding:25px 20px;
}

}
/* ================= PROFILE PAGE ================= */

.profile-section{
    padding:80px 20px;
}

.profile-card{
    max-width:1100px;
    margin:0 auto;
    background:#161616;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:45px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

/* Top */

.profile-avatar i{
    display:block;
    width:100px;
    height:100px;
    line-height:100px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#ff4d00;
    color:#fff;
    font-size:40px;
}

/* Form */

.profile-form{
    width:100%;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.form-group label{
    color:#fff;
    font-weight:600;
    margin-bottom:8px;
}

.form-group input{
    width:100%;
    padding:15px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:#222;
    color:#fff;
    font-size:15px;
    transition:.3s;
}

.form-group input:focus{
    outline:none;
    border-color:#ff3b30;
}

/* Subscription */

.subscription-box{
    margin-top:45px;
    background:#1d1d1d;
    border-radius:16px;
    padding:30px;
}

.subscription-box h3{
    color:#fff;
    margin-bottom:25px;
}

.subscription-box h3 i{
    color:#ff3b30;
}

.subscription-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.subscription-grid div{
    background:#252525;
    padding:20px;
    border-radius:12px;
    text-align:center;
}

.subscription-grid strong{
    display:block;
    color:#fff;
    margin-bottom:8px;
}

.subscription-grid p{
    color:#cfcfcf;
}

.status-active{
    color:#00d26a !important;
    font-weight:700;
}

/* Buttons */

.profile-actions{
    margin-top:40px;
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.profile-actions .btn{
    padding:14px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
}

.profile-actions .btn-primary{
    background:#ff3b30;
    color:#fff;
}

.profile-actions .btn-secondary{
    background:#2c2c2c;
    color:#fff;
}

.profile-actions .btn-card{
    background:#111;
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
}

.profile-actions .btn:hover{
    transform:translateY(-3px);
}

/* Mobile */

@media(max-width:900px){

.profile-card{
padding:30px;
}

.form-grid{
grid-template-columns:1fr;
}

.subscription-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.profile-avatar h2{
font-size:28px;
}

.subscription-grid{
grid-template-columns:1fr;
}

.profile-actions{
flex-direction:column;
}

.profile-actions .btn{
width:100%;
text-align:center;
}

}
/* =========================
   MY ORDERS PAGE
========================= */

.orders-section{
    padding:80px 0;
    background:#111;
}

.orders-card{
    background:#1a1a1a;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:35px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.orders-card h2{
    color:#fff;
    text-align:center;
    margin-bottom:30px;
    font-size:30px;
}

.orders-card h2 i{
    color:#ff4d2d;
    margin-right:10px;
}

.table-responsive{
    width:100%;
    overflow-x:auto;
}

.orders-table{
    width:100%;
    border-collapse:collapse;
}

.orders-table thead{
    background:#ff4d2d;
}

.orders-table th{
    padding:16px;
    color:#fff;
    text-align:left;
    font-size:15px;
}

.orders-table td{
    padding:16px;
    color:#ddd;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.orders-table tbody tr{
    transition:.3s;
}

.orders-table tbody tr:hover{
    background:#222;
}

.status-active{
    display:inline-block;
    background:#1db954;
    color:#fff;
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

.status-expired{
    display:inline-block;
    background:#e53935;
    color:#fff;
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
}

/* Summary */

.order-summary{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-top:40px;
}

.summary-card{
    background:#222;
    border-radius:16px;
    padding:30px 20px;
    text-align:center;
    transition:.3s;
    border:1px solid rgba(255,255,255,.08);
}

.summary-card:hover{
    transform:translateY(-8px);
    border-color:#ff4d2d;
}

.summary-card i{
    font-size:38px;
    color:#ff4d2d;
    margin-bottom:15px;
}

.summary-card h3{
    color:#fff;
    font-size:34px;
    margin-bottom:8px;
}

.summary-card p{
    color:#bbb;
}

/* Renew Box */

.renew-box{
    margin-top:50px;
    text-align:center;
    background:linear-gradient(135deg,#ff4d2d,#ff7a18);
    border-radius:18px;
    padding:45px 30px;
}

.renew-box h2{
    color:#fff;
    margin-bottom:15px;
    font-size:30px;
}

.renew-box p{
    color:#fff;
    max-width:750px;
    margin:0 auto 25px;
    line-height:1.8;
}

.renew-box .btn{
    background:#fff;
    color:#ff4d2d;
    font-weight:700;
    padding:14px 30px;
    border-radius:50px;
    text-decoration:none;
    transition:.3s;
}

.renew-box .btn:hover{
    background:#111;
    color:#fff;
}

/* Mobile */

@media(max-width:768px){

.orders-card{
padding:20px;
}

.orders-card h2{
font-size:24px;
}

.orders-table th,
.orders-table td{
padding:12px;
font-size:14px;
}

.summary-card{
padding:22px 15px;
}

.summary-card h3{
font-size:28px;
}

.renew-box{
padding:30px 20px;
}

.renew-box h2{
font-size:24px;
}

}
/* =========================
   DASHBOARD PAGE
========================= */

.dashboard-page{
    padding:120px 0 60px;
    background:#0b0b0d;
}

.dashboard-hero{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    margin-bottom:40px;
}

.welcome-card,
.profile-card,
.dashboard-card,
.subscription-box,
.order-card,
.trial-card,
.quick-card,
.support-card,
.detail-card{
    background:#171717;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    padding:25px;
    transition:.35s;
}

.welcome-card:hover,
.profile-card:hover,
.dashboard-card:hover,
.detail-card:hover,
.order-card:hover,
.trial-card:hover,
.quick-card:hover,
.support-card:hover{
    transform:translateY(-5px);
    border-color:#ff6a00;
    box-shadow:0 15px 40px rgba(255,106,0,.18);
}

.welcome-card h1{
    font-size:42px;
    color:#fff;
    margin:18px 0;
    line-height:1.2;
}

.welcome-card h1 span{
    color:#ff6a00;
}

.welcome-card p{
    color:#bdbdbd;
    line-height:1.8;
}

.welcome-buttons{
    display:flex;
    gap:15px;
    margin-top:25px;
    flex-wrap:wrap;
}

.profile-card{
    text-align:center;
}


.profile-card h3{
    color:#fff;
    margin-bottom:5px;
}

.profile-card p{
    color:#bfbfbf;
}

.profile-status{
    margin-top:20px;
}

.dashboard-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.dashboard-card{
    text-align:center;
}

.dashboard-card i{
    font-size:34px;
    color:#ff6a00;
    margin-bottom:15px;
}

.dashboard-card h4{
    color:#ccc;
    margin-bottom:8px;
}

.dashboard-card h2{
    color:#fff;
    font-size:28px;
}

.dashboard-card p{
    color:#9e9e9e;
}

.account-details{
    padding:60px 0;
    background:#101010;
}

.dashboard-section-title{
    text-align:center;
    margin-bottom:40px;
}

.dashboard-section-title h2{
    font-size:36px;
    color:#fff;
}

.dashboard-section-title span{
    color:#ff6a00;
}

.dashboard-section-title p{
    color:#b8b8b8;
    margin-top:10px;
}

.details-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:40px;
}

.detail-card{
    display:flex;
    gap:18px;
    align-items:center;
}

.detail-icon{
    width:60px;
    height:60px;
    background:#ff6a00;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
}

.detail-card h4{
    color:#fff;
    margin-bottom:6px;
}

.detail-card p{
    color:#bdbdbd;
}

.online{
    color:#00ff73 !important;
    font-weight:700;
}

.subscription-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.subscription-header h2{
    color:#fff;
}

.subscription-info{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.subscription-info h4{
    color:#ff6a00;
    margin-bottom:6px;
}

.subscription-info p{
    color:#fff;
}

.dashboard-actions{
    padding:60px 0;
    background:#0b0b0d;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.card-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.card-title i{
    color:#ff6a00;
    font-size:22px;
}

.card-title h3{
    color:#fff;
}

.order-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:18px 0;
}

.order-item:last-child{
    border-bottom:none;
}

.order-item h4{
    color:#fff;
}

.order-item p{
    color:#aaa;
}

.order-status{
    background:#00c853;
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    font-weight:700;
}

.order-status.trial{
    background:#ff6a00;
}

.view-btn{
    display:inline-block;
    margin-top:20px;
    color:#ff6a00;
    text-decoration:none;
    font-weight:700;
}

.trial-content{
    text-align:center;
}

.trial-content h2{
    font-size:48px;
    color:#ff6a00;
}

.progress-bar{
    width:100%;
    height:10px;
    background:#2b2b2b;
    border-radius:20px;
    overflow:hidden;
    margin:20px 0;
}

.progress-fill{
    width:70%;
    height:100%;
    background:linear-gradient(90deg,#ff6a00,#ffb347);
}

.quick-buttons{
    display:grid;
    gap:15px;
}

.quick-buttons a{
    background:#202020;
    color:#fff;
    text-decoration:none;
    padding:14px;
    border-radius:10px;
    transition:.3s;
}

.quick-buttons a:hover{
    background:#ff6a00;
}

.quick-buttons i{
    margin-right:10px;
}

.support-card p{
    color:#bdbdbd;
    margin:20px 0;
    line-height:1.8;
}

.success-popup{
    position:fixed;
    top:30px;
    right:30px;
    background:#171717;
    color:#fff;
    border-left:5px solid #00c853;
    padding:20px;
    border-radius:12px;
    transform:translateX(400px);
    transition:.4s;
    z-index:9999;
}

.show-popup{
    transform:translateX(0);
}

.success-popup i{
    color:#00c853;
    font-size:35px;
    margin-bottom:10px;
}

@media(max-width:991px){

.dashboard-hero,
.details-grid,
.subscription-info,
.dashboard-grid,
.dashboard-stats{
grid-template-columns:1fr;
}

.welcome-card h1{
font-size:30px;
}

.subscription-header{
flex-direction:column;
gap:15px;
text-align:center;
}

}
.auth-footer{
    background:#111;
    border-top:1px solid rgba(255,255,255,.08);
    padding:35px 20px;
    text-align:center;
}

.auth-footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
    margin-bottom:18px;
}

.auth-footer-links a{
    color:#bdbdbd;
    text-decoration:none;
    transition:.3s;
}

.auth-footer-links a:hover{
    color:#ff6b00;
}

.auth-footer-contact{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
    margin-bottom:18px;
}

.auth-footer-contact a{
    color:#fff;
    text-decoration:none;
}

.auth-footer-contact i{
    color:#ff6b00;
    margin-right:8px;
}

.auth-copy{
    color:#888;
    font-size:14px;
}

@media(max-width:768px){

.auth-footer-links,
.auth-footer-contact{
    flex-direction:column;
    gap:12px;
}

}
/*==============================
 PREMIUM CUSTOMER FOOTER
===============================*/

.portal-footer{
background:#0f0f11;
margin-top:80px;
border-top:2px solid #ff6a00;
}

.portal-top{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:45px;
padding:60px 0;
}

.portal-brand h2{
font-size:34px;
color:#fff;
margin-bottom:18px;
}

.portal-brand span{
color:#ff6a00;
}

.portal-brand p{
color:#bdbdbd;
line-height:1.8;
margin-bottom:25px;
max-width:500px;
}

.portal-contact{
display:flex;
flex-direction:column;
gap:15px;
}

.portal-contact a{
color:#fff;
text-decoration:none;
font-weight:500;
transition:.3s;
}

.portal-contact a:hover{
color:#ff6a00;
}

.portal-contact i{
width:28px;
color:#ff6a00;
}

.portal-links h3,
.portal-help h3{
color:#fff;
margin-bottom:20px;
}

.portal-links{
display:flex;
flex-direction:column;
gap:15px;
}

.portal-links a{
color:#bdbdbd;
text-decoration:none;
transition:.3s;
}

.portal-links a:hover{
color:#ff6a00;
padding-left:8px;
}

.portal-help{
display:flex;
flex-direction:column;
gap:15px;
}

.home-btn,
.portal-btn{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:14px;
border-radius:10px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.home-btn{
background:#ff6a00;
color:#fff;
}

.home-btn:hover{
background:#ff8a33;
transform:translateY(-3px);
}

.portal-btn{
background:#1c1c1c;
color:#fff;
border:1px solid rgba(255,255,255,.08);
}

.portal-btn:hover{
background:#ff6a00;
}

.portal-bottom{
border-top:1px solid rgba(255,255,255,.08);
padding:22px 0;
text-align:center;
}

.portal-bottom p{
color:#9a9a9a;
font-size:14px;
}

@media(max-width:991px){

.portal-top{
grid-template-columns:1fr;
text-align:center;
}

.portal-brand p{
margin:auto auto 25px;
}

.portal-contact{
align-items:center;
}

}
/* ===== Mobile Footer ===== */
@media (max-width:768px){

.footer-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:35px;
}

.footer-box{
    width:100%;
    max-width:350px;
    text-align:center;
}

.footer-box ul{
    padding:0;
    margin:15px 0 0;
    list-style:none;
}

.footer-box ul li{
    margin:10px 0;
}

.footer-social{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:20px;
}

.footer-bottom{
    text-align:center;
    padding:20px;
}

.footer-logo{
    justify-content:center;
}

}
/* --- BADGE OVERFLOW & MARGIN FIX --- */

/* 1. Grid ke uper thori space dein taakay badges cut na hon */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px 25px;
    margin-top: 3.5rem !important; /* Extra space for top badges */
}

/* 2. Overflow hidden ko remove karein taakay top-badge nazar aaye */
.pricing-card {
    overflow: visible !important; /* Badges ko katne se rokega */
    position: relative;
}

/* 3. Badges ki positioning ko adjust karein */
.badge-popular, 
.badge-best, 
.badge-deal, 
.badge-mega, 
.badge-dhamaka {
    position: absolute;
    top: -15px;
    right: 15px;
    z-index: 10;
    font-weight: 700;
    font-size: 11px;
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Modern floating shadow */
}