html,
body {
    color: #777;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #212529;
}

a {
    color: #3c9fd4;
    text-decoration: none;
}

.sec-padd {
    padding: 20px 0;
}

.btn-primary {
    background-color: #3c9fd4;
    border-color: #3c9fd4;
}

    .btn-primary:hover {
        background-color: #006799;
        border-color: #006799;
    }

    .btn-check:focus + .btn-primary,
    .btn-primary:focus {
        color: #fff;
        background-color: #006799;
        border-color: #006799;
        box-shadow: none;
    }

.topnav-wrapper {
    padding: 10px 0;
    background-color: #006799;
    font-size: 12px;
}

    .topnav-wrapper a {
        color: #fff;
    }

.topnav-inner.top-right {
    text-align: right;
}

.topnav-inner ul {
    margin-bottom: 0;
}

    .topnav-inner ul li {
        list-style: none;
        display: inline;
        margin-right: 20px;
        color: #fff;
    }

.header-wrapper {
    background: #006799;
}

.cstm-navbar {
    height: 80px;
    z-index: 999;
    /* width     : 80%; */
    margin: auto;
    transition: all 0.2s ease-out;
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 8px 20px 0 rgb(0 0 0 / 10%);
}

.cstm-navbar .navbar-brand img {
    width: 140px;
    transition: all 0.2s ease-in-out;
}

.cstm-navbar .nav-item .nav-link {
    /* color: #666666; */
    padding: 15px;
    text-transform: uppercase;
}

.cstm-navbar .navbar-nav .nav-link.active,
.cstm-navbar .navbar-nav .show > .nav-link {
   
    color: #205d1f;
    border-bottom: 2px solid #1a5319;
}

.cstm-navbar .dropdown-menu {
    border: 0;
    border-radius: 0;
}

    .cstm-navbar .dropdown-menu .dropdown-item {
        color: rgba(0, 0, 0, .55);
    }

        .cstm-navbar .dropdown-menu .dropdown-item.active,
        .cstm-navbar .dropdown-menu .dropdown-item:active {
            background-color: transparent;
        }


/* .container-wrapper {
    padding: 80px 0;
} */

.banner-wrapper {
    position: relative;
    top: -39px;
}

    .banner-wrapper .carousel-caption {
        bottom: 90px;
        text-align: left;
    }

    .banner-wrapper h2 {
        color: #fff;
        font-size: 50px;
        margin-bottom: 50px;
        width: 70%;
        text-transform: uppercase;
    }

    .banner-wrapper p {
        width: 70%;
        font-size: 20px;
    }

.main-title {
    margin-bottom: 35px;
    position: relative;
}

.title-border {
    position: relative;
    top: -20px;
    display: block;
    width: 250px;
    border: 2px solid #1a5319;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 25px;
}

.about-wrapper {
    position: relative;
    min-height: 100vh;
}

    .about-wrapper .title-border {
        margin: 0 0 20px;
    }

.about-wrapper-iner {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.about-inner-count {
    border: 1px solid #eeeeee;
    padding: 20px;
    background-color: #00679a;
    width: 155px;
}

    .about-inner-count.light-bg {
        background-color: #3c9fd4;
    }

    .about-inner-count i {
        color: #fff;
        font-size: 26px;
        margin-bottom: 15px;
    }

    .about-inner-count h5 {
        color: #fff;
    }

    .about-inner-count p {
        color: #fff;
    }

.about-img img {
    /* height          : 400px; */
    /* width        : 400px; */
    position: absolute;
    right: 0;
}

.join-hand-wrapper {
    overflow-x: hidden;
}

    .join-hand-wrapper .title-border {
        margin: 0 0 20px;
    }

    .join-hand-wrapper .join-hand-img {
        display: flex;
        height: 100%;
    }

.whatWeDo-wrapper {
    background: #ecececbf;
}

    .whatWeDo-wrapper h2 {
        text-align: center;
    }

.whatWeDo-inner.item img {
    margin-bottom: 30px;
}

.whatWeDo-content {
    padding: 20px;
    position: relative;
}

    .whatWeDo-content h5 {
        color: #00679a;
    }

.whatWeDo-front-icon {
    position: absolute;
    top: -22px;
    right: 40%;
    /* left      : 50%; */
    background: #fff;
    padding: 10px;
    border-radius: 100%;
    border: 2px solid #00679a;
}

    .whatWeDo-front-icon img {
        width: 36px;
    }

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 285px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: #fff;
    color: black;
}

