/*=========================================================
    LOGIN SECTION
=========================================================*/

.login-section{

    position:relative;

    width:100%;

    padding:90px 0;

    overflow:hidden;

    background:
    linear-gradient(
    135deg,
    #eef6d8 0%,
    #f7fbef 50%,
    #edf6d3 100%);

}


/*=========================================================
    BACKGROUND
=========================================================*/

.login-bg{

    position:absolute;

    border-radius:50%;

    filter:blur(110px);

    opacity:.20;

    pointer-events:none;

}

.login-bg-1{

    width:420px;
    height:420px;

    top:-180px;
    left:-150px;

    background:#a4c639;

}

.login-bg-2{

    width:320px;
    height:320px;

    right:-120px;
    top:180px;

    background:#7da421;

}

.login-bg-3{

    width:380px;
    height:380px;

    bottom:-180px;
    left:45%;

    background:#c7e36b;

}


/*=========================================================
    WRAPPER
=========================================================*/

.login-wrapper{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1320px;

    margin:auto;

    display:grid;

    grid-template-columns:430px 1fr;

    border-radius:28px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:

    0 20px 60px rgba(0,0,0,.08),

    0 35px 80px rgba(0,0,0,.06);

}


/*=========================================================
    LEFT PANEL
=========================================================*/

.login-side{

    position:relative;

    overflow:hidden;

    padding:65px 45px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:

    linear-gradient(
    160deg,
    #a4c639 0%,
    #7da421 100%);

    color:#fff;

}


/*=========================================================
    LOGO
=========================================================*/

.login-brand{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:45px;

}

.login-brand-icon{

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(15px);

}

.login-brand-icon i{

    font-size:30px;

    color:#fff;

}

.login-brand-text h2{

    margin:0;

    color:#fff;

    font-size:28px;

    font-weight:700;

}

.login-brand-text span{

    display:block;

    margin-top:4px;

    color:rgba(255,255,255,.80);

    font-size:15px;

}


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

.login-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    width:max-content;

    padding:13px 22px;

    margin-bottom:35px;

    border-radius:50px;

    background:rgba(255,255,255,.14);

    backdrop-filter:blur(10px);

    font-size:14px;

    font-weight:600;

}

.login-badge i{

    font-size:17px;

}


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

.login-title{

    margin:0 0 20px;

    color:#fff;

    font-size:38px;

    font-weight:700;

    line-height:1.35;

}

.login-description{

    margin:0 0 45px;

    color:rgba(255,255,255,.90);

    line-height:1.9;

    font-size:15px;

}


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

.login-features{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.login-feature{

    display:flex;

    gap:18px;

    padding:18px;

    border-radius:18px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(12px);

    transition:.35s;

}

.login-feature:hover{

    transform:translateX(10px);

    background:rgba(255,255,255,.16);

}

.login-feature-icon{

    width:52px;

    min-width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:rgba(255,255,255,.14);

}

.login-feature-icon i{

    font-size:22px;

    color:#fff;

}

.login-feature-content h4{

    margin:2px 0 6px;

    color:#fff;

    font-size:17px;

    font-weight:600;

}

.login-feature-content p{

    margin:0;

    color:rgba(255,255,255,.82);

    font-size:14px;

    line-height:1.7;

}


/*=========================================================
    RIGHT PANEL
=========================================================*/

.login-card{

    padding:65px 60px;

    background:#ffffff;

}

/*=========================================================
    HEADER
=========================================================*/

.login-card-header{

    margin-bottom:40px;

}

.login-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    margin-bottom:18px;

    border-radius:50px;

    background:#eef6d8;

    color:#7da421;

    font-size:14px;

    font-weight:700;

}

.login-card-header h2{

    margin:0 0 12px;

    color:#1f2937;

    font-size:40px;

    font-weight:700;

}

.login-card-header p{

    margin:0;

    color:#6b7280;

    line-height:1.8;

    font-size:15px;

}


/*=========================================================
    FORM
=========================================================*/

.login-form{

    width:100%;

}

.login-group{

    margin-bottom:25px;

}

.login-group label{

    display:block;

    margin-bottom:10px;

    color:#374151;

    font-size:15px;

    font-weight:600;

}


/*=========================================================
    INPUT
=========================================================*/

.login-input{

    position:relative;

    display:flex;

    align-items:center;

    width:100%;

    height:62px;

    padding:0 18px;

    border:2px solid #d8e5b2;

    border-radius:16px;

    background:#ffffff;

    transition:.35s;

}

.login-input:hover{

    border-color:#a4c639;

}

.login-input:focus-within{

    border-color:#a4c639;

    box-shadow:0 0 0 5px rgba(164,198,57,.18);

}

.login-input>i{

    width:22px;

    margin-right:15px;

    text-align:center;

    color:#8aac25;

    font-size:18px;

}

.login-input input{

    flex:1;

    width:100%;

    height:100%;

    border:none;

    outline:none;

    background:transparent;

    font-size:15px;

    color:#1f2937;

    box-shadow:none;

}

.login-input input::placeholder{

    color:#9ca3af;

}


/*=========================================================
    PASSWORD BUTTON
=========================================================*/

.login-password-toggle{

    width:42px;

    height:42px;

    margin-left:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    border-radius:12px;

    background:transparent;

    cursor:pointer;

    transition:.30s;

}

.login-password-toggle i{

    color:#7b8794;

    font-size:16px;

}

.login-password-toggle:hover{

    background:#eef6d8;

}

.login-password-toggle:hover i{

    color:#7da421;

}


/*=========================================================
    OPTIONS
=========================================================*/

.login-options{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:30px 0;

}

.login-checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

    color:#4b5563;

    font-size:14px;

    user-select:none;

}

