/*======================================================
  PALCHAT LANDING PAGE
  STYLE.CSS
======================================================*/

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

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

:root{

    --primary:#ff6b2c;
    --primary-dark:#ea5a1e;

    --green:#22c55e;

    --blue:#2563eb;

    --pink:#ff5fa2;

    --black:#111111;

    --text:#4b5563;

    --white:#ffffff;

    --bg:#fafafa;

    --border:#ececec;

    --shadow:0 15px 45px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.35s ease;

    --container:1200px;

}


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

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:linear-gradient(
180deg,
#fff 0%,
#fff9f6 35%,
#fff4fb 70%,
#ffffff 100%
);

color:var(--black);

overflow-x:hidden;

line-height:1.7;

}

img{
max-width:100%;
display:block;
}

ul{
list-style:none;
}

a{
text-decoration:none;
color:inherit;
}

.container{

width:min(92%,var(--container));

margin:auto;

}


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

h1,h2,h3,h4{

font-family:'Plus Jakarta Sans',sans-serif;

font-weight:800;

color:var(--black);

}

p{

color:var(--text);

}


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

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

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

backdrop-filter:blur(18px);

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

z-index:9999;

transition:var(--transition);

}

.navbar .container{

height:88px;

display:flex;

justify-content:space-between;

align-items:center;

}

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

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:30px;

font-weight:800;

}

.logo-icon{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

}

.logo-icon img{

width:100%;

height:100%;

object-fit:contain;

display:block;

}
.black{

color:var(--black);

}

.orange{

color:var(--primary);

}


/*=============================
MENU
==============================*/

.nav-links{

display:flex;

align-items:center;

gap:35px;

list-style:none;

margin:0;

padding:0;

}

.nav-links li a{

text-decoration:none;

font-weight:600;

color:var(--black);

transition:.3s;

}

.nav-links li a:hover{

color:var(--primary);

}

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

.nav-buttons{

display:flex;

align-items:center;

gap:18px;

}

.login-btn{

font-weight:700;

}

.register-btn{

padding:15px 28px;

border-radius:60px;

background:linear-gradient(
135deg,
var(--primary),
#ff944d
);

color:#fff;

font-weight:700;

transition:var(--transition);

box-shadow:0 12px 25px rgba(255,107,44,.35);

}

.register-btn:hover{

transform:translateY(-4px);

}


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

.hero{

padding-top:170px;

padding-bottom:110px;

}

.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:60px;

}


/*=============================
LEFT SIDE
==============================*/

.mini-title{

display:inline-block;

padding:10px 18px;

border-radius:50px;

background:#fff;

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

font-size:13px;

font-weight:700;

margin-bottom:25px;

box-shadow:var(--shadow);

color:var(--primary);

}

.hero-left h1{

font-size:65px;

line-height:1.08;

margin-bottom:28px;

}

.hero-left h1 span{

color:var(--primary);

display:block;

}

.hero-left p{

font-size:19px;

margin-bottom:40px;

max-width:640px;

}


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

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:35px;

}

.primary-btn{

padding:18px 36px;

background:linear-gradient(
135deg,
var(--primary),
#ff944d
);

color:#fff;

font-weight:700;

border-radius:60px;

box-shadow:0 15px 35px rgba(255,107,44,.35);

transition:var(--transition);

}

.primary-btn:hover{

transform:translateY(-5px);

}

.secondary-btn{

padding:18px 36px;

background:#fff;

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

border-radius:60px;

font-weight:700;

transition:var(--transition);

}

.secondary-btn:hover{

background:var(--black);

color:#fff;

}


/*=============================
RATING
==============================*/

.hero-rating{

font-size:15px;

font-weight:600;

color:#666;

}


/*=============================
RIGHT SIDE
==============================*/

.hero-right{

display:flex;

justify-content:center;

}

.hero-dashboard{

position:relative;

width:100%;

display:flex;

justify-content:center;

align-items:center;

animation:floatDashboard 6s ease-in-out infinite;

}

.hero-dashboard img{

width:100%;

max-width:650px;

height:auto;

display:block;

filter:drop-shadow(0 35px 70px rgba(0,0,0,.18));

}

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

section{

position:relative;

}


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

::selection{

background:var(--primary);

color:#fff;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#efefef;

}
/*==========================================
SCROLL ANIMATION
==========================================*/

