/* Global reset and styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif; /* Simple, modern font */
    position: relative;
    overflow-x: hidden;
    color: white; /* Default text color */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('background.jpg'); /* Path to your background image */
    background-size: cover;
    background-position: center;
    filter: blur(10px);
    z-index: -2; /* Send it behind the content */
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Dark overlay for better contrast */
    z-index: -1;
}

/* Container Styles */
.container {
    max-width: 800px;
    margin: 50px auto;
    padding: 40px;
    background-color: rgba(10, 10, 10, 0.9); /* Semi-transparent background */
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    z-index: 1; /* Above the background and overlay */
}

/* Language Selector Styles */
.language-selector {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.language-selector select {
    padding: 5px;
    background-color: #1976d2; /* Button color */
    color: white; /* Text color */
    border: none;
    border-radius: 4px;
    font-family: 'Roboto', sans-serif; /* Modern font for dropdown */
}

/* Profile Section Styles */
.profile img {
    width: 150px; /* Image size */
    height: 150px; /* Image size */
    border-radius: 50%; /* Circular image */
    margin-bottom: 20px;
    border: 4px solid #1976d2; /* Border color */
}

.profile h1 {
    font-family: 'BrittanySignature', cursive; /* Applied the Brittany Signature font */
    font-size: 3rem; /* Main heading size */
    color: #FFFFFF; /* Heading color */
}

.profile p {
    font-size: 1.2em; /* Bio text size */
    color: #f0f0f0; /* Light color for readability */
}

/* Button Group for Contact Icons */
.button-group {
    display: flex;
    justify-content: center; /* Align buttons in the center horizontally */
    gap: 20px; /* Space between buttons */
}

.button {
    display: inline-block;
    width: 60px; /* Button width */
    height: 60px; /* Button height */
    background-color: #1565c0; /* Button background color */
    color: white; /* Button text color */
    border-radius: 50%; /* Circular buttons */
    text-align: center;
    line-height: 60px; /* Center the icon vertically */
    font-size: 24px; /* Icon size */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Button Hover Effects */
.button:hover {
    background-color: #0d47a1; /* Darker shade on hover */
    transform: translateY(-4px); /* Slight lift on hover */
}

/* Tooltip for hover messages */
.button::after {