/* ==========================================
   W7ZENO STYLE.CSS
   PART 1
========================================== */

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

:root{

--bg:#070707;
--bg2:#111111;
--card:#171717;
--gold:#D4AF37;
--gold2:#F5D97A;
--white:#ffffff;
--gray:#b7b7b7;
--border:rgba(255,255,255,.08);

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

--radius:22px;

--transition:.35s;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

body{

background:#050505;

color:#fff;

overflow-x:hidden;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#080808;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--gold),#9d7722);

border-radius:20px;

}

/* Background */

.background{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:url("assets/background.jpg") center center/cover no-repeat;

z-index:-5;

filter:brightness(.18);

}

.background::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.95));

backdrop-filter:blur(4px);

}

/* Container */

.container{

width:92%;

max-width:1350px;

margin:auto;

}

/* Header */

header{

position:sticky;

top:0;

width:100%;

padding:18px 6%;

display:flex;

justify-content:space-between;

align-items:center;

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

backdrop-filter:blur(15px);

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

z-index:999;

}

.logo{

display:flex;

align-items:center;

gap:16px;

}

.logo img{

width:70px;

height:70px;

object-fit:contain;

}

.logo h1{

font-size:30px;

font-weight:800;

letter-spacing:2px;

}

.logo p{

font-size:13px;

color:var(--gold);

}

/* Navigation */

nav{

display:flex;

gap:18px;

}

nav a{

text-decoration:none;

color:#fff;

padding:12px 20px;

border-radius:40px;

transition:.3s;

font-weight:600;

}

nav a:hover{

background:var(--gold);

color:#000;

}

/* Hero */

.hero{

min-height:92vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:80px 20px;

}

.hero img{

width:170px;

margin-bottom:25px;

filter:drop-shadow(0 0 30px rgba(212,175,55,.25));

}

.hero h2{

font-size:68px;

font-weight:800;

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

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:20px;

}

.hero p{

max-width:760px;

color:#bdbdbd;

font-size:19px;

line-height:34px;

margin-bottom:35px;

}

