/* =====================================================
   THE CRYPTO DOG ($DOG)
   PREMIUM WEBSITE V2
===================================================== */

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

:root{

    --gold:#FFD54A;
    --gold2:#ffb400;
    --green:#2cff7b;
    --bg:#050505;
    --card:#101010;
    --text:#ffffff;
    --gray:#bfbfbf;

}

body{

    background:#050505;
    color:white;
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;

}

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

header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:9999;

}

nav{

    height:90px;

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

    padding:0 70px;

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

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,213,74,.25);

}

/*==============================
            LOGO
===============================*/

.logo{

    display:flex;
    align-items:center;
    gap:16px;
    text-decoration:none;

}

.logo img{

    width:72px;
    height:72px;

    border-radius:50%;

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

    box-shadow:0 0 30px rgba(255,213,74,.45);

    transition:.4s;

}

.logo img:hover{

    transform:rotate(10deg) scale(1.08);

}

.logo span{

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

    font-size:34px;

    color:var(--gold);

    font-weight:700;

}

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

nav ul{

    display:flex;

    list-style:none;

    gap:42px;

}

nav ul li a{

    color:white;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    position:relative;

    transition:.35s;

}

nav ul li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

}

nav ul li a:hover::after{

    width:100%;

}

nav ul li a:hover{

    color:var(--gold);

}

/*==============================
        BUY BUTTON
===============================*/

.buy-btn{

    text-decoration:none;

    padding:16px 34px;

    border-radius:14px;

    background:linear-gradient(45deg,var(--gold),var(--gold2));

    color:black;

    font-weight:bold;

    transition:.35s;

    box-shadow:0 0 25px rgba(255,213,74,.35);

}

.buy-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 0 40px rgba(255,213,74,.7);

}

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

.hero{

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:170px 8% 100px;

    gap:70px;

}

.hero-text{

    flex:1;

}

.hero-text h3{

    color:var(--green);

    font-size:24px;

    letter-spacing:4px;

    margin-bottom:18px;

}

.hero-text h1{

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

    font-size:96px;

    line-height:1;

    color:var(--gold);

    text-shadow:0 0 35px rgba(255,213,74,.5);

    margin-bottom:20px;

}

.hero-text h2{

    font-size:62px;

    margin-bottom:20px;

}

.hero-text p{

    font-size:22px;

    color:var(--gray);

    line-height:1.9;

    max-width:650px;

}

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

.buttons{

    display:flex;

    gap:22px;

    margin-top:45px;

}

.buttons button{

    padding:18px 40px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-size:18px;

    font-weight:bold;

    background:linear-gradient(45deg,var(--gold),#ffe47c);

    transition:.35s;

}

.buttons button:hover{

    transform:translateY(-5px);

    box-shadow:0 0 30px rgba(255,213,74,.65);

}

.outline{

    background:transparent !important;

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

    color:var(--gold);

}

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

.hero-image{

    flex:1;

    display:flex;

    justify-content:center;

    position:relative;

}

.hero-image::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    background:radial-gradient(circle,
    rgba(255,213,74,.25),
    transparent 70%);

    filter:blur(50px);

    z-index:-1;

}

.hero-image img{

    width:100%;

    max-width:650px;

    border-radius:28px;

    box-shadow:0 0 55px rgba(255,213,74,.35);

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

}

/*==============================
        FLOAT
===============================*/

@keyframes floatDog{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:1000px){

nav{

    flex-direction:column;

    height:auto;

    padding:20px;

    gap:20px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:20px;

}

.hero{

    flex-direction:column;

    text-align:center;

    padding-top:220px;

}

.hero-text h1{

    font-size:60px;

}

.hero-text h2{

    font-size:40px;

}

.hero-text p{

    font-size:18px;

    max-width:100%;

}

.hero-image{

    width:100%;

}

.buttons{

    justify-content:center;

    flex-wrap:wrap;

}

.logo span{

    font-size:28px;

}

}
/*======================================================
                GLOBAL SECTION
======================================================*/

