@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --grad: linear-gradient(180.06deg, #743241 0.06%, #400D18 99.95%);
    --grad-2: linear-gradient(90deg, #743241 80%, #400D18 100%);

    --white: #FFFFFF;
    --light-white: #F3F1F1;
    --wine: #743241;
    --wine-title: #5B202D;


    --gray: #313131;
    --gray-2: #4B4B4B;

    --Poppins-Font: "Poppins", sans-serif;
}

* {
    font-family: "Montserrat", sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    color: #000;
}

.wrapper-site {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.wrapper-site main {
    flex: 1;
}

.fw-semi-bold {
    font-weight: 600;
}

.btn {
    border: 1.5px solid var(--wine);
    padding: 12px 20px;
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 700;
    color: var(--wine);
    border-radius: 0;
    max-width: 270px;
    transition: .3s all ease-in-out;
}

.btn.btn-wine-secondary:hover {
    color: #FFF;
    background: var(--wine);
}

.btn.btn-wine {
    background: var(--grad-2);
    color: #FFF;
    opacity: .6;
}


.btn.btn-wine:hover {
    opacity: 1;
}

.btn.btn-light {
    background: #FFF;
    color: var(--wine);
    border-color: #FFF;
}

.btn.btn-light:hover {
    background: #AFAFAF;
    border-color: #AFAFAF;

}

.btn.btn-light-secondary {
    color: #FFF;
    border-color: #FFF;
}

.btn.btn-light-secondary:hover {
    background: #FFF;
    color: var(--wine);

}

.btn.btn-wine-2 {
    background: var(--grad-2);
    color: #FFF;
    opacity: 1;
}

.btn.btn-wine-2:hover {
    filter: brightness(.8);
}

.symbol {
    color: var(--wine);
}

.colored-label {
    color: var(--wine);
}

/* End Global */


nav {
    background: var(--grad);
}

nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

nav .container .logo {
    width: 195px;
    height: 74px;
    display: flex;
}

nav .container .logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;

}

nav .container .login {
    color: #FFF;
    font-weight: 600;
    text-decoration: none;
    transition: .3s all ease-in-out;
}

nav .container .login:hover {
    color: #afafaf;
}

@media (max-width:778px) {
    nav .container .logo {
        width: 140px;
        height: 60px;
    }
}

.registration {
    display: grid;
    grid-template-columns: 2;
    gap: 30;
}

.registration .container {
    display: flex;
    flex-direction: column;
    gap: 70px;
    margin-block: 80px;
}

@media (min-width:1199px) {
    .registration .container {
        max-width: 965px;
    }
}

.registration .container .header-form {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 28px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 400;
    color: var(--gray);
}

.registration .container .title-form {
    font-size: clamp(24px, 3vw, 35px);
    background-image: linear-gradient(90deg, var(--wine) 0%, #400D18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    margin: 0;
}

.registration .container .subtitle-form {
    font-size: clamp(18px, 2vw, 20px);
    color: var(--gray);
    margin: 0;
}

.form-registration {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.form-registration .form-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 80px;
}

.form-registration .form-group.full-columns {
    grid-column: 2 span;
}

.form-registration .form-group label {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}


.form-registration .form-group .wrapper-input {
    display: flex;
    position: relative;
}

.form-registration .form-group .wrapper-input input[type="file"] {
    padding-inline-end: 80px;
    max-width: 100%;
}

.form-registration .form-group .wrapper-input input[type="file"]::file-selector-button {
    display: none;
}

.form-registration .form-group .wrapper-number {
    display: flex;
    align-items: center;
    gap: 13px;
}

.form-registration .form-group .wrapper-number .wrapper-input {
    flex: 1;
}

.form-registration .form-group .wrapper-input .verify-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
    transition: .3s all ease-in-out;
    background: none;
    border: none;
    color: var(--wine);
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
}

.form-registration .form-group .wrapper-input .upload-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
    transition: .3s all ease-in-out;
    background: none;
    border: none;
    color: var(--wine);
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    cursor: pointer;
}

.form-registration .form-group .wrapper-input:has(.valid) .verify-btn {
    display: none;

}

.form-registration .form-group .wrapper-number .wrapper-code .nice-select {
    border: 1px solid #E0E0E0;
    background: var(--white);
    padding: 8px 15px;
    font-size: clamp(16px, 2vw, 18px);
    color: var(--gray-2);
    outline: none;
    flex: 1;
    height: auto;
    line-height: normal;
    border-radius: 0;
    width: 100px;
}

.form-registration .form-group .wrapper-number .wrapper-code .nice-select .list {
    margin: 0;
}

.form-registration .form-group .wrapper-input .checked-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
    height: 19px;
    width: 19px;
    opacity: 0;
    transition: .3s all ease-in-out;
}

.form-registration .form-group .wrapper-input:has(.nice-select-dropdown .selected) .checked-icon,
.form-registration .form-group:has(input.valid) .wrapper-input .checked-icon {
    opacity: 1;
}

