/*
Theme Name: Recruiters Websites
Theme URI: http://www.recruiterswebsites.com
Version: 1.0
Description: Recruiters Websites Framework for Custom Website Development
Author: The Recruiters Websites Team
Author URI: http://www.recruiterswebsites.com
template: bb-theme
*/

:root {
    --rw-primary: #313CFF;
    --rw-secondary: #1A7DFF;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

body,
.fl-page-content {
    background: transparent !important;
}



body .fl-page{
    background-color: var(--site-bg) !important;
    background: var(--site-bg);
}

:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus{
    outline: none !important;
}


/*
==========================================================================
Navigation
==========================================================================
*/
.site-nav-button .rw-btns {
    justify-self: end;
}

/* Logo — recolors the single PNG (Black / White / Full Color) */
.site-logo .pp-photo-img {
    filter: var(--logo-filter, none);
    transition: filter 0.2s ease;
}

/* Navigation — falls back to black / var(--rw-main-secondary) if the ACF
   fields are left blank, matching the PHP fallback in functions.php */
.site-nav .pp-menu-nav .menu-item a {
    color: var(--nav-color, #000000);
    transition: color 0.2s ease;
}

.site-nav .pp-menu-nav .menu-item a:hover {
    color: var(--nav-color-hover, var(--rw-main-secondary));
}

nav.pp-menu-nav.pp-off-canvas-menu.pp-menu-right li a{
    text-align: left;
    border-bottom: 1px solid black !important;
}

nav.pp-menu-nav.pp-off-canvas-menu.pp-menu-right li a:hover{
    background-color: var(--rw-main-primary);
    color: white;
}

a.pp-menu-close-btn {
    color: var(--rw-main-secondary);
}

@media (min-width:768px) and (max-width:777px){
    .fl-module.fl-module-html.fl-html.fl-node-rchefalsbx3n.site-nav-button{
        margin-left: 0px !important;
    }
}

@media (min-width:768px){
    li#menu-item-27090.mobile-toggle{
        display: none;
    }
}

/* ---------------- Full Width Hero ---------------- */

.hero-width .fl-col-content.fl-node-content {
    max-width: 700px;
}

.hero-width p {
    font-size: 20px;
}

/* ---------------- Font-Weight ---------------- */

h4.rw-expertise-tabs__card-title, h5.rw-expertise-tabs__card-position-title, h4.rw-capability__item-title, h4.rw-dbc-box__title {
    font-weight: 400 !important;
}

/* ---------------- Hero Media — Border Radius ---------------- */

.hero-media .hero-static,
.hero-media .fl-bg-video,
.hero-media .fl-bg-slideshow {
    border-radius: var(--hero-media-border-radius);
}

@media (max-width: 992px) {
    .hero-media .hero-static,
    .hero-media .fl-bg-video,
    .hero-media .fl-bg-slideshow {
        border-radius: 0px;
    }
}

/* ==========================================================================
   Double Box / CTA Section
   Consumes --dbc-* custom properties set inline by double-box-cta.php.
   Do not hardcode colors here — everything routes through the options page
   via those custom properties, with fallbacks resolved in PHP.
   ========================================================================== */

.rw-double-box-cta {
    width: 100%;
}

.rw-dbc-box.rw-dbc-box--boxed i{
    font-size: var(--dbc-icon-size);
}

.rw-dbc-box.rw-dbc-box--open i{
    font-size: var(--dbc-open-icon-size);
}

.rw-double-box-cta__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.rw-dbc-box {
    position: relative;
    flex: 0 1 320px;
    width: 320px;
}

.rw-dbc-box--boxed:hover .rw-dbc-box__title {
    color: var(--dbc-title-color-hover);
}

.rw-dbc-box--boxed:hover .rw-dbc-box__content {
    color: var(--dbc-content-color-hover);
}

.rw-dbc-box--boxed:hover .rw-dbc-box__link {
    color: var(--dbc-link-color-hover);
}

@media (max-width: 992px) {
    .rw-dbc-box {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* ---------------- Open layout: container overrides ---------------- */
/* Scoped via the section-level rw-double-box-cta--open class (set from
   layout_type in box_test.php) so only Open-layout sections get the
   250px box width / 60px gap — Boxed sections keep the shared 320px/24px
   defaults above untouched.

   justify-content: flex-start (not center) keeps the row anchored to the
   same left edge as the grid/content above it inside the BB column,
   rather than centering the row as a block and drifting out of alignment
   whenever the boxes' total width doesn't exactly equal the column width.

   flex: 1 1 250px (not 0 1 250px) lets boxes grow beyond 250px to fill
   leftover space when there isn't a 4th box to fill the row — e.g. 3
   boxes with room for a 4th will stretch evenly rather than leaving a
   gap on the right. */

.rw-double-box-cta--open .rw-double-box-cta__inner {
    justify-content: flex-start;
    gap: 60px;
}

.rw-double-box-cta--open .rw-dbc-box {
    flex: 1 1 250px;
    width: 250px;
}

/* IMPORTANT: this rule must stay BELOW the unconditional gap: 60px rule
   above. Both selectors have identical specificity (0,2,0), so with equal
   specificity CSS resolves ties by source order — not by whether a rule
   sits inside a media query. If this block gets moved above the
   unconditional rule (or the unconditional rule gets moved below this),
   the 60px rule will win at every screen size, media query or not. */
@media (max-width: 992px) {
    .rw-double-box-cta--open .rw-double-box-cta__inner {
        gap: 30px;
    }
}

/* ---------------- Boxed / Closed layout ---------------- */

.rw-dbc-box--boxed {
    border-radius: 16px;

    /* This technique only works if border-box and padding-box are actually
       different rectangles — which requires a real CSS border with real
       width. Without this, border-box === padding-box (since default
       border-width is 0), so clip: padding-box and clip: border-box clip
       to the identical area, and the fill layer (painted on top) covers
       the entire box, completely hiding the border-value layer beneath
       it. The border color itself doesn't matter here since only its
       width creates the ring — the actual visible color comes from the
       background layers below. */
    border: var(--dbc-border-width) solid transparent;

    /* Three layered backgrounds, top to bottom:
         1. Fill, clipped to padding-box — the opaque inner area.
         2. Border gradient, clipped to border-box — covers the ring
            (border-box minus padding-box), but is semi-transparent at
            several of its gradient stops.
         3. Solid fill again, clipped to border-box — a backing layer
            so that wherever layer 2 is semi-transparent, it blends
            against the box's own fill color, not whatever is visually
            behind the element (e.g. a background image in the section).
            Layer 1 already fully covers this within the inner area, so
            this backing layer only actually shows through in the ring.
       This is what allows a gradient (or solid) border to respect
       border-radius, which border-image cannot do. */
    background-image:
            linear-gradient(var(--dbc-bg), var(--dbc-bg)),
            var(--dbc-border-value),
            linear-gradient(var(--dbc-bg), var(--dbc-bg));
    background-origin: border-box;
    background-clip: padding-box, border-box, border-box;

    transition: background-image 0.3s ease;
}

.rw-dbc-box--boxed:hover,
.rw-dbc-box--boxed:focus-within {
    background-image:
            var(--dbc-hover-bg),
            var(--dbc-border-value),
            var(--dbc-hover-bg);
}

.rw-dbc-box--boxed .rw-dbc-box__surface {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px;
    height: 100%;
}

.rw-dbc-box--boxed .rw-dbc-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: var(--dbc-icon-border-width) solid var(--dbc-icon-border-color);
    background: var(--dbc-icon-bg);
    color: var(--dbc-icon-color);
    font-size: 22px;
}

.rw-dbc-box--boxed .rw-dbc-box__title {
    color: var(--dbc-title-color);
}

.rw-dbc-box--boxed .rw-dbc-box__content {
    color: var(--dbc-content-color);
}

.rw-dbc-box--boxed .rw-dbc-box__link {
    color: var(--dbc-link-color);
}



.rw-dbc-box--boxed .rw-dbc-box__link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* ---------------- Open layout ---------------- */

.rw-dbc-box--open .rw-dbc-box__surface {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0;
}

.rw-dbc-box--open .rw-dbc-box__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: var(--dbc-open-icon-border-width) solid var(--dbc-open-icon-border-color);
    background: var(--dbc-open-icon-bg);
    color: var(--dbc-open-icon-color);
    font-size: 24px;
}

.rw-dbc-box--open .rw-dbc-box__title {
    color: var(--dbc-open-title-color);
}

.rw-dbc-box--open .rw-dbc-box__content {
    color: var(--dbc-open-content-color);
}

.rw-dbc-box--open .rw-dbc-box__link {
    color: var(--dbc-open-link-color);
}

/* ---------------- Shared elements ---------------- */

.rw-dbc-box__title {
    margin: 0 0 12px;
    font-weight: normal;
}

.rw-dbc-box__title b,
.rw-dbc-box__title strong {
    font-weight: 700 !important;
}

.rw-dbc-box__content {
    margin: 0;
    line-height: 1.6;
}

.rw-dbc-box__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    text-decoration: none;
}