.hidden{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.show{

opacity:1;

transform:translateY(0);

}


/*==========================================
RIPPLE EFFECT
==========================================*/

.primary-btn,
.secondary-btn,
.register-btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

width:20px;

height:20px;

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

border-radius:50%;

transform:translate(-50%,-50%);

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

from{

opacity:1;

transform:translate(-50%,-50%) scale(0);

}

to{

opacity:0;

transform:translate(-50%,-50%) scale(14);

}

}
@keyframes floatDashboard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0px);

}

}
/*======================================================
TRUSTED STATISTICS
======================================================*/

.stats{

padding:110px 0;

position:relative;

overflow:hidden;

}


/* Background Glow */

.stats::before{

content:"";

position:absolute;

width:420px;

height:420px;

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

border-radius:50%;

top:-180px;

right:-120px;

filter:blur(60px);

}

.stats::after{

content:"";

position:absolute;

width:320px;

height:320px;

background:rgba(37,99,235,.07);

border-radius:50%;

left:-100px;

bottom:-120px;

filter:blur(60px);

}


/*==========================
SECTION HEADING
==========================*/

.section-heading{

text-align:center;

margin-bottom:70px;

max-width:760px;

margin-left:auto;

margin-right:auto;

}

.section-heading h2{

font-size:48px;

margin-bottom:18px;

line-height:1.2;

}

.section-heading p{

font-size:18px;

color:var(--text);

}


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

.stats-grid{

display:grid;

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

gap:25px;

}


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

.stat-card{

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

backdrop-filter:blur(16px);

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

border-radius:26px;

padding:38px 25px;

text-align:center;

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:.35s ease;

position:relative;

overflow:hidden;

}


/* Orange line */

.stat-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--primary),
#ff9d57
);

}


.stat-card:hover{

transform:translateY(-10px);

box-shadow:0 35px 70px rgba(0,0,0,.10);

}


/*==========================
ICON
==========================*/

.stat-icon{

width:74px;

height:74px;

margin:auto;

margin-bottom:25px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--primary),
#ff9349
);

color:#fff;

font-size:30px;

box-shadow:0 18px 35px rgba(255,107,44,.28);

}


.money{

background:linear-gradient(
135deg,
#22c55e,
#4ade80
);

}

.globe{

background:linear-gradient(
135deg,
#2563eb,
#60a5fa
);

}

.time{

background:linear-gradient(
135deg,
#ff5fa2,
#ff8ab9
);

}


/*==========================
NUMBER
==========================*/

.stat-card h3{

font-size:38px;

font-family:'Plus Jakarta Sans';

margin-bottom:10px;

font-weight:800;

color:var(--black);

line-height:1.1;

word-break:break-word;

}


.stat-card span{

display:block;

font-size:16px;

font-weight:600;

color:#666;

}


/*==========================
SUBTLE GLOW
==========================*/

.stat-card::after{

content:"";

position:absolute;

width:140px;

height:140px;

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

border-radius:50%;

right:-50px;

top:-50px;

filter:blur(12px);

pointer-events:none;

}
/*======================================================
WAYS TO EARN
======================================================*/

.earn{

padding:120px 0;

position:relative;

overflow:hidden;

}


/* Background Glow */

.earn::before{

content:"";

position:absolute;

width:420px;

height:420px;

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

left:-120px;

top:120px;

border-radius:50%;

filter:blur(70px);

}

.earn::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:rgba(37,99,235,.06);

right:-120px;

bottom:-120px;

border-radius:50%;

filter:blur(70px);

}


/* Grid */

.earn-grid{

display:grid;

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

gap:28px;

}


/* Card */

.earn-card{

position:relative;

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

backdrop-filter:blur(14px);

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

border-radius:28px;

padding:35px 25px;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.06);

transition:.35s ease;

overflow:hidden;

}


/* Top Border */

.earn-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--primary),
#ff9349
);

}


/* Shine */

.earn-card::after{

content:"";

position:absolute;

width:180px;

height:180px;

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

border-radius:50%;

top:-70px;

right:-70px;

filter:blur(12px);

}


/* Hover */

.earn-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(0,0,0,.12);

}


/* Icon */

.earn-card i{

width:78px;

height:78px;

display:flex;

align-items:center;

justify-content:center;

margin:auto;

margin-bottom:24px;

border-radius:24px;

font-size:34px;

color:#fff;

background:linear-gradient(
135deg,
var(--primary),
#ff944d
);

box-shadow:0 15px 30px rgba(255,107,44,.30);

}


/* Alternate Colors */

.earn-card:nth-child(2) i{

background:linear-gradient(
135deg,
#111111,
#444
);

}

.earn-card:nth-child(3) i{

background:linear-gradient(
135deg,
#ff0000,
#ff4d4d
);

}

