@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");

:root {
    --Iconsax-Size: 20px;
    /* --Iconsax-Color: #6c757d; */
    /* --Iconsax-Color: #e9ce8f; */
    --Iconsax-Color: #dbc147;
    --main-web-color: #dbc147;
    --second-web-color: #9e9d24;
    --text-color: #2f4858;
}

* {
    padding: 0;
    margin: 0;
}

.container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color:#eee; */
}

.container .card {
    height: 650px;
    width: 800px;
    background-color: #fff;
    position: relative;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    font-family: "Poppins", sans-serif;
    border-radius: 20px;
}

.container .card .form {
    width: 100%;
    height: 100%;

    display: flex;
}

.container .card .left-side {
    width: 35%;
    background-color: var(--main-web-color);
    background-image: url("https://www.transparenttextures.com/patterns/60-lines.png");
    height: 100%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 20px 30px;
    box-sizing: border-box;
}

/*left-side-start*/
.left-heading {
    color: #fff;
}

.steps-content {
    margin-top: 10px;
    color: #fff;
}

.steps-content p {
    font-size: 12px;
    margin-top: 15px;
    color: rgb(255, 255, 255);
}

.progress-bar {
    list-style: none;
    /*color:#fff;*/
    /* margin-top:30px; */
    font-size: 13px;
    font-weight: 700;
    counter-reset: container 0;
    background-color: transparent !important;
}

.progress-bar li {
    position: relative;
    margin-left: 45px;
    margin-bottom: 50px;
    margin-top: 50px;
    counter-increment: container 1;
    color: #000;
}

.progress-bar li::before {
    content: counter(container);
    line-height: 35px;
    text-align: center;
    position: absolute;
    height: 35px;
    width: 35px;
    border: 1px solid #bababa;
    border-radius: 50%;
    left: -45px;
    top: -5px;
    z-index: 10;
    background-color: var(--main-web-color);
}

.progress-bar li::after {
    content: "";
    position: absolute;
    height: 70px;
    width: 2px;
    background-color: #bababa;
    z-index: 1;
    left: -27px;
    top: -80px;
}
.paddingTop {
    margin-top: 0;
}

.progress-bar li.active::after {
    background-color: #fff;
}

.progress-bar li:first-child:after {
    display: none;
}

/*.progress-bar li:last-child:after{*/
/*  display:none;  */
/*}*/
.progress-bar li.active::before {
    color: #fff;
    border: 1px solid #fff;
}

.progress-bar li.active {
    color: #fff;
}

.d-none {
    display: none;
}

/*left-side-end*/
.container .card .right-side {
    width: 65%;
    background-color: #fff;
    height: 100%;
    border-radius: 20px;
}

/*right-side-start*/
.main {
    display: none;
}

.active {
    display: block;
}

.main {
    padding: 40px;
}

.main small {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    height: 30px;
    width: 30px;
    background-color: #ccc;
    border-radius: 50%;
    color: yellow;
    font-size: 19px;
}

.text {
    margin-bottom: 100px;
    position: absolute;
    top: 20px;
    left: 38%;
}
.text2 {
    margin-bottom: 100px;
    position: absolute;
    top: -100px;
    left: -5%;
}

.congrats {
    text-align: center;
}

.text p {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #cbced4;
}

.input-text {
    margin: 30px 0;
    display: flex;
    gap: 20px;
}

.input-text .input-div {
    width: 100%;
    position: relative;
}

.center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

input[type="text"] {
    width: 100%;
    height: 40px;
    border: none;
    outline: 0;
    border-radius: 5px;
    border: 1px solid #cbced4;
    gap: 20px;
    box-sizing: border-box;
    padding: 0px 10px;
}

input[type="password"] {
    width: 100%;
    height: 40px;
    border: none;
    outline: 0;
    border-radius: 5px;
    border: 1px solid #cbced4;
    gap: 20px;
    box-sizing: border-box;
    padding: 0px 10px;
}

input[type="email"] {
    width: 100%;
    height: 40px;
    border: none;
    outline: 0;
    border-radius: 5px;
    border: 1px solid #cbced4;
    gap: 20px;
    box-sizing: border-box;
    padding: 0px 10px;
}

select {
    width: 100%;
    height: 40px;
    border: none;
    outline: 0;
    border-radius: 5px;
    border: 1px solid #cbced4;
    gap: 20px;
    box-sizing: border-box;
    padding: 0px 10px;
}

.input-text .input-div span {
    position: absolute;
    top: -25px;
    left: 6px;
    font-size: 14px;
    transition: all 0.5s;
}

