body {
    background-color: #43AFFC;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

nav
{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:70px;
 background:black;
 padding:0 100px;
 box-sizing:border-box;
 font-size:14px;
 z-index:1;
}

nav ul
{
 float:right;
 display:flex;
 margin:0;
 padding:0;
}

nav ul li
{
 list-style:none
}

nav ul li a
{
 position:relative;
 display:block;
 height:70px;
 line-height:70px;
 padding:0 20px;
 box-sizing:border-box;
 color:#e4d7c9;
 text-decoration:none;
 text-transform:uppercase;
 transition:.5s;
}

nav ul li a:hover
{
 color:#262626;
}

nav ul li a:before
{
 content:'';
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:#e4d7c9;
 transform-origin:right;
 z-index:-1;
 transform:scaleX(0);
 transition:.5s;
}

nav ul li a:hover:before
{
 transform-origin:left;
 transform:scaleX(1);
}

nav .banner
{
  float:left;
  width:130px;
  border-radius:1px;
}


.heading {
    font-family: 'Poppins', sans-serif;
    margin: 35px auto 20px;
}
h1 {
    font-size: 10px
}

hr {
    border-top: 2px solid black;
    width: 40%;
    margin-bottom: 55px;
}

.main {
    width: 50vw;
    margin: auto;
    padding: 30px;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

label {
    font-size: 20px;
}

.btn {
    width: 200px;
}

#finalAmount {
    font-family: 'Poppins', sans-serif;
    display: none;
    margin: 50px auto;
}

#finalAmount h2 {
    font-size: 50px;
}

.finalValue {
    font-family: 'Poppins', sans-serif;
}

@media (max-width: 768px) {
    hr {
        width: 60%;
    }
    .main {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .heading {
        font-size: 60px;
    }
    hr {
        width: 75%;
    }
    #finalAmount h2, .finalValue {
        font-size: 40px;
    }
}