/*==========================================================
FILE : auth/css/home.css
VERSION : V3
THEME : White + Premium Green
==========================================================*/

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

:root{

--primary:#17B34A;
--primary-dark:#11913B;
--primary-light:#ECFDF3;

--secondary:#22C55E;

--white:#FFFFFF;
--background:#F6F8FB;

--text:#1E293B;
--text-light:#64748B;

--border:#E7EDF5;

--success:#22C55E;
--warning:#F59E0B;
--danger:#EF4444;
--info:#2563EB;

--shadow-sm:0 10px 25px rgba(15,23,42,.05);
--shadow-md:0 18px 40px rgba(15,23,42,.08);
--shadow-lg:0 30px 60px rgba(15,23,42,.12);

--radius:24px;

--transition:.35s;

}

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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;

background:var(--background);

color:var(--text);

overflow-x:hidden;

}

/*==========================================
APP
==========================================*/

.app{

display:flex;

min-height:100vh;

}

/*==========================================
MAIN
==========================================*/

.main{

flex:1;

margin-left:280px;

display:flex;

flex-direction:column;

min-height:100vh;

}

/*==========================================
HOME
==========================================*/

.home-v3{

padding:35px;

display:flex;

flex-direction:column;

gap:30px;

}

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

.header-v3{

height:80px;

background:#FFFFFF;

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

display:flex;

align-items:center;

justify-content:space-between;

padding:0 35px;

position:sticky;

top:0;

z-index:100;

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

}

.header-left{

display:flex;

align-items:center;

gap:20px;

}

.menu-btn{

width:48px;

height:48px;

border:none;

border-radius:14px;

background:var(--primary-light);

color:var(--primary);

font-size:20px;

cursor:pointer;

transition:var(--transition);

}

.menu-btn:hover{

background:var(--primary);

color:#FFFFFF;

}

.logo img{

height:46px;

display:block;

}

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

.header-right{

display:flex;

align-items:center;

gap:20px;

}

.notification-btn{

position:relative;

width:50px;

height:50px;

border:none;

border-radius:16px;

background:#FFFFFF;

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

font-size:20px;

cursor:pointer;

transition:var(--transition);

}

.notification-btn:hover{

border-color:var(--primary);

color:var(--primary);

}

.notification-btn span{

position:absolute;

top:6px;

right:6px;

width:18px;

height:18px;

border-radius:50%;

background:#EF4444;

color:#FFFFFF;

font-size:10px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

}

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

.profile-card{

display:flex;

align-items:center;

gap:14px;

padding:10px 16px;

background:#FFFFFF;

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

border-radius:18px;

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

cursor:pointer;

transition:var(--transition);

}

.profile-card:hover{

border-color:var(--primary);

}

.profile-image img{

width:50px;

height:50px;

border-radius:50%;

object-fit:cover;

}

.profile-info h4{

font-size:15px;

font-weight:700;

margin-bottom:2px;

}

.profile-info p{

font-size:13px;

color:var(--text-light);

}

.profile-arrow{

border:none;

background:none;

font-size:14px;

color:#94A3B8;

cursor:pointer;

}
/*==========================================================
FILE : auth/css/home.css
PART 2
HERO SECTION V3
==========================================================*/

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

.hero-v3{

background:#FFFFFF;

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

border-radius:32px;

padding:45px;

display:grid;

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

gap:50px;

align-items:center;

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

overflow:hidden;

position:relative;

}

.hero-v3::before{

content:"";

position:absolute;

right:-140px;

top:-140px;

width:380px;

height:380px;

border-radius:50%;

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

}

.hero-v3::after{

content:"";

position:absolute;

left:-120px;

bottom:-120px;

width:260px;

height:260px;

border-radius:50%;

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

}

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

.hero-left{

position:relative;

z-index:2;

display:flex;

flex-direction:column;

align-items:flex-start;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:50px;

background:#ECFDF3;

color:#17B34A;

font-size:13px;

font-weight:700;

margin-bottom:25px;

}

