/* =====================================================
   4STREAM WEBSITE
   STYLE.CSS
   Version : 1.0
===================================================== */

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

:root{

--gold:#D4AF37;
--gold-light:#F7D774;
--black:#050505;
--dark:#111111;
--dark2:#181818;
--white:#ffffff;
--grey:#bdbdbd;

--radius:18px;

--transition:.35s ease;

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

}

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

html{

scroll-behavior:smooth;

}

body{

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

background:#050505;

color:#fff;

overflow-x:hidden;

line-height:1.7;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

section{

padding:90px 8%;

position:relative;

}

.container{

width:100%;

max-width:1300px;

margin:auto;

}

.gold{

color:var(--gold);

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

font-weight:700;

margin-bottom:12px;

}

.section-title p{

color:#c9c9c9;

font-size:16px;

max-width:700px;

margin:auto;

}

::selection{

background:var(--gold);

color:#000;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--gold),#8f6b12);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--gold-light);

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

backdrop-filter:blur(18px);

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

border-bottom:1px solid rgba(212,175,55,.12);

transition:var(--transition);

}

header.scrolled{

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

backdrop-filter:blur(25px);

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

border-bottom:1px solid rgba(212,175,55,.25);

}

.navbar{

max-width:1400px;

margin:auto;

padding:18px 40px;

display:flex;

justify-content:space-between;

align-items:center;

gap:25px;

}

.logo{

font-size:32px;

font-weight:800;

letter-spacing:1px;

cursor:pointer;

flex-shrink:0;

}

.logo .gold{

text-shadow:0 0 18px rgba(212,175,55,.45);

}

.nav-menu{

display:flex;

align-items:center;

gap:28px;

flex:1;

justify-content:center;

}

.nav-menu li a{

font-size:15px;

font-weight:500;

color:#e6e6e6;

transition:var(--transition);

position:relative;

}

.nav-menu li a:hover{

color:var(--gold);

}

.nav-menu li a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--gold);

transition:.3s;

}

.nav-menu li a:hover::after{

width:100%;

}

.nav-btn{

padding:12px 26px;

white-space:nowrap;

flex-shrink:0;

}

background:linear-gradient(135deg,var(--gold),#9c7413);

color:#000;

font-weight:700;

border-radius:40px;

box-shadow:0 10px 25px rgba(212,175,55,.35);

transition:var(--transition);

}

.nav-btn:hover{

transform:translateY(-3px);

box-shadow:0 18px 35px rgba(212,175,55,.45);

}

.menu-btn{

display:none;

font-size:30px;

cursor:pointer;

color:#fff;

}

@media(max-width:900px){

.nav-menu{

position:fixed;

top:80px;

left:-100%;

width:100%;

background:#111;

display:flex;

flex-direction:column;

padding:30px 0;

gap:25px;

transition:.35s;

border-top:1px solid rgba(212,175,55,.15);

}

.nav-menu.active{

left:0;

}

.nav-btn{

display:none;

}

.menu-btn{

display:block;

}

}

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

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:140px 8% 100px;

background:
linear-gradient(rgba(5,5,5,.82),rgba(5,5,5,.92)),
url("assets/hero-bg.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

position:relative;

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:radial-gradient(circle at top,
rgba(212,175,55,.12),
transparent 55%);

pointer-events:none;

}

.hero-content{

position:relative;

z-index:2;

max-width:850px;

}

.hero h1{

font-size:72px;

font-weight:800;

letter-spacing:2px;

margin-bottom:15px;

text-shadow:0 0 25px rgba(212,175,55,.35);

}

.hero h2{

font-size:34px;

font-weight:700;

margin-bottom:20px;

}

.hero p{

font-size:20px;

color:#dddddd;

margin-bottom:18px;

}

