/* ---------------------------------------------------------------------------------- Footer */
.footer-placeholder {
    grid-area: footer;
}

footer {
    width: 100%;
    background-color: rgb(30, 30, 30);
}

.fContent {
    width: 100%;
    display: grid;
    grid-template-areas:
        "social"
        "content"
        "fCIso";
}

.fSocial {
    grid-area: social;
    height: 70px;
    background-color: var(--wb-80);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.socialLink {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    height: 30px;
    width: 30px;
}

@property --fill {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}

.socialIcon {
    position: absolute;
    z-index: 1;
    fill: var(--wb-60);
    background-color: var(--wb-80);
    border-radius: 50%;
    height: 30px;
    width: 30px;
    transition: fill 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.socialIcon > svg {
    height: 20px;
    width: 20px;
}

.socialIcon:hover {
    fill: var(--accent);
    --fill: 100%;
}

.socialLink::after {
    position: absolute;
    content: '';
    inset: -2px;
    z-index: 0;
    border-radius: inherit;
    background: conic-gradient(
            var(--accent) var(--fill),
            transparent var(--fill)
    );
    transition: --fill 0.6s ease-in-out;
}

.socialLink:hover {
    fill: var(--accent);
    --fill: 100%;
}

.ftContent {
    justify-self: center;
    width: 90%;
    max-width: 1300px;
    height: 300px;
    display: grid;
    grid-template-areas:
        "fCAbout"
        "fCSeparator"
        "fCRights";
    grid-template-rows: 200px 2px 98px;
align-content: center;
}

.fCAbout {
    grid-area: fCAbout;
    align-self: center;
    height: 100px;
    display: flex;
    justify-content: space-between;
}

.fCAbout .left {
    height: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fCAbout .left .title {
    color: var(--wb-10);
    font-family: 'Avenir', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
}

.fCAbout .left .text {
    color: var(--wb-50);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    font-kerning: normal;
    letter-spacing: 0.02em;
}

.fCAbout .left .text > p {
    margin: 5px;
    padding: 0;
}

.fCLinks {
    justify-self: end;
    display: flex;
    gap: 50px;
    height: 15px;
}

.fCLinks > a {
    color: var(--wb-50);
    font-family: 'Avenir', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.5s ease-in-out;
}

.fCLinks > a:hover {
    color: var(--accent);
}

.fCSeparator {
    grid-area: fCSeparator;
    height: 2px;
    width: 100%;
    background-color: var(--wb-70);
}

.fCRights {
    align-self: center;
    justify-self: end;
    grid-area: fCRights;
    color: var(--wb-50);
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 0.7rem;
    font-kerning: normal;
    letter-spacing: 0.02em;
}

.fCIso {
    grid-area: fCIso;
    align-self: center;
    height: 90px;
    background: var(--accent);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fCIcon {
    background-image: url("../../assets/images/isoDark.png");
    background-size: cover;
    height: 60px;
    width: 50px;
    background-repeat: no-repeat;
}