.section{

    padding:120px 8%;

}

.section h2{

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

    color:#FFD54A;

    font-size:55px;

    margin-bottom:35px;

    text-align:center;

    text-shadow:0 0 18px rgba(255,213,74,.35);

}

.section p{

    color:#cfcfcf;

    font-size:20px;

    line-height:1.9;

    max-width:1000px;

    margin:auto;

    text-align:center;

}

/*======================================================
                TOKENOMICS
======================================================*/

.token-grid{

display:grid;

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

gap:35px;

margin-top:60px;

}

.card{

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

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

border-radius:22px;

padding:40px;

text-align:center;

transition:.4s;

backdrop-filter:blur(18px);

}

.card:hover{

transform:translateY(-12px);

box-shadow:0 0 35px rgba(255,213,74,.30);

border-color:#FFD54A;

}

.card h3{

font-size:30px;

color:#FFD54A;

margin-bottom:15px;

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

}

.card p{

font-size:19px;

}

/*======================================================
                ROADMAP
======================================================*/

.roadmap{

display:grid;

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

gap:35px;

margin-top:60px;

}

/*======================================================
                CHART
======================================================*/

.chart-box{

margin-top:60px;

height:500px;

border-radius:24px;

border:2px dashed rgba(255,213,74,.35);

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

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

color:#FFD54A;

background:#101010;

}

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

footer{

padding:80px 8%;

background:#000;

text-align:center;

border-top:1px solid rgba(255,213,74,.20);

}

footer h2{

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

color:#FFD54A;

margin-bottom:25px;

font-size:42px;

}

footer p{

color:#bfbfbf;

font-size:18px;

margin:12px 0;

}
/*======================================
        FEATURES SECTION
======================================*/

.feature-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.feature-card{

background:linear-gradient(180deg,#111,#0a0a0a);

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

border-radius:25px;

padding:40px;

text-align:center;

transition:.4s;

position:relative;

overflow:hidden;

}

.feature-card::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,213,74,.12),
transparent
);

transition:.7s;

}

.feature-card:hover::before{

left:100%;

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:0 0 35px rgba(255,213,74,.30);

border-color:#FFD54A;

}

.icon{

font-size:55px;

margin-bottom:20px;

}

.feature-card h3{

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

color:#FFD54A;

font-size:28px;

margin-bottom:15px;

}

.feature-card p{

font-size:18px;

color:#cfcfcf;

line-height:1.8;

}
/*=========================================
            GALLERY
=========================================*/

.gallery-text{

text-align:center;

max-width:900px;

margin:25px auto 60px;

font-size:20px;

color:#cfcfcf;

line-height:1.8;

}

.gallery-grid{

display:grid;

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

gap:30px;

}

.gallery-item{

overflow:hidden;

border-radius:25px;

cursor:pointer;

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

transition:.35s;

background:#111;

}

.gallery-item:hover{

transform:translateY(-10px);

box-shadow:0 0 35px rgba(255,213,74,.30);

}

.gallery-item img{

width:100%;

height:100%;

display:block;

transition:.6s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

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

#lightbox{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

display:none;

justify-content:center;

align-items:center;

z-index:999999;

}

#lightbox img{

max-width:90%;

max-height:90%;

border-radius:20px;

box-shadow:0 0 50px rgba(255,213,74,.45);

}

#closeLightbox{

position:absolute;

top:25px;

right:45px;

font-size:60px;

cursor:pointer;

color:white;

transition:.3s;

}

#closeLightbox:hover{

color:#FFD54A;

}

/*======================================
        LIVE CHART
======================================*/

.chart-container{

margin-top:50px;

background:#111;

padding:20px;

border-radius:25px;

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

box-shadow:0 0 35px rgba(255,213,74,.20);

overflow:hidden;

}

.chart-container iframe{

width:100%;

height:650px;

border:none;

border-radius:18px;

background:#000;

}

