* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #fafbfe;
    /* Very faded gray background */
    overflow-x: hidden;
    height: 50vh;
    color: #333;
    /* Dark gray text color */
    font-family: "ALK Sanet", sans-serif;
}

input {
    border-radius: 15px;
    position: relative;
    width: 300px;
    padding: 20px;
}

.logo-warwera {
    /* border: 1px solid #ddd; */
    border-radius: 4px;
    padding: 5px;
    width: 250px;
}


/* div{

    position: relative;

} */

div .file {
    position: absolute;
    left: 10%;
    display: none;
}

.fa-camera {
    position: absolute;
    top: 15px;
    left: 95%;
    cursor: pointer;
}

#file-input {
    display: none;
}

#close {
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 9999;
    left: 94%;
    cursor: pointer;
    display: none;
    transform: translateX(-123%);
}


/*nav-bar aq rcheba qvemot sxva elementis kodebia gawerili*/

.main-content {
    width: auto;
    height: auto;
    padding-top: 50px;
    padding-left: 100px;
    padding-right: 100px;
    display: flex;
    flex-direction: column;
}

.txt-content {
    width: 100%;
    height: auto;
}

.txt-content .moitxove-nawili {
    color: rgb(28, 27, 27);
    font-size: 23px;
}

.txt-content .xazi {
    width: 100%;
    height: 2px;
    background-color: #858997;
    margin-top: 15px;
    margin-bottom: 40px;
}

