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

header {
    background: rgb(29, 35, 96);
    color: #fff;
    text-align: left;
    padding: 20px;
    height: 77vh; /* Occupy 100% of the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Align the logo and text to the left */
}

#logo {
    max-height: 150px; /* Set a maximum height for the logo */
    width: auto; /* Allow the logo to resize proportionally */
    margin-left: 77px;
    margin-top: 5px; /* Add margin-top to create space */
    animation: fadeIn 2s ease 0s 1 normal forwards; /* Slower fade-in animation for the logo */
}

header h1 {
    font-size: 2.5rem; /* Increase the font size for the header title */
    margin-left: 100px; /* Move the header text 80px to the right */
    animation: fadeIn 2s ease 0.5s 1 normal forwards; /* Slower fade-in animation for the header text */
}

header p {
    font-size: 1.5rem; /* Increase the font size for the header paragraphs */
    margin-left: 100px; /* Move the header text 80px to the right */
    max-width: 1100px;
    text-align: justify;
    animation: fadeIn 2s ease 0.5s 1 normal forwards; /* Slower fade-in animation for the header text */
}

#footer {
    background: rgb(255, 255, 255);
    color: #000;
    text-align: left;
    padding: 1rem;
    height: 20vh; /* Occupy 50% of the viewport height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top:80px;
    height: 30px; /* Adjust the height as per your preference, e.g., 50px */
    /* Other CSS properties for styling the footer */
}

#contact {
    padding-left: 100px; /* Move the footer text 80px to the right */
    text-align: left;
    color: rgb(29, 35, 96); /* Replace #FF0000 with the desired color code or color name */
    /* Other CSS properties for styling the text */
    
}
.footer-bottom-right p {
    margin-top: -10px; /* Adjust this value to reduce the top margin */
    /* Other CSS properties for styling the text */
}

.footer-bottom-right {
    font-size: 0.8rem;
    text-align: right;
    padding-right: 50px;
    padding-top:20px;
    
}

.footer-bottom-right a {
    text-decoration: none;
}

.footer-bottom-right p {
    color: rgb(29, 35, 96); /* Replace #FF0000 with the desired color code or color name */
    /* Other CSS properties for styling the text */
}

/* Responsive styles for mobile devices */
@media (max-width: 600px) {
    header {
        height: auto; /* Auto height for smaller screens */
    }

    #logo {
        max-height: 60px;
        margin-bottom: 10px;
        margin-left: 20px; /* Adjust the logo margin for mobile */
    }

    header h1 {
        font-size: 2rem;
        margin-left: 20px; /* Adjust the header text margin for mobile */
    }

    header p {
        font-size: 1.2rem;
        margin-left: 20px; /* Adjust the header text margin for mobile */
        max-width: 90%; /* Limit the text width for mobile */
    }

    #footer {
        height: auto; /* Auto height for smaller screens */
    }

    #contact {
        padding-left: 20px; /* Adjust the footer text padding for mobile */
    }

    .footer-bottom-right {
        padding-right: 20px; /* Adjust the right padding for mobile */
        text-align: left; /* Align the footer text to the left for mobile */
    }
}