/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

body{
background:linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045);
min-height:100vh;
color:#222;
}

/* CONTAINER */

.container{
width:90%;
max-width:1200px;
margin:auto;
}


/* ================= NAVBAR ================= */

.glass-navbar{
position:sticky;
top:0;
width:100%;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,0.2);
z-index:1000;
}

.nav-wrapper {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* LOGO NEON + 3D + GLOW */
.logo-ultra {
    font-size: 32px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 2px;

    /* GRADIENT TEXT */
    background: linear-gradient(45deg, green, red, blue, yellow);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    color: red;

    /* 3D SHADOW */
    text-shadow:
        1px 1px 0 #222,
        2px 2px 0 #444,
        3px 3px 6px rgba(0,0,0,0.5);

    /* ANIMATIONS */
    animation: gradientMove 4s linear infinite, glowPulse 2s infinite alternate;
}

/* GRADIENT MOVE */
@keyframes gradientMove {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

/* GLOW PULSE */
@keyframes glowPulse {
    from {
        text-shadow:
            0 0 5px #00ff00,
            0 0 10px #00ff00,
            0 0 20px #ffff00;
    }
    to {
        text-shadow:
            0 0 10px #ffff00,
            0 0 20px #00e1ff,
            0 0 40px #ff00ff;
    }
}

/* BOUNCE EFFECT */
.logo-ultra.bounce {
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0% {transform: scale(1);}
    30% {transform: scale(1.2);}
    60% {transform: scale(0.9);}
    100% {transform: scale(1);}
}

/* CURSOR */
.logo-ultra::after {
    content: "@";
    margin-left: 5px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%,100%{opacity:1;}
    50%{opacity:0;}
}
/* NAV LINKS */



nav a{
text-decoration:none;
color:white;
font-size:14px;
font-weight:500;
transition:0.3s;
}

.nav a:hover{
color:#ffd700;
}


/* HAMBURGER */

.menu-toggle{
display:none;
font-size:30px;
color:white;
cursor:pointer;
}


/* ================= DROPDOWN ================= */

.dropdown{
position: relative;
}

.dropbtn{
background:yellow;
border:1px solid green;
padding:14px 28px;
color:red;
border-radius:6px;
cursor:pointer;
}

.dropdown-content{
display:none;
position:absolute;
background:white;
min-width:30px;
border-radius:8px;
overflow:hidden;
bottom:20px;
right:0;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.dropdown-content a{
display:block;
padding:10px;
color:yellow;
text-decoration:none;
font-size:14px;
}

.dropdown-content a:hover{
background:green;
}

.dropdown:hover .dropdown-content{
display:block;
}


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

.hero{
padding:80px 0;
display:flex;
justify-content:center;
align-items:center;
}


/* HERO CARD ANIMATION */

.hero-card{

padding:40px;
border-radius:20px;
text-align:center;
max-width:600px;
box-shadow:0 15px 40px rgba(0,0,0,0.25);

background:linear-gradient(270deg,#ff0080,#7928ca,#2af598,#fec051);
background-size:600% 600%;

animation:heroBG 6s ease infinite;

color:white;
}

@keyframes heroBG{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

.hero-card h2{
font-size:32px;
margin-bottom:10px;
}

.hero-card p{
margin-bottom:25px;
}


/* DOWNLOAD BOX */

.download-box{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
margin-top:20px;
}


/* INPUT BLINK BORDER */

.download-box input{

padding:14px;
width:70%;
border-radius:10px;
border:2px solid red;
font-size:14px;
outline:none;

animation:borderBlink 5s infinite;

background:white;
color:black;
}

@keyframes borderBlink{

0%{border-color:#ff0000;}
25%{border-color:#00ffff;}
50%{border-color:#00ff00;}
75%{border-color:#ff00ff;}
100%{border-color:#ff0000;}

}


/* DOWNLOAD BUTTON SWIPE */

.download-box button{

padding:14px 20px;
border:none;
border-radius:10px;
font-size:14px;
cursor:pointer;
color:white;
font-weight:bold;

background:linear-gradient(270deg,#ff0000,#ff9900,#00ffcc,#ff00ff);
background-size:600% 600%;

animation:buttonSwipe 5s ease infinite;

}

@keyframes buttonSwipe{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

.download-box button:hover{
transform:scale(1.05);
transition:0.3s;
}


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

.features{
padding:70px 0;
text-align:center;
}

.features h2{
margin-bottom:40px;
font-size:28px;
}

.feature-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.feature-card{
background:white;
padding:30px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:0.3s;
}

.feature-card:hover{
transform:translateY(-5px);
}

.feature-card h3{
margin-bottom:10px;
}


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

.faq{
padding:70px 0;
}

.faq h2{
text-align:center;
margin-bottom:40px;
}

.faq-item{
background:white;
padding:20px;
margin-bottom:15px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.faq-item h3{
margin-bottom:8px;
font-size:16px;
}


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

@media(max-width:768px){

nav{
position:absolute;
top:70px;
right:0;
background:#111;
flex-direction:column;
width:220px;
padding:20px;
display:none;
}

nav.active{
display:flex;
}

/* MENU ITEM ANIMATION */

nav a{
opacity:0;
transform:translateX(30px);
color:white;
padding:12px 0;
}

nav.active a{
animation:menuFade 0.5s forwards;
}

nav.active a:nth-child(1){animation-delay:0.2s;}
nav.active a:nth-child(2){animation-delay:0.4s;}
nav.active a:nth-child(3){animation-delay:0.6s;}
nav.active a:nth-child(4){animation-delay:0.8s;}
nav.active a:nth-child(5){animation-delay:1s;}
nav.active a:nth-child(6){animation-delay:1.2s;}

@keyframes menuFade{

from{
opacity:0;
transform:translateX(30px);
}

to{
opacity:1;
transform:translateX(0);
}

}

.menu-toggle{
display:block;
}

.download-box input{
width:100%;
}

.download-box button{
width:100%;
}

}

/* ULTRA FOOTER 222222222222222222222222*/

.footer-links {
    font-size: 20px;
    font-weight: bold;
    text-align: center;

    /* GRADIENT TEXT */
    background: linear-gradient(45deg, #ff0050, #ff9900, #00e1ff);
    -webkit-background-clip: text;
    color: transparent;

    /* 3D SHADOW EFFECT */
    text-shadow:
        1px 1px 0 #999,
        2px 2px 0 #777,
        3px 3px 0 #555,
        4px 4px 6px rgba(0,0,0,0.4);

    margin-bottom: 10px;

    transition: all 0.2s ease;
}

.ultra{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px 15px;
    background: transparent; /* outer bg transparent */
}

/* TEXT BOX STYLE */
.ultra-footer p {
    background: #ffffff;          /* white background */
    color: red;                  /* red text */

    padding: 15px 25px;

    border-radius: 50px;         /* rounded rectangle (pill shape) */

    border: 2px solid red;       /* red border */

    font-weight: bold;
    font-size: 14px;
    text-align: center;

    /* SHADOW EFFECT */
    box-shadow: 0 5px 15px rgba(255,0,0,0.3);

    /* SMOOTH EFFECT */
    transition: all 0.2s ease;
}

/* HOVER EFFECT 🔥 */
.ultra-footer p:hover {
    background: red;
    color: white;
    box-shadow: 0 8px 25px rgba(255,0,0,0.6);
    transform: scale(1.05);
}

.footer-container{

display:grid;

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

gap:20px;

padding:40px 20px;

}

/* GLASSMORPHISM CARD */

.glass-card{

background:rgba(255,255,255,0.05);

backdrop-filter:blur(10px);

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

border-radius:20px;

padding:30px;

text-align:center;

box-shadow:0 0 20px rgba(255,0,80,0.2);

}

/* LOGO */

.footer-logo{

font-size:28px;

background:linear-gradient(45deg,#ff0050,#ff9900,#00e1ff);

-webkit-background-clip:text;

color:white;

margin-bottom:10px;

}

/* SOCIAL ICONS */

.social-icons{

margin-top:15px;

}

.social-btn{

display:inline-block;

font-size:20px;

margin:6px;

padding:10px;

border-radius:50%;

background:#111;

color:white;

transition:0.3s;

}

/* SOCIAL HOVER */

.social-btn:hover{

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

background:#ff0050;

box-shadow:0 0 12px #ff0050;

}

/* BUTTON CONTAINER */

.footer-btns{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

margin-top:10px;

}

/* NEON BUTTON */

.neon-btn{

padding:8px 16px;

border-radius:25px;

border:2px solid white;

color:white;

text-decoration:none;

font-size:15px;

transition:3s;

}

/* FLOATING NEON EFFECT */

.neon-btn:hover{

background:#ff0050;

color:white;

box-shadow:

0 0 10px green,

0 0 20px #ff0050,

0 0 40px #ff0050;

transform:translateY(-4px);

}

/* FOOTER BOTTOM */

.footer-bottom{

text-align:center;

border-top:1px solid #ff0050;

padding:20px;

margin-top:0px;

}

/* MOBILE */

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

}

}

/* ======================
NAVBAR GLASS EFFECT
====================== */

.glass-navbar{

position:sticky;
top:0;
width:100%;

background:rgba(255,255,255,0.15);
backdrop-filter:blur(15px);

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

z-index:1000;

}

.nav-wrapper{

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

padding:15px 20px;

}

.logo{

font-size:26px;
font-weight:bold;
color:white;

}


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

.menu-toggle{

width:35px;
height:25px;

display:none;
flex-direction:column;
justify-content:space-between;

cursor:pointer;

}

.menu-toggle span{

display:block;

height:3px;
background:white;

border-radius:3px;

transition:0.4s;

}


/* ☰ → X ANIMATION */

.menu-toggle.active span:nth-child(1){

transform:rotate(45deg) translate(5px,5px);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

transform:rotate(-45deg) translate(6px,-6px);

}


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

nav{

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

}

nav a{

color:white;
text-decoration:none;
font-size:14px;

}
/*menu³33333333333333333333333333333333333*/

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

@media(max-width:768px){

.menu-toggle{
display:flex;
}

nav{

position:fixed;

top:80px;
right:-300px;

width:260px;

padding:25px;

background:#ffffff;
backdrop-filter:blur(20px);

border-radius:30px;

box-shadow:0 20px 40px rgba(0,0,0,0.3);

flex-direction:column;

transition:0.5s;

}

nav.active{

right:20px;

}


/* ======================
NEON BUTTON MENU
====================== */

nav a{

display:block;

padding:14px;

margin-bottom:12px;

border-radius:12px;

font-weight:600;

color:white;

text-align:center;

position:relative;

background:rgba(0,0,0,0.6);

border:1px solid transparent;

}


/* NEON BORDER */

nav a::before{

content:"";

position:absolute;

top:-1px;
left:-1px;
right:-1px;
bottom:-1px;

background:linear-gradient(
270deg;
red;
green;
yellow;
blue;
);

background-size:400% 400%;

border-radius:12px;

z-index:-1;

animation:neonMove 6s linear infinite;

}

nav a::after{

content:"";

position:absolute;

top:2px;
left:2px;
right:2px;
bottom:2px;

background:rgba(0,0,0,0.7);

border-radius:10px;

z-index:-1;

}


/* NEON GLOW */

nav a:hover{

color:#fff;

box-shadow:
0 0 10px #ff0080,
0 0 20px #ff0080,
0 0 30px #ff0080;

transform:scale(1.05);

transition:0.3s;

}


/* BORDER ANIMATION */

@keyframes neonMove{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}

}

/* progress bar 5555555555555555555555*/

/* ======================
INSTAGRAM STYLE DOWNLOADER CARD
====================== */

.video-preview-card{

margin-top:30px;
padding:25px;

background:rgba(255,255,255,0.15);
backdrop-filter:blur(15px);

border-radius:20px;

text-align:center;

box-shadow:0 10px 40px rgba(0,0,0,0.25);

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

}

/* FLOATING ANIMATION */

@keyframes floatCard{

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

}


/* ======================
VIDEO PREVIEW PLAYER
====================== */

#videoPlayer{

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

border-radius:14px;

margin-bottom:15px;

box-shadow:0 8px 25px rgba(0,0,0,0.25);

}


/* ======================
HD QUALITY SELECTOR
====================== */

#qualitySelector{

margin:12px 0;

}

#qualityOptions{

padding:8px 12px;

border-radius:8px;

border:none;

font-size:14px;

background:#ffffff;

box-shadow:0 5px 15px rgba(0,0,0,0.2);

}


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

#downloadBtn{

margin-top:10px;

padding:12px 28px;

border:none;

border-radius:12px;

font-weight:bold;

color:white;

cursor:pointer;

background:linear-gradient(
270deg;
#833ab4;
#fd1d1d;
#fcb045;
);

background-size:200% 200%;

animation:gradientMove 3s infinite;

box-shadow:0 5px 20px rgba(0,0,0,0.25);

}

#downloadBtn:hover{

transform:scale(1.05);

}


/* GRADIENT ANIMATION */

@keyframes gradientMove{

0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}

}


/* ======================
DOWNLOAD PROGRESS BAR
====================== */
#progressBarContainer{
display:none;
}

#progressBarContainer{

margin-top:15px;

width:100%;
height:14px;

background:#e6e6e6;

border-radius:10px;

overflow:hidden;

box-shadow:inset 0 2px 6px rgba(0,0,0,0.2);

}

#progressBar{

height:100%;

width:0%;

background:linear-gradient(
90deg,
#833ab4,
#fd1d1d,
#fcb045
);

transition:width 0.3s;

}

/* ================= ARTICLE SECTION ================= */
.article-section {
    padding: 60px 0;
}

.article-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 32px;
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 40px 48px;
    margin-bottom: 0;   /* remove gap */

}

@media (max-width: 768px) {
    .article-container {
        padding: 28px 24px;
    }
}

/* Article Typography */
.article-container h1 {
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .article-container h1 {
        font-size: 2.6rem;
    }
}

.article-meta {
    color: #a0aec0;
    font-size: 0.9rem;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid #edf2f7;
}

.article-container h2 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 40px 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 3px solid #667eea;
    color: #2d3748;
}

.article-container h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 32px 0 12px 0;
    color: #4a5568;
}

.article-container p {
    margin-bottom: 20px;
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.7;
}

.article-container ul,
.article-container ol {
    margin: 20px 0 24px 28px;
}

.article-container li {
    margin-bottom: 10px;
    color: #4a5568;
    line-height: 1.6;
}

/* Table Styles */
.responsive-table {
    overflow-x: auto;
    margin: 28px 0;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    background: white;
}

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

.responsive-table th {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    color: white;
}

.responsive-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #edf2f7;
    color: #4a5568;
}

