/*=================================================
  TECHNO-SERVICE.CSS  —  replică vizuală „Services Style 02”
  (https://wp.ditsolution.net/techno/service-two/  ·  page id 10857)

  Valorile (culori, spații, dimensiuni, raze, hover-uri) sunt extrase
  1:1 din CSS-ul temei Techno:
    · assets/techno/css/widgets-style.css   (section-title.style1,
      service-box.style9, pricing.style-two, testimonial.style1.style4,
      form-area.main-contact / contact-two, brand.style1)
    · assets/techno/css/post-10857.css      (paddings + culori de secțiune)
  și verificate prin computed styles pe demo-ul live.

  Tot markup-ul e prefixat `tsx-` și încapsulat în `.tsx` ca să nu
  intre în coliziune cu clasele generice din assets/css/style.css
  (.service-box, .pricing, .price-item, .brand, .icon, .title …).

  Se încarcă DUPĂ custom.css. Culoarea primară vine din
  var(--theme-color) cu fallback #0C5ADB (valoarea Techno).
==================================================*/

.tsx {
  --tsx-primary: var(--theme-color, #0C5ADB);
  --tsx-primary-hover: #1266F1;
  --tsx-primary-dark: #00247E;
  --tsx-icon-bg: #e8ecfc;
  --tsx-section-bg: #EFF2F7;
  --tsx-title: #232323;
  --tsx-body: #686868;
  --tsx-muted: #616161;
  --tsx-border: #e6e6e6;
  font-family: var(--body-font, "Mulish", sans-serif);
  color: var(--tsx-body);
}

.tsx *,
.tsx *::before,
.tsx *::after { box-sizing: border-box; }

.tsx h1, .tsx h2, .tsx h3, .tsx h4, .tsx h5 {
  font-family: var(--title-font, "Mulish", sans-serif);
}

/* ---------- container / grid (Elementor boxed: 1320px, coloane cu 10px) ---------- */
.tsx-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

.tsx-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.tsx-col-3 { width: 33.3333%; padding: 0 10px; }
.tsx-col-4 { width: 25%; padding: 0 10px; }
.tsx-col-2 { width: 50%; padding: 0 10px; }

/*=================================================
  1. BREADCUMB / HERO
==================================================*/
.tsx-breadcumb {
  position: relative;
  padding: 120px 0 89px;
  background-position: center 40%;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  filter: grayscale(.5) saturate(.85);
}

.tsx-breadcumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 16, 34, .88) 0%, rgba(8, 16, 34, .74) 55%, rgba(8, 16, 34, .54) 100%);
}

.tsx-breadcumb .tsx-container { position: relative; z-index: 2; }

.tsx-breadcumb-title {
  font-size: 45px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
  margin: 0 0 20px;
}

.tsx-breadcumb-menu {
  display: inline-block;
  list-style: none;
  margin: 0 0 5px;
  padding: 8px 13px 7px;
  background: rgba(255, 255, 255, .25);
  border-radius: 4px;
}

.tsx-breadcumb-menu li {
  display: inline-block;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  text-transform: uppercase;
  vertical-align: middle;
}

.tsx-breadcumb-menu li a { color: #fff; text-decoration: none; transition: .3s; }
.tsx-breadcumb-menu li a:hover { color: #cfe0ff; }
.tsx-breadcumb-menu li.tsx-sep {
  margin: 0 9px;
  font-size: 13px;
  opacity: .9;
}

/*=================================================
  2. SECTION TITLE  (.section-title.style1.center)
==================================================*/
.tsx-title-block { position: relative; text-align: center; }

.tsx-eyebrow {
  display: inline-block;
  margin: 0 0 15px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 5px;
  color: var(--tsx-primary);
}

.tsx-sec-title {
  margin: 0;
  font-size: 39px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--tsx-title);
}

.tsx-sec-title-two {
  margin: 0;
  font-size: 39px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--tsx-title);
}
.tsx-sec-title-two span { color: var(--tsx-primary); }

.tsx-bar-main { display: inline-block; margin: 0; }

.tsx-bar {
  position: relative;
  width: 90px;
  height: 5px;
  margin: 18px auto;
  border-radius: 30px;
  background: #aec6ef;
}

.tsx-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2.7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tsx-primary);
  animation: tsxMoveBg 3s linear infinite;
}

@keyframes tsxMoveBg {
  from { transform: translateX(0); }
  to   { transform: translateX(88px); }
}

.tsx-sec-text {
  width: 71%;
  margin: 12px auto 0;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--tsx-body);
}

