/* Body styles */
body {
    font-family: Arial, sans-serif; /* Sets the default font to Arial or a sans-serif fallback */
    background-color: #002645; /* Dark blue background color for the entire page */
    color: white; /* Default text color set to white for contrast */
    text-align: center; /* Centers all text content by default */
    margin: 0; /* Removes default browser margin */
    padding: 0; /* Removes default browser padding */
}

/* Main container styles */
.container {
    max-width: 90%; /* Sets maximum width to 90% of viewport width for responsiveness */
    margin: 0 auto; /* Centers the container horizontally */
    padding: 20px; /* Adds internal spacing around content */
    position: relative; /* Allows positioning of child elements relative to this container */
}

/* Header styles */
header {
    margin-bottom: 20px; /* Adds space below the header */
}

/* Logo image styles */
.logo {
    width: 150px; /* Fixed width for the logo image */
}

/* Main heading styles */
h1 {
    font-size: 3em; /* Large font size for primary heading */
    margin-bottom: 10px; /* Space below the heading */
    color: #FFB347; /* Orange color for visual emphasis */
    font-weight: normal;    /* Make it non-bold */
}

/* Secondary heading styles */
h2 {
    font-size: 1.5em; /* Medium font size for subheadings */
    margin-top: 60px; /* Increased space above for separation */
    margin-bottom: 20px; /* Space below the heading */
    position: relative; /* Allows positioning of pseudo-element */
    text-align: center; /* Centers the subheading text */
}

/* Decorative line after h2 */
h2::after {
    content: ''; /* Empty content for pseudo-element */
    position: absolute; /* Positions relative to h2 */
    bottom: -10px; /* Places line 10px below the heading */
    left: 50%; /* Centers horizontally */
    transform: translateX(-50%); /* Offsets by half its width for perfect centering */
    width: 50px; /* Fixed width of the line */
    height: 2px; /* Thickness of the line */
    background-color: white; /* White color for the line */
}

/* Paragraph styles */
p {
    font-size: 1.2em; /* Slightly larger text for readability */
    margin-bottom: 30px; /* Space below paragraphs */
}

/* Container for buttons */
.button-container {
    position: relative; /* Allows positioning of pseudo-elements */
    display: inline-block; /* Keeps container size based on content */
    margin-bottom: 30px; /* Space below the button container */
}

/* Ripple effect background for button container */
.button-container::before {
    content: ''; /* Empty content for pseudo-element */
    position: absolute; /* Positions over the container */
    top: 50%; /* Centers vertically */
    left: 50%; /* Centers horizontally */
    transform: translate(-50%, -50%); /* Offsets for perfect centering */
    width: 600%; /* Oversized to create ripple effect coverage */
    height: 900%; /* Oversized height for effect */
    border-radius: 10%; /* Slightly rounded shape */
    background-image: repeating-radial-gradient(ellipse at center,
    rgba(173, 255, 47, 0) 0%, /* Transparent start */
    rgba(173, 255, 47, 0) 3%, /* Transparent up to 3% */
    rgba(173, 255, 47, 0.2) 3%, /* Slight green tint at 3% */
    rgba(173, 255, 47, 0.2) 4%); /* Fades out by 4% */
    z-index: 1; /* Places effect below the button */
    opacity: 0.06; /* Low opacity for subtle effect */
}

/* Call-to-action button styles */
#cta-button {
    background-color: #FF0000; /* Bright red background */
    color: white; /* White text for contrast */
    border: none; /* Removes default border */
    padding: 15px 30px; /* Vertical and horizontal padding */
    font-size: 1em; /* Standard font size */
    cursor: pointer; /* Hand cursor on hover */
    border-radius: 50px; /* Pill-shaped corners */
    position: relative; /* For pseudo-elements and z-index */
    overflow: hidden; /* Contains child elements */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0 0 40px 10px rgba(255, 0, 0, 0.5); /* Red glow effect */
    z-index: 2; /* Above the ripple effect */
}

/* Decorative circles before and after the button */
#cta-button::before, #cta-button::after {
    content: ''; /* Empty content for pseudo-elements */
    position: absolute; /* Positioned within button */
    width: 20px; /* Size of the circle */
    height: 20px; /* Size of the circle */
    background: #FF0000; /* Matches button color */
    border-radius: 50%; /* Circular shape */
    top: 50%; /* Centers vertically */
    transform: translateY(-50%); /* Offsets for vertical centering */
    z-index: -1; /* Behind button text */
}

#cta-button::before {
    left: -10px; /* Positions circle slightly outside left edge */
}

#cta-button::after {
    right: -10px; /* Positions circle slightly outside right edge */
}

/* Hover state for cta-button */
#cta-button:hover {
    background-color: #CC0000; /* Darker red on hover */
    box-shadow: 0 0 60px 15px rgba(255, 0, 0, 0.7); /* Enhanced glow on hover */
}

/* Features section layout */
.features {
    display: flex; /* Flexbox for horizontal layout */
    justify-content: center; /* Centers features horizontally */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    margin-top: 40px; /* Space above features */
}

