:root{
    --black1:#000000;
    --black2:#454545;
    --sky:#D9EDF7;
    --blue:#072EBD;
    --blue2:#67ADFF;
    --green:#13CEB6;
    --grey:#F7F7F7;
    --white:#ffffff;

     }
        .contact{
            width:80%;
            margin:50px auto;
            padding:25px;
            background-color: var(--white);
            box-shadow:0 0 5px var(--white);
            border-radius: 5px;
            position: relative;

        }
        hr{
            margin: 20px;
            opacity: 20%;
        }
        .contact h2,
        .contact h4{
            color: var(--black1);
            font-weight: 600;
            text-align: start;
            margin:10px;
            margin-bottom: 0px;
        }
        .contact .information{
            display: flex;
            position: relative;
            width:100%;
 
        }
        .contact .information .self{
            position: relative;
            width: 30%;
        }
        .contact .information .self a{
            font-size: 13px;
            color: var(--black1);
            margin-left: 10px;
        }
        .contact .information .self i,
        .contact .information .self ion-icon{
            opacity:75%;
        }
        .contact .message{
            width:65%
        }
        .contact .information hr{
            margin-right:50px
        }
        .contact input,
        .contact textarea
        {
            margin: auto;
            width:95%;
            margin-bottom:20px;
            padding:10px 8px;
            border-radius: 5px;
            border:none;
            outline:1px solid var(--sky)

        }
        .contact input:hover,
        .contact textarea:hover{
            box-shadow:inset 0 0 5px var(--sky);
        }
       
        
        .contact .message-button{
            background-color: var(--black1);
            color: var(--white);
            padding:10px 50px;
            border-radius: 5px;
            margin-top:500px;
            transition: .2s;

        }
        .contact .message-button:hover{
            opacity:75%;
            transition: .2s;
        }
        .contact p{
            font-size: 13px;
            text-align: start;
            margin-bottom:5px ;
        }
        .login p a{
            color: var(--blue);
            transition: .2s;

        }