/*=================================================
  3. SECȚIUNEA DE SERVICII (carduri albe pe #EFF2F7)
==================================================*/
.tsx-services {
  background-color: var(--tsx-section-bg);
  padding: 71px 0 56px;
}

.tsx-cards { margin-top: 30px; }
.tsx-cards .tsx-col-3 { margin-bottom: 20px; }

.tsx-card {
  height: 100%;
  padding: 40px 30px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}

.tsx-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  margin: 0 0 33px;
  background: var(--tsx-icon-bg);
  border-radius: 33% 66% 70% 30% / 49% 62% 38% 51%;
  transition: .5s;
}

/* iconițele noastre sunt SVG-uri mono: colorate prin mask, ca să poată
   deveni albe pe hover, exact ca font-iconițele din demo */
.tsx-ic {
  display: block;
  width: 40px;
  height: 40px;
  background-color: var(--tsx-primary);
  transition: .5s;
  -webkit-mask: var(--tsx-icon) center / 40px 40px no-repeat;
  mask: var(--tsx-icon) center / 40px 40px no-repeat;
}

.tsx-card:hover .tsx-card-icon { background: var(--tsx-primary); }
.tsx-card:hover .tsx-ic { background-color: #fff; }

.tsx-card-title {
  position: relative;
  margin: 0 0 32px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--tsx-title);
}

.tsx-card-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  margin: auto;
  width: 100px;
  height: 1px;
  background: #d1d1d1;
  transition: .6s;
}

.tsx-card-text {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 24px;
  color: var(--tsx-body);
}

.tsx-card-btn {
  display: inline-block;
  margin-top: 11px;
  padding: 10px 27px;
  border: 1px solid var(--tsx-icon-bg);
  border-radius: 0 15px;
  font-size: 16px;
  font-weight: 600;
  color: #6d6d6d;
  text-decoration: none;
  transition: .5s;
}

.tsx-card:hover .tsx-card-btn {
  background: var(--tsx-primary);
  border-color: var(--tsx-primary);
  color: #fff;
}

/* variantă compactă — grila „Pentru cine e potrivit” */
.tsx-card--compact { padding: 34px 26px; }
.tsx-card--compact .tsx-card-icon { width: 74px; height: 74px; margin-bottom: 24px; }
.tsx-card--compact .tsx-ic { width: 34px; height: 34px; -webkit-mask-size: 34px 34px; mask-size: 34px 34px; }
.tsx-card--compact .tsx-card-title { font-size: 19px; margin: 0; }
.tsx-card--compact .tsx-card-title::before { display: none; }

/* variantă „stat” — cifră mare în loc de iconiță (context legislativ / pași) */
.tsx-card--stat { padding: 34px 26px; }

.tsx-stat-num {
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--tsx-primary);
}

.tsx-card--stat .tsx-card-text { margin: 0; }

/* linia discretă de sub grilă (slot „Challenges are just opportunities…”) */
.tsx-note {
  margin: 14px 0 0;
  text-align: center;
  font-weight: 500;
  color: var(--tsx-muted);
}
.tsx-note a { color: var(--tsx-primary); text-decoration: underline; }

.tsx-subblock { margin-top: 56px; }

/*=================================================
  4. „MAKE AN APPOINTMENT” — imagine + panou albastru
==================================================*/
.tsx-appointment {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--tsx-primary);
  overflow: hidden;
}

.tsx-appointment-media { width: 50%; }

/* în demo imaginea își păstrează raportul (1024×683 ≈ 3/2) și lasă
   o bandă albastră sub ea, până la baza panoului */
.tsx-appointment-media img {
  display: block;
  width: 100%;
  height: calc(100% - 90px);
  min-height: 320px;
  object-fit: cover;
}

.tsx-appointment-panel {
  position: relative;
  width: 50%;
  padding: 0 40px 56px 50px;
}

.tsx-appointment-circle {
  position: absolute;
  top: 66px;
  right: 38px;
  width: 270px;
  max-width: 40%;
  pointer-events: none;
  animation: tsxBounce 4s ease-in-out infinite;
}

@keyframes tsxBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

.tsx-appointment-title {
  position: relative;
  z-index: 2;
  margin: 56px 0 14px;
  font-size: 39px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}

.tsx-appointment-text {
  position: relative;
  z-index: 2;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}

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

.tsx-form-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -11px;
}

.tsx-form-col { width: 50%; padding: 0 11px 20px; }
.tsx-form-col--full { width: 100%; }

.tsx-form .tsx-input,
.tsx-form .tsx-textarea {
  width: 100%;
  height: 52px;
  padding: 5px 25px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: 22.5px;
  outline: 0;
  transition: .3s;
}

.tsx-form .tsx-textarea {
  height: 174px;
  padding: 20px 20px 20px 25px;
  resize: vertical;
}