.chart-container:hover{

box-shadow:0 0 45px rgba(255,213,74,.35);

transition:.4s;

}
/*========================================
          COMMUNITY SECTION
========================================*/

.community-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.community-card{

background:#111;

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

border-radius:25px;

padding:40px;

text-align:center;

text-decoration:none;

color:white;

transition:.4s;

}

.community-card:hover{

transform:translateY(-10px);

border-color:#FFD54A;

box-shadow:0 0 35px rgba(255,213,74,.30);

}

.community-icon{

font-size:60px;

margin-bottom:20px;

}

.community-card h3{

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

color:#FFD54A;

margin-bottom:15px;

font-size:26px;

}

.community-card p{

color:#cfcfcf;

line-height:1.8;

font-size:18px;

}
/*======================================
        CONTRACT SECTION
======================================*/

.contract-box{

max-width:900px;

margin:50px auto;

display:flex;

gap:20px;

flex-wrap:wrap;

justify-content:center;

}

.contract-box input{

flex:1;

min-width:300px;

padding:20px;

background:#111;

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

border-radius:15px;

color:white;

font-size:18px;

}

.contract-box button{

padding:20px 35px;

background:linear-gradient(90deg,#FFD54A,#ffe88c);

border:none;

border-radius:15px;

font-weight:bold;

cursor:pointer;

font-size:18px;

}

.contract-box button:hover{

box-shadow:0 0 30px rgba(255,213,74,.4);

}
/*======================================
        PROJECT STATS
======================================*/

.stats-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.stat-card{

background:linear-gradient(180deg,#111,#0a0a0a);

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

border-radius:25px;

padding:45px;

text-align:center;

transition:.4s;

}

.stat-card:hover{

transform:translateY(-12px);

border-color:#FFD54A;

box-shadow:0 0 35px rgba(255,213,74,.35);

}

.stat-card h3{

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

font-size:52px;

color:#FFD54A;

margin-bottom:15px;

text-shadow:0 0 25px rgba(255,213,74,.4);

}

.stat-card p{

font-size:20px;

color:#d8d8d8;

}
/*======================================
        ROADMAP TIMELINE
======================================*/

.timeline{

position:relative;

max-width:900px;

margin:70px auto;

padding-left:40px;

}

.timeline::before{

content:"";

position:absolute;

left:15px;

top:0;

width:4px;

height:100%;

background:linear-gradient(#FFD54A,#29ff78);

border-radius:5px;

}

.timeline-item{

position:relative;

margin-bottom:60px;

}

.timeline-dot{

position:absolute;

left:-34px;

top:10px;

width:24px;

height:24px;

background:#FFD54A;

border-radius:50%;

box-shadow:0 0 20px rgba(255,213,74,.8);

}

.timeline-content{

background:#111;

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

padding:30px;

border-radius:20px;

transition:.4s;

}

.timeline-content:hover{

transform:translateX(10px);

box-shadow:0 0 35px rgba(255,213,74,.3);

}

.timeline-content h3{

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

color:#FFD54A;

margin-bottom:20px;

font-size:28px;

}

.timeline-content ul{

padding-left:20px;

}

.timeline-content li{

margin-bottom:12px;

color:#d9d9d9;

font-size:18px;

}

/*======================================
        WHITEPAPER
======================================*/

.whitepaper-container{

display:grid;

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

gap:35px;

margin-top:60px;

}

.whitepaper-card{

background:linear-gradient(180deg,#111,#090909);

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

padding:35px;

border-radius:22px;

transition:.4s;

}

.whitepaper-card:hover{

transform:translateY(-10px);

border-color:#FFD54A;

box-shadow:0 0 35px rgba(255,213,74,.35);

}

.whitepaper-card h3{

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

color:#FFD54A;

font-size:26px;

margin-bottom:18px;

}

.whitepaper-card p{

color:#d4d4d4;

line-height:1.9;

font-size:18px;

}

.whitepaper-card ul{

padding-left:20px;

}

.whitepaper-card li{

margin-bottom:12px;

font-size:18px;

color:#d4d4d4;

}