.form-registration .form-group .wrapper-input:has(.nice-select-dropdown .selected) .nice-select::after {
    opacity: 0;
}

.form-registration .form-group .wrapper-input select {
    display: none;
}

.form-registration .form-group .wrapper-input .nice-select,
.form-registration .form-group .wrapper-input input {
    border: 1px solid #E0E0E0;
    background: var(--white);
    padding: 8px 15px;
    font-size: clamp(16px, 2vw, 18px);
    color: var(--gray-2);
    outline: none;
    flex: 1;
    height: auto;
    line-height: normal;
    border-radius: 0;
}

.form-registration .form-group .wrapper-input .nice-select .list {
    margin: 0;
}

.form-registration .form-group .wrapper-input .nice-select.valid,
.form-registration .form-group input.valid {
    background: var(--light-white);
}

.form-registration .form-group .error-msg {
    color: #eb3426;
    font-weight: 500;
    font-size: clamp(16px, 2vw, 18px);
    display: none;

}

.form-registration .form-group .create_account {
    color: var(--gray);
    font-family: var(--Poppins-Font);
}

.form-registration .form-group .create_account a {
    color: var(--wine);
    font-weight: 600;
}

.form-registration .form-group .wrapper-input .show-password {
    position: absolute;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
    transition: .3s all ease-in-out;
    background: none;
    border: none;
    color: var(--wine);
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
}

.form-registration .form-group .wrapper-input input[type="password"] {
    padding-inline-end: 40px;
}

.form-group .wrapper-input input[type="password"]::-ms-reveal {
    display: none;
}

.form-group .wrapper-checkbox {
    display: flex;
    align-items: center;
    gap: 15px;
}

.form-group:has(.group-checkbox) {
    gap: 16px;
}

.form-group .wrapper-checkbox input {
    display: none;
}

.form-group .wrapper-checkbox label .check-mark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--wine);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s all ease-in-out;
    flex: 1 0 auto;
}

.form-group .wrapper-checkbox .check-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.form-group .wrapper-checkbox:has(input:checked) .check-mark {
    background: var(--wine);
}

.form-group .wrapper-checkbox label {
    font-size: clamp(16px, 2vw, 18px);
    display: flex;
    align-items: first baseline;
    max-width: 640px;
}

.form-group .wrapper-checkbox label p {
    margin: 0;
    color: #4B4B4B;
    font-weight: 400;
}

.form-group .wrapper-checkbox label a {
    color: var(--wine);
    font-weight: 500;
}

.form-registration .form-group.buttons-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.form-registration .form-group.buttons-row .btn {
    flex: 1;
}

@media (max-width:992px) {
    .form-registration {
        gap: 20px;
    }

    .form-registration .form-group {
        grid-column: span 2;
        gap: 8px;
    }

    .form-registration .container {
        gap: 30px;
        margin-block: 40px;
    }

    .form-registration .form-group .wrapper-input .nice-select,
    .form-registration .form-group .wrapper-input input {
        width: 100%;
    }

    .registration .container .header-form {
        gap: 16px;
    }

}

@media (max-width:558px) {
    .form-registration .form-group.buttons-row {
        flex-direction: column-reverse;
    }

    .form-registration .form-group.buttons-row .btn {
        max-width: 100%;
    }
}

footer {
    background: var(--wine);
    position: relative;
    z-index: 1;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 333px;
    width: 333px;
    height: 100%;
    opacity: 0.02;
    background: url(../images/footer-pattern.png) center center no-repeat;
    background-size: cover;
    z-index: -1;
}

footer .container {
    padding-block: 24px;
}

footer .container .contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

footer .container .contact .title-contact {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #FFF;

}

footer .container .contact .contact-info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 30px;
}

footer .container .contact .contact-info .list-contact {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    flex: 1;
}

footer .container .contact .contact-info .list-contact .item-contact {
    text-decoration: none;
    display: flex;
    align-items: first baseline;
    gap: 10px;
    font-size: 13px;
    transition: .3s all ease-in-out;
}

footer .container .contact .contact-info .list-contact .item-contact span {
    transition: .3s all ease-in-out;
    color: #FFF;

}

footer .container .contact .contact-info .list-contact .item-contact:hover span {
    color: #afafaf;
}

footer .container .contact .list-social {
    display: flex;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px;
}

footer .container .contact .list-social a {
    width: 26px;
    height: 26px;
    border: 1px solid #FFF;
    padding: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: .3s all ease-in-out;

}

footer .container .contact .list-social a:hover {
    scale: 1.1;
}