.earn-card:nth-child(4) i{

background:linear-gradient(
135deg,
#2563eb,
#60a5fa
);

}

.earn-card:nth-child(5) i{

background:linear-gradient(
135deg,
#8b5cf6,
#c084fc
);

}

.earn-card:nth-child(6) i{

background:linear-gradient(
135deg,
#ff5fa2,
#ff88bb
);

}

.earn-card:nth-child(7) i{

background:linear-gradient(
135deg,
#25d366,
#5be584
);

}

.earn-card:nth-child(8) i{

background:linear-gradient(
135deg,
#22c55e,
#4ade80
);

}

.earn-card:nth-child(9) i{

background:linear-gradient(
135deg,
#2563eb,
#4f8cff
);

}

.earn-card:nth-child(10) i{

background:linear-gradient(
135deg,
#ff8a00,
#ffc04d
);

}

.earn-card:nth-child(11) i{

background:linear-gradient(
135deg,
#14b8a6,
#5eead4
);

}

.earn-card:nth-child(12) i{

background:linear-gradient(
135deg,
#f59e0b,
#ffd166
);

}


/* Heading */

.earn-card h3{

font-size:23px;

margin-bottom:12px;

font-family:'Plus Jakarta Sans';

}


/* Paragraph */

.earn-card p{

font-size:15px;

line-height:1.7;

margin-bottom:20px;

}


/* Earn Daily Badge */

.earn-card span{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:#fff5ef;

color:var(--primary);

font-size:13px;

font-weight:700;

}
/*==========================
CARD FOOTER
==========================*/

.earn-footer{

margin-top:20px;

display:flex;

flex-direction:column;

gap:15px;

align-items:center;

}

.earn-badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:#fff5ef;

color:var(--primary);

font-size:13px;

font-weight:700;

}

.earn-btn{

display:inline-flex;

align-items:center;

justify-content:center;

width:100%;

padding:14px 18px;

border-radius:50px;

background:linear-gradient(
135deg,
var(--primary),
#ff944d
);

color:#fff;

font-weight:700;

transition:.3s ease;

box-shadow:0 12px 25px rgba(255,107,44,.28);

}

.earn-btn:hover{

transform:translateY(-3px);

box-shadow:0 20px 35px rgba(255,107,44,.38);

}
/*======================================================
HOW IT WORKS
======================================================*/

.how-it-works{

padding:120px 0;

position:relative;

overflow:hidden;

}


/* Background Glow */

.how-it-works::before{

content:"";

position:absolute;

width:420px;

height:420px;

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

border-radius:50%;

left:-120px;

top:50px;

filter:blur(70px);

}

.how-it-works::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:rgba(37,99,235,.06);

border-radius:50%;

right:-100px;

bottom:-120px;

filter:blur(70px);

}


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

.steps-grid{

display:grid;

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

gap:35px;

position:relative;

}


/* Connector Line */

.steps-grid::before{

content:"";

position:absolute;

top:90px;

left:16%;

width:68%;

height:3px;

background:linear-gradient(
90deg,
var(--primary),
var(--blue)
);

z-index:0;

opacity:.18;

}


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

.step-card{

position:relative;

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

backdrop-filter:blur(15px);

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

border-radius:30px;

padding:45px 35px;

text-align:center;

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:.35s ease;

overflow:hidden;

z-index:2;

}

.step-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(0,0,0,.10);

}
.step-card:hover .step-icon{

transform:scale(1.08);

transition:.35s;

}


/* Large Background Number */

.step-number{

position:absolute;

top:15px;

right:20px;

font-size:80px;

font-weight:800;

font-family:'Plus Jakarta Sans';

color:rgba(255,107,44,.08);

line-height:1;

pointer-events:none;

}


/*==========================
ICON
==========================*/

.step-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:30px;

border-radius:26px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--primary),
#ff944d
);

font-size:36px;

color:#fff;

box-shadow:0 18px 35px rgba(255,107,44,.30);

}

.step-icon.blue{

background:linear-gradient(
135deg,
#2563eb,
#60a5fa
);

box-shadow:0 18px 35px rgba(37,99,235,.28);

}

.step-icon.green{

background:linear-gradient(
135deg,
#22c55e,
#4ade80
);

box-shadow:0 18px 35px rgba(34,197,94,.28);

}


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

.step-card h3{

font-size:28px;

margin-bottom:18px;

font-family:'Plus Jakarta Sans';

}

.step-card p{

font-size:16px;

line-height:1.8;

margin-bottom:28px;

}


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

