/*=========================================================
    REGISTER SECTION
=========================================================*/

.register-section{

    position:relative;

    padding:90px 20px;

    overflow:hidden;

    background:

    linear-gradient(
    135deg,
    #f7fbef 0%,
    #edf5d7 45%,
    #f8fbf3 100%);

}

.register-bg{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.35;

    pointer-events:none;

}

.register-bg-1{

    width:320px;
    height:320px;

    top:-120px;
    left:-120px;

    background:#a4c639;

}

.register-bg-2{

    width:280px;
    height:280px;

    right:-80px;
    top:150px;

    background:#d8ef8d;

}

.register-bg-3{

    width:340px;
    height:340px;

    bottom:-150px;
    left:50%;

    transform:translateX(-50%);

    background:#c2df60;

}


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

.register-wrapper{

    position:relative;

    z-index:2;

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:430px 1fr;

    border-radius:32px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:

    0 40px 80px rgba(0,0,0,.12);

}


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

.register-side{

    padding:60px 45px;

    color:#ffffff;

    background:

    linear-gradient(
    180deg,
    #9bc02b 0%,
    #87ab1f 100%);

    position:relative;

    overflow:hidden;

}

.register-side::before{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-160px;
    top:-120px;

    border-radius:50%;

    background:

    rgba(255,255,255,.08);

}

.register-side::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    left:-120px;
    bottom:-120px;

    border-radius:50%;

    background:

    rgba(255,255,255,.06);

}


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

.register-brand{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:45px;

}

.register-brand-icon{

    width:72px;
    height:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    backdrop-filter:blur(12px);

    font-size:28px;

}

.register-brand-text h1{

    margin:0;

    font-size:28px;

    font-weight:700;

}

.register-brand-text p{

    margin-top:5px;

    opacity:.9;

}


/*=========================================================
    SECURITY
=========================================================*/

.register-security{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    border-radius:50px;

    margin-bottom:35px;

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

    backdrop-filter:blur(10px);

    font-size:14px;

    font-weight:600;

}

.register-security i{

    font-size:18px;

}


/*=========================================================
    TEXT
=========================================================*/

.register-title{

    font-size:38px;

    line-height:1.3;

    font-weight:700;

    margin-bottom:25px;

}

.register-description{

    line-height:1.9;

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

    margin-bottom:45px;

}


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

.register-features{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.register-feature{

    display:flex;

    gap:18px;

    align-items:flex-start;

    padding:20px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

.register-feature:hover{

    transform:translateX(8px);

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

}

.register-feature-icon{

    width:54px;
    height:54px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    color:#90b524;

    font-size:22px;

    flex-shrink:0;

}

.register-feature h3{

    margin:0 0 6px;

    font-size:18px;

    font-weight:600;

}

.register-feature p{

    margin:0;

    opacity:.92;

    font-size:14px;

    line-height:1.7;

}


/*=========================================================
    RIGHT CARD
=========================================================*/

.register-card{

    background:#ffffff;

    padding:60px;

    overflow-y:auto;

    max-height:980px;

}

.register-card-header{

    margin-bottom:40px;

}

.register-subtitle{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#eef6d6;

    color:#8bae1f;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:18px;

}

.register-card-header h2{

    margin:0;

    color:#1d2939;

    font-size:38px;

    font-weight:700;

}

.register-card-header p{

    margin-top:15px;

    color:#6b7280;

    line-height:1.8;

}


/*=========================================================
    PROGRESS
=========================================================*/

.register-progress{

    margin-bottom:45px;

}

.register-progress-bar{

    width:100%;

    height:8px;

    border-radius:50px;

    background:#e8efd2;

    overflow:hidden;

}

.register-progress-fill{

    display:block;

    width:16.66%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    #8cb61d,
    #cbe56b);

    border-radius:50px;

}

.register-progress ul{

    margin:22px 0 0;

    padding:0;

    list-style:none;

    display:flex;

    justify-content:space-between;

}

.register-progress li{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#edf3dc;

    color:#8aae20;

    font-weight:700;

    transition:.35s;

}

.register-progress li.active{

    background:#9bc02b;

    color:#fff;

    transform:scale(1.1);

}


/*=========================================================
    STEP
=========================================================*/

.register-step{

    display:none;

}

.register-step.active{

    display:block;

}


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

.register-section-title{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:35px;

}

.register-section-title i{

    width:55px;

    height:55px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#edf5d8;

    color:#8cb61d;

    font-size:22px;

}

.register-section-title h3{

    margin:0;

    font-size:26px;

    color:#1d2939;

    font-weight:700;

}


/*=========================================================
    GRID
=========================================================*/

.register-grid{

    display:grid;

    gap:25px;

    margin-bottom:25px;

}

.register-grid.two{

    grid-template-columns:repeat(2,1fr);

}


/*=========================================================
    GROUP
=========================================================*/

.register-group{

    display:flex;

    flex-direction:column;

}

.register-group label{

    margin-bottom:10px;

    color:#374151;

    font-weight:600;

    font-size:14px;

}


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

.register-input{

    display:flex;

    align-items:center;

    gap:15px;

    height:62px;

    padding:0 20px;

    border-radius:16px;

    border:2px solid #e6ecd4;

    background:#ffffff;

    transition:.35s;

}

.register-input:hover{

    border-color:#bdd96a;

}

.register-input:focus-within{

    border-color:#9cc42d;

    box-shadow:

    0 0 0 5px rgba(164,198,57,.15);

}

.register-input i{

    color:#9bc02b;

    font-size:18px;

    width:20px;

}

.register-input input,
.register-input select{

    width:100%;

    border:none;

    background:none;

    outline:none;

    color:#1f2937;

    font-size:15px;

    font-family:inherit;

}

.register-input input::placeholder{

    color:#9ca3af;

}

.register-input select{

    cursor:pointer;

}
/*=========================================================
    TEXTAREA
=========================================================*/

.register-input.textarea{

    align-items:flex-start;

    height:auto;

    padding:18px 20px;

}

.register-input.textarea i{

    margin-top:6px;

}

.register-input textarea{

    width:100%;

    min-height:140px;

    resize:vertical;

    border:none;

    outline:none;

    background:transparent;

    font-family:inherit;

    font-size:15px;

    color:#1f2937;

    line-height:1.8;

}

.register-input textarea::placeholder{

    color:#9ca3af;

}


/*=========================================================
    UPLOAD
=========================================================*/

.register-upload{

    margin-bottom:25px;

}

.register-upload label{

    display:block;

    margin-bottom:12px;

    font-weight:600;

    color:#374151;

}

.register-upload-box{

    position:relative;

    border:2px dashed #b6d356;

    border-radius:22px;

    background:#f8fbef;

    padding:45px 25px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

}

.register-upload-box:hover{

    background:#edf6d2;

    border-color:#90b524;

}

.register-upload-box i{

    font-size:42px;

    color:#90b524;

    margin-bottom:18px;

}

.register-upload-box h4{

    margin:0 0 10px;

    color:#233043;

    font-size:20px;

}

.register-upload-box p{

    margin:0;

    color:#6b7280;

    font-size:14px;

}

.register-upload-box input{

    position:absolute;

    inset:0;

    opacity:0;

    cursor:pointer;

}


/*=========================================================
    CHECKBOX
=========================================================*/

.register-check{

    margin-top:18px;

}

.register-check label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#4b5563;

    line-height:1.7;

    cursor:pointer;

}

.register-check input{

    width:18px;

    height:18px;

    accent-color:#9bc02b;

    margin-top:2px;

}


/*=========================================================
    ACTIONS
=========================================================*/

.register-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-top:40px;

}

.register-back,
.register-next,
.register-submit{

    height:58px;

    border:none;

    border-radius:16px;

    padding:0 34px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

.register-back{

    background:#eef2e2;

    color:#53616f;

}

.register-back:hover{

    background:#dde7bf;

    transform:translateY(-3px);

}

.register-next,
.register-submit{

    color:#fff;

    background:

    linear-gradient(
    135deg,
    #8cb61d,
    #b8d954);

    box-shadow:

    0 18px 35px rgba(140,182,29,.30);

}

.register-next:hover,
.register-submit:hover{

    transform:translateY(-4px);

    box-shadow:

    0 25px 45px rgba(140,182,29,.40);

}


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

@keyframes registerFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.register-wrapper{

    animation:registerFade .8s ease;

}

.register-step.active{

    animation:registerFade .45s ease;

}


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

@media(max-width:1200px){

    .register-wrapper{

        grid-template-columns:380px 1fr;

    }

}

@media(max-width:992px){

    .register-wrapper{

        grid-template-columns:1fr;

    }

    .register-side{

        display:none;

    }

    .register-card{

        max-height:none;

        padding:45px 35px;

    }

}

@media(max-width:768px){

    .register-grid.two{

        grid-template-columns:1fr;

    }

    .register-card{

        padding:35px 22px;

    }

    .register-card-header h2{

        font-size:30px;

    }

    .register-actions{

        flex-direction:column;

    }

    .register-back,
    .register-next,
    .register-submit{

        width:100%;

    }

    .register-progress li{

        width:34px;

        height:34px;

        font-size:13px;

    }

}

@media(max-width:576px){

    .register-section{

        padding:55px 12px;

    }

    .register-wrapper{

        border-radius:18px;

    }

    .register-card{

        padding:25px 18px;

    }

    .register-card-header h2{

        font-size:26px;

    }

    .register-section-title h3{

        font-size:21px;

    }

}