/* ===================================================================
   SHADOW WOLVES NETWORK
   RESPONSIVE.CSS
   Version 2.0
   =================================================================== */


/* ===================================================================
   1400px
   =================================================================== */

@media (max-width:1400px){

    .container{

        width:min(1200px,94%);

    }

    .hero-grid{

        gap:60px;

    }

    .project-section{

        gap:60px;

    }

    .community-grid{

        gap:60px;

    }

}


/* ===================================================================
   1200px
   =================================================================== */

@media (max-width:1200px){

    section{

        padding:100px 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

        gap:60px;

    }

    .hero-content{

        align-items:center;

    }

    .hero-text{

        margin:0 auto;

        max-width:700px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-features{

        max-width:700px;

        margin:40px auto 0;

    }

    .hero-logo{

        order:-1;

    }

    .hero-logo img{

        max-width:420px;

    }

    .network-core img{

        max-width:100%;

    }

    .project-section,

    .project-section.reverse{

        grid-template-columns:1fr;

        gap:45px;

    }

    .project-section.reverse .project-banner,

    .project-section.reverse .project-info{

        order:initial;

    }

    .community-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .legal-hero-grid{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .footer-grid{

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

        gap:40px;

    }

}
/* ===================================================================
   992px
   =================================================================== */

@media (max-width:992px){

    header{

        height:80px;

    }

    header .container{

        height:80px;

    }

    .menu-toggle{

        display:flex;

    }

    nav{

        position:fixed;

        top:80px;

        left:0;

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:24px;

        padding:40px 25px;

        background:#08111D;

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

        transform:translateY(-120%);

        opacity:0;

        visibility:hidden;

        transition:var(--transition);

        z-index:999;

    }

    nav.active{

        transform:translateY(0);

        opacity:1;

        visibility:visible;

    }

    nav a{

        font-size:1rem;

    }

    .hero-buttons{

        flex-wrap:wrap;

    }

    .hero-features{

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

        gap:18px;

    }

    .network-status{

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

    }

    .project-features{

        grid-template-columns:1fr;

    }

    .community-stats{

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

    }

    .highlight-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

    .legal-card{

        padding:35px;

    }

    .discord-box{

        padding:60px 40px;

    }

    .about-box{

        padding:45px;

    }

}
/* ===================================================================
   768px
   =================================================================== */

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.5rem;

    }

    p{

        font-size:1rem;

    }

    .container{

        width:92%;

    }

    .hero-logo img{

        max-width:340px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

        justify-content:center;

    }

    .hero-features{

        grid-template-columns:1fr;

    }

    .network-status{

        grid-template-columns:1fr;

    }

    .project-banner img{

        border-radius:22px;

    }

    .community-stats{

        grid-template-columns:1fr;

    }

    .stat-card{

        text-align:center;

    }

    .discord-box{

        padding:50px 30px;

    }

    .about-box{

        padding:40px 30px;

    }

    .legal-card{

        padding:30px;

    }

    .legal-highlight{

        padding:45px 30px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand{

        align-items:center;

    }

    .footer-logo{

        justify-content:center;

    }

    .footer-links{

        align-items:center;

    }

    .footer-social{

        justify-content:center;

    }

}
/* ===================================================================
   576px
   =================================================================== */

@media (max-width:576px){

    header{

        height:70px;

    }

    header .container{

        height:70px;

    }

    nav{

        top:70px;

        padding:30px 20px;

    }

    .logo{

        gap:12px;

    }

    .logo img{

        width:48px;

        height:48px;

    }

    .logo-title{

        font-size:1rem;

    }

    .logo-subtitle{

        font-size:.62rem;

        letter-spacing:.25em;

    }

    h1{

        font-size:2.3rem;

    }

    h2{

        font-size:1.7rem;

    }

    h3{

        font-size:1.3rem;

    }

    .hero-logo img{

        max-width:280px;

    }

    .hero-text{

        font-size:.95rem;

    }

    .status{

        font-size:.72rem;

        padding:8px 16px;

    }

    .btn{

        width:100%;

        padding:15px 22px;

    }

    .project-info{

        gap:18px;

    }

    .project-info span{

        font-size:.68rem;

    }

    .discord-box{

        padding:40px 20px;

    }

    .about-box{

        padding:35px 20px;

    }

    .legal-card{

        padding:25px;

    }

    .legal-highlight{

        padding:35px 20px;

    }

    .highlight-grid{

        gap:15px;

    }

}


/* ===================================================================
   420px
   =================================================================== */

@media (max-width:420px){

    .container{

        width:94%;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.45rem;

    }

    p{

        font-size:.92rem;

    }

    .logo img{

        width:42px;

        height:42px;

    }

    .logo-title{

        font-size:.9rem;

    }

    .logo-subtitle{

        font-size:.55rem;

    }

    .hero-logo img{

        max-width:220px;

    }

    .footer-logo img{

        width:55px;

        height:55px;

    }

}


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

@media (hover:none){

    .btn:hover,
    .project-banner:hover img,
    .stat-card:hover,
    .legal-card:hover,
    .content-box:hover{

        transform:none;

    }

}


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

@media print{

    header,
    footer,
    .menu-toggle,
    .background-grid,
    .background-glow,
    .scroll-down,
    .scroll-top{

        display:none !important;

    }

    body{

        background:#ffffff !important;

        color:#000000 !important;

        font-size:12pt;

    }

    a{

        color:#000000 !important;

        text-decoration:underline;

    }

}


/* ===================================================================
   END OF FILE

   Shadow Wolves Network
   responsive.css
   Version 2.0
   =================================================================== */