/*
Theme Name: Total Child Theme
Theme URI: https://your-site.com
Description: Your site description. Go to Appearance > Editor to modify this file.
Author: Your Name
Author URI: https://your-site.com
Template: Total
Version: 1.0
*/






/*@import '../wp-content/themes/total-child-theme/css/vijay-icons.css';*/


/*/////////////////////////////////////////////////////////////////////
 // 
 // Custom theme code styles
 // Written by Themelize.me (http://themelize.me)
 // 
 // This is an empty starter template for overriding styles
 // set by Bootstrap & the theme
 // 
 // ----------------------------------------------------
 // 
 // Remove unused code for better performances
 // 
 // ----------------------------------------------------
 // 
 // @see - Usefuls tools online for editing
 // 1. http://charliepark.org/bootstrap_buttons/ - Button style generator
 // 2. http://www.colorzilla.com/gradient-editor/ - CSS3 gradient maker
 // 
 // @note
 // To ensure custom styles are picked up
 // wrap definitions in body tag
 // ie.
 // body .navbar-inner {
 //   background: #ff0000;
 // }
 // 
 /////////////////////////////////////////////////////////////////////*/
/*
 * --------------------------------------------------
 * 1. General Elements
 *--------------------------------------------------
 */
 /* Varialbes */
 :root {
     --line-thickness: max(round(0.125em, 1px), 1px);
     --heading-font-weight: 600;
     --line-height-heading: 1.25;
     --section-sub-head: 1.25em;
     --shape-bg-color-alpha: #cee6fdff;
     --box-border-radius: 075em;

 }
#navigation {
  /* 1. Navigation wrapper */
}
#highlighted {
  /* 2. Highlighted (below header) wrapper */
}
#content {
  /* 3. Content wrapper */
}
.homeHead_title {
	text-align:center;
	font-size:30px;
	font-weight: bolder;
    margin: 50px 0 45px;
	color: #1065a6;
}
.featureIcon {
    padding-right: 0 !important;
    text-align: right;
}
.featureHead {
    font-size: 2.1em;
    font-weight: bold;
	margin-right: 15px;
}
.feaSubHead {
    color: #848484;
    font-size: 14px;
    margin: -5px 0 20px 0;
}

.icon-custom_development, .icon-software_product_development, .icon-ux_design, .icon-web_development, .icon-custom_software, .icon-mobile_apps, .icon-responsive_design {
    margin-top: 6px;
}

/* Header */
header#site-header {
    border-top: 1px solid #1065a617;
    border-bottom: 1px solid #1065a647;
}

/* Home Page */
.home_head {
    margin: 15px 0 30px 0;
    text-transform: uppercase;
}
.home_head_white, .home_desc_white {
  color: #ffffff;
}
.home_desc_bl {
    font-size: 22px;
    line-height: 1.8em;
}
.home_head_white {
    margin: 55px 0 30px 0;
    text-transform: uppercase;
}
.home_desc_white {
    font-size: 22px;
    line-height: 1.8em;
    margin-bottom: 20px !important;
}
.home_head_white::before {
    background-color: #ff9b01;
    content: '';
    display: block;
    height: 4px;
    top: 0px;
    width: 45px;
    margin-bottom: 15px;
}
div#home_services_title:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
div#home_services_title {
    font-size: 2.1rem;
    line-height: 1.6em;
    margin-top: 50px;
    font-weight: 600;
    color: #000;
}
div#home_why_head_bl:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
div#home_why_head_bl {
    font-size: 1.8rem;
    line-height: 1.6em;
    margin-top: 30px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 30px;
}
.home_whychoose_head {
    padding-top: 50px;
}
.responsive-mask-container-home {
    width: 100%;
    height: 270px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
    top: -50px;
}
.masked-image-home {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/06/global_map_darkedge_v2-min.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}






/* Contact Page */
label.gfield_label[for="input_1_1_3"], label.gfield_label[for="input_1_2"], label.gfield_label[for="input_1_3"], label.gfield_label[for="input_1_6"] {
    color: #777;
}
.name_first label[for='input_1_1_3'], .name_last label[for='input_1_1_6'] {
    display: none !important;
}
#input_1_2, #input_1_3 {
    width: 100%;
}
input#gform_submit_button_1 {
    float: right;
}


/* Careers Page */
.row.stats {
    width: 600px;
    padding-left: 20px;
}
.name_first label[for="input_2_2_3"], .name_last label[for="input_2_2_6"] {
    display: none !important;
}
.instruc {
    font-weight: 600;
}
.instruc hr {
    margin: 0;
}
.careerTitle {
    width: 100%;
    display: flex;
}
#careSection {
    font-size: 30px;
    font-weight: bold;
    float: left;
    margin-right: 15px;
}
.careerSubtitle {
    font-size: 14.7px;
    color: #858585;
    margin-top: -8px;
}
.title-divider {
    float: left;
    width: 100%;
    margin: auto 0;
    height: 20px;
}

/* Services Page */
.xpad {
    margin-left: 8px;
}
.servPad{
	 margin-bottom: 25px;
}
.liInd{
	list-style: none;
    padding-left: 15px;
}

/* Services Pages */
.services_con, .services_con h2, .services_con h3  {
	color:#ffffff;
}
.black-section-title, #why_choose_vijay {
	font-size: 3rem;
} 
.term-item__content-wrapper.icon-wrapper.astro-2lxndunr {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 1 auto;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    flex-direction: row;
}
.term-item__text.term-basis.term-width.astro-2lxndunr {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: minmax(67px, auto) 1fr;
    padding-right: 0;
    row-gap: 16px;
	padding-left: 32px;
	margin-bottom: 0;
}
h3.term-item__title.title-space.title-pad.astro-vvej4mxm {
    font-size: 26px;
    letter-spacing: -.8px;
    line-height: 1.24;
    vertical-align: bottom;
    white-space: pre-wrap;
    margin-bottom:30px;
	  margin-top: 0;
}
.number-margin.icon.astro-2lxndunr svg {
    height: 80px;
    width: 80px;
}
.term-item__description.desc-pad.astro-2lxndunr.adjust-margin {
    font-weight: 100;
	margin-top: -30px;
}
.build_smart_card {
    color: #373737;
}
#why_choose_vijay {
	font-size: 2.85rem;
}
div#why_title:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
div#why_title {
    font-size: 1.8rem;
    line-height: 1.6em;
    margin-bottom: 10px;
    font-weight: 500;
    color: #000;
    margin-bottom: 30px;
}
div#why_txt {
    line-height: 1.5em;
    margin-bottom: 20px;
}
.contact_form_con {
    padding: 3rem;
    animation: ease-left .3s forwards;
    animation-delay: 1.6s;
    box-shadow: 0 2px 20px #00000012;
    text-align: center;
}
.gform_contact_text {
    color: #9b9b9b;
}
.gform_contact_text label.gfield_label.gform-field-label {
    font-weight: 300;
}
.gform_contact_text span.gfield_required {
    font-size: smaller;
}
.gform_contact_text input::placeholder {
  color: #9d9d9d;
  opacity: 1; /* Firefox */
}
.gform_contact_text input::-ms-input-placeholder { /* Edge 12 -18 */
  color: #9d9d9d;
}
.gform_title {
    font-size: 1.4rem;
}
.ginput_container.ginput_recaptcha {
  display: flex;
  justify-content: center;
}

div#why_title_black:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
div#why_title_black {
    font-size: 1.8rem;
    line-height: 2.4em;
    margin-bottom: 10px;
    font-weight: 500;
    color: #fff;
}
div#why_desk_black {
    color: #fff;
}

.vc_tta-tab span.vc_tta-title-text {
    font-size: 22px;
}
.service_from_con {
    padding: 3rem;
    box-shadow: 0 2px 20px #00000026;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.service_from_con .vc_column-inner {
    padding: 0;
}
@media screen and (max-width: 768px) or (max-width: 430px) or (max-width: 932px) {
  .process_table .col1 {
    width: 0px;
    padding-bottom: 15px;
    border: none;
    padding: 0;
  }

  td.table-data-title.process_table {
    font-size: 20px;
    padding-right: 10px;
    font-weight: 500;
  }
  td.table-data-index.process_table {
    color: #ff9c00;
    font-size: 20px;
    padding-right: 10px;
    padding-top: 28px;
    padding-bottom: 30px;
  }
}
/* Case Study page - DocCentral */
.cas_stud_title .vcex-heading-inner {
  font-size: clamp(1.75rem, 4vw + 1rem, 2.8125rem);
}
.responsive-mask-container-dc {
    width: 100%;
    height: 500px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
}
.masked-image-dc {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/boardroom.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}