.hero-left h1{

font-size:54px;

font-weight:800;

line-height:66px;

margin-bottom:20px;

color:#1E293B;

}

.hero-left h1 strong{

color:#17B34A;

}

.hero-left p{

max-width:620px;

font-size:17px;

line-height:32px;

color:#64748B;

margin-bottom:35px;

}

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

.hero-buttons{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

margin-bottom:40px;

}

.btn-primary{

height:56px;

padding:0 30px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

background:#17B34A;

color:#FFFFFF;

text-decoration:none;

font-weight:600;

border-radius:18px;

transition:.35s;

box-shadow:0 18px 35px rgba(23,179,74,.20);

}

.btn-primary:hover{

background:#11913B;

transform:translateY(-4px);

}

.btn-secondary{

height:56px;

padding:0 30px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

border:2px solid #17B34A;

background:#FFFFFF;

color:#17B34A;

text-decoration:none;

font-weight:600;

border-radius:18px;

transition:.35s;

}

.btn-secondary:hover{

background:#17B34A;

color:#FFFFFF;

}

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

.hero-stats{

display:grid;

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

gap:18px;

width:100%;

}

.hero-stat{

background:#F8FAFC;

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

border-radius:20px;

padding:22px;

transition:.35s;

}

.hero-stat:hover{

background:#FFFFFF;

border-color:#17B34A;

transform:translateY(-6px);

}

.hero-stat h2{

font-size:28px;

font-weight:700;

margin-bottom:8px;

color:#1E293B;

}

.hero-stat span{

font-size:13px;

font-weight:500;

color:#64748B;

}

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

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

z-index:2;

}

.hero-image-card{

position:relative;

width:100%;

max-width:520px;

}

.hero-wallet-image{

width:100%;

display:block;

object-fit:contain;

}

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

.floating-card{

position:absolute;

display:flex;

align-items:center;

gap:14px;

background:#FFFFFF;

padding:16px 18px;

border-radius:18px;

box-shadow:0 20px 40px rgba(15,23,42,.10);

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

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

}

.floating-card i{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:#ECFDF3;

color:#17B34A;

font-size:20px;

}

.floating-card h4{

font-size:18px;

font-weight:700;

margin-bottom:3px;

}

.floating-card p{

font-size:12px;

color:#64748B;

}

.card-one{

top:20px;

left:-40px;

}

.card-two{

top:50%;

right:-35px;

transform:translateY(-50%);

animation-delay:1s;

}

.card-three{

bottom:10px;

left:20px;

animation-delay:2s;

}

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

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}
/*==========================================================
FILE : auth/css/home.css
PART 3
QUICK ACTIONS + WALLET OVERVIEW
==========================================================*/

/*==========================================
QUICK ACTIONS
==========================================*/

.quick-actions-v3{

display:grid;

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

gap:24px;

}

.quick-card{

background:#FFFFFF;

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

border-radius:24px;

padding:28px 24px;

text-decoration:none;

text-align:center;

transition:.35s;

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

position:relative;

overflow:hidden;

}

.quick-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(23,179,74,.08),
transparent
);

transition:.6s;

}

.quick-card:hover::before{

left:100%;

}

.quick-card:hover{

transform:translateY(-8px);

border-color:#17B34A;

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

}

.quick-icon{

width:74px;

height:74px;

margin:auto;

margin-bottom:18px;

display:flex;

align-items:center;

justify-content:center;

border-radius:22px;

background:#ECFDF3;

color:#17B34A;

font-size:28px;

transition:.35s;

}

.quick-card:hover .quick-icon{

background:#17B34A;

color:#FFFFFF;

transform:rotate(8deg);

}

.quick-card h4{

font-size:20px;

font-weight:700;

margin-bottom:8px;

color:#1E293B;

}

.quick-card p{

font-size:14px;

color:#64748B;

}

/*==========================================
WALLET OVERVIEW
==========================================*/

