/* =====================================================
   WHAT IS PROTEIN CALCULATOR
===================================================== */

.tpc-about-protein {

    padding: 90px 0;

    background: #f8faf8;

}

.tpc-section-heading {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 50px;

}

.tpc-section-heading h2 {

    position: relative;

    display: inline-block;

    font-size: 2.4rem;

    margin-bottom: 16px;

    color: black;

    transition: color .3s ease;

}

/* Green Accent 

.tpc-section-heading h2::after {

    content: "";

    display: block;

    width: 90px;

    height: 4px;

    margin: 18px auto 0;

    background: #22c55e;

    border-radius: 999px;

}*/

.tpc-section-subtitle {

    font-size: 1.1rem;

    color: #6b7280;

    line-height: 1.7;

}

.tpc-about-content {

    position: relative;

    max-width: 820px;

    margin: 0 auto;

    padding: 40px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 22px;

    overflow: hidden;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background-color .35s ease;

}

/* Animated top border */

.tpc-about-content::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 0;

    height: 4px;

    background: #22c55e;

    transform: translateX(-50%);

    transition: width .35s ease;

}

.tpc-about-content:hover {

    transform: translateY(-8px);

    border-color: #22c55e;

    background: #fcfffd;

    box-shadow:
        0 20px 45px rgba(34,197,94,.12),
        0 8px 20px rgba(0,0,0,.06);

}

.tpc-about-content:hover::before {

    width: 100%;

}

.tpc-about-content:hover + * {

    transition: none;

}

/*
.tpc-about-protein:hover .tpc-section-heading h2 {

    color: #16a34a;

}
*/
.tpc-about-content p {

    font-size: 1.08rem;

    line-height: 1.9;

    color: #444;

    margin-bottom: 24px;

}

.tpc-about-content p:last-child {

    margin-bottom: 0;

}

/* Mobile Tap Animation */

.tpc-about-content:active {

    transform: scale(.98);

}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {

    .tpc-about-content,
    .tpc-about-content::before,
    .tpc-section-heading h2 {

        transition: none;

    }

}

@media (max-width:768px){

    .tpc-about-protein{

        padding:60px 0;

    }

    .tpc-section-heading h2{

        font-size:2rem;

    }

    .tpc-about-content{

        padding:28px;

    }

    .tpc-about-content p{

        font-size:1rem;

    }

}