/* This version is for the LEFT mask layout */
.client_challenge-dc {
    width: 100%;
    height: 700px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
}
.masked-image-ltms {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.left-mask-dc {
    background-image: url('/wp-content/uploads/2025/04/legal-e1745800921463.jpg');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;

}
.challenge_grid_con {
    grid-template-columns: 45px 1fr;
}
.chall_row_01 {
    animation-duration: .25s;
    animation-delay: .2s;
    transition-timing-function: ease-in;
}
.chall_row_02 {
    animation-duration: .25s;
    animation-delay: .25s;
    transition-timing-function: ease-in;
}
.chall_row_03 {
    animation-duration: .25s;
    animation-delay: .30s;
    transition-timing-function: ease-in;
}
.chall_row_04 {
    animation-duration: .25s;
    animation-delay: .35s;
    transition-timing-function: ease-in;
}
.challenge_heading {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 250%;
}
.cs_chall_icon svg[id^="svg-replaced"] {
    width: 29px;
}

.tech_approach {
    position: relative;
    width: 100%;
    max-width: 459px;
    aspect-ratio: 459 / 860;
    margin: 0 auto;
}

.key_features-ltms {
    width: 100%;
    height: 800px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.kf_masked-image-ltms {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.kf_left_mask-ltms {
    background-image: url('/wp-content/uploads/2025/04/g3tech.png');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;
    top: -70px;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}

/* Pyramid */
.kf_pyramid {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 1000px;
  margin: auto;
  gap: 0.25em;
}

.kf_pyramid-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.kf_pyramid_layer_01 {
  position: relative;
  height: 104px;
  margin-right: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
    flex-direction: column;
    position: relative;
    width: 19.75%;
    margin-inline-start: 19.0%;
    text-align: center;
    -webkit-box-align: center;
    align-items: center;
    --flex-align: center;
    --descendant-align-self: center;
    --descendant-align-self-left: flex-start;
    --descendant-align-self-center: center;
    --descendant-align-self-right: flex-end;
}
.kf_pyramid_layer_02 {
  position: relative;
  height: 104px;
  margin-right: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
    flex-direction: column;
    position: relative;
    width: 44.75%;
    margin-inline-start: 12.625%;
    text-align: center;
    -webkit-box-align: center;
    align-items: center;
    --flex-align: center;
    --descendant-align-self: center;
    --descendant-align-self-left: flex-start;
    --descendant-align-self-center: center;
    --descendant-align-self-right: flex-end;
}
.kf_pyramid_layer_03 {
  position: relative;
  height: 104px;
  margin-right: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
    flex-direction: column;
    position: relative;
    width: 73.125%;
    margin-inline-start: 6.4375%;
    text-align: center;
    -webkit-box-align: center;
    align-items: center;
    --flex-align: center;
    --descendant-align-self: center;
    --descendant-align-self-left: flex-start;
    --descendant-align-self-center: center;
    --descendant-align-self-right: flex-end;
}
.kf_pyramid_layer_04 {
  position: relative;
  height: 104px;
  margin-right: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
    flex-direction: column;
    position: relative;
    width: 109.5%;
    margin-inline-start: 0.25%;
    text-align: center;
    -webkit-box-align: center;
    align-items: center;
    --flex-align: center;
    --descendant-align-self: center;
    --descendant-align-self-left: flex-start;
    --descendant-align-self-center: center;
    --descendant-align-self-right: flex-end;
}

.kf_trapezoid {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}
.kf_trapezoid_01 {
    position: absolute;
    inset: 0px;
    overflow: visible;
    width: 128.078px;
    height: 103.719px;
    cursor: pointer;
    fill: #cee6fd;
}
.kf_trapezoid_02 {
    position: absolute;
    inset: 0px;
    overflow: visible;
    width: 256.156px;
    height: 103.719px;
    cursor: pointer;
    fill: #cee6fd;
}
.kf_trapezoid_03 {
    position: absolute;
    inset: 0px;
    overflow: visible;
    width: 384.234px;
    height: 103.719px;
    cursor: pointer;
    fill: #cee6fd;
}
.kf_trapezoid_04 {
    position: absolute;
    inset: 0px;
    overflow: visible;
    width: 512.312px;
    height: 103.719px;
    cursor: pointer;
    fill: #cee6fd;
}
.kf_icon {
  position: relative;
  z-index: 1;
}

.kf_icon .svg_icon .icon {
    fill: #333333;
}
div#kf_icon_01 {
    width: 1.5em;
    padding-top: 25px;
}
div#kf_icon_02 {
    width: 2em;
}
div#kf_icon_03 {
    width: 1.4em;
    padding-top: 5px;
}
div#kf_icon_04 {
    width: 1.5em;
    padding-top: 5px;
}

.kf_text h4 {
  margin: 0;
  font-size: 1.2em;
}
.kf_text {
    position: relative;
    overflow: visible;
    display: block; /* or flex */
    width: 100%;
}
.kf_text p {
  margin: 0.25em 0 0 0;
  color: #555;
  font-size: 0.95em;
}
.kf_text .themed-line {
    background-color: #b4cce3;
    border-radius: 0.75em;
}
.kf_text_bar {
    position: absolute;
    bottom: -1.4875em;
    left: -1.2em;
    right: 0;
    height: 2px;
    transform: scaleY(0.5);
    transform-origin: center;
}

/* Next Steps */
.next_steps-ltms {
    width: 100%;
    height: 750px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.next_steps-image-ltms {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.ns_left_mask-ltms {
    background-image: url('/wp-content/uploads/2025/05/hand_shake.jpg');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;
    top: -70px;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}

div[class^="next_steps_con_0"] {
display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    position: relative;
    gap: 1.5em;
    padding-top: 0em;
    padding-bottom: 1em;
    -webkit-padding-start: 0em;
    padding-inline-start: 0em;
}

.next_steps-html-shape-background {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    min-width: 0.75em;
    width: 0.75em;
    height: 100%;
    cursor: default;
    text-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    --flex-align: center;
    width: 13.5px;
    height: auto;
    background: #cee6fd;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.next_steps_con_02 {
    margin-left: 35px;
}
.next_steps_con_03 {
    margin-left: 65px;
}


@media screen and (max-width: 768px) {
  .kf_pyramid {
    padding: 1em;
  }

  .kf_pyramid-row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5em;
  }
    .kf_pyramid-row.kfp_02, .kf_pyramid-row.kfp_03, .kf_pyramid-row.kfp_04 {
        margin-top: 11px;
    }
    .themed-line.kf_text_bar{
        display: none;
    }

  .kf_pyramid_layer_01 {
     width: 40% !important;
    margin-inline-start: 0 !important;
    margin-right: 0;
  }
  .kf_pyramid_layer_02 {
     width: 80% !important;
    margin-inline-start: 0 !important;
    margin-right: 0;
  }
  .kf_pyramid_layer_03 {
     width: 122% !important;
    margin-inline-start: 0 !important;
    margin-right: 0;
  }
  .kf_pyramid_layer_04 {
    width: 160% !important;
    margin-inline-start: 0 !important;
    margin-right: 0;
  }

  .kf_trapezoid_01,
  .kf_trapezoid_02,
  .kf_trapezoid_03,
  .kf_trapezoid_04 {
    width: 100% !important;
    height: auto;
  }

  .kf_icon {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .kf_text {
    width: 100%;
    padding: 0 1em;
    position: relative;
  }

  .kf_text h4 {
    font-size: 1.05em;
  }

  .kf_text p {
    font-size: 0.9em;
  }

  .kf_text_bar {
    bottom: -1em;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
  }
}





.meas_results_con {
    text-align: center;
}

.meas_results_percentage {
    font-size: 3.3em;
    font-weight: 700;
    line-height: 2em;
}
.meas_results_headign {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: 10px;
}
.meas_results_percentage {
    font-size: 3em;
    font-weight: 600;
    line-height: 2em;
}

svg#tech_stack {
    width: 360px;
}




.tech-approach-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/doccentral_mackbook-min.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}

.tech_app_list {
    grid-template-columns: 120px 1fr;
}

svg#tech_arrow {
    width: 90px;
}
#tech_arrow path#triangle {
    fill: #CDDAFA;
}
.svg_icon.cs_tech_01 .vcex-image-inner, .svg_icon.cs_tech_02 .vcex-image-inner, .svg_icon.cs_tech_03 .vcex-image-inner, .svg_icon.cs_tech_04 .vcex-image-inner {
    padding: 0 !important;
}
.tech_app_row01 {
    animation-duration: .25s;
    animation-delay: .2s;
    transition-timing-function: ease-in;
}
.tech_app_row02 {
    animation-duration: .25s;
    animation-delay: .25s;
    transition-timing-function: ease-in;
}
.tech_app_row03 {
    animation-duration: .25s;
    animation-delay: .30s;
    transition-timing-function: ease-in;
}
.tech_app_row04 {
    animation-duration: .25s;
    animation-delay: .35s;
    transition-timing-function: ease-in;
}
/* Desktop styles (default) */
.tech_app_heading {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 250%;
}

.tech_approach_con {
  padding: 85px 63px;
  z-index: 100;
}

/* Mobile overrides */
@media (max-width: 767px) {
  .tech_app_heading {
    line-height: 150%;
  }

  .tech_approach_con {
    padding: 10px 25px 25px 0;
  }
  .tech_app_row01, .tech_app_row02, .tech_app_row03, .tech_app_row04 {
    margin-bottom: 30px;
  }
}


.pie_sync_con svg#pie_sync {
    width: 362px;
}
svg .cir_tri {
    fill: #ccdafa;
}
.pie_sync_con {
    text-align: center;
}

.ux_heading {
    font-size: 1.40625em;
    font-weight: 600;
    margin-bottom: 10px;
}
.ux_list_con {
    grid-template-columns: 40% 40%;
    justify-content: center;
    line-height: 2.1em;
}
/* Desktop styles (default) */
.ux_tran_con_pad_02,
.data_sync_row02 {
  padding: 0 63px 65px 63px;
}

.ux_tran_con_pad {
  padding: 20px 63px 0 63px;
}

/* Mobile overrides */
@media (max-width: 767px) {
  .data_sync_row02,
  .ux_tran_con_pad_02 {
    padding: 0 0 35px 0;
  }

  .ux_tran_con_pad {
    padding: 20px 5px 0 5px;
  }
}


.imp_tech_con {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* default: 2 columns */
  gap: 20px;
  justify-content: center;
  padding: 1rem;
  margin: 0 63px;
}

.imp_tech_boxes {
  background-color: #ccdafa;
  padding: 20px;
  border-radius: 6px;
}

/* Mobile: stack into 1 column */
@media (max-width: 767px) {
  .imp_tech_con {
    grid-template-columns: 1fr;
    margin: 0;
  }
}


.partner_col_head {
    font-size: 1.35em;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3em;
}
.partner_col_bar {
    background-color: #ccdafa;
    height: 20px;
    margin-bottom: 30px;
}
div[class^="partner_col_con_0"]{
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    transition-timing-function: ease-in;
}
.partner_col_con_01 {
    padding-top: 85px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.4s;
}
.partner_col_con_02 {
    padding-top: 54px;
     -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.6s;
}
.partner_col_con_03 {
    padding-top: 27px;
     -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.8s;
}
.partner_col_con_04 {
     -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 2.0s;
}
.partner_vijay_con_pad ,.partner_vijay_con_pad {
    padding: 65px 63px;
}
.data_sync_row01 {
    padding: 65px 63px 0 63px;
}
.mtc_solution_row01 {
  padding: 65px 63px 0 63px;
}

/* Mobile overrides */
@media (max-width: 767px) {
  .data_sync_row01 {
    padding: 0;
  }
  .partner_vijay_con_pad ,.partner_vijay_con_pad {
    padding: 25px 10px;
  }
  .partner_col_con_01, .partner_col_con_02, .partner_col_con_03, .partner_col_con_04 {
    padding: 15px;
  }
  .mtc_solution_row01 {
    padding: 65px 63px 0 63px;
  }

}



.measure_con_grid {
  display: flex;
  justify-content: center;
  padding: 0 2rem;
}

/* .measure_grid_01 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem; 
  max-width: 900px;
  width: 100%;
  align-items: stretch; 
} */

.measure_grid_01 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.meas_01 {
  grid-column: 1;
}

.meas_02 {
  grid-column: 2;
}

.meas_03 {
  grid-column: 1 / span 2; /* span both columns */
  justify-self: center;    /* center content */
  max-width: 400px;         /* optional: limit width */
}

