/*-----------------------------------------------------------------------------------

    Template Name: Nusaiba - Rakika - One Page Business HTML Template
    Template URI: http://rapidthemes.net/rakika/



    Description: http://rapidthemes.net/nusaiba/ is a Onepage Portfolio Template built on Bootstrap4, HTML5, CSS3, JavaScript, jQuery. It's a                modern crafted HTML template which can be used for Personal Photography website. This is highly customizable - looks awesome                on tablets and mobile devices. We have included a documentation folder to describe the code structures. We have included best              practice of web development - you can create great website layout based on Bootstrap4.




                 We believe - we have covered everything you need, but if there is something that you would like to know then we are happy to help you out.
    Author: mizanosmani91@gmail.com
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
    1. Home Page - 1 
        1.1 Header Area
        1.2 Hero Area
        1.3 About Area
        1.4 Service Area
        1.5 Project Area
        1.6 Counter Area
        1.7 Team Area
        1.8 Testimonial Area
        1.9 Blog Area
        1.10 Subscribe Area
        1.11 Contact Area
        1.12 Footer Area

    2. Home Page - 2
        2.1 Hero Area
        2.2 About Area
        2.3 Project Area
        2.4 Counter Area
        2.5 Team Area
        2.6 Testimonial Area
        2.7 Blog Area
        2.8 Contact Area
        2.9 Footer
    3. Blog Details Area
        3.1 Blog Crumbs Area
        3.2 Blog Detail Content

-----------------------------------------------------------------------------------*/

/* ==========================================================================
   1. Home Page - 1
   ========================================================================== */

/* ==========================================================================
   1.1 Header Area
   ========================================================================== */

header {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 100%;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

header.dark {
    position: fixed;
    background: #03223f;
}

header nav ul {
    text-align: right;
    text-transform: capitalize;
}

header nav li {
    display: inline-block;
}

header nav li a {
    color: #15c15c;
    display: block;
    padding: 30px 10px;
    opacity: .9;
}

header nav li.active a {
    opacity: 1;
    text-shadow: 0 0;
}

header nav li a:hover {
    text-decoration: none;
    text-shadow: 0 0;
    color: #535353;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}


/* ==========================================================================
   1.2 Hero Area
   ========================================================================== */

section.hero-area {
    position: relative;
    height: 100%;
    width: 100%;
}

.carousel,
.carousel-inner,
.carousel-item,
.rakika-hero,
.hero-table,
.tablecell {
    height: 100%;
}

.rakika-hero {
    position: relative;
    width: 100%;
}

.hero-table {
    display: table;
    width: 100%;
}

.tablecell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}


section.hero-area:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: '';
    background-image: url("../img/background/hero-bg.png");
    background-size: cover;
    background-position: center;
    z-index: -1;
}

/*
#wave{
    position: fixed;
    height: 100%;
    width: 100%;
    overflow: hidden;
    bottom: 0;
    left: 0;
    -webkit-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
    pointer-events: none;
    z-index: 100;
}
*/

section.hero-area h2 {
    color: #ffffff;
    line-height: 58px;
    font-weight: 400;
    margin-top: 40px;
}

section.hero-area p {
    color: #dce8f3;
    padding: 40px 0;
    margin: 0;
}