.rw-dbc-box__link-arrow {
    transition: transform 0.2s ease;
}

.rw-dbc-box__link:hover .rw-dbc-box__link-arrow {
    transform: translateX(4px);
}

.z-fix {
    z-index: 1;
}

/*
==========================================================================
hero media
==========================================================================
*/

.hero-media .fl-row-content-wrap .fl-bg-video{
    max-height: 844px !important;
}

.hero-media .fl-row-content-wrap {
    max-height: 844px !important;
}

/*
==========================================================================
First Section
==========================================================================
*/



/*
==========================================================================
logos
==========================================================================
*/


.client-logos-section {
    background: none !important;
}



/*
==========================================================================
Expertise
==========================================================================
*/

/* ---------------- Expertise — Image Border Radius ---------------- */

.rw-expertise__media img {
    border-radius: var(--expertise-image-border-radius);
}



.rw-expertise__grid {
    display: grid;
    grid-template-columns: 590fr 550fr; /* preserves your 590:550 ratio at any container width */
    gap: 40px;
}

.rw-expertise__media {
    position: sticky;
    top: 40px; /* distance from top of viewport while stuck — adjust if you have a fixed header */
    align-self: start;
    height: fit-content;
    margin-bottom: 20px;
}

.rw-expertise__media img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 420px;
    object-fit: cover;
}

