html {
    scroll-behavior: smooth;
}







.hero {
    background-image: url(https://ccpgh.careasy.org/sites/indition/cars_ccpgh/uploads/realestate/hero.jpg);
    background-position: center;
    background-size: cover;
    height: auto;
    background-color: rgba(0,0,0,.25);
    background-blend-mode: darken;
    transition: 2s;
}



.hero-text {
    padding: 24em 0 14em;
    text-shadow: -3px 1px 7px rgb(0 0 0);
    text-align: center;
}



.steps {
    list-style: none;
}

    .steps li {
        padding-bottom: 1em;
        line-height: 1.5;
    }


#Donation-Steps ol li {
    padding: .5em 0;
    line-height: 1.2;
}

.real-estate-faq {
    padding: 5em 0 5em;
}

    .real-estate-faq h3 {
        color: #0b135c;
        font-size: 34px;
        line-height: 1.5;
        font-weight: 600;
        margin: 20px 0 22px 0;
        text-transform: uppercase;
    }

    .real-estate-faq h4 {
        font-weight: bold;
        padding-top: 1em;
    }

    .real-estate-faq p {
        font-size: 15px;
    }

.start-finish {
    /* padding: 2em 0 1.5em; */
    margin: 3em 0 0;
    background-color: rgba(20, 13, 20, 0.4);
    background-blend-mode: darken;
    background-color: rgba(255,255,255, 0.85);
    background-blend-mode: lighten;
    background-image: url(https://ccpgh.careasy.org/sites/indition/cars_ccpgh/uploads/realestate/yuhan-du-yLcPSvJkGrM-unsplash.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.start-filter {
    background-image: url("https://www.transparenttextures.com/patterns/arches.png");
}

.shapes {
    width: 100%;
    min-height: 280px;
    height: 100%;
    border-radius: 15px;
    margin: .5em 0;
    text-align: center;
    background-color: #0c474d;
    padding: 1em;
    background-color: transparent;
    background-image: linear-gradient(342deg, #370C4D 0%, #02A0B0 100%);
}

    .shapes h3 {
        font-size: 2.4em;
        font-weight: bold;
        color: white;
        /* text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5); */
        padding: .5em 0;
    }

    .shapes h4 {
        font-weight: bold;
        padding: .3em 0;
        text-align: center;
        color: white;
        letter-spacing: .16em;
        /* text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5); */
        font-size: 1em;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
    }

    .shapes p {
        font-size: 16px;
        color: white;
        font-weight: 500;
    }

.offer {
    color: #0c474d;
    padding: 1em 0;
    line-height: 1.5;
    font-weight: 600;
    font-size: 1.1em;
}

.donation-steps ul li {
    list-style: none;
    padding: .5em;
}

.donation-steps span {
    font-size: 2em;
    padding: 15px;
    color: #0b135c;
    background-color: #bfd22a;
    border-radius: 5px;
    margin: 5px;
    float: left;
}

#form-iframe {
    -webkit-box-shadow: 2px 0px 26px -4px rgba(0,0,0,.7);
    -moz-box-shadow: 2px 0px 26px -4px rgba(0,0,0,.7);
    box-shadow: 2px 0px 26px -4px rgba(0,0,0,.7);
    margin: 1.5em;
}


.start {
    clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
    background-color: #0c474d;
    padding: 35px 50px 25px 10px;
    margin: 63% 0;
    background-color: transparent;
    background-image: linear-gradient(342deg, #370C4D 0%, #02A0B0 100%);
}


    .start h4 {
        letter-spacing: .04em;
        font-weight: 700;
        color: white;
        font-size: 2em;
        margin-top: 0;
    }

.finish img {
    width: 60%;
    margin: 30% 0 0;
}

.finish h4 {
    letter-spacing: .04em;
    font-weight: 700;
    color: #0c474d;
    font-size: 2em;
}

.hero h1 {
    color: white;
    font-weight: 800;
    letter-spacing: .1em;
    margin-bottom: 10px;
    line-height: 1.5;
}





.easyPleasy {
    background-color: #bfd22b;
    padding: 3em 1em;
    display: inline-block;
    width: 100%;
    height: auto;
}



.titlebox {
    clip-path: polygon(0 0, 48% 0, 44% 100%, 0% 100%);
    background-color: #bfd22b;
    position: absolute;
    z-index: 9999999;
    width: 90%;
    margin-top: 40px;
}

    .titlebox h1 {
        color: white;
        padding: 8px 12px;
    }


.banner-inner {
    text-align: center;
    width: 100%;
}

iframe {
    width: 100%;
    border: none;
    /* height: 900px;
    height: 100vh; */
    height: 750px;
}

.inside-buttons > div {
    display: inline-block;
}

.inside-left {
    width: 255px;
}

.video {
    width: 400px;
    height: 250px;
}

article p {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
    font-weight: 400;
    text-align: justify;
}

.tel-alias {
    font-weight: 700;
    color: #666;
}

.btn-custom:active, .btn-custom.active, .open > .dropdown-toggle.btn-custom {
    background-image: none;
}

.contact-us {
    padding: 11em 0 8em;
}

/* -----------------------Zung Dinh Added this Below STARTS-------------------- */

.carousel-caption {
    /* width:100%;
        height: auto;
        margin: 0 auto; */
    background-color: rgba(187,205,42,.5);
    padding: 10px;
}

    .carousel-caption p {
        font-size: 1.5em;
    }

.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

    .carousel-fade .carousel-inner .active.left,
    .carousel-fade .carousel-inner .active.right {
        left: 0;
        opacity: 0;
        z-index: 1;
    }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}


@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

        .carousel-fade .carousel-inner > .item.next.left,
        .carousel-fade .carousel-inner > .item.prev.right,
        .carousel-fade .carousel-inner > .item.active {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
}


.carousel,
.carousel-inner,
.carousel-inner .item {
    height: 25em;
}


.item:nth-child(1) {
    background: url(https://dav.careasy.org/sites/cars/dav/uploads/donate.jpg);
    background-size: cover;
    background-position: center;
}


.item:nth-child(2) {
    background: url(https://images.pexels.com/photos/40820/military-men-departing-service-uniform-40820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position: center;
}

.item:nth-child(3) {
    background: url(https://cdn.pixabay.com/photo/2016/07/06/14/21/veterans-1500603_960_720.jpg);
    background-size: cover;
    background-position: center;
}



.item:nth-child(4) {
    background: url(https://images.pexels.com/photos/40546/soldiers-military-attention-salute-40546.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    background-size: cover;
    background-position: center;
}





.parallax {
    background: url(https://media.giphy.com/media/3o7TKwhW6L2tpmFsqc/giphy.gif);
    background-attachment: fixed;
    background-size: cover;
}

.parallax-filter {
    /* padding: 40px  15px; */
    background-color: rgba(0,0,0,.4);
    background-image: url("https://www.transparenttextures.com/patterns/3px-tile.png");
}

.left-parallax {
    background: rgba(187,205,42,.7);
    height: 100%;
    width: 70%;
    opacity: .8;
    top: 0;
    left: 0%;
    position: relative;
    clip-path: polygon(0 0, 46% 0, 74% 100%, 0% 100%);
    z-index: 999;
    padding: 4em 9em;
}

    .left-parallax h3 {
        color: white;
        font-size: 3em;
        line-height: 1.6em;
        margin: 0 6em 0 0;
        font-weight: bold;
        text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5);
    }

.right-parallax {
    height: 100%;
    width: 48%;
    float: right;
}





/* -----------------------Zung Dinh Added this Below ENDS-------------------- */


@media screen and (max-width: 992px) {

    .hero-text {
        padding: 10em 0 10em;
    }



    .shapes {
        width: 250px;
        min-height: 280px;
        height: 100%;
        margin: 0 auto;
        border-radius: 15px;
        /* margin: .5em 0; */
        text-align: center;
        padding: 1em;
    }


    .start, .finish {
        display: none;
    }
}



@media screen and (max-width: 939px) {
}



@media screen and (max-width: 900px) {

    .left-parallax {
        background: rgba(0,0,0,.3);
        height: 100%;
        width: 100%;
        opacity: .8;
        top: 0;
        left: 0%;
        position: relative;
        clip-path: none;
        /* clip-path: polygon(0 0, 46% 0, 74% 100%, 0% 100%); */
        z-index: 999;
        /* padding: 4em 2em; */
    }


        .left-parallax h3 {
            margin: 0;
            text-align: center;
            font-size: 2.5em;
        }
}


@media screen and (max-width: 884px) {

    .hero {
        background-image: url(/sites/indition/cars_ccpgh/uploads/realestate/880.jpg);
        background-position: center;
        background-size: cover;
        height: auto;
        transition: 2s;
        background-color: rgba(0,0,0,.4);
    }


    .start-finish {
        background-image: url(https://ccpgh.careasy.org/sites/indition/cars_ccpgh/uploads/realestate/880start.jpg);
    }
}

@media screen and (max-width: 615px) {
    .hero-text {
        padding: 8em 0 8em;
    }
}

@media only screen and (max-width: 440px) {

    .hero {
        background-image: url(/sites/indition/cars_ccpgh/uploads/realestate/640.jpg);
        background-position: center;
    }

    .start-finish {
        background-image: url(https://ccpgh.careasy.org/sites/indition/cars_ccpgh/uploads/realestate/640start.jpg);
    }



    .hero-text {
        padding: 6em 0 6em;
        line-height: 1.5;
    }
}

@media screen and (max-width: 362px) {
}

@media screen and (max-width: 278px) {
}