.measure_con {
  background: #f9f9f9;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}

/* Mobile: stack */
@media (max-width: 768px) {
  .measure_grid_01 {
    grid-template-columns: 1fr;
  }

  .meas_01,
  .meas_02,
  .meas_03 {
    grid-column: auto;
    justify-self: stretch;
  }
}




/* Shared card styling */
.measure_con {
  flex: 1 1 280px;
  max-width: 400px;
  background: #ccdafa;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;          /* important: remove margin entirely */
  box-sizing: border-box;
}

/* Third block gets full width but still centers */
/* .meas_03 {
  width: 100%;
  max-width: 400px;
  align-self: center;
  margin-top: -5px;
} */

.measure_con_lg_heading {
  font-size: 3.3rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.measure_heading {
  font-size: 1.45rem;
  margin-bottom: 0.7rem;
  font-weight: 600;
}

.measure_desc {
  font-size: 1rem;
  color: #555;
  line-height: 1.4;
}

.measure-mask-container {
    position: relative;
    width: 100%;
    max-width: 455px;            /* Maintains design fidelity */
    aspect-ratio: 455 / 810;     /* Ensures correct height at all sizes */
    margin: 0 auto;              /* Centered horizontally */
    overflow: hidden;
    background-color: #f8f8f8;   /* Optional: contrast background */
}

.measure-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/measure_image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/wiggle-right.doccen.svg');
    mask-image: url('/wp-content/uploads/2025/05/wiggle-right.doccen.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
}

/* Tech Stack */
.tab-content-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, 140px);
    justify-content: center;
    row-gap: 30px;
    list-style: none;
}
.tab-content-item {
    justify-self: baseline;
}
.tab-content {
    align-items: center;
    display: flex;
    flex-direction: column;
}
.tab-content-img-wrapper {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 100px;
    justify-content: center;
    margin-bottom: 16px;
    transition: box-shadow .5s;
    width: 100px;
}
.tab-content-title {
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}
.et-tabs-style-underline nav {
    background: transparent;
}


.et-tabs-style-underline nav a {
    padding: 0.4em 1em;
    border-left: none;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}
a.et-anchor-tag {
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #c5c5c5;
}
a.et-anchor-tag:after {
  border-bottom: 0x solid #c5c5c5;
}

/* Process Table */
thead.process_table {
    background: none;
}
.process_table_con table.process_table {
    width: 90%;
    margin: 0 auto;
}
.process_table .table-header:where(.process_table) {
        padding: 18px 0;
    }
.process_table .table-header:where(.process_table):nth-child(n+2) {
    padding-bottom: 30px;
}
.table-row-content:where(.process_table) {
    border-top: 4px solid #f4f4f4;
}
.process_table .col1 {
    width: 40px;
    padding-bottom: 15px;
    border: none;
}
.process_table .col2 {
    width: 40%;
    padding-bottom: 15px;
    border: none;
}
.process_table .col3 {
    width: 45%;
    padding-bottom: 15px;
    border: none;
}
.process_table .col4 {
    width: 30%;
    padding-bottom: 15px;
    border: none;
}
.process_table .table-header:where(.process_table):nth-child(4) {
    padding-left: 50px;
}
td.table-data-title.process_table {
    font-size: 28px;
    padding-right: 30px;
    font-weight: 500;
}
td.table-data-index.process_table {
    color: #ff9c00;
    font-size: 32px;
    padding-right: 20px;
    padding-top: 22px;
    padding-bottom: 30px;
}
.table-data-description:where(.process_table) {
    padding-top: 30px;
    vertical-align: top;
    padding-bottom: 30px;
}
.table-data-time:where(.process_table) {
    padding-left: 30px;
    padding-top: 30px;
    vertical-align: top;
    padding-bottom: 30px;
}
input#gform_submit_button_18 {
    width: 100% !important;
}
.or_sep {
  display: flex;
  align-items: center;
  text-align: center;
  color: #333; /* optional text color */
  font-weight: bold; /* optional styling */
  margin: 20px 0; /* spacing above and below */
}

.or_sep::before,
.or_sep::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #ccc;
}

.or_sep::before {
  margin-right: 10px;
}

.or_sep::after {
  margin-left: 10px;
}
.meeting:before {
    content: url(/wp-content/uploads/2025/05/schedule.png)
}
p.meeting.meeting_con {
    align-items: center;
    display: flex;
    font-size: 18px;
    gap: 8px;
    letter-spacing: .24px;
    line-height: 150%;
    padding-top: 10px;
    transition: all .3s;
    justify-content: center;
}


td.table-data-index.process_table {

}

/* Case /Study */
.case_study_header .vc_column-inner {
    --wpex-vc-column-inner-margin-bottom: 15px;
}




/* Case Study page - LTMS */
.cas_stud_title .vcex-heading-inner {
  font-size: clamp(1.75rem, 4vw + 1rem, 2.8125rem);
}
.responsive-mask-container-ltms {
    width: 100%;
    height: 500px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.masked-image-ltms {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/lab_testing.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}


/* This version is for the LEFT mask layout */
.left-mask-ltms {
    background-image: url('/wp-content/uploads/2025/04/legal-e1745800921463.jpg');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;

}

.client_overview_head {
    font-size: 1.35em;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3em;
}
div[class^="client_overview_con_0"]{
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    transition-timing-function: ease-in;
}
.client_overview_01 {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.4s;
}
.client_overview_02 {
     -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.6s;
}
.client_overview_03 {
     -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.8s;
}
.co_img_con_04 {
    width: fit-content;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    mask: none !important;
}
.co_img_inner {
    inset: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    cursor: zoom-in;
    opacity: 0;
}
.co_img_inner_con {
    max-height: var(--media-maxH);
    max-width: var(--media-maxW);
    overflow: hidden;
    width: 100%;
    display: block;
}
.co_img_inner_scale {
    object-fit: contain;
    max-height: calc(var(--media-maxH) * 1);
    transform-origin: left top;
    transform: scale(1) translate(0%, 0%);
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}

.project_goals-ltms {
    position: relative;
    width: 100%;
    max-width: 459px;
    aspect-ratio: 459 / 860;
    margin: 0 auto;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}

.project_goals-mask-ltms {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/hardhat_tablet.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}

.tech_app_list {
    grid-template-columns: 120px 1fr;
}

svg#tech_arrow {
    width: 90px;
}
#tech_arrow path#triangle {
    fill: #CDDAFA;
}
.svg_icon.cs_tech_01 .vcex-image-inner, .svg_icon.cs_tech_02 .vcex-image-inner, .svg_icon.cs_tech_03 .vcex-image-inner, .svg_icon.cs_tech_04 .vcex-image-inner {
    padding: 0 !important;
}
.tech_app_row01 {
    animation-duration: .25s;
    animation-delay: .2s;
    transition-timing-function: ease-in;
}
.tech_app_row02 {
    animation-duration: .25s;
    animation-delay: .25s;
    transition-timing-function: ease-in;
}
.tech_app_row03 {
    animation-duration: .25s;
    animation-delay: .30s;
    transition-timing-function: ease-in;
}
.tech_app_row04 {
    animation-duration: .25s;
    animation-delay: .35s;
    transition-timing-function: ease-in;
}
/* Desktop styles (default) */
.tech_app_heading {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 250%;
}

.tech_approach_con {
  padding: 85px 63px;
}

svg#tech_stack .pie_slice {
    fill: #cee6fd;
}

/* Mobile overrides */
@media (max-width: 767px) {
  .tech_app_heading {
    line-height: 150%;
  }

  .tech_approach_con {
    padding: 10px 25px 25px 0;
  }
  .tech_app_row01, .tech_app_row02, .tech_app_row03, .tech_app_row04 {
    margin-bottom: 30px;
  }
}



/* Ecommerce Service page */
.service_type_heading {
    font-size: 3.1rem;
    line-height: inherit;
    text-transform: uppercase;
    padding-bottom: 10px !important;
    font-weight: 700;
    color: #000;
    border-bottom: 1px solid #ccc;
    min-width: 50vw;
    width: fit-content;
}
.why_title_ecom {
    font-size: 1.8rem;
    line-height: inherit;
    margin-bottom: 10px;
    font-weight: 500;
    color: #000;
}
.why_title_ecom::before {
    background-color: #ff9b01;
    content: '';
    display: block;
    height: 4px;
    top: 0px;
    width: 45px;
    margin-bottom: 15px;
}
.ecom_infographic {
   grid-column: 2 / span 2; /* Span columns 2 and 3 */
}
.ecom_infographic img {
    width: 80vw;
    height: auto;
    display: block;
    max-width: 55%;
}
.bf_card_specializing h3,
.bf_card_architecture h3 {
  font-size: 1.25rem;
  margin-bottom: 1em;
  color: #1a1a1a;
}

.bf_card_specializing ul,
.bf_card_architecture ul {
  list-style: disc inside;
  margin-left: 5px;
  line-height: 1.6;
  padding-right: 10px;
}
.bf_card_specializing ul li,
.bf_card_architecture ul li{

}
.ecom_partner_inEcom_img .vc_column-inner figure {
    overflow: hidden;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;
    margin-left: 40px;
}
.ecom-zoomable-img {
  transition: transform 0.3s ease, z-index 0.3s ease;
  cursor: zoom-in;
  position: relative;
  z-index: 1;
}

.ecom-zoomable-img img {
  max-width: 100%;
  height: auto;
  display: block;
}

.ecom-zoomed {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  max-height: 80vh !important;
  transform: translate(-50%, -50%);
  z-index: 9999;
  cursor: zoom-out;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
h2.black-section-title_revenue {
    font-size: 3em;
    text-align: center;
    color: #fff;
}
.ecom_revenue_text{ 
    text-align: center;
    font-size: 1.3em;
    color: #ffffff;
   }
.ecom_revenue_text:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 285px;
    margin: 10px auto;
}

.ecom_revenue {
    font-size: 1.2em;
    color: #ffffff;
    line-height: 2em;
}
.econ_rev_li_con {
    display: flex;
    flex-direction: row;
    margin-bottom: 40px !important;
}
.ecom_rev_icon_wrap {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.econ_rev_li_con .ecom_rev_icon_wrap::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    height: 1px;
    width: 0.75em;
    background-color: #ff9b01;
    transform: translateY(-50%);
    z-index: 0;
}

.ecom_rev_icon_ {
    line-height: 0;
    margin-bottom: 15px;
}
.ecom_rev_icon_ svg {
    width: 3.25em;
    height: 3.25em;
}
.ecom_rev_li_txt {
    display: flex;
    align-items: center;
    margin-left: 30px;
    font-size: 1.2em;
    line-height: 1.2em;
}
@media (max-width: 767px) { 
    .ecom_infographic {
        grid-column: 1;
    }
    .ecom_infographic img {
        width: 90vw;
        max-width: 100%;
    }
    .ecom_partner_inEcom_img .vc_column-inner figure {
      margin-left: 0;
      width: 100%;
    }
    .ecom-zoomable-img {
      pointer-events: none;
    }
}






  /* Bulk Fox Page */
.responsive-mask-container-bulkfox {
    width: 100%;
    height: 486px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
}
.masked-image-bulkfox {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/woman_computer.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}

/* filter & search */
.powerful_filter_col .vc_column-inner {
    padding: 85px 20px 65px 20px;
  }
