.testimonial .pic {
    width: 22%;
    padding: 20px 0;
    margin: 0 6% 0 2%;
    float: left;
    position: relative;
    z-index: 1;
}

.testimonial .pic:before,
.testimonial .pic:after {
    content: "";
    width: 130px;
    height: 150px;
    background: #e1c37d;
    position: absolute;
    z-index: -1;
}

.testimonial .pic:before {
    top: 0;
    right: -20px;
}

.testimonial .pic:after {
    bottom: 0;
    left: -20px;
}

.testimonial .pic img {
    width: 100%;
    height: auto;
    border: 3px solid #e1c37d;
}

.testimonial .testimonial-content {
    width: 70%;
    float: right;
}

.testimonial .title {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    padding-top: 65px;
    padding-left: 15px;
}

.testimonial .post {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 27px;
    color: #fff;
    text-transform: capitalize;
    margin-bottom: 25px;
    padding-left: 15px;
}

.testimonial .description {
    font-size: 16px;
    color: #fff;
    padding: 0 15px;
    margin: 0;
    position: relative;
}

.testimonial .description:before,
.testimonial .description:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 17px;
    color: #e1c37d;
    position: relative;
}

.testimonial .description:before {
    content: "\f10d";
    margin-right: 5px;
    top: 0;
    left: 0;
}

.testimonial .description:after {
    content: "\f10e";
    margin-left: 5px;
    position: relative;
    bottom: 0;
    right: 0;
}

@media only screen and (max-width: 990px) {
    .testimonial {
        text-align: center;
    }
    .testimonial .pic {
        width: 200px;
        margin: 0 auto;
        float: none;
    }
    .testimonial .pic:before,
    .testimonial .pic:after {
        width: 80px;
        height: 100px;
    }
    .testimonial .testimonial-content {
        width: 100%;
        float: none;
    }
    .testimonial .title {
        padding: 15px 0 0 0;
    }
    .testimonial .post {
        padding: 0;
        margin-bottom: 10px;
    }
}

