/************************** 1. HOME PAGE CSS***********************************/


/*---------------------Animation effect start-----------------------------*/

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s ease-out, transform 2s ease-out; /* Slower */
}

    .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
    }

.section-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 2s ease-out, transform 2s ease-out; /* Slower */
}

    .section-left.show {
        opacity: 1;
        transform: translateX(0);
    }

.section-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 2s ease-out, transform 2s ease-out; /* Slower */
}

    .section-right.show {
        opacity: 1;
        transform: translateX(0);
    }

.section {
    opacity: 0;
    transform: translateX(-50px); /* Starts from the left */
    transition: opacity 2s ease-out, transform 2s ease-out; /* Slower */
}

    .section.show {
        opacity: 1;
        transform: translateX(0); /* Moves to its original position */
    }


/*---------------------Animation effect end--------------------------*/



/*--------------------Banner animation zoom-in and zoom-out effect css start--------------------------*/

.zoom-animation {
    animation: zoomEffect 10s ease-in-out infinite;
    overflow: hidden;
}

@keyframes zoomEffect {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    20% {
        transform: scale(1.1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    80% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 1;
    }
}

.slideshow-container {
    position: relative;
}

.dot-desktop, .dot-mobile {
    position: relative;
    bottom: 15px;
    z-index: 10;
}

/*--------------------Banner animation zoom-in and zoom-out effect css end--------------------------*/



/*--------------------Completed Projects section effect start--------------------------*/


/* Animation for Fade In Effects */
.fadeInLeft {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out; /* Slower duration */
}

.fadeInRight {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out; /* Slower duration */
}

.fadeInUp {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out; /* Slower duration */
}

.fadeInDown {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out; /* Slower duration */
}

/* Show class to trigger animations */
.show {
    opacity: 1;
    transform: translateY(0);
}


/* Remove default overflow to avoid double scrollbar */
body {
    overflow: hidden; /* Prevents double scrollbar */
}


/*--------------------Completed Projects section effect end--------------------------*/