.step-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 30px;

border-radius:50px;

background:linear-gradient(
135deg,
var(--primary),
#ff944d
);

color:#fff;

font-weight:700;

transition:.35s;

box-shadow:0 12px 25px rgba(255,107,44,.28);

}

.step-btn i{

transition:.35s;

}

.step-btn:hover{

transform:translateY(-4px);

box-shadow:0 20px 35px rgba(255,107,44,.35);

}

.step-btn:hover i{

transform:translateX(6px);

}
.step-icon{

animation:floatIcon 4s ease-in-out infinite;

}

.step-card:nth-child(2) .step-icon{

animation-delay:.4s;

}

.step-card:nth-child(3) .step-icon{

animation-delay:.8s;

}

@keyframes floatIcon{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}
.section-divider{

width:100%;

height:1px;

background:linear-gradient(
90deg,
transparent,
rgba(255,107,44,.25),
transparent
);

margin:40px 0;

}
/*======================================================
WHY CHOOSE PALCHAT
======================================================*/

.why-palchat{

padding:130px 0;

position:relative;

background:linear-gradient(
135deg,
#08111f 0%,
#0d1728 45%,
#111827 100%
);

overflow:hidden;

}


/* Background Glow */

.why-palchat::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:rgba(255,107,44,.12);

border-radius:50%;

top:-180px;

left:-180px;

filter:blur(80px);

}

.why-palchat::after{

content:"";

position:absolute;

width:420px;

height:420px;

background:rgba(37,99,235,.12);

border-radius:50%;

right:-160px;

bottom:-160px;

filter:blur(80px);

}


/* Heading */

.why-palchat .section-heading h2{

color:#ffffff;

}

.why-palchat .section-heading p{

color:rgba(255,255,255,.72);

}


/* Grid */

.why-grid{

display:grid;

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

gap:32px;

}


/* Card */

.why-card{

position:relative;

padding:38px 30px;

border-radius:28px;

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

backdrop-filter:blur(18px);

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

transition:.35s ease;

overflow:hidden;

}

.why-card:hover{

transform:translateY(-12px);

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

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

}


/* Glow */

.why-card::before{

content:"";

position:absolute;

width:180px;

height:180px;

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

border-radius:50%;

right:-70px;

top:-70px;

}


/* Icon */

.why-icon{

width:82px;

height:82px;

border-radius:24px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#fff;

margin-bottom:28px;

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

animation:whyFloat 5s ease-in-out infinite;

}


/* Colors */

.why-orange{

background:linear-gradient(
135deg,
#ff6b2c,
#ff944d
);

}

.why-green{

background:linear-gradient(
135deg,
#22c55e,
#4ade80
);

}

.why-blue{

background:linear-gradient(
135deg,
#2563eb,
#60a5fa
);

}

.why-pink{

background:linear-gradient(
135deg,
#ff5fa2,
#ff8fc0
);

}


/* Text */

.why-card h3{

font-family:'Plus Jakarta Sans';

font-size:26px;

margin-bottom:16px;

color:#ffffff;

}

.why-card p{

color:rgba(255,255,255,.72);

font-size:16px;

line-height:1.8;

}


/* Floating Animation */

@keyframes whyFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}
/*======================================================
WHY CARD FOOTER
======================================================*/

.why-footer{

display:inline-flex;

align-items:center;

gap:10px;

margin-top:28px;

padding:10px 18px;

border-radius:50px;

background:rgba(34,197,94,.15);

border:1px solid rgba(34,197,94,.25);

color:#86efac;

font-size:14px;

font-weight:700;

transition:.35s ease;

}

.why-footer i{

color:#22c55e;

font-size:16px;

}

.why-card:hover .why-footer{

background:rgba(34,197,94,.22);

transform:translateY(-2px);

}

.why-card:hover .why-icon{

transform:scale(1.08) rotate(-5deg);

transition:.35s ease;

}

.why-card{

cursor:pointer;

}
/*======================================================
LATEST SUCCESSFUL WITHDRAWALS
======================================================*/

.withdrawals{

padding:120px 0;

background:linear-gradient(
180deg,
#ffffff 0%,
#fff8f3 100%
);

position:relative;

overflow:hidden;

}

/* Decorative Background */

.withdrawals::before{

content:"";

position:absolute;

width:450px;

height:450px;

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

border-radius:50%;

top:-180px;

right:-150px;

filter:blur(80px);

}

.withdrawals::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:rgba(37,99,235,.06);

border-radius:50%;

bottom:-150px;

left:-120px;