.rw-expertise__subtitle {
    margin: 0 0 10px;
    text-transform: uppercase;
    color: var(--rw-main-secondary);
    font-size: 16px;
    font-weight: 400;
}

.rw-expertise__title {
    margin: 0 0 10px;
}

.rw-expertise__title b,
.rw-expertise__title strong,
.rw-expertise__item-title b,
.rw-expertise__item-title strong {
    font-weight: 700 !important;
}

.rw-expertise__intro {
    margin: 0 0 30px;
}

.rw-expertise__items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rw-expertise__item-title {
    margin: 0 0 8px;
}

.rw-expertise__item-content {
    margin: 0;
}

.rw-expertise__button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-top: 30px;
}



@media (max-width: 992px) {
    .rw-expertise__grid {
        grid-template-columns: 1fr;
    }

    .rw-expertise__media {
        position: static;
    }

    .rw-expertise__media img{
        aspect-ratio: 16/9;
    }
}


/* ---------------- Testimonials Module — Container / Border ---------------- */

.rw-testimonials-section .rw-testimonials-section__inner {
    padding: 70px 230px 50px;
    border-radius: var(--testimonial-border-radius);
    border: var(--testimonial-border-width) solid transparent;
    background-image:
            linear-gradient(var(--testimonial-bg), var(--testimonial-bg)),
            var(--testimonial-border-value),
            linear-gradient(var(--testimonial-bg), var(--testimonial-bg));
    background-origin: border-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    text-align: center;
}

span.rw-eye-txt.exp-subtitle {
    margin-bottom: 10px;
}

/* ---------------- Testimonials Module — Text Rhythm ---------------- */

.rw-testimonials-section__eyebrow {
    margin-bottom: 20px;
}

.rw-testimonials-section__inner .rw-eye-txt{
    color: var(--testimonial-eyebrow-color) !important;
}



.rw-testimonials-section__title {
    color: var(--testimonial-title-color);
    margin-bottom: 10px;
    margin-top: 10px;
}

.rw-testimonials-slider__content {
    margin-bottom: 20px;
    color: var(--testimonial-content-color);
}

.rw-testimonials-slider__name {
    color: var(--testimonial-name-color);
    font-weight: bold;
}

.rw-testimonials-slider__industry {
    color: var(--testimonial-industry-color);
    margin-bottom: 15px;
}

.rw-testimonials-section__inner {
    position: relative; /* required for the icon's absolute positioning to anchor correctly */
}

@media (max-width: 992px){
    svg.rw-testimonials-section__quote-icon {
        scale: .75;
        left: 0px;
        bottom: -30px;
    }
}

.rw-testimonials-section__quote-icon {
    position: absolute;
    left: 30px;
    bottom: -25px;
    fill: var(--testimonial-icon-bg);
    stroke: var(--testimonial-icon-border);
    shape-rendering: geometricPrecision;
}

