/*==================================================
Teen Patti Win VIP
Premium Gaming Theme
Author: Harsha
Website: https://teenpattiwin-vip.com
Version: 1.0
==================================================*/


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

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

html{
scroll-behavior:smooth;
font-size:16px;
}

body{
font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
background:#081224;
color:#f8fbff;
line-height:1.7;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}

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

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

button,
input{
font:inherit;
border:none;
outline:none;
}

ul{
list-style:none;
}


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

:root{

--primary:#0B3D91;
--secondary:#FFC107;
--accent:#FF9800;

--dark:#081224;
--dark2:#0f1c36;

--light:#f6f9ff;
--white:#ffffff;

--text:#dce6ff;

--border:rgba(255,255,255,.08);

--glass:rgba(255,255,255,.08);

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

--radius:22px;

--transition:.35s ease;

--container:1240px;

}


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

.container{
width:min(92%,var(--container));
margin:auto;
}

section{
padding:90px 0;
position:relative;
}

h1{
font-size:clamp(2.2rem,5vw,4rem);
line-height:1.15;
font-weight:800;
}

h2{
font-size:clamp(1.8rem,3vw,2.8rem);
margin-bottom:22px;
font-weight:800;
}

h3{
font-size:1.35rem;
margin-bottom:14px;
}

p{
color:var(--text);
margin-bottom:18px;
}

strong{
color:#fff;
}

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

.mb-20{
margin-bottom:20px;
}

.mb-30{
margin-bottom:30px;
}

.mb-50{
margin-bottom:50px;
}


/*==================================
BACKGROUND
==================================*/

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top left,#114cae40,transparent 45%),

radial-gradient(circle at bottom right,#ff980020,transparent 35%),

linear-gradient(180deg,#081224,#0b1830,#081224);

z-index:-3;

}


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

.glow{

position:absolute;

width:450px;

height:450px;

border-radius:50%;

filter:blur(120px);

opacity:.25;

pointer-events:none;

}

.glow.left{

background:#0B3D91;

left:-150px;

top:-100px;

}

.glow.right{

background:#FF9800;

right:-150px;

bottom:-120px;

}


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

header{

position:sticky;

top:0;

left:0;

width:100%;

z-index:999;

backdrop-filter:blur(16px);

background:rgba(8,18,36,.78);

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

transition:.35s;

}

.navbar{

display:flex;

align-items:center;

justify-content:space-between;

height:78px;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-weight:800;

font-size:1.35rem;

letter-spacing:.3px;

}

.logo img{

width:46px;

height:46px;

border-radius:12px;

}

.nav-links{

display:flex;

gap:32px;

align-items:center;

}

.nav-links a{

position:relative;

font-weight:600;

transition:.3s;

color:#d9e5ff;

}

.nav-links a:hover{

color:#fff;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:linear-gradient(90deg,var(--secondary),var(--accent));

border-radius:20px;

transition:.35s;

}

.nav-links a:hover::after{

width:100%;

}


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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:15px 32px;

border-radius:60px;

font-weight:700;

transition:.35s;

cursor:pointer;

}

.btn-primary{

background:linear-gradient(135deg,var(--secondary),var(--accent));

color:#000;

box-shadow:

0 12px 30px rgba(255,152,0,.35);

}

.btn-primary:hover{

transform:translateY(-4px);

box-shadow:

0 20px 40px rgba(255,152,0,.45);

}

.btn-outline{

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

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

color:#fff;

backdrop-filter:blur(10px);

}

.btn-outline:hover{

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

transform:translateY(-4px);

}


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