.hero-btn{

display:inline-block;

padding:16px 42px;

background:linear-gradient(135deg,var(--gold),#8d6717);

color:#000;

font-weight:700;

text-decoration:none;

border-radius:40px;

transition:.35s;

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

}

.hero-btn:hover{

transform:translateY(-6px);

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

}

/* Section */

section{

padding:90px 7%;

}

.section-title{

text-align:center;

margin-bottom:55px;

}

.section-title h2{

font-size:42px;

font-weight:800;

margin-bottom:15px;

}

.section-title p{

color:#9d9d9d;

}

/* Cards */

.cards{

display:grid;

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

gap:28px;

}

.card{

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

backdrop-filter:blur(18px);

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

padding:40px;

border-radius:22px;

transition:.35s;

box-shadow:var(--shadow);

}

.card:hover{

transform:translateY(-10px);

border-color:rgba(212,175,55,.45);

}

.card i{

font-size:45px;

color:var(--gold);

margin-bottom:18px;

}

.card h3{

font-size:25px;

margin-bottom:15px;

}

.card p{

line-height:28px;

color:#bdbdbd;

}
/*=========================================
        WALLPAPER SECTION
=========================================*/

.wallpaper-grid{

display:grid;

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

gap:35px;

margin-top:20px;

}

.wallpaper-card{

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

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

border-radius:24px;

overflow:hidden;

transition:.35s;

backdrop-filter:blur(18px);

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

position:relative;

}

.wallpaper-card:hover{

transform:translateY(-12px);

border-color:rgba(212,175,55,.5);

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

}

.wallpaper-card img{

width:100%;

height:240px;

object-fit:cover;

display:block;

transition:.45s;

}

.wallpaper-card:hover img{

transform:scale(1.08);

}

.wallpaper-card h3{

font-size:24px;

padding:20px 20px 8px;

font-weight:700;

}

.wallpaper-card span{

display:inline-block;

margin-left:20px;

margin-bottom:18px;

padding:6px 15px;

border-radius:30px;

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

color:var(--gold);

font-size:13px;

font-weight:600;

}

.wallpaper-card a{

display:block;

margin:20px;

padding:14px;

text-align:center;

text-decoration:none;

background:linear-gradient(135deg,var(--gold),#8b6717);

color:#000;

font-weight:700;

border-radius:14px;

transition:.3s;

}

.wallpaper-card a:hover{

transform:translateY(-3px);

}

.wallpaper-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:220px;

height:220px;

background:radial-gradient(circle,var(--gold),transparent);

opacity:.08;

transition:.5s;

}

.wallpaper-card:hover::before{

transform:scale(1.3);

}

/*=========================================
            SETUP SECTION
=========================================*/

.setup-grid{

display:grid;

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

gap:35px;

margin-top:20px;

}

.setup-card{

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

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

padding:35px;

border-radius:22px;

transition:.35s;

backdrop-filter:blur(16px);

box-shadow:0 15px 35px rgba(0,0,0,.4);

}

.setup-card:hover{

transform:translateY(-10px);

border-color:rgba(212,175,55,.45);

}

.setup-card h3{

font-size:26px;

margin-bottom:25px;

color:var(--gold);

}

.setup-card ul{

list-style:none;

}

.setup-card li{

padding:14px 0;

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

color:#d7d7d7;

font-size:16px;

}

.setup-card li:last-child{

border:none;

}

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

.social-grid{

display:grid;

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

gap:25px;

margin-top:25px;

}

.social-grid a{

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

padding:24px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

gap:15px;

text-decoration:none;

font-weight:700;

color:#fff;

transition:.35s;

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

}

.social-grid a:hover{

background:linear-gradient(135deg,var(--gold),#8b6717);

color:#000;

transform:translateY(-8px);

}

.social-grid i{

font-size:26px;

}

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

footer{

padding:45px;

text-align:center;

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

margin-top:70px;

color:#999;

font-size:15px;

background:#080808;

}

/*=========================================
        GOLD GLOW EFFECT
=========================================*/

.glow{

position:absolute;

width:400px;

height:400px;

background:radial-gradient(circle,var(--gold),transparent);

filter:blur(120px);

opacity:.07;

z-index:-1;

}

.glow.left{

top:250px;

left:-120px;

}

.glow.right{

bottom:120px;

right:-120px;

}

/*=========================================
        IMAGE OVERLAY
=========================================*/

.wallpaper-card .overlay{

position:absolute;

inset:0;

background:linear-gradient(transparent,rgba(0,0,0,.85));

display:flex;

align-items:flex-end;

padding:20px;

opacity:0;

transition:.35s;

}

.wallpaper-card:hover .overlay{

opacity:1;

}

.overlay p{

color:#fff;

font-size:15px;

}

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

.btn{

display:inline-block;

padding:14px 32px;

background:linear-gradient(135deg,var(--gold),#8d6717);

border-radius:40px;

color:#000;

font-weight:700;

text-decoration:none;

transition:.35s;

}

.btn:hover{

transform:translateY(-5px);

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

}
/*=========================================
        SEARCH BAR
=========================================*/

.search-box{

width:100%;

max-width:700px;

margin:0 auto 60px;

display:flex;

align-items:center;

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

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

border-radius:60px;

overflow:hidden;

backdrop-filter:blur(18px);

}

.search-box input{

flex:1;

padding:18px 24px;

background:transparent;

border:none;

outline:none;

color:#fff;

font-size:17px;

}

.search-box input::placeholder{

color:#888;

}

.search-box button{

width:70px;

height:60px;

border:none;

cursor:pointer;

background:linear-gradient(135deg,var(--gold),#8b6717);

color:#000;

font-size:20px;

}

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

.categories{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:50px;

}

.categories button{

padding:12px 26px;

border-radius:40px;

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

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

color:#fff;

cursor:pointer;

transition:.35s;

font-weight:600;

}

.categories button:hover,

.categories button.active{

background:linear-gradient(135deg,var(--gold),#8d6717);

color:#000;

}

/*=========================================
        LOADING SCREEN
=========================================*/

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#050505;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:.6s;

}

.loader.hide{

opacity:0;

visibility:hidden;

}

.loader span{

width:80px;

height:80px;

border-radius:50%;

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

border-top:6px solid var(--gold);

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*=========================================
        FLOATING GOLD PARTICLES
=========================================*/

.particle{

position:absolute;

background:var(--gold);

border-radius:50%;

opacity:.25;

animation:float 10s linear infinite;

}

@keyframes float{

0%{

transform:translateY(100px);

opacity:0;

}

50%{

opacity:.25;

}

100%{

transform:translateY(-120vh);

opacity:0;

}

}

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

.fade{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.fade.show{

opacity:1;

transform:translateY(0);

}

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

.card:hover,

.setup-card:hover,

.wallpaper-card:hover{

box-shadow:

0 15px 35px rgba(0,0,0,.45),

0 0 25px rgba(212,175,55,.18);

}

/*=========================================
        IMAGE SHINE
=========================================*/

.wallpaper-card::after{

content:"";

position:absolute;

top:-120%;

left:-40%;

width:50%;

height:220%;

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

transform:rotate(25deg);

transition:.7s;

}

.wallpaper-card:hover::after{

left:140%;

}

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

.top-btn{

position:fixed;

bottom:25px;

right:25px;

width:55px;

height:55px;

border-radius:50%;

background:linear-gradient(135deg,var(--gold),#8d6717);

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

color:#000;

font-size:22px;

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

transition:.35s;

z-index:999;

}

.top-btn:hover{

transform:translateY(-6px);

}

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

@media(max-width:1200px){

.hero h2{

font-size:54px;

}

}

@media(max-width:991px){

header{

flex-direction:column;

gap:18px;

padding:20px;

}

nav{

flex-wrap:wrap;

justify-content:center;

}

.hero{

padding-top:140px;

}

.hero h2{

font-size:42px;

}

.hero p{

font-size:17px;

line-height:30px;

}

}

@media(max-width:768px){

.hero img{

width:120px;

}

.hero h2{

font-size:34px;

}

.section-title h2{

font-size:32px;

}

.logo img{

width:55px;

height:55px;

}

.logo h1{

font-size:24px;

}

.cards,

.wallpaper-grid,

.setup-grid,

.social-grid{

grid-template-columns:1fr;

}

.search-box{

flex-direction:column;

border-radius:20px;

}

.search-box input{

width:100%;

}

.search-box button{

width:100%;

border-radius:0 0 20px 20px;

}

}

@media(max-width:480px){

.hero{

padding:120px 18px;

}

.hero h2{

font-size:28px;

}

.hero p{

font-size:15px;

}

.hero-btn{

padding:14px 26px;

font-size:15px;

}

section{

padding:70px 20px;

}

.card,

.setup-card{

padding:28px;

}

.wallpaper-card img{

height:210px;

}

}

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

::selection{

background:var(--gold);

color:#000;

}
#imageModal{

display:none;

position:fixed;

inset:0;

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

justify-content:center;

align-items:center;

z-index:99999;

}

.modal-content{

position:relative;

max-width:90%;

max-height:90%;

}

.modal-content img{

width:100%;

max-height:85vh;

object-fit:contain;

border-radius:15px;

}

.close-modal{

position:absolute;

right:-10px;

top:-50px;

font-size:45px;

cursor:pointer;

color:white;

}

.like-btn{

position:absolute;

top:15px;

right:15px;

width:45px;

height:45px;

border:none;

border-radius:50%;

cursor:pointer;

background:white;

font-size:20px;

transition:.3s;

}

.like-btn.liked{

background:#d4af37;

color:black;

}

button,a{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

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

border-radius:50%;

transform:scale(0);

animation:ripple .6s linear;

}

@keyframes ripple{

to{

transform:scale(5);

opacity:0;

}

}
/* CONTACT POPUP */

.contact-popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

backdrop-filter:blur(8px);

justify-content:center;

align-items:center;

z-index:9999;

}



.contact-box{

background:rgba(20,20,20,0.95);

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

padding:35px;

border-radius:20px;

width:350px;

text-align:center;

color:white;

box-shadow:0 0 30px rgba(0,0,0,0.5);

}



.contact-box h2{

margin-bottom:25px;

}



.contact-box p{

margin:20px 0;

font-size:16px;

}



.contact-box a{

color:white;

text-decoration:none;

}



.contact-box i{

margin-right:8px;

}



.close-contact{

position:absolute;

font-size:30px;

cursor:pointer;

margin-left:280px;

margin-top:-25px;

}