filter:blur(80px);

}


/*=============================
SLIDER
==============================*/

.withdraw-slider{

width:100%;

overflow:hidden;

position:relative;

padding:20px 0;

}

.withdraw-track{

display:flex;

gap:28px;

width:max-content;

animation:withdrawScroll 55s linear infinite;

}

.withdraw-track:hover{

animation-play-state:paused;

}


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

.withdraw-card{

width:340px;

flex-shrink:0;

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

backdrop-filter:blur(16px);

border-radius:28px;

padding:30px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

position:relative;

transition:.35s ease;

overflow:hidden;

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

}

.withdraw-card:hover{

transform:translateY(-10px);

box-shadow:0 35px 70px rgba(0,0,0,.12);

}


/* Top Border */

.withdraw-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(
90deg,
var(--primary),
#ff9349
);

}


/* White Glow */

.withdraw-card::after{

content:"";

position:absolute;

width:180px;

height:180px;

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

border-radius:50%;

right:-70px;

top:-70px;

filter:blur(15px);

}


/*=============================
LIVE BADGE
==============================*/

.live-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:50px;

background:#ecfdf5;

color:#16a34a;

font-size:13px;

font-weight:700;

margin-bottom:22px;

}

.live-badge span{

width:10px;

height:10px;

background:#22c55e;

border-radius:50%;

animation:livePulse 1.2s infinite;

}

@keyframes livePulse{

0%{

opacity:1;

transform:scale(1);

}

50%{

opacity:.35;

transform:scale(1.7);

}

100%{

opacity:1;

transform:scale(1);

}

}


/*=============================
AVATAR
==============================*/

.withdraw-avatar{

width:82px;

height:82px;

margin:auto;

margin-bottom:18px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(
135deg,
var(--primary),
#ff944d
);

color:#fff;

font-size:28px;

font-weight:800;

box-shadow:0 18px 35px rgba(255,107,44,.30);

}


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

.withdraw-card h3{

text-align:center;

font-size:26px;

margin-bottom:10px;

font-family:'Plus Jakarta Sans';

}

.member-level{

display:inline-block;

padding:8px 16px;

border-radius:40px;

background:#fff7ed;

color:var(--primary);

font-size:13px;

font-weight:700;

margin:auto;

display:block;

width:max-content;

margin-bottom:16px;

}

.country{

text-align:center;

font-weight:600;

color:#666;

margin-bottom:22px;

}


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

.withdraw-divider{

width:100%;

height:1px;

background:#ececec;

margin:20px 0;

}


/*=============================
AMOUNT
==============================*/

.amount{

text-align:center;

font-size:36px;

font-weight:800;

font-family:'Plus Jakarta Sans';

color:#22c55e;

}


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

.payment-method{

font-weight:700;

margin-bottom:18px;

text-align:center;

}


/*=============================
STATUS
==============================*/

.withdraw-status{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

color:#16a34a;

font-weight:700;

margin-bottom:12px;

}

.withdraw-status i{

font-size:18px;

}


/*=============================
TIME
==============================*/

.withdraw-time{

text-align:center;

font-size:14px;

color:#777;

}


/*=============================
SCROLL ANIMATION
==============================*/

@keyframes withdrawScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}
/*======================================================
PREMIUM TESTIMONIALS
======================================================*/

.testimonials{

padding:130px 0;

background:#fff;

overflow:hidden;

}

.testimonial-slider{

overflow:hidden;

margin-top:70px;

}

.testimonial-track{

display:flex;

gap:30px;

width:max-content;

animation:testimonialScroll 55s linear infinite;

}

.testimonial-track:hover{

animation-play-state:paused;

}

.testimonial-card{

width:360px;

flex-shrink:0;

background:#fff;

padding:28px;

border-radius:30px;

text-align:center;

box-shadow:0 20px 50px rgba(0,0,0,.08);

position:relative;

transition:.35s;

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

}

.testimonial-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(0,0,0,.12);

}

.verified{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 18px;

background:#ecfdf5;

color:#16a34a;

border-radius:50px;

font-size:13px;

font-weight:700;

margin-bottom:22px;

}

.verified i{

font-size:15px;

}

.testimonial-card img{

width:110px;

height:110px;

border-radius:50%;

object-fit:cover;

border:5px solid #fff;

box-shadow:0 15px 35px rgba(255,107,44,.25);

margin-bottom:12px;

}

.testimonial-card h3{

font-size:26px;

margin-bottom:10px;

}

.member-badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

font-size:13px;

font-weight:700;

