/* ==========================================
   Home Page
========================================== */

.home-page{

    min-height:100vh;

    display:flex;

    border-radius:14px;

    overflow:hidden;

    justify-content:center;

    padding:80px 20px;

    background:
        radial-gradient(circle at top right,#DDF7F6 0%,transparent 30%),
        radial-gradient(circle at bottom left,#EAF6FF 0%,transparent 35%),
        var(--signin-background);

}

/* ==========================================
   Wrapper
========================================== */

.home-wrapper{

    width:100%;

    max-width:1450px;

}

/* ==========================================
   Card
========================================== */

.home-card{

    position:relative;

    overflow:hidden;

    background:var(--signin-white);

    border:1px solid var(--signin-border);

    border-radius:28px;

    padding:50px;

    box-shadow:
        0 20px 60px rgba(15,23,42,.08),
        0 5px 12px rgba(15,23,42,.04);

}

.home-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:rgba(10,147,150,.08);

}

.home-card::after{

    content:"";

    position:absolute;

    width:170px;

    height:170px;

    left:-90px;

    bottom:-90px;

    border-radius:50%;

    background:rgba(56,189,248,.08);

}

/* ==========================================
   Large Desktop (1400px+)
========================================== */

@media (min-width:1400px){

    .home-wrapper{

        max-width:1450px;

    }

}


/* ==========================================
   Desktop (1200px–1399px)
========================================== */

@media (min-width:1200px) and (max-width:1399.98px){

    .home-wrapper{

        max-width:1200px;

    }

    .home-card{

        padding:50px;

    }

}


/* ==========================================
   Tablet Landscape (992px–1199px)
========================================== */

@media (min-width:992px) and (max-width:1199.98px){

    .home-wrapper{

        max-width:960px;

    }

    .home-page{

        padding:60px 20px;

    }

    .home-card{

        padding:40px;

        border-radius:24px;

    }

}


/* ==========================================
   Tablet Portrait (768px–991px)
========================================== */

@media (min-width:768px) and (max-width:991.98px){

    .home-wrapper{

        max-width:720px;

    }

    .home-page{

        padding:50px 18px;

    }

    .home-card{

        padding:35px;

        border-radius:22px;

    }

}


/* ==========================================
   Mobile (576px–767px)
========================================== */

@media (min-width:576px) and (max-width:767.98px){

    .home-page{

        padding:40px 16px;

    }

    .home-card{

        padding:28px;

        border-radius:20px;

    }

}


/* ==========================================
   Small Mobile (<576px)
========================================== */

@media (max-width:575.98px){

    .home-page{

        padding:30px 12px;

    }

    .home-card{

        padding:22px;

        border-radius:18px;

    }

}