/* Footer General Styling (if you need to adjust existing) */
.site-footer {
    background-color: #333; /* Example: Keep dark footer background if you have one */
    color: #ccc;          /* Light text for dark background */
    padding: 20px 0;       /* Add some padding top/bottom to the whole footer */
    /* text-align: center; /* We might remove this if the children handle their own centering */
}

/* Social Media Box Section */
.social-media-box {
    background-color: #f8f9fa; /* A light grey background - very common and clean */
    /* Or choose another color, e.g., a very light version of a brand color */
    /* background-color: #e9ecef; */ /* Slightly darker grey */
    /* background-color: #ffffff; /* White background */
    
    padding: 25px 20px;        /* Padding inside the box */
    margin: 0 auto 30px auto;  /* Top 0, L/R auto for centering, Bottom 30px for space above copyright */
    max-width: 600px;          /* Max width of the box, adjust as needed */
                               /* This makes it behave like other centered content sections */
    border-radius: 8px;        /* Rounded corners for the box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for a bit of depth */
    text-align: center;        /* Center the title and the icon links block */
}

.social-media-title {
    margin-bottom: 20px;       /* Space below the title */
    font-size: 1.4em;          /* Adjust title size */
    color: #343a40;            /* Darker color for the title text, contrasts with light bg */
    font-weight: 700;          /* Bolder title */
}

.social-media-links {
    display: flex;             /* Use flexbox for easy centering and spacing of icons */
    justify-content: center;   /* Center icons horizontally */
    align-items: center;       /* Center icons vertically (if they had different heights) */
    gap: 25px;                 /* Space between each icon (modern way) */
    /* If 'gap' is not supported in very old browsers, use margin on 'a' tags instead: */
    /* & > a { margin: 0 12px; } */
}

.social-media-links a {
    color: #495057;            /* Icon color - a medium grey */
    font-size: 28px;           /* Adjust icon size */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

.social-media-links a:hover {
    /* color: #007bff; */      /* Example: A primary blue hover color */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

/* Specific hover colors for each icon (optional but nice) */
.social-media-links a:hover .fa-facebook-f { color: #1877F2; }
.social-media-links a:hover .fa-instagram { color: #E1306C; }
.social-media-links a:hover .fa-tiktok { color: #000000; } /* Or #FE2C55 (red), #25F4EE (cyan) */
.social-media-links a:hover .fa-snapchat-ghost { color: #FFFC00; }


/* Copyright Text Styling */
.copyright-text {
    text-align: center;        /* Ensure copyright text is centered */
    font-size: 0.9em;
    color: #fff;               /* Adjust color if your main footer bg changed */
    /* If your main footer is dark, you might want a lighter color: */
    /* color: #ccc; */
    margin-top: 0; /* Reset top margin if .social-media-box provides enough space */
}