@keyframes treeScale{
    50%{
        transform: scale(1.1);
        filter: drop-shadow(0 0 100px #e2b29f);
    }
}
@keyframes bottomIn{
    from{
        transform: translateY(200px);
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}
.main-text,.section-title,.crd-1{
    animation: 1s bottomIn ease-out forwards;
    animation-delay: 0.2s;
    opacity: 0;
}
.sub-text,.p1 ,.crd-2,#contact p{
    animation: 1.2s bottomIn ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
}
.in-1{
    animation: 1.4s bottomIn ease-out forwards;
    animation-delay: 0.6s;
    opacity: 0;
}
.in-2{
    animation: 1.6s bottomIn ease-out forwards;
    animation-delay: 0.8s;
    opacity: 0;
}
.hero-cta,.p2,.crd-3,form textarea {
    animation: 1.6s bottomIn ease-out forwards;
    animation-delay: 0.8s;
    opacity: 0;
}
.social,.section-btn,.section-btn1,.crd-4 ,form button,.copyright,.p3,.p4{
    animation: 1.6s bottomIn ease-out forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

@keyframes topIn{
    from{
        transform: translateY(-200px);
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}
.head-logo{
    animation: 1.2s topIn ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
}
nav{
    animation: 1.4s topIn ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
} 
.head-cta{
    animation: 1.2s rightIn ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
} 

@keyframes rightIn{
    from{
        transform: translateX(200px);
    }
    to{
        transform: translateX(0);
        opacity: 1;
    }
}

.right{
    animation: 1.6s rightIn ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
} 
@keyframes leftIn{
    from{
        transform: translateX(-200px);
    }
    to{
        transform: translateX(0);
        opacity: 1;
    }
}
#contact .right {
    animation: 1.2s leftIn ease-out forwards;
    animation-delay: 0.4s;
    opacity: 0;
}