styles.css

/* Add CSS here */
body {
     display: grid;
     align-content: center;
     justify-content: center;
     background-color: #F3F3F3;
     height: 100vh;
 }
 .container {
     display: grid;
     grid-template-rows: 1fr 0.75fr 1.4fr 0.5fr 1fr;
     grid-template-columns: 1fr 1fr;
     position: relative;
     width: 420px;
     height: 360px;
     background-color: #FFFFFF;
     border-radius: 5%;
     padding: 25px;
     box-shadow: 0px 0px 10px rgb(0,0,0,0.2);
     text-align: left;
     align-items: center;
     align-content: center;
 }
 .fa-x {
     position: absolute;
     top: 16px;
     right: 16px;
     color: #B5B5B5;
     cursor: pointer;
 }
 .fa-x:hover {
     color: #000000;
 }
 h1 {
     grid-row: 1;
     grid-column: 1 / -1;
     font-weight: bolder;
     font-size: auto;
 }
 .text-one{
     grid-row: 2;
     grid-column: 1 / -1;
     font-size: 11.5px;
 }
 form{
     grid-row: 3;
     grid-column: 1 / -1;
     display: grid;
     height: 75%;
     grid-template-columns: 1fr 3fr 1fr;
 }
 select {
     grid-column: 1;
     text-align: center;
     border-radius: 5px 0px 0px 5px;
     background-color: #F1F1F1;
 }
 .mobile-number {
     text-align: left;
     grid-column: 2;
     background-color: #F1F1F1;
     padding-left: 10px;
 }
 .mobile-empty {
     border-width: 1px;
     box-shadow: 0px 2px 0px rgb(207, 15, 15);
 }
 .mobile-empty-effect {
     transition: all 0.5s;
     transform: scale(1.05);
 }
 input[type=submit] {
     grid-column: 3;
     text-align: center;
     color: #FFFFFF;
     background-color: #5790ED;
     border-radius: 0px 5px 5px 0px;
     cursor: pointer;
 }
 .modal {
     display: none; /* Hidden modal by default */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.5); /* semi-transparent background */
     z-index: 1; /* .modal is on top of other elements */
 }
 
 .modal-content{
     display: grid;
     background-color: #baeecd;
     margin: 10% auto; /* centered modal vertically & horizontally */
     position: relative;
     align-items: center;
     padding: 20px;
     border: 1px solid #888;
     width: 50%;
     height: 20%;
     border-radius: 5px;
     color: #413f3f;
 }
 .close {
     position: absolute;
     top: 5px;
     right: 15px;
     font-size: 20px;
     font-weight: bold;
     cursor: pointer;
 }
 /* Clear floating elements */
 .clearfix::after {
     content: "";
     clear: both;
     display: table;
 }
 .text-two {
     grid-row: 4;
     align-self: end;
     grid-column: 1 / -1;
     font-weight: bold;
     font-size: 15px;
 }
 .text-three {
     grid-row: 5;
     grid-column: 1 / -1;
     font-size: 14px;
 }
 .text-four {
     grid-row: 5;
     grid-column: -1;
     text-align: right;
     color: #5790ED;
     cursor: pointer;
 }
 .text-four:hover{ 
     color: black
 }