a.hero-btn {
    color: #ffffff;
    font-size: 18px;
    line-height: 28px;
    text-transform: capitalize;
    font-weight: 600;
    border: 2px solid #ffffff;
    padding: 10px 30px;
    border-radius: 30px;
    display: inline-block;
    margin-right: 15px;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

a.hero-btn:hover {
    text-decoration: none;
    color: #022240;
    background: #fff;
}


/* ==========================================================================
   1.3 About Area
   ========================================================================== */

section.about-area h2 {
    padding-bottom: 30px;
}

.about-area .col-lg-6 {
    display: flex;
    align-items: center;
}

.about-detail {
    padding-left: 10px;
}

.about-area h4 {
    font-size: 22px;
    color: #16793f;
    line-height: 30px;
    font-weight: 600;
    padding-bottom: 20px;
}

.about-detail p {
    padding-bottom: 22px;
}

.about-detail ul {
    font-size: 20px;
}

.about-detail li {
    display: inline-block;
}

.about-detail li a {
    display: block;
    font-size: 16px;
    color: #bbbbbb;
    height: 40px;
    width: 40px;
    border: 1px solid #bbbbbb;
    text-align: center;
    line-height: 40px;
    margin-right: 3px;
}

.about-detail li a:hover {
    border: 1px solid #022240;
}

.about-detail li a .fa-facebook-f,
.about-detail li a .fa-twitter,
.about-detail li a .fa-linkedin-in,
.about-detail li a .fa-behance {
    margin-top: -5px;
    color: #bbbbbb;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.about-detail li a:hover .fa-facebook-f,
.about-detail li a:hover .fa-twitter,
.about-detail li a:hover .fa-linkedin-in,
.about-detail li a:hover .fa-behance {
    color: #022240;
}

/* ==========================================================================
   1.4 Service Area
   ========================================================================== */

section.service-area {
    background: #f7f7f7;
    padding-bottom: 95px;
}

.section-heading {
    padding-bottom: 60px;
}

.section-heading h2 {
    padding-bottom: 30px;
}

.section-heading p {
    color: #7a7a7a;
    margin: 0;
}

.single-service {
    background: #fff;
    padding: 30px 10px 30px 20px;
    margin: 15px;
    height: auto;
    max-height: 100%;
    width: 100%;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.single-service:hover {
    box-shadow: 0 0 7px #c0c3c9;
}

.single-service img {
    border: 1px solid #16793f;
    padding: 15px;
}

.owl-carousel .owl-item img {
    width: 60px;
    height: 60px;
    transform: scale(.9);
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.single-service:hover img {
    transform: scale(1);
}


.single-service h4 {
    padding: 20px 0;
    color: #535353;
    font-weight: 700;
    text-transform: capitalize;
}

/* ==========================================================================
   
   ========================================================================== */

section.project-area {
    position: relative;
    background-image: url("../img/background/project-bg.jpg");
    background-size: cover;
    background-position: center;
}

ul#mesonary-nav {
    padding: 15px 0;
    text-align: center;
    box-shadow: 0 0 11px -4px #022240;
    border-radius: 30px;
    width: 80%;
    margin: 0 auto;
}

ul#mesonary-nav li {
    display: inline-block;
    padding: 0 20px;
    color: #606060;
    font-weight: 700;
    text-transform: capitalize;
    cursor: pointer;
}

ul#mesonary-nav li:hover {
    color: #022240;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

ul#mesonary-nav li.active-btn {
    color: #022240;
}

.project-image {
    position: relative;
    margin-top: 30px;
}

.project-image:after {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    content: '';
    background: #000;
    opacity: 0;
    transform: scale(0);
    -webkit-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}

.project-image:hover::after {
    opacity: .7;
    transform: scale(.9);
}

.project-image .fa-search-plus {
    color: #fff;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .4s ease-in;
    -o-transition: all .4s ease-in;
    transition: all .4s ease-in;
}

.project-image:hover .fa-search-plus {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   1.6 Counter Area
   ========================================================================== */

.counter-area {
    position: relative;
    background-image: url("../img/background/counter-bg.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    z-index: 1;
}

.counter-area:after {
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background: #022240;
    opacity: .9;
    z-index: -1;
}

.count-number img {
    float: left;
    margin: 0 15px 0 0;
    border: 1px solid #fff;
    height: 50px;
    width: 50px;
    padding: 10px;
}

.count-number {
    position: relative;
    padding-bottom: 25px;
}

.count-number h2 {
    color: #fff;
}

.counter-area h4 {
    color: #fff;
    line-height: 30px;
    text-transform: inherit;
    font-family: 'Source Sans Pro', sans-serif;
}

/* ==========================================================================
   
   ========================================================================== */

.single-team {
    position: relative;
    box-shadow: 0 3px 12px -5px #e0e7f4;
    background: #fff;
}

.single-team:hover {
    -webkit-transition: ease .3s;
    -o-transition: ease .3s;
    transition: ease .3s;
}

.team-detail {
    position: relative;
    text-align: center;
    padding: 60px 0;
    box-shadow: 0px 2px 2px 0px #ddd;
}

.team-detail ul {
    background: #022240;
    position: absolute;
    transform: translate(9%, 0);
    box-shadow: 0 1px 9px -4px #000;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: ease .3s;
    -o-transition: ease .3s;
    transition: ease .3s;
}



.team-detail li {
    display: inline-block;
    height: 40px;
    width: 40px;
}

.team-detail li a {
    display: block;
    margin: 5px;
}

.team-detail li:hover {
    background: #fff;
    -webkit-transition: ease .3s;
    -o-transition: ease .3s;
    transition: ease .3s;
}

.fa-facebook-f,
.fa-twitter,
.fa-google-plus-g,
.fa-behance,
.fa-dribbble {
    color: #fff;
}

.single-team:hover .team-detail {
    border-top: 0;
    box-shadow: none;
    -webkit-transition: ease .3s;
    -o-transition: ease .3s;
    transition: ease .3s;
}


.single-team:hover .team-detail ul {
    visibility: visible;
    opacity: 1;
    transform: translate(9%, -200%);
}

.team-detail li:hover .fa-facebook-f,
.team-detail li:hover .fa-twitter,
.team-detail li:hover .fa-google-plus-g,
.team-detail li:hover .fa-behance,
.team-detail li:hover .fa-dribbble {
    color: #000;
}

.team-detail h4 {
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 700;
    padding-bottom: 10px;
    color: #5a5a5a;
}

.team-detail p {
    text-transform: capitalize;
    color: #5a5a5a;
}

.single-team:hover .team-detail h4,
.single-team:hover .team-detail p {
    color: #000;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}


.member-img {
    position: relative;
}

/* ==========================================================================
   1.8 Testimonial Area
   ========================================================================== */

.testimonial-area {
    position: relative;
    background: #f7f7f7;
}

.testimonial-area .section-heading {
    padding-bottom: 45px;
}

.testimonial-area .section-heading h2 {
    padding-bottom: 8px;
}

.testimonial-area img {
    margin-right: 20px;
    min-width: 170px;
    min-height: 180px;
    float: left;
}

.testimonial-detail p {
    color: #494949;
    padding-top: 18px;
}

.testimonial-detail h4 {
    color: #3f3f3f;
    padding: 15px 0 2px;
    font-weight: 700;
    text-transform: capitalize;
}

.testimonial-detail h6 {
    color: #737373;
    font-size: 16px;
    text-transform: capitalize;
}

.slider-arrows {
    position: absolute;
    right: 0;
    bottom: -7px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    height: 30px;
    width: 30px;
    background: #617c96;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
    background: #44617c;
}

.carousel-control-prev-icon span,
.carousel-control-next-icon span {
    position: absolute;
    height: 12px;
    width: 12px;
    box-shadow: -1px 1px 0 #fff;
    top: 9px;
}

.carousel-control-prev-icon span {
    left: 12px;
    transform: rotate(45deg);
}

.carousel-control-next-icon span {
    right: 13px;
    transform: rotate(225deg);
}

/* ==========================================================================
   1.9 Blog Area
   ========================================================================== */

.blog-area {
    background-image: url("../img/background/blog-bg.jpg");
    background-size: cover;
    background-position: center;
}

.single-blog-lg,
.single-blog-sm {
    position: relative;
    padding: 10px;
    box-shadow: 0 0 7px #d4d4d4;
    background: #fff;
}

.single-blog-lg img {
    min-width: 100%;
    height: 100%;
}

.single-blog-sm {
    margin-bottom: 32px;
    display: flex;
    align-items: center;
}

.single-blog-sm:last-child {
    margin: 0;
}

.single-blog-sm img {
    width: 100%;
    margin-right: 16px;
}


.blog-detail {
    padding: 16px;
}

.single-blog-sm .blog-detail {
    padding: 0;
}

.shedule {
    float: left;
    display: flex;
    margin-right: 30px;
}

.single-blog-lg .shedule {
    margin-top: 18px;
}

.shedule h6 {
    color: #8b8b8b;
    font-size: 14px;
    margin: 2px 0 0 5px;
    font-family: 'Source Sans Pro', sans-serif;
}

.single-blog-lg .shedule .fa-user,
.single-blog-sm .shedule .fa-user,
.single-blog-lg a.read-more-btn,
.single-blog-sm a.read-more-btn {
    color: #8b8b8b;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.single-blog-lg:hover .shedule .fa-user,
.single-blog-sm:hover .shedule .fa-user,
.single-blog-lg:hover a.read-more-btn,
.single-blog-sm:hover a.read-more-btn {
    color: #022240;
    text-decoration: none;
}

.blog-detail h4 {
    display: inline-block;
    padding: 20px 0;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: #000;
}

.blog-detail p {
    color: #565656;
}

a.read-more-btn {
    text-transform: capitalize;
    font-weight: 700;
    display: inline-block;
    padding-top: 20px;
    color: #606060;
}

/* ==========================================================================
   1.10 Subscribe Area
   ========================================================================== */

.subscribe-area {
    background: #f7f7f7;
}

.subscribe-area .section-heading {
    padding-bottom: 35px;
}

.subscribe-area .section-heading h2 {
    padding: 0;
}

.subscribe-area .section-heading h3 {
    padding: 12px 0 18px;
    color: #000;
    font-size: 25px;
    text-transform: capitalize;
}

.subscribe-area input[type="email"] {
    border: none;
    outline: none;
    color: #fff;
    background: #565656;
    width: 100%;
    padding: 14px 24px;
    border-radius: 30px;
    margin: 0;
}

.subscribe-area ::placeholder {
    color: #dfdfdf;
    text-transform: capitalize;
}

a.subscribe-btn {
    position: absolute;
    right: 13px;
    top: 0;
    color: #fff;
    font-size: 18px;
    text-transform: capitalize;
    background: #000;
    padding: 14px 36px;
    font-family: 'Lato', sans-serif;
    border-radius: 30px;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

a.subscribe-btn:hover {
    text-decoration: none;
    background: #fff;
    color: #000;
}

/* ==========================================================================
   1.11 Contact Area
   ========================================================================== */

.contact-area {
    position: relative;
    background-image: url("../img/background/contact-bg.jpg");
}

section.contact-area .container {
    box-shadow: 0 0 11px -4px #022240;
    background: #fff;
    padding: 100px 50px;
}

.contact-area input[type="text"],
.contact-area input[type="email"],
.contact-area input[type="tel"] {
    width: 45%;
    margin-bottom: 30px;
    margin-right: 12px;
    padding: 10px 0;
    background: none;
    border: none;
    outline: none;
    border-bottom: 1px solid #9d9d9d;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
textarea::placeholder {
    color: #9fa1af;
}

section.contact-area textarea {
    width: 92.5%;
    border: none;
    outline: none;
    resize: none;
    border-bottom: 1px solid #9d9d9d;
    padding: 0 0;
    margin-top: 20px;
    height: 36px;
}

input.rakika-btn {
    display: inline-block;
    text-transform: capitalize;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    padding: 15px 40px;
    background: none;
    border: none;
    color: #3f3f3f;
    border-radius: 30px;
    outline: none;
    cursor: pointer;
    box-shadow: 0 0 10px -5px #022240;
    -webkit-transition: ease .3s;
    -o-transition: ease .3s;
    transition: ease .3s;
}

input.rakika-btn:hover {
    text-decoration: none;
    box-shadow: 0 0 12px -3px #022240;

}

.contact-box {
    position: relative;
    padding: 15px;
    border: 1px solid #a4a5aa;
    margin-bottom: 60px
}

.contact-box:last-child {
    margin: 0;
}

.contact-box p {
    padding-left: 5px;
    font-family: 'Lato', sans-serif;
}

.contact-box .fa-map-marker-alt,
.contact-box .fa-envelope,
.contact-box .fa-phone {
    color: #466b8f;
    font-size: 24px;
    margin-right: 10px;
    float: left;
}

.contact-box .fa-phone {
    transform: rotate(90deg);
}

/* ==========================================================================
    1.12 Footer Area
   ========================================================================== */

.footer-top {
    /* background-image: url("../img/background/footer-bg.jpg"); */
    background-size: cover;
    background-position: left;
}

.footer-top .section-heading {
    padding: 0;
}

.footer-top .section-heading p {
    font-size: 18px;
    line-height: 26px;
    color: #1c1c1c;
    padding: 20px 0 35px;
}

.footer-top ul {
    font-size: 20px;
}

.footer-top li {
    display: inline-block;
}

.footer-top li a {
    display: block;
    font-size: 16px;
    color: #bbbbbb;
    height: 40px;
    width: 40px;
    border: 1px solid #6284a4;
    text-align: center;
    line-height: 40px;
    margin-right: 3px;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.footer-top li a:hover {
    border: 1px solid #fff;
}

.footer-top li a .fa-facebook-f,
.footer-top li a .fa-twitter,
.footer-top li a .fa-linkedin-in,
.footer-top li a .fa-behance {
    margin-top: -5px;
    color: #fff;
}


/* ==========================================================================
   ========================================================================== */

footer {
    background: #001a32;
    color: #aec3d6;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 300;
    font-family: 'Lato', sans-serif;
}

/* ==========================================================================
   2. Home Page - 2
   ========================================================================== */

/* ==========================================================================
   2.1 Hero Area 
   ========================================================================== */

.hero-area.hero-2 {
    background-image: url("../img/background/hero-bg-2.jpg");
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.hero-area.hero-2:after {
    background-image: url("../img/background/hero-2-overlay.jpg");
    background-size: cover;
    background-position: center;
    opacity: .9;
    z-index: -1;
}

.hero-area.hero-2 h2 {
    margin-top: 100px;
    padding: 0 50px;
}

header.index-2.dark {
    background: #ffffff;
}

.hero-2 a.hero-btn:hover {
    color: #101010;
}

.hero-area.hero-2 p {
    padding: 30px 130px;
}

/* ==========================================================================
   2.2 About Area
   ========================================================================== */

about-2 .about-detail li a:hover {
    border: 1px solid #101010;
}

about-2 .about-detail li a:hover .fa-facebook-f,
about-2 .about-detail li a:hover .fa-twitter,
about-2 .about-detail li a:hover .fa-linkedin-in,
about-2 .about-detail li a:hover .fa-behance {
    color: #101010;
}

/* ==========================================================================
   2.3 Project Area
   ========================================================================== */

.project-area.project-2 ul#mesonary-nav li.active-btn {
    color: #101010;
}

/* ==========================================================================
   2.4 Counter Area
   ========================================================================== */

.counter-area.counter-2:after {
    background-image: url("../img/background/counter-overlay.jpg");
    z-index: -1;
}

/* ==========================================================================
   2.5 Team Area
   ========================================================================== */

.team-area.team-2 .team-detail ul {
    background: #282828;
}

.team-area.team-2 .team-detail li:hover .fa-facebook-f,
.team-area.team-2 .team-detail li:hover .fa-twitter,
.team-area.team-2 .team-detail li:hover .fa-google-plus-g,
.team-area.team-2 .team-detail li:hover .fa-behance,
.team-area.team-2 .team-detail li:hover .fa-dribbble {
    color: #282828;
}

/* ==========================================================================
   2.6 Testimonial Area
   ========================================================================== */

.testimonial-area.testimonial-2 .carousel-control-prev-icon,
.testimonial-area.testimonial-2 .carousel-control-next-icon {
    background: #757575;
}

.testimonial-area.testimonial-2 .carousel-control-prev-icon:hover,
.testimonial-area.testimonial-2 .carousel-control-next-icon:hover {
    background: #434343;
}

/* ==========================================================================
   2.7 Blog Area
   ========================================================================== */

.blog-area.blog-2 .single-blog-lg:hover .shedule .fa-user,
.blog-area.blog-2 .single-blog-sm:hover .shedule .fa-user,
.blog-area.blog-2 .single-blog-lg:hover a.read-more-btn,
.blog-area.blog-2 .single-blog-sm:hover a.read-more-btn {
    color: #101010;
}

/* ==========================================================================
   2.8 Contact Area
   ========================================================================== */

.contact-area.contact-2 {
    /* background-image: url("../img/background/contact-bg-2.jpg"); */
    background-color: #77904f;
    z-index: 1;
}

.contact-area.contact-2:after {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    content: '';
    background-color: #148643;
    /* background-image: url("../img/background/contact-2-overlay.jpg"); */
    z-index: -1;
    opacity: .8;
}

input.rakika-btn:hover {
    color: #101010;
}

.contact-area.contact-2 .container {
    box-shadow: none;
}

.contact-area.contact-2 .contact-box .fa-map-marker-alt,
.contact-area.contact-2 .contact-box .fa-envelope,
.contact-area.contact-2 .contact-box .fa-phone {
    color: #101010;
}

/* ==========================================================================
   2.9 Footer
   ========================================================================== */

.footer-top.footer-top-2 {
    background-color: #f7f7f7;
}

.footer-top.footer-top-2 li a {
    border: 1px solid #a6a6a6;
}

.footer-top.footer-top-2 li a:hover {
    border: 1px solid #fff;
}

.footer-top.footer-top-2 li a .fa-facebook-f,
.footer-top.footer-top-2 li a .fa-twitter,
.footer-top.footer-top-2 li a .fa-linkedin-in,
.footer-top.footer-top-2 li a .fa-behance {
    color: #a6a6a6;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.footer-top.footer-top-2 li a:hover .fa-facebook-f,
.footer-top.footer-top-2 li a:hover .fa-twitter,
.footer-top.footer-top-2 li a:hover .fa-linkedin-in,
.footer-top.footer-top-2 li a:hover .fa-behance {
    color: #fff;
}

/* ==========================================================================
   ========================================================================== */

footer.footer-2 {
    background: #77904f;
}

footer.footer-2 p {
    color: #d3d3d3;
}

/* ==========================================================================
   3.0 Blog Details Area
   ========================================================================== */

/* ==========================================================================
   3.1 Blog Crumbs Area
   ========================================================================== */

section.hero-area.blog-1.crumbs {
    background: #03223f;
}

.hero-area.crumbs {
    height: 440px;
    background-image: url(../img/background/crumbs-bg.jpg);
    display: flex;
    align-items: center;
}

.hero-area.crumbs h2 {
    font-size: 35px;
    line-height: 45px;
}

.hero-area.crumbs p {
    padding: 20px 0 0;
    text-transform: capitalize;
    font-size: 18px;
    color: #dfdfdf;
}

.hero-area.crumbs p a {
    color: #dfdfdf;
    opacity: .9;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.hero-area.crumbs p a:hover {
    text-decoration: none;
    opacity: 1;
}

.hero-area.crumbs p span {
    font-weight: 500;
}

/* ==========================================================================
   3.2 Blog Detail Content
   ========================================================================== */

.blog-details-content {
    color: #4b4b4b;
}

.img-top {
    display: flex;
}

.img-top p {
    padding-right: 20px;
    text-transform: uppercase;
    line-height: 16px;
}

.img-top p:first-child {
    color: #000;
    text-transform: capitalize;
}

.blog-details-content .cover-img img {
    margin: 30px 0;
}

.img-bottom {
    display: flex;
    padding-bottom: 30px;
}

.img-bottom p {
    padding-right: 30px;
}


.img-bottom {
    display: flex;
    padding-bottom: 30px;
}

.img-bottom p {
    padding-right: 30px;
    color: #949292;
    line-height: 16px;
}

.quote {
    position: relative;
    border: 1px solid #8b8b8b;
    padding: 20px 10px;
    margin: 30px 0;
    text-align: center;
}

.quote .fa-quote-right,
.quote .fa-quote-left {
    font-size: 24px;
    color: #8b8b8b;
}

.quote .fa-quote-left {
    float: left;
    margin-right: 20px;
}

.quote .fa-quote-right {
    float: right;
    margin-left: 20px;
    margin-top: -20px;
}

.quote p {
    font-size: 16px;
    color: #4b4b4b;
    font-weight: 600;
}

.quote p span {
    display: block;
    padding: 20px;
}

.social-share {
    display: flex;
    padding: 40px 0;
}

.social-share h5 {
    font-size: 18px;
    text-transform: uppercase;
}

.blog-social .fa-facebook-f,
.blog-social .fa-twitter,
.blog-social .fa-google-plus-g,
.blog-social .fa-linkedin-in {
    color: #5c5c5c;
    font-size: 18px;
    margin: 0 5px;
}

.blog-social {
    margin-top: -5px;
    padding-left: 30px;
}

.prev-next-posts {
    display: flex;
    padding-bottom: 50px;
}

.prev,
.next {
    display: flex;
    align-items: center;
    width: 50%;
}

.next-prev-details a:hover {
    text-decoration: none;
}

.next {
    text-align: right;
}

.next img {
    margin-left: 15px;
}

.prev img {
    margin: 0;
    margin-right: 15px;
}

.next-prev-details a p {
    color: #6e6e6e;
    font-size: 14px;
    font-family: 'Lato', sans-serif;
    text-transform: capitalize;
}

.prev .next-prev-details a p {
    margin-left: 10px;
}

.next .next-prev-details a p {
    margin-right: 16px;
}

.prev .next-prev-details a:hover p,
.next .next-prev-details a:hover p {
    text-decoration: none;
}

.next-prev-details span {
    position: absolute;
    height: 10px;
    width: 10px;
    box-shadow: -2px 2px 0 #6e6e6e;
    margin-top: 8px;
}

.prev .next-prev-details span {
    transform: rotate(45deg);

}

.next .next-prev-details span {
    transform: rotate(225deg);
    margin-left: -16px;
}

.next-prev-details h5 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 28px;
    color: #4b4b4b;
}

.reply-form {
    position: relative;
}

.reply-form h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: capitalize;
    padding-bottom: 15px;
}

.reply-form h6 {
    font-size: 14px;
    color: #4b4b4b;
    padding-bottom: 20px;
}

.reply-form form label {
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.reply-form form textarea {
    width: 100%;
    resize: none;
    padding: 10px;
    height: 200px;
}

.reply-form form input[type="text"],
.reply-form form input[type="email"],
.reply-form form input[type="url"],
textarea {
    border: 1px solid #b4b4b4;
    padding: 10px;
    color: #4b4b4b;
    outline: none;
    margin: 5px 0 20px;
}

.reply-form form input[type="url"] {
    width: 100%;
}

.name,
.email {
    width: 48%;
    display: inline-block;
}

.name {
    margin-right: 28px;
}

.reply-form form input[type="text"],
.reply-form form input[type="email"] {
    width: 100%;
}

.reply-form form a.post-btn {
    display: inline-block;
    color: #fff;
    background: #000;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 30px;
    border-radius: 5px;
    border: 1px solid transparent;
    margin-top: 15px;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.reply-form form a.post-btn:hover {
    color: #000;
    background: transparent;
    border: 1px solid #000;
    text-decoration: none;
}

.subscrbe-follow {
    position: relative;
}

.subscrbe-follow h4,
.latest-post h4,
.catagories h4,
.archives h4 {
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    text-transform: capitalize;
    margin: 40px 0 15px;
}

.social-btn {
    position: relative;
}

.single-btn {
    position: relative;
    display: flex;
    width: 48%;
    float: left;
    margin: 5px 5px 0 0;
}

.single-btn h6 {
    color: #fff;
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 700;
    margin: 6px 0 0 5px;
}

.single-btn .fa-facebook-f,
.single-btn .fa-twitter,
.single-btn .fa-google-plus-g,
.single-btn .fa-linkedin-in,
.single-btn .fa-pinterest-p,
.single-btn .fa-tumblr {
    color: #fff;
    padding: 5px;
    height: 25px;
    width: 25px;
}

.single-btn.facebook {
    background: #5e7dbf;
}

.single-btn .fa-facebook-f {
    background: #3c5996;
}

.single-btn.twitter {
    background: #42b5fc;
}

.single-btn .fa-twitter {
    background: #25a2ef;
}

.single-btn.google-plus {
    background: #ef564e;
}

.single-btn .fa-google-plus-g {
    background: #d84038;
}

.single-btn.linkedin {
    background: #5db5e3;
}

.single-btn .fa-linkedin-in {
    background: #0077b5;
}

.single-btn.pinterest {
    background: #fa5b7c;
}

.single-btn .fa-pinterest-p {
    background: #e13155;
}

.single-btn.tumblr {
    background: #526d8f;
    margin-bottom: 30px;
}

.single-btn .fa-tumblr {
    background: #34465d;
}

.latest-details {
    position: relative;
    display: flex;
    margin-bottom: 30px;
    align-items: center;
}

section.blog-details-content .col-lg-3 .latest-details img {
    margin: 0;
    margin-right: 15px;
}

.latest-post {
    display: block;
}


.post-details h6 {
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase;
    color: #4b4b4b;
}


.post-details p {
    color: #7c7c7c;
    font-size: 14px;
    text-transform: uppercase;
}

.blog-subscribe {
    position: relative;
    background: #000;
    padding: 30px 22px;
    margin-bottom: 60px;
}

.blog-subscribe h3 {
    font-size: 24px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 700;
    padding-bottom: 10px;
}

.blog-subscribe h4 {
    color: #fff;
    font-size: 20px;
    text-transform: capitalize;
    padding-bottom: 40px;
}

.blog-subscribe input[type="email"] {
    border: 1px solid #fff;
    outline: none;
    padding: 10px;
    background: #555353;
    color: #fff;
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
}

.blog-subscribe input[type="email"]::placeholder {
    color: #fff;
}

.blog-subscribe a.subscribe-send {
    display: inline-block;
    background: #fff;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
    padding: 5px;
    width: 100%;
    border: 1px solid #fff;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.blog-subscribe a.subscribe-send:hover {
    text-decoration: none;
    color: #fff;
    background: none;
}

.catagories {
    position: relative;
    margin-bottom: 30px;
}

.catagories li,
.archives li {
    padding: 6px 0;
    line-height: 22px;
}

.catagories li a,
.archives li a {
    font-size: 18px;
    font-weight: 300;
    text-transform: capitalize;
    color: #6d6d6d;
    -webkit-transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

.catagories li a:hover,
.archives li a:hover {
    text-decoration: none;
    text-shadow: 0 0;
}

.archives {
    margin-bottom: 10px;
}

section.blog-details-content .col-lg-3 img {
    margin-top: 30px;
}


.blog-detail-heading {
    position: relative;
    padding-top: 60px;
}

.blog-detail-heading h3 {
    font-size: 25px;
    color: #101010;
    text-transform: capitalize;
    font-weight: 700;
    margin-bottom: 25px;
}

.blog-details-content .single-blog-sm img {
    margin-right: 14px;
}

.blog-details-content .single-blog-sm .fa-user,
.blog-details-content .single-blog-sm .fa-clock,
.blog-details-content .single-blog-sm .fa-calender-alt {
    font-size: 14px;
}

.blog-details-content .single-blog-sm .shedule h6 {
    margin: 0 0 0 3px;
}

.blog-details-content .single-blog-sm .shedule {
    margin-right: 12px;
}

.blog-details-content .single-blog-sm .blog-detail {
    padding: 0;
}

.blog-details-content .single-blog-sm .blog-detail h4 {
    padding: 15px 0;
}

.blog-details-content .single-blog-sm .blog-detail a.read-more-btn {
    padding-top: 15px;
}