@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);


:root{
    --bg-color: #000;
    --hover-color: #fff;
    --main-color: #1e90ff;
    --font-color:#fff;
    --h1-color:#fff;
    --a-color:#fff;
}
*,
*::after,
*::before{
    margin: 0;
    padding: 0;
}
body{
    background: url('bg.jpg') no-repeat center center fixed;

    color: var(--font-color);
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

h1{
    font-size: 1.7em;
    color: var(--h1-color);
}
img{
    max-width: 6rem;
}
a{
    color: var(--a-color);
    text-decoration: none;
}
.container{
    width: 80%;
    max-width: 740px;
}
/* Logo start */
.logo{
    padding-bottom: 1em;
}
path{
    stroke-dasharray: 7309.478515625px;
    stroke-dashoffset: 7309.478515625px;
    animation: lineAnimation 1s ease forwards;
    animation-delay: .5s;
}
@keyframes lineAnimation{
    to {
        stroke-dashoffset: 0px;
    }
}
/* Logo end */


.title-decoration{
    position: relative;
}
.title-decoration::after{
    content: '';
    position: absolute;
    width: 100%;
    height:3px;
    background: var(--main-color);
    bottom:-8px;
    left: 0;
    animation: .75s ease-in .2s 1 slideInFromLeft;
}

@keyframes slideInFromLeft{
    0%{
      width: 0%;
      opacity: 0;
    }
    50%{
        width: 110%;
        opacity: 1;
    }
    80%{
        width: 95%;
    }
    100%{
        width: 100%;
    }
}

.small-text{
    padding:1em 0;
}
.contact p a{
    display: flex;
    align-items: center;
    padding-bottom: .75rem;
    font-size: 19px;
    gap:.75rem;
}
.social-media{
    padding-top: 1em;
}

.social-media .fa{
    font-size: 1.2em;
    transition: .2s;
}
.fa-facebook{
    padding: .75rem 1.1rem;
}
.fa-linkedin,
.fa-whatsapp{
    padding: .75rem .9rem;
}
.fa-facebook:hover{
    background: #4267B2;
}
.fa-whatsapp:hover{
    background: #25D366;
}
.fa-linkedin:hover{
    background: #0077b5;
}

@media (min-width: 360px) {
    .link{
        position: relative;
    }
    .link::before{
        content: '';
        position: absolute;
        width: 100%;
        background: var(--main-color);
        height: 9%;
        bottom:20%;
        z-index: -1;
        transition: .2s;
        opacity: .75;
    }
    .link:hover::before{
        content: '';
        height: 100%;
        bottom: 0;
        transition: .2s;
        opacity: 100%;
    }
}