.tsx-form .tsx-input::placeholder,
.tsx-form .tsx-textarea::placeholder { color: #fff; opacity: .85; }

.tsx-form .tsx-input:focus,
.tsx-form .tsx-textarea:focus { border-color: rgba(255, 255, 255, .7); }

.tsx-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .88);
  cursor: pointer;
}

/* style.css ascunde global input[type=checkbox] (display:none) — îl reactivăm */
.tsx-consent input[type="checkbox"] {
  flex: 0 0 auto;
  display: inline-block;
  visibility: visible;
  opacity: 1;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  width: 17px;
  min-width: 17px;
  height: 17px;
  padding: 0;
  margin: 3px 0 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 3px;
  background: rgba(255, 255, 255, .2);
  cursor: pointer;
  transition: .2s;
}

.tsx-consent input[type="checkbox"]:checked { background: #fff; border-color: #fff; }

.tsx-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 9px;
  border: solid var(--tsx-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.tsx-form-submit {
  display: inline-block;
  margin-top: 19px;
  padding: 14px 39px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  color: var(--tsx-title);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  text-decoration: none;
  transition: .3s;
}

.tsx-form-submit:hover { background: var(--tsx-primary-dark); color: #fff; }

/*=================================================
  5. PRICING  (.pricing.style-two)
==================================================*/
.tsx-pricing { padding: 74px 0 80px; background: #fff; }

.tsx-pricing .tsx-cards { margin-top: 30px; }

.tsx-price {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 31px 40px 50px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--tsx-border);
  border-radius: 8px;
  overflow: hidden;
  transition: .3s;
  display: flex;
  flex-direction: column;
}

.tsx-price:hover,
.tsx-price:hover .tsx-price-features,
.tsx-price:hover .tsx-price-btn { border-color: var(--tsx-primary); }

.tsx-price-title {
  margin: 11px 0 0;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--tsx-primary);
}

.tsx-price-item { margin: 15px 0 17px; transition: .3s; }

.tsx-price-cur {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--tsx-primary);
  vertical-align: 18px;
  margin-right: 4px;
}

.tsx-price-num {
  display: inline-block;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--tsx-primary);
}

.tsx-price-per {
  display: inline-block;
  font-size: 19px;
  font-weight: 500;
  color: var(--tsx-primary);
  margin-left: 4px;
}

.tsx-price-features {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 31px 0 44px;
  border: 1px solid var(--tsx-border);
  border-radius: 7px;
  transition: .3s;
}

.tsx-price-features li {
  display: block;
  padding: 8px 22px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--tsx-body);
  transition: .3s;
}

.tsx-price-features li:last-child { padding-bottom: 0; }

.tsx-price-btn {
  display: inline-block;
  align-self: center;
  margin-top: 36px;
  padding: 12px 35px;
  border: 1px solid var(--tsx-border);
  border-radius: 3px;
  font-size: 18px;
  font-weight: 600;
  color: var(--tsx-muted);
  text-decoration: none;
  transition: .3s;
}

.tsx-price-btn i { margin-left: 6px; }
.tsx-price:hover .tsx-price-btn { background: var(--tsx-primary); color: #fff; }

/*=================================================
  6. BANDA CTA închisă peste fotografie
==================================================*/
.tsx-cta {
  position: relative;
  z-index: 1;
  padding: 75px 0 91px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.tsx-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000000ED;
  opacity: .5;
  z-index: -1;
}

.tsx-cta-title {
  margin: 0 0 19px;
  font-size: 25px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}

.tsx-cta-sub {
  margin: 0;
  font-size: 25px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}

.tsx-cta-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 16px 30px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: #fff;
  color: var(--tsx-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  text-decoration: none;
  transition: .3s;
}

.tsx-cta-btn:hover {
  background: var(--tsx-primary);
  border-color: var(--tsx-primary);
  color: #fff;
}

/*=================================================
  7. FAQ în containerul vizual de testimoniale
==================================================*/
.tsx-faq {
  background-color: var(--tsx-section-bg);
  padding: 56px 0 72px;
}

.tsx-faq-grid { margin-top: 20px; }
.tsx-faq-grid .tsx-col-2 { margin-bottom: 20px; display: flex; }

.tsx-faq-item {
  display: flex;
  flex-direction: column;
  margin: 10px;
  width: 100%;
}

.tsx-faq-card {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: 40px 30px;
  margin-bottom: 40px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 7px 0 rgba(0, 0, 0, .1);
  text-align: left;
}

.tsx-faq-card::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px;
  border-color: #fff transparent transparent #fff;
  transition: .5s;
}

