/* Content/css/v2/sections/about-page.css
   Powers About.cshtml (HomeController.About(), confirmed real route per
   handoff - real #team/#advisory anchors). Ported as-is from
   assets.3.0/css/style.1.0.6.css, in original order, except:

   1. .about-hero .hero-title h1 font-weight: 600 -> 700, matching the
      already-approved .hero-title h1 base rule used on Product pages.

   2. NEW rules (not ports, nothing existed to port):
      - .about-page-area/.meet-team-area .section-title h2: heavy
        heading weight (800/2.1rem/navy), matching the sitewide standard
        established on Integrations/feature-tabs. Neither heading had
        this before.
      - .ht-about-author img: max-width/height:auto containment. Legacy
        sheet had zero rules for this image beyond the h2/h3 text next
        to it - it was rendering unconstrained and overlapping the
        adjacent text column.

   Real port that was simply missed on the first pass: .meet-team-box's
   padding-left/right: 104px, which constrains the Team/Advisory grid
   width - its absence was letting those cards overflow.

   Not found anywhere in style.1.0.6.css (genuinely unstyled in the
   legacy site, not just missed here): .p-height, .team-btn, .s-m-text,
   .about-page-area (as a container - only .about-page-area .section-title
   h2 exists, added above). Left unstyled rather than inventing rules. */