.hero-desc{

max-width:700px;

margin:auto auto 40px;

font-size:17px;

color:#bfbfbf;

line-height:1.8;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-primary{

padding:16px 36px;

background:linear-gradient(135deg,var(--gold),#9c7413);

color:#000;

font-weight:700;

border-radius:50px;

transition:var(--transition);

box-shadow:0 15px 35px rgba(212,175,55,.35);

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:0 25px 45px rgba(212,175,55,.45);

}

.btn-secondary{

padding:16px 36px;

border:2px solid var(--gold);

color:var(--gold);

border-radius:50px;

font-weight:700;

transition:var(--transition);

}

.btn-secondary:hover{

background:var(--gold);

color:#000;

transform:translateY(-5px);

}

@media(max-width:768px){

.hero{

background-attachment:scroll;

}

.hero h1{

font-size:48px;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:16px;

}

.hero-desc{

font-size:15px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.btn-primary,

.btn-secondary{

width:260px;

text-align:center;

}

}

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

.features{

background:#0b0b0b;

}

.feature-grid{

display:grid;

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

gap:28px;

}

.feature-card{

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

border:1px solid rgba(212,175,55,.08);

border-radius:20px;

padding:35px 25px;

text-align:center;

transition:.35s;

backdrop-filter:blur(15px);

}

.feature-card:hover{

transform:translateY(-10px);

border-color:var(--gold);

box-shadow:0 20px 45px rgba(212,175,55,.18);

}

.feature-card .icon{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(212,175,55,.08);

border:1px solid rgba(212,175,55,.15);

transition:.35s;

}

.feature-card .icon i{

font-size:46px;

color:var(--gold);

transition:.35s;

}

.feature-card:hover .icon{

background:rgba(212,175,55,.15);

border-color:var(--gold);

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

}

.feature-card:hover .icon i{

transform:scale(1.15) rotate(-8deg);

}

.feature-card h3{

font-size:24px;

margin-bottom:12px;

}

.feature-card p{

color:#bdbdbd;

font-size:15px;

line-height:1.8;

}

/*=====================================================
  DEVICES
=====================================================*/

.devices{

background:#050505;

}

.device-grid{

display:grid;

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

gap:25px;

}

.device-card{

background:#101010;

border-radius:20px;

padding:40px 20px;

text-align:center;

transition:.35s;

border:1px solid rgba(212,175,55,.08);

}

.device-card:hover{

transform:translateY(-8px);

background:#171717;

border-color:var(--gold);

}

.device-icon{

width:90px;

height:90px;

margin:0 auto 25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(212,175,55,.08);

border:1px solid rgba(212,175,55,.15);

transition:.35s;

}

.device-icon i{

font-size:46px;

color:var(--gold);

transition:.35s;

}

.device-card:hover .device-icon{

background:rgba(212,175,55,.15);

border-color:var(--gold);

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

}

.device-card:hover .device-icon i{

transform:scale(1.15);

}

.device-card h3{

font-size:20px;

}

/*=====================================================
  WHY CHOOSE
=====================================================*/

.why{

background:#0b0b0b;

}

.why-grid{

display:grid;

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

gap:20px;

}

.why-card{

background:linear-gradient(145deg,#111,#1b1b1b);

border-radius:18px;

padding:22px;

text-align:center;

font-weight:600;

border:1px solid rgba(212,175,55,.08);

transition:.35s;

}

.why-card:hover{

background:linear-gradient(145deg,#1a1a1a,#242424);

border-color:var(--gold);

color:var(--gold);

transform:scale(1.04);

box-shadow:0 15px 35px rgba(212,175,55,.15);

}

@media(max-width:768px){

.feature-card,

.device-card,

.why-card{

padding:25px 18px;

}

.feature-card h3{

font-size:20px;

}

.device-icon{

font-size:42px;

}

}

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

.pricing{

background:#050505;

}

.pricing-grid{

display:grid;

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

gap:30px;

margin-top:40px;

}

.price-card{

position:relative;

background:linear-gradient(145deg,#111,#1c1c1c);

border:1px solid rgba(212,175,55,.08);

border-radius:22px;

padding:35px 25px;

text-align:center;

transition:.35s;

overflow:hidden;

}

.price-card:hover{

transform:translateY(-12px);

border-color:var(--gold);

box-shadow:0 25px 50px rgba(212,175,55,.18);

}

.price-card.active{

border:2px solid var(--gold);

transform:scale(1.08);

background:linear-gradient(
145deg,
#181818,
#2a2107
);

box-shadow:
0 0 20px rgba(212,175,55,.35),
0 0 60px rgba(212,175,55,.18);

}

.badge{

position:absolute;

top:18px;

right:18px;

background:#2b2b2b;

color:#fff;

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

padding:6px 14px;

border-radius:30px;

font-size:12px;

font-weight:700;

z-index:2;

}

.badge.premium{

background:linear-gradient(135deg,#FFD54F,#D4AF37);

color:#000;

font-weight:800;

box-shadow:0 0 20px rgba(212,175,55,.45);

}

.price-card h3{

font-size:22px;

margin:15px 0;

}

.price-card h1{

font-size:50px;

color:var(--gold);

margin-bottom:20px;

}

.save-more{

margin-top:-5px;

margin-bottom:18px;

font-size:15px;

font-weight:600;

color:var(--gold);

line-height:1.7;

text-shadow:0 0 12px rgba(212,175,55,.35);

}

.price-card ul{

margin:25px 0;

}

.price-card ul li{

padding:10px 0;

color:#d6d6d6;

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

}

.price-btn{

display:inline-block;

margin-top:20px;

padding:14px 35px;

border-radius:40px;

background:linear-gradient(135deg,var(--gold),#9c7413);

color:#000;

font-weight:700;

transition:.35s;

}

.price-btn:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(212,175,55,.35);

}

/*=====================================================
  FREE TRIAL
=====================================================*/

.trial{

background:#0b0b0b;

}

.trial-box{

max-width:850px;

margin:auto;

text-align:center;

padding:60px 40px;

border-radius:25px;

background:linear-gradient(145deg,#111,#1c1c1c);

border:2px solid rgba(212,175,55,.18);

box-shadow:0 20px 60px rgba(212,175,55,.12);

}

.trial-box h2{

font-size:40px;

margin-bottom:20px;

color:var(--gold);

}

.trial-box p{

font-size:17px;

color:#d3d3d3;

line-height:1.8;

margin-bottom:35px;

}

.trial-btn{

display:inline-block;

padding:16px 40px;

background:linear-gradient(135deg,var(--gold),#9c7413);

color:#000;

font-weight:700;

border-radius:50px;

transition:.35s;

}

.trial-btn:hover{

transform:translateY(-5px);

box-shadow:0 20px 45px rgba(212,175,55,.35);

}

@media(max-width:768px){

.price-card.active{

transform:none;

}

.trial-box{

padding:40px 25px;

}

.trial-box h2{

font-size:30px;

}

}

/*=====================================================
  SCROLL REVEAL
=====================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .8s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

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

.faq{

background:#080808;

}

.faq-container{

max-width:950px;

margin:auto;

display:flex;

flex-direction:column;

gap:18px;

}

.faq-item{

background:linear-gradient(145deg,#111,#1a1a1a);

border:1px solid rgba(212,175,55,.12);

border-radius:18px;

overflow:hidden;

transition:.35s;

}

.faq-item:hover{

border-color:#D4AF37;

box-shadow:0 12px 35px rgba(212,175,55,.18);

transform:translateY(-2px);

}

.faq-question{

width:100%;

background:none;

border:none;

color:#fff;

padding:24px 28px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:18px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.faq-question span{

font-size:28px;

color:#D4AF37;

transition:.35s;

}

.faq-item.active .faq-question span{

transform:rotate(45deg);

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .45s ease;

}

.faq-answer p{

padding:0 28px 25px;

color:#cfcfcf;

line-height:1.8;

font-size:15px;

}

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

#topBtn{

position:fixed;

bottom:25px;

right:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,var(--gold),#9c7413);

color:#000;

font-size:24px;

font-weight:bold;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

box-shadow:0 10px 25px rgba(212,175,55,.35);

z-index:999;

}

#topBtn.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#topBtn:hover{

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(212,175,55,.45);

}

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

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#050505;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

#loader.hide{

opacity:0;

visibility:hidden;

}

.loader-logo{

font-size:55px;

font-weight:800;

letter-spacing:2px;

color:#fff;

text-shadow:0 0 25px rgba(212,175,55,.35);

margin-bottom:30px;

}

.loader-logo .gold{

color:var(--gold);

}

.loader-bar{

width:220px;

height:5px;

background:#1a1a1a;

border-radius:30px;

overflow:hidden;

}

.loader-bar span{

display:block;

width:0;

height:100%;

background:linear-gradient(90deg,var(--gold),#FFD54F);

animation:loading 1.3s linear forwards;

}

@keyframes loading{

from{

width:0;

}

to{

width:100%;

}

}

/*=====================================================
  LIGHTBOX
=====================================================*/

#lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:flex;

align-items:center;

justify-content:center;

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999999;

}

#lightbox.show{

opacity:1;

visibility:visible;

}

#lightbox img{

max-width:90%;

max-height:90%;

border-radius:15px;

border:2px solid var(--gold);

box-shadow:0 0 40px rgba(212,175,55,.35);

}

#videoModal{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
display:none;
justify-content:center;
align-items:center;
z-index:99999;

}

#videoModal.show{

display:flex;

}

.video-box{

position:relative;
width:90%;
max-width:900px;

}

.video-box video{

width:100%;
border-radius:15px;
border:2px solid gold;

}

#closeVideo{

position:absolute;
top:-45px;
right:0;
font-size:40px;
color:white;
cursor:pointer;

}

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

.preview{

background:#0b0b0b;

}

.preview-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;

}

.preview-card{

background:linear-gradient(145deg,#111,#1c1c1c);
border:1px solid rgba(212,175,55,.15);
border-radius:20px;
padding:20px;
cursor:pointer;
transition:.35s;
overflow:hidden;

}

.preview-card:hover{

transform:translateY(-10px);
border-color:#D4AF37;
box-shadow:0 20px 45px rgba(212,175,55,.18);

}

.preview-card h3{

text-align:center;
margin-bottom:18px;
font-size:24px;
color:#D4AF37;

}

.video-thumb{

position:relative;
overflow:hidden;
border-radius:15px;

}

.video-thumb img{

width:100%;
display:block;
transition:.35s;

}

.preview-card:hover img{

transform:scale(1.05);

}

.play-overlay{

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
background:rgba(0,0,0,.35);
transition:.35s;

}

.play-overlay i{

font-size:70px;
color:white;
transition:.35s;

}

.preview-card:hover .play-overlay{

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

}

.preview-card:hover .play-overlay i{

transform:scale(1.25);

}

.preview-card p{

text-align:center;
margin-top:15px;
color:#bdbdbd;
font-size:14px;

}

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

.hero-particles{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.hero-particles span{

position:absolute;

display:block;

width:8px;

height:8px;

background:rgba(212,175,55,.65);

border-radius:50%;

box-shadow:0 0 15px rgba(212,175,55,.7);

animation:floatParticle linear infinite;

}

/* Position */

.hero-particles span:nth-child(1){

left:8%;

animation-duration:13s;

animation-delay:0s;

}

.hero-particles span:nth-child(2){

left:20%;

animation-duration:10s;

animation-delay:2s;

width:12px;

height:12px;

}

.hero-particles span:nth-child(3){

left:33%;

animation-duration:16s;

animation-delay:4s;

}

.hero-particles span:nth-child(4){

left:48%;

animation-duration:12s;

animation-delay:1s;

width:10px;

height:10px;

}

.hero-particles span:nth-child(5){

left:63%;

animation-duration:15s;

animation-delay:5s;

}

.hero-particles span:nth-child(6){

left:76%;

animation-duration:11s;

animation-delay:3s;

width:14px;

height:14px;

}

.hero-particles span:nth-child(7){

left:88%;

animation-duration:17s;

animation-delay:6s;

}

.hero-particles span:nth-child(8){

left:95%;

animation-duration:13s;

animation-delay:2s;

}

@keyframes floatParticle{

0%{

transform:translateY(110vh) scale(.2);

opacity:0;

}

15%{

opacity:1;

}

85%{

opacity:1;

}

100%{

transform:translateY(-20vh) scale(1.3);

opacity:0;

}

}

/* INSTALL */

.install{

background:#050505;

}

.install-grid{

display:grid;

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

gap:25px;

margin-top:40px;

}

.install-card{

background:#111;

padding:30px;

border-radius:20px;

text-align:center;

border:1px solid rgba(212,175,55,.15);

transition:.35s;

}

.install-card:hover{

transform:translateY(-8px);

border-color:#D4AF37;

box-shadow:0 15px 35px rgba(212,175,55,.2);

}

.install-icon{

font-size:55px;

margin-bottom:20px;

}

.install-card h3{

margin-bottom:12px;

color:#D4AF37;

}

.contact-box{

max-width:900px;

margin:auto;

padding:70px 50px;

border-radius:28px;

text-align:center;

background:linear-gradient(145deg,#111,#1d1d1d);

border:1px solid rgba(212,175,55,.18);

box-shadow:0 20px 60px rgba(212,175,55,.12);

}

.contact-box h2{

font-size:48px;

margin-bottom:18px;

color:#D4AF37;

}

.contact-box p{

font-size:18px;

color:#d6d6d6;

line-height:1.8;

}

.contact-buttons{

display:flex;

justify-content:center;

gap:20px;

margin:40px 0;

flex-wrap:wrap;

}

.contact-btn{

padding:18px 40px;

border-radius:50px;

font-weight:700;

font-size:17px;

transition:.35s;

}

.contact-btn:hover{

transform:translateY(-5px);

}

.contact-note{

margin-top:20px;

font-size:15px;

color:#bdbdbd;

line-height:2;

}

footer{

background:#080808;

padding:60px 20px;

text-align:center;

border-top:1px solid rgba(212,175,55,.12);

}

.footer-logo{

font-size:42px;

font-weight:800;

margin-bottom:20px;

}

.footer-tagline{

color:#d0d0d0;

font-size:17px;

margin-bottom:15px;

}

.footer-device{

display:inline-block;

padding:8px 20px;

background:rgba(212,175,55,.08);

border:1px solid rgba(212,175,55,.2);

border-radius:50px;

color:#D4AF37;

font-size:15px;

margin-bottom:22px;

}

.footer-credit{

font-size:15px;

color:#999;

margin-bottom:10px;

}

.footer-credit span{

color:#fff;

font-weight:700;

}

.copyright{

font-size:13px;

color:#666;

letter-spacing:.5px;

}

/*=====================================================
  FLOATING WHATSAPP
=====================================================*/

.floating-wa{

position:fixed;

left:20px;

bottom:20px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:#fff;

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

z-index:99999;

transition:.35s;

animation:waPulse 2s infinite;

}

.floating-wa:hover{

transform:scale(1.12);

box-shadow:0 0 40px rgba(37,211,102,.75);

}

@keyframes waPulse{

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);

}

}

.floating-wa i{

font-size:36px;

}

@media(max-width:768px){

.floating-wa{

width:60px;

height:60px;

font-size:30px;

left:18px;

bottom:18px;

}

}

/*=====================================================
  RESELLER
=====================================================*/

.reseller{

background:#0b0b0b;

}

.reseller-box{

max-width:900px;

margin:auto;

padding:60px 45px;

border-radius:25px;

text-align:center;

background:linear-gradient(145deg,#111,#1c1c1c);

border:1px solid rgba(212,175,55,.15);

box-shadow:0 20px 50px rgba(212,175,55,.12);

transition:.35s;

}

.reseller-box:hover{

transform:translateY(-6px);

border-color:#D4AF37;

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

}

.reseller-box h3{

font-size:32px;

margin-bottom:25px;

color:#D4AF37;

}

.reseller-box p{

font-size:17px;

line-height:2.2;

color:#d7d7d7;

margin-bottom:40px;

}

.reseller-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.reseller-buttons a{

min-width:250px;

text-align:center;

}

@media(max-width:768px){

.reseller-box{

padding:40px 25px;

}

.reseller-box h3{

font-size:24px;

}

.reseller-box p{

font-size:15px;

line-height:2;

}

.reseller-buttons{

flex-direction:column;

align-items:center;

}

.reseller-buttons a{

width:100%;

max-width:320px;

}

}

.nav-login{

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

padding:12px 22px;

border:2px solid #D4AF37;
border-radius:40px;

background:rgba(212,175,55,.05);

color:#D4AF37 !important;
font-weight:700;

white-space:nowrap;

box-shadow:
0 0 8px rgba(212,175,55,.35),
0 0 18px rgba(212,175,55,.18),
inset 0 0 8px rgba(212,175,55,.08);

transition:.35s ease;

}

.nav-login:hover{

background:linear-gradient(135deg,#FFD54F,#D4AF37);

color:#000 !important;

border-color:#FFD54F;

box-shadow:
0 0 15px rgba(255,215,64,.8),
0 0 35px rgba(255,215,64,.45);

transform:translateY(-2px);

}

@media (max-width:1200px){

.navbar{

padding:18px 25px;

}

.nav-menu{

gap:18px;

}

.nav-menu li a{

font-size:14px;

}

.nav-btn{

padding:11px 22px;

}

.nav-login{

padding:10px 15px;

}

}


/* =====================================================
   WEEKEND FLASH SALE 11-13 SEP 2026
===================================================== */
.weekend-flash-promo{
  max-width:1050px;
  margin:0 auto 35px;
  padding:2px;
  border-radius:22px;
  background:linear-gradient(135deg,#FFD54F,#D4AF37,#7d5908);
  box-shadow:0 18px 50px rgba(212,175,55,.22);
}
.weekend-flash-promo[hidden]{display:none !important;}
.weekend-flash-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  text-align:center;
  padding:18px 22px;
  border-radius:20px;
  background:linear-gradient(145deg,#15110a,#080808);
}
.weekend-flash-tag{color:#FFD54F;font-weight:800;}
.weekend-flash-inner strong{font-size:22px;color:#fff;}
.weekend-flash-old{color:#999;text-decoration:line-through;font-weight:700;}
.weekend-flash-inner > span:last-child{width:100%;color:#d8d8d8;font-size:13px;font-weight:600;}
.price-card.flash-sale-active{
  border:2px solid #FFD54F;
  box-shadow:0 0 22px rgba(255,213,79,.38),0 25px 55px rgba(212,175,55,.18);
}
.flash-sale-badge{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 13px;
  border-radius:30px;
  background:linear-gradient(135deg,#FFD54F,#D4AF37);
  color:#000;
  font-size:12px;
  font-weight:800;
}
.flash-sale-old-price{display:block;margin-top:-14px;margin-bottom:8px;color:#999;text-decoration:line-through;font-weight:700;}
.flash-sale-note{margin:0 0 15px;color:#FFD54F;font-size:13px;font-weight:700;}
@media(max-width:768px){
  .weekend-flash-inner strong{font-size:18px;}
  .weekend-flash-promo{margin-bottom:25px;}
}