margin-bottom:15px;

}

.gold{

background:#fff4dc;

color:#c98900;

}

.vip{

background:#ede9fe;

color:#7c3aed;

}

.platinum{

background:#ecfeff;

color:#0891b2;

}

.testimonial-card small{

display:block;

margin-bottom:12px;

color:#666;

}

.stars{

font-size:22px;

color:#fbbf24;

letter-spacing:3px;

margin-bottom:18px;

}

.testimonial-card p{

line-height:1.8;

color:#555;

}

@keyframes testimonialScroll{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}
}
/*======================================================
FAQ SECTION
======================================================*/

.faq{

padding:130px 0;

background:#f8fafc;

position:relative;

overflow:hidden;

}

/* Background Glow */

.faq::before{

content:"";

position:absolute;

width:420px;

height:420px;

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

border-radius:50%;

top:-180px;

left:-180px;

filter:blur(90px);

}

.faq::after{

content:"";

position:absolute;

width:350px;

height:350px;

background:rgba(37,99,235,.06);

border-radius:50%;

bottom:-150px;

right:-150px;

filter:blur(90px);

}

/* Container */

.faq-container{

max-width:900px;

margin:60px auto 0;

}

/* Item */

.faq-item{

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

backdrop-filter:blur(18px);

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

border-radius:24px;

margin-bottom:20px;

overflow:hidden;

box-shadow:0 18px 45px rgba(15,23,42,.06);

transition:.35s ease;

}

.faq-item:hover{

transform:translateY(-3px);

box-shadow:0 28px 60px rgba(15,23,42,.08);

}

/* Active Item */

.faq-item.active{

border-left:5px solid var(--primary);

}

/* Question */

.faq-question{

width:100%;

background:none;

border:none;

padding:28px 30px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-size:20px;

font-weight:700;

font-family:'Plus Jakarta Sans';

text-align:left;

color:#111827;

}

/* Icon */

.faq-question i{

font-size:20px;

color:var(--primary);

transition:.35s ease;

}

/* Rotate Icon */

.faq-item.active .faq-question i{

transform:rotate(45deg);

}

/* Answer */

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.faq-answer p{

padding:0 30px 30px;

font-size:16px;

line-height:1.8;

color:#555;

}

/* Open Answer */

.faq-item.active .faq-answer{

max-height:250px;

}
/*======================================================
FINAL CALL TO ACTION
======================================================*/

.final-cta{

padding:130px 0;

position:relative;

overflow:hidden;

background:linear-gradient(
135deg,
#ff6b2c 0%,
#ff8c42 50%,
#ffb347 100%
);

}

/* Decorative Glows */

.final-cta::before{

content:"";

position:absolute;

width:450px;

height:450px;

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

border-radius:50%;

top:-200px;

left:-180px;

filter:blur(90px);

}

.final-cta::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:rgba(37,99,235,.15);

border-radius:50%;

right:-150px;

bottom:-150px;

filter:blur(90px);

}

/* Wrapper */

.cta-wrapper{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

}

/* Badge */

.cta-badge{

display:inline-block;

padding:10px 20px;

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

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

backdrop-filter:blur(12px);

border-radius:50px;

color:#fff;

font-size:13px;

font-weight:700;

margin-bottom:25px;

letter-spacing:.5px;

}

/* Heading */

.cta-content h2{

font-size:60px;

line-height:1.15;

font-family:'Plus Jakarta Sans';

color:#fff;

margin-bottom:25px;

}

.cta-content h2 span{

display:block;

color:#08111f;

}

/* Text */

.cta-content p{

font-size:18px;

line-height:1.9;

color:rgba(255,255,255,.92);

max-width:600px;

margin-bottom:35px;

}

/* Buttons */

.cta-buttons{

display:flex;

gap:18px;

margin-bottom:35px;

flex-wrap:wrap;

}

.cta-buttons a{

text-decoration:none;

font-weight:700;

padding:16px 34px;

border-radius:50px;

transition:.35s ease;

}

.btn-primary{

background:#fff;

color:var(--primary);

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

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

background:transparent;

border:2px solid rgba(255,255,255,.45);

color:#fff;

}

.btn-secondary:hover{

background:#fff;

color:var(--primary);

}

/* Features */

.cta-features{

display:flex;

flex-wrap:wrap;

gap:20px;

}

.cta-features div{

display:flex;

align-items:center;

gap:10px;

color:#fff;

font-weight:600;

}

.cta-features i{

color:#22c55e;

font-size:18px;

}

/* Dashboard */

.cta-image{

text-align:center;

}