.buttons {
    position: absolute;
    bottom: 20px;
    right: 5%;
}
.buttons2 {
    position: absolute;
    bottom: -100px;
    right: 7%;
}

.buttons button {
    height: 40px;
    width: 100px;
    border: none;
    border-radius: 5px;
    background-color: #218838;

    border: 1px solid#218838;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
}
.buttons2 button {
    height: 40px;
    width: 150px;
    border: none;
    border-radius: 5px;
    background-color: var(--main-web-color);

    border: 1px solid#9E9D24;
    font-size: 12px;
    color: #000;
    cursor: pointer;
}

.button_space {
    display: flex;
    gap: 20px;
}

.button_space button:nth-child(1) {
    background-color: #dc3545;

    color: rgb(255, 255, 255);
    border: 1px solid#dc3545;
}

.user_card {
    margin-top: 20px;
    margin-bottom: 40px;
    height: 200px;
    width: 100%;
    border: 1px solid #c7d3d9;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.user_card span {
    height: 80px;
    width: 100%;
    background-color: #dfeeff;
}

.circle {
    /* position:absolute;
    top:40px;
    left:60px; */
}

.circle {
    /* margin-top: 30px;
    height: 100px;
    width: 100px;
    background-color: #fff; */
    /* display:flex; */
    /* content: "asdasasdsa";
    border: 2px solid #9E9D24;
    border-radius:50%; */
}

.circle img {
    /*
    width: 100%;
    height: 100%;
    border-radius:50%;
    object-fit: cover; */
}

.social {
    display: flex;
    position: absolute;
    top: 100px;
    right: 10px;
}

.social span {
    height: 30px;
    width: 30px;
    border-radius: 7px;
    background-color: #fff;
    border: 1px solid #cbd6dc;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
    color: #cbd6dc;
}

.social span i {
    cursor: pointer;
}

.heart {
    color: red !important;
}

.share {
    color: red !important;
}

.user_name {
    position: absolute;
    top: 110px;
    margin: 10px;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.user_name h3 {
    color: #4c5b68;
}

.detail {
    /*margin-top:10px;*/
    display: flex;
    justify-content: space-between;
    margin-right: 50px;
}

.detail p {
    font-size: 12px;
    font-weight: 700;
}

.detail p a {
    text-decoration: none;
    color: blue;
}

.loader {
    position: relative;
    width: 100px;
    height: 100px;
}

.loader:before,
.loader:after {
    content: "";
    border-radius: 50%;
    position: absolute;
    inset: 0;
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3) inset;
}

