/* Container adjustments */
.container-fluid {
    padding: 3rem;
}

/* Row and column styling */
.row {
    display: flex;
    align-items: center;
}

.col-lg-6 {
    padding: 1.5rem;
}

/* Image styling */
.img-fluid {
    border-radius: 8px;
    transition: transform 0.5s ease;
}

.img-fluid:hover {
    transform: scale(1.05);
}

/* Text styling */
.h4 {
    color: #003265; 
}

.display-5 {
    font-size: 25px;
    color: #2a629a;
}

p {
    font-size: 20px;
    color: #003265;
    line-height: 1.5;
}

/* Animation styling */
.RotateMoveLeft {
    animation: rotateLeft 5s ease forwards, shake 6s ease 5s infinite;
}

/* Keyframes for the rotation */
@keyframes rotateLeft {
    from {
        transform: rotate(90deg);
        opacity: 0;
    }
    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* Keyframes for the shake effect */
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-10px);
    }
    50% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-10px);
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .col-lg-6 {
        flex: 100%;
        max-width: 100%;
    }
    .display-5 {
        font-size: 2rem;
    }
}
/* --------- */
/* Apply a fade-in from the bottom animation */
@keyframes fadeInBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Set initial opacity to 0 for all elements */
.col-lg-6 .wow.fadeInUp {
    opacity: 0;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

/* For h4: delay 1s */
.col-lg-6 h4 {
    animation-name: fadeInRight;
    animation-delay: 1s;
}

/* For p: delay 2s */
.col-lg-6 p {
    animation-name: fadeInRight;
    animation-delay: 2s;
}

/* For h1: delay 3s with fadeInBottom animation */
.col-lg-6 h5 {
    animation-name: fadeInBottom;
    animation-delay: 3s;
}

html {
    scroll-behavior: smooth;
}