.hero{

padding:120px 0 90px;

overflow:hidden;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.hero h1{

margin-bottom:22px;

}

.hero p{

font-size:1.08rem;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}

.hero-image{

position:relative;

}

.hero-image img{

border-radius:30px;

box-shadow:var(--shadow);

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

}

.hero-image::before{

content:"";

position:absolute;

inset:-15px;

border-radius:34px;

background:linear-gradient(
135deg,
rgba(255,193,7,.18),
rgba(11,61,145,.25)
);

z-index:-1;

filter:blur(25px);

}


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

.glass-card{

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

backdrop-filter:blur(15px);

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

border-radius:var(--radius);

padding:28px;

transition:.35s;

box-shadow:var(--shadow);

}

.glass-card:hover{

transform:translateY(-8px);

border-color:rgba(255,193,7,.35);

}

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

.section-header{
max-width:760px;
margin:0 auto 60px;
text-align:center;
}

.section-header span{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 18px;

border-radius:50px;

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

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

color:var(--secondary);

font-size:.9rem;

font-weight:700;

margin-bottom:18px;

}

.section-header h2{

margin-bottom:18px;

}

.section-header p{

font-size:1.02rem;

}


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

.grid-2{

display:grid;

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

gap:28px;

}

.grid-3{

display:grid;

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

gap:28px;

}

.grid-4{

display:grid;

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

gap:25px;

}


/*==================================
STATISTICS
==================================*/

.stats{

padding-top:20px;

}

.stat-card{

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

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

border-radius:22px;

padding:35px 20px;

text-align:center;

transition:.35s;

backdrop-filter:blur(14px);

box-shadow:var(--shadow);

}

.stat-card:hover{

transform:translateY(-8px);

border-color:rgba(255,193,7,.35);

}

.stat-card h3{

font-size:2.2rem;

margin-bottom:8px;

color:var(--secondary);

font-weight:800;

}

.stat-card p{

margin:0;

font-size:.95rem;

}


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

.feature-card{

position:relative;

overflow:hidden;

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

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

border-radius:24px;

padding:34px;

transition:.35s;

backdrop-filter:blur(15px);

}

.feature-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.08),

transparent

);

transition:.7s;

}

.feature-card:hover::before{

left:100%;

}

.feature-card:hover{

transform:translateY(-10px);

border-color:rgba(255,193,7,.35);

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

}

.feature-icon{

width:72px;

height:72px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:1.8rem;

margin-bottom:22px;

background:

linear-gradient(

135deg,

var(--primary),

#1d65db

);

color:#fff;

box-shadow:

0 12px 25px rgba(11,61,145,.4);

}

.feature-card h3{

margin-bottom:14px;

font-size:1.35rem;

}

.feature-card p{

margin-bottom:0;

}


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

.download-card{

background:

linear-gradient(

135deg,

rgba(11,61,145,.35),

rgba(255,193,7,.08)

);

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

border-radius:28px;

padding:45px;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

backdrop-filter:blur(18px);

box-shadow:var(--shadow);

}

.download-card h2{

margin-bottom:16px;

}

.download-card ul{

display:grid;

gap:12px;

margin-top:18px;

}

.download-card li{

display:flex;

align-items:center;

gap:12px;

color:var(--text);

}

.download-card li::before{

content:"✓";

display:flex;

align-items:center;

justify-content:center;

width:24px;

height:24px;

border-radius:50%;

background:var(--secondary);

color:#000;

font-weight:800;

font-size:.8rem;

}

.download-box{

text-align:center;

padding:30px;

border-radius:24px;

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

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

min-width:280px;

}

.download-box h3{

margin-bottom:18px;

}

.download-box small{

display:block;

margin-top:18px;

color:#b9c9ec;

}


/*==================================
CONTENT BOX
==================================*/

.content-box{

padding:35px;

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

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

border-radius:24px;

margin-bottom:28px;

transition:.35s;

}

.content-box:hover{

border-color:rgba(255,193,7,.28);

transform:translateY(-6px);

}

.content-box h3{

margin-bottom:15px;

}

.content-box ul{

display:grid;

gap:12px;

margin-top:18px;

}

.content-box li{

display:flex;

gap:12px;

align-items:flex-start;

color:var(--text);

}

.content-box li::before{

content:"▶";

color:var(--secondary);

margin-top:2px;

}


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

.badge{

display:inline-flex;

align-items:center;

padding:8px 16px;

border-radius:40px;

font-size:.85rem;

font-weight:700;

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

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

color:var(--secondary);

}

.badge-blue{

background:rgba(11,61,145,.18);

border-color:rgba(11,61,145,.4);

color:#7eb3ff;

}

.badge-green{

background:rgba(45,180,90,.15);

border-color:rgba(45,180,90,.35);

color:#71ffb0;

}


/*==================================
LIST STYLE
==================================*/

.check-list{

display:grid;

gap:14px;

margin-top:24px;

}

.check-list li{

display:flex;

gap:14px;

align-items:flex-start;

}

.check-list li::before{

content:"✔";

width:24px;

height:24px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--secondary);

color:#000;

font-size:.8rem;

font-weight:700;

flex-shrink:0;

}


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

.info-grid{

display:grid;

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

gap:28px;

}

.info-card{

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

padding:32px;

border-radius:22px;

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

transition:.35s;

}

