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

body{
    background:linear-gradient(to right,rgba(255, 0, 0, 0.594),rgba(0, 128, 0, 0.525));
}

.head{
    background: linear-gradient(to right ,black,red);
    color:gold;
    width: 50%;
    
    margin: auto;
    text-align: center;
    border-radius: 40px;
    border: 2px solid yellow;
    
}
.main{
    width: 90%;
    background:linear-gradient(to right,red,green);
    height: 600px;
    margin: auto;
    margin-top: 20px;
    border-radius: 20px ;
    overflow: hidden;
    box-shadow: inset 0px 0px 20px 2px black;
    display:flex;
    /* flex-direction: column; */
    

}
.from , .to{
    padding: 5%;
    width: 20%;
    background-color: rgba(133, 176, 181, 0.311);
    height: 300px;
    margin: auto;
    /* margin-top: 30px;   */
    border-radius: 20px;
    /* border: 1px solid black;  */
    box-shadow: inset 0px 0px 20px 2px black;
}
input , .ch{
    display: block;
    background-color: rgba(225, 225, 225, 0.767);
    width: 100px;
    margin: auto;
    /* margin-top: 10px; */
    font-size: 20px;
    border-radius: 12px;
    outline:none;
    padding: 4px;
}
.p{
    width: fit-content;
    margin: auto;
    color: yellow;
    margin-top: 15px;
    /* padding: 5%; */
    font-size: 19px;
}
.img{
    display: block;
    margin: auto;
}
.hd{
    background:linear-gradient(to right ,black,red);
    width: 15%;
    height: 15%;
    text-align: center;
    margin: auto;
    /* margin-top: 20px; */
    border-radius: 15px;
    font-size: x-large;
    color: gold;
    box-shadow: inset 0px 0px 10px 1px yellow;
}
/* Mobile Devices  */
@media (max-width: 1000px) {
    .head{
        border-radius: 20px;
    }
   .main{
    padding: 20px;
    gap: 1rem;
    flex-direction: column;
   }
   .from ,.to{
    width: 60%;
    height: 220px;
    /* height: auto; */
   }
   .hd{
    /* margin-top: 10px; */
    /* display: block; */
    width: 45%;
    padding: 2%;
    /* margin: auto; */
   }
}