footer {
    width: 100%;
    height: 65vh;
    background-color: rgb(22, 8, 8);
    color: white;
    display: flex;
    justify-content: center;
    padding: 30px;
}

footer .content {
    width: 80%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
}

footer .content .subscribe {
    padding-bottom: 20px;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

footer .content .subscribe::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 100%;
    left: 0;
    background-color: grey;
}


footer .content .subscribe .title h2 {
    font-size: 1.8em;
    font-weight: bold;
}

footer .content .subscribe .title h3 {
    margin-top: 10px;
    font-size: 1.2em;

}

footer .content .subscribe .bar {
    width: 50%;
}

footer .content .subscribe .bar input {
    outline: none;
    border: none;
    width: 60%;
    height: 50px;
    font-size: 1.5em;
    padding: 20px;

}

footer .content .subscribe .bar button {
    outline: none;
    border: none;
    width: 30%;
    height: 50px;
    font-size: 1.5em;
    color: white;
    background-color: red;
    cursor: pointer;
    transition: 0.2s all;
    margin-left: 10px;
}

footer .content .subscribe .bar button:hover {
    transform: scale(1.1);
}

footer .content .subscribe .social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

footer .content .subscribe .social a i:hover {
    transform: scale(1.3);
    color: white;
}

footer .content .subscribe .social a i {
    color: grey;
    font-size: 1.8em;
    transition: 0.2s all;

}

footer .content .links {
    position: relative;
    padding: 85px 0px 50px 0px;
    display: flex;
    justify-content: space-between;
}

footer .content .links::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    top: 100%;
    left: 0;
    background-color: grey;
}

footer .content .links .logo div i {
    font-size: 1.2em;
    color: rgb(32, 13, 13);
}

footer .content .links .logo div .circle-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    margin-right: 10px;
    padding: 27.5px;
}

footer .content .links .url {
    width: 80%;
    display: flex;
    justify-content: space-between;
}

footer .content .links .url div {
    display: flex;
    flex-direction: column;
}

footer .content .links .url div h2 {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1.8em;
}

footer .content .links .url div a {
    width: fit-content;
    color: grey;
    text-decoration: none;
    transition: 0.2s all;
    margin-bottom: 15px;
}

footer .content .links .url div a:hover {
    text-decoration: underline;
    transform: scale(1.1);
}

footer .content .copy {
    padding: 20px;
    display: flex;
    justify-content: center;
    color: grey;
    font-size: 1.2em;
}

footer .content .copy .colorlib {
    color: red;
    transition: 0.2s all;
    cursor: pointer;

}

footer .content .copy .colorlib:hover {
    text-decoration: underline;
    letter-spacing: 2px;

}

footer .content .copy .heart i {
    margin: 0px 10px;
    font-size: 1.3em;
    animation-name: beat;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

@keyframes beat {
    0% {
        color: grey;
        transform: scale(1);
    }

    25% {
        color: red;
        transform: scale(1.3);
    }

    50% {
        color: grey;
        transform: scale(1);
    }

    75% {
        color: red;
        transform: scale(1.3);
    }

    100% {
        color: grey;
        transform: scale(1);
    }
}