/* FPCeg overrides on top of the Tecz template.
   Rule of thumb: only override what FPCeg content actually needs.
   Anything the template already does correctly is left alone. */

/* ============================================================
   1. Brand / logo
   ============================================================ */

.fpceg-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}

/* Template logo rules force a max-width meant for a wordmark image */
.fpceg-brand img {
  display: block;
  width: auto !important;
  max-width: none !important;
  height: 44px;
  object-fit: contain;
}

.fpceg-brand-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--tp-common-white);
}

/* Offcanvas panel is light, so the brand text has to flip dark there */
.offcanvas__logo .fpceg-brand-text,
.offcanvas__area .fpceg-brand-text {
  color: var(--tp-theme-secondary);
}

.offcanvas__logo .fpceg-brand img,
.tp-footer-widget-logo .fpceg-brand img {
  height: 48px;
}

.tp-preloader-logo img {
  max-width: 72px;
  height: auto;
  width: auto;
  object-fit: contain;
}

.tp-header-cta-btn .tp-btn {
  white-space: nowrap;
}

@media (max-width: 575px) {
  .fpceg-brand img {
    height: 36px;
  }
  .fpceg-brand-text {
    font-size: 18px;
  }
}

/* ============================================================
   2. Focus strip (FPCeg-only band under the hero)
   ============================================================ */

.fpceg-focus-strip {
  background: var(--tp-theme-secondary);
  color: var(--tp-common-white);
  padding: 28px 0;
}

.fpceg-focus-strip .fpceg-focus-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
}

.fpceg-focus-strip .fpceg-focus-item i {
  font-size: 28px;
  color: var(--tp-theme-primary);
  line-height: 1;
}

.fpceg-focus-strip h5 {
  margin: 0;
  color: var(--tp-common-white);
  font-size: 16px;
  font-weight: 700;
}

.fpceg-focus-strip p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

/* ============================================================
   3. Hero — dark tint so white type stays readable on the photo
   ============================================================ */

.tp-banner-two-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 18, 0.72) 0%, rgba(8, 10, 18, 0.45) 55%, rgba(8, 10, 18, 0.35) 100%);
  z-index: 1;
  pointer-events: none;
}

.tp-banner-two-wrapper .container,
.tp-banner-social,
.tp-banner-two-social {
  position: relative;
  z-index: 2;
}

.tp-banner-two-title {
  letter-spacing: -0.02em;
}

.tp-banner-social a + a {
  margin-inline-start: 18px;
}

/* ============================================================
   4. Services carousel
   ============================================================ */

.fpceg-service-card-link {
  display: block;
}

/* Template hides the <br> in service titles between 992-1399px. FPCeg titles
   are two words, so keep them from colliding when the break disappears. */
@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .tp-services-two-title a br {
    display: none;
  }
}

/* ============================================================
   5. About — photo stack proportions + text stays above decorations
   ============================================================ */

/* Template art is a 400x548 portrait; FPCeg photos are landscape, which
   collapsed the left column to ~360px and left a large void beside the copy. */
#about .tp-about-two-thumb img {
  width: 420px;
  max-width: 100%;
  height: 560px;
  object-fit: cover;
  display: block;
}

#about .tp-about-two-thumb-shape img {
  width: 300px;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* Balance the shorter photo column against the taller copy column */
@media only screen and (min-width: 992px) {
  #about > .container > .row {
    align-items: center;
  }
}

@media (max-width: 767px) {
  #about .tp-about-two-thumb img {
    width: 100%;
    height: 320px;
  }
  #about .tp-about-two-thumb-shape img {
    width: 100%;
    height: 240px;
  }
}

#about .tp-about-two-wrap {
  max-width: 100%;
}

/* Copy sits above the decorative shapes */
#about .tp-about-two-wrapper {
  position: relative;
  z-index: 3;
}

#about .tp-section-sub-title {
  color: var(--tp-theme-primary);
}

/* Template shapes are z-index:-1, which hides them behind the section fill.
   Lift them just above it and keep them faint. */
#about .tp-about-two-shape-3,
#about .tp-about-two-shape-4 {
  z-index: 0;
  pointer-events: none;
}

#about .tp-about-two-shape-4 {
  opacity: 0.12;
}

#about .tp-about-two-shape-3 {
  opacity: 0.35;
}

/* Decorative corner graphic is 490px wide — wider than a phone */
@media (max-width: 767px) {
  #about .tp-about-two-shape-4 {
    display: none;
  }
}

/* Circular badge holding the white FPCeg mark */
#about .tp-about-avatar-thumb {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #111013;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex: 0 0 auto;
  overflow: hidden;
  border: none;
}

#about .tp-about-avatar-thumb img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  border: none !important;
  background: transparent;
  padding: 0;
}

/* ============================================================
   6. Solutions — dark photo section needs light type
   ============================================================ */

.project-area {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 1;
  padding-bottom: 100px;
}

/* Template caps this background at 63% height, which left a hard edge
   halfway down the cards once the fill became a dark photo. */
.project-area .tp-project-2-bg {
  height: 100%;
  z-index: 0;
}

.project-area .tp-project-2-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 18, 0.82) 0%, rgba(8, 10, 18, 0.68) 42%, rgba(8, 10, 18, 0.72) 100%);
  pointer-events: none;
}