/* ---------------- Testimonials Module — Slick Dot Overrides ---------------- */

.rw-testimonials-slider .slick-dots li button:before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--testimonial-inactive-dot-bg);
    border: 1px solid var(--testimonial-inactive-dot-border);
    opacity: 1;
}

.rw-testimonials-section__inner .slick-dots li {
    width: 10px;
    height: 10px;
}

.rw-testimonials-slider .slick-dots li.slick-active button:before {
    background: var(--testimonial-active-dot-bg);
    border: 1px solid var(--testimonial-active-dot-border);
    opacity: 1;
}

/* ---------------- Testimonials Module — Responsive Padding ---------------- */
/* 230px side padding is the full-width design spec; scales down as the
   viewport narrows so content doesn't get crushed on tablet/mobile. */

@media (max-width: 1400px) {
    .rw-testimonials-section .rw-testimonials-section__inner {
        padding: 70px 120px 60px;
    }
}

@media (max-width: 992px) {
    .rw-testimonials-section .rw-testimonials-section__inner {
        padding: 60px 60px 50px;
    }
}

@media (max-width: 600px) {
    .rw-testimonials-section .rw-testimonials-section__inner {
        padding: 50px 24px 40px;
    }
}

/* ---------------- FAQ / Accordion — Layout ---------------- */

h3.rw-faq-section__title strong {
    font-weight: bold;
}

.rw-faq-section__content .rw-eye-txt {
    margin-bottom: 15px;
}

.rw-faq-section__inner {
    display: flex;
    align-items: stretch;
    gap: 50px;
}

.rw-faq-section__content {
    flex: 0 0 46%;
    width: 46%;
}

.rw-faq-section__image {
    flex: 0 0 50%;
    width: 50%;
}

.rw-faq-section__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--faq-image-border-radius);
    display: block;
}

/* ---------------- FAQ / Accordion — Icon Hover States ---------------- */
/* Icon color hover applies regardless of Boxed vs. Icon Only style.
   Box background/border hover only apply when the icon is boxed, matching
   the same conditional logic as their static counterparts.
   .is-open mirrors the same hover treatment, so an open item looks
   "activated" the same way a hovered item does. */

.rw-faq-accordion__header:hover .rw-faq-accordion__icon,
.rw-faq-accordion__item.is-open .rw-faq-accordion__icon {
    color: var(--faq-icon-color-hover);
}

.rw-faq-accordion__icon--boxed .rw-faq-accordion__header:hover .rw-faq-accordion__icon,
.rw-faq-accordion__icon--boxed.is-open .rw-faq-accordion__icon {
    background: var(--faq-icon-box-bg-hover);
    border-color: var(--faq-icon-box-border-color-hover);
}

@media (max-width: 992px) {
    .rw-faq-section__inner {
        flex-direction: column;
    }

    .rw-faq-section__content,
    .rw-faq-section__image {
        flex: 1 1 100%;
        width: 100%;
    }

    .rw-faq-section__image {
        order: -1;
    }

    .rw-faq-section__image img {
        aspect-ratio: 16/9
    }
}

/* ---------------- FAQ / Accordion — Items ---------------- */

.rw-faq-accordion__item {
    border-bottom: var(--faq-separator-width) solid var(--faq-separator-color);
}

.rw-faq-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0px 15px 0px;
    cursor: pointer;
}

.rw-faq-accordion__item-title {
    flex: 1 1 auto;
    margin: 0;
    font-weight: normal;
}

.rw-faq-accordion__item-title strong {
    font-weight: bold;
}

.rw-faq-accordion__panel {
    overflow: hidden;
    display: none;
}

.rw-faq-accordion__panel-inner {
    min-height: 0;
    overflow: hidden;
}

/* ---------------- FAQ / Accordion — Icon ---------------- */

.rw-faq-accordion__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--faq-icon-color);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.rw-faq-accordion__icon-close {
    display: none;
}

.rw-faq-accordion__item.is-open .rw-faq-accordion__icon-open {
    display: none;
}

.rw-faq-accordion__item.is-open .rw-faq-accordion__icon-close {
    display: block;
}

/* Boxed icon style */
.rw-faq-accordion__icon--boxed .rw-faq-accordion__icon {
    width: 40px;
    height: 40px;
    background: var(--faq-icon-box-bg);
    border: var(--faq-icon-box-border-width) solid var(--faq-icon-box-border-color);
    border-radius: var(--faq-icon-box-border-radius);
}