footer .container .contact .bottom-footer {
    padding-top: 24px;
    color: #FFF;
    border-top: 1px solid #FFF;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .container .contact .bottom-footer .copyright,
footer .container .contact .bottom-footer .copyright span {
    color: #FFF;
}

footer .container .contact .bottom-footer .links {
    display: flex;
    align-items: center;
    gap: 40px;
}

footer .container .contact .bottom-footer .links a {
    color: #FFF;
    text-decoration: none;
    transition: .3s all ease-in;
    position: relative;
}

footer .container .contact .bottom-footer .links a:hover {
    color: #afafaf;
}

footer .container .contact .bottom-footer .links a:not(:first-child)::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 1px;
    background: #FFF;
    left: -19.5px;
    top: 50%;
    translate: 0 -50%;
}

@media (max-width:778px) {
    footer .container .contact .contact-info {
        flex-direction: column;
        gap: 32px;
        padding: 0;
    }

    footer .container .contact .contact-info .list-contact {
        grid-template-columns: repeat(2, 1fr);
    }

    footer .container .contact .contact-info .list-social {
        justify-content: center;
    }

    footer .container .contact .bottom-footer {
        flex-direction: column-reverse;
        gap: 16px;
    }
}


.login-page {
    display: flex;
}

.login-page .left-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 50%;
}

.login-page .left-side .image {
    width: 100%;
    height: 100%;
    display: flex;
}

.login-page .left-side .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-page .left-side .float-logo {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 580.5px;
    height: 190.5px;
    max-width: 50%;
    top: 40%;
    left: -160px;
    padding: 32px;
    z-index: 1;

}

.login-page .left-side .float-logo::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--grad);
    clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 0% 100%);
    z-index: -1;
}

.login-page .left-side .float-logo::after {
    content: "";
    position: absolute;
    width: 130px;
    height: 100%;
    right: -32px;
    top: 0;
    background: var(--grad);
    clip-path: polygon(80% 0%, 100% 0%, 20% 100%, 0% 100%);
    z-index: -1;
}

.login-page .left-side .float-logo img {
    width: auto;
}

.login-page .right-side {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;

}

.login-page .right-side .container-signin {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 365px;
    flex: 1;
}