.wallet-overview-v3{

display:grid;

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

gap:24px;

}

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

.overview-card{

background:#FFFFFF;

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

border-radius:26px;

padding:28px;

position:relative;

overflow:hidden;

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

transition:.35s;

}

.overview-card:hover{

transform:translateY(-8px);

border-color:#17B34A;

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

}

.overview-card::before{

content:"";

position:absolute;

right:-55px;

top:-55px;

width:150px;

height:150px;

border-radius:50%;

background:rgba(23,179,74,.05);

}

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

.overview-top{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:24px;

position:relative;

z-index:2;

}

.overview-top span{

font-size:13px;

font-weight:600;

color:#17B34A;

}

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

.overview-icon{

width:62px;

height:62px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:#FFFFFF;

}

.overview-icon.green{

background:#17B34A;

}

.overview-icon.blue{

background:#2563EB;

}

.overview-icon.orange{

background:#F59E0B;

}

.overview-icon.purple{

background:#8B5CF6;

}

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

.overview-card h2{

font-size:34px;

font-weight:800;

margin-bottom:10px;

position:relative;

z-index:2;

color:#1E293B;

}

.overview-card p{

font-size:14px;

color:#64748B;

margin-bottom:24px;

position:relative;

z-index:2;

}

/*==========================================
PROGRESS
==========================================*/

.progress-line{

width:100%;

height:8px;

background:#EEF3F8;

border-radius:50px;

overflow:hidden;

position:relative;

z-index:2;

}

.progress-line div{

height:100%;

border-radius:50px;

background:linear-gradient(
90deg,
#17B34A,
#22C55E
);

}

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

.overview-card:nth-child(2) .progress-line div{

background:linear-gradient(
90deg,
#2563EB,
#3B82F6
);

}

.overview-card:nth-child(3) .progress-line div{

background:linear-gradient(
90deg,
#F59E0B,
#FDBA74
);

}

.overview-card:nth-child(4) .progress-line div{

background:linear-gradient(
90deg,
#8B5CF6,
#A855F7
);

}
/*==========================================================
FILE : auth/css/home.css
PART 4
PROFIT OVERVIEW + PROGRESS CARDS
==========================================================*/

/*==========================================
PROFIT OVERVIEW
==========================================*/

.profit-overview-v3{

display:flex;

flex-direction:column;

gap:25px;

}

.section-header{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

margin-bottom:5px;

}

.section-header h2{

font-size:30px;

font-weight:700;

color:#1E293B;

margin-bottom:6px;

}

.section-header p{

font-size:15px;

color:#64748B;

}

.section-header a{

display:inline-flex;

align-items:center;

gap:8px;

text-decoration:none;

font-weight:600;

color:#17B34A;

transition:.35s;

}

.section-header a:hover{

gap:14px;

}

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

.profit-grid{

display:grid;

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

gap:24px;

}

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

.profit-card-v3{

background:#FFFFFF;

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

border-radius:26px;

padding:28px;

display:flex;

align-items:center;

gap:20px;

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

transition:.35s;

position:relative;

overflow:hidden;

}

.profit-card-v3::before{

content:"";

position:absolute;

right:-60px;

top:-60px;

width:160px;

height:160px;

border-radius:50%;

background:rgba(23,179,74,.05);

}

.profit-card-v3:hover{

transform:translateY(-8px);

border-color:#17B34A;

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

}

.profit-icon{

width:72px;

height:72px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#FFFFFF;

flex-shrink:0;

position:relative;

z-index:2;

}

.profit-icon.green{

background:#17B34A;

}

.profit-icon.blue{

background:#2563EB;

}

.profit-icon.orange{

background:#F59E0B;

}

.profit-icon.purple{

background:#8B5CF6;

}

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

.profit-content{

position:relative;

z-index:2;

}

.profit-content span{

display:block;

font-size:13px;

font-weight:600;

color:#64748B;

margin-bottom:8px;

}