.tsx-faq-card::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-radius: 5px;
  background: var(--tsx-primary-hover);
  transition: .5s;
  z-index: -1;
}

.tsx-faq-card:hover::after { width: 100%; left: 0; }
.tsx-faq-card:hover::before { border-color: var(--tsx-primary-hover) transparent transparent var(--tsx-primary-hover); }

.tsx-faq-q {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--tsx-title);
  transition: .5s;
}

.tsx-faq-a {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--tsx-body);
  transition: .5s;
}

.tsx-faq-card:hover .tsx-faq-q,
.tsx-faq-card:hover .tsx-faq-a { color: #fff; }

.tsx-faq-meta {
  display: flex;
  align-items: center;
  gap: 25px;
}

.tsx-faq-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  background: var(--tsx-icon-bg);
}

.tsx-faq-badge .tsx-ic { width: 36px; height: 36px; -webkit-mask-size: 36px 36px; mask-size: 36px 36px; }

.tsx-faq-topic {
  margin: 9px 0 10px;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--tsx-title);
}

.tsx-faq-label {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--tsx-primary);
}

/*=================================================
  8. Bandă cu cele 8 servicii (înlocuiește logo-urile de branduri)
==================================================*/
.tsx-servicebar { padding: 51px 0; background: #fff; }

.tsx-servicebar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 10px;
}

.tsx-servicebar-item {
  flex: 1 1 150px;
  max-width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition: .3s;
}

.tsx-servicebar-item .tsx-ic {
  width: 34px;
  height: 34px;
  background-color: #9aa5b8;
  -webkit-mask-size: 34px 34px;
  mask-size: 34px 34px;
}

.tsx-servicebar-item span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tsx-muted);
  transition: .3s;
}

.tsx-servicebar-item:hover { background: #f5f8fe; }
.tsx-servicebar-item:hover .tsx-ic { background-color: var(--tsx-primary); }
.tsx-servicebar-item:hover span { color: var(--tsx-primary); }

.tsx-servicebar-item.is-current { background: #eef3fd; }
.tsx-servicebar-item.is-current .tsx-ic { background-color: var(--tsx-primary); }
.tsx-servicebar-item.is-current span { color: var(--tsx-primary); }

/*=================================================
  RESPONSIVE
==================================================*/
@media (max-width: 1366px) {
  .tsx-appointment-title { margin: 20px 0 14px; }
  .tsx-appointment-panel { padding-top: 36px; }
  .tsx-appointment-circle { display: none; }
}

@media (max-width: 1199px) {
  .tsx-sec-title, .tsx-sec-title-two { font-size: 34px; }
  .tsx-appointment-title { font-size: 32px; }
  .tsx-price { padding: 31px 24px 40px; }
  .tsx-price-num { font-size: 40px; }
}

@media (max-width: 1024px) {
  .tsx-col-3, .tsx-col-4 { width: 50%; }
  .tsx-appointment-media,
  .tsx-appointment-panel { width: 100%; }
  .tsx-appointment-media img { height: auto; aspect-ratio: 3 / 2; }
  .tsx-appointment-panel { padding: 40px 30px 56px; }
  .tsx-breadcumb { padding: 90px 0 70px; }
  .tsx-breadcumb-title { font-size: 35px; margin-bottom: 21px; }
  .tsx-sec-text { width: 90%; font-size: 18px; }
}

@media (max-width: 767px) {
  .tsx-col-3, .tsx-col-4, .tsx-col-2 { width: 100%; }
  .tsx-services { padding: 50px 0 40px; }
  .tsx-pricing { padding: 50px 0 55px; }
  .tsx-faq { padding: 40px 0 50px; }
  .tsx-cta { padding: 55px 0 60px; }
  .tsx-servicebar { padding: 36px 0; }
  .tsx-breadcumb { padding: 70px 0 55px; }
  .tsx-breadcumb-title { font-size: 28px; margin-bottom: 14px; }
  .tsx-sec-title, .tsx-sec-title-two { font-size: 28px; }
  .tsx-sec-text { width: 100%; font-size: 17px; }
  .tsx-appointment-title { font-size: 28px; }
  .tsx-form-col { width: 100%; }
  .tsx-cta-title, .tsx-cta-sub { font-size: 21px; }
  .tsx-faq-item { margin: 10px 0; height: auto; }
  .tsx-subblock { margin-top: 40px; }
  .tsx-servicebar-item { flex: 1 1 40%; }
}

@media (max-width: 420px) {
  .tsx-breadcumb-title { font-size: 24px; }
  .tsx-card { padding: 32px 22px; }
  .tsx-price { padding: 28px 18px 34px; }
}