﻿.ageBox {
    background: #fff;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    padding: 40px 15px 25px;
    border-radius: 10px;
    position: relative;
}

    .ageBox:before,
    .ageBox:after {
        content: "";
        background: linear-gradient(to bottom, #f36b23, #f68e1d);
        width: 100%;
        height: 40px;
        border-radius: 10px 10px 0 0;
        position: absolute;
        top: 0;
        left: 0;
    }

    .ageBox:after {
        background: #f36b23;
        top: auto;
        bottom: 0;
        height: 10px;
        border-radius: 0 0 10px 10px;
    }

    .ageBox .title {
        color: #fff;
        background: #f36b23;
        font-size: 17px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 10px 12px 9px;
        margin: -10px 0 18px;
        display: inline-block;
        position: relative;
    }

        .ageBox .title:before,
        .ageBox .title:after {
            content: "";
            background: linear-gradient(to top left, #c14f1d 49%, transparent 50%);
            width: 10px;
            height: 10px;
            position: absolute;
            top: 0;
            left: -10px;
        }

        .ageBox .title:after {
            transform: rotateY(180deg);
            left: auto;
            right: -10px;
        }

    .ageBox .service-icon {
        color: #f36b23;
        font-size: 50px;
        line-height: 50px;
        margin: 0 0 15px;
    }

    .ageBox .description {
        color: #999;
        font-size: 13px;
        line-height: 22px;
        margin: 0;
    }

    .ageBox.purple:before {
        background: linear-gradient(#c64292, #d8569f);
    }

    .ageBox.purple:after,
    .ageBox.purple .title {
        background: #c64292;
    }

        .ageBox.purple .title:before,
        .ageBox.purple .title:after {
            background: linear-gradient(to top left, #962185 49%, transparent 50%);
        }

    .ageBox.purple .service-icon {
        color: #c64292;
    }

    .ageBox.cgreen:before {
        background: linear-gradient(#2da197, #4bb8ad);
    }

    .ageBox.cgreen:after,
    .ageBox.cgreen .title {
        background: #2da197;
    }

        .ageBox.cgreen .title:before,
        .ageBox.cgreen .title:after {
            background: linear-gradient(to top left, #1b817b 49%, transparent 50%);
        }

    .ageBox.cgreen .service-icon {
        color: #2da197;
    }

    .ageBox.green:before {
        background: linear-gradient(#82c145, #b1d23f);
    }

    .ageBox.green:after,
    .ageBox.green .title {
        background: #82c145;
    }

        .ageBox.green .title:before,
        .ageBox.green .title:after {
            background: linear-gradient(to top left, #41a133 49%, transparent 50%);
        }

    .ageBox.green .service-icon {
        color: #82c145;
    }

@media only screen and (max-width: 990px) {
    .ageBox {
        margin: 0 0 30px;
    }
}