.profit-content h2{

font-size:30px;

font-weight:800;

margin-bottom:8px;

color:#1E293B;

}

.profit-content p{

display:flex;

align-items:center;

gap:8px;

font-size:14px;

color:#17B34A;

}

/*==========================================
INVESTMENT PROGRESS
==========================================*/

.investment-progress{

display:grid;

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

gap:24px;

}

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

.progress-card{

background:#FFFFFF;

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

border-radius:24px;

padding:28px;

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

transition:.35s;

}

.progress-card:hover{

transform:translateY(-8px);

border-color:#17B34A;

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

}

.progress-header{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:22px;

}

.progress-header h3{

font-size:18px;

font-weight:700;

color:#1E293B;

}

.progress-header span{

font-size:18px;

font-weight:700;

color:#17B34A;

}

.progress-bar{

width:100%;

height:10px;

background:#EEF3F8;

border-radius:50px;

overflow:hidden;

margin-bottom:18px;

}

.progress-fill{

height:100%;

border-radius:50px;

background:linear-gradient(90deg,#17B34A,#22C55E);

}

.progress-fill.green{

background:linear-gradient(90deg,#22C55E,#4ADE80);

}

.progress-fill.orange{

background:linear-gradient(90deg,#F59E0B,#FDBA74);

}

.progress-card p{

font-size:14px;

line-height:24px;

color:#64748B;

}
/*==========================================================
FILE : auth/css/home.css
PART 5
ANALYTICS + PORTFOLIO PERFORMANCE
==========================================================*/

/*==========================================
ANALYTICS
==========================================*/

.analytics-v3{

display:grid;

grid-template-columns:1.8fr .8fr;

gap:25px;

align-items:start;

}

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

.analytics-left{

width:100%;

}

.dashboard-card{

background:#FFFFFF;

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

border-radius:28px;

padding:30px;

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

transition:.35s;

}

.dashboard-card:hover{

transform:translateY(-6px);

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

border-color:#17B34A;

}

.dashboard-card select{

height:44px;

padding:0 16px;

border-radius:14px;

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

background:#F8FAFC;

font-family:Poppins,sans-serif;

cursor:pointer;

outline:none;

}

.dashboard-card select:focus{

border-color:#17B34A;

}

.chart-container{

width:100%;

height:430px;

margin-top:25px;

position:relative;

}

.chart-container canvas{

width:100%!important;

height:100%!important;

}

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

.analytics-right{

display:flex;

flex-direction:column;

gap:20px;

}

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

.stats-card{

display:flex;

align-items:center;

gap:18px;

background:#FFFFFF;

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

border-radius:22px;

padding:22px;

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

transition:.35s;

}

.stats-card:hover{

transform:translateY(-5px);

border-color:#17B34A;

}

.stats-icon{

width:64px;

height:64px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:#17B34A;

color:#FFFFFF;

font-size:24px;

flex-shrink:0;

}

.stats-icon.blue{

background:#2563EB;

}

.stats-icon.orange{

background:#F59E0B;

}

.stats-icon.purple{

background:#8B5CF6;

}

.stats-card span{

display:block;

font-size:13px;

font-weight:600;

color:#64748B;

margin-bottom:6px;

}

.stats-card h3{

font-size:28px;

font-weight:700;

margin-bottom:5px;

color:#1E293B;

}

.stats-card p{

font-size:14px;

color:#17B34A;

}

.success p{

color:#22C55E;

}

/*==========================================
PORTFOLIO
==========================================*/

.portfolio-performance{

display:grid;

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

gap:24px;

}

.portfolio-card{

background:#FFFFFF;

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

border-radius:24px;

padding:28px;

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

transition:.35s;

}

.portfolio-card:hover{

transform:translateY(-6px);

border-color:#17B34A;

}

.portfolio-top{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:22px;

}

.portfolio-top h3{

font-size:18px;

font-weight:700;

margin-bottom:5px;

color:#1E293B;

}

.portfolio-top p{

font-size:13px;

color:#64748B;

}

.portfolio-top h2{

font-size:32px;

font-weight:800;

color:#17B34A;

}

.portfolio-progress{

width:100%;

height:10px;

background:#EEF3F8;

border-radius:50px;

overflow:hidden;

}

.portfolio-fill{

height:100%;

border-radius:50px;

background:linear-gradient(90deg,#17B34A,#22C55E);

}

.portfolio-fill.green{

background:linear-gradient(90deg,#22C55E,#4ADE80);

}

.portfolio-fill.orange{

background:linear-gradient(90deg,#F59E0B,#FDBA74);

}
/*==========================================================
FILE : auth/css/home.css
PART 6
TRANSACTIONS + ACTIVITY + INVITE BANNER
==========================================================*/

/*==========================================
TRANSACTIONS
==========================================*/

.transactions-v3{

display:flex;

flex-direction:column;

gap:25px;

}

.transaction-list{

display:flex;

flex-direction:column;

gap:18px;

}

.transaction-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

padding:22px 25px;

background:#FFFFFF;

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

border-radius:22px;

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

transition:.35s;

}

.transaction-card:hover{

transform:translateY(-5px);

border-color:#17B34A;

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

}

.transaction-left{

display:flex;

align-items:center;

gap:18px;

}

.transaction-icon{

width:62px;

height:62px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

color:#FFFFFF;

flex-shrink:0;

}

.transaction-icon.deposit{

background:#22C55E;

}

.transaction-icon.withdraw{

background:#EF4444;

}

.transaction-icon.profit{

background:#2563EB;

}

.transaction-icon.referral{

background:#8B5CF6;

}

.transaction-left h4{

font-size:18px;

font-weight:700;

margin-bottom:6px;

color:#1E293B;

}

.transaction-left p{

font-size:14px;

color:#64748B;

}

.transaction-right{

text-align:right;

}

.transaction-right h3{

font-size:24px;

font-weight:700;

margin-bottom:8px;

}

.completed{

display:inline-flex;

align-items:center;

justify-content:center;

padding:7px 15px;

background:#DCFCE7;

color:#15803D;

border-radius:50px;

font-size:12px;

font-weight:700;

}

.pending{

display:inline-flex;

align-items:center;

justify-content:center;

padding:7px 15px;

background:#FEF3C7;

color:#B45309;

border-radius:50px;

font-size:12px;

font-weight:700;

}

/*==========================================
ACTIVITY
==========================================*/

.activity-v3{

background:#FFFFFF;

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

border-radius:28px;

padding:30px;

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

}

.activity-timeline{

display:flex;

flex-direction:column;

gap:25px;

margin-top:10px;

}

.timeline-item{

display:flex;

align-items:flex-start;

gap:20px;

position:relative;

}

.timeline-item:not(:last-child)::after{

content:"";

position:absolute;

left:12px;

top:36px;

width:3px;

height:70px;

background:#E5E7EB;

}

.timeline-dot{

width:24px;

height:24px;

border-radius:50%;

flex-shrink:0;

margin-top:5px;

}

.timeline-dot.green{

background:#22C55E;

}

.timeline-dot.blue{

background:#2563EB;

}

.timeline-dot.orange{

background:#F59E0B;

}

.timeline-dot.purple{

background:#8B5CF6;

}

.timeline-content{

padding-bottom:10px;

}

.timeline-content h4{

font-size:18px;

font-weight:700;

margin-bottom:8px;

color:#1E293B;

}

.timeline-content p{

font-size:15px;

line-height:27px;

color:#64748B;

margin-bottom:10px;

}

.timeline-content span{

font-size:13px;

font-weight:600;

color:#17B34A;

}

/*==========================================
INVITE BANNER
==========================================*/

.invite-banner-v3{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:45px;

padding:45px;

background:#FFFFFF;

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

border-radius:32px;

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

overflow:hidden;

position:relative;

}

.invite-banner-v3::before{

content:"";

position:absolute;

right:-120px;

bottom:-120px;

width:320px;

height:320px;

border-radius:50%;

background:rgba(23,179,74,.05);

}

.invite-left{

position:relative;

z-index:2;

}

.invite-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

background:#ECFDF3;

color:#17B34A;

border-radius:50px;

font-size:13px;

font-weight:700;

margin-bottom:22px;

}

.invite-left h2{

font-size:48px;

font-weight:800;

line-height:60px;

margin-bottom:18px;

}

.invite-left h2 strong{

color:#17B34A;

}

.invite-left p{

font-size:16px;

line-height:30px;

color:#64748B;

margin-bottom:25px;

}

.invite-image{

width:100%;

max-width:520px;

display:block;

margin:auto;

object-fit:contain;

}
/*==========================================================
FILE : auth/css/home.css
PART 7
VIP BANNER + BOTTOM NAV + FOOTER
==========================================================*/

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

.invite-features{

display:flex;

flex-direction:column;

gap:14px;

margin-bottom:30px;

}

.feature-item{

display:flex;

align-items:center;

gap:12px;

font-size:15px;

font-weight:600;

color:#475569;

}

.feature-item i{

color:#17B34A;

font-size:18px;

}

.invite-buttons{

display:flex;

align-items:center;

gap:16px;

flex-wrap:wrap;

}

#copyReferral{

cursor:pointer;

}

#referralLink{

display:none;

}

/*==========================================
VIP BANNER
==========================================*/

.vip-banner-v3{

background:linear-gradient(135deg,#16A34A,#22C55E);

border-radius:30px;

padding:40px;

overflow:hidden;

position:relative;

box-shadow:0 25px 50px rgba(22,163,74,.22);

}

.vip-banner-v3::before{

content:"";

position:absolute;

right:-140px;

top:-140px;

width:320px;

height:320px;

border-radius:50%;

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

}

.vip-content{

position:relative;

z-index:2;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

}

.vip-left{

display:flex;

align-items:flex-start;

gap:20px;

color:#FFFFFF;

}

.vip-icon{

width:80px;

height:80px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

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

font-size:34px;

flex-shrink:0;

}

.vip-left span{

display:block;

font-size:14px;

font-weight:600;

opacity:.9;

margin-bottom:8px;

}

.vip-left h2{

font-size:40px;

font-weight:800;

margin-bottom:12px;

}

.vip-left p{

max-width:620px;

font-size:15px;

line-height:30px;

opacity:.95;

}

.vip-right .btn-primary{

background:#FFFFFF;

color:#16A34A;

box-shadow:none;

}

.vip-right .btn-primary:hover{

background:#F8FAFC;

}

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

.bottom-nav{

display:none;

position:fixed;

left:0;

right:0;

bottom:0;

height:78px;

background:#FFFFFF;

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

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

z-index:999;

}

.bottom-nav a{

flex:1;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-decoration:none;

color:#64748B;

font-size:12px;

font-weight:600;

gap:6px;

transition:.30s;

}

.bottom-nav a i{

font-size:22px;

}

.bottom-nav a.active{

color:#17B34A;

}

.bottom-nav a.active i{

transform:translateY(-2px);

}

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

.footer{

margin-top:10px;

padding:28px 35px;

background:#FFFFFF;

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

border-radius:24px;

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

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

}

.footer-left p{

font-size:14px;

color:#64748B;

}

.footer-right{

display:flex;

align-items:center;

gap:24px;

flex-wrap:wrap;

}

.footer-right a{

text-decoration:none;

font-size:14px;

font-weight:600;

color:#64748B;

transition:.30s;

}

.footer-right a:hover{

color:#17B34A;

}
/*==========================================================
FILE : auth/css/home.css
PART 8 (FINAL)
RESPONSIVE + FLOATING BUTTONS + ANIMATIONS
==========================================================*/

/*==========================================
LAPTOP
==========================================*/

@media (max-width:1400px){

.home-v3{

padding:25px;

}

.hero-v3{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

align-items:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

max-width:850px;

margin:auto;

}

.hero-right{

margin-top:20px;

}

.quick-actions-v3,

.wallet-overview-v3,

.profit-grid{

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

}

.analytics-v3{

grid-template-columns:1fr;

}

.portfolio-performance{

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

}

.invite-banner-v3{

grid-template-columns:1fr;

text-align:center;

}

.vip-content{

flex-direction:column;

text-align:center;

}

.vip-left{

flex-direction:column;

align-items:center;

}

}

/*==========================================
TABLET
==========================================*/

@media (max-width:992px){

.main{

margin-left:0;

width:100%;

}

.home-v3{

padding:18px;

gap:20px;

}

.header-v3{

padding:0 18px;

}

.hero-left h1{

font-size:42px;

line-height:52px;

}

.quick-actions-v3,

.wallet-overview-v3,

.profit-grid,

.investment-progress,

.portfolio-performance{

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

}

.chart-container{

height:320px;

}

.analytics-right{

display:grid;

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

gap:18px;

}

.footer{

flex-direction:column;

text-align:center;

}

}

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

@media (max-width:768px){

.header-v3{

height:70px;

padding:0 15px;

}

.profile-info{

display:none;

}

.profile-arrow{

display:none;

}

.logo img{

height:38px;

}

.home-v3{

padding:15px;

padding-bottom:100px;

}

.hero-v3{

padding:24px;

gap:25px;

}

.hero-left{

align-items:flex-start;

text-align:left;

}

.hero-left h1{

font-size:32px;

line-height:42px;

}

.hero-left p{

font-size:14px;

line-height:26px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.btn-primary,

.btn-secondary{

width:100%;

}

.hero-stats,

.quick-actions-v3,

.wallet-overview-v3,

.profit-grid,

.investment-progress,

.analytics-right,

.portfolio-performance{

grid-template-columns:1fr;

}

.transaction-card{

flex-direction:column;

align-items:flex-start;

}

.transaction-right{

width:100%;

text-align:left;

margin-top:12px;

}

.section-header{

flex-direction:column;

align-items:flex-start;

}

.invite-left h2{

font-size:34px;

line-height:44px;

}

.vip-left h2{

font-size:30px;

}

.bottom-nav{

display:flex;

}

.footer{

margin-bottom:90px;

}

}

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

@media (max-width:480px){

.hero-left h1{

font-size:27px;

line-height:36px;

}

.hero-stat h2,

.overview-card h2,

.profit-content h2{

font-size:24px;

}

.transaction-left{

gap:14px;

}

.transaction-icon{

width:52px;

height:52px;

font-size:18px;

}

}

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

.floating-support{

position:fixed;

right:20px;

bottom:105px;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#17B34A;

color:#FFFFFF;

text-decoration:none;

font-size:24px;

box-shadow:0 20px 40px rgba(23,179,74,.28);

z-index:999;

transition:.35s;

}

.floating-support:hover{

transform:scale(1.08);

background:#11913B;

}

/*==========================================
BACK TO TOP
==========================================*/

.back-top{

position:fixed;

right:20px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#17B34A;

color:#FFFFFF;

font-size:20px;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

box-shadow:0 15px 35px rgba(23,179,74,.25);

z-index:999;

}

.back-top.show{

opacity:1;

visibility:visible;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EEF3F8;

}

::-webkit-scrollbar-thumb{

background:#17B34A;

border-radius:50px;

}

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

::selection{

background:#17B34A;

color:#FFFFFF;

}

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

.hero-v3,
.quick-card,
.overview-card,
.profit-card-v3,
.dashboard-card,
.transaction-card,
.activity-v3,
.invite-banner-v3,
.vip-banner-v3{

animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================================================
END OF FILE
auth/css/home.css
VERSION : V3
STATUS : Production Ready
==========================================================*/