/* Individual feature box styles */
.feature {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
    margin: 10px; /* Space between feature boxes */
    padding: 20px; /* Internal spacing */
    border-radius: 10px; /* Rounded corners */
    width: 40%; /* Takes up 40% of container width */
    min-width: 300px; /* Minimum width for responsiveness */
    display: flex; /* Flexbox for internal layout */
    align-items: center; /* Vertically centers content */
}

/* Feature icon styles */
.feature i {
    font-size: 2em; /* Larger icon size */
    margin-right: 15px; /* Space between icon and text */
}

/* Feature description text */
.feature p {
    text-align: left; /* Left-aligned text */
    margin: 0; /* Removes default margin */
}
/* Sign-in link container */
.sign-in-link {
    margin-top: 10px; /* Space above the sign-in link */
}

/* Sign-in link styles */
.sign-in-link a {
    color: white; /* White text color for non-underlined parts, matching body */
    text-decoration: none; /* Removes default underline */
    font-size: 1em; /* Matches button text size */
}

/* Underline only the 'Sign-In' text */
.sign-in-link a span {
    color: #FFB347; /* Orange color for underlined text, matching h1 and other accents */
    text-decoration: underline; /* Underlines the span content */
}


/* Input field styles for username and email */
#username-input, #email-input {
    font-size: 1.5em; /* Larger text for inputs */
    padding: 10px; /* Internal spacing */
    margin-bottom: 20px; /* Space below inputs */
    width: 100%; /* Full width of container */
    max-width: 300px; /* Caps width for larger screens */
    border-radius: 5px; /* Slightly rounded corners */
    border: 2px solid #FFB347; /* Orange border */
}

/* Submit button styles */
button[type="submit"] {
    font-size: 1.2em; /* Larger text for submit button */
    padding: 15px 30px; /* Increased padding for larger button */
}

/* Form paragraph styles */
form p {
    margin-bottom: 20px; /* Space below form questions */
    font-size: 1.2em; /* Larger text for form questions */
}

.faq-container {
    max-width: 800px; /* Restore original */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: left;
}

details {
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white, same as .feature */
    border: none;
    border-radius: 10px; /* Match .feature rounded corners */
    padding: 20px; /* Match .feature padding */
    margin: 10px 0; /* Keep spacing between FAQ items */
    text-align: left; /* Keep text alignment */
}

summary {
    cursor: pointer;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 1.2em; /* Keep larger font size */
    color: #ffc64b;
}

details p {
    margin: 20px 0 0; /* Keep space between summary and answer */
    color: #FFFFFF; /* White text for contrast, matching body */
    padding: 0;
    text-align: left;
}



/* Laurels */
/* Base quote styling */
/* Base quote styling */
.cannes-quote {
    font-size: 1.5rem;
    color: #FFB347;
    font-family: 'Georgia', serif;
    text-align: center;
    padding: 2rem;
    margin: 0 2rem;
}

/* Quote content */
.cannes-quote blockquote {
    margin: 0;
}

.cannes-quote cite {
    display: block;
    font-size: 1rem;
    color: #666;
    text-align: center;
    margin-top: 0.5rem;
    margin-left: 20px; /* Offset from left */
}

.cannes-quote cite::before {
    content: '— ';
}




/* Responsive adjustments */
@media (max-width: 600px) {
    .cannes-quote {
        padding: 1rem;
        margin: 0 1.5rem;
    }
}


/* Footer styles */
footer {
    background-color: #002645; /* Matches body background for consistency */
    color: white; /* White text for contrast, matching body */
    text-align: center; /* Centers text, consistent with body */
    padding: 20px; /* Internal spacing, matching original inline style */
    font-family: Arial, sans-serif; /* Matches body font */
    font-size: 14px; /* Matches original inline style */
}

.footer-content {
    margin: 0 auto; /* Centers content */
}

.footer-content p {
    margin: 5px 0; /* Reduced margin for tighter spacing between paragraphs */
}

.footer-links a {
    color: #FFB347; /* Orange color to match h1 and other accents */
    text-decoration: none; /* Removes underline, matching original */
    margin: 0 10px; /* Matches original inline style spacing */
}

.footer-links a:hover {
    text-decoration: underline; /* Adds underline on hover for better UX */
}


.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    background-color: #dfe6eb; /* light grey whitish blue */
    /*background-color: whitesmoke; !* light grey whitish blue *!*/
    border-radius: 15px;
    padding: 20px;
    margin: 50px auto;
}

.image-container img {
    max-width: 100%;
    max-height: 100%;
    /*border-radius: 10px; !* Optional: round the image corners too *!*/
}
.image-container-clean {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw; /* 80% of viewport width for smaller screens */
    max-width: 800px; /* Matches .faq-container max-width */
    height: auto; /* Maintain aspect ratio */
    background-color: transparent; /* No background */
    border: none; /* No border */
    padding: 0; /* No padding */
    margin: 0 auto; /* Center horizontally */
}

.image-container-clean img {
    width: 100%; /* Full width of container */
    height: auto; /* Maintain aspect ratio */
    border: none; /* No border */
    border-radius: 0; /* No rounded corners */
}

.micro-disclaimer.primary {
  margin-top: 0.75rem;
  opacity: 0.9;
}

.micro-disclaimer.secondary {
  margin-top: 0.25rem;
  font-size: 0.8em;
  opacity: 0.7;
}