.div1{
    text-align: center;
    font-family: yasna;
}

.logo{
    width: 30%;
}

.main{

    width: 800px;
    height: 250px;
    border: 1px solid rgb(246, 242, 242);
    margin: auto;
    border-radius: 12px;
    background-color: rgb(247, 248, 249);
}
.head{
height: 20%;
background-color: rgb(209, 219, 228);
border-radius: 12px 12px 0px 0px;
border-bottom: 1px solid rgb(158, 158, 158);
overflow: hidden;

}
.btn{
    background-color: rgb(140, 199, 247);
    height: 100%;
    width: 10%;
    color: rgb(22, 68, 133);
    font-size: 25px;
    font-family: yasna;
    border-color: aliceblue;
    border-bottom: 2px solid rgb(87, 172, 228);
    font-weight: 400;
    cursor: pointer;
}

.btn1{

    background-color: transparent;
    height: 100%;
    width: 10%;
    color: rgb(22, 68, 133);
    font-size: 25px;
    font-family: yasna;
    border-color: aliceblue;
    border-bottom: 2px solid rgb(87, 172, 228);
    font-weight: 400;
    
}


@font-face{
  font-family: yasna;
  src: url(azarmehr-300.ttf);
}

.input{
    text-align: left;
    display: inline-block;
   
}
.in1{
    border: none;
display: inline-block;
 
}
.f:focus-visible{
    border: none;
    box-sizing: unset;
    outline: none;
}


.field{
    border: 1px solid #c2c2c2;
    border-radius: 5px;
width: 25px;
}

.field:hover{
    border: 1px solid black;
}

.btn2{
color: white;
background-color: rgb(51, 101, 226);
border-radius: 5px;
border: none;
padding: 6px 45px;
font-family: yasna;
font-size: 15px;
width: 155px;
cursor: pointer;
transition: 0.3s;
}
.btn2:hover{
    background-color: blue;
}