//
// Page: Services
// ---
// bigchaindb.com
//
.page-services {
    // Different Features unit layout
    .feature {
        display: block;
    }

    .feature__title {
        margin-bottom: $spacer;
        display: block;

        // the bottom line
        &:after {
            content: '';
            height: 2px;
            width: 3rem;
            display: block;
            margin-top: $spacer * $line-height;
        }
    }

    .feature__icon {
        margin-top: 0;
        margin-bottom: $spacer / 6;
        width: 2.2rem;
        height: 2.2rem;
    }
}

.hero--services {
    .logo--services {
        display: inline-block;
        opacity: .75;
        fill: $brand-main-blue-light;
    }

    .hero__title {
        margin-top: $spacer;
    }

    .hero__subtitle {
        margin-bottom: $spacer * 3;
        font-size: $font-size-h5;

        @media ($screen-sm) {
            font-size: $font-size-h4;
        }
    }

    .hero__content {
        margin-top: $spacer * 2;
        margin-bottom: $spacer * 6;
    }

    .btn {
        min-width: 220px;
    }
}

.section--servicesdetail {
    .feature__icon {
        stroke: rgba($brand-main-gray, .65);
        color: rgba($brand-main-violet, .65);
    }

    .feature__title {
        // the bottom line
        &:after {
            background: rgba($brand-main-gray, .2);
        }
    }

    .feature__text {
        color: rgba($brand-main-blue, .65);
    }

    .actions {
        text-align: center;
        padding-top: $spacer * 3;
        border-top: 2px solid rgba($brand-main-gray, .1);
    }
}

.section--servicesintro {
    .grid,
    .feature {
        margin-bottom: 0;
    }

    .btn {
        margin-top: $spacer * 2;
    }

    h2 {
        @extend .h3;
        margin-bottom: $spacer;
    }

    .feature__title {
        // the bottom line
        &:after {
            background: rgba($gray-light, .4);
        }
    }
}

.section--servicestestimonial {
    .testimonial {
        @extend .large;
        margin: 0 auto;

        @media ($screen-sm) {
            max-width: 66%;
        }
    }

    .testimonial__quote {
        &:before {
            margin-left: -1.3rem;
        }
    }
}

.form--services {
    background: darken($brand-main-blue, 5%);

    .grid {
        @media ($screen-sm) {
            justify-content: space-between;
        }
    }

    .grid__col {
        @media ($screen-sm) {
            flex-basis: 48%;
        }
    }
}