.social-media-section {
    background-color: #ebe8e1; /* Updated to a lighter gray */
    color: #605e5c; /* Updated to a softer charcoal gray */
    padding: 40px 0;
    text-align: center;
}

.social-media-section .container {
    max-width: 1200px;
    margin: auto;
    padding: 30px;
}

.social-media-section h3 {
    color: #6e675f; /* Updated to a warm gray */
    font-size: 2.5rem;
    margin-bottom: 5rem;
}

.social-icons {
    font-size: 4em; /* Size of the icons */
    margin-top: 5px;
    margin-bottom: 60px; /* Increased spacing below the icons */
}

.social-icons a {
    display: inline-block;
    margin: 0 60px;
    color: #605e5c; /* Updated to a softer charcoal gray */
    transition: color 0.3s ease;
}

.social-icons a:hover,
.social-icons a:focus {
    color: #504a43; /* Updated to a darker gray for hover/focus state */
}

/* Icon Styling (if not using a font library) */
.fab {
    /* Example style if not using FontAwesome, replace with actual content if needed */
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Separator Line */
.separator-line {
    border: 0;
    height: 1px;
    background: #605e5c; /* Color matching the theme */
    margin: 0 auto; /* Center the line */
    margin-top: 80px; /* Increased spacing above the line */
    max-width: 100%; /* Increased width of the line */
}

/* Responsive adjustments as needed */
@media (max-width: 768px) {
    .social-icons {
        font-size: 2.5em; /* Smaller icons for mobile */
    }
}