/* Start Home Animation */
 @media(prefers-reduced-motion :no-preference) {

.aboutus img{
    scale: .8;
    opacity: 0;
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range: 160px 500px;
}

@keyframes fade-in {
    to{scale: 1; opacity: 1;}
}


.aboutus p{
    transform:translateX(-70px);
    opacity: 0;
    animation: fade linear forwards;
    animation-timeline: view();
    animation-range: 180px 350px;
}

@keyframes fade {
    to{transform:translateX(0px); opacity: 1;}
}

.hero p,
.hero .hopes,
.hero .gift {
    opacity: 0;
    animation: fade-out linear forwards;
    animation-timeline: view();
    animation-range: 100px 300px;
}

@keyframes fade-out {
    to {opacity: 1;}
}


.causes .card {
    scale: .8;
    opacity: 0;
    animation: fade-causes linear forwards;
    animation-timeline: view();
    animation-range: 180px 350px;
}

.form .card {
    scale: .8;
    opacity: 0;
    animation: fade-causes linear forwards;
    animation-timeline: view();
    animation-range: 180px 350px;
}
@keyframes fade-causes {
    to{scale: 1; opacity: 1;}
}



.team p {
    scale: .8;
    opacity: 0;
    animation: team linear forwards;
    animation-timeline: view();
    animation-range: 100px 250px;
}

@keyframes team {
    to{scale: 1; opacity: 1;}
}

.team .img_left {
    transform:translateX(-70px);
    opacity: 0;
    animation: img_left linear forwards;
    animation-timeline: view();
    animation-range: 100px 250px;
}

@keyframes img_left {
    to{transform:translateX(0px); opacity: 1;}
}

.team .img_right {
    transform:translateX(70px);
    opacity: 0;
    animation: img_right linear forwards;
    animation-timeline: view();
    animation-range: 100px 250px;
}

@keyframes img_right {
    to{transform:translateX(0px); opacity: 1;}
}


.massinon h2,
.massinon h1 {
    transform:translateX(-70px);
    opacity: 0;
    animation: massinon linear forwards;
    animation-timeline: view();
    animation-range: 180px 350px;
    animation-duration: 3s;
}

@keyframes massinon {
    to{transform:translateX(0px); opacity: 1;}
}

.massinon a {
    transform:translateX(100px);
    opacity: 0;
    animation: fade-out-link linear forwards;
    animation-timeline: view();
    animation-range: 180px 350px;
}

@keyframes fade-out-link {
    to{transform:translateX(0px); opacity: 1;}
}


.home_associates img {
    transform:translateX(-100px);
    opacity: 0;
    animation: home_associates linear forwards;
    animation-timeline: view();
    animation-range: 180px 350px;
    height: 110px;
}

@keyframes home_associates {
    to{transform:translateX(0px); opacity: 1;}
}

}

/* End Home Animation */

/*
*
*
*
*
*
*
*/

/* Start About us Animation */


@media(prefers-reduced-motion :no-preference) {

    .about-us img {
        scale: .8;
        opacity: 0;
        animation: about-us linear forwards;
        animation-timeline: view();
        animation-range: 180px 300px;
        animation-duration: 3s;
    }

    @keyframes about-us {
        to{scale: 1; opacity: 1;}
    }


    .make-us-different .works {
       scale: 0;
        opacity: 0;
        animation: works linear forwards;
        animation-timeline: view();
        animation-range: 180px 350px;
    }

    @keyframes works {
        to{scale: 1; opacity: 1;}
    }

    .make-us-different .works2 {
        scale: 0;
        opacity: 0;
        animation: works2 linear forwards;
        animation-timeline: view();
        animation-range: 180px 350px;
    }

    @keyframes works2 {
        to{scale: 1; opacity: 1;}
    }

    .make-better-world img {
        scale: 0;
        opacity: 0;
        animation: fade-img linear forwards;
        animation-timeline: view();
        animation-range: 180px 350px;
    }

    @keyframes fade-img {
        to{scale: 1; opacity: 1;}
    }

    .make-better-world .notifcation {
        scale: 0;
        opacity: 0;
        animation: notifcation linear forwards;
        animation-timeline: view();
        animation-range: 120px 300px;
    }

    @keyframes notifcation {
        to{scale: 1; opacity: 1;}
    }

    .facts-about-us .facts-about-us-info {
        scale: 0;
        opacity: 0;
        animation: fade-fact linear forwards;
        animation-timeline: view();
        animation-range: 180px 350px;
    }

    @keyframes fade-fact {
        to{scale: 1; opacity: 1;}
    }

    .facts-about-us .facts_info{
        scale: 0;
        opacity: 0;
        animation: fade-info linear forwards;
        animation-timeline: view();
        animation-range: 180px 350px;
    }

    @keyframes fade-info {
        to{scale: 1 ;opacity: 1;}
    }



    .volunteer_now .image_dis1{
        scale: .8;
        opacity: 0;
        animation: image_dis1 linear forwards;
        animation-timeline: view();
        animation-range: 180px 350px;
    }

    @keyframes image_dis1 {
        to{scale: 1; opacity: 1;}
    }

    .volunteer_now .image_dis2{
        transform:translatey(70px);
        opacity: 0;
        animation: image_dis2 linear forwards;
        animation-timeline: view();
        animation-range: 180px 350px;
    }

    @keyframes image_dis2 {
        to{transform:translateX(0px); opacity: 1;}
    }


    .progress-containers{
        transform:translateX(100px);
        opacity: 0;
        animation: fade-prog linear forwards;
        animation-timeline: view();
        animation-range: 120px 250px;
    }

    @keyframes fade-prog {
        to{transform:translateX(0px); opacity: 1;}
    }

}