.cta-image img{

max-width:100%;

width:520px;

animation:dashboardFloat 5s ease-in-out infinite;

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

}

/* Floating Animation */

@keyframes dashboardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}
}
/*==========================================
FLOATING CARDS
==========================================*/

.cta-image{

position:relative;

text-align:center;

}

/* Card */

.floating-card{

position:absolute;

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

backdrop-filter:blur(18px);

padding:18px 22px;

border-radius:20px;

box-shadow:0 20px 45px rgba(0,0,0,.15);

width:190px;

animation:floatCard 4s ease-in-out infinite;

z-index:20;

}

/* Icons */

.floating-card i{

font-size:26px;

margin-bottom:12px;

}

.earnings i{

color:#22c55e;

}

.members i{

color:#2563eb;

}

.success i{

color:#f59e0b;

}

/* Title */

.floating-card h4{

font-size:16px;

margin-bottom:8px;

font-family:'Plus Jakarta Sans';

}

/* Number */

.floating-card span{

display:block;

margin-top:8px;

font-size:26px;

font-weight:800;

font-family:'Plus Jakarta Sans';

}

.earnings span{

color:#22c55e;

}

.members span{

color:#2563eb;

}

.success span{

color:#f59e0b;

}

/* Positions */

.earnings{

left:-60px;

bottom:40px;

animation-delay:.2s;

}

.members{

right:-60px;

top:20px;

animation-delay:.6s;

}

.success{

right:-40px;

bottom:-20px;

animation-delay:1s;

}

/* Animation */

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

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

.footer{

padding:90px 0 30px;

position:relative;

background:linear-gradient(
135deg,
#08111f 0%,
#0f172a 50%,
#111827 100%
);

overflow:hidden;

}

/* Background Glow */

.footer::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:rgba(255,107,44,.12);

border-radius:50%;

left:-180px;

top:-180px;

filter:blur(90px);

}

.footer::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:rgba(37,99,235,.10);

border-radius:50%;

right:-180px;

bottom:-180px;

filter:blur(90px);

}

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

.footer-grid{

display:grid;

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

gap:50px;

position:relative;

z-index:2;

}

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

.footer-logo{

display:inline-block;

font-size:34px;

font-weight:800;

font-family:'Plus Jakarta Sans';

text-decoration:none;

margin-bottom:20px;

}

.footer-logo .logo-pal{

color:#ffffff;

}

.footer-logo .logo-chat{

color:var(--primary);

}

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

.footer-column p{

color:rgba(255,255,255,.72);

line-height:1.9;

margin-bottom:30px;

max-width:380px;

}

.footer-column h3{

color:#ffffff;

margin-bottom:22px;

font-size:22px;

font-family:'Plus Jakarta Sans';

}

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

.footer-column ul{

list-style:none;

padding:0;

margin:0;

}

.footer-column ul li{

margin-bottom:15px;

}

.footer-column ul li a{

color:rgba(255,255,255,.70);

text-decoration:none;

transition:.35s;

}

.footer-column ul li a:hover{

color:var(--primary);

padding-left:6px;

}

/*==========================
SOCIAL
==========================*/

.social-icons{

display:flex;

gap:15px;

}

.social-icons a{

width:50px;

height:50px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

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

color:#ffffff;

font-size:18px;

transition:.35s ease;

}

.social-icons a:hover{

background:var(--primary);

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(255,107,44,.30);

}

/*==========================
BOTTOM
==========================*/

.footer-bottom{

margin-top:60px;

padding-top:30px;

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

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

position:relative;

z-index:2;

}

.footer-bottom p{

color:rgba(255,255,255,.65);

}

.footer-bottom strong{

color:#ffffff;

}

.footer-bottom-links{

display:flex;

gap:25px;

}

.footer-bottom-links a{

color:rgba(255,255,255,.65);

text-decoration:none;

transition:.35s;

}

.footer-bottom-links a:hover{

color:var(--primary);

}
/*======================================================
WHATSAPP BUTTON
======================================================*/

.whatsapp-btn{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:32px;

text-decoration:none;

box-shadow:0 20px 45px rgba(37,211,102,.45);

z-index:999;

animation:whatsappPulse 2s infinite;

transition:.35s;

}

.whatsapp-btn:hover{

transform:translateY(-6px) scale(1.08);

}

@keyframes whatsappPulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.55);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}
/*======================================================
SCROLL TOP
======================================================*/

#scrollTopBtn{

position:fixed;

right:25px;

bottom:105px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:20px;

cursor:pointer;

display:none;