.powerful_filter_con {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
    url(/wp-content/uploads/2025/05/filters_bar.jpg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-blend-mode: multiply; /* key part */
}
.filter_search_con {
    margin-top: 40px;
}
.filter_search_desc_con {
    margin: 10px 20px 0 20px;
}
.filter_search_heading {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 250%;
}
.bf_integration_con {
    text-align: center;
}
.bf_integration_con svg {
    width: 100%;
}

/* new filters */
.bf_filterS_section {
  padding: 0;
}

.bf_filterS_steps {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.bf_filterS_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 220px;
}

.bf_filterS_visual {
  position: relative;
  width: 280px;
}

.bf_filterS_arrow img,
.bf_filterS_arrow svg {
  display: block;
  width: 320px;
}

.bf_filterS_arrow svg path.cls-1 {
  fill: #cee6fd;
}

.bf_filterS_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  z-index: 1;
}
.bf_filterS_icon .bf_filter_icon_svg_01 {
    width: 62px;
}
.bf_filterS_icon .bf_filter_icon_svg_03 {
    width: 55px;
}

.bf_filterS_icon img,
.bf_filterS_icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.bf_filterS_content {
  margin-top: 0.5em;
  padding: 5px 42px 0 40px;
}

.bf_filterS_title {
    font-weight: 700;
    font-size: 1.25em;
    color: #ffffff;
    margin-bottom: 0.5em;
    text-align: left;
    margin-top: 20px;
}

.bf_filterS_desc {
    font-size: 1em;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    text-align: left;
}

