/* Targeted fixes for the imported Webflow export inside the React app. */

html {
  scroll-behavior: smooth;
}

/* ---------- Section alignment ---------- */
/* Center the whole section block in the viewport, while keeping the actual
   heading/text content left-aligned inside that centered block. */
body .references_container,
body .videotestimonials_new {
  margin-left: auto !important;
  margin-right: auto !important;
}

body .references_container .testimonials_written.align_centre.direction_horizontal,
body .videotestimonials_new .testimonial_wrapper {
  width: 100% !important;
}

body .references_container .h2.align_left,
body .references_container .testimonialbenefits,
body .references_container .testimonialiconsandtext,
body .videotestimonials_new .h2.align_left,
body .videotestimonials_new .testimonials_written,
body .videotestimonials_new .testimonialextract_wrapper,
body .videotestimonials_new .testimonialbenefits,
body .videotestimonials_new .testimonialiconsandtext {
  text-align: left !important;
}

body .references_container .testimonialiconsandtext,
body .videotestimonials_new .testimonialiconsandtext {
  justify-content: flex-start !important;
}

body .imazsfilm_section .h2,
body .imazsfilm_section .h2.companies,
body .imazsfilm_section .headerheading.videos {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  max-width: 980px !important;
}

body .imazsfilm_section {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

body .imazsfilm_section .testimonials_written.align_centre.direction_horizontal {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

body .imazsfilm_section .testimonialbenefits.direction_vertical._50 {
  width: 100% !important;
  max-width: 760px !important;
  align-items: center !important;
}


/* "Mielőtt elmesélnénk a történeted" section - subtle top spacing */
body .imazsfilm_section {
  align-items: center !important;
  width: 85% !important;
  max-width: 1400px !important;
  box-sizing: border-box !important;
  padding-top: 40px !important;
}

@media (max-width: 767px) {
  body .imazsfilm_section {
    width: 95% !important;
    padding-top: 24px !important;
  }
}

body .imazsfilm_section .h2,
body .imazsfilm_section .h2.companies {
  max-width: 100% !important;
}

body .imazsindex_wrapper,
body .lightbox-link-2 {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- "Több pénzt keresünk neked" CTA section ---------- */
body .cta_section_wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1100px !important;
}

body .cta_section_wrapper .cta_section {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* Keep heading on one line on desktop; allow it to wrap from tablet down
   so the CTA doesn't get chopped. */
body .cta_section_wrapper .cta_text .heading-6 {
  white-space: nowrap !important;
}

@media (max-width: 991px) {
  body .cta_section_wrapper .cta_text .heading-6 {
    white-space: normal !important;
  }
  body .cta_section_wrapper .cta_text {
    margin-right: 0 !important;
    text-align: center !important;
  }
}

/* Full-section gradient hover: override Webflow IX2 slide-in so the
   coloured layer covers the whole CTA card instead of sliding a wide
   strip across it. */
body .cta_section .ctabg._3 {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 0 !important;
  background-image: linear-gradient(90deg, var(--newsecondary, #062966), var(--newmain, #317bc3)) !important;
  transition: opacity .35s ease !important;
  border-radius: 2rem !important;
}

body .cta_section:hover .ctabg._3 {
  opacity: 1 !important;
}

/* On hover, turn all text & icons white so they read on the gradient */
body .cta_section:hover .cta_text,
body .cta_section:hover .cta_text *,
body .cta_section:hover .heading-6,
body .cta_section:hover .paragraph,
body .cta_section:hover .paragraph * {
  color: #ffffff !important;
}
body .cta_section:hover .cta_text img,
body .cta_section:hover .cta_text svg {
  filter: brightness(0) invert(1) !important;
}
body .cta_section:hover .cta_text svg * {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/* ---------- Center contact & quote forms ---------- */
body .forms_container,
body .forms_container.nomargin {
  justify-content: center !important;
  place-items: start center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body .formcontainer {
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

body .ajanlat_disclaimer {
  margin-left: auto !important;
  margin-right: auto !important;
}

body .erdeklodesheading_container,
body .erdeklodes_heading {
  text-align: center !important;
  justify-content: center !important;
}

/* ---------- Alfa calculator: off-white, larger radii, subtle shadows ---------- */
body .alfa-calc-wrap {
  max-width: 1250px !important;
  width: 90% !important;
  padding: 0 !important;
  margin: 60px auto 100px !important;
  color: var(--main-text-color, #1c283f) !important;
  font-family: Lato, sans-serif !important;
}

body .alfa-calc {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(28, 40, 63, .06) !important;
  border-radius: 40px !important;
  background-image: linear-gradient(90deg, var(--bgwest, #f7f7f7a6), var(--bgeast, #f0f0f0b3)) !important;
  background-color: #f7f7f7 !important;
  box-shadow:
    inset 0 2px var(--_shadow-collection---innerblur) var(--_shadow-collection---innersize) var(--_shadow-collection---innercolor),
    0 var(--_shadow-collection---outery) var(--_shadow-collection---outerblur) var(--_shadow-collection---outersize) var(--_shadow-collection---outercolor) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
  padding: 24px !important;
  color: var(--main-text-color, #1c283f) !important;
}

body .alfa-calc::before {
  content: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

body .alfa-calc-inner {
  position: relative !important;
  z-index: 2 !important;
}

body .alfa-calc-top {
  align-items: flex-start !important;
  text-align: left !important;
}

body .alfa-eyebrow {
  color: var(--newmain, #317bc3) !important;
  font-family: Oswald, sans-serif !important;
  justify-content: flex-start !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

body .alfa-dot {
  background: var(--newmain, #317bc3) !important;
  box-shadow: 0 0 12px rgba(49, 123, 195, .55) !important;
}

body .alfa-calc h2 {
  color: var(--main-text-color, #1c283f) !important;
  font-family: Oswald, sans-serif !important;
  font-size: clamp(34px, 4.4vw, 58px) !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  text-align: left !important;
}

body .alfa-highlight {
  color: var(--newmain, #317bc3) !important;
}

body .alfa-calc-desc {
  text-align: left !important;
  margin: 0 !important;
}

body .alfa-calc-desc,
body .alfa-note,
body .alfa-summary,
body .alfa-period {
  color: #4a5568 !important;
  font-family: Lato, sans-serif !important;
}

body .alfa-panel,
body .alfa-result {
  border: 1px solid rgba(28, 40, 63, .08) !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: 0 6px 18px rgba(20, 30, 55, .06), 0 1px 2px rgba(20, 30, 55, .04) !important;
  padding: 24px !important;
}

body .alfa-result {
  background: linear-gradient(180deg, #ffffff, #f4f7fb) !important;
}

body .alfa-label,
body .alfa-result-small,
body .alfa-video-number {
  color: var(--newmain, #317bc3) !important;
  font-family: Oswald, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

body .alfa-select,
body .alfa-choice span {
  border: 1px solid rgba(28, 40, 63, .12) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  color: var(--main-text-color, #1c283f) !important;
  font-family: Lato, sans-serif !important;
  box-shadow: 0 1px 2px rgba(20, 30, 55, .04) !important;
}

body .alfa-select option {
  color: #1c283f !important;
  background: #ffffff !important;
}

body .alfa-select:focus {
  border-color: var(--newmain, #317bc3) !important;
  box-shadow: 0 0 0 3px rgba(49, 123, 195, .18) !important;
  outline: none !important;
}

body .alfa-choice input:checked + span {
  background-image: linear-gradient(0deg, var(--newmain, #317bc3), var(--newsecondary, #062966)) !important;
  border-color: transparent !important;
  color: var(--white, #fff) !important;
  box-shadow: 0 12px 20px -11px var(--newmain, #317bc3) !important;
}

body .alfa-range {
  accent-color: var(--newmain, #317bc3) !important;
}

body .alfa-range-scale {
  color: #6b7280 !important;
}

body .alfa-price {
  color: var(--main-text-color, #1c283f) !important;
  font-family: Oswald, sans-serif !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  line-height: 95% !important;
}

body .alfa-cta {
  border-radius: var(--ctaradius, 1.5rem) !important;
  background-image: linear-gradient(0deg, var(--newmain, #317bc3), var(--newsecondary, #062966)) !important;
  color: var(--white, #fff) !important;
  font-family: Oswald, sans-serif !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 20px -11px var(--newmain, #317bc3) !important;
  border: none !important;
}

body .alfa-cta:hover {
  filter: brightness(108%) !important;
  box-shadow: 0 14px 22px -8px rgba(49, 123, 195, .55) !important;
}

@media (max-width: 991px) {
  body .testimonials_written.align_centre.direction_horizontal {
    gap: 24px !important;
  }

  body .alfa-calc {
    padding: 20px !important;
    border-radius: 32px !important;
  }

  body .alfa-panel,
  body .alfa-result {
    border-radius: 12px !important;
  }
}

@media (max-width: 767px) {
  body .alfa-calc-wrap {
    width: 95% !important;
  }
}

@media (max-width: 560px) {
  body .alfa-calc {
    padding: 16px !important;
    border-radius: 24px !important;
  }

  body .alfa-calc h2 {
    font-size: 40px !important;
  }

  body .alfa-price {
    font-size: 34px !important;
  }
}


/* ---------- Disable navbar darkening on scroll ---------- */
body .navbar,
body .navbar.home {
  background-image: linear-gradient(90deg, var(--bgwest, #f7f7f7a6), var(--bgeast, #f0f0f0b3)) !important;
  background-color: transparent !important;
}

/* ---------- Fixed navbar must anchor to the top of the viewport ---------- */
/* The export relies on the bar's static position; on pages where it sits
   late in the DOM (imázsfilm) a `top:auto` fixed element renders far down. */
body .surgeto-navbar {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* ---------- Page wrapper must span the full body width ---------- */
/* The export's sections were direct children of a flex body; our React
   wrapper would otherwise shrink-to-fit and overflow horizontally. */
body .webflow-page-root {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow-x: clip !important;
}

/* ---------- Restore list markers in rich-text article bodies ---------- */
/* Tailwind's base reset strips list-style from every ul/ol; the Webflow
   export relies on native markers inside rich text blocks. */
.w-richtext ul,
.w-richtext ul[role="list"] {
  list-style: disc outside !important;
  padding-left: 40px;
}

.w-richtext ol,
.w-richtext ol[role="list"] {
  list-style: decimal outside !important;
  padding-left: 40px;
}

.w-richtext ul ul,
.w-richtext ol ul {
  list-style: circle outside !important;
}

.w-richtext li {
  display: list-item !important;
}

.w-richtext .w-list-unstyled {
  list-style: none !important;
  padding-left: 0;
}

/* --- Dynamic blog (database-driven) --------------------------------- */
.blog-search-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  font-family: inherit;
  font-size: 16px;
  background: #fff;
}
.person_blog.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.person_blog.tags .us_heading.blog.tags {
  flex: 0 0 100%;
}
.blog-share-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.blog-share-link {
  width: 32px;
  height: 32px;
  display: inline-flex;
  color: inherit;
  transition: opacity 0.2s ease;
}
.blog-share-link:hover {
  opacity: 0.6;
}
.blog-share-link svg {
  width: 100%;
  height: 100%;
}
.blogposts.all .search {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* ===== Blog index cards: max 3 per row, centered, clamped excerpts ===== */
body .blogposts_container.horizontal {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
}
body .blogposts_container.horizontal > .blogpost {
  flex: 0 1 calc((100% - 3rem) / 3);
  max-width: calc((100% - 3rem) / 3);
  min-width: 260px;
}
/* Short description: never taller than 4 lines, fades out with an ellipsis */
body .blogpost .benefitparagraph {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 991px) {
  body .blogposts_container.horizontal > .blogpost {
    flex: 0 1 calc((100% - 1.5rem) / 2);
    max-width: calc((100% - 1.5rem) / 2);
  }
}
@media screen and (max-width: 767px) {
  body .blogposts_container.horizontal > .blogpost {
    flex: 0 1 100%;
    max-width: 100%;
  }
}