.swal-modal {
    width: 298px;
}

.container{

    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   
}


.container h2{

  padding-top: 60px;
}


input[type=email] {

    padding: 10px 20px ;
 
}


input[type=text] {

    padding: 10px 20px ;
 
}





input[type=Number] {

    padding: 10px 20px ;
 
}




input::placeholder{

    padding: 20px;
}


input{

    padding: 30px;
}



input[type=email]:focus{

padding-left: 40px;
 
}


input[type=text]:focus{

padding-left: 40px;
 
}



input[type=Number]:focus{

    padding-left: 40px;
     
    }
    
    


.form-label{

    padding-top: 10px;
    font-size: 15px;
    font-weight: 900;
}


.icon{

    position: absolute;
    top:18%;
   left: 4%;
   font-size: 20px;
   display: flex;
   align-items: center;
   color: #333399;

   
}




.user{

    position: absolute;
    top:51%;
   left: 4%;
   font-size: 20px;
   display: flex;
   align-items: center;
   color: #333399;

   
}



.whatsapp{

    position: absolute;
    top:35%;
   left: 3%;
   font-size: 20px;
   display: flex;
   align-items: center;
   color: green;
   
}




.fa-forward{

    position: absolute;
    top:92%;
   right: 30%;
   font-size: 20px;
   display: flex;
   align-items: center;
   color:rgb(255, 255, 255);

   
}



form{

    width: 40%;
    display:  inline-block;
    margin-top: 58px;
    position: relative;
    color: white;

  
 



    
}


.form{

    background-color: #1DA1F2;
    width: 70%;
    text-align: center;
    display: inline-block;
    height: 100vh;
}


.form h1{

    font-size: 30px;
}




@media screen and (max-width:900px) {

    form{

        width: 70%;
        margin-top: 50px;
    }
    


    .form {

        width: 100%;
    }
        



    .container {

        background-color: #1DA1F2;
        

    }


    .container h2 {

        color: rgb(255, 255, 255)
    }



    
}