/* Styles for <h1> */
.display-3 {
    font-size: 3rem !important;
    font-weight: bold;
    line-height: 1.2 !important;
    color: #000; /* High contrast for readability */
}

/* Styles for <p> */
.lead {
    font-size: 1rem;
    line-height: 1.4 !important;
    color: #fff !important; /* Elegant white color */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); /* Subtle shadow for depth */
    opacity: 0.95; /* Slight transparency for a softer appearance */
}

/* Jika ingin bulan gunakan ini pada gambar header */
.img-cover {
    object-fit: cover;
    width: 75%;
    height: auto;
    border-radius: 50%; /* Keeps the circular appearance */
}

.img-ellipse {
    width: 550px; /* Adjust width */
    height: 350px; /* Adjust height for vertical ellipse */
    object-fit: cover; /* Ensures the image scales properly within the shape */
    border-radius: 90% / 90%; /* Creates an elliptical shape */
}

/* Luxurious Green-Yellow Button */
.btn-green-yellow {
    background: linear-gradient(90deg, #145b2c, #d3ac2c); /* Green to yellow gradient */
    color: #ffffff; /* White text for contrast */
    border: 2px solid #145b2c; /* Green border for definition */
    border-radius: 50px; /* Smooth rounded corners */
    padding: 0.75rem 2rem; /* Spacious padding */
    font-size: 1.2rem; /* Prominent font size */
    font-weight: bold; /* Emphasize the text */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow for readability */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Depth with shadow */
    transition: all 0.3s ease; /* Smooth hover effect */
}

.btn-green-yellow:hover {
    background: linear-gradient(90deg, #d3ac2c, #145b2c); /* Reverse gradient on hover */
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Slightly deeper shadow */
    border-color: #d3ac2c; /* Yellow border on hover */
}

/* Secondary Button (Inverse Styling) */
.btn-yellow-green {
    background: linear-gradient(90deg, #d3ac2c, #145b2c); /* Yellow to green gradient */
    color: #ffffff; /* White text */
    border: 2px solid #d3ac2c; /* Yellow border */
    border-radius: 50px;
    padding: 0.75rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-yellow-green:hover {
    background: linear-gradient(90deg, #145b2c, #d3ac2c); /* Reverse gradient */
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
    border-color: #145b2c; /* Green border on hover */
}

/* Fade-in Animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-summary {
    animation: fadeInUp 1s ease-in-out;
}

.submitted-count, .total-count {
    font-weight: bold;
    color: #0d6efd;
    animation: fadeInUp 1.5s ease-in-out;
}