/* End About us Animation */








/* Start Conatac Animation */


@media(prefers-reduced-motion :no-preference) {

    .contacts-us .animate{
        scale: .8;
        opacity: 0;
        animation: animate linear forwards;
        animation-timeline: view();
        animation-range: 120px 350px;
    }

    @keyframes animate {
        to{scale: 1; opacity: 1;}
    }

    .contacts-us .icons{
        scale: .8;
        opacity: 0;
        animation: icons linear forwards;
        animation-timeline: view();
        animation-range: 90px 180px;
    }

    @keyframes icons {
        to{scale: 1; opacity: 1;}
    }
}

/* End ConatacAnimation */



/* Start News Animation */

@media(prefers-reduced-motion :no-preference) {

    .news-section .card{
        transform:translateX(-70px);
        opacity: 0;
        animation: news-section linear forwards;
        animation-timeline: view();
        animation-range: 120px 350px;
    }

    @keyframes news-section {
        to{transform:translateX(0px); opacity: 1;}
    }

    .recent_post img{
        scale: .8;
        opacity: 0;
        animation: recent_post linear forwards;
        animation-timeline: view();
        animation-range: 90px 180px;
    }

    @keyframes recent_post {
        to{scale: 1; opacity: 1;}
    }
}


/* End News Animation */


/* Start Single-News Animation */

@media(prefers-reduced-motion :no-preference) {

    .single-new-section .card p{
        transform:translateX(-70px);
        opacity: 0;
        animation: single-new-section linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes single-new-section {
        to{transform:translateX(0px); opacity: 1;}
    }

    .reply form{
        scale: .8;
        opacity: 0;
        animation: reply linear forwards;
        animation-timeline: view();
        animation-range: 90px 180px;
    }

    @keyframes reply {
        to{scale: 1; opacity: 1;}
    }
}


/* End Single-News Animation */


/* Start team work Animation */

@media(prefers-reduced-motion :no-preference) {

    .TeamProfile .card{
        transform:translateX(-70px);
        opacity: 0;
        animation: TeamProfile linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes TeamProfile {
        to{transform:translateX(0px); opacity: 1;}
    }

    .become-volanteer-info p{
        transform:translateX(-70px);
        opacity: 0;
        animation: pragrahp linear forwards;
        animation-timeline: view();
        animation-range: 90px 180px;
    }

    @keyframes pragrahp {
        to{transform:translateX(0px); opacity: 1;}
    }

    .become-volanteer-info img{
        transform:translateX(70px);
        opacity: 0;
        animation: pragrahp-img linear forwards;
        animation-timeline: view();
        animation-range: 90px 180px;
    }

    @keyframes pragrahp-img {
        to{transform:translateX(0px); opacity: 1;}
    }
}


/* End team work Animation */



/* Start events Animation */

@media(prefers-reduced-motion :no-preference) {

    .event .card{
        scale: 0;
        opacity: 0;
        animation: event linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes event {
        to{scale: 1; opacity: 1;}
    }
}


/* End events Animation */


/* Start single-events Animation */

@media(prefers-reduced-motion :no-preference) {

    .singleEvent p{
        transform: translateX(-70px);
        opacity: 0;
        animation: singleEvent linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes singleEvent {
        to{ transform: translateX(0px); opacity: 1;}
    }

    .singleEvent .eventAccordion .accordion-item{
        transform: translateX(70px);
        opacity: 0;
        animation: accordion-item linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes accordion-item {
        to{transform: translateZ(0px); opacity: 1;}
    }
}


/* End single-events Animation */




/* Start .become-volunteer Animation */

@media(prefers-reduced-motion :no-preference) {

    .become-volunteer img{
        transform: translateX(-70px);
        opacity: 0;
        animation: become-volunteer linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes become-volunteer {
        to{ transform: translateX(0px); opacity: 1;}
    }
}

/* End .become-volunteer Animation */


/* Start FAQ Animation */

@media(prefers-reduced-motion :no-preference) {

    .faq-help li{
        transform: translateX(70px);
        opacity: 0;
        animation: faq-help linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes faq-help {
        to{ transform: translateX(0px); opacity: 1;}
    }


    .faq-help .faq-icon{
        scale: 0;
        opacity: 0;
        animation: faq-icon linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes faq-icon {
        to{ scale: 1; opacity: 1;}
    }

    .accordion-item {
        transform: translateX(70px);
        opacity: 0;
        animation: accordion-items linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes accordion-items {
        to{ transform: translateX(0px); opacity: 1;}
    }


    .featuerd-work .make-difference-image{
        scale: 0;
        opacity: 0;
        animation: featuerd-work linear forwards;
        animation-timeline: view();
        animation-range: 50px 220px;
    }

    @keyframes featuerd-work {
        to{ scale: 1; opacity: 1;}
    }

}


/* End FAQ Animation */

/* Start Donate Animation */

@media(prefers-reduced-motion :no-preference) {

    .donate_animation .payment{
        transform: translateX(-70px);
        opacity: 0;
        animation: payment linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes payment {
        to{transform: translateX(0px); opacity: 1;}
    }

    .donate_animation form{
        scale: 0;
        opacity: 0;
        animation: donate_animation linear forwards;
        animation-timeline: view();
        animation-range: 80px 250px;
    }

    @keyframes donate_animation {
        to{scale: 1; opacity: 1;}
    }
}

/* End Donate Animation */