/*--------------------------------------------------------------
# hero01 Section
--------------------------------------------------------------*/

#hero01-section {
    width: 100%;
    height: 500px;
}


#hero01 {
    width: 100%;
    height: 80vh;
    background: url("../../images/banner/ceffy-banner-home-01.jpg") fixed center center;
}

#hero01 .container {
    padding-top: 72px;

}

#hero01 h1 {
    font-family: 'Playfair Display', serif;
    margin: 0 0 0 50%;
    font-size: 60px;
    /*font-weight: 700;*/
    line-height: 56px;
    color: #fff;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
}

#hero01 h2 {
    color: #fff;
    padding-top: 10px;
    margin: 0 0 0 50%;
    font-size: 24px;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
}

#hero01 h5 {
    color: #fff;
    margin-left: 50%;
    font-size: 18px;
}

#hero01 .btn-get-started {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 11px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #fff;
    background: #354d26;
}

#hero01 .btn-get-started:hover {
    background: #354d26;
}

#hero01 .btn-watch-video {
    font-size: 16px;
    display: inline-block;
    padding: 10px 0 8px 40px;
    transition: 0.5s;
    margin: 10px 0 0 25px;
    color: #fff;
    position: relative;
}

#hero01 .btn-watch-video i {
    color: #fff;
    font-size: 32px;
    position: absolute;
    left: 0;
    top: 7px;
    transition: 0.3s;
}

#hero01 .btn-watch-video:hover i {
    color: #354d26;
}

#hero01 .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
    #hero01 {
        height: 100vh;
        text-align: center;
    }

    #hero01 .animated {
        -webkit-animation: none;
        animation: none;
    }

    #hero01 .hero01-img {
        text-align: center;
    }

    #hero01 .hero01-img img {
        width: 50%;
    }
}

@media (max-width: 768px) {
    #hero01 h1 {
        font-size: 28px;
        line-height: 36px;
    }

    #hero01 h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }

    #hero01 .hero01-img img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    #hero01 .hero01-img img {
        width: 100%;
    }

    #hero01 .btn-get-started {
        font-size: 16px;
        padding: 10px 24px 11px 24px;
    }

    #hero01 .btn-watch-video {
        font-size: 16px;
        padding: 10px 0 8px 40px;
        margin-left: 20px;
    }

    #hero01 .btn-watch-video i {
        font-size: 32px;
        top: 7px;
    }
}


/*--------------------------------------------------------------
# hero02 Section
--------------------------------------------------------------*/

#hero02-section {
    width: 100%;
    height: 500px;
}


#hero02 {
    width: 100%;
    height: 80vh;
    background: url("../../images/banner/ceffy-banner-home-02.jpg") fixed center center;
}

#hero02 .container {
    padding-top: 72px;

}

#hero02 h1 {
    font-family: 'Playfair Display', serif;
    margin: 0 0 0 50%;
    font-size: 60px;
    /*font-weight: 700;*/
    line-height: 56px;
    color: #000;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
}

#hero02 h2 {
    color: #000;
    padding-top: 10px;
    margin: 0 0 0 50%;
    font-size: 24px;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
}

#hero02 h5 {
    color: #000;
    margin-left: 50%;
    font-size: 18px;
}

#hero02 .btn-get-started {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 11px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #fff;
    background: #354d26;
}

#hero02 .btn-get-started:hover {
    background: #354d26;
}

#hero02 .btn-watch-video {
    font-size: 16px;
    display: inline-block;
    padding: 10px 0 8px 40px;
    transition: 0.5s;
    margin: 10px 0 0 25px;
    color: #fff;
    position: relative;
}

#hero02 .btn-watch-video i {
    color: #fff;
    font-size: 32px;
    position: absolute;
    left: 0;
    top: 7px;
    transition: 0.3s;
}

#hero02 .btn-watch-video:hover i {
    color: #354d26;
}

#hero02 .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
    #hero02 {
        height: 100vh;
        text-align: center;
    }

    #hero02 .animated {
        -webkit-animation: none;
        animation: none;
    }

    #hero02 .hero02-img {
        text-align: center;
    }

    #hero02 .hero02-img img {
        width: 50%;
    }
}

@media (max-width: 768px) {
    #hero02 h1 {
        font-size: 28px;
        line-height: 36px;
    }

    #hero02 h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }

    #hero02 .hero02-img img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    #hero02 .hero02-img img {
        width: 100%;
    }

    #hero02 .btn-get-started {
        font-size: 16px;
        padding: 10px 24px 11px 24px;
    }

    #hero02 .btn-watch-video {
        font-size: 16px;
        padding: 10px 0 8px 40px;
        margin-left: 20px;
    }

    #hero02 .btn-watch-video i {
        font-size: 32px;
        top: 7px;
    }
}



/*--------------------------------------------------------------
# hero03 Section
--------------------------------------------------------------*/

#hero03-section {
    width: 100%;
    height: 500px;
}


#hero03 {
    width: 100%;
    height: 80vh;
    background: url("../../images/banner/ceffy-banner-home-03.jpg") fixed center center;
}

#hero03 .container {
    padding-top: 72px;

}

#hero03 h1 {
    font-family: 'Playfair Display', serif;
    margin: 0 0 0 50%;
    font-size: 60px;
    /*font-weight: 700;*/
    line-height: 56px;
    color: #fff;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
}

#hero03 h2 {
    color: #fff;
    padding-top: 10px;
    margin: 0 0 0 50%;
    font-size: 24px;
    /*text-shadow: black 0.1em 0.1em 0.2em;*/
}

#hero03 h5 {
    color: #fff;
    margin-left: 50%;
    font-size: 18px;
}

#hero03 .btn-get-started {
    font-family: "Jost", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 28px 11px 28px;
    border-radius: 50px;
    transition: 0.5s;
    margin: 10px 0 0 0;
    color: #fff;
    background: #354d26;
}

#hero03 .btn-get-started:hover {
    background: #354d26;
}

#hero03 .btn-watch-video {
    font-size: 16px;
    display: inline-block;
    padding: 10px 0 8px 40px;
    transition: 0.5s;
    margin: 10px 0 0 25px;
    color: #fff;
    position: relative;
}

#hero03 .btn-watch-video i {
    color: #fff;
    font-size: 32px;
    position: absolute;
    left: 0;
    top: 7px;
    transition: 0.3s;
}

#hero03 .btn-watch-video:hover i {
    color: #354d26;
}

#hero03 .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
    #hero03 {
        height: 100vh;
        text-align: center;
    }

    #hero03 .animated {
        -webkit-animation: none;
        animation: none;
    }

    #hero03 .hero03-img {
        text-align: center;
    }

    #hero03 .hero03-img img {
        width: 50%;
    }
}

@media (max-width: 768px) {
    #hero03 h1 {
        font-size: 28px;
        line-height: 36px;
    }

    #hero03 h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }

    #hero03 .hero03-img img {
        width: 100%;
    }
}

@media (max-width: 575px) {
    #hero03 .hero03-img img {
        width: 100%;
    }

    #hero03 .btn-get-started {
        font-size: 16px;
        padding: 10px 24px 11px 24px;
    }

    #hero03 .btn-watch-video {
        font-size: 16px;
        padding: 10px 0 8px 40px;
        margin-left: 20px;
    }

    #hero03 .btn-watch-video i {
        font-size: 32px;
        top: 7px;
    }
}