.hidden-text {
        opacity: 0;
    }

    /* Apply animation after 10 seconds */
    .hidden-text {
        animation: appearText 1s linear 1s forwards;
    }

    /* Define the animation */
    @keyframes appearText {
        to {
            opacity: 1;
        }
    }

    .main-banner .caption h3 {
        animation: animated-text 2s steps(10,end) 2s 1 normal both;
    }

    @keyframes animated-text {

        from {
            width: 0;
        }

        to {
            width: 100%;
        }
    }





.main-button-hid a {
    opacity: 0;
}
/* Apply animation after 10 seconds */
    .main-button-hid a {
        animation: appearTextb 1s linear 3s forwards;
    }

    /* Define the animation */
    @keyframes appearTextb {
        to {
            opacity: 1;
        }
    }


    .main-banner .caption h3 { 
        opacity: 0;
    }

.main-banner .caption h3 {
  animation: appearTextl 1s linear 2s forwards;
}

@keyframes appearTextl {
        to {
            opacity: 1;
        }
    }


/*@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;

}*/

@keyframes zoomIn {
    from {
        transform: scale(0); /* Start from no scale (invisible) */
    }
    to {
        transform: scale(1); /* Scale to 1 (normal size) */
    }
}


.zoom-in-element {
    
    animation: zoomIn 9s ease-out forwards; /* Animation properties */
    /* 'forwards' keeps the element in its final state after the animation ends */
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0);
        visibility: hidden;
    }

    50% {
        opacity: 1;
        visibility: visible;
    }
100%{transform:translateZ(0)}}.slideInLeft{animation-name:slideInLeft}
                                                                                                          


@keyframes slideInRight{0%{opacity: 0;transform:translate3d(100%,0,0);visibility:hidden} 
                        50% {
        opacity: 1;
        visibility: visible;
    } 
100%{transform:translateZ(0)}}.slideInRight{animation-name:slideInRight}