/* Custom styles inspired by the provided image */
        :root {
            --bg-color: #f1f1f1; /* White background */
            --card-bg-color: rgb(193, 124, 0); /* Golden-orange for buttons */
            --text-color-light: #313131; /* Dark text for readability */
            --text-color-dark: #f1f1f1; /* Light text for buttons */
            --particle-color: rgba(193, 124, 0, 0.15); /* Soft particle color */
        }
        
        body {
            font-family: 'Quicksand', sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color-light);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            overflow: hidden; /* Prevent scrolling */
        }

        /* --- Vanta.js Background --- */
        #vanta-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }

        /* Main container styling */
        .main-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 3rem; /* Add padding to the top */
            z-index: 1; /* Keep content above the background */
            position: relative;
        }

        /* Entry Animation */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .fade-in-on-load {
            animation: fadeIn 1s ease-out forwards;
        }
        
        /* Custom Button Style */
        .link-button {
            background-color: var(--card-bg-color);
            color: var(--text-color-dark);
            border-radius: 9999px; /* Pill shape */
            font-weight: 600;
            transition: background-color 0.3s, color 0.3s;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid var(--card-bg-color);
        }
        
        .link-button:hover {
            background-color: #f1f1f1fc; /* Inverse color */
            color: var(--card-bg-color); /* Inverse color */
        }

        /* Arrow animation on button hover */
        .link-button svg {
            transition: transform 0.3s ease-out;
        }
        .link-button:hover svg {
            transform: translate(2px, -2px);
        }

        /* Social Icon Styling */
        .social-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid var(--card-bg-color);
            color: var(--card-bg-color);
            transition: background-color 0.3s, color 0.3s;
        }
        
        .social-icon:hover {
            background-color: var(--card-bg-color);
            color: var(--text-color-dark);
        }
        
        /* Profile Picture Styling */
        .profile-pic-img {
            transition: transform 0.3s ease-in-out;
        }

        .profile-pic-img:hover {
            transform: scale(1.05);
        }
        
        /* Footer image container */
        .footer-image-container {
            width: 100%;
            max-width: 448px; /* Corresponds to max-w-md */
            margin-top: auto; /* Pushes the image to the bottom */
            padding-top: 2rem;
            position: relative;
            z-index: 1;
        }
        .footer-image {
            width: 100%;
            object-fit: cover;
            border-bottom-left-radius: 1.5rem; /* Rounded corners to match the card */
            border-bottom-right-radius: 1.5rem;
        }