.rw-faq-accordion__icon i{
    font-size: 16px;
    display: flex;
}

/* Icon-only style — no box, just the glyph */
.rw-faq-accordion__icon--icon_only .rw-faq-accordion__icon {
    background: none;
    border: none;
    border-radius: 0;
}

/* ---------------- Gravity Form — Wrapper / Background ---------------- */

.rw-form-cta .fl-module.fl-module-pp-heading {
    max-width: 700px;
    align-self: center;
}

.rw-form-cta {
    background-color: var(--gform-bg) !important;
    border-radius: var(--gform-bg-border-radius) !important;
}

.rw-form-cta b,.rw-form-cta strong{
    font-weight: bold;
}

.uabb-gf-style .ginput_container_select:after{
    color: rgb(255, 255, 255, .6);
    right: 20px;
}

/* ---------------- Gravity Form — Required Legend ---------------- */

.gform_wrapper.gravity-theme .gform_required_legend {
    display: none;
}

/* ---------------- Gravity Form — Title / Eyebrow ---------------- */

.rw-form-cta span.title-text.pp-primary-title {
    color: var(--gform-title-color);
}

.rw-form-cta span.rw-eye-txt {
    color: var(--gform-subtitle-color) !important;
}

/* ---------------- Gravity Form — Labels ---------------- */

.gform_wrapper.gravity-theme .gfield_label {
    color: var(--gform-label-color) !important;
}

.gform_wrapper.gravity-theme .gfield_required .gfield_required_asterisk {
    color: var(--gform-label-color) !important;
}

/* ---------------- Gravity Form — Fields / Border ---------------- */
/* appearance: none strips the <select>'s native OS chrome, which is required
   for border-radius (and our background layering) to render on selects at
   all — without it, browsers ignore border-radius on <select> outright.

   Third background layer (solid field-bg fill clipped to border-box) sits
   beneath the border gradient so its semi-transparent stops blend against
   the field's own background rather than the section behind the form —
   same fix applied to the Box Module's invisible-border bug. */

.gform_wrapper.gravity-theme .ginput_container_select select,
.gform_wrapper.gravity-theme .ginput_container_text input,
.gform_wrapper.gravity-theme .ginput_container_email input,
.gform_wrapper.gravity-theme .ginput_container_phone input,
.gform_wrapper.gravity-theme .ginput_container_textarea textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent !important;
    color: var(--gform-label-color) !important;
    border: 1px solid transparent !important;
    border-radius: var(--gform-field-border-radius) !important;
    background-image:
            linear-gradient(var(--gform-field-bg), var(--gform-field-bg)),
            var(--gform-field-border-value),
            linear-gradient(var(--gform-field-bg), var(--gform-field-bg)) !important;
    background-origin: border-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    padding: 14px 18px;
    transition: background-image 0.2s ease;
}

.gform_wrapper.gravity-theme .ginput_container_select select:hover,
.gform_wrapper.gravity-theme .ginput_container_select select:focus,
.gform_wrapper.gravity-theme .ginput_container_text input:hover,
.gform_wrapper.gravity-theme .ginput_container_text input:focus,
.gform_wrapper.gravity-theme .ginput_container_email input:hover,
.gform_wrapper.gravity-theme .ginput_container_email input:focus,
.gform_wrapper.gravity-theme .ginput_container_phone input:hover,
.gform_wrapper.gravity-theme .ginput_container_phone input:focus,
.gform_wrapper.gravity-theme .ginput_container_textarea textarea:hover,
.gform_wrapper.gravity-theme .ginput_container_textarea textarea:focus {
    outline: none;
    background-image:
            linear-gradient(var(--gform-field-bg), var(--gform-field-bg)),
            var(--gform-field-border-hover-value),
            linear-gradient(var(--gform-field-bg), var(--gform-field-bg)) !important;
}

/* ---------------- Gravity Form — Placeholder ---------------- */

.gform_wrapper.gravity-theme .ginput_container_text input::placeholder,
.gform_wrapper.gravity-theme .ginput_container_email input::placeholder,
.gform_wrapper.gravity-theme .ginput_container_phone input::placeholder,
.gform_wrapper.gravity-theme .ginput_container_textarea textarea::placeholder {
    color: var(--gform-placeholder-color) !important;
    opacity: 1;
}

.gform_wrapper.gravity-theme .ginput_container_select select option.gf_placeholder {
    color: var(--gform-placeholder-color);
}