.flip-card-back {
    background-color: #fff;
    transform: rotateY(180deg);
    padding: 20px;
    text-align: left;
}

    .flip-card-back h5 {
        color: #00679a;
    }

    .flip-card-back img {
        width: 50px;
        margin-bottom: 30px;
    }

.news-inner {
    box-shadow: 0px 4px 12px rgb(0 0 0 / 10%);
    /* transition: transform .3s;
    border       : 3px solid #3c9fd4; */
}

.news-img-wrapper {
    width: 322px;
    overflow: hidden;
}

.news-inner img {
    transition: transform .3s;
}

.news-inner:hover img {
    transform: scale(1.2)
}

.news-inner .whatWeDo-content h6 {
    color: #00679a;
}


/* .news-wrapper .title-border {
    width: 162px;
} */

.news-wrapper .main-title {
    text-align: center;
}

.event-wrapper-item {
    display: flex;
    margin-bottom: 30px;
}

    .event-wrapper-item img {
        width: 300px;
        margin-right: 30px;
        border-radius: 24px;
        border: 5px solid #3c9fd4;
    }

.event-wrapper .main-title {
    text-align: center;
}

.join-hand-img {
    text-align: right;
}

.mission-wrapper .title-border {
    margin: 0 0 20px;
}

.mission-wrapper h2 {
    line-height: 50px;
}

.footer-wrapper {
    background-color: #006799;
    color: #cdcdcd;
}

    .footer-wrapper h1 {
        color: #fff;
    }

    .footer-wrapper h6 {
        margin-bottom: 30px;
        color: #fff;
    }

.footer-brand-link i {
    font-size: 30px;
    margin-right: 20px;
}


/* rough */

.timeline {
    position: relative;
    width: 100%;
    float: left;
    position: relative;
    padding: 0 0 60px 0;
    margin-left: 50px;
    margin-top: 10px;
}

    .timeline .photoholder {
        position: absolute;
        right: 0;
        display: none;
    }

    .timeline .collapse.in .photoholder {
        float: right;
        width: 30%;
        padding: 0px 10px;
        display: block;
    }

    .timeline .photoholder img {
        width: 100%;
        height: auto;
    }

    .timeline .glyphicon.glyphicon-one-fine-dot:before {
        content: '';
        font-size: 1.5em;
        color: #0039a6;
    }

    .timeline .line {
        position: absolute;
        width: 2px;
        display: block;
        top: 12px;
        bottom: 30px;
        margin-left: 30px;
        background: #3c9fd4;
    }

    .timeline .separator {
        border-top: 1px solid #0039a6;
        padding: 5px;
        padding-left: 40px;
        font-style: italic;
        font-size: 0.9em;
        margin-left: 30px;
    }

    .timeline .line::before {
        top: -2px;
    }

    .timeline .line::after {
        bottom: -2px;
    }

    .timeline .line::before,
    .timeline .line::after {
        content: '';
        position: absolute;
        left: -6px;
        width: 0;
        height: 0;
        display: block;
        border-radius: 50%;
        background: #0039a6;
    }

    .timeline .accordion .accordion-header .icon {
        position: absolute;
        left: 11px;
        width: 35px;
        height: 35px;
        padding: 0px;
        border-radius: 50%;
        text-align: center;
        float: left;
        color: #3c9fd4;
    }

        .timeline .accordion .accordion-header .icon img {
            padding: 4px;
            background: #3c9fd4;
            border-radius: 100%;
        }

.mission-wrapper .accordion-item {
    border: 0;
    margin-left: 45px;
}

.mission-wrapper .accordion-button {
    background-color: transparent;
    color: #a4a4a4;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 40px;
    padding-top: 0;
    -webkit-transition: color .5s, font-size .5s;
    -moz-transition: color .5s, font-size .5s;
    -o-transition: color .5s, font-size .5s;
    transition: color .5s, font-size .5s;
}

    .mission-wrapper .accordion-button:focus {
        border: 0;
        box-shadow: none;
    }

    .mission-wrapper .accordion-button:not(.collapsed) {
        color: #3c9fd4;
        font-size: 30px;
        box-shadow: none;
        padding-bottom: 0;
        -webkit-transition: color .5s, font-size .5s;
        -moz-transition: color .5s, font-size .5s;
        -o-transition: color .5s, font-size .5s;
        transition: color .5s, font-size .5s;
    }

