body {
            font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa; /* Light gray background */
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .banner-image {
            width: 100%;
            height: 300px; /* Adjust as needed, or make it responsive */
            object-fit: cover; /* Cover the area, might crop */
            object-position: center; /* Center the image */
        }

        .profile-pic {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid #fff; /* White border around profile pic */
            box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow */
            margin-top: -75px; /* Pulls the profile picture up onto the banner */
        }

        .content-wrapper {
            flex-grow: 1;
        }

        .hero-section {
            text-align: center;
            padding-top: 0; /* Adjusted due to profile pic margin */
            padding-bottom: 3rem;
        }

        .hero-section h1 {
            font-weight: 700;
            color: #4A00E0; /* Purple accent from a potential theme */
            font-size: 2.8rem;
        }

        .hero-section .tagline {
            font-size: 1.5rem;
            color: #555;
            margin-bottom: 2rem;
        }
        
        .coming-soon-text {
            font-size: 1.2rem;
            color: #6c757d; /* Bootstrap secondary text color */
        }

          .social-links a {
            font-size: 2rem; /* Larger icons */
            margin: 0 15px; /* Spacing between icons */
            color: #333; /* Default icon color */
            text-decoration: none; /* Add this line to remove the underline */
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .social-links a:hover {
            color: #8E2DE2; /* Purple accent on hover */
            /* text-decoration: none; */ /* You can also ensure no underline on hover if desired */
            transform: scale(1.1); /* Slight zoom effect */
        }
        
        /* Specific hover colors for brands */
        .social-links .fa-youtube:hover { color: #FF0000; }
        .social-links .fa-tiktok:hover { color: #000000; } /* TikTok often uses black/white or brand colors */
        .social-links .fa-instagram:hover { color: #C13584; } /* Instagram gradient primary color */


        .footer {
            background-color: #343a40; /* Dark background for footer */
            color: #f8f9fa; /* Light text for footer */
            padding: 1.5rem 0;
            text-align: center;
        }

        .footer p {
            margin-bottom: 0;
        }

        /* Ensure content below banner is visible */
        .main-content-below-banner {
            background-color: #ffffff; /* White background for the content area */
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0,0,0,0.05);
            padding-top: 2rem; /* Add padding to not be overlapped by negative margin of profile pic */
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .banner-image {
                height: 200px; /* Smaller banner on mobile */
            }
            .profile-pic {
                width: 120px;
                height: 120px;
                margin-top: -60px;
            }
            .hero-section h1 {
                font-size: 2.2rem;
            }
            .hero-section .tagline {
                font-size: 1.2rem;
            }
        }
        @media (max-width: 576px) {
            .banner-image {
                height: 150px; /* Even smaller banner */
            }
             .profile-pic {
                width: 100px;
                height: 100px;
                margin-top: -50px;
            }
            .hero-section h1 {
                font-size: 1.8rem;
            }
             .hero-section .tagline {
                font-size: 1rem;
            }
            .social-links a {
                font-size: 1.8rem;
                margin: 0 10px;
            }
        }