/* ---------------- Gravity Form — Button ---------------- */
/* Border uses the same layered-background technique as the fields/testimonials:
   a transparent border reserves the space, and three background layers
   (button fill, border gradient/solid, button fill again as backing) composite
   together so semi-transparent gradient stops blend correctly. */

.gform_button{
    margin-top: 30px;
}

.gform_wrapper.gravity-theme .gform_footer .gform_button {
    color: var(--gform-button-text) !important;
    border: 1px solid transparent !important;
    border-radius: var(--gform-button-border-radius) !important;
    background-image:
            linear-gradient(var(--gform-button-bg), var(--gform-button-bg)),
            var(--gform-button-border-value),
            linear-gradient(var(--gform-button-bg), var(--gform-button-bg)) !important;
    background-origin: border-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
    padding: 16px 32px;
    transition: background-image 0.2s ease, color 0.2s ease;
}

.gform_wrapper.gravity-theme .gform_footer .gform_button:hover {
    color: var(--gform-button-hover-text) !important;
    background-image:
            linear-gradient(var(--gform-button-hover-bg), var(--gform-button-hover-bg)),
            var(--gform-button-border-value),
            linear-gradient(var(--gform-button-hover-bg), var(--gform-button-hover-bg)) !important;
}

.form-section{
    position: relative;
    z-index: 2;
}

.rw-form-cta p {
    color: var(--gform-content-color);
}

/* ---------------- Footer — Background / Border ---------------- */

.rw-footer .fl-row-content-wrap {
    background-color: var(--footer-bg);
    border-top: var(--footer-border-width) solid var(--footer-border-color);
}

/* ---------------- Footer — Logo ---------------- */

.rw-footer img.pp-photo-img {
    filter: var(--footer-logo-filter);
}

/* ---------------- Footer — Navigation ---------------- */

.rw-footer span.menu-item-text {
    color: var(--footer-nav-color);
    transition: color 0.2s ease;
}

.rw-footer a:hover span.menu-item-text {
    color: var(--footer-nav-color-hover);
}

.rw-footer {
    position: relative;
    z-index: 1;
}

.footer-contact span.title-text.pp-primary-title {
    color: var(--footer_title_color);
}

.footer-contact .pp-sub-heading {
    color: var(--footer_content_color);
}

/* ---------------- Blog — Footer ---------------- */
.blog .rw-footer .fl-row-content-wrap, .single-post .rw-footer .fl-row-content-wrap, .page-id-28683 .rw-footer .fl-row-content-wrap  {
    min-height: unset;
}

/* ---------------- Stats — Layout ---------------- */

.rw-stats-section__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.rw-stats-section__number {
    font-weight: 500;
}

.rw-stats-section__item {
    text-align: center;
}

/* ---------------- Stats — Text ---------------- */

.rw-stats-section__number {
    font-size: var(--stats-font-size);
    line-height: 1.1;
}

.rw-stats-section__prefix {
    color: var(--stats-prefix-color);
}

.rw-stats-section__value {
    color: var(--stats-number-color);
}

.rw-stats-section__suffix {
    color: var(--stats-suffix-color);
}

.rw-stats-section__byline {
    color: var(--stats-byline-color);
    margin-top: 8px;
}

.rw-separator .fl-separator {
    border-top-color: var(--stats-separator-color);
    border-top-width: var(--stats-separator-width);
}

@media (max-width: 992px) {
    .rw-stats-section__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .rw-stats-section__number {
        font-size: 60px;
    }
}

/* ---------------- Expertise Tabs — Layout ---------------- */

.rw-expertise-tabs__inner {
    max-width: 1520px;
    margin: 0 auto;
}

.rw-expertise-tabs__grid {
    display: grid;
    grid-template-columns: 550fr 903fr; /* preserves the 550:903 ratio at any container width */
    gap: 67px;
}

.rw-expertise-tabs__list {
    min-width: 0;
    padding-top: 185px;
    padding-bottom: 220px;
}

.rw-expertise-tabs__card-wrap {
    position: relative;
    min-width: 0;
}

