/* ==========================================================
   SUPMODZ DESIGNS
   Responsive
========================================================== */

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

@media (max-width:1400px){

    .hero h1{
        font-size:3.5rem;
    }

}

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

@media (max-width:1200px){

    .hero h1{
        font-size:3rem;
    }

    .stats{
        grid-template-columns:repeat(3,1fr);
    }

}

/* ==========================
   TABLETS
========================== */

@media (max-width:992px){

    :root{
        --iframe-scale:.20;
    }

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    .hero{
        min-height:auto;
        padding:120px 20px 80px;
    }

    .hero h1{
        font-size:2.6rem;
    }

    .hero p{
        font-size:1rem;
    }

    .navbar{
        background:rgba(5,5,15,.95);
    }

    .project{
        margin-bottom:30px;
    }

    .iframe-wrapper{
        height:240px;
    }

    .project-info{
        padding:20px;
    }

    .stats{
        grid-template-columns:1fr;
        gap:20px;
    }

    .twitch-grid{
        grid-template-columns:1fr;
    }

}

/* ==========================
   MÓVILES
========================== */

@media (max-width:768px){

    :root{
        --iframe-scale:.16;
    }

    section{
        padding:60px 15px;
    }

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    .hero{
        padding:100px 15px 50px;
    }

    .hero h1{
        font-size:2rem;
        line-height:1.2;
    }

    .hero p{
        font-size:.95rem;
    }

    h2{
        font-size:2rem !important;
    }

    .project{
        margin-bottom:25px;
    }

    .project-card{
        border-radius:15px;
    }

    .iframe-wrapper{
        height:180px;
    }

    .project-info{
        padding:18px;
    }

    .project-info h3{
        font-size:1.15rem;
    }

    .project-info p{
        font-size:.92rem;
        min-height:auto;
    }

    .project-info .btn{
        width:100%;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .stream-card iframe{
        height:220px;
    }

    footer{
        font-size:.9rem;
    }

}

/* ==========================
   MÓVILES PEQUEÑOS
========================== */

@media (max-width:480px){

    :root{
        --iframe-scale:.12;
    }

    .container{
        padding-left:10px;
        padding-right:10px;
    }

    .hero{
        padding:90px 10px 40px;
    }

    .hero h1{
        font-size:1.6rem;
    }

    .hero p{
        font-size:.9rem;
    }

    .navbar-brand{
        font-size:1rem;
    }

    .navbar .nav-link{
        margin-left:0;
        text-align:center;
    }

    #search{
        font-size:.9rem;
    }

    .iframe-wrapper{
        height:140px;
    }

    .project-info{
        padding:15px;
    }

    .project-info h3{
        font-size:1rem;
    }

    .project-info p{
        font-size:.85rem;
    }

    .badge{
        font-size:.75rem;
    }

    .stats div{
        padding:20px;
    }

    .stats h2{
        font-size:2rem;
    }

    .stream-card h4{
        font-size:1rem;
    }

    .stream-card iframe{
        height:180px;
    }

    footer{
        font-size:.8rem;
    }

}

/* ==========================
   MÓVILES MUY PEQUEÑOS
========================== */

@media (max-width:360px){

    :root{
        --iframe-scale:.10;
    }

    .hero h1{
        font-size:1.35rem;
    }

    .hero p{
        font-size:.85rem;
    }

    .iframe-wrapper{
        height:120px;
    }

    .project-info{
        padding:12px;
    }

    .project-info h3{
        font-size:.95rem;
    }

    .project-info p{
        font-size:.8rem;
    }

    .btn{
        font-size:.85rem;
        padding:10px;
    }

    .stream-card iframe{
        height:160px;
    }

}

/* ==========================
   PANTALLAS BAJAS
========================== */

@media (max-height:700px){

    .hero{
        min-height:auto;
        padding:100px 20px 60px;
    }

}