:root {
    --primary-h: 229;
    --primary-s: 17%;
    --primary-l: 18%;
    --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --secondary-color: hsl(34, 57%, 68%);
}

* {
    font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'PT Sans', sans-serif;
}

body {
    background: transparent url(https://separateweb.com/images/noise.png) repeat 0 0;
    opacity: .9;
    visibility: visible;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-secondary {
    background-color: hsla(34, 57%, 68%, 0.12) !important;
}

.section-hero {
    color: var(--primary-color);
    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.navbar a {
    color: #fff;
}

    .navbar a:hover {
        color: rgba(255, 255, 255, 0.7);
    }

.service-image {
    width: 7rem;
    height: 7rem;
    margin-right: auto;
    margin-bottom: 1.75rem;
    margin-left: auto;
    border-radius: 50%;
    background-image: linear-gradient(to top, #e6b980 0%, #eacda3 100%);
}

    .service-image .fa-solid, .service-image .fa-regular {
        color: #fff;
        font-size: 3rem;
        line-height: 7rem;
    }

.text-secondary {
    color: var(--secondary-color) !important;
    text-decoration: none;
}

.social-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    width: 25px;
    height: 25px;
    text-decoration: none;
    border-radius: 100%;
    background: #fff;
    text-align: center;
}

    .social-button i {
        position: relative;
        z-index: 1;
        transition: 0.3s;
    }

    .social-button::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 50%;
        display: block;
        width: 0;
        height: 0;
        border-radius: 100%;
        transition: 0.3s;
    }

    .social-button:focus, .social-button:hover {
        color: #fff;
    }

        .social-button:focus::after, .social-button:hover::after {
            width: calc(100% + 2px);
            height: calc(100% + 2px);
            margin-left: calc(-50% - 1px);
        }

.social-button--facebook {
    color: #3b5999;
}

    .social-button--facebook::after {
        background: #3b5999;
    }

.social-button--linkedin {
    color: #0077b5;
}

    .social-button--linkedin::after {
        background: #0077b5;
    }

.social-button--twitter {
    color: #55acee;
}

    .social-button--twitter::after {
        background: #55acee;
    }

.social-button--instagram {
    color: #e4405f;
}

    .social-button--instagram::after {
        background: #e4405f;
    }

.social-button--npmjs {
    color: #c12127;
}

    .social-button--npmjs::after {
        background: #c12127;
    }

.btn-whatsapp {
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 99999;
    width: 50px;
    background: #00a51c;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

footer {
    background-color: #000 !important;
}

    footer a {
        color: gray;
        text-decoration: none;
        transition: all .5s ease-in-out;
    }

    footer .socials a {
        font-size: 2rem;
    }

    footer a:hover {
        color: #fff;
    }