@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* Move the element down initially */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Move the element back to its original position */
    }
}

@keyframes fadeInCenter {
    from {
       
        width: 0;
    }
    to {
        
        width: 80%;
    }
}

body {
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    background-color: #121212;
}

.mainDiv{
    background-color: #121212;
}

.hide {
    display: none;
}

nav {
    height: 100px;
    width: 100%;
}

.aboutDiv {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 100px;
    opacity: 0; /* Start with opacity set to 0 for the fade-in effect */
    animation: fadeIn 0.5s ease-in-out forwards; /* Use the fadeIn keyframes for the animation */
}

.logoDiv {
    max-width: 400px;
    margin: 0 auto;
    margin-top: 40px;
}

.logoDiv img {
    max-width: 100%;
    height: auto;
}

.aboutDiv p {
    color: #CCCCCC;
    line-height: 1.7;
    text-align: center;
    margin: 0;
    font-size: 18px;
}

.line-break {
    background-color: #4f4f4f;
    height: 2px;
    width: 100%;
    margin: 0 auto;
    animation: fadeInCenter 0.5s ease-in-out forwards;
    margin-bottom: 20px;
}

.mainDiv{ 
    min-height: 100vh;
}