@font-face {
    font-family: myFirstFont;
    src: url(../Hacen\ Freehand.ttf);
}

body,
html {
    font-family: myFirstFont;
    height: 100vh !important;
    margin: 0;
    /* font-family: Arial, Helvetica, sans-serif; */
}


* {
    margin: 0;
}

a {
    text-decoration: none;
}

.bg-image {
    /* The image used */
    background-image: url("../imgs/download.svg");

    /* Add the blur effect */
    filter: blur(8px);
    -webkit-filter: blur(17px);

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-img {
    /* background-color: #3766b8; */
    /* -webkit-mask: url('../imgs/image.jpg');
    mask: url('../imgs/image.jpg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-size: 100%;
    */
    background-image: url('../imgs/image.png');
    height: 400px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: black;
}


.bg-text {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    /* width: 80%; */
    /* padding: 20px; */
    display: flex;
    justify-content: center;
}

@media (max-width: 600px) {
    .bg-text {
        width: 100%;
    }
}

.box--- {
    background-color: white;
    width: 600px;
    box-shadow: 0px 4px 7.36px 0.64px rgba(0, 0, 0, 0.24), 0px 1px 7.68px 0.32px rgba(0, 0, 0, 0.16);
    margin-bottom: 50px;
}

.text-wrapper {
    background: black;
    color: white;
}

.social-wrapper {
    border-bottom: 1px solid #919090;
}

.icon-bg {
    height: 40px;
    width: 40px;
    margin-right: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.bg-google {
    border: 1px solid rgb(119, 119, 119);
}

.social-wrapper .title-two {
    color: rgb(114, 114, 114);
}

.social-wrapper .title-one {
    color: black;
}