/******************************************
Social Media Icons
******************************************/
.social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 4px;
    text-decoration: none;
    position: relative;
    transition: opacity 0.15s ease;
}

/*** Rollover Link ***/
.social-icon:hover {
    opacity: 0.75;
}

/*** If Not A Link ***/
span.social-icon:hover {
    opacity: 1;
}

.social-icon.facebook {
    background: #1877f2;
}

.social-icon.facebook::before {
    content: "f";
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bold;
    color: white;
}

.social-icon.x {
    background: #000;
}

.social-icon.x::before,
.social-icon.x::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 4px;
    background: white;
    top: 50%;
    left: 50%;
}

.social-icon.x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.social-icon.x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.social-icon.linkedin {
    background: #0a66c2;
}

.social-icon.linkedin::before {
    content: "in";
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: white;
}

.social-icon.youtube {
    background: #ff0000;
}

.social-icon.youtube::before {
    content: "";
    position: absolute;
    width: 23px;
    height: 16px;
    background: white;
    border-radius: 3px;
}

.social-icon.youtube::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 12px;
    border-color: transparent transparent transparent #ff0000;
    left: 52%;
    transform: translateX(-50%);
}