/* Shared values for the homepage, plans and order form. They mirror css/style-v4.css. */
:root {
    --vc-coral: #ff8a73;
    --vc-coral-hover: #ff9d8a;
    --vc-coral-strong: #c94530; /* Behind white text: 4.8:1 contrast. */
    --vc-coral-large: #e8634c; /* Large text such as prices: 3:1 contrast. */
    --vc-gradient: linear-gradient(142deg, #ffd474 0%, #ff8c8c 100%);
    --vc-navy: #222d39;
    --vc-text: #66718f; /* A shade darker than the theme's #677294 so it clears 4.5:1 on --vc-tint. */
    --vc-tint: #f4f9fe;
    --vc-border: rgba(112, 112, 112, 0.2);
    --vc-border-strong: #c9d1de;
    --vc-shadow-hover: 0 0 80px 0 rgba(192, 188, 240, 0.25);
    --vc-radius: 5px;
    --vc-radius-panel: 18px;
    --vc-error: #b3273b;
    --vc-error-tint: #fff4f5;
    --vc-focus: #222d39;
    /* Space between the visible content of consecutive page sections. */
    --vc-section-gap: 120px;
}
@media (max-width: 767px) {
    :root { --vc-section-gap: 90px; }
}

/* Bordered white card in the style of the theme's pricing cards. */
.vc-card {
    background: #fff;
    border: 1px solid var(--vc-border);
    border-radius: var(--vc-radius);
    transition: box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.vc-card:hover { box-shadow: var(--vc-shadow-hover); border-color: transparent; }

/* Text link with a coral arrow. */
.vc-link {
    color: var(--vc-navy);
    font-family: "Montserrat", "Montserrat Fallback", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(34, 45, 57, 0.3);
    text-underline-offset: 4px;
}
.vc-link:hover, .vc-link:focus { color: var(--vc-coral); text-decoration-color: currentColor; }
.vc-link span[aria-hidden] { color: var(--vc-coral); margin-left: 2px; }

/* Coral numbered or icon badge. */
.vc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--vc-gradient);
    color: #fff;
    font-family: "Montserrat", "Montserrat Fallback", sans-serif;
    font-weight: 700;
    font-size: 17px;
}

.vc-card a:focus-visible, .vc-link:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 3px;
}

/* Theme sections reused on several pages, made predictable so pages can space them evenly. */
/* "Our mission" photo + tinted text panel: size the panel to its text instead of a fixed 600px, and let the photo flow normally. */
.our_mission.vc-mission { margin-bottom: 0; }
.our_mission.vc-mission .row { align-items: center; }
.our_mission.vc-mission .mission_banner { min-height: 0; }
.our_mission.vc-mission .mission_banner img { position: static; display: block; width: 100%; max-width: 775px; height: auto; margin: 0 auto; padding: 0; }
.our_mission.vc-mission .mission_content { padding: 56px 0; }
.our_mission.vc-mission .mission_content:before { top: 0; height: 100%; transform: none; }
.our_mission.vc-mission .mission_vission_content h2 { margin-top: 0; }
.our_mission.vc-mission .mission_content .video_wrapper { margin-bottom: 0; }
/* "Ready to Get Started?" box: no built-in margin, and a real box on smaller screens (the theme switches it to display: initial). */
#need_help_agency.vc-cta .subscribe_wrapper { margin-bottom: 0; }
@media (max-width: 991px) {
    #need_help_agency.vc-cta .subscribe_wrapper { display: block !important; }
}
@media (max-width: 767px) {
    .our_mission.vc-mission .mission_banner { padding: 0 15px; }
    .our_mission.vc-mission .mission_content { margin-top: 30px; padding: 40px 15px; }
    /* The theme leaves this heading touching the screen edges. */
    .services.vc-included .sub_title { padding: 0 15px; }
}