.responsive-table tr:last-child td {
    border-bottom: none;
}

/* Cards & Highlights */
.pro-tip,
.security-note {
    background: #f7fafc;
    border-left: 4px solid #667eea;
    padding: 20px 24px;
    border-radius: 16px;
    margin: 28px 0;
    font-weight: 500;
}

.verdict-card {
    background: linear-gradient(135deg, #f8f9ff, #f0f2ff);
    border-radius: 24px;
    padding: 24px 28px;
    margin: 32px 0;
    border: 1px solid #e2e8f0;
}

/* Table of Contents */
.table-of-contents {
    background: #f7fafc;
    padding: 24px 28px;
    border-radius: 24px;
    margin: 28px 0 36px;
    border: 1px solid #e2e8f0;
}

.table-of-contents strong {
    font-size: 1.2rem;
    color: #2d3748;
}

.table-of-contents ul {
    margin: 16px 0 0 20px;
    columns: 2;
    column-gap: 32px;
}

@media (max-width: 600px) {
    .table-of-contents ul {
        columns: 1;
    }
}

.table-of-contents li {
    list-style: none;
    margin-bottom: 10px;
}

.table-of-contents a {
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.table-of-contents a:hover {
    color: #764ba2;
    text-decoration: underline;
}

/* FAQ Items inside Article */
.article-container .faq-item {
    background: #f7fafc;
    padding: 20px 24px;
    margin-bottom: 16px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.article-container .faq-question {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 8px;
    color: #2d3748;
}

/* Article Footer */
.article-container footer {
    margin-top: 40px;
    padding-top: 24px;
    text-align: center;
    font-size: 0.85rem;
    color: #a0aec0;
    border-top: 1px solid #edf2f7;
}

/* Scroll Indicator */
.scroll-indicator {
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    width: 0%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    transition: width 0.1s ease;
    
    
} 
    
    /* REEL CONTAINER (HIDDEN BY DEFAULT) */
.reel-container {
    display: none;
    margin-top: 20px;
    text-align: center;
}

.reel-container {
    display: none;
    margin-top: 20px;
    text-align: center;
}

/* 🎬 9:16 REEL */
.reel-container video {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 9/16;
    border-radius: 15px;
    background: black;
    object-fit: cover;
}

/* BUTTON */
.download-btn {
    margin-top: 12px;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(45deg,#ff0050,#ff9900);
    color: white;
    font-weight: bold;
}
#topTimer, #bottomTimer {
    font-weight: bold;
    text-align: center;
}
/* ANIMATION */
.reel-container.show {
    display: block;
    animation: fadeUp 0.4s ease;
}

@keyframes fadeUp {
    from {opacity:0; transform:translateY(20px);}
    to {opacity:1; transform:translateY(0);}
}


/* 🔥 FORCE HIDE GOOGLE TRANSLATE TOP BAR */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
    visibility: hidden !important;
    height: 0px !important;
}

body {
    top: 0px !important;
    position: static !important;
}



.hero-image {
    width: 100%;
    padding: 0 15px;
    padding-top: 50px;
}

.responsive-img {
    height: auto;
    display: block;
    border-radius: 20px;
    width: 100%;        
    display: block;

    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}