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

body{
    background:#1a5a40d2;
}

/* Center container */
.hello{
    padding:20px;
}

/* Card */

.travel-card{
    width:380px;
    background:rgba(255,255,255,.12);
    backdrop-filter: blur(12px);
    border-radius:18px;
    padding:35px 28px;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    color:#fff;
}

/* Company name */

.brand{
width: 100%;
display: flex;
justify-content: center;
}

.brand img{
    width:70%;
    display:block;
    margin-bottom:10px;
}

.tagline{
    text-align:center;
    font-size:13px;
    opacity:.8;
    margin-bottom:25px;
}

/* Floating inputs */

.field{
    position:relative;
    margin-bottom:18px;
}

.field input{
    width:100%;
    padding:12px 10px;
    background:transparent !important;
    border:none;
    border-bottom:2px solid rgba(255,255,255,.4);
    outline:none;
    color:white;
}
input{
    Background:transparent;
}

.field label{
    position:absolute;
    left:0;
    top:12px;
    pointer-events:none;
    transition:.3s;
    opacity:.7;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label{
    top:-8px;
    font-size:12px;
    color:#9cffdf;
}

/* Button */

.submit-btn{
    width:100%;
    padding:12px;
    border:none;
    border-radius:30px;
    background:#fff;
    color:#1a5a40;
    font-weight:600;
    margin-top:10px;
    transition:.3s;
}

.submit-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.3);
}

/* Animation */

@keyframes fadeDown{
    from{
        opacity:0;
        transform:translateY(-15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* base input */
.field input{
    background: transparent !important;
    color: #ffffff !important;
    caret-color:#ffffff;
}

/* labels */
.field label{
    color:#9fe0c6;
}

/* chrome autofill */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* android autofill */
input:-internal-autofill-selected{
    background: transparent !important;
}

/* remove browser styling */
.field input{
    appearance:none;
    -webkit-appearance:none;
}

/* focus */
.field input:focus{
    outline:none;
    box-shadow:none;
}
/* force color after browser dropdown select */
.field input{
    color:#fff !important;
    background:transparent !important;
}

/* chrome suggestion select */
input:-webkit-autofill::first-line{
    color:#fff !important;
}

/* android chrome internal */
input:-internal-autofill-selected{
    -webkit-text-fill-color:#fff !important;
}

/* after selection repaint trick */
.field input{
    animation: fixColor 0.01s forwards;
}

@keyframes fixColor{
    from{color:#fff;}
    to{color:#fff;}
}