.meet-team-area .btn.btn-large {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    padding: 15px 50px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(91deg, #0B6DFF 3.02%, #0364F4 113.58%, #0364F4 113.58%);
}

.about-page-area .btn-w-200,
.about-page-area .btn-w-230,
.about-page-area .btn-w-full,
.meet-team-area .btn-w-200,
.meet-team-area .btn-w-230,
.meet-team-area .btn-w-full {
    width: 200px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
}

.bg-dark-2 {
    background: #1E437A !important;
}

.bg-light-2 {
    background: #F5FAFA !important;
}

.bg-light-half-color:after {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    content: "";
    height: 100%;
    background: #F4F5FA !important;
}

.mb--0 {
    margin-bottom: 0 !important;
}

.mb-43 {
    margin-bottom: 43px !important;
}

.mb-63 {
    margin-bottom: 63px !important;
}

.pl-35 {
    padding-left: 35px;
}

.pr-35 {
    padding-right: 35px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-80 {
    padding-right: 80px;
}

.pt-20 {
    padding-top: 20px !important;
}

.pt-60 {
    padding-top: 60px !important;
}

.pt-65 {
    padding-top: 65px !important;
}

.pt-117 {
    padding-top: 117px !important;
}

.pt-200 {
    padding-top: 200px !important;
}

.pb-7 {
    padding-bottom: 7px !important;
}

.pb-50 {
    padding-bottom: 50px !important;
}

.pb-70 {
    padding-bottom: 70px !important;
}

.meet-team-area .section-title p.width-medium {
    width: 500px;
    margin: auto;
}

.ht-about-btn .btn.btn-dark {
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    padding: 15px 48px;
    border-radius: 999px;
    color: #fff;
    background: #071A2C;
}

.ht-about-btn .btn.btn-dark:hover:before {
    background: #0769FA;
}

.counter-number span.counter-text {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    font-weight: 500;
}

.counter-number>span {
    display: block;
    text-align: center;
    color: #33383D;
    font-weight: 600;
    font-size: 65px;
    line-height: 78px;
}

.about-counterup {
    z-index: 2;
    position: relative;
}

.counter-number {
    border-bottom: 1px solid #C4C4C4;
    padding-bottom: 28px;
    margin-bottom: 30px;
}

.counter-number.border-0 {
    border: 0;
}

.col-6:nth-child(odd) .counter-number {
    padding-right: 30px;
}

.col-6:nth-child(even) .counter-number {
    padding-left: 30px;
}

.ht-about-author h2 {
    font-size: 25px;
    line-height: 37.5px; 
    font-weight: 700;
    margin-bottom: 5px;
}

.ht-about-author h3 {
    font-size: 18px;
    line-height: 27px; 
    font-weight: 400;
}

.ht-about-text h2 { 
    font-weight: 900;
    font-size: 22px;
    line-height: 33px;
    color: #33383D;
    margin-bottom: 20px;
}

.ht-about-text p {
    font-size: 18px;
    line-height: 27px;
    font-weight: 500; 
    margin-bottom: 40px;
}

/* NEW - no rule for this existed anywhere in the legacy sheet. The
   single wide team_tile.png photo was rendering at native pixel size,
   unconstrained, overflowing the page width. Scoped to #team only so
   it doesn't touch Advisory's .single-meet-img circular photos, which
   already have their own correct sizing. */
#team .single-m-team img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* NEW - .team-btn had zero CSS anywhere in the legacy sheet, so the
   "Visit Website" button was sitting flush against the paragraph above
   it with no gap. */
.meet-team-area .team-btn {
    margin-top: 20px;
}

/* NEW - .meet-team-area .section-title only ever had h2/p sub-rules
   ported; the title block itself had no bottom margin, so "Meet the
   Team"'s subheading sat flush against team_tile.png below it. */
.meet-team-area .section-title {
    margin-bottom: 40px;
}

.meet-team-box {
    padding-left: 104px;
    padding-right: 104px;
}

.meet-team-area .section-title h2 {
    margin-bottom: 5px;
}

/* NEW rules below, not legacy ports - matching the sitewide heavy
   heading treatment already established (feature-tabs-section h2,
   service-area .section-title h2 on Integrations). Neither of these
   two headings ("Founder & CEO speaks", "Meet the Team" /
   "Advisory Board Members") had it, since the legacy sheet's
   .section-title h2 rule (line-height only, in product-page.css)
   predates that standard. */
.about-page-area .section-title h2,
.meet-team-area .section-title h2 {
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--ce-color-navy);
    margin: 10px 0 14px;
}

/* Also new: .ht-about-author had no img sizing rule anywhere in the
   legacy sheet (only h2/h3 text rules existed) - the composite CEO
   photo/UI export (caseeasy_crm_01.png) was rendering unconstrained,
   overlapping the adjacent text column. */
.ht-about-author img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.single-meet-img {
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 220px;
    height: 220px;
    border: 10px solid #EDF4FA;
    margin: auto;
    margin-bottom: 11px;
    transition: .3s;
    overflow: hidden;
}

.single-m-team:hover .single-meet-img {
    border-color: #F6EDFA
}

.single-meet-img img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-m-team h3 {
    font-weight: 600;
    color: #0B6DFF;
    font-size: 25px;
    line-height: 37.5px;
    margin-bottom: 5px;
}

.color-dark {
    color: #071A2C !important;
}

.single-m-team p {
    line-height: 21px;
    font-weight: 500;
    color: #071A2C;
    margin-bottom: 1px;
}

.single-m-team {
    overflow: hidden;
}

.ht-about-btn .btn-dark:active:focus {
    box-shadow: none;
}

.abt-accordion-txt p {
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 27px;
}

.row-gutter-40 {
    margin-left: -20px;
    margin-right: -20px;
}

.row-gutter-40 .col,
.row-gutter-40 [class*=col-] {
    padding-left: 20px;
    padding-right: 20px;
}

.abt-accordion-txt {
    padding-left: 28px;
    padding-right: 28px;
}

.about-hero .hero-title h1,
.feature-hero-2 .hero-title h1,
.hero-resources .hero-title h1 {
    color: #fff;
    padding-right: 14px;
    font-weight: 700;
    font-size: 50px;
    margin-bottom: 10px;
}

.about-hero .hero-title p,
.feature-hero-2 .hero-title p,
.hero-resources .hero-title p {
    color: #d8d8d8;
    font-weight: 400;
}