.section-auth { height: calc(100% - 20px); background-color: #6b27ff; position: relative; display: flex; align-items: center; justify-content: center; }
.section-auth .wrapper { background-color: #fff; border-radius: 40px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; scale: 0.9; align-items: center; }

.section-auth .wrapper .left { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.section-auth .wrapper .left .top { display: flex; flex-direction: column; align-items: center; gap: 24px; margin-top: 24px; color: #494949; text-align: center; }
.section-auth .wrapper .left .top .logo { width: 212px; height: 48px; }

.section-auth .wrapper .left .break { width: 300px; height: 1px; background-color: #00000033; }

.section-auth .wrapper .left .bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 0px 40px; }
.section-auth .wrapper .left .bottom .top { display: flex; flex-direction: row; gap: 0px; align-items: center; font-weight: 700; margin-top: 0px; }

.section-auth .wrapper .left .bottom .top .icon { cursor: pointer; transition: scale 0.5s; display: flex; }
.section-auth .wrapper .left .bottom .top .icon:hover { scale: 1.12; }

.section-auth .wrapper .left .bottom .top .collapse { display: grid; margin-left: 30px; justify-items: center; }
.section-auth .wrapper .left .bottom .top .collapse > * { grid-area: 1 / 1; }
.section-auth .wrapper .left .bottom .top .collapse .bottom { padding: 0px; display: grid; grid-template-columns: 1fr 1fr; width: 130px; justify-items: center; }

.section-auth .wrapper .left .bottom .bottom { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.section-auth .wrapper .left .bottom .bottom .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.section-auth .wrapper .left .bottom .bottom .row.single { display: flex; justify-content: center; min-width: 358px; }
.section-auth .wrapper .left .bottom .bottom .row.single .global-input-group { min-width: 358px; }

.section-auth .wrapper .left .bottom .bottom .row .recovery { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; color: #494949; transition: color 0.4s; text-decoration: none; }
.section-auth .wrapper .left .bottom .bottom .row .recovery * { transition: fill 0.4s; }
.section-auth .wrapper .left .bottom .bottom .row .recovery:hover { color: #6927ff; }
.section-auth .wrapper .left .bottom .bottom .row .recovery:hover * { fill: #6927ff; }

.section-auth .wrapper .left .bottom .bottom .global-btn-primary.auth { padding: 20px 94px; margin-top: 24px; }

.section-auth .wrapper .left .bottom .bottom .bottom { display: flex; flex-direction: row; align-items: center; justify-content: center; font-weight: 700; color: #494949; margin-top: 16px; }
.section-auth .wrapper .left .bottom .bottom .bottom a { display: flex; justify-content: center; align-items: center; gap: 6px; color: #6b27ff; text-decoration: none; transition: color 0.3s; }
.section-auth .wrapper .left .bottom .bottom .bottom a * { transition: stroke 0.3s; }
.section-auth .wrapper .left .bottom .bottom .bottom a:hover { color: #9fc119; }
.section-auth .wrapper .left .bottom .bottom .bottom a:hover * { stroke: #9fc119; }
 


.section-auth .wrapper .right { border-radius: 40px;  }

.section-auth .wrapper .right .mobile { display: none; }
.section-auth .wrapper .right .mobile img { width: 650px; height: auto; }

.section-auth .wrapper .right .desktop { margin-top: -114px;  }
.section-auth .wrapper .right .desktop img { width: 100%; height: fit-content; object-fit: contain; object-position: top; position: relative; margin-top: -114px; z-index: -999; }

.section-auth .wrapper .right .bounding { position: relative; padding: 40px; display: flex; gap: 24px; }
.section-auth .wrapper .right .bounding a { height: fit-content; text-decoration: none; border: 1px solid #fff; padding: 12px 15px; border-radius: 9999px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 4px; justify-content: center; transition: background-color 0.4s, color 0.4s; }
.section-auth .wrapper .right .bounding a * { transition: fill 0.4s; }
.section-auth .wrapper .right .bounding a:hover { background-color: #fff; color: #6927ff; }
.section-auth .wrapper .right .bounding a:hover * { fill: #6927ff; }
.section-auth .wrapper .right .bounding a:focus { background-color: #fff; color: #6927ff; }
.section-auth .wrapper .right .bounding a:focus * { fill: #6927ff; }
.section-auth .wrapper .right .bounding a.active { background-color: #fff; color: #6927ff; }
.section-auth .wrapper .right .bounding a.active:hover * { fill: #fff; }
.section-auth .wrapper .right .bounding a.active:hover { background-color: transparent; color: #fff; }



@media all and (max-width: 1600px) {
    .section-auth .wrapper { padding: 20px; }
}

@media all and (max-width: 1400px) {
    .section-auth .wrapper .left .bottom { padding: 0px 20px; }
}

@media all and (max-width: 1300px) {
    .section-auth .wrapper { gap: 10px; }
}

@media all and (max-width: 1100px) {
    .section-auth .wrapper { display: flex; flex-direction: column-reverse; padding: 40px; }
    .section-auth .wrapper .right .desktop { display: none; }
    .section-auth .wrapper .right .mobile { display: block; }

    .section-auth .wrapper .right { display: grid; }
    .section-auth .wrapper .right > * { grid-area: 1 / 1; }
    .section-auth .wrapper .right .bounding { display: flex; justify-content: center; align-items: center; }
}

@media all and (max-width: 767px) {
    .section-auth .wrapper .left .bottom { padding: 0px; }
    .section-auth .wrapper .right .bounding { padding: 20px; }
    .section-auth .wrapper .left .bottom .bottom .row { grid-template-columns: 1fr; gap: 12px; }
    .section-auth .wrapper .right .mobile img { width: 100%; }
    .section-auth .wrapper .left .break { width: 100%; }
    .section-auth .wrapper .left .bottom .top .collapse { margin-left: 15px; }
    .section-auth .wrapper .left .bottom .bottom .global-btn-primary.auth { margin-top: 12px; }

}

@media all and (max-width: 440px) {
    /* .section-auth .wrapper .right .bounding { flex-direction: column; } */
    .section-auth .wrapper .right .bounding a svg { display: none; }
    .section-auth .wrapper .right .bounding a { font-size: 14px; }

    .section-auth .wrapper .left .bottom .bottom .row.single { min-width: 0px; width: 100%; }
    .section-auth .wrapper .left .bottom .bottom .row.single .global-input-group { min-width: 0px; width: 100%; }

    .section-auth .wrapper .left .bottom .bottom .bottom { flex-direction: column; }
}