.segment-first {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.new-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.segment-first .input-first {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

.flex,
.flex3 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.flex4,
.flex5,
.flex6,
.flex10,
.flex11,
.flex12 {
    width: 100%;
}

.segment-first .sheavset-forma {
    color: rgb(32, 31, 31);
    font-size: 25px;
    padding-bottom: 25px;
}

.input-first input {
    width: 100%;
    height: 3rem;
    background: transparent;
    border: 1px solid rgb(32, 31, 31);
    color: rgb(32, 31, 31);
    padding: 10px;
    outline: none;
    font-size: 1rem;
}

.input-first .piradi-monacemebi {
    font-weight: 900;
    color: rgb(32, 31, 31);
    font-size: 15px;
    width: 100%;
    text-align: start;
}

.segment-second {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    display: none;
}

.segment-three {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    display: none;
}

.flexing {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.flexingNew {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.flexing7 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.flex7 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

.borderr {
    border-radius: 15px;
    /* background: #b8c3f1; */
    padding: 20px;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.segment-three .informacia {
    font-weight: 900;
    color: rgb(32, 31, 31);
    font-size: 15px;
    width: 41rem;
    text-align: start;
    user-select: none;
}

.segment-three .informacia2 {
    font-weight: 900;
    color: rgb(32, 31, 31);
    font-size: 15px;
    width: 41rem;
    text-align: start;
    user-select: none;
}

.content-left {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-left: 25px;
}

.wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
}

.segment-second .sheavset-forma {
    font-weight: 900;
    color: rgb(32, 31, 31);
    font-size: 15px;
    width: auto;
    text-align: start;
    user-select: none;
}

.regionis-regular {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.regionis-regular select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #f8f8f8;
    border: 1px solid rgb(32, 31, 31);
    padding: 10px;
    border-radius: 15px;
    font-size: 14px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    color: rgb(32, 31, 31);
    width: 100%;
    height: 3rem;
    font-family: inherit;
}

.regioni-label {
    margin-bottom: 6px;
    font-weight: bold;
    color: #333;
}


/* #region-select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
} */

.markas-relative input,
.modelis-relative input {
    width: 20rem;
}

.dzravis-relative input,
.regionis-relative input,
.gamoshvebis-relative input,
.regionis-relative input,
.gadacemata-relative input,
.sawvavis-relative input,
.wamyvanis-relative input {
    width: 13rem;
}

.markas-relative i,
.modelis-relative i,
.gamoshvebis-relative i,
.dzravis-relative i,
.regionis-relative i,
.regionis-relative i,
.gadacemata-relative i,
.sawvavis-relative i,
.wamyvanis-relative i {
    font-size: 20px;
    color: rgb(32, 31, 31);
    position: absolute;
    top: 13px;
    right: 10px;
    transition: 0.3s all;
}

.markas-relative i.active,
.modelis-relative i.active,
.gamoshvebis-relative i.active,
.regionis-relative i.active,
.dzravis-relative i.active,
.regionis-relative i.active,
.gadacemata-relative i.active,
.sawvavis-relative i.active,
.wamyvanis-relative i.active {
    transform: rotate(180deg);
}

.markas-relative .options2,
.modelis-relative .options3 {
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    position: absolute;
    padding: 20px;
    background-color: white;
    margin-top: 10px;
    border-radius: 8px;
    z-index: 300;
    flex-direction: column;
    gap: 16px;
}

.gamoshvebis-relative .options4,
.dzravis-relative .options5,
.regionis-relative .options6,
.gadacemata-relative .options10,
.sawvavis-relative .options15,
.wamyvanis-relative .options16,
.regionis-relative .options9 {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    position: absolute;
    padding: 20px;
    background-color: white;
    margin-top: 10px;
    border-radius: 8px;
    z-index: 300;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.option6 .option-text6 {
    font-size: 14px !important;
}

.options2,
.options3,
.options4,
.options9,
.options5,
.options6,
.options10,
.options15,
.options16 {
    height: 300px;
    overflow-y: scroll;
    display: none;
}

.markas-relative.active .options2,
.modelis-relative.active .options3,
.gamoshvebis-relative.active .options4,
.regionis-relative.active .options9,
.dzravis-relative.active .options5,
.regionis-relative.active .options6,
.gadacemata-relative.active .options10,
.sawvavis-relative.active .options15,
.wamyvanis-relative.active .options16 {
    display: flex;
}

.options4::-webkit-scrollbar {
    width: 10px;
}

.options4::-webkit-scrollbar-thumb {
    background-color: #d0d0d4;
    border-radius: 8px;
}

.options6::-webkit-scrollbar {
    width: 10px;
}

.options6::-webkit-scrollbar-thumb {
    background-color: #d0d0d4;
    border-radius: 8px;
}

.options5::-webkit-scrollbar {
    width: 10px;
}

.options9::-webkit-scrollbar {
    width: 10px;
}

.options5::-webkit-scrollbar-thumb {
    background-color: #d0d0d4;
    border-radius: 8px;
}

.options3::-webkit-scrollbar {
    width: 10px;
}

.options3::-webkit-scrollbar-thumb {
    background-color: #d0d0d4;
    border-radius: 8px;
}

.options2::-webkit-scrollbar {
    width: 10px;
}

.options2::-webkit-scrollbar-thumb {
    background-color: #d0d0d4;
    border-radius: 8px;
}

.options15::-webkit-scrollbar-thumb {
    background-color: #d0d0d4;
    border-radius: 8px;
}

.options9::-webkit-scrollbar-thumb {
    background-color: #d0d0d4;
    border-radius: 8px;
}

.options2 .option2,
.options3 .option3,
.options4 .option4,
.options5 .option5,
.options6 .option6,
.options10 .option10,
.options15 .option15,
.options16 .option16 {
    border: 1px solid;
    display: flex;
    height: 55px;
    cursor: pointer;
    padding: 0 16px;
    border-radius: 8px;
    align-items: center;
    transition: 0.3s all;
}

.options2 .option2:hover,
.options3 .option3:hover,
.options4 .option4:hover,
.options5 .option5:hover,
.options6 .option6:hover,
.options10 .option10:hover,
.options15 .option15:hover,
.options16 .option16:hover {
    background: #85899730;
}

.option2 i,
.option3 i,
.option4 i,
.option5 i,
.option6 i,
.option10 i,
.option15 i,
.option16 i {
    font-size: 25px;
    margin-right: 12px;
}

.option2 .option-text2,
.option3 .option-text3,
.option4 .option-text4,
.option5 .option-text5,
.option6 .option-text6,
.option10 .option-text10,
.option15 .option-text15,
.option16 .option-text16 {
    font-size: 18px;
    color: rgb(32, 31, 31);
    user-select: none;
}

.sheavset-forma3 {
    color: rgba(0, 0, 0, 0);
    font-size: 15px;
    width: auto;
    text-align: start;
    user-select: none;
}

.vin-relative input,
.flexing7 input {
    width: 660px;
}

.wrap input {
    width: 13px;
    height: 12px;
}

.wrap h4 {
    color: rgb(32, 31, 31);
    font-size: 13.4px;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

.content-ori h4 {
    font-weight: 900;
    color: rgb(32, 31, 31);
    font-size: 13.4px;
    text-align: center;
    white-space: nowrap;
    margin: 0;
}

.content-ori {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 35rem;
    text-align: center;
    height: 30px;
}

.content-ori input {
    width: 13px;
    height: 12px;
}

.main {
    margin-top: 5px;
}

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

.flexcenter .send {
    border-radius: 15px;
    width: 100%;
    height: 3rem;
    cursor: pointer;
    border: none;
    outline: none;
    font-weight: bold;
    color: white;
    background-color: #eb6209;
    font-size: 17px;
    transition: 0.5s;
}

.flexcenter .send:hover {
    background-color: #a74200;
}

.buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.buttons .carbutton {
    width: 20rem;
    height: 3rem;
    cursor: pointer;
    border: none;
    outline: none;
    font-weight: bold;
    color: rgb(32, 31, 31);
    background-color: #858997;
    font-size: 17px;
    transition: 0.5s;
}

.buttons .carbuttonsec {
    width: 20rem;
    height: 3rem;
    cursor: pointer;
    border: none;
    outline: none;
    font-weight: bold;
    color: #858997;
    background-color: #858997;
    font-size: 17px;
    transition: 0.5s;
}

.buttons .carbutton:hover {
    background-color: #a74200;
}

.buttons .carbuttonsec:hover {
    background-color: #a74200;
}

.buttons .copyright {
    text-align: center;
    font-size: 18px;
    color: #858997;
    padding-top: 50px;
    padding-bottom: 20px;
}

input {
    height: 3rem;
    background: transparent;
    border: 1px solid rgb(32, 31, 31);
    color: rgb(32, 31, 31);
    padding: 10px;
    outline: none;
    font-size: 1rem;
}

input.invalid {
    border-color: red;
}


/* Apply red border when input is invalid and has been interacted with */

input.invalid:focus {
    border-color: red;
}

.input-first .saxelis-relative,
.nomeris-relative,
.gadacemata-relative,
.dzravis-relative,
.sawvavis-relative,
.regionis-relative,
.wamyvanis-relative,
.gamoshvebis-relative,
.emailis-relative,
.markas-relative,
.modelis-relative,
.vin-relative {
    width: 100%;
    position: relative;
}

.saxelis-relative span,
.nomeris-relative span,
.emailis-relative span,
.saxeli,
.dzravis-nomeri,
.sawvavis-nomeri,
.regionis-nomeri,
.wamyvanis-nomeri,
.markas-relative .teles-nomeri,
.gamoshvebis-nomeri,
.gadacemata-nomeri,
.modelis-nomeri,
.vin-nomeri {
    position: absolute;
    left: 0;
    top: 3px;
    padding: 10px;
    color: rgb(32, 31, 31);
    font-size: 14px;
    text-transform: uppercase;
    pointer-events: none;
    transition: 0.6s;
}

input:valid~span,
input:focus~span {
    transform: translateY(-11px);
    font-size: 0.63rem;
}

input:not(:invalid) {
    border: 1px solid;
}

input:valid~.teles-nomeri,
input:focus~.teles-nomeri,
input:valid~.vin-nomeri,
input:focus~.vin-nomeri,
input:valid~.modelis-nomeri,
input:focus~.modelis-nomeri,
input:valid~.gamoshvebis-nomeri,
input:focus~.gamoshvebis-nomeri,
input:focus~.regioni,
input:valid~.regioni,
input:valid~.dzravis-nomeri,
input:focus~.dzravis-nomeri,
input:valid~.regionis-nomeri,
input:focus~.regionis-nomeri {
    transform: translateY(-11px);
    font-size: 0.63rem;
}

input:focus {
    border: 2px solid rgb(32, 31, 31);
}

@media (max-width: 1000px) {
    .borderr {
        width: 700px;
    }
}

@media screen and (max-width: 768px) {
    .fa-camera {
        left: 92%;
    }
    .segment-second {
        gap: 0;
    }
    .vin-relative,
    .flexingNew {
        margin-top: 20px;
    }
}

@media (max-width: 700px) {
    .borderr {
        width: 600px;
    }
    .flexing {
        flex-direction: column;
    }
    .flexingNew {
        flex-direction: column;
    }
    .sheavset-forma3 {
        display: none;
    }
    .dzravis-relative input,
    .sawvavis-relative input,
    .regionis-relative input,
    .wamyvanis-relative input,
    .gamoshvebis-relative input,
    .gadacemata-relative input {
        width: 40rem;
    }
    .vin-relative input,
    .flexing7 input {
        width: 40rem;
    }
    .markas-relative input,
    .modelis-relative input {
        width: 40rem;
    }
    .main-content {
        padding-left: 10px;
        padding-right: 10px;
    }
    .content-ori input {
        width: 13px;
        height: 12px;
    }
    .wrap input {
        width: 13px;
        height: 12px;
    }
    .segment-three .informacia2,
    .segment-three .informacia {
        width: 40rem;
    }
}

@media (max-width: 670px) {
    .borderr {
        width: 600px;
    }
    .dzravis-relative input,
    .sawvavis-relative,
    .regionis-relative input,
    .wamyvanis-relative input,
    .gamoshvebis-relative input,
    .gadacemata-relative input {
        width: 30rem;
    }
    .vin-relative input,
    .gadacemata-relative input,
    .sawvavis-relative input,
    .wamyvanis-relative input,
    .flexing7 input {
        width: 30rem;
    }
    .markas-relative input,
    .modelis-relative input {
        width: 30rem;
    }
    .content-ori input {
        width: 13px;
        height: 12px;
    }
    .wrap input {
        width: 13px;
        height: 12px;
    }
    .segment-three .informacia2,
    .segment-three .informacia {
        width: 30rem;
    }
    .content-ori {
        width: 30rem;
    }
}

@media (max-width: 600px) {
    .borderr {
        width: 550px;
    }
    .dzravis-relative input,
    .sawvavis-relative,
    .regionis-relative input,
    .wamyvanis-relative input,
    .gamoshvebis-relative input,
    .gadacemata-relative input {
        width: 25rem;
    }
    .vin-relative input,
    .gadacemata-relative input,
    .sawvavis-relative input,
    .wamyvanis-relative input,
    .flexing7 input {
        width: 25rem;
    }
    .markas-relative input,
    .modelis-relative input {
        width: 25rem;
    }
    .content-ori input {
        width: 13px;
        height: 12px;
    }
    .segment-three .informacia2,
    .segment-three .informacia {
        width: 25rem;
    }
    .content-ori {
        width: 25rem;
    }
    .content-ori h4 {
        white-space: normal;
        font-size: 13px;
    }
    .wrap h4 {
        color: rgb(32, 31, 31);
        font-size: 13px;
        text-align: center;
        white-space: nowrap;
    }
    .content-ori h4 {
        text-align: start;
    }
    .wrap input {
        width: 13px;
        height: 12px;
    }
    .main {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 450px) {
    .borderr {
        width: 400px;
    }
    .dzravis-relative input,
    .sawvavis-relative,
    .regionis-relative input,
    .wamyvanis-relative input,
    .gamoshvebis-relative input,
    .gadacemata-relative input {
        width: 100%;
    }
    .vin-relative input,
    .gadacemata-relative input,
    .sawvavis-relative input,
    .wamyvanis-relative input,
    .flexing7 input {
        width: 100%;
    }
    .markas-relative input,
    .modelis-relative input {
        width: 100%;
    }
    .content-ori input {
        width: 13px;
        height: 12px;
    }
    .segment-three .informacia2,
    .segment-three .informacia {
        width: 20rem;
    }
    .content-ori {
        width: 20rem;
    }
    .flexing7 #informacia {
        height: 4rem;
    }
    .wrap input {
        width: 13px;
        height: 12px;
    }
}

@media (max-width: 350px) {
    .borderr {
        width: 325px;
    }
    .dzravis-relative input,
    .sawvavis-relative,
    .regionis-relative input,
    .wamyvanis-relative input,
    .gamoshvebis-relative input,
    .gadacemata-relative input {
        width: 18rem;
    }
    .vin-relative input,
    .gadacemata-relative input,
    .sawvavis-relative input,
    .wamyvanis-relative input,
    .flexing7 input {
        width: 18rem;
    }
    .markas-relative input,
    .modelis-relative input {
        width: 18rem;
    }
    .content-ori input {
        width: 13px;
        height: 12px;
    }
    .segment-three .informacia2,
    .segment-three .informacia {
        width: 18rem;
    }
    .content-ori {
        width: 18rem;
    }
    .buttons .carbutton,
    .buttons .carbuttonsec {
        width: 18rem;
    }
    .wrap input {
        width: 13px;
        height: 12px;
    }
}

@media (max-height: 768px) {
    .buttons .copyright {
        padding-top: 130px;
    }
}

@media (max-height: 900px) {
    .buttons .copyright {
        padding-top: 180px;
    }
}

.buttons .carbutton,
.buttons .carbuttonsec {
    background-color: #eb6209;
    /* Blue button background */
    color: white;
    /* White text color for buttons */
    border-radius: 15px;
}