.counter {
    font-family: "Nunito Sans", sans-serif;
    text-align: center;
    height: 210px;
    width: 210px;
    padding: 7px 4px 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.counter:before {
    content: "";
    background-color: #fff;
    height: 157px;
    width: 157px;
    border-radius: 15px;
    border: 5px solid #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1) inset;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
}

.counter .counter-icon {
    color: #fff;
    background: linear-gradient(#f83f83, #e2056f);
    line-height: 70px;
    font-size: 35px;
    height: 70px;
    width: 70px;
    margin: 0 auto 8px;
    border-radius: 19px 0 50px;
    transform: rotate(45deg);
}

.counter .counter-icon i {
    transform: rotate(-45deg);
}

.counter .counter-value {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 0 13px 0;
    display: block;
}

.counter h3 {
    color: #fff;
    background: linear-gradient(#f83f83, #e2056f);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: capitalize;
    padding: 10px 5px;
    margin: 0;
    border-radius: 0 0 20px 20px;
    position: relative;
}

.counter h3:before,
.counter h3:after {
    content: "";
    background: linear-gradient(to right bottom, transparent 49%, #c90460 50%);
    width: 20px;
    height: 20px;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: -2;
}

.counter h3:after {
    transform: rotateY(180deg);
    left: auto;
    right: 0;
}

.counter.purple .counter-icon,
.counter.purple h3 {
    background: linear-gradient(#b05fdf, #7b26dd);
}

.counter.purple h3:before,
.counter.purple h3:after {
    background: linear-gradient(to right bottom, transparent 49%, #5a07bf 50%);
}

.counter.blue .counter-icon,
.counter.blue h3 {
    background: linear-gradient(#00bcf9, #027af6);
}

.counter.blue h3:before,
.counter.blue h3:after {
    background: linear-gradient(to right bottom, transparent 49%, #0466c9 50%);
}

.counter.green .counter-icon,
.counter.green h3 {
    background: linear-gradient(#aff400, #6cc425);
}

.counter.green h3:before,
.counter.green h3:after {
    background: linear-gradient(to right bottom, transparent 49%, #489e03 50%);
}


/* The academic Section  */

.section-gray {
    background: #e5e5e5;
    padding: 60px 0 30px 0;
}


/*---------------------------------------------------------------------- /
CARDS
----------------------------------------------------------------------- */

.card {
    display: inline-block;
    position: relative;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 6px;
    color: rgba(0, 0, 0, 0.87);
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.card .card-image {
    height: 60%;
    position: relative;
    overflow: hidden;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30px;
    border-radius: 6px;
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.card .card-image img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    pointer-events: none;
}

.card .card-image .card-caption {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #fff;
    font-size: 1.3em;
    text-shadow: 0 2px 5px rgba(33, 33, 33, 0.5);
}

.card img {
    width: 100%;
    height: auto;
}

.img-raised {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.card .ftr {
    margin-top: 15px;
}

.card .ftr div {
    display: inline-block;
}

.card .ftr .author {
    color: #888;
}

.card .ftr .stats {
    float: right;
    line-height: 30px;
}

.card .ftr .stats {
    position: relative;
    top: 1px;
    font-size: 14px;
}

.table {
    margin-bottom: 0px;
}

.card .table {
    padding: 15px 30px;
}

.card .table-primary {
    background: linear-gradient(60deg, #ab47bc, #7b1fa2);
}

.card .table-info {
    background: linear-gradient(60deg, #26c6da, #0097a7);
}

.card .table-success {
    background: linear-gradient(60deg, #66bb6a, #388e3c);
}

.card .table-warning {
    background: linear-gradient(60deg, #ffa726, #f57c00);
}

.card .table-danger {
    background: linear-gradient(60deg, #ef5350, #d32f2f);
}

.card .table-rose {
    background: linear-gradient(60deg, #ec407a, #c2185b);
}

.card [class*="table-"] {
    color: #ffffff;
    border-radius: 6px;
}

.card [class*="table-"] .card-caption a,
.card [class*="table-"] .card-caption,
.card [class*="table-"] .icon i {
    color: #ffffff;
}

.card [class*="table-"] .icon i {
    border-color: rgba(255, 255, 255, 0.25);
}

.card [class*="table-"] .author a,
.card [class*="table-"] .ftr .stats,
.card [class*="table-"] .category,
.card [class*="table-"] .card-description {
    color: rgba(255, 255, 255, 0.8);
}

.card [class*="table-"] .author a:hover,
.card [class*="table-"] .author a:focus,
.card [class*="table-"] .author a:active {
    color: #ffffff;
}

.card [class*="table-"] h1 small,
.card [class*="table-"] h2 small,
.card [class*="table-"] h3 small {
    color: rgba(255, 255, 255, 0.8);
}

.card-background {
    background-position: center;
    background-size: cover;
    text-align: center;
}

.card-background .table {
    position: relative;
    z-index: 2;
    min-height: 280px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 440px;
    margin: 0 auto;
}

.card-background .category,
.card-background .card-description,
.card-background small {
    color: rgba(255, 255, 255, 0.8);
}

.card-background .card-caption {
    color: #ffffff;
    margin-top: 10px;
}

.card-background:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    table: "";
    background-color: rgba(0, 0, 0, 0.56);
    border-radius: 6px;
}


/* ============ Card Profile ============ */

.card-profile {
    margin-top: 30px;
    text-align: center;
}


/* ============ Card Category ============ */

.category {
    position: relative;
    line-height: 0;
    margin: 15px 0;
}

.card .category-social .fa {
    font-size: 24px;
    position: relative;
    margin-top: -4px;
    top: 2px;
    margin-right: 5px;
}


/* ============ Card Author ============ */

.card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}

.card .author a {
    color: #333;
    text-decoration: none;
}

.card .author a .ripple-cont {
    display: none;
}

.card-background {
    background-position: center;
    background-size: cover;
    text-align: center;
}

.card-background .table {
    position: relative;
    z-index: 2;
    min-height: 280px;
    padding-top: 40px;
    padding-bottom: 40px;
    max-width: 440px;
    margin: 0 auto;
}

.card-background .category,
.card-background .card-description,
.card-background small {
    color: rgba(255, 255, 255, 0.8);
}

.card-background .card-caption {
    color: #ffffff;
    margin-top: 10px;
}

.card-background:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    table: "";
    background-color: rgba(0, 0, 0, 0.56);
    border-radius: 6px;
}


/* ============ Card Profile ============ */

.card-profile {
    margin-top: 30px;
    text-align: center;
}


/* ============ Card Category ============ */

.category {
    position: relative;
    line-height: 0;
    margin: 15px 0;
}

.card .category-social .fa {
    font-size: 24px;
    position: relative;
    margin-top: -4px;
    top: 2px;
    margin-right: 5px;
}


/* ============ Card Author ============ */

.card .author .avatar {
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}

.card .author a {
    color: #333;
    text-decoration: none;
}

.card .author a .ripple-cont {
    display: none;
}


/* ============ Card Product ============ */

.card-product {
    margin-top: 30px;
}

.card-product .btn-simple.btn-just-icon {
    padding: 0;
}

.card-product .ftr {
    margin-top: 5px;
}

.card-product .ftr .stats {
    margin-top: 4px;
    top: 0;
}

.card-product .ftr h4 {
    margin-bottom: 0;
}

.card-product .card-caption,
.card-product .category,
.card-product .card-description {
    text-align: center;
}

.card-description p {
    color: #888;
}

.card-caption,
.card-caption a {
    color: #333;
    text-decoration: none;
}

.card-caption {
    font-weight: 700;
    font-family: "Roboto Slab", "Times New Roman", serif;
}

:root {
    --color1: #fd8f33;
    --color2: #0dc8ab;
    --color3: #05b0de;
    --color4: #8e7ccc;
}

.main-timeline {
    font-family: "Source Sans Pro", sans-serif;
    position: relative;
}

.main-timeline:after {
    content: "";
    display: block;
    clear: both;
}

.main-timeline .timeline {
    width: 50.1%;
    padding: 20px 0 20px 100px;
    float: right;
    position: relative;
    z-index: 1;
}

.main-timeline .timeline a {
    text-decoration: none;
}

.main-timeline .timeline:before,
.main-timeline .timeline:after {
    content: "";
    background: var(--color1);
    height: 100%;
    width: 28px;
    position: absolute;
    left: -11px;
    top: 0;
}

.main-timeline .timeline:after {
    background: var(--color1);
    height: 18px;
    width: 200px;
    box-shadow: 0 0 10px -5px #000;
    transform: translateY(-50%);
    top: 50%;
    left: -90px;
}

.main-timeline .timeline-content {
    color: #517d82;
    background-color: var(--color1);
    padding: 0 0 0 80px;
    box-shadow: 0 0 20px -10px #000;
    border-radius: 10px;
    display: block;
}

.main-timeline .timeline-content:hover {
    color: #517d82;
    text-decoration: none;
}

.main-timeline .timeline-icon {
    color: #fff;
    background-color: var(--color1);
    font-size: 35px;
    text-align: center;
    line-height: 62px;
    height: 60px;
    width: 60px;
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: -100px;
    top: 50%;
    z-index: 1;
}

.main-timeline .timeline-year {
    color: #517d82;
    background-color: #fff;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
    line-height: 93px;
    height: 113px;
    width: 113px;
    border: 6px solid var(--color1);
    box-shadow: 0 0 10px -5px #000;
    border-radius: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: 50px;
    top: 50%;
    z-index: 1;
}

.main-timeline .inner-content {
    background-color: #fff;
    padding: 10px;
}

.main-timeline .title {
    color: var(--color1);
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.main-timeline .description {
    font-size: 14px;
    letter-spacing: 1px;
    margin: 0;
}

.main-timeline .timeline:nth-child(even) {
    padding: 20px 100px 20px 0;
    float: left;
}

.main-timeline .timeline:nth-child(even):before {
    left: auto;
    right: -14.5px;
}

.main-timeline .timeline:nth-child(even):after {
    left: auto;
    right: -90px;
}

.main-timeline .timeline:nth-child(even) .timeline-content {
    padding: 0 80px 0 0;
}

.main-timeline .timeline:nth-child(even) .timeline-icon {
    left: auto;
    right: -100px;
}

.main-timeline .timeline:nth-child(even) .timeline-year {
    left: auto;
    right: 50px;
}

.main-timeline .timeline:nth-child(4n + 2):before,
.main-timeline .timeline:nth-child(4n + 2):after {
    background: var(--color2);
}

.main-timeline .timeline:nth-child(4n + 2) .timeline-content,
.main-timeline .timeline:nth-child(4n + 2) .timeline-icon {
    background-color: var(--color2);
}

.main-timeline .timeline:nth-child(4n + 2) .timeline-year {
    border-color: var(--color2);
}

.main-timeline .timeline:nth-child(4n + 2) .title {
    color: var(--color2);
}

.main-timeline .timeline:nth-child(4n + 3):before,
.main-timeline .timeline:nth-child(4n + 3):after {
    background: var(--color3);
}

.main-timeline .timeline:nth-child(4n + 3) .timeline-content,
.main-timeline .timeline:nth-child(4n + 3) .timeline-icon {
    background-color: var(--color3);
}

.main-timeline .timeline:nth-child(4n + 3) .timeline-year {
    border-color: var(--color3);
}

.main-timeline .timeline:nth-child(4n + 3) .title {
    color: var(--color3);
}

.main-timeline .timeline:nth-child(4n + 4):before,
.main-timeline .timeline:nth-child(4n + 4):after {
    background: var(--color4);
}

.main-timeline .timeline:nth-child(4n + 4) .timeline-content,
.main-timeline .timeline:nth-child(4n + 4) .timeline-icon {
    background-color: var(--color4);
}

.main-timeline .timeline:nth-child(4n + 4) .timeline-year {
    border-color: var(--color4);
}

.main-timeline .timeline:nth-child(4n + 4) .title {
    color: var(--color4);
}

@media only screen and (max-width: 1200px) {
    .main-timeline .timeline:before {
        left: -12.5px;
    }
    .main-timeline .timeline:nth-child(even):before {
        right: -14px;
    }
}

@media only screen and (max-width: 990px) {
    .main-timeline .timeline:before {
        left: -12.5px;
    }
}

@media only screen and (max-width: 767px) {
    .main-timeline .timeline,
    .main-timeline .timeline:nth-child(even) {
        width: 100%;
        padding: 20px 0 20px 37px;
    }
    .main-timeline .timeline:before {
        left: 0;
    }
    .main-timeline .timeline:nth-child(even):before {
        right: auto;
        left: 0;
    }
    .main-timeline .timeline:after,
    .main-timeline .timeline:nth-child(even) .timeline:after {
        display: none;
    }
    .main-timeline .timeline-icon,
    .main-timeline .timeline:nth-child(even) .timeline-icon {
        left: 0;
        display: none;
    }
    .main-timeline .timeline-year,
    .main-timeline .timeline:nth-child(even) .timeline-year {
        height: 75px;
        width: 75px;
        line-height: 60px;
        font-size: 25px;
        left: 1px;
    }
    .main-timeline .timeline-content,
    .main-timeline .timeline:nth-child(even) .timeline-content {
        padding: 0 0 0 40px;
    }
}