/*
 * The inner pages. These reuse the theme's own layouts (about-area, single-service-area,
 * specific-services), so this file only adds what the theme has no rule for.
 *
 * Note: the theme's `.sec-title p` is padded 0 190px and centred, which squeezes body
 * copy into a narrow ragged column. Page copy therefore sits OUTSIDE .sec-title, and
 * anything that must sit inside is reset below.
 */

/* Small label above a heading, matching the home page's eyebrow. */
.teerma-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #45c4e9;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Intro paragraph under a left-aligned section title. */
.teerma-lead {
    max-width: 760px;
    margin: -20px 0 35px;
    color: #848484;
    font-size: 16px;
    line-height: 28px;
}

/* Undo the theme's centred, heavily padded paragraph when it appears in our sections. */
#single-service-area .sec-title p,
.about-area .sec-title p {
    padding: 0;
    margin: 15px 0 0;
    font-size: 16px;
    line-height: 28px;
    text-align: left;
}

/*
 * Services page: the intro section already ends with 70px of sec-padding and the theme
 * gives #single-service-area 80px of its own, which left a 150px hole above the cards.
 */
.teerma-services-page { padding-top: 0; }

/* Services page: the theme's icon cards need equal heights in a 3-up grid. */
.teerma-services-page .specific-services .single-item { display: flex; flex-direction: column; height: 100%; }
.teerma-services-page .specific-services .single-item .text-holder { flex: 1 1 auto; }
.teerma-services-page .specific-services .row { display: flex; flex-wrap: wrap; }
.teerma-services-page .specific-services .row > [class*='col-'] { display: flex; }

/* Organization: benefits list and office line. */
#single-service-area .benefits-service-content .text-holder ul { margin: 18px 0 0; padding: 0; list-style: none; }
#single-service-area .benefits-service-content .text-holder ul li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 22px;
    color: #848484;
    font-size: 15px;
    line-height: 26px;
}
#single-service-area .benefits-service-content .text-holder ul li i { position: absolute; top: 6px; left: 0; color: #45c4e9; }
#single-service-area .benefits-service-content .img-holder img { width: 100%; }
.teerma-office { margin-top: 22px; color: #222222; font-size: 16px; }
.teerma-office i { margin-right: 8px; color: #45c4e9; }

/* Closing call to action, shared by the inner pages. */
.teerma-page-cta { padding: 0 0 80px; }
.teerma-page-cta__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 40px 45px;
    background: linear-gradient(135deg, #1b3053 0%, #244073 100%);
}
.teerma-page-cta__text { flex: 1 1 420px; min-width: 0; }
.teerma-page-cta__text h3 {
    margin: 0;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 36px;
}
.teerma-page-cta__text p { margin: 10px 0 0; color: rgba(255, 255, 255, 0.8); font-size: 15px; line-height: 26px; }

/* "View all services" beside the home page button. */
.teerma-services__all {
    display: inline-block;
    margin-left: 22px;
    color: #1b3053;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
}
.teerma-services__all:hover { color: #45c4e9; }
.teerma-services__all i { margin-left: 6px; }

/* FAQs page */
.teerma-faq-area { padding-bottom: 60px; }
.teerma-faqs { max-width: 900px; margin: 0 auto; }

/* Keep the photo and the copy beside it the same height so neither column bottoms out. */
@media (min-width: 992px) {
    .about-area .row > [class*='col-lg-6'] { display: flex; }
    .about-area .img-holder { display: flex; width: 100%; }
    .about-area .img-holder img { width: 100%; height: 100%; object-fit: cover; }
    .about-area .text-holder { display: flex; flex-direction: column; justify-content: center; width: 100%; padding-left: 15px; }
}

@media (max-width: 991px) {
    .about-area .img-holder { margin-bottom: 35px; }
    #single-service-area .benefits-service-content .img-holder { margin-top: 30px; }
}

@media (max-width: 767px) {
    .teerma-page-cta__inner { padding: 30px 24px; }
    .teerma-page-cta__text h3 { font-size: 22px; line-height: 32px; }
    .teerma-services__all { display: block; margin: 18px 0 0; }
    .sec-title p { padding: 0 !important; }
}