@media (max-width: 1200px) {
    .rw-expertise-tabs__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .rw-expertise-tabs__list {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ---------------- Expertise Tabs — Tab List ---------------- */

.rw-expertise-tabs__list-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-bottom: 1px solid var(--exptab-separator-color);
    border-radius: 0;
    padding: 23px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-radius 0.2s ease, border-color 0.2s ease;
}



.rw-expertise-tabs__list-item h3 {
    color: var(--exptab-title-color);
    margin: 0;
    transition: color 0.2s ease;
}

.rw-expertise-tabs__list-item:hover,
.rw-expertise-tabs__list-item.is-active {
    background-color: var(--exptab-hover-bg);
    border-radius: var(--exptab-hover-border-radius);
    border-bottom-color: transparent;
}

/* Hide the previous item's separator line (its own border-bottom) whenever
   the next item is hovered/active, so the rounded hover/active background
   doesn't get visually cut by a straight line above it. */
.rw-expertise-tabs__list-item:has(+ .rw-expertise-tabs__list-item:hover),
.rw-expertise-tabs__list-item:has(+ .rw-expertise-tabs__list-item.is-active) {
    border-bottom-color: transparent;
}

.rw-expertise-tabs__list-item:hover h3,
.rw-expertise-tabs__list-item.is-active h3 {
    color: var(--exptab-title-hover-color);
}

/* ---------------- Expertise Tabs — Card ---------------- */

.rw-expertise-tabs__card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border: var(--exptab-card-border-width) solid transparent;
    border-radius: var(--exptab-card-border-radius);
    background-image: linear-gradient(var(--exptab-card-bg), var(--exptab-card-bg)), var(--exptab-card-border-value), linear-gradient(var(--exptab-card-bg), var(--exptab-card-bg));
    background-origin: border-box, border-box, border-box;
    background-clip: padding-box, border-box, border-box;
}

.rw-expertise-tabs__card.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---------------- Expertise Tabs — Card Image ---------------- */

.rw-expertise-tabs__card-image {
    padding: 40px 40px 0;
    margin-bottom: 40px;
}

.rw-expertise-tabs__card-image img {
    width: 100%;
    aspect-ratio: 21 / 9;
    object-fit: cover;
    border-radius: var(--exptab-card-image-border-radius);
    display: block;
}

@media (max-width: 1200px) {
    .rw-expertise-tabs__card-image {
        padding: 20px 20px 0;
        margin-bottom: 20px;
    }

    .rw-expertise-tabs__card-image img {
        aspect-ratio: 16 / 9;
    }
}

/* ---------------- Expertise Tabs — Card Text ---------------- */

.rw-expertise-tabs__card-title,
.rw-expertise-tabs__card-content,
.rw-expertise-tabs__card-position-title,
.rw-expertise-tabs__card-position-list {
    padding-left: 60px;
    padding-right: 60px;
}

.rw-expertise-tabs__card-title {
    color: var(--exptab-card-title-color);
}

.rw-expertise-tabs__card-content {
    color: var(--exptab-card-content-color);
}

.rw-expertise-tabs__card-position-title {
    color: var(--exptab-card-position-title-color);
}

.rw-expertise-tabs__card-position-list {
    color: var(--exptab-card-position-list-color);
}

.rw-expertise-tabs__card > *:last-child {
    padding-bottom: 100px;
}

@media (max-width: 1200px) {
    .rw-expertise-tabs__card-title,
    .rw-expertise-tabs__card-content,
    .rw-expertise-tabs__card-position-title,
    .rw-expertise-tabs__card-position-list {
        padding-left: 20px;
        padding-right: 20px;
    }

    .rw-expertise-tabs__card > *:last-child{
        padding-bottom: 40px;
    }
}

.rw-expertise-tabs__card-position-list {
    column-count: 2;
    column-gap: 0px;
    max-width: 700px;
}

.rw-expertise-tabs__card-position-list p {
    margin: 0 0 8px;
    break-inside: avoid;
}

h2.rw-expertise-tabs__title {
    margin-bottom: 60px;
}

@media (max-width:1300px){
    h2.rw-expertise-tabs__title {
        margin-bottom: 20px;
    }
}

strong {
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .rw-expertise-tabs__card-position-list {
        column-count: 1;
    }
}

/* ---------------- Capability Section — Layout ---------------- */

.rw-capability {
    --rw-cap-gutter: calc((100vw - 1180px) / 2);
    overflow-x: hidden; /* safety net — this section assumes it's a genuinely edge-to-edge BB row */
}

.rw-capability__row .rw-btns{
    margin-top: 30px;
}

.rw-capability__row {
    display: grid;
    grid-template-columns: 960fr 550fr;
    gap: 40px;
    padding-right: var(--rw-cap-gutter); /* keeps the content column's right edge aligned with the normal site container */
}

.rw-capability__left-col {
    padding-left: var(--rw-cap-gutter); /* insets the title to match the normal container's left edge */
}

