@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

.vision-container {
    width: 70%;
    margin-left: 15%;
    margin-top: 5%;
}

.vision, .mission {
    display: flex;
}

.mission {
    margin-top: 2%;
}

.vision-text, .mission-text {
    width: 90%;
    color: #E0EAFC;
    font-family: 'Lato', sans-serif;
}

.vision-image {
    width: 50%;
    margin-left: 20%;
}

.mission-image {
    width: 60%;
}

.vision-p {
    font-size: 1.2rem;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

.vision-image img,
.mission-image img {
    animation: bounce 7s infinite; 
}

.mission-image img {
    animation-delay: 0.5s;
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
    .vision-container {
        width: 90%;
        margin-left: 5%;
    }
    .vision, .mission {
        flex-direction: column;
        align-items: center;
    }
    .vision-text, .mission-text {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }
    .vision-image, .mission-image {
        width: 80%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .vision-p {
        font-size: 1rem;
    }
    .vision-title {
        font-size: 2rem;
    }
    .vision-image, .mission-image {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .vision-container {
        width: 100%;
        margin-left: 0;
        margin-top: 5%;
        padding: 0 10px;
    }
    .vision-p {
        font-size: 0.9rem;
    }
    .vision-title {
        font-size: 1.8rem;
    }
    .vision-image, .mission-image {
       width: 50%;
    }

    .vision-image{
      margin-left: 40%;
      margin-top: -5%;
    }

    .mission-image{
      margin-right: 40%;
      margin-bottom: -10%;
    }
}