z-index:998;

box-shadow:0 15px 35px rgba(255,107,44,.35);

transition:.35s;

}

#scrollTopBtn:hover{

transform:translateY(-5px);

background:#ff7d3a;

}
/*==========================================
MOBILE NAVIGATION
==========================================*/

.mobile-overlay{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9997;

}

.mobile-overlay.active{

opacity:1;

visibility:visible;

}

@media(max-width:992px){

.nav-links{

position:fixed;

top:0;

right:-320px;

width:300px;

height:100vh;

background:#fff;

display:flex;

flex-direction:column;

align-items:flex-start;

justify-content:flex-start;

padding:90px 30px 30px;

gap:25px;

box-shadow:-10px 0 30px rgba(0,0,0,.15);

transition:right .35s ease;

z-index:9998;

}

.nav-links.active{

right:0;

}

.nav-links li{

width:100%;

}

.nav-links li a{

display:block;

width:100%;

padding:12px 0;

font-size:17px;

}

.mobile-login,

.mobile-register{

display:block;

}

.mobile-register a{

background:var(--primary);

color:#fff !important;

padding:14px 20px !important;

border-radius:10px;

text-align:center;

}

}

/*==================================================
   PREMIUM BUTTON SHAKE + OUTWARD WAVES
==================================================*/

.primary-btn,
.secondary-btn,
.register-btn,
.earn-btn,
.step-btn,
.btn-primary,
.btn-secondary {

    position:relative;
    isolation:isolate;
    overflow:visible;

    animation: palchatButtonShake 2.8s ease-in-out infinite;

}


/* OUTWARD WAVE RINGS */

.primary-btn::before,
.primary-btn::after,
.secondary-btn::before,
.secondary-btn::after,
.register-btn::before,
.register-btn::after,
.earn-btn::before,
.earn-btn::after,
.step-btn::before,
.step-btn::after,
.btn-primary::before,
.btn-primary::after,
.btn-secondary::before,
.btn-secondary::after {

    content:"";

    position:absolute;

    inset:-5px;

    border:2px solid currentColor;

    border-radius:inherit;

    pointer-events:none;

    z-index:-1;

    opacity:0;

    animation:palchatButtonWave 2.8s ease-out infinite;

}


/* SECOND WAVE */

.primary-btn::after,
.secondary-btn::after,
.register-btn::after,
.earn-btn::after,
.step-btn::after,
.btn-primary::after,
.btn-secondary::after {

    animation-delay:1.4s;

}


/* SUBTLE SHAKE */

@keyframes palchatButtonShake {

    0%,
    70%,
    100% {

        translate:0 0;

    }

    72% {

        translate:-2px 0;

    }

    74% {

        translate:2px 0;

    }

    76% {

        translate:-2px 0;

    }

    78% {

        translate:2px 0;

    }

    80% {

        translate:0 0;

    }

}


/* EXPANDING WAVES */

@keyframes palchatButtonWave {

    0% {

        transform:scale(.92);

        opacity:.55;

    }

    70% {

        transform:scale(1.35);

        opacity:0;

    }

    100% {

        transform:scale(1.35);

        opacity:0;

    }

}

/*==========================================
WAYS TO EARN - PERMANENT VISIBILITY FIX
==========================================*/

#earn,
#earn.earn,
#earn.hidden,
#earn.show {

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

}

#earn .earn-grid {

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

}

#earn .earn-card {

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    height:auto !important;

    min-height:0 !important;

    max-height:none !important;

    overflow:visible;

}

#earn .earn-card p {

    height:auto !important;

    max-height:none !important;

    overflow:visible !important;

    white-space:normal;

    word-wrap:break-word;

}

.video-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 28px;

    border: none;
    border-radius: 999px;

    background: linear-gradient(90deg, #7c3cff, #c34cff);

    color: white;

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

    cursor: pointer;

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

    animation: videoButtonPulse 2s infinite;
}

@keyframes videoButtonPulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}


.video-modal {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 99999;

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

    padding: 20px;

    background: rgba(0,0,0,.88);
}

.video-modal.active {
    display: flex;
}


.video-box {
    position: relative;

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

    border-radius: 16px;

    overflow: hidden;

    background: #000;

    box-shadow:
        0 0 40px rgba(140,70,255,.35);
}


.video-box video {
    display: block;

    width: 100%;

    max-height: 80vh;
}


.close-video {
    position: absolute;

    top: 8px;
    right: 8px;

    z-index: 5;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

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

    color: white;

    font-size: 24px;

    cursor: pointer;
}