.rw-capability__title {
    margin-bottom: 40px;
    padding-right: 30px;
}

.rw-capability__image {
    margin-left: calc(var(--rw-cap-gutter) * -1); /* cancels the left-col padding, pulling the image back out to the true edge */
    width: calc(100% + var(--rw-cap-gutter)); /* stretches to compensate for the negative margin, so the image's right edge stays put */
}

.rw-capability__image img {
    width: 100%;
    height: 650px;
    object-fit: cover;
    display: block;
}

.capability-separator .fl-separator {
    border-top-color: var(--capability-separator-color);
    border-top-width: var(--capability-separator-width);
}

@media (max-width: 1260px) {
    .rw-capability__left-col {
        padding-left: 40px;
        padding-right: 40px;
    }

    .rw-capability__row {
        gap: 0px;
    }
}



@media (max-width: 1200px) {
    .rw-capability {
        --rw-cap-gutter: 0px; /* once stacked, everything behaves like a normal full-width block */
    }

    .rw-capability__content-col {
        padding-left: 40px;
        padding-right: 40px;
    }

    .rw-capability__row {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-right: 0;
    }

    .rw-capability__left-col {
        padding-left: 40px;
    }

    .rw-capability__image {
        margin-left: 0;
        width: 100%;
    }

    .rw-capability__image img {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 769px) {
    .rw-capability__left-col {
        padding-left: 20px;
        padding-right: 20px;
    }

    .rw-capability__content-col {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ---------------- Capability Section — Image Border Radius ---------------- */
/* Above 1260px, image bleeds to the left edge, so only the top-right/
   bottom-right corners are rounded — left corners stay square since
   there's no visible edge there to round. At 1260px and below the image
   is full-width (no bleed), so all four corners round evenly using the
   same option value. */

.rw-capability__image img {
    border-radius: 0 var(--capability-image-border-radius) var(--capability-image-border-radius) 0;
}

@media (max-width: 1260px) {
    .rw-capability__image img {
        border-radius: var(--capability-image-border-radius);
    }
}

/* ---------------- Capability Section — Text ---------------- */

.rw-capability__item-title {
    margin-top: 24px;
    margin-bottom: 8px;
}

.rw-capability__item-title:first-of-type {
    margin-top: 0;
}


/* ---------------- Radial Glow Accents — Reusable Utility ---------------- */

.hero-width {
    position: relative;
}

.hero-width::before {
    content: '';
    position: absolute;
    width: 933px;
    height: 933px;
    background-image: var(--rw-glow-gradient);
    pointer-events: none;
    z-index: 0;
    bottom: -400px;
}

@media (max-width: 992px) {
    .hero-width::before {
        width: 600px;
        height: 600px;
        bottom: -300px;
        left: -100px;
    }
}


.rw-testimonials-section {
    position: relative;
}

.rw-testimonials-section::before {
    content: '';
    position: absolute;
    width: 933px;
    height: 933px;
    background-image: var(--rw-glow-gradient);
    pointer-events: none;
    z-index: 0;
    right: 0px;
    top: -400px;
    right: -400px
}

@media (max-width: 992px) {
    .rw-testimonials-section::before {
        width: 500px;
        height: 500px;
        top: -150px;
        right: -150px
    }
}

/* ---------------- Expertise Tab Card — Radial Glow ---------------- */

.rw-expertise-tabs__card-wrap::before {
    content: '';
    position: absolute;
    width: 933px;
    height: 933px;
    background-image: var(--rw-glow-gradient);
    pointer-events: none;
    z-index: 0;
    bottom: -200px;
    left: -150px;
}

@media (max-width: 992px) {
    .rw-expertise-tabs__card-wrap::before {
        width: 500px;
        height: 500px;
        left: 0px;
    }
}

/* ---------------- Form — Radial Glow ---------------- */

.rw-footer{
    position: relative;
    z-index: 1 !important;
}
.rw-footer::after {
    content: '';
    position: absolute;
    width: 933px;
    height: 933px;
    background-image: var(--rw-glow-gradient);
    pointer-events: none;
    z-index: -1;
    bottom: 0;
    left: -50px;
}

@media (max-width: 992px) {
    .rw-footer::after {
        width: 500px;
        height: 500px;
        right: 0;
        top:-250px;
        z-index:2;
    }
}


@media screen and (max-width: 992px) and (min-width: 769px) {

}

@media screen and (max-width: 768px) and (min-width: 320px) {

}