* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: "Roboto";
    src: url(fonts/Roboto-Regular.ttf) format("truetype");
}

@font-face {
    font-family: "Helvetica Neu";
    src: url(fonts/Helvetica.ttf) format("truetype");
}


@font-face {
    font-family: "Ubuntu";
    src: url(fonts/Ubuntu-Regular.ttf) format("truetype");
}


.background{
    background: url(../images/blur.webp) no-repeat ;
height: 100vh;
background-size: cover;



}

h1{
    color: #eedeea;
    font-family: 'Helvetica Neu','Roboto', 'Ubuntu';
    text-align: center;
    margin-top: 25px;
    font-size: 50px;
    font-family: 'Roboto';
    letter-spacing: 2px;
    font-weight: 300;

}

.kaire-div p{
text-align: center;
margin-top: 275px;

}

a {
color: #ceb1ff;
}



body{
    font-family: 'Helvetica Neu', sans-serif;
}

.container{
    display: flex;
margin-top: 400px;
justify-content: center;
}

.kaire-div{
  background-size: 600px 400px;
margin-top: 25px;
margin-bottom: 25px;
background: url(../images/back.webp) no-repeat;
background-size: cover;
padding: 0 25px;

}

.kaire-div p{
color: #ceb1ff;
    
    }
    


.desine-div{
    background-color: white;
    width: 450px;
    height: 450px;
    text-align: center;
    

}


.parent{
    margin-top: 50px;
    text-align: left;
    margin-left: 50px;
    line-height: 25px;

}

input{
    width: 350px;
    height: 25px;
    border: none;
border-bottom: 2px solid #f0f0f0;}

.main-div {
    margin-bottom: 25px;
}

.parent .main-div p {
font-size: 14px;
text-transform: uppercase;
color: #636363;
}


.buttons-2{
    display: flex;
}
.btn {
background-color: blue;
color: #fff;;
padding: 15px 35px;
font-size: 18px;
border: none;
border-radius: 25px;
margin-right: 25px;
font-weight: 800;
cursor: pointer;
}

.btn-update{
    background-color: #fff;
    color: #5c7ce8;
    border: none;
}

.p-custom{
    margin-top: 11px;
    color: #c4c2c2;
}

.x{
    width: 25px;
    height: 25px;
    float: right;
    margin-top: 12.5px;
    margin-right: 12.5px;}

.filter-green{
    filter: invert(99%) sepia(62%) saturate(19%) hue-rotate(180deg) brightness(102%) contrast(72%);


}

@media  (max-width: 500px) {

    .container{
        flex-direction: column;
        margin-top: 50px;
    }
h1{
    color: white;
}
    
    .kaire-div{
        height: 15vh;
    }

    .background{
        height: 120vh;
    }


    .desine-div{
        width: 490px;
    }

}