body {
    background-color: #0a0a0a; /* Dark background for a professional look */
    color: #f4f4f4; /* Light text color */
    font-family: 'Playfair Display', serif; /* Font family */
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    
}

a {
    color: white; /* Default link color */
}

/* Background image with blur effect */
body::before {
    content: "";
    position: fixed; /* Fixed positioning to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/landscape-transformed.jpg'); /* Change to your image path */
    background-size: cover; /* Stretch the image to cover the entire background */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    filter: blur(10px); /* Apply blur effect */
    z-index: -1; /* Place behind other content */
    transition: filter 1000s ease-in-out; /* Smooth transition for the blur effect */
}



/* Optionally, on hover, reduce the blur */
body:hover::before {
    filter: blur(2px); /* Reduce blur on hover */
}

/* Glow effect class */
.glowEffect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%; /* Start size */
    height: 100%; /* Start size */
    background: rgba(255, 255, 255, 0.2); /* Base background */
    border-radius: 50%; /* Circular shape */
    opacity: 0; /* Make it invisible initially */
    z-index: -1; /* Keep it behind other content */
    pointer-events: none; /* So it doesn’t interfere with button clicks */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
}

@keyframes glow {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(3); /* Expand beyond the screen */
    }
}

/* Header styles */
header {
    background-color: rgb(63, 96, 113, 0.3); /* Slightly transparent header */
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}



header h1 {
    margin: 0;
    font-size: 2.5em;
    font-weight: normal;
}

/* Main content styles */
main {
    padding: 20px; /* Add padding here if needed */
    text-align: center; /* Center align main content */
    overflow: hidden; 
}

.glow {
    color: white; /* Text color */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1), /* Intense white glow */
        0 0 20px rgba(255, 255, 255, 0.8), 
        0 0 30px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(0, 0, 0, 0.3);
}

a:hover {
    color: white; /* Text color */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 1), /* Intense white glow */
        0 0 20px rgba(255, 255, 255, 0.8), 
        0 0 30px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(0, 0, 0, 0.3);
        text-decoration: none; 
}

/* Flex container for grouped items */
#selltopeoplegroup {
    display: flex; /* Make it a flex container */
    flex-direction: row; /* Set the direction to row */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    margin: 20px; /* Adjust margin as needed */
    padding: 20px; /* Optional padding */
    background-color: rgb(63, 96, 113, 0.6); /* Consistent background color */
    border-radius: 10px; /* Optional rounded corners */
}


/* Button styles */
.button {
    background-color: rgba(132,165,180, 0.8); /* Button background color */
    border: none; /* No border */
    color: white; /* Text color */
    padding: 15px 30px; /* Top-bottom, left-right padding */
    text-align: center; /* Center align text */
    text-decoration: none; /* Remove underline from text */
    display: inline-block; /* Allows width and height */
    font-size: 1.5em; /* Button text size */
    margin: 20px auto; /* Margin to adjust space around button */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition */
    box-shadow: 0 0 5px rgba(132,165,180, 0.8), /* Inner glow */
                0 0 10px rgba(132,165,180, 0.6), /* Medium glow */
                0 0 15px rgba(132,165,180, 0.4), /* Outer glow */
                0 0 20px rgba(132,165,180, 0.2); /* Extreme outer glow */
}

.button:hover {
    color: black;
    background-color: rgba(255, 255, 255, 1); /* White button on hover */
    box-shadow: 0 0 10px rgba(255, 255, 255, 1), /* Increased inner glow */
                0 0 20px rgba(255, 255, 255, 0.8), /* Increased medium glow */
                0 0 30px rgba(255, 255, 255, 0.6), /* Increased outer glow */
                0 0 40px rgba(255, 255, 255, 0.3); /* Increased extreme outer glow */
    
}

.fake_img {
    width: 600px;
    height: 320px;
    background-color: white;
    margin: 26px;
    box-shadow: 
        0 0 10px rgba(255, 255, 255, 1), /* Intense white glow */
        0 0 20px rgba(255, 255, 255, 0.8), 
        0 0 30px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(0, 0, 0, 0.4),
        0 0 50px rgba(0, 0, 0, 0.3);    
}