﻿
* {
    box-sizing: border-box;
}

.hero-blog-section {
    max-width: 1250px;
    margin: auto;
    margin-top: 40px;
}

.hero-blog-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.h-blog-text-container {
    width: 45%;
}

.h-blog-img-container {
    width: 45%;
}

    .h-blog-img-container > img {
        width: 100%;
    }

.blog-header {
    margin-top: 5.5rem;
    text-align: center;
    font-family: Arial,sans-serif !important;
    text-align: left;
    margin-left: 4%;
}

@media screen and (min-device-width:1290px) {
    .blog-header {
        margin-left: 11%;
    }
}

.blog-body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #fff;
    font-family: Arial,sans-serif !important;
    color: #10182f;
    height: 100%;
    margin-top: 3.5rem;
}

.blog-container {
    display: flex;
    width: 90%;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.blog-card {
    margin: 10px;
    margin-bottom: 40px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    width: 30%;
    border-bottom: 5px solid #3051AB;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.blog-card-header img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    min-height: 250px;
}

.tag {
    background: #cccccc;
    border-radius: 50px;
    font-size: 12px;
    margin: 0;
    color: #fff;
    padding: 2px 10px;
    text-transform: uppercase;
    cursor: pointer;
}

.tag-blue {
    background-color: #3051AB;
}

.tag-green {
    background-color: #189E59;
}


.blog-card-body p {
    margin: 0 0 40px;
    color: #08123b;
}

.user {
    display: flex;
    margin-top: auto;
}

    .user img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }

.user-info h5 {
    margin: 0;
}

.user-info small {
    color: #545d7a;
}

button {
    border: 2px solid #3051AB;
    outline: none;
    inset: none;
    outline-offset: none;
    background-color: #3051Ab;
    color: aliceblue
}

.blog-card__info > p > a {
    color: #000000;
    margin: 5px;
}

.btn-container {
    margin-top: 40px;
}

@media screen and (max-device-width:768px) {
    .blog-header {
        text-align: center;
    }

    .blog-card {
        box-shadow: none;
        width: 100%;
    }

    .hero-blog-container {
        flex-direction: column;
    }

    .h-blog-img-container {
        width: 100%;
        margin: auto;
        /*     order:1;*/
    }

    .h-blog-text-container {
        width: 90%;
        /* margin:auto;*/
        /*order:2;*/
        /*  margin-top:20px;
        margin-bottom:30px;*/
    }

    .btn-container {
        margin-top: 30px;
    }

    .blog-container {
        width: 94%;
    }
}

@media screen and (min-device-width:768px) and (max-device-width:990px) {
    .blog-card {
        width: 45%;
    }
}

/*------------------------------------*/


body {
    background: #fff;
}

* {
}

.readmore-btn {
    background: linear-gradient(0deg, rgb(239, 80, 22) 0%, rgb(255, 255, 255) 100%);
    color: #fff;
    border: 1px solid #3051Ab;
    border-radius: 10px;
    padding: 10px;
}

    .readmore-btn:hover {
        opacity: .90;
    }