.loader:after {
    box-shadow: 0 2px 0 #ff3d00 inset;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill 0.4s ease-in-out 0.4s forwards,
        scale 0.3s ease-in-out 0.9s both;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%,
    100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

.form-input img {
    width: 100%;
    display: none;
    margin-bottom: 30px;
}

.center {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-input {
    width: 350px;
    padding: 20px;
    background: #fff;
    box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
        3px 3px 7px rgba(94, 104, 121, 0.377);
}

.inputimg {
    display: none;
}

.labelUpload {
    color: white;
    background-color: var(--main-web-color);
    border: 2px solid var(--main-web-color);
}
p {
    color: rgb(255, 0, 0);
    margin: 0;
    padding: 0;
    font-size: 10px;
    justify-content: end;
    align-items: flex-end;
}

h6.errorMsg {
    color: rgb(255, 0, 0);
    margin: 0;
    padding-top: 2px;
    font-size: 10px;
    justify-content: end;
    align-items: flex-end;
}

#signInBtn {
    padding: 50px;
}

.warning {
    border: 1px solid red !important;
}

/*right-side-end*/

/* Mobile responsiveness improvements */
@media (max-width: 750px) {
    .container {
        height: auto;
        min-height: 100vh;
        padding: 10px;
    }

    .container .card {
        max-width: 100%;
        width: 100%;
        height: auto !important;
        margin: 20px 0;
        border-radius: 15px;
    }

    .container .card .form {
        flex-direction: column;
    }

    .container .card .left-side {
        width: 100% !important;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 0;
        padding: 30px 20px !important;
        order: 2;
    }

    .container .card .right-side {
        width: 100%;
        padding: 20px !important;
        order: 1;
    }

    .container .card .right-side .main {
        width: 100%;
        max-width: 100%;
    }

    /* Circle image improvements */
    .circle {
        width: 120px !important;
        height: 120px !important;
    }

    /* Upload label improvements */
    .labelUpload {
        font-size: 13px !important;
        padding: 8px 15px !important;
    }

    .progress-bar {
        margin-top: 0 !important;
    }

    .progress-bar h4 {
        font-size: 16px !important;
        text-align: center;
        color: #fff;
    }

    .input-text {
        display: block;
        width: 100%;
    }

    .input-text .input-div {
        margin-top: 15px;
        width: 100%;
    }

    .input-text .input-div input {
        font-size: 14px;
        padding: 12px;
    }

    .input-text .input-div span {
        font-size: 13px;
    }

    /* Button improvements for mobile */
    .btn-zonizer {
        font-size: 16px !important;
        padding: 12px 20px !important;
        width: 100% !important;
    }

    .buttons2 {
        font-size: 14px !important;
        padding: 10px 15px !important;
    }

    /* Fix registration form buttons positioning */
    .buttons {
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-top: 20px !important;
        width: 100%;
    }

    .button_space {
        width: 100%;
        justify-content: space-between !important;
    }

    .buttons button,
    .button_space button {
        flex: 1;
        min-width: 100px;
        font-size: 14px !important;
        padding: 10px 15px !important;
        margin: 0 5px;
    }

    .buttons .next_button,
    .button_space .next_button {
        background-color: var(--main-web-color) !important;
        border: 1px solid var(--main-web-color) !important;
        color: #000 !important;
    }

    .buttons .back_button,
    .button_space .back_button {
        background-color: #dc3545 !important;
        border: 1px solid #dc3545 !important;
        color: #fff !important;
    }

    /* Progress bar adjustments for register page */
    .progress-bar li {
        font-size: 12px !important;
        margin-left: 30px !important;
        margin-bottom: 30px !important;
    }

    .progress-bar li::before {
        height: 30px !important;
        width: 30px !important;
        line-height: 30px !important;
        font-size: 12px !important;
    }

    .steps-content h3 {
        font-size: 18px !important;
    }

    .steps-content p {
        font-size: 12px !important;
    }

    /* Form check improvements */
    .form-check-label {
        font-size: 13px !important;
    }

    /* Text improvements */
    .text2 h2 {
        font-size: 22px !important;
    }

    /* Navbar improvements */
    .navbar {
        padding: 5px 5% !important;
    }

    .nav-logo {
        width: 40px !important;
    }

    /* Row spacing improvements */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Better spacing for OR divider */
    .px-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Link improvements */
    .btn-link {
        font-size: 13px !important;
    }
}

/* Extra small devices (phones, less than 400px) */
@media (max-width: 400px) {
    .container .card {
        margin: 10px;
        border-radius: 10px;
    }

    .container .card .left-side {
        padding: 20px 15px !important;
    }

    .container .card .right-side {
        padding: 15px !important;
    }

    .progress-bar h4 {
        font-size: 14px !important;
    }

    .progress-bar li {
        font-size: 11px !important;
        margin-left: 25px !important;
        margin-bottom: 25px !important;
    }

    .progress-bar li::before {
        height: 25px !important;
        width: 25px !important;
        line-height: 25px !important;
        font-size: 11px !important;
    }

    .input-text .input-div input {
        font-size: 13px;
        padding: 10px;
    }

    .btn-zonizer {
        font-size: 14px !important;
        padding: 10px 15px !important;
    }

    .buttons button,
    .button_space button {
        font-size: 12px !important;
        padding: 8px 10px !important;
        min-width: 80px;
    }

    .nav-logo {
        width: 35px !important;
    }

    .form-check-label {
        font-size: 12px !important;
    }

    .btn-link {
        font-size: 12px !important;
    }

    .steps-content h3 {
        font-size: 16px !important;
    }

    .steps-content p {
        font-size: 11px !important;
    }
}

/*CSS*/
/* .spinner{
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    z-index: 1;
}
.spinner::before,
.spinner:after{
   content:"";
   position:absolute;
   border-radius:inherit;
}

.spinner:before{
   width:100%;
   height:100%;
   background-image: linear-gradient(
    0deg, #dac046 0%,
    #9E9D24 100% );
    animation: spin .5s infinite linear;
}

.spinner:after{
   width:85%;
   height:85%;
   background-color:#151515;
   top:50%;
   left:100%;
   transform:translate(-50%,-50%);
}

@keyframes spin{
   to{
       transform:rotate(360deg);
   }
} */

.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.632), rgba(10, 10, 10, 0.85)),
        url("../images/Homebackground.jpg");
    height: 100vh;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nav-logo {
    width: 50px;
}

.navbar {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    z-index: 1;
    padding: 0 10%;
    padding-bottom: 5px;
    padding-top: 9px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
}