.parallax {
    /* The image used */
    background-image: url("../images/fundraishing-bg2.png");
    /* Set a specific height */
    min-height: 500px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
}

    .parallax h2 {
        color: #fff;
    }

.animate__animated {
    --animate-duration: 2s;
}


/* about page */

.breadcrumb-banner {
    background: url(../images/bg-3.png) no-repeat 50% 50%;
    background-size: cover;
    height: 313px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -39px;
}

.breadcrumb-wrapper {
    text-align: center;
}

    .breadcrumb-wrapper h2 {
        font-size: 50px;
        color: #fff;
    }

    .breadcrumb-wrapper .breadcrumb {
        justify-content: center;
    }

    .breadcrumb-wrapper .breadcrumb-item.active {
        color: #fff;
    }

.about-first-wrapper .title-border {
    margin-left: 0;
}

.about-card {
    box-shadow: 0px 4px 12px rgb(0 0 0 / 10%);
    margin-top: 30px;
}

    .about-card img {
        width: 50px;
        margin-bottom: 30px;
    }

.about-card-inner h5 {
    color: #3c9fd4;
}

.partners-wrapper .main-title {
    text-align: center;
}

.partners-wrapper .sub-title {
    text-align: center;
    width: 50%;
    margin: 0 auto;
}

.partners-wrapper .sponsor-img {
    margin-top: 50px;
}

    .partners-wrapper .sponsor-img img {
        height: 80px;
    }

.feature {
    position: relative;
    height: 500px;
    /* margin  : 50px 0; */
}

    .feature:before {
        position: absolute;
        content: "";
        left: 0px;
        right: 0px;
        top: 0px;
        width: 100%;
        height: 70%;
        background: url(../images/banner.jpg) no-repeat;
        background-size: cover;
    }

.feature-wrap {
    position: absolute;
    background: #fff;
    bottom: 0;
    width: 90%;
    left: 55px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
}