@media (max-width: 768px) {
  .powerful_filter_col .vc_column-inner {
    padding: 85px 20px !important;
  }

  .bf_filterS_section {
    padding: 45px 0 0 0;
  }

  .bf_filterS_steps {
    display: flex;
    flex-direction: column;
    gap: 2.5em;
  }

  .bf_filterS_step {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 1em;
  }

  .bf_filterS_visual {
    width: 90px;
    height: 270px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bf_filterS_arrow svg.bf_filter_arrow_icon {
    transform: rotate(90deg);
    transform-origin: center;
    display: block;
  }

  .bf_filterS_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bf_filterS_icon {
    position: absolute;
    width: 42px;
    height: 42px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  /* Adjust icon sizes individually for mobile */
  .bf_filterS_icon .bf_filter_icon_svg_01 {
    width: 45px;
  }

  .bf_filterS_icon .bf_filter_icon_svg_03 {
    width: 42px;
  }
  /* Ensure the other icons stay consistent */
  .bf_filterS_icon .bf_filter_icon_svg_02,
  .bf_filterS_icon .bf_filter_icon_svg_04 {
    width: 42px;
  }



  div[class^="bf_filter_icon_svg"] {
    width: 100%;
    height: 100%;
  }

  .bf_filterS_content {
    text-align: left;
    margin-top: 0;
    padding: 0 5px 0 20px;
  }

  .bf_filterS_title {
    margin: 0 0 0.25em;
    font-size: 1.25em;
    font-weight: 600;
    color: #ffffff;
  }

  .bf_filterS_desc {
    font-size: 1em;
    line-height: 1.6;
    color: #ffffff;
  }
}


/* Subscription Plans */
bf_subscrip_outer_col_con {
    padding: 85px 63px 55px 63px;
}
.bf_subscrip_col_con {
    padding-top: 70px;
}
.bf_subscrip_col_con .vc_column-inner {
    margin-bottom: 0;
}

.bf_subscrip_section {
  padding: 2em 1em;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  display: flex;
  justify-content: center;
}

.bf_subscrip_pyramid {
  display: grid;
  gap: 0.5em;
  max-width: 960px;
  width: 100%;
}

.bf_subscrip_tier {
  display: grid;
  grid-template-areas:
    "slice"
    "content";
  justify-content: center;
  text-align: center;
}

.bf_subscrip_visual {
  grid-area: slice;
  position: relative;
  height: 104px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Restore individual visual modifiers */
.sub_vis_01 {
  margin-inline-start: 9.55em;
}
.sub_vis_02 {
  margin-inline-start: 4.6em;
  margin-bottom: 7px;
}
.sub_vis_03 {
  margin-inline-start: 0.25%;
}

.bf_subscrip_slice {
  height: 100%;
  display: block;
}
.bf_subscrip_slice .cls-1 {
  fill: #cee6fd;
}
.bf_subscrip_slice.trapezoid_01 {
    width: 8.25em;
  }
  .bf_subscrip_slice.trapezoid_02 {
    width: 18.25em;
  }
  .bf_subscrip_slice.trapezoid_03 {
    width: 27.9em;
  }
  
.bf_subscrip_content .themed-line.sub_text_bar_01 {
    margin-top: 20px;
}
.bf_subscrip_content .themed-line.sub_text_bar_02 {
    margin-top: 25px;
}
.bf_subscrip_content .themed-line.sub_text_bar_03 {
    margin-top: 20px;
}

/* Specific sizes for desktop */
@media (min-width: 768px) {
  .bf_subscrip_slice.trapezoid_01 {
    width: 8.25em;
  }
  .bf_subscrip_slice.trapezoid_02 {
    width: 18.25em;
  }
  .bf_subscrip_slice.trapezoid_03 {
    width: 27.9em;
  }
}
/* Fallback/mobile widths */
.trapezoid_01 { width: 42px; }
.trapezoid_02 { width: 32px; }
.trapezoid_03 { width: 36px; }

.bf_subscrip_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  z-index: 1;
    padding-top: 20px;
}

.bf_subscrip_content {
  grid-area: content;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75em;
  margin-top: 1em;
}

.bf_subscrip_icon_mobile {
  display: block;
  width: 36px;
  padding-top: 7px;
}
.bf_subscrip_icon_mobile .svg_icon {
  width: 100%;
  height: auto;
  display: block;
  color: #ffffff;
}

.kub_text_inner h3 {
  margin: 0;
  font-size: 1.1em;
  color: #ffffff;
}

.kub_text_inner p {
  margin: 0.25em 0 0;
  font-size: 1em;
  color: #ffffff;
}

.bf_subscrip_content .themed-line {
  background-color: #b4cce3;
  border-radius: 0.75em;
  height: 2px;
  margin-top: 0.5em;
  grid-column: 1 / -1;
  transform: scaleY(0.5);
  transform-origin: center;
}

/* Desktop layout */
@media (min-width: 768px) {
  .bf_subscrip_tier {
    grid-template-areas: "slice content";
    grid-template-columns: auto 1fr;
    align-items: center;
    text-align: left;
  }

  .bf_subscrip_icon_mobile {
    display: none;
  }

  .bf_subscrip_content {
    display: block;
  }

  .kub_text_inner h3 {
    font-size: 1.5em;
  }
}

.bf_subscrip_section {
  flex-direction: column;
  align-items: center;
}
.bf_subscrip_pyramid_top {
  display: none;
}
@media (max-width: 767px) {
  /* Show pyramid top section on mobile */
  .bf_subscrip_pyramid_top {
    display: block;
    margin-bottom: 2em;
    text-align: center;
  }

  .bf_subscrip_pyramid_top_nner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
  }

  .bf_subscrip_pyramid_top_nner > div {
    position: relative;
    display: inline-block;
  }

  /* Hide desktop visuals on mobile */
  .bf_subscrip_visual {
    display: none;
  }

  /* Pyramid slice and icon sizing for mobile top view */
  .bf_subscrip_section {
    padding: 2em 0;
  }
  .bf_subscrip_slice {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .bf_subscrip_icon {
    width: 28px;
    height: 28px;
    padding-top: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .bf_subscrip_slice.trapezoid_01 {
    width: 6em;
  }
  .bf_subscrip_slice.trapezoid_02 {
    width: 12.8em;
  }
  .bf_subscrip_slice.trapezoid_03 {
    width: 20em;
  }
  .bf_subscrip_icon.sub_icon_01 {
    top: 60%;
  }
  .bf_subscrip_icon.sub_icon_01 .cls-1,
  .bf_subscrip_icon.sub_icon_02 .cls-1,
  .bf_subscrip_icon.sub_icon_03 .cls-1 {
    fill: #000;
  }
  .bf_subscrip_icon.sub_icon_01_mob,
  .bf_subscrip_icon.sub_icon_02_mob,
  .bf_subscrip_icon.sub_icon_03_mob {
    width: 28px;
    height: 28px;
    position: relative;
  }
  .bf_subscrip_icon.sub_icon_01_mob .cls-1,
  .bf_subscrip_icon.sub_icon_02_mob .cls-1,
  .bf_subscrip_icon.sub_icon_03_mob .cls-1 {
        fill: #fff;
  }




  /* Content layout: icon left, text right */
  .bf_subscrip_content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1em;
    text-align: left;
  }

  .bf_subscrip_icon_mobile {
    display: block;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .kub_text_inner {
    flex-grow: 1;
  }

  /* Tighten spacing between tiers */
  .bf_subscrip_tier {
    margin-bottom: 1.5em;
  }
}

.start_bulkfox_con {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), /* dark overlay */
    url('/wp-content/uploads/2025/06/girl_at_desk-min.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.start_bf_col_main {
  font-size: clamp(1.75rem, 4vw + 1rem, 2.8125rem);
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3em;
    color: #ffffff;
}
.start_bf_col_head {
    font-size: 1.35em;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3em;
    color: #ffffff;
}
.start_bf_col_bar {
    background-color: #ccdafa;
    height: 20px;
    margin-bottom: 30px;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
  .start_bf_col_desc {
    color: #ffffff;
  }

div[class^="start_bf_col_con_0"]{
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
    transition-timing-function: ease-in;
}
.start_bf_col_con_01 {
    padding-top: 85px;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.4s;
    color: #ffffff;
}
.start_bf_col_con_02 {
    padding-top: 54px;
     -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.6s;
}
.start_bf_col_con_03 {
    padding-top: 27px;
     -webkit-animation-duration: .5s;
    animation-duration: .5s;
    animation-delay: 1.8s;
}
.start_bulkfox_con {
    padding: 65px 63px;
}
.data_sync_row01 {
    padding: 65px 63px 0 63px;
}

/* Mobile overrides */
@media (max-width: 767px) {
  .data_sync_row01 {
    padding: 0;
  }
  .start_bulkfox_con {
    padding: 25px 10px;
  }
  .start_bf_col_con_01, .start_bf_col_con_02, .start_bf_con_03 {
    padding: 15px;
  }

}

/* Price Cards BulkFox */
.price-section-header {
    text-align: center;
    background-image: rgb(70,136,255);
    background-image: linear-gradient(90deg, rgba(70, 136, 255, 1) 0%, rgba(42, 188, 255, 1) 100%);
    padding: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.price-section-header h4 {
    font-size: 2.0em;
    margin-top: 0;
    color:#ffffff;
}
.price-row-con {
    padding: 0px 20px 20px;
}
sup {
    top: -0.5rem;
    font-weight: 500;
    font-size: 60%;
}
xsmall {
    font-size: 50%;
}
.price-row.price-section-price {
    text-align: center;
    margin-bottom: 20px;
}
.price-row.price-section-price h3 {
    font-size: 2rem;
    font-weight: 700;
}
a.button.pr-buy-button.button-secondary {
    background-color: #ffb541;
    color: #000;
    font-size: 1.1em;
    font-weight: 600;
}
.price-row.price-section-buy {
    text-align: center;
}
a.button.pr-buy-button {
    width: 50%;
}
.price-section {
    border: 1px solid #ccc;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}







/* Why Store Owners */
.why_store_owner_con {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.85)),
    url(/wp-content/uploads/2025/05/bf_why_owners.jpg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-blend-mode: screen;
}
.bf_why_icon_con svg {
    width: 60px;
}
.bf_why_card_con {
  display: flex;
  align-items: flex-start; /* Use 'center' if you want vertical centering */
  gap: 1em;
}

.bf_why_icon_con {
  width: 65px;
  flex-shrink: 0;
}

.bf_why_icon {
  width: 100%;
  height: auto;
  display: block;
}

.bf_why_txt_con {
  flex: 1;
}
.bf_why_heading {
    font-size: 1.25em;
    font-weight: 600;
    line-height: 250%;
}

/* Powerful Team section */
.bf_power_time_con .vc_column-inner {
    border: 1px solid #000;
    background-color: #ffff;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    padding: 30px 40px 20px 40px;
}
.bf_power_section {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  position: relative;
  padding: 2em 0;
  flex-wrap: wrap;
}

.bf_power_card {
  text-align: center;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ICON WRAPPER (styled like Chakra's .css-1dglan8) */
.bf_power_icon_wrap {
  background-color: transparent;
  border-radius: 8px;
  padding: 0;
  width: 3.25em;
  height: 3.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ICON IMAGE */
.bf_power_icon_wrap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1/1;
}
.power_icon rect.cls-2 {
    fill: #ff9b01;
}

/* TITLE TEXT (styled like .themed-heading) */
.bf_power_title {
  font-weight: 600;
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  color: #102a56;
  text-align: center;
}

/* DESCRIPTION TEXT */
.bf_power_desc {
  font-size: 0.95em;
  color: #284268;
  line-height: 1.5;
  text-align: center;
  max-width: 30ch;
}

/* HORIZONTAL LINE: connects TO the right */
.bf_power_card:not(:last-child) .bf_power_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 16.25em; /* adjust as needed */
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}

/* HORIZONTAL LINE: connects FROM the left */
.bf_power_card:not(:first-child) .bf_power_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 14em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.bf_power_card .bf_power_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.bf_power_card:last-child .bf_power_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.themed-line {
    background-color: #ff9b01;
    border-radius: .75em;
}
.css-1cyrbjv {
    position: absolute;
    z-index: -1;
    height: 3em;
    width: max(round(0.125em, 1px), 1px);;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.bf_power_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.bf_power_text {
  text-align: center;
}


/* === MOBILE STYLES === */
@media (max-width: 768px) {
  .bf_power_section {
    flex-direction: column;
    gap: 3em;
    padding-left: 0;
  }
  .bf_power_inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .bf_power_text {
    text-align: left;
    margin-left: 1em;
    flex: 1;
  }
  .bf_power_title {
    margin-top: 14px;
  }
  .bf_power_title,
  .bf_power_desc {
    text-align: left;
  }

  .bf_power_card {
    align-items: flex-start;
    text-align: left;
    padding-left: 1em;
    position: relative; /* IMPORTANT */
  }

  .bf_power_icon_wrap {
    margin-bottom: 1em;
    position: relative; /* IMPORTANT for pseudo-elements */
  }

  /* Reset horizontal lines */
  .bf_power_card .bf_power_icon_wrap::before,
  .bf_power_card .bf_power_icon_wrap::after {
    content: none !important;
  }

  /* Vertical line from previous icon */
  .bf_power_card:not(:first-child) .bf_power_icon_wrap::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }

  /* Vertical line to next icon */
  .bf_power_card:not(:last-child) .bf_power_icon_wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }
  .css-1cyrbjv {
      height: 17.25em;
    }
  .bf_power_card:last-child .css-1cyrbjv {
    height: 15em;
  }
  .mobile-line-horizontal {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    height: 1px;
    width: 1em; /* adjust length as needed */
    background-color: #ff9b01;
    transform: translateY(-50%);
    z-index: 0;
  }
}


/* Web Apps Page */
.responsive-mask-container-wapp {
    width: 100%;
    height: 500px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.masked-image-wapp {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/coding-team-focused-stockcake.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.masked-image-wapp:after {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,.4);
}
div#why_title_black_wapp_scale:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
div#why_title_black_wapp_scale {
    font-size: 1.6rem;
    line-height: 1.8em;
    margin-bottom: 10px;
    font-weight: 500;
    color: #fff;
}

.bf_proj_found_section {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  position: relative;
  padding: 2em 0 0 0;
  flex-wrap: wrap;
}

.bf_proj_found_card {
  text-align: center;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ICON WRAPPER (styled like Chakra's .css-1dglan8) */
.bf_proj_found_icon_wrap {
  background-color: transparent;
  border-radius: 8px;
  padding: 0;
  width: 3.25em;
  height: 3.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ICON IMAGE */
.bf_proj_found_icon_wrap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1/1;
}
.power_icon rect.cls-2 {
    fill: #ff9b01;
}

/* TITLE TEXT (styled like .themed-heading) */
.bf_proj_found_title {
  font-weight: 700;
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: 1.0em;
  color: #ffffff;
  text-align: center;
}

/* DESCRIPTION TEXT */
.bf_proj_found_desc {
  font-size: 0.95em;
  color: #ffffff;
  line-height: 1.5;
  text-align: center;
  max-width: 30ch;
}

/* HORIZONTAL LINE: connects TO the right */
.bf_proj_found_card:not(:last-child) .bf_proj_found_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 16.25em; /* adjust as needed */
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}

/* HORIZONTAL LINE: connects FROM the left */
.bf_proj_found_card:not(:first-child) .bf_proj_found_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 15em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.bf_proj_found_card .bf_proj_found_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.bf_proj_found_card:last-child .bf_proj_found_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.themed-line {
    background-color: #ff9b01;
    border-radius: .75em;
}
.css-1cyrbjv {
    position: absolute;
    z-index: -1;
    height: 3em;
    width: max(round(0.125em, 1px), 1px);;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.bf_proj_found_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.bf_proj_found_text {
  text-align: center;
}


/* === MOBILE STYLES === */
@media (max-width: 768px) {
  .bf_proj_found_section {
    flex-direction: column;
    gap: 3em;
    padding-left: 0;
  }
  .bf_proj_found_inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .bf_proj_found_text {
    text-align: left;
    margin-left: 1em;
    flex: 1;
  }
  .bf_proj_found_title {
    margin-top: 14px;
  }
  .bf_proj_found_title,
  .bf_proj_found_desc {
    text-align: left;
  }

  .bf_proj_found_card {
    align-items: flex-start;
    text-align: left;
    padding-left: 1em;
    position: relative; /* IMPORTANT */
  }

  .bf_proj_found_icon_wrap {
    margin-bottom: 1em;
    position: relative; /* IMPORTANT for pseudo-elements */
  }

  /* Reset horizontal lines */
  .bf_proj_found_card .bf_proj_found_icon_wrap::before,
  .bf_proj_found_card .bf_proj_found_icon_wrap::after {
    content: none !important;
  }

  /* Vertical line from previous icon */
  .bf_proj_found_card:not(:first-child) .bf_proj_found_icon_wrap::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }

  /* Vertical line to next icon */
  .bf_proj_found_card:not(:last-child) .bf_proj_found_icon_wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }
  .css-1cyrbjv {
      height: 17.25em;
    }
  .bf_proj_found_card:last-child .css-1cyrbjv {
    height: 15em;
  }
  .mobile-line-horizontal {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    height: 1px;
    width: 1em; /* adjust length as needed */
    background-color: #ff9b01;
    transform: translateY(-50%);
    z-index: 0;
  }
}

/* API Development */
.responsive-mask-container-apidev {
    width: 100%;
    height: 500px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.masked-image-apidev {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/05/What-is-API-dev-and-integration.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.masked-image-apidev:after {
    position: absolute;
    content: '';
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(255,255,255,.4); */
}

.apidev_head_con {
}
h2[id^="apidev_head_0"] {
    font-size: 2.85rem;
}
h2#apidev_head_02 {
    padding-left: 50px;
}
h2#apidev_head_03 {
    padding-left: 100px;
}
.apidev_page_icon_head {
  margin-bottom: 1.5em !important;
}
.api_built_cal_section {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  position: relative;
  padding: 2em 0 0 0;
  flex-wrap: wrap;
}

.api_built_cal_card {
  text-align: center;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ICON WRAPPER (styled like Chakra's .css-1dglan8) */
.api_built_cal_icon_wrap {
  background-color: transparent;
  border-radius: 8px;
  padding: 0;
  width: 3.25em;
  height: 3.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ICON IMAGE */
.api_built_cal_icon_wrap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1/1;
}
.power_icon rect.cls-2 {
    fill: #ff9b01;
}

/* TITLE TEXT (styled like .themed-heading) */
.api_built_cal_title {
  font-weight: 700;
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: 1.0em;
  color: #ffffff;
  text-align: center;
}

/* DESCRIPTION TEXT */
.api_built_cal_desc {
  font-size: 0.95em;
  color: #ffffff;
  line-height: 1.5;
  text-align: center;
  max-width: 30ch;
}

/* HORIZONTAL LINE: connects TO the right */
.api_built_cal_card:not(:last-child) .api_built_cal_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 16.25em; /* adjust as needed */
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}

/* HORIZONTAL LINE: connects FROM the left */
.api_built_cal_card:not(:first-child) .api_built_cal_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 15em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.api_built_cal_card .api_built_cal_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.api_built_cal_card:last-child .api_built_cal_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.themed-line {
    background-color: #ff9b01;
    border-radius: .75em;
}
.css-1cyrbjv {
    position: absolute;
    z-index: -1;
    height: 3em;
    width: max(round(0.125em, 1px), 1px);;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.api_built_cal_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.api_built_cal_text {
  text-align: center;
}


/* === MOBILE STYLES === */
@media (max-width: 768px) {
  .api_built_cal_section {
    flex-direction: column;
    gap: 3em;
    padding-left: 0;
  }
  .api_built_cal_inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .api_built_cal_text {
    text-align: left;
    margin-left: 1em;
    flex: 1;
  }
  .api_built_cal_title {
    margin-top: 14px;
  }
  .api_built_cal_title,
  .api_built_cal_desc {
    text-align: left;
  }

  .api_built_cal_card {
    align-items: flex-start;
    text-align: left;
    padding-left: 1em;
    position: relative; /* IMPORTANT */
  }

  .api_built_cal_icon_wrap {
    margin-bottom: 1em;
    position: relative; /* IMPORTANT for pseudo-elements */
  }

  /* Reset horizontal lines */
  .api_built_cal_card .api_built_cal_icon_wrap::before,
  .api_built_cal_card .api_built_cal_icon_wrap::after {
    content: none !important;
  }

  /* Vertical line from previous icon */
  .api_built_cal_card:not(:first-child) .api_built_cal_icon_wrap::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }

  /* Vertical line to next icon */
  .api_built_cal_card:not(:last-child) .api_built_cal_icon_wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }
  .css-1cyrbjv {
      height: 17.25em;
    }
  .api_built_cal_card:last-child .css-1cyrbjv {
    height: 15em;
  }
  .mobile-line-horizontal {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    height: 1px;
    width: 1em; /* adjust length as needed */
    background-color: #ff9b01;
    transform: translateY(-50%);
    z-index: 0;
  }
}

/* Mobile Apps */
.mobile_txt_black {
    color: #ffffff;
    text-align: center;
    font-size: 1.5em;
}
.mobile_how_work_section {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  position: relative;
  padding: 2em 0 0 0;
  flex-wrap: wrap;
}
.mobile_how_we_con {
    display: flex;
    justify-content: center;
}
.mobile_how_we_title {
    color: #ffffff;
    font-size: 2em;
    text-align: center;
}
.mobile_how_we_title:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
.mobile_how_we_desc {
  color: #ffffff;
  text-align: center;
  font-size: 1.5em;
  margin-top: 20px;
}

.mobile_how_work_card {
  text-align: center;
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ICON WRAPPER (styled like Chakra's .css-1dglan8) */
.mobile_how_work_icon_wrap {
  background-color: transparent;
  border-radius: 8px;
  padding: 0;
  width: 3.25em;
  height: 3.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* ICON IMAGE */
.mobile_how_work_icon_wrap img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1/1;
}
.power_icon rect.cls-2 {
    fill: #ff9b01;
}

/* TITLE TEXT (styled like .themed-heading) */
.mobile_how_work_title {
  font-weight: 700;
  font-size: 1.1em;
  margin-top: 1.5em;
  margin-bottom: 1.0em;
  color: #ffffff;
  text-align: center;
}

/* DESCRIPTION TEXT */
.mobile_how_work_desc {
  font-size: 0.95em;
  color: #ffffff;
  line-height: 1.5;
  text-align: center;
  max-width: 30ch;
}

/* HORIZONTAL LINE: connects TO the right */
.mobile_how_work_card:not(:last-child) .mobile_how_work_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 16.25em; /* adjust as needed */
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}

/* HORIZONTAL LINE: connects FROM the left */
.mobile_how_work_card:not(:first-child) .mobile_how_work_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 15em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.mobile_how_work_card .mobile_how_work_icon_wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.mobile_how_work_card:last-child .mobile_how_work_icon_wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  height: 1px;
  width: 2em;
  background-color: #ff9b01;
  transform: translateY(-50%);
  z-index: 0;
}
.themed-line {
    background-color: #ff9b01;
    border-radius: .75em;
}
.css-1cyrbjv {
    position: absolute;
    z-index: -1;
    height: 3em;
    width: max(round(0.125em, 1px), 1px);;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.mobile_how_work_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}

.mobile_how_work_text {
  text-align: center;
}

.mobile_tech_stck_main-list {
    display: flex;
    flex-direction: column;
    margin: 0 auto !important;
    padding: 24px 0;
    list-style: none !important;
    width: 90%;
}

.mobile_tech_stck_block {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-bottom: 24px;
    justify-content: space-between;
    border-bottom: 1px solid #d9d9d9;
    padding-bottom: 20px;
}

h3.mobile_tech_stck_category {
  font-size: 1.7rem;
  font-weight: 500;
  margin: 0;
  margin-bottom: 0;
  width: 320px;
}

.mobile_tech_stck_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none !important;
  width: 60%;
}


.mobile_tech_stck_item {
  background-color: #f4f4f4;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
}





/* === MOBILE STYLES === */
@media (max-width: 768px) {
  .mobile_how_work_section {
    flex-direction: column;
    gap: 3em;
    padding-left: 0;
  }
  .mobile_how_work_inner {
    flex-direction: row;
    align-items: flex-start;
  }

  .mobile_how_work_text {
    text-align: left;
    margin-left: 1em;
    flex: 1;
  }
  .mobile_how_work_title {
    margin-top: 14px;
  }
  .mobile_how_work_title,
  .mobile_how_work_desc {
    text-align: left;
  }

  .mobile_how_work_card {
    align-items: flex-start;
    text-align: left;
    padding-left: 1em;
    position: relative; /* IMPORTANT */
  }

  .mobile_how_work_icon_wrap {
    margin-bottom: 1em;
    position: relative; /* IMPORTANT for pseudo-elements */
  }

  /* Reset horizontal lines */
  .mobile_how_work_card .mobile_how_work_icon_wrap::before,
  .mobile_how_work_card .mobile_how_work_icon_wrap::after {
    content: none !important;
  }

  /* Vertical line from previous icon */
  .mobile_how_work_card:not(:first-child) .mobile_how_work_icon_wrap::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }

  /* Vertical line to next icon */
  .mobile_how_work_card:not(:last-child) .mobile_how_work_icon_wrap::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    width: 1px;
    height: 3em;
    background-color: #ff9b01;
    transform: translateX(-50%);
    z-index: 0;
  }
  .css-1cyrbjv {
      height: 17.25em;
    }
  .mobile_how_work_card:last-child .css-1cyrbjv {
    height: 15em;
  }
  .mobile-line-horizontal {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    height: 1px;
    width: 1em; /* adjust length as needed */
    background-color: #ff9b01;
    transform: translateY(-50%);
    z-index: 0;
  }
}


/* Case Study Cards */
/* Case Study Card Link Wrapper */
.case_study_card_link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: auto;
  cursor: pointer;
}
.case_study_card_link .cs_back_img, 
.case_study_card_link .cs_type_con,
.case_study_card_link .cs_case_desc_con {
  cursor: pointer;
}

/* Prevent text decoration on any children */
.case_study_card_link,
.case_study_card_link * {
  text-decoration: none !important;
}

/* Main Card Container */
.case_study_card {
  overflow: hidden; 
  transition: transform 0.3s ease;
  position: relative;
}

/* Background Image Container */
.cs_back_img {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  min-width: 430px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

/* Zoom on hover */
.case_study_card_link:hover .cs_back_img {
  transform: scale(1.05);
}

/* Dark overlay */
.cs_back_img::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0); /* Transparent initially */
  transition: background 0.4s ease;
  z-index: 1;
}

