/* =====================================
   FEATURE CARDS
===================================== */

.feature-card {

    background: white;

    padding: 40px 30px;

    border-radius: 20px;

    text-align: center;

    height: 100%;

    transition: .3s ease;

    box-shadow: 0 5px 20px rgba(0,0,0,.05);
}

.feature-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0,0,0,.10);
}

.feature-card i {

    font-size: 3rem;

    color: var(--color-accent);

    margin-bottom: 25px;
}

.feature-card h3 {

    font-size: 1.4rem;

    font-weight: 700;

    margin-bottom: 15px;
}

/* =====================================
   SOLUTION CARDS
===================================== */

.solution-card {

    background: rgba(255,255,255,.08);

    padding: 40px;

    border-radius: 20px;

    height: 100%;

    transition: .3s ease;

    border: 1px solid rgba(255,255,255,.08);
}

.solution-card:hover {

    background: rgba(255,255,255,.12);

    transform: translateY(-6px);
}

.solution-card h3 {

    font-size: 1.5rem;

    font-weight: 700;

    margin-bottom: 15px;
}

/* =====================================
   CTA SECTION
===================================== */

#cta {

    background:
        linear-gradient(
            rgba(28,37,50,.95),
            rgba(28,37,50,.95)
        );

    color: white;

    text-align: center;
}

#cta h2 {

    font-size: 3rem;

    font-weight: 800;

    margin-bottom: 20px;
}

#cta p {

    font-size: 1.2rem;

    margin-bottom: 35px;
}

/* =====================================
   REVIEWS
===================================== */

#reviews {

    background: var(--color-bg-dark);
}

.review-card {

    background: white;

    padding: 35px;

    border-radius: 20px;

    height: 100%;

    transition: .3s ease;

    box-shadow: 0 5px 20px rgba(0,0,0,.05);
}

.review-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 40px rgba(0,0,0,.10);
}

.review-card p {

    font-style: italic;

    margin-bottom: 20px;
}

.review-card strong {

    color: var(--color-primary);
}

/* =====================================
   CONTACT
===================================== */

#contact {

    background: var(--color-bg);
}

.contact-frame {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.contact-frame iframe {

    min-height: 700px;

    border: 0;

    display: block;

    width: 100%;
}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

    #cta h2 {

        font-size: 2.2rem;
    }

    .feature-card,
    .solution-card,
    .review-card {

        padding: 30px;
    }
}