/* Services page only overrides (loaded only on /services). */

/* Services page shared visuals moved from theme.css */
.hero-bg {
  background: url("../../img/dark-background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-button {
  display: inline-block;
  padding: 0.75rem 2rem;
  color: #ffffff;
  font-weight: 600;
  background-color: #7A4F7A;
  border-radius: 0.25rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.main-button:hover {
  background-color: #4f334f;
}

/* --------------------------------------------------------------------------
 * Tailwind scope isolation (services page)
 * -------------------------------------------------------------------------- */
#tw-app-services.tw-scope {
  isolation: isolate;
}

#tw-app-services.tw-scope .tw-section {
  position: relative;
}

#tw-app-services.tw-scope .container {
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  #tw-app-services.tw-scope .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  #tw-app-services.tw-scope .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

#tw-app-services.tw-scope .row {
  margin-left: 0;
  margin-right: 0;
}

#tw-app-services.tw-scope [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

#tw-app-services.tw-scope .btn {
  border: 0;
  box-shadow: none;
}

#tw-app-services.tw-scope .bg-purple-custom {
  background-color: #7A4F7A !important;
}

#tw-app-services.tw-scope .hover\:bg-purple-dark:hover {
  background-color: #694369 !important;
}

/* Resolve Bootstrap vs Tailwind utility-name collisions inside services scope. */
#tw-app-services.tw-scope .p-3 {
  padding: 0.75rem !important;
}

@media (min-width: 640px) {
  #tw-app-services.tw-scope .sm\:p-4 {
    padding: 1rem !important;
  }
}

/* Bootstrap order-* collision fix for base utilities on non-lg screens. */
@media (max-width: 1023.98px) {
  #tw-app-services.tw-scope .order-1 { order: 1 !important; }
  #tw-app-services.tw-scope .order-2 { order: 2 !important; }
  #tw-app-services.tw-scope .order-3 { order: 3 !important; }
}

@media (min-width: 1024px) {
  #tw-app-services.tw-scope .lg\:p-0 {
    padding: 0 !important;
  }

  #tw-app-services.tw-scope .lg\:p-10 {
    padding: 2.5rem !important;
  }

  #tw-app-services.tw-scope .lg\:shadow-none {
    box-shadow: none !important;
  }

  /* See clients_cro.css header comment: chain `.text-center.lg:text-left` + `#wrapwrap` to beat theme. */
  #wrapwrap #tw-app-services.tw-scope .text-center.lg\:text-left,
  #wrapwrap #tw-app-services.tw-scope .text-center.lg\:text-start,
  #tw-app-services.tw-scope .lg\:text-left,
  #tw-app-services.tw-scope .lg\:text-start {
    text-align: left !important;
  }

  /* Force responsive order utilities to win over base .order-* classes. */
  #tw-app-services.tw-scope .order-1.lg\:order-1,
  #tw-app-services.tw-scope .order-2.lg\:order-1,
  #tw-app-services.tw-scope .order-3.lg\:order-1,
  #tw-app-services.tw-scope .lg\:order-1 { order: 1 !important; }

  #tw-app-services.tw-scope .order-1.lg\:order-2,
  #tw-app-services.tw-scope .order-2.lg\:order-2,
  #tw-app-services.tw-scope .order-3.lg\:order-2,
  #tw-app-services.tw-scope .lg\:order-2 { order: 2 !important; }

  #tw-app-services.tw-scope .order-1.lg\:order-3,
  #tw-app-services.tw-scope .order-2.lg\:order-3,
  #tw-app-services.tw-scope .order-3.lg\:order-3,
  #tw-app-services.tw-scope .lg\:order-3 { order: 3 !important; }
}

/*
 * Provider headings: beat Tailwind/Odoo `h1–h6 { font-size: inherit }` inside .tw-scope.
 * All three titles share the same size + bold.
 */
#wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider h2.s_svc_prov_title,
#wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider h2.s_svc_prov_main_title,
#wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider h2.s_svc_prov_secondary_title,
#wrapwrap #tw-app-services.tw-scope h2.s_svc_section_heading {
  font-size: 1.875rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #111827 !important;
  letter-spacing: -0.02em;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

#wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider h2 .text-teal-500,
#wrapwrap #tw-app-services.tw-scope h2.s_svc_section_heading .text-teal-500 {
  color: #14b8a6 !important;
  font-weight: 700 !important;
}

#wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_subtitle p {
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
}

@media (min-width: 768px) {
  #wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider h2.s_svc_prov_title,
  #wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider h2.s_svc_prov_main_title,
  #wrapwrap #tw-app-services.tw-scope .s_tarmez_svc_provider h2.s_svc_prov_secondary_title,
  #wrapwrap #tw-app-services.tw-scope h2.s_svc_section_heading {
    font-size: 3.5rem !important;
    line-height: 1.12 !important;
  }
}

/* Services page hero */
#wrapwrap .hero-bg h1 {
  font-size: 2.5rem !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  #wrapwrap .hero-bg h1 {
    font-size: 3rem !important;
  }
}

#tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_title {
  display: none !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_show_title .s_svc_prov_title {
  display: block !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_subtitle {
  display: none !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_show_subtitle .s_svc_prov_subtitle {
  display: flex !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid img {
  display: none !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_show_images .s_svc_prov_grid img {
  display: block !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid .space-y-4,
#tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid .space-y-8 {
  display: none !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_show_lists .s_svc_prov_grid .space-y-4,
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_show_lists .s_svc_prov_grid .space-y-8 {
  display: block !important;
}
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_spacing_sm { padding-top: 2rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_spacing_md { padding-top: 5rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_provider.s_svc_prov_spacing_lg { padding-top: 8rem !important; padding-bottom: 4rem !important; }

/* Key Features — design colors only; layout uses Tailwind (grid mobile / lg:block + row grids) */
#tw-app-services.tw-scope .s_tarmez_svc_key_features .text-purple-custom {
  color: #6f4d65 !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_key_features .text-teal-700 {
  color: #0f766e !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_key_features .bg-teal-50 {
  background-color: #f0fdfa !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_key_features [class*="bg-gray-100"] {
  background-color: rgba(243, 244, 246, 0.7) !important;
}

/* Snippet editor toggles (optional elements only — do not touch main title / card grid) */
#tw-app-services.tw-scope .s_tarmez_svc_key_features .s_svc_kf_title {
  display: none !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_key_features.s_svc_kf_show_title .s_svc_kf_title {
  display: block !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_key_features.s_svc_kf_spacing_sm {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_key_features.s_svc_kf_spacing_md {
  padding-top: 5rem !important;
  padding-bottom: 2rem !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_key_features.s_svc_kf_spacing_lg {
  padding-top: 8rem !important;
  padding-bottom: 4rem !important;
}

@media (max-width: 1023.98px) {
  #tw-app-services.tw-scope .s_tarmez_svc_key_features > div > .grid {
    display: grid !important;
  }
}

@media (min-width: 1024px) {
  #tw-app-services.tw-scope .s_tarmez_svc_key_features > div > .grid.grid-cols-2.lg\:block,
  #tw-app-services.tw-scope .s_tarmez_svc_key_features > div > .grid.lg\:block {
    display: block !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_key_features .lg\:grid {
    display: grid !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_key_features .contents {
    display: contents !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_key_features .hidden.lg\:block {
    display: block !important;
  }
}

/* Why Prefer */
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .s_svc_wp_title { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_show_title .s_svc_wp_title { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .s_svc_wp_accordion { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_show_accordion .s_svc_wp_accordion { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .s_svc_wp_image { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_show_image .s_svc_wp_image { display: flex !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_img_right .s_svc_wp_container > .s_svc_wp_accordion { order: 1 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_img_right .s_svc_wp_container > .s_svc_wp_image { order: 2 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_img_left .s_svc_wp_container > .s_svc_wp_accordion { order: 2 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_img_left .s_svc_wp_container > .s_svc_wp_image { order: 1 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_spacing_sm { padding-top: 2rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_spacing_md { padding-top: 5rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer.s_svc_wp_spacing_lg { padding-top: 8rem !important; padding-bottom: 4rem !important; }

/* Implementation */
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_tarmez_svc_impl_grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_tarmez_svc_impl_col_2 .s_tarmez_svc_impl_grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_tarmez_svc_impl_col_3 .s_tarmez_svc_impl_grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_title { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_svc_impl_show_title .s_svc_impl_title { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_subtitle { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_svc_impl_show_subtitle .s_svc_impl_subtitle { display: flex !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_tarmez_svc_impl_grid { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_svc_impl_show_cards .s_tarmez_svc_impl_grid { display: grid !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_svc_impl_spacing_sm { padding-top: 2rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_svc_impl_spacing_md { padding-top: 5rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation.s_svc_impl_spacing_lg { padding-top: 8rem !important; padding-bottom: 4rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_card { display: flex; flex-direction: column; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_body_wrap { display: flex; flex-direction: column; width: 75%; min-height: 470px; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_content { display: flex; flex-direction: column; height: 100%; }
#tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_content > p { margin-bottom: 0; }

/* Why Choose */
#tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_title_col { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose.s_svc_wc_show_title .s_svc_wc_title_col { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_center { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose.s_svc_wc_show_center .s_svc_wc_center { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_features { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose.s_svc_wc_show_features .s_svc_wc_features { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose.s_svc_wc_spacing_sm { padding-top: 2rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose.s_svc_wc_spacing_md { padding-top: 5rem !important; padding-bottom: 5rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose.s_svc_wc_spacing_lg { padding-top: 8rem !important; padding-bottom: 8rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_layout { align-items: center !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_features { position: static !important; width: 100% !important; z-index: 1 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_feature_item p { margin-bottom: 0 !important; }

/* Why Choose typography/layout parity from original index.css */
#tw-app-services.tw-scope .s_tarmez_svc_why_choose h2,
#tw-app-services.tw-scope .s_tarmez_svc_why_choose h3,
#tw-app-services.tw-scope .s_tarmez_svc_why_choose h4 {
  font-family: 'Baloo Bhaijaan 2', cursive;
  font-weight: 700 !important;
}

#tw-app-services.tw-scope .s_tarmez_svc_why_choose p {
  font-family: 'Baloo Bhaijaan 2', cursive;
}

@media (min-width: 1024px) {
  #tw-app-services.tw-scope .s_tarmez_svc_why_choose .grid.grid-cols-2.lg\:block.gap-4.lg\:space-y-8 > div {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_why_choose .grid.grid-cols-2.lg\:block.gap-4.lg\:space-y-8 p {
    font-size: 1.125rem !important;
    line-height: 1.625rem !important;
  }
}

/* Methodology */
#tw-app-services.tw-scope .s_tarmez_svc_methodology .s_svc_meth_title { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology.s_svc_meth_show_title .s_svc_meth_title { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology .s_svc_meth_subtitle { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology.s_svc_meth_show_subtitle .s_svc_meth_subtitle { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology > .container > .max-w-7xl > .relative { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology.s_svc_meth_show_steps > .container > .max-w-7xl > .relative { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology.s_svc_meth_spacing_sm { padding-top: 2rem !important; padding-bottom: 1rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology.s_svc_meth_spacing_md { padding-top: 5rem !important; padding-bottom: 2.5rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_methodology.s_svc_meth_spacing_lg { padding-top: 8rem !important; padding-bottom: 4rem !important; }

/* Contact */
#tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_ct_title { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_show_title .s_svc_ct_title { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_ct_form { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_show_form .s_svc_ct_form { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_ct_image { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_show_image .s_svc_ct_image { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_img_right .s_svc_ct_container > div:first-child { order: 1 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_img_right .s_svc_ct_container > .s_svc_ct_image { order: 2 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_img_left .s_svc_ct_container > div:first-child { order: 2 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_img_left .s_svc_ct_container > .s_svc_ct_image { order: 1 !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_spacing_sm { padding-top: 2rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_spacing_md { padding-top: 5rem !important; padding-bottom: 5rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_contact.s_svc_ct_spacing_lg { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* Whats next */
#tw-app-services.tw-scope .s_tarmez_svc_whats_next .s_svc_wn_title { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_whats_next.s_svc_wn_show_title .s_svc_wn_title { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_whats_next .s_svc_wn_steps { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_whats_next.s_svc_wn_show_steps .s_svc_wn_steps { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_whats_next.s_svc_wn_spacing_sm { padding-top: 2rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_whats_next.s_svc_wn_spacing_md { padding-top: 5rem !important; padding-bottom: 5rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_whats_next.s_svc_wn_spacing_lg { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* CTA */
#tw-app-services.tw-scope .s_tarmez_svc_cta .s_svc_cta_title { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta.s_svc_cta_show_title .s_svc_cta_title { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta .s_svc_cta_desc { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta.s_svc_cta_show_text .s_svc_cta_desc { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta .s_svc_cta_button { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta.s_svc_cta_show_button .s_svc_cta_button { display: inline-block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta .s_svc_cta_image { display: none !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta.s_svc_cta_show_image .s_svc_cta_image { display: block !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta.s_svc_cta_spacing_sm { padding-top: 2rem !important; padding-bottom: 2rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta.s_svc_cta_spacing_md { padding-top: 5rem !important; padding-bottom: 5rem !important; }
#tw-app-services.tw-scope .s_tarmez_svc_cta.s_svc_cta_spacing_lg { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* Current provider fixes from screenshots */
#tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid {
  direction: ltr;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  #tw-app-services.tw-scope .s_tarmez_svc_why_prefer .s_svc_wp_container > .s_svc_wp_accordion,
  #tw-app-services.tw-scope .s_tarmez_svc_why_prefer .s_svc_wp_container > .s_svc_wp_image,
  #tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_ct_container > div:first-child,
  #tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_ct_container > .s_svc_ct_image {
    order: unset !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_title_col,
  #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_center,
  #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_features {
    text-align: center !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_feature_item {
    justify-content: center;
    text-align: start;
  }
}

@media (max-width: 992px) {
  #tw-app-services.tw-scope .s_tarmez_svc_provider > .absolute {
    display: none !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_subtitle {
    margin-bottom: 1.75rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_col_main,
  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_col_secondary {
    display: contents !important;
  }

  /* Mobile stack (beats .order-1 / .order-3 utility collision on secondary image). */
  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_main_title {
    order: 1 !important;
    margin-bottom: 0.75rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_main_image {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_main_points {
    order: 3 !important;
    margin-bottom: 0 !important;
    padding: 1rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_title {
    order: 4 !important;
    margin-bottom: 0.75rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_image {
    order: 5 !important;
    margin-bottom: 0 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_points {
    order: 6 !important;
    margin-bottom: 0 !important;
    padding: 1rem 1.25rem 1.25rem !important;
    background-color: #ebf7f7 !important;
    border-radius: 0 0 1rem 1rem !important;
    box-shadow: none !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_title {
    background-color: #ebf7f7 !important;
    padding: 1.25rem 1.25rem 0.5rem !important;
    border-radius: 1rem 1rem 0 0 !important;
    margin-bottom: 0 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_image {
    margin-bottom: 0 !important;
    border-radius: 1rem !important;
  }
}

@media (min-width: 992px) {
  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_col_secondary {
    display: flex !important;
    flex-direction: column !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_points {
    order: 1 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_title {
    order: 2 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_secondary_image {
    order: 3 !important;
  }
}

@media (max-width: 768px) {
  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_tarmez_svc_impl_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_body_wrap {
    top: 8.5rem !important;
    min-height: 380px !important;
    width: 86% !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_content {
    padding: 2.75rem 0.875rem 1rem !important;
    border-radius: 1rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_content h4 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.625rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_content p {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_icon_wrap { top: -1.5rem !important; }
  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_icon_circle { width: 3.25rem !important; height: 3.25rem !important; border-width: 2px !important; }
  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_icon_img { width: 1.5rem !important; height: 1.5rem !important; }
  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_media { height: 11rem !important; }
  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_subtitle { align-items: flex-start !important; gap: 0.5rem !important; }
}

@media (max-width: 460px) {
  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_body_wrap {
    width: 92% !important;
    min-height: 340px !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_content h4 {
    font-size: 0.9rem !important;
  }
}

/* RTL fixes — also match Arabic via lang when html[dir] is absent */

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid {
  direction: ltr;
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid h2,
html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid p,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid h2,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid p {
  direction: rtl;
  text-align: right !important;
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid .flex.items-start,
html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_feature_item,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid .flex.items-start,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_feature_item {
  flex-direction: row-reverse;
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid .leading-none,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_provider .s_svc_prov_grid .leading-none {
  margin-inline-start: 0.5rem;
  margin-inline-end: 0;
}

/* Why Prefer accordion — logical spacing for timeline + text (LTR & RTL) */
#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .accordion-body {
  padding-inline-start: 4rem;
  padding-bottom: 1rem;
}

#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .accordion-timeline-wrap {
  position: relative;
  padding-inline-start: 1.25rem;
}

#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .accordion-timeline-line {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 4px;
  height: 100%;
  background-color: #e5e7eb;
}

#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .accordion-timeline-line .progress-bar {
  width: 100%;
  background-color: #111827;
}

#tw-app-services.tw-scope .s_tarmez_svc_why_prefer .accordion-body p {
  margin: 0;
  text-align: start;
  line-height: 1.6;
}

html[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_intro,
html[lang^="ar"] #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_intro {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_cta h2.text-teal-custom,
html[lang^="ar"] #tw-app-services.tw-scope .s_tarmez_svc_cta h2.text-teal-custom {
  text-align: right;
  direction: rtl;
}

/* Industries circle — centered labels (no mirror needed) */
html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_industries #industries-circle text.title,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_industries #industries-circle text.title {
  font-size: 11px !important;
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_industries #industries-circle text.desc,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_industries #industries-circle text.desc {
  font-size: 8px !important;
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_industries #industries-circle text.num,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_industries #industries-circle text.num {
  font-size: 16px !important;
}

/* Contact: form first in DOM — LTR = form left / image right; RTL = form right / image left */
#tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_contact_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 1024px) {
  #tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_contact_layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 3rem;
  }
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_contact_layout,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_contact_layout {
  direction: rtl;
}

#tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_contact_form_wrap {
  max-width: 100%;
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_contact h2,
html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_contact label,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_contact h2,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_contact label {
  text-align: right !important;
}

/* Methodology checkmarks: teal brand color */
#tw-app-services.tw-scope .methodology-section .methodology-item .w-12 {
  border-color: #1cbbbf !important;
}

#tw-app-services.tw-scope .methodology-section .methodology-item .w-12 svg {
  color: #1cbbbf !important;
  stroke: #1cbbbf !important;
}

/* CTA dotted background: mirror by language direction */
#tw-app-services.tw-scope .s_tarmez_svc_cta .cta-bg-container {
  background-image: url("/tait_tarmez_theme/static/src/img/dotsBg.png");
  background-size: 0;
  background-repeat: no-repeat;
  background-position: right center;
}

@media (min-width: 1024px) {
  #tw-app-services.tw-scope .s_tarmez_svc_cta .cta-bg-container {
    background-size: 42%;
  }
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_cta .cta-bg-container,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_cta .cta-bg-container {
  background-position: left center !important;
}

/* Methodology dotted bg + step layout mirror in RTL */
html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section [data-bg-position="top-left"],
[dir="rtl"] #tw-app-services.tw-scope .methodology-section [data-bg-position="top-left"] {
  background-position: top right !important;
}

html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section [data-bg-position="top-right"],
[dir="rtl"] #tw-app-services.tw-scope .methodology-section [data-bg-position="top-right"] {
  background-position: top left !important;
}

@media (min-width: 1024px) {
  html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section .methodology-content-wrap.lg\:left-0,
  html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section .lg\:left-0,
  [dir="rtl"] #tw-app-services.tw-scope .methodology-section .methodology-content-wrap.lg\:left-0,
  [dir="rtl"] #tw-app-services.tw-scope .methodology-section .lg\:left-0 {
    left: auto !important;
    right: 0 !important;
  }

  html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section .methodology-content-wrap.lg\:right-0,
  html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section .lg\:right-0,
  [dir="rtl"] #tw-app-services.tw-scope .methodology-section .methodology-content-wrap.lg\:right-0,
  [dir="rtl"] #tw-app-services.tw-scope .methodology-section .lg\:right-0 {
    right: auto !important;
    left: 0 !important;
  }

  html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section .lg\:ml-auto,
  [dir="rtl"] #tw-app-services.tw-scope .methodology-section .lg\:ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .methodology-section .lg\:mr-auto,
  [dir="rtl"] #tw-app-services.tw-scope .methodology-section .lg\:mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
  }
}

/* CTA parity: mirror icon in RTL */
html[lang^="ar"] #wrapwrap.o_rtl #tw-app-services.tw-scope .s_tarmez_svc_cta .absolute[style*="inset-inline-start: 66%"],
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_cta .absolute[style*="inset-inline-start: 66%"] {
  inset-inline-end: auto !important;
  inset-inline-start: 66% !important;
}

/* --------------------------------------------------------------------------
 * Legacy service helpers imported from source css/index.css (scoped)
 * -------------------------------------------------------------------------- */
#tw-app-services.tw-scope .heading-large {
  font-size: 3rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

@media (min-width: 768px) {
  #tw-app-services.tw-scope .heading-large {
    font-size: 3.5rem !important;
  }
}

#tw-app-services.tw-scope .text-dark-custom {
  color: #171717 !important;
}

#tw-app-services.tw-scope .text-teal-custom {
  color: #1cbbbf !important;
}

@media (max-width: 768px) {
  #tw-app-services.tw-scope .methodology-section {
    padding-top: 3rem;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-main-title {
    font-size: 2rem !important;
    line-height: 2.5rem !important;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-subtitle {
    font-size: 0.875rem !important;
    line-height: 1.4rem !important;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-step {
    padding: 1rem !important;
    margin-bottom: 2.5rem !important;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-image {
    min-height: unset !important;
    height: 190px !important;
    object-fit: cover;
  }
}

[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_implementation .s_svc_impl_body_wrap {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_title_col,
[dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_features {
  text-align: right !important;
}

@media (min-width: 1025px) {
  [dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_layout > .s_svc_wc_title_col {
    order: 3;
    text-align: left !important;
  }

  [dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_layout > .s_svc_wc_center {
    order: 2;
  }

  [dir="rtl"] #tw-app-services.tw-scope .s_tarmez_svc_why_choose .s_svc_wc_layout > .s_svc_wc_features {
    order: 1;
  }

  [dir="rtl"] #wrapwrap #tw-app-services.tw-scope .text-center.lg\:text-left,
  [dir="rtl"] #wrapwrap #tw-app-services.tw-scope .text-center.lg\:text-start,
  [dir="rtl"] #tw-app-services.tw-scope .lg\:text-left,
  [dir="rtl"] #tw-app-services.tw-scope .lg\:text-start,
  html[lang^="ar"] #wrapwrap #tw-app-services.tw-scope .text-center.lg\:text-left,
  html[lang^="ar"] #wrapwrap #tw-app-services.tw-scope .text-center.lg\:text-start,
  html[lang^="ar"] #tw-app-services.tw-scope .lg\:text-left,
  html[lang^="ar"] #tw-app-services.tw-scope .lg\:text-start {
    text-align: right !important;
  }
}

@media (max-width: 767.98px) {
  #tw-app-services.tw-scope .s_tarmez_svc_provider {
    overflow-x: hidden;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-item {
    gap: 0.625rem !important;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-item .w-12 {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-item .w-12 svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-content-wrap .bg-white.rounded-2xl {
    padding: 1rem !important;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-step {
    padding: 0.75rem !important;
  }

  #tw-app-services.tw-scope .methodology-section .methodology-content-wrap.relative.p-0 {
    padding: 0 !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_contact > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_contact .s_svc_contact_form_wrap {
    max-width: 100% !important;
    width: 100% !important;
  }

  #tw-app-services.tw-scope .s_tarmez_svc_contact form input,
  #tw-app-services.tw-scope .s_tarmez_svc_contact form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}