/* Activate dark overlay on hover */
.case_study_card_link:hover .cs_back_img::before {
  background: rgba(0, 0, 0, 0.6); /* Adjust darkness level */
}

/* Keep all content above overlay */
.cs_back_img > * {
  position: relative;
  z-index: 2;
}

/* Header Styles */
.cs_type_head {
  text-transform: uppercase;
  color: #dfdfdf;
  letter-spacing: 2px;
  margin-bottom: 5px;
}

.cs_case_head {
  color: #fff;
  font-size: 1.3em;
}

/* Description initially hidden */
.cs_case_desc_con {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Fade in on hover */
.case_study_card_link:hover .cs_case_desc_con {
  opacity: 1;
  transform: translateY(0);
}

/* Description Text */
.cs_case_desc {
  color: #d5d5d5;
}

/* Tech Stack Text */
.cs_case_tech {
  color: #c77c17;
  margin-top: 10px;
}

/* Specific Background Image Example */
.cs_back_img.traveL_medic {
  background-image: url('/wp-content/uploads/2025/05/virtual-Doctor-Consultation-min.jpg');
  background-size: cover;
}
.cs_back_img.master_call {
  background-image: url('/wp-content/uploads/2025/05/Hunter_s-Woodland-Call-min.jpg');
  background-size: cover;
}
.cs_back_img.doccentral_case {
  background-image: url('/wp-content/uploads/2025/05/Focused-Paralegal-at-Work-min.jpg');
  background-size: cover;
}
.cs_back_img.ltms_case {
  position: relative;
  background-image: url('/wp-content/uploads/2025/05/onstruction-Worker-Sampling-min.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Overlay to darken image */
.cs_back_img.doccentral_case:before,
.cs_back_img.ltms_case::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4); /* adjust darkness here */
  z-index: 1;
}

/* Ensure text/content sits above the overlay */
.cs_back_img.doccentral_case > *,
.cs_back_img.ltms_case > * {
  position: relative;
  z-index: 2;
}


/* Always show content on touch devices */
@media (hover: none) {
  .cs_case_desc_con {
    opacity: 1;
    transform: none;
  }
}

/* Case Studies */
.case_studies_con {
    display: flex;
    justify-content: center;
}
.case_studies_title {
    color: #000000;
    font-size: 2em;
    text-align: center;
}
.case_studies_title:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
.case_studies_desc {
  color: #000000;
  text-align: center;
  font-size: 1.5em;
  margin-top: 20px;
}



/* About Us Page */
.about_us_page_header {
  position: relative !important;
  z-index: 1 !important;
}
.about_us_page_header::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7); 
  z-index: 1;
  pointer-events: none;
}
.vc_custom_1748672883323 > * {
  position: relative;
  z-index: 1;
}
.about_us_head_con{
  padding: 85px 63px;
}
.about_us_head {
  font-size: 2.5em;
  line-height: 1.25em;
  color: #ffffffff;
  margin-bottom: 30px;
}
.about_us_desc { 
  color: #ffffffff;
}

svg#about_us_pie {
    width: 350px;
}
.about_us_out_approach_img_con.vc_custom_1748675622013 {
  position: relative !important;
  z-index: 0 !important;
}

/* Overlay to darken image */
.about_us_out_approach_img_con.vc_custom_1748675622013:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.9); /* adjust darkness here */
  z-index: 1;
  display: block;
}

