body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.banners {
    display: flex;
    flex-direction: column;
    background-color: #9f1c12;
}

.banner {
    display: flex;
    align-items: center; /* Align items vertically center */
    justify-content: space-between; /* Space between text and button */
    padding: 10px;
    background-color: #2c0303;
    margin: 10px;
    border: 1px solid #141414;
    border-radius: 5px;
}

.banner .text {
    flex: 1; /* Allows text to take available space */
    font-weight: bold;
    color: #ffffff;
    animation: textAppear 1s ease-out forwards;
    margin-right: 10px; /* Space between text and button */
}

.banner button {
    padding: 0.5em 1em;
    background-color: #ff7e21;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1em;
    border-radius: 8px;
    transition: background-color 1s;
    animation: buttonSlideIn 1s ease-out forwards;
}

.banner button:hover {
    background-color: #f74219;
}

/* Text appearance animation */
@keyframes textAppear {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button slide-in animation */
@keyframes buttonSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.main-content {
    display: flex;
    flex-wrap: wrap;
    padding: 1em;
}

.carousel {
    flex: 3;
    background-color: #f4f4f4;
    margin-right: 1em;
    padding: 1em;
    height: 700px; /* Larger height for carousel */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.sidebar {
    flex: 1;
    background-color: #9b0707;
    padding: 1em;
    color: #ffffff;
    box-sizing: border-box;
}

.download-section {
    text-align: center;
    padding: 1em;
}

/* Application main banner in the home page */
.banner-photo {
    background-color: #ffffff;
    margin-top: 1em;
    padding: 1em;
    border-radius: 8px; /* Rounded corners for better aesthetics */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    animation: bounceIn 1s ease-out; /* Bounce animation */
    overflow: hidden; /* Ensure content doesn't overflow */
}

.banner-photo img {
    max-width: 100%; /* Responsive image width */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Match the border radius of the container */
}

/* Animation keyframes for bouncing effect */
@keyframes bounceIn {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        transform: translateY(20px);
        opacity: 1;
    }
    75% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .banner-photo {
        padding: 0.5em;
    }
}

/* End of the styles - banner */

.image-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1em;
}

.image-buttons button {
    margin: 0.5em;
}

.marquee {
    background-color: #880808;
    text-align: center;
    color: white;
    font-size: 20px;
    border-radius: 20px;
}

.paragraph {
    padding: 1em;
    text-align: justify;
}

.messages {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1em;
}

.message {
    flex: 1 1 48%;
    background-color: #f9f9f9;
    margin: 0.5em;
    padding: 1em;
    text-align: center;
    box-sizing: border-box;
}

.message .profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin: 1em 0;
}

/* Footer section  */

footer {
    background-color: #211e1e;
    padding: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
    color: white;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    color: white;
}

.footer-content img {
    width: 150px; /* Adjust size as needed */
}

.footer-content p {
    margin: 10px 0;
    color: white;
}

.topic {
    font-size: larger;
}

.footer-content a {
    text-decoration: none;
}

.footer-credits {
    font-size: 14px;
    color: #ffffff;
}

.footer-credits p {
    margin: 5px 0;
}

.footer-credits a {
    color: #f76f6f;
    text-decoration: none;
}

.footer-credits a:hover {
    text-decoration: underline;
}
/* End of the Footer section */

@media (max-width: 768px) {
    .banners, .main-content, .messages {
        flex-direction: column;
    }

    .carousel, .sidebar, .message {
        margin-right: 0;
    }
}


/* Styles for Citizenship Charter - Starts */

/* Base button styles */
.download-button {
    border: none;
    background: transparent;
    cursor: pointer;
    outline: none;
    padding: 0;
    margin: 10px;
}

/* Link inside button */
.download-button a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ac2e04; /* Default background color */
    color: deeppink;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover effect */
.download-button a:hover {
    background-color: #016d0d; /* Light yellow on hover */
    transform: scale(1.05); /* Slightly larger on hover */
}

/* Pulse animation */
.download-button.pulse a {
    animation: pulse 1.5s infinite;
}

/* Keyframes for pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 105, 135, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 105, 135, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 105, 135, 0);
    }
}

/* Shake animation */
.download-button.shake a {
    animation: shake 0.6s ease-in-out;
}

/* Keyframes for shake animation */
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-5px);
    }
    50% {
        transform: translateX(5px);
    }
    75% {
        transform: translateX(-5px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Button color variations */
.button-sin a {
    color: #ffd8d8; /* Custom color for Sinhala button */
}

.button-tam a {
    color: #ffd8d8; /* Custom color for Tamil button */
}

.button-eng a {
    color: #ffd8d8; /* Custom color for English button */
}

/* Styles for Citizenship Charter - Ends */