.blog-h-container {
    width: 90%;
    margin: auto;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.blog-p {
    opacity: 95%;
    color: #08123B;
}

@media screen and (max-device-width:768px) {
    .blog-h-container {
        width: 100%;
        margin: 0px;
        box-shadow: none;
    }

    .blog-body {
        margin-top: 0em;
    }

    .h-blog-img-container img {
        max-width: 90%;
        margin-left: 5%;
    }
}

@media screen and (max-device-width:768px) {
    .card__background--main {
        transform: scale(1.2)
    }

    .card__background--wrapper {
        height: 100%;
    }

    .h-wrapper {
        height: 50%;
    }

    .h-blog-text-container {
        margin-left: 5%;
        margin-top: -20%;
        align-content: center;
    }

    .h-blog-img-container img {
        border-radius: 10px;
        overflow: hidden;
    }
}

@media screen and (min-device-width:768px) {
    .card__background--main {
        transform: scale(1.2)
    }

    .card__background--wrapper {
        height: 100%;
    }

    .h-blog-text-container {
        margin-left: 20%;
        text-align: center;
    }

    .h-blog-img-container img {
        max-width: 100%;
        /*margin-left: 5%;*/
        border-radius: 10px;
        overflow: hidden;
    }

    .blog-header {
        text-align: center;
        margin-left: 35%;
    }
}

@media (min-width: 992px) {
    .reverse-order {
        display: flex;
        flex-direction: column;
    }

        .reverse-order .card:nth-child(1) {
            order: 3;
        }

        .reverse-order .card:nth-child(2) {
            order: 1;
        }

        .reverse-order .card:nth-child(3) {
            order: 2;
        }

    .reverse-order1 {
        display: flex;
        flex-direction: column;
    }

        .reverse-order1 .card:nth-child(1) {
            order: 2;
        }

        .reverse-order1 .card:nth-child(2) {
            order: 3;
        }

        .reverse-order1 .card:nth-child(3) {
            order: 1;
        }
}

body {
    margin-top: 20px;
}

.blog-listing {
    padding-top: 30px;
    padding-bottom: 30px;
}

.gray-bg {
    background-color: #f5f5f5;
}
/* Blog 
---------------------*/
.blog-grid {
    box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .blog-grid .blog-img {
        position: relative;
    }

        .blog-grid .blog-img .date {
            position: absolute;
            background: #ff4500;
            color: #ffffff;
            padding: 8px 15px;
            left: 10px;
            top: 10px;
            border-radius: 4px;
        }

            .blog-grid .blog-img .date span {
                font-size: 22px;
                display: block;
                line-height: 22px;
                font-weight: 700;
            }

            .blog-grid .blog-img .date label {
                font-size: 14px;
                margin: 0;
            }

    .blog-grid .blog-info {
        padding: 20px;
    }

        .blog-grid .blog-info h5 {
            font-size: 22px;
            font-weight: 700;
            margin: 0 0 10px;
        }

            .blog-grid .blog-info h5 a {
                color: #20247b;
            }

        .blog-grid .blog-info p {
            margin: 0;
        }

        .blog-grid .blog-info .btn-bar {
            margin-top: 20px;
        }


/* Blog Sidebar
-------------------*/
.blog-aside .widget {
    box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 100%;
    display: inline-block;
    vertical-align: top;
}

.blog-aside .widget-body {
    padding: 15px;
}

.blog-aside .widget-title {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

    .blog-aside .widget-title h3 {
        font-size: 20px;
        font-weight: 700;
        color: orangered;
        margin: 0;
    }

.blog-aside .widget-author .media {
    margin-bottom: 15px;
}

.blog-aside .widget-author p {
    font-size: 16px;
    margin: 0;
}

.blog-aside .widget-author .avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
}

.blog-aside .widget-author h6 {
    font-weight: 600;
    color: #20247b;
    font-size: 22px;
    margin: 0;
    padding-left: 20px;
}

.blog-aside .post-aside {
    margin-bottom: 15px;
}

    .blog-aside .post-aside .post-aside-title h5 {
        margin: 0;
    }

    .blog-aside .post-aside .post-aside-title a {
        font-size: 18px;
        color: #20247b;
        font-weight: 600;
    }

    .blog-aside .post-aside .post-aside-meta {
        padding-bottom: 10px;
    }

        .blog-aside .post-aside .post-aside-meta a {
            color: #6F8BA4;
            font-size: 12px;
            text-transform: uppercase;
            display: inline-block;
            margin-right: 10px;
        }

.blog-aside .latest-post-aside + .latest-post-aside {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 15px;
}

.blog-aside .latest-post-aside .lpa-right {
    width: 90px;
}

    .blog-aside .latest-post-aside .lpa-right img {
        border-radius: 3px;
    }

.blog-aside .latest-post-aside .lpa-left {
    padding-right: 15px;
}

.blog-aside .latest-post-aside .lpa-title h5 {
    margin: 0;
    font-size: 15px;
}

.blog-aside .latest-post-aside .lpa-title a {
    color: #20247b;
    font-weight: 600;
}

.blog-aside .latest-post-aside .lpa-meta a {
    color: #6F8BA4;
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 10px;
}

.tag-cloud a {
    padding: 4px 15px;
    font-size: 13px;
    color: #ffffff;
    background: #20247b;
    border-radius: 3px;
    margin-right: 4px;
    margin-bottom: 4px;
}

    .tag-cloud a:hover {
        background-color: orangered;
    }

.blog-single {
    padding-top: 30px;
    padding-bottom: 30px;
}

.article {
    box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
    padding: 15px;
    margin: 15px 0 30px;
}

    .article .article-title {
        padding: 15px 0 20px;
    }
.article-title h4 {
    color:#000;
}
.article .article-title h6 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

            .article .article-title h6 a {
                text-transform: uppercase;
                color: orangered;
                border-bottom: 1px solid #ff4500;
            }

        .article .article-title h2 {
            color: #20247b;
            font-weight: 600;
        }

        .article .article-title .media {
            padding-top: 15px;
            border-bottom: 1px dashed #ddd;
            padding-bottom: 20px;
        }

            .article .article-title .media .avatar {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                overflow: hidden;
            }

            .article .article-title .media .media-body {
                padding-left: 8px;
            }

                .article .article-title .media .media-body label {
                    font-weight: 600;
                    color: #ff4500;
                    margin: 0;
                }

                .article .article-title .media .media-body span {
                    display: block;
                    font-size: 12px;
                }

    .article .article-content h1,
    .article .article-content h2,
    .article .article-content h3,
    .article .article-content h4,
    .article .article-content h5,
    .article .article-content h6 {
        color: #20247b;
        font-weight: 600;
        margin-bottom: 15px;
    }

    .article .article-content blockquote {
        max-width: 600px;
        padding: 15px 0 30px 0;
        margin: 0;
    }

        .article .article-content blockquote p {
            font-size: 20px;
            font-weight: 500;
            color: #ff4500;
            margin: 0;
        }

        .article .article-content blockquote .blockquote-footer {
            color: #20247b;
            font-size: 16px;
        }

            .article .article-content blockquote .blockquote-footer cite {
                font-weight: 600;
            }

    .article .tag-cloud {
        padding-top: 10px;
    }

.article-comment {
    box-shadow: 0 0 30px rgba(31, 45, 61, 0.125);
    border-radius: 5px;
    overflow: hidden;
    background: #ffffff;
    padding: 20px;
}

    .article-comment h4 {
        color: #20247b;
        font-weight: 700;
        margin-bottom: 25px;
        font-size: 22px;
    }

img {
    max-width: 100%;
}

img {
    vertical-align: middle;
    border-style: none;
}

/* Contact Us
---------------------*/
.contact-name {
    margin-bottom: 30px;
}

    .contact-name h5 {
        font-size: 22px;
        color: #20247b;
        margin-bottom: 5px;
        font-weight: 600;
    }

    .contact-name p {
        font-size: 18px;
        margin: 0;
    }

.social-share a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
    margin-right: 10px;
}

.social-share .dribbble {
    box-shadow: 0 8px 30px -4px rgba(234, 76, 137, 0.5);
    background-color: #ea4c89;
}

.social-share .behance {
    box-shadow: 0 8px 30px -4px rgba(0, 103, 255, 0.5);
    background-color: #0067ff;
}

.social-share .linkedin {
    box-shadow: 0 8px 30px -4px rgba(1, 119, 172, 0.5);
    background-color: #0177ac;
}

.contact-form .form-control {
    border: none;
    border-bottom: 1px solid #20247b;
    background: transparent;
    border-radius: 0;
    padding-left: 0;
    box-shadow: none !important;
}

    .contact-form .form-control:focus {
        border-bottom: 1px solid #ff4500;
    }

    .contact-form .form-control.invalid {
        border-bottom: 1px solid #ff0000;
    }

.contact-form .send {
    margin-top: 20px;
}

@media (max-width: 767px) {
    .contact-form .send {
        margin-bottom: 20px;
    }
}

.section-title h2 {
    font-weight: 700;
    color: #20247b;
    font-size: 45px;
    margin: 0 0 15px;
    border-left: 5px solid #ff4500;
    padding-left: 15px;
}

.section-title {
    padding-bottom: 45px;
}

.contact-form .send {
    margin-top: 20px;
}

.px-btn {
    padding: 0 50px 0 20px;
    line-height: 60px;
    position: relative;
    display: inline-block;
    color: #20247b;
    background: none;
    border: none;
}

    .px-btn:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        border-radius: 30px;
        background: transparent;
        border: 1px solid rgba(252, 83, 86, 0.6);
        border-right: 1px solid transparent;
        -moz-transition: ease all 0.35s;
        -o-transition: ease all 0.35s;
        -webkit-transition: ease all 0.35s;
        transition: ease all 0.35s;
        width: 60px;
        height: 60px;
    }

    .px-btn .arrow {
        width: 13px;
        height: 2px;
        background: currentColor;
        display: inline-block;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        right: 25px;
    }

        .px-btn .arrow:after {
            width: 8px;
            height: 8px;
            border-right: 2px solid currentColor;
            border-top: 2px solid currentColor;
            content: "";
            position: absolute;
            top: -3px;
            right: 0;
            display: inline-block;
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

.article-content h4 {
    font-weight: bold !important;
}

.article-content a {
    text-decoration: none !important;
}

.blog_founder {

}

.blogs .card{
    height: 100%
}

.article-content table h3{
    font-size: 0.8rem;
}

.article-content table colgroup col,
.article-content table td {
    white-space: nowrap;
    width: 1%;
}