.login-checkbox input{

    width:18px;

    height:18px;

    accent-color:#a4c639;

}

.login-forgot{

    color:#7da421;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    transition:.30s;

}

.login-forgot:hover{

    color:#5f8613;

}


/*=========================================================
    BUTTONS
=========================================================*/

.login-submit,
.login-biometrics,
.login-mobile{

    width:100%;

    height:60px;

    border:none;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.login-submit{

    margin-bottom:22px;

    color:#fff;

    background:linear-gradient(135deg,#a4c639,#7da421);

}

.login-submit:hover{

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(164,198,57,.35);

}

.login-biometrics{

    margin-bottom:16px;

    color:#7da421;

    background:#f7fbef;

    border:1px solid #d8e5b2;

}

.login-biometrics:hover{

    background:#eef6d8;

}

.login-mobile{

    color:#fff;

    background:#1f2937;

}

.login-mobile:hover{

    background:#111827;

}

.login-submit i,
.login-biometrics i,
.login-mobile i{

    font-size:18px;

}


/*=========================================================
    DIVIDER
=========================================================*/

.login-divider{

    display:flex;

    align-items:center;

    margin:28px 0;

}

.login-divider::before,
.login-divider::after{

    content:"";

    flex:1;

    height:1px;

    background:#d8e5b2;

}

.login-divider span{

    padding:0 18px;

    color:#7da421;

    font-size:14px;

    font-weight:600;

}


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

.login-footer{

    margin-top:30px;

    text-align:center;

}

.login-footer p{

    margin:0 0 8px;

    color:#6b7280;

    font-size:15px;

}

.login-footer a{

    color:#7da421;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.30s;

}

.login-footer a:hover{

    color:#5f8613;

}

/*=========================================================
    ANIMATIONS
=========================================================*/

@keyframes loginFadeUp{

    from{

        opacity:0;
        transform:translateY(40px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes loginFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes loginPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

.login-wrapper{

    animation:loginFadeUp .8s ease;

}

.login-brand-icon{

    animation:loginPulse 5s infinite;

}

.login-bg-1{

    animation:loginFloat 14s ease-in-out infinite;

}

.login-bg-2{

    animation:loginFloat 18s ease-in-out infinite reverse;

}

.login-bg-3{

    animation:loginFloat 20s ease-in-out infinite;

}

.login-feature{

    animation:loginFadeUp .8s ease;

}

.login-group{

    animation:loginFadeUp .8s ease;

}

.login-submit,
.login-biometrics,
.login-mobile{

    overflow:hidden;

    position:relative;

}

.login-submit::before,
.login-biometrics::before,
.login-mobile::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent);

    transition:.8s;

}

.login-submit:hover::before,
.login-biometrics:hover::before,
.login-mobile:hover::before{

    left:150%;

}

.login-submit:hover{

    transform:translateY(-4px);

}

.login-biometrics:hover{

    transform:translateY(-3px);

}

.login-mobile:hover{

    transform:translateY(-3px);

}

.login-input{

    transition:

    border-color .35s,
    box-shadow .35s,
    transform .35s;

}

.login-input:focus-within{

    transform:translateY(-2px);

}

.login-feature{

    cursor:default;

}

.login-feature:hover{

    box-shadow:

    0 15px 35px rgba(0,0,0,.10);

}

.login-brand{

    animation:loginFadeUp .8s ease;

}

.login-title{

    animation:loginFadeUp 1s ease;

}

.login-description{

    animation:loginFadeUp 1.2s ease;

}


/*=========================================================
    SCROLLBAR
=========================================================*/

.login-card::-webkit-scrollbar{

    width:8px;

}

.login-card::-webkit-scrollbar-thumb{

    background:#a4c639;

    border-radius:20px;

}

.login-card::-webkit-scrollbar-track{

    background:#edf3df;

}


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

@media (max-width:1200px){

    .login-wrapper{

        max-width:1100px;

        grid-template-columns:390px 1fr;

    }

    .login-side{

        padding:55px 35px;

    }

    .login-card{

        padding:55px 40px;

    }

    .login-title{

        font-size:33px;

    }

}

@media (max-width:992px){

    .login-section{

        padding:70px 15px;

    }

    .login-wrapper{

        grid-template-columns:1fr;

    }

    .login-side{

        padding:50px 35px;

    }

    .login-card{

        padding:45px 35px;

    }

}

@media (max-width:768px){

    .login-section{

        padding:50px 15px;

    }

    .login-side{

        display:none;

    }

    .login-card{

        padding:35px 25px;

    }

    .login-card-header h2{

        font-size:30px;

    }

    .login-options{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .login-submit,
    .login-biometrics,
    .login-mobile{

        height:56px;

        font-size:14px;

    }

}

@media (max-width:576px){

    .login-wrapper{

        border-radius:18px;

    }

    .login-card{

        padding:25px 18px;

    }

    .login-card-header h2{

        font-size:26px;

    }

    .login-subtitle{

        font-size:13px;

    }

    .login-input{

        height:56px;

        padding:0 15px;

    }

    .login-divider span{

        padding:0 12px;

    }

}


/*=========================================================
    ACCESSIBILITÉ
=========================================================*/

.login-section button:focus,
.login-section input:focus,
.login-section a:focus{

    outline:none;

}

.login-section button{

    -webkit-tap-highlight-color:transparent;

}

.login-section input{

    appearance:none;

}

.login-section input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #ffffff inset;

    -webkit-text-fill-color:#1f2937;

}


/*=========================================================
    EFFETS PREMIUM
=========================================================*/

.login-wrapper{

    backdrop-filter:blur(25px);

}

.login-card{

    position:relative;

}

.login-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:

    linear-gradient(
    90deg,
    #a4c639,
    #c7e36b,
    #7da421);

}

.login-feature-icon{

    transition:.35s;

}

.login-feature:hover .login-feature-icon{

    transform:rotate(-10deg) scale(1.08);

}

.login-submit:active,
.login-biometrics:active,
.login-mobile:active{

    transform:scale(.98);

}