@font-face {
  font-family: NouvelR;
  src: url(../assets/fuente/NouvelRRegular.ttf);
  /* src: url(font/RenaultGroupAH-Book.ttf); */
} 
:root {
  --Link-color: #a3a3a7;
  --light-gray: #e6e3e3;
  --light-gray-placeholder : #a3a2a2;
  --green-check : #30c88f;
  --oranje-warning : #f7a84b;
  --lleyow-find : #efdf00;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    font-family: NouvelR;
    font-size: 1.2em;
}

.page-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100vw;
    height: 100vh;
    min-width: 576px;
}

.card-container{    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    min-width: 576px;
    text-align: center;
    width: 30%;
}

.card-form{    
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    border: 1px solid var(--light-gray);
    border-radius: 3px;
    width: calc(100% / 2);
    height: 100%;
}

.card-details{
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: 72% 20%;
    width: calc(100% / 2);
    gap:20px;
    height: 100%;
}

input{
    font-family: inherit;
    font-size: 0.8em;
    height: 3em;
}

#submit{
    background-color: black;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.input-container{
    position: relative;
}

.input{
    padding: 0 10px 0 10px;
    text-transform: uppercase;
    border: 1px solid var(--light-gray);
    border-radius: 3px;
    outline: none;  
    width: 100%;  
}

.placeHolder{
    font-size: 0.8em;
    color: var(--light-gray-placeholder);   
    position: absolute;
    top: 26%;
    left: 6%;
    pointer-events: none;
    background-color: white;
    transition: all .3s ease;
}

#form{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caorrosel{
    width: 200%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .5s ease;    
    height: 253px;
    transform: translateX(0%);
}

.caorrosel-container{
    width: 60%;
    overflow: hidden;
}

.black-header{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: black;
    color: white;
    padding: 10px;    
}

#title{
    font-size: 0.8em;
}

#vin{
    font-size: 0.7em;
}

#text-details{
    margin-top: -17px;
    font-size: 0.7em;
    position: relative;
}
.circle-check{
    width: 34px;
    height: 34px;
    background: var(--green-check);
    border-radius: 50%;
    position: absolute;
    top: 89px;
    left: 502px;
}

.circle-check::after{
    content: "";
    background-image: url(../assets/icons/check.ico);
    background-size: cover;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 18%;
    left: calc(50% - 10px);
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(260deg) brightness(109%) contrast(101%);
    
    color: white;
}

.circle-warning{
    width: 34px;
    height: 34px;
    background: var(--oranje-warning);
    border-radius: 50%;
    position: absolute;
    top: 73px;
    left: 502px;
}

.circle-warning::after{
    content: "";
    background-image: url(../assets/icons/warning.png);
    background-size: cover;
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 18%;
    left: calc(50% - 10px);
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(260deg) brightness(109%) contrast(101%);
    
    color: white;
}

.contein-details{
    padding: 10px;
    margin-top: 20%;
}

.again{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
}

#buttom-again{
    border: 1px solid var(--light-gray);
    padding: 10px;
    font-size: .7em;
    cursor: pointer;
}

#find-dealer{
    background: var(--lleyow-find);
    padding: 10px;
    font-size: .7em;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.details{
    border: 1px solid var(--light-gray);
}