.info-card:hover{

transform:translateY(-8px);

border-color:rgba(255,193,7,.3);

}

.info-card h3{

margin-bottom:14px;

}


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

.table-wrapper{

overflow-x:auto;

border-radius:24px;

box-shadow:var(--shadow);

}

table{

width:100%;

border-collapse:collapse;

min-width:760px;

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

backdrop-filter:blur(15px);

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

}

thead{

background:

linear-gradient(

90deg,

var(--primary),

#114cae

);

}

thead th{

padding:20px;

font-size:1rem;

text-align:left;

color:#fff;

}

tbody td{

padding:18px 20px;

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

color:var(--text);

}

tbody tr{

transition:.3s;

}

tbody tr:hover{

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

}

tbody td strong{

color:#fff;

}


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

.image-box{

overflow:hidden;

border-radius:26px;

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

box-shadow:var(--shadow);

}

.image-box img{

transition:.6s;

}

.image-box:hover img{

transform:scale(1.06);

}

/*==================================
TIMELINE
==================================*/

.timeline{

position:relative;

max-width:900px;

margin:0 auto;

}

.timeline::before{

content:"";

position:absolute;

left:30px;

top:0;

bottom:0;

width:3px;

background:linear-gradient(
180deg,
var(--secondary),
var(--accent)
);

}

.timeline-item{

position:relative;

padding-left:90px;

margin-bottom:45px;

}

.timeline-item:last-child{

margin-bottom:0;

}

.timeline-number{

position:absolute;

left:0;

top:0;

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:1.2rem;

font-weight:800;

background:linear-gradient(
135deg,
var(--secondary),
var(--accent)
);

color:#000;

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

}

.timeline-content{

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

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

border-radius:22px;

padding:28px;

backdrop-filter:blur(15px);

transition:.35s;

}

.timeline-content:hover{

transform:translateY(-6px);

border-color:rgba(255,193,7,.35);

}


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

.faq{

max-width:900px;

margin:auto;

}

.faq-item{

margin-bottom:18px;

overflow:hidden;

border-radius:18px;

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

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

transition:.35s;

}

.faq-item.active{

border-color:rgba(255,193,7,.35);

}

.faq-question{

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 25px;

cursor:pointer;

background:none;

color:#fff;

font-size:1rem;

font-weight:700;

}

.faq-question span{

font-size:1.4rem;

transition:.35s;

color:var(--secondary);

}

.faq-item.active span{

transform:rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .45s ease;

}

.faq-answer p{

padding:0 25px 25px;

margin:0;

color:var(--text);

}


/*==================================
BREADCRUMB
==================================*/

.breadcrumb{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:35px;

font-size:.95rem;

}

.breadcrumb a{

color:#b9ccff;

transition:.3s;

}

.breadcrumb a:hover{

color:#fff;

}

.breadcrumb span{

color:var(--secondary);

}


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

.link-grid{

display:grid;

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

gap:25px;

}

.link-card{

padding:28px;

border-radius:22px;

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

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

transition:.35s;

}

.link-card:hover{

transform:translateY(-8px);

border-color:rgba(255,193,7,.35);

}

.link-card h3{

margin-bottom:12px;

}

.link-card a{

display:inline-flex;

margin-top:18px;

font-weight:700;

color:var(--secondary);

}


/*==================================
CTA SECTION
==================================*/

.cta{

padding:80px 40px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(11,61,145,.55),
rgba(255,193,7,.10)
);

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

text-align:center;

box-shadow:var(--shadow);

}

.cta h2{

margin-bottom:18px;

}

.cta p{

max-width:720px;

margin:0 auto 30px;

}


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

footer{

margin-top:70px;

padding-top:70px;

background:#060d1c;

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

}

.footer-grid{

display:grid;

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

gap:40px;

padding-bottom:50px;

}

.footer-logo{

font-size:1.4rem;

font-weight:800;

margin-bottom:18px;

}

.footer-title{

margin-bottom:18px;

font-size:1.1rem;

}

.footer-links{

display:grid;

gap:12px;

}

.footer-links a{

color:#c7d5f3;

transition:.3s;

}

.footer-links a:hover{

color:var(--secondary);

padding-left:6px;

}

.footer-bottom{

padding:22px 0;

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

text-align:center;

font-size:.92rem;

color:#b9c9ec;

}


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

.menu-toggle{

display:none;

width:46px;

height:46px;

border-radius:12px;

cursor:pointer;

align-items:center;

justify-content:center;

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

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

}

