﻿.social-section {
    display: flex;
    align-items: center;
    gap: 35px;
}
    .social-section .follow-text {
        color: #fff;
        font-size: 1.1875rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.1875rem;
    }
@media (max-width: 1550px) {
    .social-section .follow-text {
        font-weight: 400;
    }
}
.social-section .social-icons {
    display: flex;
    gap: 1rem;
}

    .social-section .social-icons a {
        color: #fff;
        font-size: 18px;
        transition: color .3s ease;
        border: none !important;
    }


    .social-section .social-icons .social-icon {
        width: 2rem;
        height: 2rem;
        border-radius: .25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #8892a0;
        text-decoration: none;
        transition: all .3s ease;
    }
@media (max-width: 1250px) {
    .social-section .social-icon {
        width: 25px;
        height: 25px;
    }
}

.social-section .social-icons svg {
    width: 24px;
    height: 24px;
}

.social-icon svg, .social-icon svg path, .social-icon svg circle, .social-icon svg rect {
    transition: fill .3s ease, stroke .3s ease, opacity .3s ease;
}

@media (max-width: 1550px) {
    .social-section .social-icons svg {
        width: 21px;
        height: 21px;
    }
}
@media (max-width: 1250px) {
    .social-icon svg {
        width: 20px;
        height: 20px;
    }
}
.social-icon:nth-child(1) svg, .social-icon:nth-child(3) svg, .social-icon:nth-child(4) svg {
    fill: #fff;
}

#yt-fill {
    fill: #fff !important;
    transition: all .3s ease;
}
.social-icon:hover #yt-fill {
    fill: #011825 !important;
}

#yt-stroke {
    stroke: #fff !important;
    transition: all .3s ease;
}
.social-icon:hover #yt-stroke {
    stroke: #011825 !important;
}

.social-icon:nth-child(1):hover svg, .social-icon:nth-child(3):hover svg, .social-icon:nth-child(4):hover svg {
    fill: #011825;
}

.social-section .social-icons a:hover {
    color: #cbd5e1;
}

.social-section .social-icon:hover {
    background-color: #fff;
}