/* Ensure text/content sits above the overlay */
.about_us_out_approach_img_con.vc_custom_1748675622013 > * {
  position: relative;
  z-index: 2;
}
.tech_approach_con .vcex-grid-container {
    margin-left: 60px;
}
svg#about_us_app_arrow_icon {
    width: 100px;
}
.about_us_why_choos_con {
    margin: 65px 63px 45px;
}
div#why_title_white_con {
    width: fit-content;
    margin: 0 auto;
}
.why_main_title_white { 
    color: #ffffff;
    text-align: left;
    font-size: 2.5em;
    line-height: 1.25em;
}
div#why_title_white:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
div#why_title_white {
    font-size: 3.7rem;
    line-height: 1.5em;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding-bottom: 15px;
}
div#why_desk_bhite {
    color: ##ffffff;
}
div#why_sub01_title_white {
    font-size: 1.25em;
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
    color: #ffffff;
}
div#why_sub02_title_white {
    font-size: 1em;
    line-height: 1.8em;
    text-align: center;
    color: #ffffff;
}
.about_us_why_desc {
    color: #ffff;
    padding: 40px 20px 0;
}
.about_us_why_con {
  position: relative !important;
  z-index: 0 !important;
}
.about_us_why_con {
  position: relative !important;
  z-index: 0 !important;
}
.about_us_why_con::before {
  content: "";
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
  pointer-events: none;
}

/* Ensure content stacks above the overlay */
.about_us_why_con > * {
  position: relative;
  z-index: 2;
}

.key_features_about_us_contact {
    width: 100%;
    height: 620px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.masked_image_about {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: calc(100% - -10px) 50%;
    background-repeat: no-repeat;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.masked_image_about.left_mask_about {
    background-image: url('/wp-content/uploads/2025/05/about_us_group-min.jpeg');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;
    top: -70px;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.about_us_contact_desc {
    width: 90%;
}
.contact_us_tel_con {
    margin-left: 50px;
    font-size: 1.3em;
}
.contact_us_txt_col2 {
    text-align: center;
    font-size: 1.3em;
}
.social-media-contact {
    font-size: 2em;
    text-align: left;
    margin: 30px 50px;
}

/* Blog */
.blog_entry_con .vcex-blog-entry-media img {
    object-fit: cover;
}
.vcex-blog-entry-inner img {
    min-height: 300px;
    object-fit: contain;
    width: 100%;
    height: auto;
    display: block;
}

.single-post .post-thumbnail,
.single-post .wp-post-image {
  display: none !important;
}

/* Job Detail Page */
.job_listing-template-default header#post-header {
    margin-top: 50px;
}


/* QA Service Page */
.qa_top_subtitle {
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 1em;
}
svg[id^='qa_matter_icon_0'] {
    width: 80px;
}
.qa_icon_fill {
    fill: #00000;
}
.mvp_infographic.qa_graphic {
    position: relative;
    top: -50px;
}
.qa_tools_con {

}
.qa_tools_inner_con .vc_column-inner{
  margin-bottom: 0;
}
.qa_ready_bugs_head_con {
    width: fit-content;
    margin: 0 auto;
}
.qa_ready_bugs_head {
    color: var(--wpex-on-accent);
    font-size: 36px;
    line-height: var(--wpex-leading-relaxed);
    letter-spacing: var(--wpex-tracking-wide);
    text-align: center;
}
.qa_ready_bugs_head:before {
    background-color: #ff9b01;
    content: "";
    display: block;
    height: 4px;
    top: 0;
    width: 45px;
}
#qa_ready_desc_black {
    text-align: center;
    font-size: 1.2em;
    color: #ffffff;
}

.mobile_tech_stck_main-list-qa {
    display: flex;
    flex-direction: column;
    margin: 0 auto !important;
    padding: 24px 0 0;
    list-style: none !important;
    width: 90%;
}



/* Services Page */
.services_card {
    cursor: pointer; 
}
a.services_card_url {
    text-decoration: none;
    color: #212121;
    cursor: pointer;
}
.service_card_head {
    font-size: 1.25em;
    font-weight: 500;
    line-height: 2em;
}
.service_card_img {
    overflow: hidden;
    height: 220px;
}
.service_card_img_con img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* or 'contain' if you want full image without cropping */
    object-position: center center; /* X and Y control */
}
/* Container and image setup */
.service_card_img_con {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.service_card_img_con img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.3s ease;
}

/* Hover icon, initially hidden */
.service_card_img_con .hover_icon {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
svg#link_icon .link_icon_fill {
    fill: #ff9b01;
}

/* Hover effects */
.services_card_url:hover .service_card_img_con img:first-of-type {
    filter: brightness(0.6);
}

.services_card_url:hover .hover_icon {
    opacity: 1;
}

.services_card_url:hover .service_card_head {
    color: #1065a6;
}




#content-below {
  /* 4. Content Below wrapper */
}
#footer {
  /* 5. Footer wrapper */
}

/* Footer */
object.footer_logo {
    width: 350px;
}
#footer address {
    margin-top: 20px;
}
address li {
    line-height: 35px;
}
div#nav_menu-4 {
    margin-top: 65px;
}
.footer-box.col-3 div#custom_html-4 {
    margin-top: 70px;
}
.footer2_col li[id^="menu-item-"] {
    border: none;
}
.social-media {
    font-size: 2em;
    text-align: right;
}

/* Careers*/
.careerfields {
    width: 100%;
}
.csubmit {
    margin: 20px 0;
}

/* Services */
li.tab-current a:after {
    background: #ff9b01 !important;
}
a.et-anchor-tag {
    padding-bottom: 15px !important;
}



/* Master the Call Case Study */
.responsive-mask-container-mtc {
    width: 100%;
    height: 500px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
}
.masked-image-mtc {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: -140px;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/06/mtc_iphone-min.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.mtc_top_container .masked-image-mtc {
    top: -140px;
}

.case_study_mtc_projOver:before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ffffffd9;
  z-index: 1;
  display: block;
}
.mtc_appArrow_txt_con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    position: relative;
    top: -10px;
}
svg#mtc_arrow {
    width: 100px;
}
.mtc_arrow_icon {
    padding-bottom: 10px;
}
.mtc_app_heading {
    font-size: 1.25em;
    font-weight: 600;
    font-family: 'Open Sans';
    color: #1a1a1a;
    line-height: 1.75em;
}
.mtc_projOver_con {
    padding: 65px 63px 25px;
    z-index: 100;
}
.masked-image-mtc {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0px;
    left: 0;
    width: 100%;
    height: 730px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}


/* This version is for the LEFT mask layout */
.mtc_case_page_head {
  padding: 85px 63px;
}
.left-mask-mtc {
    background-image: url('/wp-content/uploads/2025/06/ga_pmWW8whCvmaBX8JI_F.png');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;

}
.mtc_req_col {
  padding-left: 20px;
}
.mtc_tech_app_con {
    margin: 30px 0 0 0;
}
.mtc_req_text_box {
    padding: 18px;
    background-color: #cee6fd;
    margin-bottom: 20px !important;
    -webkit-border-radius: 13.5px;
    -moz-border-radius: 13.5px;
    border-radius: 13.5px;
}
.mtc_tech_app_col {
  padding: 50px 15px 30px 15px;
  background: linear-gradient(90deg, rgba(132, 193, 250, 1) 46%, rgba(238, 130, 238, 1) 100%);
}
.mtc_tech_app_head {
    font-size: 1.25em;
    font-weight: 600;
    margin: 30px 0 15px 0;
    color: #000;
}
.mtc_tech_app_txt {
    color: #000;
}
.mtc_req_text_box_heading {
    font-size: 1.25em;
    font-weight: 600;
}
.mtc_tech_app_img {
    width: 100%;
    height: 215px;
    overflow: hidden;
}
.mtc_tech_app_img img {=
    border-radius: 13.5px;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center center; 
    display: block;
    -webkit-border-radius: 13.5px;
    -moz-border-radius: 13.5px;
  }
  .mtc_sol_design_text_con.right_text {
      text-align: right;
  }