.menu-toggle i,

.menu-toggle span{

display:block;

width:22px;

height:2px;

background:#fff;

position:relative;

}

.menu-toggle span::before,

.menu-toggle span::after{

content:"";

position:absolute;

left:0;

width:22px;

height:2px;

background:#fff;

transition:.35s;

}

.menu-toggle span::before{

top:-7px;

}

.menu-toggle span::after{

top:7px;

}


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

.back-top{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:linear-gradient(
135deg,
var(--secondary),
var(--accent)
);

color:#000;

font-weight:800;

box-shadow:0 15px 35px rgba(255,193,7,.35);

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.back-top.show{

opacity:1;

visibility:visible;

}


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

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}


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

.shadow{

box-shadow:var(--shadow);

}

.rounded{

border-radius:24px;

}

.w-100{

width:100%;

}

.text-white{

color:#fff;

}

.flex{

display:flex;

}

.flex-center{

display:flex;

align-items:center;

justify-content:center;

}

.gap-20{

gap:20px;

}

.gap-30{

gap:30px;

}


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

@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.download-card{

flex-direction:column;

text-align:center;

}

.grid-4{

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

}

.footer-grid{

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

}

}

@media(max-width:850px){

.grid-3,
.grid-2,
.info-grid,
.link-grid{

grid-template-columns:1fr;

}

.nav-links{

position:fixed;

top:78px;

left:-100%;

width:100%;

background:#081224;

padding:35px;

display:flex;

flex-direction:column;

gap:24px;

transition:.35s;

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

}

.nav-links.active{

left:0;

}

.menu-toggle{

display:flex;

}

.timeline::before{

left:20px;

}

.timeline-item{

padding-left:70px;

}

.timeline-number{

width:42px;

height:42px;

font-size:.9rem;

}

}

@media(max-width:600px){

section{

padding:70px 0;

}

.hero{

padding-top:100px;

}

.download-card{

padding:28px;

}

.glass-card,

.feature-card,

.content-box,

.info-card,

.link-card{

padding:24px;

}

.footer-grid{

grid-template-columns:1fr;

}

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.stat-card h3{

font-size:1.8rem;

}

h1{

font-size:2.4rem;

}

h2{

font-size:2rem;

}

}
/*=================================================
PREMIUM HERO UPGRADE
=================================================*/

header.scrolled{
background:rgba(6,14,28,.92);
backdrop-filter:blur(20px);
box-shadow:0 10px 35px rgba(0,0,0,.35);
}

.nav-links a.current{
color:var(--secondary);
}

.nav-links a.current::after{
width:100%;
}

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

.hero-mini-stats{
display:flex;
gap:18px;
margin-top:40px;
flex-wrap:wrap;
}

.mini-box{
flex:1;
min-width:120px;
padding:18px;
text-align:center;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px);
transition:.35s;
}

.mini-box:hover{
transform:translateY(-8px);
border-color:rgba(255,193,7,.35);
}

.mini-box h3{
font-size:1.4rem;
color:var(--secondary);
margin-bottom:6px;
}

.mini-box p{
margin:0;
font-size:.9rem;
}

/*==============================
PHONE FRAME
==============================*/

.phone-frame{
position:relative;
width:360px;
max-width:100%;
margin:auto;
padding:16px;
border-radius:42px;
background:linear-gradient(
145deg,
#1d1d1d,
#0d0d0d
);
box-shadow:
0 35px 80px rgba(0,0,0,.45);
}

.phone-frame img{
border-radius:28px;
display:block;
}

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

.floating-card{

position:absolute;

padding:12px 18px;

border-radius:14px;

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

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

backdrop-filter:blur(18px);

font-size:.9rem;

font-weight:700;

box-shadow:var(--shadow);

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

}

.card-one{

top:35px;

left:-55px;

}

.card-two{

bottom:70px;

right:-60px;

animation-delay:1.5s;

}

.card-three{

bottom:-15px;

left:20px;

animation-delay:3s;

}

@keyframes floatCard{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0px);
}

}

/*==============================
FEATURE LAYOUT
==============================*/

.feature-layout{

display:grid;

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

gap:30px;

}

.feature-main{

display:flex;

flex-direction:column;

justify-content:center;

padding:45px;

}

.feature-main h2{

margin:20px 0;

}

.feature-side{

display:grid;

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

gap:24px;

}

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

#download .glass-card h2{

