/**
* Template Name: Green
* Template URL: https://bootstrapmade.com/green-free-one-page-bootstrap-template/
* Updated: Mar 17 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}


section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*overflow: hidden*/
}


section .animate {
    opacity: 0;
    filter: blur(5px);
    transition: 1s;
}

section.show-animate .animate {
    opacity: 1;
    filter: blur(0);
}

.sec-1 .animate {
    transform: translateX(-100%);
    transition-delay: calc(.2s * var(--i));
}

.sec-1.show-animate .animate {
    transform: translateX(0);
}

.sec-2 .animate {
    transform: translateX(100%);
}

.sec-2.show-animate .animate {
    transform: translateX(0);
}

.sec-3 .animate {
    transform: scale(.7);
    transition-delay: calc(.2s * var(--i));
}

.sec-3.show-animate .animate {
    transform: scale(1);
}

.sec-4 .showRight-animate {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #6EC083;
    transition: 1s;
    transition-delay: calc(.2s * var(--i));
}

.sec-4.show-animate .showRight-animate {
    width: 0;
}


.sec-5 .images img {
    transform: translate(-100%);
    transition-delay: calc(.1s * var(--i));
}

.sec-5.show-animate .images img {
    transform: translate(0);
}