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

/* ---------- Large Tablets ---------- */

@media (max-width: 1200px){

    .container{
        width:92%;
    }

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

}

/* ---------- Tablets ---------- */

@media (max-width: 992px){

    .navbar .container{
        flex-direction:column;
        gap:20px;
    }

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:60px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .legend-grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .traits-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-top{
        flex-direction:column;
        text-align:center;
    }

}

/* ---------- Mobile ---------- */

@media (max-width:768px){

    section{
        padding:90px 0;
    }

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

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

    .hero-image{
        max-width:100%;
    }

    .market-strip .container{
        flex-direction:column;
        gap:25px;
    }

    .market-divider{
        display:none;
    }

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

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

    .contract-box{
        flex-direction:column;
        text-align:center;
    }

    .contract-box button{
        width:100%;
    }

    .contract-buttons{
        flex-direction:column;
    }

    .join-buttons{
        flex-direction:column;
    }

    .footer-social{
        justify-content:center;
    }

}

/* ---------- Small Phones ---------- */

@media (max-width:480px){

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

    .section-heading h2{
        font-size:2rem;
    }

    .btn{
        width:100%;
        text-align:center;
    }

    .floating-buy{

        right:15px;
        left:15px;
        bottom:20px;

        text-align:center;

        border-radius:16px;

    }

    .contract-card{

        padding:35px 20px;

    }

    .footer-brand{

        flex-direction:column;

    }

}