font-size:3rem;

color:rgba(255,193,7,.18);

margin-bottom:12px;

}

/*==============================
INFO SECTION
==============================*/

.app-info{

background:linear-gradient(
180deg,
transparent,
rgba(255,255,255,.02),
transparent
);

}

.latest-version{

overflow:hidden;

}

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

.link-card{

position:relative;

overflow:hidden;

}

.link-card::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

transition:.8s;

}

.link-card:hover::before{

left:120%;

}

/*==============================
TABLE
==============================*/

tbody tr td:first-child{

font-weight:700;

color:#fff;

}

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

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transform:skewX(-25deg);

transition:.8s;

}

.btn-primary:hover::before{

left:150%;

}

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

.hero-image img{

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

}

@keyframes phoneFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

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

.quick-info{

margin-top:-20px;

position:relative;

z-index:5;

}

.quick-info .glass-card{

height:100%;

}

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

@media(max-width:1000px){

.feature-layout{

grid-template-columns:1fr;

}

.feature-side{

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

}

.phone-frame{

width:320px;

}

.card-one{

left:-25px;

}

.card-two{

right:-20px;

}

}

@media(max-width:768px){

.hero-mini-stats{

display:grid;

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

}

.feature-side{

grid-template-columns:1fr;

}

.phone-frame{

width:280px;

}

.floating-card{

display:none;

}

}

@media(max-width:520px){

.hero-mini-stats{

grid-template-columns:1fr;

}

.phone-frame{

width:240px;

}

.feature-main{

padding:30px;

}

}
/*==================================
SECTION POLISH
==================================*/

.hero-content{
position:relative;
z-index:2;
}

#about{
background:
linear-gradient(
180deg,
transparent,
rgba(255,255,255,.02),
transparent
);
}

#download{
position:relative;
overflow:hidden;
}

#download::before{
content:"";
position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:rgba(255,193,7,.06);
filter:blur(100px);
top:-160px;
right:-120px;
pointer-events:none;
}

.comparison-preview{
background:
linear-gradient(
180deg,
transparent,
rgba(11,61,145,.06),
transparent
);
overflow:hidden;
}

.related-guides{
background:
linear-gradient(
180deg,
transparent,
rgba(255,255,255,.015),
transparent
);
}


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

.phone-frame::before{
content:"";
position:absolute;
top:10px;
left:50%;
transform:translateX(-50%);
width:110px;
height:22px;
border-radius:0 0 16px 16px;
background:#050505;
z-index:5;
}

.phone-frame::after{
content:"";
position:absolute;
inset:0;
border-radius:42px;
padding:2px;
background:linear-gradient(
135deg,
rgba(255,255,255,.18),
transparent,
rgba(255,193,7,.18)
);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
}


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

.download-btn{
white-space:nowrap;
}

.download-btn:active{
transform:scale(.97);
}


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

.feature-main .btn{
margin-top:28px;
align-self:flex-start;
}

@media(max-width:1000px){

.feature-main{
text-align:center;
}

.feature-main .btn{
align-self:center;
}

}


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

.table-wrapper a{
color:var(--secondary);
font-weight:700;
transition:.3s;
}

.table-wrapper a:hover{
color:#fff;
}


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

.footer-logo{
display:flex;
align-items:center;
gap:12px;
}

.footer-links a{
display:inline-flex;
align-items:center;
}

.footer-links a::before{
content:"";
width:0;
height:2px;
background:var(--secondary);
margin-right:0;
transition:.3s;
}

.footer-links a:hover::before{
width:10px;
margin-right:8px;
}


/*==================================
IMAGE BOX POLISH
==================================*/

.image-box{
position:relative;
}

.image-box::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent,
rgba(0,0,0,.12)
);
pointer-events:none;
}


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

.info-card{
height:100%;
}

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


/*==================================
ACCESSIBILITY
==================================*/

button:focus,
a:focus{
outline:2px solid var(--secondary);
outline-offset:3px;
}


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

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#081224;
}

::-webkit-scrollbar-thumb{
background:
linear-gradient(
180deg,
var(--secondary),
var(--accent)
);
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:var(--secondary);
}


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

::selection{
background:var(--secondary);
color:#000;
}


/*==================================
PRINT
==================================*/

@media print{

header,
footer,
.back-top,
.menu-toggle,
.glow{
display:none!important;
}

body{
background:#fff;
color:#000;
}

section{
padding:30px 0;
}

}