.mtc_solution_row01 {
    padding: 65px 63px 0 63px;
  }
  .mtc_solution_row02 {
    padding: 0 63px 35px 63px;
  }
  .mtc_key_chall_col {
     background: linear-gradient(90deg, rgba(132, 193, 250, 1) 46%, rgba(238, 130, 238, 1) 100%);
  }
  .mtc_key_chall_title .vcex-heading-inner {
    font-size: clamp(1.75rem, 4vw + 1rem, 2.8125rem);
}
  div[class^="mtc_key_chall_bar0"] {
    background-color: #cee6fd;
    text-align: center;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
  }
  div[class^="mtc_key_chall_bar0"] {
    display: flex;
    justify-content: center;
  }
  svg#mtc_key_icon {
    width: 70px;
    padding: 10px;
  }
  .mtc_key_chall_bar01 {
    height: 120px;
    width: 20%;
    grid-area: mtc_key_chall_bar01;
  }
  .mtc_key_chall_bar02 {
    height: 120px;
    width: 30%;
    grid-area: mtc_key_chall_bar02;
  }
  .mtc_key_chall_bar03 {
    height: 120px;
    width: 40%;
    grid-area: mtc_key_chall_bar03;
  }
  .mtc_key_chall_bar04 {
    height: 120px;
    width: 50%;
    grid-area: mtc_key_chall_bar04;
  }
  .mtc_key_txt_con.kt_01 {
    grid-area: kt_01;
  }
  .mtc_key_txt_con.kt_02 {
    grid-area: kt_02;
  }
  .mtc_key_txt_con.kt_03 {
    grid-area: kt_03;
  }
  .mtc_key_txt_con.kt_04 {
    grid-area: kt_04;
  }
  div[class^="mtc_key_chall_icon0"] {
    background-color: #cee6fd;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
    height: 80px;
    width: 80px;
    justify-content: center;
    display: flex;
    margin-right: 20px;
  }
 div[class^="mtc_key_chall_row0"] {
    display: flex;
    align-items: stretch;
  }
  div[class^="mtc_key_chall_row0"] {
    display: flex;
    justify-content: left;
    padding: 0 0 30px 20px;
  }
 .mtc_key_txt_con {
    display: flex;
    height: 100%;
    margin: auto 30px;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .mtc_key_txt_inner {
      display: flex;
      padding: 20px 0;
  }
  .mtc_key_chall_head {
    font-size: 1.25em;
    font-weight: 600;
  }
  div[class^="mtc_key_chall_icon0"] {
    display: none;
  }
  .mtc_key_chall_col .vc_column-inner {
    padding-top: 50px;
  }



.mtc_int_col {
  border: 1px solid #000;
  border-radius: 0.75em;
  padding: 1.5em; /* Optional padding inside the border */
}

.mtc_int_con {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto 3em auto;
  grid-column-gap: 20px;
  position: relative;
}

.mtc_int_01 { grid-area: 1 / 1 / 2 / 3; }
.mtc_int_02 { grid-area: 1 / 3 / 2 / 5; }
.mtc_int_03 { grid-area: 3 / 2 / 4 / 4; }
.mtc_int_04 { grid-area: 3 / 4 / 4 / 6; }

.mtc_line_05 {
  grid-area: 2 / 1 / 3 / 6;
  position: relative;
  height: 100%;
  z-index: 0;
}
.mtc_interface_head,
.mtc_interface_txt {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Horiz line: full width */
.mtc_int_horz_line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #b4cce3ff;
  z-index: 0;
}

/* Position groups at column midpoints */
.mtc_num_group {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.mtc_num_group_1 { left: 20%; }
.mtc_num_group_2 { left: 40%; }
.mtc_num_group_3 { left: 60%; }
.mtc_num_group_4 { left: 80%; }

.mtc_int_num_box {
  width: 2.25em;
  height: 2.25em;
  background-color: #cee6fdff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;  /* ✅ Rounded corners */
  z-index: 2;
  position: relative;
}

.mtc_int_numBox_img {
  font-size: 1em;
  font-weight: bold;
}

/* Vertical lines */
.mtc_int_num_line {
  width: 4px;
  background-color: #b4cce3ff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Line pointing up from box */
.mtc_int_num_lin_vert_odd {
  height: 3em;
  top: -3em;
}

/* Line pointing down from box */
.mtc_int_num_lin_vert_even {
  height: 3em;
  top: 100%;
}



/* Optional spacing/padding for text blocks */
div[class^="mtc_int_0"] {
  text-align: center;
}
.mtc_int_01, .mtc_int_02 {
  padding: 0 18px 52px 18px;
}
.mtc_int_03, .mtc_int_04 {
  padding: 52px 18px 0 18px;
}
.mtc_interface_head {
  font-size: 1.25em;
  font-weight: var(--heading-font-weight);
  line-height: var(--line-height-heading);
}

/* Instead of left: 10%, 30%, 50%, etc. use this */
.mtc_num_group_1 { left: calc(20%); }
.mtc_num_group_2 { left: calc(40%); }
.mtc_num_group_3 { left: calc(60%); }
.mtc_num_group_4 { left: calc(80%); }

.mtc_num_group {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%); /* Center horizontally and vertically */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.mtc_mobile_timeline { display: none; }

/* Mobile layout */
@media screen and (max-width: 768px) {
  /* Hide desktop timeline on mobile */
  .mtc_desktop_timeline {
    display: none;
  }

  /* Show mobile layout */
  .mtc_mobile_timeline {
    display: block;
    position: relative;
    padding-left: 2.5em;
    margin-top: 2em;
  }

  /* Vertical line down the left */
  .mtc_mobile_timeline_line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.125em; /* Half the width of the box (2.25em / 2) */
    width: 4px;
    background-color: #b4cce3ff;
    z-index: 0;
  }

  /* Each step (number + line + text) */
  .mtc_step_row {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 2em;
  }

  /* Left side: marker area */
  .mtc_step_marker {
  position: relative;
  width: 2.25em;
  min-width: 2.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transform: translate(-2.4em, -2em);
  }

  /* The numbered box itself */
  .mtc_int_num_box {
    width: 2.25em;
    height: 2.25em;
    background-color: #cee6fdff;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .mtc_int_numBox_img {
    font-weight: bold;
    font-size: 1em;
  }

  /* Horizontal line extending from box center to the right */
  .mtc_step_connector {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 1.5em;
    height: 2px;
    background-color: #b4cce3ff;
    transform: translateY(-50%);
    z-index: 1;
  }

  /* Right side: text content */
  .mtc_step_content {
    margin-left: 1em;
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center; /* ✅ Vertically center content */
  }


  .mtc_interface_head,
  .mtc_interface_txt {
    text-align: left;
    margin: 0;
  }
}







@media (max-width: 768px) {
  .mtc_case_page_head{ 
    padding: 0 33px 25px;
  }
  .mtc_projOver_con {
    padding: 25px 33px 0;
  }
  .mtc_req_gath_svgImg, .responsive-mask-container.mtc_03 {
    display: none;
  }
  .mtc_solution_row01 {
    padding: 55px 23px 0 23px;
  }
  .mtc_solution_row02 {
    padding: 0 0 35px 0;
  }
  .mtc_sol_design_text_con.right_text {
    text-align: left;
  }
  .mtc_solution_row02 .vc_empty_space {
    height: 30px !important;
  }
  .pie_sync_con.mtc_pie svg#pie_sync {
    width: 250px;
  }
  .mtc_solution_row02 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "sol_pie"
        "sol_01"
        "sol_03";
}
  .mtc_sol_row01 {
    grid-area: sol_01;
  }
  .mtc_sol_row01 {
      grid-area: sol_pie;
  }
  .mtc_sol_row01 {
      grid-area: sol_03;
  }
  div[class^="mtc_key_chall_icon0"] {
    display: flex;
  }
  div[class^="mtc_key_chall_bar0"] {
    display: none;
  }
  div[class^="mtc_key_chall_row0"] {
    padding: 0 0 10px 20px;
  }

}

/* My Travel Medic - Case Study */
.responsive-mask-container-medic {
    width: 100%;
    height: 355px; /* or 100vh for full screen */
    position: relative;
    overflow: hidden;
}
.masked-image-medic {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url('/wp-content/uploads/2025/06/medic_app_editor_3D_.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.medic_projectOv_con {
    padding: 50px 15px 30px 15px;
    background: #CDDAFA;
}
.project_goals-medic {
    position: relative;
    width: 100%;
    max-width: 459px;
    aspect-ratio: 459 / 860;
    margin: 0 auto;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}

.project_goals-mask-medic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.ns_left_mask-medic {
    background-image: url('/wp-content/uploads/2025/06/programmer_code.jpg');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;
    top: 60px;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.medic_firebase_con {
    display: flex;
}
.medic_firebase_head {
    margin-left: 30px;
}
.medic_firebase_head h2 {
    color: #ffffff;
    line-height: 45px;
}
.white_head, .white_txt {
  color: #ffffff;
}
.medic_fire_icon {
    width: 30px;
    height: 30px;
}
.medic_fire_icon .fire_icon_01 {
    width: 40px;
    height: 40px;
}
.medic_firebase_inner_con {
    padding: 30px;
}
.medic_vid_consul_row {
    padding: 45px;
}
.medic_consol_row {
     margin-bottom: 30px;
}
.medic_consol_inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    gap: 1em;
    min-height: 6em;
    height: 100%;
    
}
.medic_consol_bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
    min-width: 1em;
    width: 1em;
    height: 100%;
    cursor: default;
    background: var(--shape-bg-color-alpha);
    background-color: var(--shape-bg-color-alpha);
    border-radius: var(--box-border-radius);
}
.medic_consol_row.consol_row01 {
    padding-left: 20px;
}
.medic_consol_row.consol_row02 {
    padding-left: 50px;
}
.medic_consol_row.consol_row03 {
    padding-left: 80px;
}
.medic_consol_head {
  font-size: var(--section-sub-head);
  font-weight: 600;
  line-height: var(--line-height-heading);
  margin-bottom: 0.6em;
}
responsive-mask-container-medic-consul {
    width: 100%;
    height: 500px; 
    position: relative;
    overflow: hidden;
}
.masked-image-medic-consul {
    position: absolute;
    inset: 0;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;

    background-image: url('/wp-content/uploads/2025/06/medic_video_consul_back.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-boardroom.svg');
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
}
.medic_crossplat_row01 {
  padding: 65px 63px 0 63px;
}
.medic_crossplat_row02 {
  padding: 0 63px 65px 63px;
}
.medic_cross_title .vcex-heading-inner {
  font-size: clamp(1.75rem, 4vw + 1rem, 2.8125rem);
  color: #ffffff;
}
.medic_cross_heading {
  font-size: 1.25em;
  font-weight: 600;
  line-height: 250%;
  color: #ffffff;
}
.medic_cross_paragraph {
  color: #ffffff;
}
.text_right {
  text-align: right;
}
.pie_sync_con svg#medic_cross_pic {
    width: 362px;
}
.project_goals-mask-medic-api {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 710px;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left;
    mask-position: left;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.ns_left_mask-medic-api {
    background-image: url('/wp-content/uploads/2025/06/medi_api_chart.jpg');
    -webkit-mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    mask-image: url('/wp-content/uploads/2025/05/mask-casestud-left.svg');
    -webkit-mask-position: right;
    mask-position: right;
    top: 60px;
    -webkit-border-radius: .75em;
    -moz-border-radius: .75em;
    border-radius: .75em;
}
.medic_projOut_col {
  padding: 50px 15px 30px 15px;
  background: #CDDAFA;
}
.mtc_tech_app_img.medic_proj_03 img {
    object-position: center top;
}




@media (max-width: 768px) {
  .medic_firebase_inner_row {
    padding-left: 40px;
  }
  .medic_firebase_img img {
    width: 500px;
  }
  .medic_firebase_con {
    display: grid;
    grid-template-rows: 1fr;
    margin-bottom: 30px !important;
  }
  .medic_firebase_head h2 {
    line-height: 0;
    margin-top: 9px;
    margin-left: 88px;
  }

  .responsive-mask-container-medic-consul {
    display: none;
  }
  .medic_vid_consul_row {
    padding: 45px 15px;
  }
  .project_goals-medic {
    display: none;
  } 
}




/*
 * --------------------------------------------------
 * 2. Colours
 *-------------------------------------------------- 
 */
.fa-twitter-square, .fa-facebook-square, .fa-linkedin-square, .fa-google-plus-square {
    color: #f2f2f2;
}
.bulletlist {
  list-style-type: disc; /* This is the default solid circle */
}

/*
 * --------------------------------------------------
 * 3. Responsiveness/media queries
 *--------------------------------------------------
 */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@media (min-width: 768px) {
  /* Small devices (tablets, 768px and up) */
}
@media (min-width: 992px) {
  /* Medium devices (desktops, 992px and up) */
}
@media (min-width: 1200px) {
  /* Large devices (large desktops, 1200px and up) */
}
/*
 * --------------------------------------------------
 * 4. Misc
 * Other stuff
 *--------------------------------------------------
 */
 
 @media screen and (max-width: 768px),
       screen and (max-width: 430px),
       screen and (max-width: 932px) {
  .process_table .col1 {
    width: 0px;
    padding-bottom: 15px;
    border: none;
    padding: 0;
  }

  td.table-data-title.process_table {
    font-size: 20px;
    padding-right: 0px;
    font-weight: 500;
  }

  td.table-data-index.process_table {
    color: #ff9c00;
    font-size: 20px;
    padding-right: 10px;
    padding-top: 28px;
    padding-bottom: 30px;
    padding-left: 0;
  }
  .table-data-time:where(.process_table) {
    padding-left: 10px;
    padding-top: 30px;
    vertical-align: top;
    padding-bottom: 30px;
  }

  .about_us_why_choos_con {
    margin: 0;
  }

  /* Footer */
  .footer-box.span_1_of_3.col.col-1 #custom_html-3 {
    padding-bottom: 0 !important;
  }
  .footer-box.span_1_of_3.col.col-2 div#nav_menu-4 {
    margin-top: 0;
    padding-bottom: 0;
  }
  .footer-box.span_1_of_3.col.col-3 div#custom_html-4 {
    margin-top: 20px;
  }
}