*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family: 'Manrope', sans-serif;
    background:#EAF6FB;
    color:#0A1B2A;
    font-weight:400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
.page-wrapper{
    max-width:100%;
    margin:auto;
    padding:20px 4%;
    /*min-height:100vh;*/
    height:auto;
}

.top-header{
    display:flex;
    justify-content:flex-end;
    margin-bottom:30px;
}

.top-header img{
    width:200px;
}

.hero-section{
    display:grid;
    grid-template-columns:1fr 0.9fr;
    gap:80px;
    align-items:start;
}

.welcome-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#fff;
    padding:8px 12px;
    border-radius:50px;
    margin-bottom:30px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#2db94d;
}

.left-panel h1{
    font-size:clamp(3rem,6vw,5rem);
    line-height:1.05;
    margin-bottom:20px;
    font-weight:800;
}

.left-panel h1 span{
    display:block;
    background:linear-gradient(90deg,#0A6DDC,#49BF4D);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}



.features{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:35px;
}

.features div{
    font-size:1rem;
    color:#006FD6;
    font-weight:500;
    display: flex;
    justify-items: center;
    align-items: center;
}
.features div img{
    width: 20px;
    margin-right: 0.4rem;
}

.promo-card{
    overflow:hidden;
    background:white;
    box-shadow:0 15px 30px rgba(0,0,0,.08);
    border-radius: 35px 155px 35px 35px;
}

.promo-card a{
    text-decoration: none !important;
}

.promo-image{
    max-width: 600px;
    width: 100%;
    display: block;
    height: 349px;
    object-fit: cover;
    border-radius: 0 155px 0 0;
}

.promo-content{
    background: linear-gradient(90deg, #0070BA 0.05%, #0070BA 35.12%, #FFF 100.53%);
    display:flex;
    align-items:center;
    padding:20px;
    justify-content: center;
    cursor: pointer;
    transition: background-position 0.6s ease;
}
.promo-content:hover{
    background: linear-gradient(90deg, #0070BA 0.05%, #0070BA 35.12%, #0070BA 100.53%);
}



.promo-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#0D89FF;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:28px;
}

.promo-text{
    flex:1;
    margin-left:15px;
}

.promo-text h3{
    color:white;
    font-size:1.8rem;
}

.promo-text p{
    color:white;
    margin-top:5px;
}

.arrow-btn{

}

.right-panel{



}
.right-panel-inner{
    background:rgba(255,255,255,.15);
    border-radius:35px;
    padding:10px;
    margin-top: 5%;
    border: 1px solid rgba(0, 112, 186, 0.07);
}

.login-card{
    background:white;
    border-radius:28px;
    padding:24px;
    display:flex;
    gap:20px;
    margin-bottom:12px;
    align-items:flex-start;
    animation: fadeUp 0.6s ease-in forwards;
    cursor: pointer;
    text-decoration: none;
}
.login-card:hover {
    transform: scale(1.01);
    border: 1px solid #4DB848;
    outline: rgba(0, 112, 186, 0.25) solid 3px;
    outline-offset: 2px;


}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card:hover .card-content a{
     text-decoration: underline;
     margin-right: 1rem;
     color: #4DB848;
 }
.login-card:hover .card-content h3{
    color: #0070BA;
}

.login-card .card-content img {
    transition: margin-left 0.3s ease;
}
.login-card:hover .card-content img{
    margin-left: 0.7rem;
}



.login-card:hover::before,
.login-card:hover::after {
    transform: scaleX(1);
}

.login-card:nth-child(1) { animation-delay: 0.2s; }

.login-card:nth-child(2) { animation-delay: 0.35s; }

.login-card:nth-child(3) { animation-delay: 0.5s; }

.login-card:nth-child(4) { animation-delay: 0.65s;margin-bottom: 0 }

.card-icon{
    width:62px;
    height:62px;
    flex-shrink:0;
}

.card-icon img{
    width:100%;
}

.card-content h3{
    font-size:1.4rem;
    margin-bottom:10px;
}

.card-content p{
    color:#555;
    line-height:1.6;
    margin-bottom:15px;
}

.card-content .a{
    color:#1C58D8;
    font-weight:700;
    text-decoration:none;
    text-align: center;
    display: flex;

}
.card-content .a img{
    margin-left: 0.5rem;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;
    margin-top:25px;
}

.footer-links a{
    color:#333;
    text-decoration:none;
    font-size:12px;
}

.page-footer{
    border-top:1px solid #d9e7ef;
    margin-top:50px;
    padding-top:25px;
    text-align:center;

}

.page-footer p{
    color:#5d6873;
}

.page-footer p.child-1{
    display: flex;
    justify-items: center;
    justify-content: center;
    align-items: center;
}

.page-footer p.child-1 img{
    margin-right: 0.2rem;
}

.copyright{
    margin-top:10px;
}

.copyright{
    font-size:14px;
    font-weight:500;
    color:#2F3B4A;

}

.copyright-link{

    color:#0066C6;

    font-weight:600;

    text-decoration:none;

}

.copyright-link:hover{

    text-decoration:underline;

}
/* Tablet */

@media (max-width:1200px){

    .hero-section{
        grid-template-columns:1fr;
        gap: 5px !important;
    }
    .right-panel-inner{
        margin-top: 0 !important;
    }

    .promo-card{
        display: none !important;
    }
    .promo-card.mobile {
        display: block !important;
        margin: 0 auto;
    }

    .right-panel{
        max-width:900px;
        width:100%;
    }
}


.promo-card.mobile{
    display: none;
}
/* Mobile */

@media (max-width:768px){

    .promo-card{
        display: none !important;
    }
    .promo-card.mobile {
        display: block !important;
        margin: 0 auto;
    }
    .right-panel-inner{
        margin-top: 0 !important;
    }

    .page-wrapper{
        width: 100%;
        padding: 4px !important;
    }
    .hero-section{
        gap:5px;
    }
    .welcome-badge{
        max-width: 200px;
        display: flex;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
    }



    .left-panel h1{
        text-align: center;
        align-items: center;
    }
    .description{
        text-align: center;
        font-size: 1.1rem !important;
    }

    .left-panel h1{
        font-size:3rem;
    }

    .features{
        flex-direction:row;
        gap:15px;
        align-items: center;
        justify-content: center;
    }

    .login-card{
        flex-direction:column;
        text-align:center;
        align-items:center;
        text-decoration: none;
    }
    .card-content h3{
        font-size:1.4rem !important;
    }

    .card-content p{
        font-size:1.1rem !important;
    }

    .card-content a{
        font-size:1.1rem !important;
        align-items: center;
        width: 100%;
        justify-content: center;

    }

    .promo-content{
        flex-wrap:wrap;
        gap:15px;
    }

    .footer-links{
        flex-direction:row;
        gap:12px;
    }

    .top-header{
        justify-content:right;
    }
}


/* =========================
   GLOBAL TYPOGRAPHY
========================= */

body{
    font-family: 'Manrope', sans-serif;
    background:#EAF6FB;
    color:#0A1B2A;
    font-size:16px;
    font-weight:500;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

/* =========================
   HERO TITLE
========================= */

.left-panel h1{
    font-family:'Manrope', sans-serif;
    font-size:clamp(3.5rem,5vw,5.75rem);
    line-height:0.95;
    font-weight:800;
    letter-spacing:-0.06em;
    margin-bottom:12px;
    color:#001426;
}

.left-panel h1 span{
    display:block;
    font-weight:800;
    background:linear-gradient(
            90deg,
            #0066C6 0%,
            #2F9D63 100%
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* =========================
   WELCOME BADGE
========================= */

.welcome-badge{
    font-family:'Manrope', sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:-0.01em;
}

/* =========================
   DESCRIPTION
========================= */

.description{
    font-family:'Manrope', sans-serif;
    font-size:0.9rem;
    font-weight:500;
    line-height:1.5;
    letter-spacing: 0.2px;
    color:#34495E;
    max-width:650px;
    margin-bottom:12px;
}

/* =========================
   FEATURES
========================= */

.features div{
    font-family:'Manrope', sans-serif;
    font-size:14px;
    font-weight:600;
    color:#006FD6;
}

/* =========================
   LOGIN CARDS
========================= */

.card-content h3{
    font-family:'Manrope', sans-serif;
    font-size:1rem;
    font-weight:700;
    line-height:1.3;
    letter-spacing:-0.02em;
    color:#0A1B2A;
    margin-bottom:8px;
}

.card-content p{
    font-family:'Manrope', sans-serif;
    font-size:0.8rem;
    font-weight:500;
    line-height:1.6;
    color:#5F6B7A;
    margin-bottom:14px;
}

.card-content a{
    font-family:'Manrope', sans-serif;
    font-size:0.9rem;
    font-weight:700;
    color:#1C58D8;
    text-decoration:none;
}

/* =========================
   SELF ONBOARDING CARD
========================= */

.promo-text h3{
    font-family:'Manrope', sans-serif;
    font-size:1.75rem;
    font-weight:700;
    line-height:1.2;
    letter-spacing: -0.1px !important;
    color:#ffffff;
}

.promo-text p{
    font-family:'Manrope', sans-serif;
    font-size:1.05rem;
    font-weight:500;
    text-space: 0.2;
    line-height:1.5;
    background: linear-gradient(
            90deg,
            #E8FFFF 0%,
            #55FFF2 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
}

/* =========================
   FOOTER LINKS
========================= */

.footer-links a{
    font-family:'Manrope', sans-serif;
    font-size:14px;
    font-weight:500;
    color:#425466;
    text-decoration:none;
}

.footer-links a:hover{
    color:#0066C6;
}

/* =========================
   COPYRIGHT
========================= */

.page-footer p{
    font-family:'Manrope', sans-serif;
    font-size:14px;
    font-weight:500;
    color:#6B7785;
}

.copyright{
    font-weight:600;
}


/*=====================

 */
/* Hero Section Animation */

.welcome-badge{
    opacity:0;
    animation:slideInLeft 0.8s ease forwards;
}

.left-panel h1{
    opacity:0;
    animation:slideInLeft 0.8s ease forwards;
    animation-delay:0.2s;
}

.description{
    opacity:0;
    animation:slideInLeft 0.8s ease forwards;
    animation-delay:0.4s;
}

.features{
    opacity:0;
    animation:slideInLeft 0.8s ease forwards;
    animation-delay:0.6s;
}

.promo-card{
    opacity:0;
    animation:slideUp 1s ease forwards;
    animation-delay:0.8s;
    max-width: 600px;
    width: 100%;
}

/* Keyframes */

@keyframes slideInLeft{
    from{
        opacity:0;
        transform:translateX(-50px);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

@keyframes slideUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}