.feature-inner {
    background: #fff;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

    .feature-inner img {
        width: 50px;
        margin-bottom: 20px;
    }


/* .target-wrapper {
    background-color: #ecececbf;
} */

.target-inner {
    text-align: center;
    /* margin-bottom: 20px; */
    box-shadow: 0px 4px 12px rgb(0 0 0 / 10%);
    background-color: #00679a;
    color: #fff;
    border-radius: 0;
}

    .target-inner.light-bg {
        background-color: #3c9fd4;
    }

    .target-inner img {
        height: 60px;
        margin: auto;
        margin-bottom: 20px;
        padding: 5px;
        background-color: #fff;
    }

    .target-inner h6 {
        margin-bottom: 20px;
        color: #fff;
    }


/* Contact page */

.contact-info .title-border {
    margin-left: 0;
}

.contact-form {
    background: linear-gradient(to bottom right, #eff0f3, #e5e6eb);
    box-shadow: 3px 3px 6px #bfc3cf, -3px -3px 6px #fff;
    padding: 40px;
}

    .contact-form label {
        position: relative;
        display: block;
    }

        .contact-form label input,
        .contact-form label textarea {
            box-sizing: border-box;
            display: block;
            border: none;
            padding: 15px;
            width: 100%;
            margin-bottom: 20px;
            outline: none;
            transition: all 0.2s ease-in-out;
        }

            .contact-form label input::placeholder,
            .contact-form label textarea::placeholder {
                transition: all 0.2s ease-in-out;
                color: #999;
            }

            .contact-form label input:focus,
            .contact-form label input.populated,
            .contact-form label textarea:focus,
            .contact-form label textarea.populated {
                padding-bottom: 7px;
                padding-top: 23px;
            }

                .contact-form label input:focus::placeholder,
                .contact-form label input.populated::placeholder,
                .contact-form label textarea:focus::placeholder,
                .contact-form label textarea.populated::placeholder {
                    color: transparent;
                }

                .contact-form label input:focus + span,
                .contact-form label input.populated + span,
                .contact-form label textarea.focus + span,
                .contact-form label textarea.populated + span {
                    opacity: 1;
                    top: 7px;
                    left: 15px;
                    font-size: 13px;
                }

        .contact-form label span {
            color: var(--main-color-two);
            position: absolute;
            top: 0px;
            left: 20px;
            opacity: 0;
            transition: all 0.2s ease-in-out;
        }

    .contact-form button {
        width: 100%;
        font-size: 13px;
    }

.contact-inner {
    margin-bottom: 20px;
    align-items: center;
}

    .contact-inner p {
        margin-bottom: 0;
    }

    .contact-inner i {
        font-size: 26px;
        margin-right: 15px;
        color: #3c9fd4;
    }


/* Blog page */

.blog-content-main h4 {
    margin-top: 30px;
}

.blog-wrapper .blog-date {
    display: flex;
    margin-bottom: 30px;
}

.blog-date-inner {
    margin-right: 20px;
}

    .blog-date-inner i {
        margin-right: 10px;
    }

.blog-sidebar {
    margin-left: 30px;
}

.sidebar__search {
    position: relative;
    display: block;
}

.sidebar__search-form {
    position: relative;
    color: #fff;
}

    .sidebar__search-form input[type="search"] {
        display: block;
        border: none;
        outline: none;
        background-color: #006799;
        color: #fff;
        font-size: 18px;
        font-weight: 400;
        padding-left: 50px;
        height: 60px;
        width: 100%;
        padding-right: 80px;
    }

        .sidebar__search-form input[type="search"]::placeholder {
            color: #fff;
        }

    .sidebar__search-form button[type="submit"] {
        background-color: transparent;
        color: #fff;
        font-size: 22px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 72px;
        outline: none;
        border: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0;
    }

.latest-post {
    margin-top: 30px;
    background: #ecececbf;
    padding: 20px;
    box-shadow: 0px 4px 12px rgb(0 0 0 / 10%);
}

.latest-post-inner {
    display: flex;
    margin-bottom: 30px;
}

    .latest-post-inner p {
        margin-bottom: 0;
    }

    .latest-post-inner img {
        width: 100px;
        margin-right: 30px;
    }


/* gallery starts */


/* .content {
    background-color: white;
    padding: 10px;
}

.show {
    display: block;
} */

.gallery-tab {
    margin-top: 30px;
}

.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}

.filter-button {
    /* font-size: 18px; */
    border: 1px solid #006799;
    border-radius: 5px;
    text-align: center;
    color: #006799;
    margin-bottom: 30px;
}

    .filter-button:hover {
        /* font-size: 18px; */
        border: 1px solid #006799;
        border-radius: 5px;
        text-align: center;
        color: #ffffff;
        background-color: #006799;
    }

.btn-default:active .filter-button:active {
    background-color: #006799;
    color: white;
}

.port-image {
    width: 100%;
}

.gallery_product {
    margin-bottom: 30px;
}

    .gallery_product img {
        width: 365px;
        height: 365px;
    }

.gallery-modal .modal-content {
    background-color: transparent;
    border: 0;
}

.gallery-modal .modal-header {
    border-bottom: 0;
}


/* Team page starts */

.team-wrapper .title-border {
    margin-left: 0;
}

.our-team {
    padding: 20px 15px 30px;
    /* background: black; */
    border-radius: 15px;
    text-align: center;
    border: 1px solid #006799;
    margin-bottom: 30px;
}

    .our-team:hover {
        transition: .5s;
        box-shadow: 0px 1px 5px 0px #d1d1d1;
    }

    .our-team .pic {
        display: inline-block;
        width: 150px;
        height: 150px;
        background: #006799;
        padding: 5px;
        margin-bottom: 25px;
        transition: all 0.5s ease 0s;
        border-radius: 50%;
    }

    .our-team:hover .pic {
        background: #3c9fd4;
        border-radius: 50%;
    }

.pic img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

.our-team .title {
    display: block;
    font-size: 20px;
    font-weight: 600;
    /* color         : #fff; */
    /* text-transform: uppercase; */
    margin: 0 0 7px 0;
}

.our-team .post {
    display: block;
    font-size: 15px;
    color: #006799;
    text-transform: capitalize;
    margin-bottom: 15px;
}

.our-team .social {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .our-team .social li {
        display: inline-block;
        margin-right: 5px;
    }

        .our-team .social li a {
            display: block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            border-radius: 50%;
            font-size: 15px;
            color: #006799;
            border: 1px solid #006799;
            transition: all 0.5s ease 0s;
        }

.our-team:hover .social li a {
    background: #006799;
    color: #fff;
}

.team1 {
    border: 0;
}

    .team1:hover {
        box-shadow: none;
    }

    .team1 .pic {
        width: 250px;
        height: 250px;
    }

        .team1 .pic img {
            width: 250px;
            height: 250px;
        }


/* tree page starts */


/* It's supposed to look like a tree diagram */

.tree {
    width: 100%;
}

    .tree,
    .tree ul,
    .tree li {
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

.tree {
    margin: 0 0 1em;
    text-align: center;
}

    .tree,
    .tree ul {
        display: table;
    }

        .tree ul {
            width: 100%;
        }

        .tree li {
            display: table-cell;
            padding: .5em 0;
            vertical-align: top;
        }


            /* _________ */

            .tree li:before {
                outline: solid 1px #666;
                content: "";
                left: 0;
                position: absolute;
                right: 0;
                top: 0;
            }

            .tree li:first-child:before {
                left: 50%;
            }

            .tree li:last-child:before {
                right: 50%;
            }

        .tree code,
        .tree span {
            border: solid .1em #66666636;
            border-radius: .2em;
            display: inline-block;
            margin: 0 .2em .5em;
            padding: .5em .5em;
            position: relative;
        }


        /* If the tree represents DOM structure */

        .tree code {
            font-family: monaco, Consolas, 'Lucida Console', monospace;
        }


            /* | */

            .tree ul:before,
            .tree code:before,
            .tree span:before {
                outline: solid 1px #666;
                content: "";
                height: .5em;
                left: 50%;
                position: absolute;
            }

        .tree ul:before {
            top: -.5em;
        }

        .tree code:before,
        .tree span:before {
            top: -.55em;
        }


        /* The root node doesn't connect upwards */

        .tree > li {
            margin-top: 0;
        }

            .tree > li:before,
            .tree > li:after,
            .tree > li > code:before,
            .tree > li > span:before {
                outline: none;
            }

        .tree li img {
            height: 100px;
            width: 100px;
        }

.subtitle-txt {
    width: 60%;
    margin: 0 auto 50px;
    text-align: center;
}

.tree h6 {
    color: #00679a;
    margin: 0;
}

.map-wrapper .title-border {
    margin-left: 0;
}

.map-title {
    margin-left: 110px;
}

.mission-vision-title {
    margin: auto;
    width: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
}

.mission-vision-wrapper {
    overflow: hidden;
    position: relative;
    padding: 100px 0 70px;
    background: #f8f8f8;
}

    .mission-vision-wrapper:before {
        content: '';
        position: absolute;
        width: 1000px;
        transform: translate(-50%, -50%) rotate(45deg);
        height: 886px;
        left: 10%;
        top: 50%;
        background: #80af81;
        z-index: 0;
    }

    .mission-vision-wrapper .target-inner {
        text-align: center;
        margin-bottom: 20px;
        box-shadow: 0px 4px 12px rgb(0 0 0 / 10%);
        background-color: #fff;
        color: #212529;
        border-radius: 0;
        border: 2px solid #eee;
        padding: 30px;
    }

        .mission-vision-wrapper .target-inner h6 {
            color: #212529;
        }

.jon-us {
    height: 700px;
}

    .jon-us:before {
        background-attachment: fixed;
    }

    .jon-us .feature-wrap {
        background: linear-gradient(to right, #006acc, #01d5ff);
        color: #fff;
    }

    .jon-us .main-title {
        color: #fff;
    }

/* test */
.neo-values-wrapper {
    background: url(../images/about-style1.jpg);
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-attachment: fixed;
    /* color                : #fff; */
}

    .neo-values-wrapper:before {
        content: '';
        position: absolute;
        background-color: #f8f8f8f0;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

.neo-values-inner {
    /* position        : fixed;
    top             : -30px;
    left            : 0; */
    width: 100vh;
    height: calc(100vw);
    overflow: scroll;
    transform: rotate(-90deg);
    transform-origin: center calc(50vh);
    position: absolute;
    top: -20px;
}

    .neo-values-inner .child {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 1em auto;
        /* padding              : 2em; */
        width: 490px;
        height: 500px;
        transform: rotate(90deg);
        /* border               : 1px solid #333;
    box-shadow              : 3px 3px 6px rgba(51, 51, 51, 0.3);
    background-color        : #00000029;
    color                   : #fff; */
        position: relative;
        /* text-align           : center; */
    }

        .neo-values-inner .child .section-title {
            position: absolute;
            top: -30px;
            background: #067e8d;
            color: #fff;
            width: 400px;
            padding: 20px;
            text-align: center;
        }

/* .neo-values-inner .child:before {
    content            : "";
    position           : absolute;
    height             : 80px;
    width              : 80px;
    top                : 0;
    left               : 0;
    border             : 1px solid #fff;
    border-bottom-color: transparent;
    border-right-color : transparent;
    -webkit-transition : .5s ease-in-out;
    -moz-transition    : .5s ease-in-out;
    transition         : .5s ease-in-out;
}

.neo-values-inner .child:after {
    content           : "";
    position          : absolute;
    height            : 80px;
    width             : 80px;
    bottom            : 0;
    right             : 0;
    border            : 1px solid #fff;
    border-top-color  : transparent;
    border-left-color : transparent;
    -webkit-transition: .5s ease-in-out;
    -moz-transition   : .5s ease-in-out;
    transition        : .5s ease-in-out;
} */

.neo-values-content:before {
    display: none;
}

.neo-values-inner .child:hover .neo-values-inner .child:before {
    border: 5px solid #ffffff;
    width: 70px;
    border-bottom-color: transparent;
    border-right-color: transparent;
}

.neo-values-content:after {
    display: none;
}

.child.neo-values-content {
    height: 800px;
    border: 0;
    box-shadow: none;
    text-align: left;
    align-items: start;
    background-color: transparent;
    /* color           : #fff; */
}

.post {
    /* flex              : 1; */
    overflow: hidden;
    background: white;
    height: 300px;
    -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
    margin-right: 1em;
    margin-bottom: 1em;
}

    .post:hover {
        -moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    }

        .post:hover .image {
            opacity: 0.8;
        }

    .post .image,
    .post .content {
        display: inline-block;
        position: relative;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -webkit-transition: all 500ms ease;
        transition: all 500ms ease;
    }

    .post .image {
        background-image: url(../images/about.jpg);
        float: left;
        width: 50%;
        height: 100%;
        background-size: cover;
        background-position: center center;
    }

        .post .image .time {
            background: rgba(255, 255, 255, 0.5);
            width: 65%;
            text-align: center;
            padding: 0.5em 0;
            color: #1a5319;
        }

            .post .image .time .date {
                font-weight: bolder;
            }

            .post .image .time .month {
                font-size: 0.7rem;
            }

    .post .content {
        padding: 1em;
        width: 50%;
        -moz-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
        box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
        height: 200px;
    }

        .post .content:before {
            content: '';
            position: absolute;
            background: white;
            width: 10px;
            height: 10px;
            top: 20%;
            left: -5px;
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            -moz-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
            box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
        }

        /* .post .content h1 {
    font-weight  : 600;
    line-height  : 2;
    white-space  : nowrap;
    overflow     : hidden;
    text-overflow: ellipsis;
}

.post .content p {
    font-weight  : 300;
    font-size    : 0.7rem;
    line-height  : 1.5;
    margin-bottom: 0.5em;
    font-family  : 'Merriweather', sans-serif;
} */

        .post .content .meta .icon-comment {
            font-size: 0.7em;
            line-height: 2;
            margin-top: auto;
        }

/* test */

.about-img-wrap .top-img {
    text-align: left;
}

    .about-img-wrap .top-img img {
        box-shadow: 3px 3px 6px #bfc3cf, -3px -3px 6px #fff;
        ;
        border-radius: 30px;
    }

.about-img-wrap .bottom-img {
    text-align: right;
    margin-top: -230px;
}

    .about-img-wrap .bottom-img img {
        border: 10px solid #fff;
        box-shadow: 3px 3px 6px #bfc3cf, -3px -3px 6px #fff;
        border-radius: 30px;
    }

.icon-box {
    background: #26cdff;
    font-size: 2rem;
    color: #ffffff;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    text-align: CENTER;
    border-radius: 50%;
    margin-right: 1rem;
}

.box-wrapper {
    background: linear-gradient(to bottom right, #eff0f3, #e5e6eb);
    padding: 1rem;
    border-radius: 50px;
    box-shadow: 3px 3px 6px #bfc3cf, -3px -3px 6px #fff;
}

.team-inner {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 30px;
}

.team-pic {
    width: 25%;
    border-radius: 1.5rem;
    overflow: hidden;
}

    .team-pic img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.team-content {
    padding: 3.5rem;
    width: 75%;
    border-radius: 1.5rem;
    justify-content: center;
    flex-direction: column;
    display: flex;
    background-color: rgb(219 234 254);
}
.hover14 img {
	position: relative;
}
.hover14 img::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover14 img:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}