/* Hide by default */
.mobile-notice{
    display:none;
}

/* Mobile Devices */
@media (max-width:1023px){

    body{
        overflow:hidden;
    }

    .mobile-notice{
        display:flex;
        position:fixed;
        inset:0;
        width:100%;
        height:100vh;
        background:#0B0B0B;
        color:#fff;
        justify-content:center;
        align-items:center;
        text-align:center;
        padding:30px;
        z-index:999999;
    }

    .mobile-notice-content{
        max-width:420px;
    }

    .mobile-notice h1{
        color:#1490E8;
        font-size:32px;
        margin-bottom:20px;
    }

    .mobile-notice h2{
        font-size:26px;
        margin-bottom:18px;
    }

    .mobile-notice p{
        color:#bdbdbd;
        line-height:1.8;
        font-size:17px;
    }

    .thanks{
        margin-top:25px;
        color:#1490E8;
        font-weight:600;
    }

    /* Hide Website */
    header,
    main,
    footer{
        display:none;
    }
}

/* =====================================================
   1440px
===================================================== */

@media (max-width:1440px){

    .container{
        max-width:1200px;
    }

    .hero-wrapper{
        gap:50px;
    }

    .hero-content h1{
        font-size:52px;
    }

    .hero-image img{
        width:100%;
        max-width:560px;
        margin-left:auto;
    }

}


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

@media (max-width:1200px){

    .container{
        max-width:100%;
        padding:0 40px;
    }

    .hero-wrapper{
        gap:40px;
    }

    .hero-content h1{
        font-size:46px;
    }

    .hero-content p{
        font-size:18px;
    }

}


/* =====================================================
   1024px
===================================================== */

@media (max-width:1024px){

    #hero{
        min-height:auto;
        padding:170px 0 90px;
    }

    .hero-wrapper{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-content{
        max-width:100%;
        order:1;
    }

    .hero-image{
        order:2;
    }

    .hero-content h1{
        font-size:42px;
        margin:auto;
    }

    .hero-content p{
        margin:25px auto;
        max-width:700px;
    }

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

    .hero-image img{
        max-width:600px;
        margin:50px auto 0;
    }

}


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

@media (max-width:768px){

    #hero{
        padding:150px 0 80px;
    }

    .container{
        padding:0 25px;
    }

    .hero-content h1{
        font-size:36px;
    }

    .hero-content p{
        font-size:17px;
        line-height:1.8;
    }

    .hero-buttons{
        gap:15px;
    }

    .hero-buttons a{
        width:100%;
    }

}


/* =====================================================
   480px
===================================================== */

@media (max-width:480px){

    .container{
        padding:0 20px;
    }

    .hero-badge{
        font-size:13px;
    }

    .hero-content h1{
        font-size:30px;
        line-height:1.2;
    }

    .hero-content p{
        font-size:16px;
    }

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

    .floating-card{
        display:none;
    }

}