.project-area > .container {
  position: relative;
  z-index: 1;
}

.project-area .tp-section-title {
  color: var(--tp-common-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.project-area .tp-section-sub-title {
  color: #6ec1ff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.project-area .tp-section-title-wrapper p {
  color: rgba(255, 255, 255, 0.88);
}

.project-area .tp-project-2-thumb img {
  width: 100%;
  object-fit: cover;
}

/* These are capability labels, not portfolio teasers — they must be readable
   without hovering (and hover does not exist on touch at all). */
.project-area .tp-project-2-info {
  position: static;
  opacity: 1;
  visibility: visible;
  background-color: transparent;
  padding: 18px 0 0;
}

.project-area .tp-project-2-content {
  transform: none;
}

.project-area .tp-project-2-title a {
  color: var(--tp-common-white);
}

.project-area .tp-project-2-title a:hover {
  color: #6ec1ff;
}

.project-area .tp-project-2-content span {
  color: #6ec1ff;
}

.project-area .tp-project-2-icon a {
  color: var(--tp-common-white);
}

/* ============================================================
   7. Why FPCeg (template video section, no video)
   ============================================================ */

.tp-video-two {
  position: relative;
  z-index: 2;
}

.tp-video-two-bg {
  overflow: hidden;
}

.tp-video-two-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 18, 0.5);
  z-index: 1;
  pointer-events: none;
}

/* Template anchors the CTA to the right of the panel; centred reads better
   now that it is a "Start a Project" link rather than a video play button. */
.tp-video-two-playlist {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.tp-video-two-playlist p {
  color: var(--tp-common-white);
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.tp-video-two-playlist > a {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Template floats a narrow card into the bottom-right corner, where FPCeg's
   longer bullet text sat underneath it. Flow it after the button instead. */
.tp-video-two-info {
  position: static;
  width: auto;
  max-width: 320px;
  margin-top: 28px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 28px rgba(16, 23, 40, 0.08);
}

/* Circle now holds the white FPCeg mark instead of the template's gear glyph */
.tp-video-two-info-icon {
  transform: none;
  flex-shrink: 0;
  line-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tp-video-two-info-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.tp-video-two-info-text {
  margin-top: 0;
}

.tp-video-two-info-text span {
  display: block;
  line-height: 1.45;
}

/* Below 992px the template makes the photo panel static, which would let the
   tint pseudo-element escape it. */
@media only screen and (max-width: 991px) {
  .tp-video-two-bg {
    position: relative;
  }

  .tp-video-two-playlist {
    position: absolute;
    bottom: 36px;
  }
}

/* ============================================================
   8. Mid-page and closing CTAs over photos
   ============================================================ */

.tp-cta-two {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.tp-cta-two-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tp-cta-two-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 18, 0.68);
  pointer-events: none;
}

.tp-cta-two .container {
  position: relative;
  z-index: 1;
}

.tp-cta-two-title {
  color: var(--tp-common-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Circle holds the white FPCeg mark instead of the template's gear glyph */
.tp-cta-two-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  overflow: hidden;
}

.tp-cta-two-icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  display: block;
}

.tp-cta-three-bg {
  position: relative;
  background-color: var(--tp-theme-secondary);
  z-index: 1;
}

.tp-cta-three-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 18, 0.88) 0%, rgba(8, 10, 18, 0.78) 60%, rgba(8, 10, 18, 0.7) 100%);
  z-index: 0;
  pointer-events: none;
}

.tp-cta-three-bg .container {
  position: relative;
  z-index: 1;
}

.tp-cta-three-title {
  color: var(--tp-common-white);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   9. Contact + FAQ
   ============================================================ */

/* Template pulls this section up by -165px to slide under a light section and
   paints a blue slab behind the FAQ heading. Both collide with the full-bleed
   dark CTA that precedes it here. */
#contact.tp-faq-wrapper {
  margin-top: 0;
  padding-top: 100px;
  padding-bottom: 80px;
  z-index: auto;
}

#contact .tp-faq-content {
  margin-top: 0;
  margin-bottom: 36px;
}

#contact .tp-faq-content span {
  color: var(--tp-theme-primary);
}

#contact .tp-faq-content-title {
  color: var(--tp-theme-secondary);
  font-size: 36px;
}

/* Template offsets the FAQ column to clear the blue slab */
#contact .fpceg-faq-col {
  margin-left: 0;
}

#contact .tp-form-content {
  position: relative;
  z-index: 2;
}

#contact .tp-form-shape {
  z-index: 0;
  pointer-events: none;
}

.fpceg-form-note {
  font-size: 14px;
  opacity: 0.85;
}

/* Available to screen readers, invisible on screen. */
.fpceg-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Honeypot: never shown, never focusable, never announced. */
.fpceg-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ajax-response {
  margin-top: 12px;
  min-height: 24px;
  font-size: 14px;
}

.ajax-response.success {
  color: #16a34a;
}

.ajax-response.error {
  color: #dc2626;
}

/* ============================================================
   10. Footer
   ============================================================ */

.tp-footer-terms a + a {
  margin-inline-start: 16px;
}