.container{
    width:1440px;
    text-align: center;
    margin: auto;
    
      
}


.main-text{
    line-height: 20px;
}



.main-text p{
    font-size: 20px;
    font-family: 'Noto Serif Khojki', serif;
    
    
   
   
}

.main-text h1{
    font-size: 40px;
    font-weight:300;
    color: hsl(0, 0%, 59%);
    font-family: 'Libre Franklin', sans-serif;
    
}

.bold{
    font-weight: 600;
    color: black;
}

.form , .main-text, .logo{
    position: relative;
    top: 50px;
}

.main-text  h1,h2{
    margin-top: 80px;
}

.form input{
    margin-top: 30px;
}


.form input{
    width: 26%;
    padding: 20px;
border-radius: 50px 50px 50px 50px;
border-color: hsl(0, 0%, 59%);

}

.form  button{
background-color: hsl(223, 87%, 63%);
padding: 15px;
outline: none;
border: none;
width: 13%;
border-radius: 50px 50px 50px 50px;
color: hsl(0, 0%, 59%);
font-size: 20px;
margin-left: 10px;
}
.form  button:hover{
    background-color: hsl(223, 100%, 88%);
}

.form  button a{
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    
}

.graphic-img{
    width: 39%;
    height: 400px;
    position: relative;
    top: 120px;
    left: 31%;
    margin-bottom:200px ;
} 

.graphic-img img{
    width: 100%;
    height: 100%;
}

.social-icons{
    width: 40%;
    height: 100px;
     margin: auto;
     text-align: center;
}

.social-icons i{
    margin: 20px 20px;
     padding: 10px;
    border-radius: 50%;
    color: hsl(223, 87%, 63%) ;
}

.social-icons i:hover{
    background-color: hsl(223, 87%, 63%) ;
    color: #fff;
}

footer p{
    text-align: center;
    position: relative;
    bottom: 25px;
   color:hsl(0, 0%, 59%);
   font-weight: 300;
   font-size: 15px; 

}


/* ---------------Mobile Design------------------ */

@media screen and (max-width:375px) {
    
.container{
    width: 375px;
     
}

.main-text h1{
    font-size: 25px;
}

.main-text p{
    font-size: 15px;
    font-weight: 300;
}


.form input{
    width: 80%;
    border-color: rgb(198, 196, 196);
}

.form button{
    width: 92%;
    margin-top: 10px;
}

.graphic-img {
    width: 100%;
    margin-left: -90px;
    height: 90%;
}

.graphic-img img{
    width: 90%;
    height: 90%;
    
}
 

.social-icons {
 
        width: 30%;
        height: 50px;
          
   
}

.social-icons i{
    padding: 5px;
    margin: 4px 4px;
}

}