.login-page .right-side .container-signin .title {
    font-size: clamp(24px, 3vw, 35px);
    background-image: linear-gradient(90deg, var(--wine) 0%, #400D18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    margin: 0;

}

.login-page .right-side .container-signin .subtitles {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.login-page .right-side .container-signin .subtitles h4 {
    color: var(--gray);
    margin: 0;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 20px);
}

.login-page .right-side .container-signin .subtitles h5 {
    color: var(--gray);
    margin: 0;
    font-weight: 400;
    font-size: clamp(18px, 2vw, 20px);
}

.login-page .right-side .container-signin .form-registration {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.login-page .right-side .container-signin .form-registration .form-group {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.login-page .right-side .container-signin .form-registration .form-group:has(+.form-group:has(.group-checkbox)) {
    margin-bottom: 16px;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #E0E0E0;
    box-shadow: 1px 2px 12.7px 4px rgba(151, 151, 151, 0.25);
    padding: 16px 20px;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-input .icon-input {
    width: 18px;
    height: 18px;
    display: flex;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-input input {
    border: none;
    padding: 0 20px 0 0;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-input input::-ms-reveal {
    display: none;
}

.login-page .right-side .container-signin .form-registration .form-group:has(.wrapper-checkbox) {
    width: fit-content;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox {
    display: flex;
    align-items: center;
    gap: 15px;
}


.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox input {
    display: none;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox .check-mark {
    width: 12px;
    height: 12px;
    border: 2px solid var(--wine);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s all ease-in-out;
    flex: 1 0 auto;
    border-radius: 2px;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox .check-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox:has(input:checked) .check-mark {
    background: var(--wine);
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox label {
    font-size: clamp(16px, 2vw, 17px);
    display: flex;
    align-items: first baseline;
    max-width: 640px;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox label p {
    margin: 0;
    font-weight: 400;
    font-size: 12px;
}

.login-page .right-side .container-signin .form-registration .form-group .wrapper-checkbox label a {
    color: var(--wine);
}

.login-page .right-side .container-signin .form-registration:has(.group-checkbox) a {
    font-size: 12px;
    color: #707070;
    text-decoration: none;
}

.login-page .right-side .container-signin .btn {
    max-width: 165px;
    opacity: 1;
    margin-inline: auto;
    font-size: 16px;
    width: 100%;
    margin-block: 30px 16px;
    box-shadow: none;

}

.login-page .right-side .container-signin .btn:hover {
    filter: brightness(.8);
}

.login-page .right-side .container-signin .footer-form {
    text-align: center;
    font-size: 14px;
}

.login-page .right-side .container-signin .form-registration .footer-form a {
    font-size: 14px !important;
    color: var(--wine) !important;
    font-weight: 500;
    text-decoration: none;
}

@media (max-width:1200px) {
    .login-page .left-side {
        display: none;
    }
}

.registration-links .container {
    display: flex;
    flex-direction: column;
    gap: 70px;
    margin-block: 80px;
}

.registration-links .title-form {
    font-size: clamp(24px, 3vw, 35px);
    background-image: linear-gradient(90deg, var(--wine) 0%, #400D18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
    text-align: center;
}

.registration-links .links {
    display: flex;
    gap: 52px;
}

.registration-links .links .link-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 50%;
    width: 100%;
    position: relative;
    padding: 50px 40px;
    min-height: 376px;
    gap: 30px;
    overflow: hidden;
}

.registration-links .links .link-item .image-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: -1;
}

.registration-links .links .link-item .image-cover::after,
.registration-links .links .link-item .image-cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .3s all ease-in-out;
}

.registration-links .links .link-item .image-cover::before {
    background: #00000099;
    opacity: 1;
    z-index: 1;

}

.registration-links .links .link-item .image-cover::after {
    z-index: 2;
    opacity: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        linear-gradient(0deg, rgba(116, 50, 65, 0.7), rgba(116, 50, 65, 0.7));
}

.registration-links .links .link-item:hover .image-cover::before {
    opacity: 0;
}

.registration-links .links .link-item:hover .image-cover::after {
    opacity: 1;
}

.registration-links .links .link-item .image-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.registration-links .links .link-item .title {
    margin: 0;
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 600;
    color: #FFFFFF;
    -webkit-text-stroke: 1px #FFFFFF9E;
}

.registration-links .links .link-item .description {
    font-size: clamp(16px, 2vw, 20px);
    color: #FFF;
}

.registration-links .links .link-item .box-links {
    display: flex;
    gap: 12px;
    width: 100%;
    opacity: 0;
    translate: 0 80px;
    transition: .3s all ease-in-out;
    margin-bottom: -200px;

}

.registration-links .links .link-item:hover .box-links {
    opacity: 1;
    translate: 0 0;
    margin-bottom: 0;

}

.registration-links .links .link-item .box-links a {
    flex: 1 1 auto;
    max-width: 305px;
    display: flex;
    flex-direction: column;
    gap: 23px;
    border: 1.5px solid #E0E0E033;
    background: #FFFFFF03;
    backdrop-filter: blur(11.300000190734863px);
    padding: 20px;
    text-decoration: none;
    color: #FFF;
    transition: .3s all ease-in-out;

}

.registration-links .links .link-item .box-links span {

    font-size: clamp(18px, 2vw, 20px);
}

.registration-links .links .link-item .box-links a:hover {
    background: #FFFFFF23;
}

@media (max-width:992px) {
    .registration-links .links {
        flex-direction: column;
    }

    .registration-links .links .link-item {
        max-width: 100%;
    }
}


.form-uploads {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-uploads .form-group {
    display: flex;
    flex-direction: column;
}

.form-uploads .form-group .title {
    color: var(--gray);
    font-size: 18px;
    margin-bottom: 4px;
    font-weight: 600;
}

.form-uploads .form-group .subtitle {
    font-size: 16px;
    color: var(--gray);
    font-weight: 500;
}

.form-uploads .form-group .wrapper-input {
    display: flex;
    position: relative;
    align-items: center;
    border: 1.5px solid #E0E0E0;
    margin-top: 20px;
}

.form-uploads .form-group .wrapper-input input {
    flex: 1;
    min-width: 80px;
    padding-inline: 20px;
    width: 100%;
}

.form-uploads .form-group .wrapper-input .btn.btn-wine-secondary {
    max-width: 165px;
    font-size: 16px;
    width: 100%;
}

.form-uploads .form-group .wrapper-input input::-webkit-file-upload-button {
    display: none;
}

.form-uploads .buttons-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 35px;
}

.form-uploads .buttons-row .btn {
    flex: 1;
    opacity: 1;
}

.form-uploads .buttons-row .btn.btn-wine:hover {
    filter: brightness(.8);
}

@media (min-width:1199px) {
    .form-uploads {
        max-width: 965px;
    }
}

@media (max-width:992px) {
    .registration .container {
        gap: 30px;
        margin-block: 30px;
    }
}

@media (max-width:558px) {
    .form-uploads .buttons-row {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .form-uploads .buttons-row .btn {
        max-width: 100%;
    }
}

.status-request {
    display: flex;
    padding-block: 40px;
}

.status-request .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-block: 40px;
    height: 100%;
}

.status-request .container .content {
    max-width: 670px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 70px;
}

.status-request .container .content.content-otp {
    gap: 24px;
}

.status-request .container .content .header-status {
    max-width: 568px;
    gap: 27px;
    padding: 0 40px
}

.status-request .container .content .icon {
    width: 110px;
    height: 110px;
    display: flex;
}

.status-request .container .content .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.status-request .container .content .title {
    font-size: clamp(24px, 3vw, 35px);
    color: var(--wine);
    font-weight: 600;
    margin-bottom: 0;
}

.status-request .container .content .description {
    font-size: clamp(16px, 2vw, 20px);
}

.status-request .container .content .buttons {
    display: flex;
    justify-content: center;
    gap: 70px;
    row-gap: 24px;
    width: 100%;
}

.status-request .container .content .buttons .btn {
    max-width: 365px;
    flex: 1;
}

.status-request .container .content .buttons .btn.btn-wine {
    opacity: 1;
}

.status-request .container .content .buttons .btn.btn-wine:hover {
    filter: brightness(.8);
}

@media (max-width:778px) {
    .status-request .container .content {
        gap: 40px;
    }

    .status-request .container .content .header-status {
        gap: 16px;
    }

    .status-request .container .content .buttons {
        flex-direction: column;
        align-items: center;
    }

    .status-request .container .content .buttons .btn {
        width: 100%
    }
}

.status-request .container .content .resend {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #344054;
}

.status-request .container .content .resend button {
    color: var(--wine);
    font-weight: 600;
    background: none;
    border: none;
}

/* OTP Inputs */
.otp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.otp .otp-input {
    width: 115.75px;
    height: 56px;
    text-align: center;
    font-size: 24px;
    border: 1.5px solid #E0E0E0;
    outline: none;
    transition: .2s all ease-in-out;
    color: var(--gray-2);
    background: var(--white);
    border-radius: 8px;
}

.otp .otp-input:focus {
    border-color: var(--wine);
    box-shadow: 0 0 0 3px rgba(116, 50, 65, 0.15);
}

.otp .otp-input.filled {
    background: var(--light-white);
}

.otp .otp-sep {
    color: var(--gray-2);
    opacity: .6;
    user-select: none;
    font-weight: 600;
}

@media (max-width:558px) {
    .otp {
        gap: 8px;
    }

    .otp .otp-input {
        width: 42px;
        height: 52px;
        font-size: 20px;
    }
}


.status-request .container .content.veify-civil {}

.status-request .container .content.veify-civil .verify_civilId {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
    width: 100%;
    max-width: 451px;
}

.status-request .container .content.veify-civil .verify_civilId form {
    width: 100%;
}

.status-request .container .content.veify-civil .form-group {
    display: flex;
    align-self: center;
    flex-direction: column;
    gap: 16px;
    min-width: 80px;
    width: 100%;
}

.status-request .container .content.veify-civil .form-group label {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-request .container .content.veify-civil .form-group .wrapper-input {
    display: flex;
    position: relative;
}

.status-request .container .content.veify-civil .form-group .wrapper-input input {
    border: 1px solid #E0E0E0;
    background: var(--white);
    padding: 8px 15px;
    font-size: clamp(16px, 2vw, 18px);
    color: var(--gray-2);
    outline: none;
    flex: 1;
    height: auto;
    line-height: normal;
    border-radius: 0;
    min-width: 80px;
}

.status-request .container .content.veify-civil .form-group .wrapper-input .verify-btn {
    font-size: 16px;
    width: 140px;
}

@media (max-width:778px) {
    .status-request .container .content.veify-civil .form-group .wrapper-input .verify-btn {
        width: fit-content;
    }
}

.status-request .container .content.authentication {
    max-width: 735px;
    gap: 48px;
}

.status-request .container .content.authentication .header-status {
    max-width: 100%;
}

.tooltip-info {
    position: relative;
}

.tooltip-info::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    width: 140px;
    font-size: 14px;
    background: var(--wine);
    color: #FFF;
    padding: 12px 4px;
    border-radius: 12px;
    z-index: 1;
    transition: .3s all ease-in-out;
    pointer-events: none;
    translate: 0 10px;
    opacity: 0;
    text-align: center;
}

.tooltip-info:hover::before {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

.terms {}

.terms .container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-block: 40px;
}

.terms .container .title {
    color: var(--wine-title);
    text-align: center;
    font-weight: 600;
    font-size: clamp(18px, 2vw, 24px);
}

.terms .container .list-terms {
    font-weight: 600;
    color: var(--wine);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.terms .container .list-terms .title-term {
    font-weight: 600;
    font-size: 16px;
}

.terms .container .list-terms .description {
    color: black;
    font-weight: 400;
}

.status-request .container .content:has(.verify_passport) {
    max-width: 965px;
}

.verify_passport {
    width: 100%;
}

.verify_passport .form-upload {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}

.verify_passport .form-upload .back-button {
    width: 100%;
}

.verify_passport .form-group {
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
}

.verify_passport .btn-upload {
    font-size: 16px;
    width: 100%;
    max-width: 141px;

}

.verify_passport .dropzone {
    border-style: dashed;
    background: #F9F9F9;

}


.verify_passport .dropzone .dz-preview {
    background: #faf7f5;
    border: 1.5px solid var(--wine, #7c2235);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 8px rgba(124, 34, 53, 0.08);
    transition: box-shadow 0.2s;
    position: relative;
}

.verify_passport .dropzone .dz-preview .dz-remove {
    color: #fff;
    background: var(--wine);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
    margin-left: 12px;
    outline: none;
    box-shadow: none;
    position: relative;
    z-index: 101;
    top: 10px;
}

.verify_passport .dropzone .dz-preview .dz-remove:focus,
.verify_passport .dropzone .dz-preview .dz-remove:active {
    background: #a02d45;
    box-shadow: 0 0 0 2px #e5bfc7;
}

.verify_passport .dropzone .dz-preview .dz-remove:hover {
    background: #a02d45;
}

.verify_passport .dropzone .dz-preview:hover {
    box-shadow: 0 4px 16px rgba(124, 34, 53, 0.16);
}

.verify_passport .dropzone .dz-preview .dz-image {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verify_passport .dropzone .dz-preview .dz-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.verify_passport .dropzone .dz-preview .dz-filename {
    font-weight: 600;
    color: var(--wine, #7c2235);
    font-size: 15px;
    word-break: break-all;
}

.verify_passport .dropzone .dz-preview .dz-size {
    font-size: 13px;
    color: #888;
}

.verify_passport .dropzone .dz-preview .dz-remove {
    color: #fff;
    background: var(--wine, #7c2235);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: 12px;
}

.verify_passport .dropzone .dz-preview .dz-remove:hover {
    background: #a02d45;
}

.verify_passport .dropzone .dz-preview .dz-error-message {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    margin-top: 6px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.08);
    border: 1px solid #dc3545;
    position: relative;
    z-index: 2;
    max-width: 220px;
    word-break: break-word;
    transition: background 0.2s, color 0.2s, border 0.2s;
    top: 100px;
    backdrop-filter: blur(10px);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.verify_passport .dropzone .dz-preview .dz-error-message::before {
    content: "!";
    display: inline-block;
    margin-right: 8px;
    font-weight: bold;
    color: #dc3545;
    font-size: 15px;
    vertical-align: middle;
}

.sub-account .container .content {
    max-width: 949px;
}

.sub-account-links {
    display: flex;
    gap: 51px;
}

.sub-account-links .box-sub {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 13px;
    padding: 37px;
    box-shadow: 0px 4px 16.3px 0px #00000029;
    text-decoration: none;
    transition: .3s all ease-in-out;
    text-align: center;
}

.sub-account-links .box-sub:hover {
    box-shadow: 0px 4px 16.3px 0px #00000059;

}

.sub-account-links .box-sub .icon {
    width: 72px;
    height: 72px;
    display: flex;
}

.sub-account-links .box-sub .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sub-account-links .box-sub .title-box {
    color: var(--wine-title);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 24px);

}

.sub-account-links .box-sub .description-box {
    color: var(--gray);
    font-weight: 500;
    font-size: clamp(16px, 2vw, 18px);
}

@media (max-width:778px) {
    .sub-account .container {
        margin: 0;
    }

    .sub-account-links {
        flex-direction: column;
        gap: 24px;
    }
}


.custom-header {}

.custom-header .title {
    font-size: clamp(18px, 2.3vw, 28px);
    font-weight: 600;
    color: var(--wine);
    margin-bottom: 0;
}


.custom-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 18px;
    color: #000;
}

.custom-table table tbody tr {
    border: none;
    box-shadow: 0px 4px 16.3px 0px #00000029;

}

.custom-table table :is(td, th) {
    border: none !important;
}


.custom-table table.dataTable>thead>tr>th {
    padding: 20px !important;
    text-wrap: nowrap;
    font-weight: 500;
    font-size: clamp(16px, 2vw, 18px);
}

.custom-table table.dataTable>tbody>tr>td {
    padding: 20px !important;
    text-wrap: nowrap;
    font-weight: 500;
    font-size: clamp(14px, 2vw, 20px);
}


.custom-table table.dataTable>tbody>tr>td:not(.dtr-hidden) :last-of-type a,
.custom-table table tbody .icon {
    margin: auto;
    width: 50px;
    height: 50px;
}

.custom-table table.dataTable>tbody>tr>td:not(.dtr-hidden):last-of-type a {
    display: flex;
}

.custom-table table.dataTable>tbody>tr>td:not(.dtr-hidden):last-of-type img,
.custom-table table tbody .icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.custom-table table tbody .name {
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 600;
    color: var(--wine);
    margin: 0;
}

.custom-table .dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control {
    display: flex;
    align-items: center;
}

.custom-table table.dataTable>tbody>tr.child ul.dtr-details {
    width: 100%;
}

.custom-table table.dataTable>tbody>tr.child ul.dtr-details>li {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width:778px) {

    .custom-table table.dataTable>thead>tr>th,
    .custom-table table.dataTable>tbody>tr>td {
        padding: 8px 12px !important;
    }

    .custom-table table.dataTable>tbody>tr>td:not(.dtr-hidden):last-of-type a,
    .custom-table table tbody .icon {
        margin: auto;
        width: 30px;
        height: 30px;
    }

    .custom-table table.dataTable>tbody>tr>td:not(.dtr-hidden):last-of-type img,
    .custom-table table tbody .icon img {
        width: 30px;
        height: 30px;
        object-fit: contain;
    }

    .custom-header .btn {
        font-size: 16px;
    }
}


.modal-body .status-request,
.modal-body .status-request .container {
    padding-block: 0;
    margin: 0;
}

.login-page .right-side .container-signin.reset-password .taps-reset .btn {
    max-width: fit-content;
    margin: 0;
    padding-inline: 14px;
}


.login-page .right-side .container-signin.reset-password .form-group label {
    font-size: 16px;
    color: var(--gray);
}

.login-page .right-side .container-signin .otp {
    justify-content: space-between;
}

.login-page .right-side .container-signin .otp .otp-input {
    width: 60px;
}

.login-page .right-side .container-signin .resend-otp {
    background: none;
    color: #FFF;
    background: #3C3C3C;
    border: none;
    opacity: 0.4;
    padding: 9px 14px;
    font-size: 14px;
}

.login-page .right-side .container-signin.reset-password .form-group label {
    font-weight: 400;
    color: var(--gray);
}

.login-page .right-side .container-signin.reset-password .form-group .nice-select,
.login-page .right-side .container-signin.reset-password .form-group .wrapper-input {
    padding: 14px 15px;
    margin: 0;
    box-shadow: none;
    border: 1.5px solid #E0E0E0
}

.login-page .right-side .container-signin .subtitle {
    color: var(--gray);
}


.current-ipo {
    margin-top: 60px;

}

.current-ipo .container {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.current-ipo .container .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

}

.current-ipo .container .header-section .title {
    color: var(--wine);
    font-weight: 700;
    font-size: clamp(18, 3vw, 32px);
    margin-bottom: 0;
}

.current-ipo .container .list-ipo {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
}

.current-ipo .container .list-ipo .box-ipo {
    box-shadow: 0px 4px 33.9px 0px #00000026;
    flex: 1;
    min-width: 280px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
}

.current-ipo .container .list-ipo .box-ipo .header-box {
    width: 100%;
    height: 268px;
    position: relative;
}

.current-ipo .container .list-ipo .box-ipo .header-box .image-header {
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.current-ipo .container .list-ipo .box-ipo .header-box .image-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-ipo .container .list-ipo .box-ipo .header-box .brand-comp {
    position: absolute;
    left: 42px;
    bottom: -42px;
    width: 106px;
    height: 106px;
    padding: 24px 14px;
    background-color: #FFF;
}

.current-ipo .container .list-ipo .box-ipo .header-box .brand-comp img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.current-ipo .container .list-ipo .box-ipo .body-box {
    padding: 62px 25px 28px 42px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.current-ipo .container .list-ipo .box-ipo .body-box .subtitle {
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 600;
    color: var(--gray);
    margin: 0;
}

.current-ipo .container .list-ipo .box-ipo .body-box .title {
    font-size: clamp(18px, 2vw, 24px);
    color: var(--wine);
    font-weight: 600;
    text-wrap-style: balance;
}

.current-ipo .container .list-ipo .box-ipo .body-box .description {
    font-weight: 500;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 122%;
    color: var(--gray);
    margin-bottom: 20px;
}

.current-ipo .container .list-ipo .box-ipo .body-box a {
    margin-top: auto;
}

.key-facts-table td a {
    text-decoration: none;
    color: var(--wine);
    font-weight: 500;
    line-height: 100%;
}

.key-facts-table tr td:first-child {
    padding-inline-end: 12px;
}

.banner-ipo {
    position: relative;
}

.banner-ipo .swiper-banner-ipo {
    width: 100%;
}

.banner-ipo .swiper-banner-ipo .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    position: relative;
    height: 650px;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .container {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .bg-image::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #000000B2;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .bg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .container .title {
    font-weight: 700;
    font-size: clamp(24px, 3.4vw, 48px);
    color: #FFFFFF;
    line-height: 122%;
    max-width: 722px;
    text-wrap-style: balance;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .container .description-banner {
    font-size: clamp(16px, 2.4vw, 28px);
    color: #FFFFFF;
    max-width: 1082px;
    line-height: 122%;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .container .actions {
    display: flex;
    gap: 30px;
    margin-top: 20px;
}

.banner-ipo .swiper-banner-ipo .swiper-slide .container .actions .btn {
    flex: 1;
    min-width: 200px;
}

.banner-ipo .pagination-wrapper {
    position: absolute;
    bottom: 40px;
    top: auto;
    width: 100%;
    z-index: 1;
}

.banner-ipo .pagination-wrapper .pagination-ipo {
    display: flex;
    align-items: center;
    gap: 0;
}

.banner-ipo .pagination-wrapper .pagination-ipo .swiper-pagination-bullet {
    width: auto;
    height: 1px;
    background-color: rgba(255, 255, 255);
    opacity: .4;
    flex: 1;
    margin: 0;
    transition: .3s all ease-in-out;
    border-radius: 0;
}

.banner-ipo .pagination-wrapper .pagination-ipo .swiper-pagination-bullet-active {
    opacity: 1;
    height: 4px;

}

.banner-ipo .scroll-mouse {
    position: absolute;
    bottom: 60px;
    right: 40px;
    z-index: 1;
    width: 40px;
    height: 40px;
}

.banner-ipo .scroll-mouse img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width:668px) {
    .banner-ipo .scroll-mouse {
        right: auto;
        left: 50%;
        translate: -50% 0;
    }
}

@media (max-width:448px) {
    .banner-ipo .swiper-banner-ipo .swiper-slide .container .actions .btn {
        min-width: 120px;
    }

}

.form-signing {
    display: flex;
    flex-direction: column;
    gap: 23px;
}

.form-signing .signing-item {
    display: flex;
    gap: 31px;
}

.form-signing .signing-item input[type="file"] {
    display: none;
}

.form-signing .signing-item .reupload-file,
.form-signing .signing-item .upload-file {
    box-shadow: 0px 4px 16.3px 0px #00000029;
    padding: 24px 42px;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: clamp(16px, 2vw, 18px);
}

.form-signing .signing-item .reupload-file {
    color: #00BA16;
}

.form-signing .signing-item .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    flex: 1;
    background: #FFFFFF;
    box-shadow: 0px 4px 16.3px 0px #00000029;
    padding: 24px 42px;
}

.form-signing .signing-item .info .icon {
    width: 52px;
    height: 52px;
    display: flex;
}

.form-signing .signing-item .info .icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.form-signing .signing-item .info .name {
    flex: 1;
    margin: 0;
    font-weight: 600;
    color: #400D18;
    font-size: clamp(16px, 1.8vw, 20px);
}

.form-signing .signing-item .info a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;

}

.form-signing .signing-item .info a .download-icon {
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
}

.form-signing .signing-item .info a span {
    font-size: clamp(16px, 2vw, 18px);
    font-weight: 500;
    color: var(--wine);
    line-height: 100%;
}

@media (max-width:778px) {
    .form-signing .signing-item .info {
        gap: 8px;
        padding: 16px 24px;
    }

    .form-signing .signing-item .reupload-file,
    .form-signing .signing-item .upload-file {
        padding: 16px 24px;

    }

    .form-signing .signing-item .reupload-file span:not(.icon),
    .form-signing .signing-item .upload-file span:not(.icon) {
        display: none;
    }
}

@media (max-width:558px) {


    .form-signing .signing-item .info .icon {
        width: 26px;
        height: 26px;
    }
}

@media (max-width:448px) {
    .form-signing .signing-item .info a span:not(.download-icon) {
        display: none;
    }

    .form-signing .signing-item .info {
        padding: 12px 16px;
    }

    .form-signing .signing-item .reupload-file,
    .form-signing .signing-item .upload-file {
        padding: 12px 16px;

    }

    .form-signing .signing-item {
        gap: 16px;
    }
}

.allocation-popup .form-registration {
    max-width: 468px;
    width: 100%;
    margin-bottom: 40px;
}

.allocation-popup:has(.form-registration) .allocation-title {
    margin-bottom: 8px;
}

.allocation-popup:has(.form-registration) .allocation-question {
    font-size: 16px;
    margin-bottom: 24px;
}

.allocation-popup .form-registration {}

.status-request .container .content .completed-form {
    max-width: fit-content;
    min-width: 365px;
}

.total-subscription {
    font-style: normal;
}

.key-facts-table td:first-child * {
    color: var(--wine);
    font-weight: 600;
}

.form-registration .form-group.delete-group {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 30px 34px;
    background: #F000000D;
}

.form-registration .form-group.delete-group .info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-registration .form-group.delete-group .info .header-info {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--wine);
    font-weight: 500;
    font-family: var(--Poppins-Font);
    font-size: clamp(16px, 2vw, 18px);
}

.form-registration .form-group.delete-group .info .header-info .icon {
    display: flex;
    height: 24px;
    width: 24px;
}

.form-registration .form-group.delete-group .info .header-info .icon img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}


.form-registration .form-group.delete-group .info .description {
    color: var(--gray);
    font-size: clamp(16px, 2vw, 18px);
    font-family: var(--Poppins-Font);

}

.form-registration .form-group.delete-group .info .description span {
    font-weight: 500;
}

.form-registration .form-group.delete-group .btn {
    background: #FFF;
}

.form-registration .form-group.delete-group .btn:hover {
    filter: brightness(.8);
}

@media (max-width:992px) {
    .form-registration .form-group.delete-group {
        padding: 26px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

}

.wrapper-input.custom-upload {
    display: flex;
    position: relative;
    align-items: center;
    border: 1.5px solid #E0E0E0;
}

.wrapper-input.custom-upload input {
    border: none !important;
}