/* ==========================================================================
   Tetőfedő Profik – vizuális polish réteg

   Ez a fájl a main.css (RoofPro sablon) UTÁN töltődik be, és nem módosítja
   azt közvetlenül — helyette pontosan megcélzott, önálló szabályokkal
   frissíti a kártyák, gombok és aloldal-fejlécek megjelenését, hogy
   egységesebb, modernebb hatást keltsenek. A sablon 25 000+ soros main.css-e
   sok, egymást átfedő, kontextusfüggő szelektort használ (pl.
   ".service2 .service2-boxarea"), ezért a legtöbb szabálynál !important-et
   használunk a vizuális (árnyék/lekerekítés/hover) tulajdonságokon — ez
   garantálja, hogy a hatás minden oldalon érvényesül, függetlenül attól,
   melyik sablon-variáns szelektora "nyerne" különben specificitás alapján.
   Elrendezést (display/position/width) sosem írunk felül !important-tel.
   ========================================================================== */

:root {
  --polish-radius: 20px;
  --polish-radius-sm: 14px;
  --polish-shadow-rest: 0 4px 24px rgba(15, 13, 13, 0.07);
  --polish-shadow-hover: 0 28px 50px -16px rgba(15, 13, 13, 0.22);
  --polish-accent: #EC4A05;
}

/* --------------------------------------------------------------------------
   1. Aloldal fejléc-sáv ("hero-inner-area") – üveg-panel a cím köré,
      lekerekített morzsamenü-pill, finom dekoratív fényfoltok a háttérben.
   -------------------------------------------------------------------------- */
.hero-inner-area {
  isolation: isolate;
}
.hero-inner-area::before,
.hero-inner-area::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.hero-inner-area::before {
  width: 260px;
  height: 260px;
  top: -80px;
  left: 8%;
  background: rgba(236, 74, 5, 0.32);
}
.hero-inner-area::after {
  width: 220px;
  height: 220px;
  bottom: -60px;
  left: 28%;
  background: rgba(15, 13, 13, 0.15);
}
.hero-inner-area .container {
  position: relative;
  z-index: 2;
}
.hero-inner-area .inner-header {
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--polish-radius) !important;
  box-shadow: var(--polish-shadow-hover) !important;
  padding: 32px 36px !important;
  display: inline-block;
}
@media (max-width: 767px) {
  .hero-inner-area .inner-header {
    padding: 24px !important;
  }
}
.hero-inner-area .inner-header span {
  display: inline-flex !important;
  align-items: center;
  background: rgba(236, 74, 5, 0.08);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 15px !important;
}
.hero-inner-area .inner-header span a {
  font-size: 15px !important;
}
.hero-inner-area .inner-header span i {
  color: var(--polish-accent);
}

/* --------------------------------------------------------------------------
   2. Kártya-konténerek – egységes lekerekítés + emelt árnyék, a listás
      elemeknél (szolgáltatás, csapat, projekt, vélemény, blog) finom
      hover-lift effekttel.
   -------------------------------------------------------------------------- */
.service2-boxarea,
.team-boxarea-about,
.pricing-boxarea,
.projects-inner-box,
.testimonial5-boxarea,
.vl-blog-1-item,
.others-boxes,
.contact-boxarea,
.calnow-boxes,
.accordion-item,
.details-box,
.team-contact-boxarea,
.comments-boxarea,
.contact-main-boxarea {
  border-radius: var(--polish-radius) !important;
  box-shadow: var(--polish-shadow-rest) !important;
}

/* A .details-box-nak (projekt-részletoldal "Kategória/Ügyfél/Dátum" chipjei)
   a sablonban nem volt sem háttere, sem belső margója — a fenti árnyék
   így csak szorosan a szöveg köré simult, ezért a dobozok helyzettől
   függően (pl. ha két szomszédos doboz árnyéka összeért) egyenetlennek,
   "nem szépnek" tűntek. Egy tényleges, egységes háttér + belső margó
   megoldja: mindhárom doboz egyforma, jól elkülönülő "chipként" fest. */
.details-box {
  background: #F8F8F8 !important;
  padding: 20px 24px !important;
}

.service2-boxarea,
.team-boxarea-about,
.projects-inner-box,
.testimonial5-boxarea,
.vl-blog-1-item,
.others-boxes,
.calnow-boxes {
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.service2-boxarea:hover,
.team-boxarea-about:hover,
.projects-inner-box:hover,
.testimonial5-boxarea:hover,
.vl-blog-1-item:hover,
.others-boxes:hover,
.calnow-boxes:hover {
  transform: translateY(-8px);
  box-shadow: var(--polish-shadow-hover) !important;
}

/* Az accordion-item-nél nincs lift (kattintható fejléc, nem "kártya"), csak
   a lekerekítés/árnyék finomodik, és a nyitott elem kicsit kiemelkedik. A
   nyitott elem háttere a sablonban kék volt (--ztc-bg-bg-3) — az egységes
   narancssárga megjelenésért ezt is felülírjuk. */
.accordion-item {
  overflow: hidden;
  background: #EC4A05 !important;
}
.accordion-collapse.show {
  box-shadow: none !important;
}

/* A középső, kiemelt pricing-kártyánál (already "active" state a sablonban)
   ne ütközzön a saját, meglévő kiemelésével — csak a lekerekítést/árnyékot
   igazítjuk, liftet nem adunk hozzá. A kártya háttere a sablonban kék volt
   (--ztc-bg-bg-3) — az egységes narancssárga megjelenésért ezt is
   felülírjuk, a fehér szövegek (h2/p/span/li) változatlanul jól olvashatók
   maradnak rajta. */
.pricing-boxarea.active {
  background: #EC4A05 !important;
  box-shadow: var(--polish-shadow-hover) !important;
}

/* --------------------------------------------------------------------------
   3. Gombok – finom mélységérzet hover közben, a meglévő
      felemelkedés+kitöltés effekt mellett.
   -------------------------------------------------------------------------- */
.vl-btn1:hover,
.vl-btn2:hover,
.vl-btn3:hover {
  box-shadow: 0 16px 32px -12px rgba(236, 74, 5, 0.45);
}

/* A pricing.html kiemelt középső kártyája eredetileg a vl-btn1 (kék)
   gombosztályra épülő invertált (fehér alapon kék szöveg) gombstílust
   kapta a sablonból — mivel a gombokat narancssárgára (vl-btn3) váltottuk
   az egységes megjelenésért, itt pótoljuk ugyanezt az invertált hatást,
   csak narancssárga szöveggel. */
.pricing-boxarea.active .btn-area1 .vl-btn3 {
  color: #EC4A05 !important;
  background: #fff;
}
.pricing-boxarea.active .btn-area1 .vl-btn3::after {
  background: #EC4A05;
}

/* --------------------------------------------------------------------------
   3b. Egyéb, elszórtan maradt kék elemek a teljes site-on (a sablon
       eredeti --ztc-bg-bg-3 kék változóját használó, vagy Bootstrap
       alapértelmezett kékre visszaeső elemek) — mindegyiket narancssárgára
       igazítjuk az egységes megjelenésért.
   -------------------------------------------------------------------------- */

/* CTA-doboz háttere (minden oldal alján, "Vegye fel a kapcsolatot...") — a
   gombja is vl-btn3 (narancssárga), ami háttér nélkül eltűnne az azonos
   színű dobozon, ezért itt invertáljuk: fehér alapon narancssárga szöveg. */
.cta1-section-area .cta-content-area {
  background: #EC4A05 !important;
}
.cta1-section-area .cta-content-area .vl-btn3 {
  background: #fff !important;
  color: #EC4A05 !important;
}
.cta1-section-area .cta-content-area .vl-btn3::after {
  background: #0F0D0D;
}
.cta1-section-area .cta-content-area .vl-btn3:hover {
  color: #fff !important;
}
.cta1-section-area .cta-content-area p a,
.cta3-section .heading1 p a {
  color: #fff !important;
  text-decoration: underline;
  font-weight: 700;
}
.cta1-section-area .cta-content-area p a:hover,
.cta3-section .heading1 p a:hover {
  color: #0F0D0D !important;
}

/* Rólunk oldal cégtörténet-fülek (2018-2025) aktív gombja — Bootstrap
   alapértelmezett kékre esett vissza, mivel a sablonnak erre nem volt
   saját szabálya. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #EC4A05 !important;
}

/* Csillagos értékelés (vélemények oldal, csapattag-oldal) */
.fa-star,
li:has(> .fa-star) {
  color: #EC4A05 !important;
}

/* Lapozó (blog/csapat/projekt/vélemény lista alján) aktív oldalszám —
   szintén Bootstrap alapértelmezett kékre esett vissza. */
.page-link.active,
.active > .page-link {
  background-color: #EC4A05 !important;
  border-color: #EC4A05 !important;
}

/* Projekt-kártyák hashtag-szerű címkéi (#Szigetelés, #Családi ház stb.) */
.tags {
  background: rgba(236, 74, 5, 0.1) !important;
  color: #EC4A05 !important;
  border-color: #EC4A05 !important;
}

/* Szolgáltatás/cikk részletoldal folyamat-lépéseinek sorszáma (01, 02, 03) */
.service-list h3 {
  color: #EC4A05 !important;
}

/* Áraink oldal "Kisebb ház / Nagyobb ingatlan" kapcsolója */
.compareplan-section-area .toggle-inner {
  background: #EC4A05 !important;
}
.pricing-boxarea.active .btn-area1 .vl-btn3:hover {
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   3b. Fejléc – a navigáció "lg" töréspontnál (992px) jelenik meg immár
       "xl" (1200px) helyett, hogy egy oldalpanellel megosztott, keskenyebb
       böngészőablakban se tűnjön el a teljes menü. 992–1199px között
       szűkösebb a hely, ezért itt kicsit összébb húzzuk a menüpontokat és
       nem engedjük tördelni a telefonszám-gombot.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .vl-main-menu ul > li > a {
    padding: 0 8px !important;
    font-size: 15px !important;
  }
  .vl-hero-btn .btn-area1 a {
    white-space: nowrap;
    font-size: 15px !important;
    padding: 14px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   4. Szekció-címkék – kicsit határozottabb, modernebb tipográfia.
   -------------------------------------------------------------------------- */
.vl-section-subtitle {
  letter-spacing: 0.4px;
}
.vl-section-title {
  letter-spacing: -0.3px;
}

/* --------------------------------------------------------------------------
   4b. Hover-állapotú kék elemek — ezeket egy korábbi, csak statikus
       (nem-hover) állapotot ellenőrző audit nem vette észre. Rengeteg,
       a sablonból örökölt hover-effekt (kártya-ikonok, lábléc-linkek,
       csapattag-nevek, "Tudjon meg többet" linkek, stb.) még mindig
       kékre (--ztc-bg-bg-3 / --ztc-text-text-4) váltott hover közben.
       A pontos, mélyen egymásba ágyazott sablon-szelektorok helyett itt
       a levél-szintű class-okat célozzuk meg !important-tel — ez
       megbízhatóbb, mert nem kell minden egyes homepage-variáns pontos
       szelektorláncát lemásolni.
   -------------------------------------------------------------------------- */
.readmore:hover,
.service-inner-area .service2-boxarea .content-area .title:hover,
.footer-widget-area ul li a:hover,
.others-boxes .icons-heading .heading a:hover,
.name-text a:hover,
.calnow-boxes .content a:hover,
.contact-boxarea .content-desc a:hover,
.service-list .content a:hover,
.vl-blog-1-content .vl-blog-1-title a:hover,
.categories-area ul li a:hover,
.popular-tags ul li a:hover,
.recent-posts .content h4 a:hover {
  color: var(--polish-accent) !important;
}

.footer-logo-area .social-links li a:hover,
.team-boxarea-about .social ul li a:hover,
.service2-boxarea:hover .image-icons .icons,
.others-boxes:hover .icons-heading .icons,
.projects-inner-box:hover .other-content,
.vl-blog-1-item:hover .vl-blog-1-content .date,
.service-arrows .testimonial-arrows button:hover {
  background: var(--polish-accent) !important;
}

/* --------------------------------------------------------------------------
   5. "Területeink" mega-menü a fő navigációban — a sablon .vl-mega-menu
      komponensét használjuk (pozicionálás/megjelenés-váltás már kész,
      mobilon a main.js automatikusan "kattints a kinyitáshoz" akkordeonná
      alakítja), de a benne lévő tartalom saját, egyszerű oszlopos lista,
      NEM a sablon eredeti .sub-menu class-a — az position:absolute, egymásra
      csúszna, ha 7 oszlopban használnánk egy mega-menün belül.
   -------------------------------------------------------------------------- */
.homepage3-body .vl-mega-menu.vl-territory-menu {
  height: auto !important;
  overflow: visible !important;
  width: 900px !important;
  left: 0 !important;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .homepage3-body .vl-mega-menu.vl-territory-menu {
    width: 820px !important;
  }
}
.vl-territory-menu .vl-territory-col h6 {
  font-size: 14px;
  font-weight: 700;
  color: var(--polish-accent);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 14px;
  text-align: left;
}
.vl-territory-menu .vl-territory-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vl-territory-menu .vl-territory-col ul li {
  /* A sablon ".vl-main-menu ul > li" szabálya (main.css) inline-blockká
     teszi ezt az elemet is, mert a "ul > li" bármilyen mélységben
     illeszkedik — emiatt az li a saját szöveg-szélességére zsugorodik.
     Vissza kell állítani block-ra, hogy kitöltse az oszlop szélességét. */
  display: block !important;
  margin: 0 0 10px 0;
  text-align: left;
}
.vl-territory-menu .vl-territory-col ul li a {
  color: #0F0D0D !important;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}
.vl-territory-menu .vl-territory-col ul li a:hover {
  color: var(--polish-accent) !important;
}
.vl-territory-menu .vl-territory-footer {
  border-top: 1px solid #EDEDED;
  margin-top: 8px;
  padding-top: 20px;
  text-align: center;
}
/* Mobil offcanvas-ban a main.js .sub-menu-hoz hasonlóan kezeli a
   .vl-mega-menu-t (slideDown/slideUp), de a több oszlopos rácsot ott
   egy egyszerű, egyoszlopos listává húzzuk össze a jobb olvashatóságért. */
@media (max-width: 991px) {
  /* Fontos: a mobil offcanvas menü (.vl-offcanvas) a main.js által
     klónozott <ul>, ami a headertől FÜGGETLEN DOM-ágon él (nincs
     .homepage3-body őse) — ezért ez a szabály szándékosan NEM kapja meg
     a ".homepage3-body" előtagot, különben nem érné el az offcanvas
     klónját, és a mobilmenü szétesne/vízszintesen túlcsordulna. */
  .vl-mega-menu.vl-territory-menu {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  .vl-territory-menu .row {
    display: block !important;
  }
  .vl-territory-menu .vl-territory-col {
    margin-bottom: 20px;
  }
}

/* --------------------------------------------------------------------------
   6. Mobil menü (offcanvas) logója — a sablon egy "brightness(0) invert(1)"
      szűrőt tett a logóra, hogy fehérré alakítsa a (korábban kék) sötét
      hátterű panelen. A mi logónk viszont több színű (fekete + narancssárga
      elemek egy fehér/átlátszó ikonon) — ez a szűrő az egészet egyetlen
      formátlan fehér foltra "égeti", mert minden nem-átlátszó pixelt
      egyformán fehérré tesz. Ehelyett egy fehér "kártyát" adunk a logó
      mögé, hogy az eredeti, természetes színeiben, jól láthatóan jelenjen
      meg a narancssárga panelen is.
   -------------------------------------------------------------------------- */
.vl-offcanvas-logo {
  filter: none !important;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   7. Kiemelt idézet-doboz (".pera", about/project-single/team-single/
      testimonial/blog-single/index) — a bal oldali 5px-es dísz-csík
      kékkel (--ztc-bg-bg-3) volt beégetve a sablonba.
   -------------------------------------------------------------------------- */
.pera::after {
  background: var(--polish-accent) !important;
}

/* --------------------------------------------------------------------------
   8. SEO-audit: a fő oldalcímek (korábban h2) most h1-ek (pontosan egy
      oldalanként) — a sablon eredeti CSS-e tag-szelektorral (".inner-header
      h2", ".hero3-heading h2") célozta ezeket, ezért a tag-csere után a
      stílust itt kell megismételni h1-re, különben a böngésző alap H1
      stílusára esne vissza a cím.
   -------------------------------------------------------------------------- */
.hero-inner-area .inner-header h1 {
  color: var(--ztc-text-text-2);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s64);
  font-style: normal;
  font-weight: var(--ztc-weight-bold);
  line-height: 64px;
  margin: 0;
}
@media (max-width: 767px) {
  .hero-inner-area .inner-header h1 {
    font-size: var(--ztc-font-size-font-s32);
    line-height: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero-inner-area .inner-header h1 {
    font-size: var(--ztc-font-size-font-s50);
    line-height: 60px;
  }
}
.hero3-arrow-slider .hero3-slick-slider .hero3-slider-header .header-content-area .hero3-heading h1 {
  color: var(--ztc-text-text-2);
  font-family: var(--ztc-family-font1);
  font-size: var(--ztc-font-size-font-s70);
  font-style: normal;
  font-weight: var(--ztc-weight-bold);
  line-height: 78px;
  display: inline-block;
  transition: all 0.4s;
  margin: 0;
}
@media (max-width: 767px) {
  .hero3-arrow-slider .hero3-slick-slider .hero3-slider-header .header-content-area .hero3-heading h1 {
    font-size: var(--ztc-font-size-font-s32);
    line-height: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hero3-arrow-slider .hero3-slick-slider .hero3-slider-header .header-content-area .hero3-heading h1 {
    font-size: var(--ztc-font-size-font-s60);
    line-height: 70px;
  }
}

/* --------------------------------------------------------------------------
   9. Mobil "hívjon most" gomb a fejlécben — a sablon eredeti telefonos
      CTA gombja (".vl-hero-btn") csak lg+ szélességtől jelenik meg
      (d-none d-lg-block), mobilon/tableten teljesen eltűnik, pedig épp
      a mobilos látogatók hívnának a leggyakrabban egyetlen érintéssel.
      Emiatt egy kompakt, kerek telefon-ikon gombot teszünk a hamburger
      menü mellé, ami csak lg alatt látszik (a desktop gomb változatlan). */
.vl-header-actions-row {
  gap: 10px;
}
/* Flexbox alapból zsugorítaná a telefonos gombot és a hamburger ikont is,
   hogy kiférjenek egy sorban — ez viszont az addig egysoros szöveget
   tördelésre kényszerítette. Egyik elem se zsugorodjon, a doboz mindig
   pontosan a tartalmuk + a gap szélességét foglalja el. */
.vl-header-actions-row .vl-hero-btn,
.vl-header-actions-row .vl-mobile-header-actions {
  flex-shrink: 0;
}
.vl-mobile-header-actions {
  gap: 10px;
}
.vl-mobile-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  border-radius: 17px;
  background: var(--polish-accent);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  transition: background 0.2s;
}
.vl-mobile-call-btn i {
  font-size: 12px;
}
/* Nagyon szűk (< 380px) nézetben a szöveges változat is összeérne a
   logóval — ott biztonsági tartalékként csak az ikon marad, kerek gombban. */
@media (max-width: 379.98px) {
  .vl-mobile-call-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
  }
  .vl-mobile-call-btn .vl-mobile-call-text {
    display: none;
  }
}
.vl-mobile-call-btn:hover {
  background: #0F0D0D;
  color: #fff !important;
}
/* A Bootstrap d-md-block/d-none csak 768px-től mutatná a teljes szöveges
   gombot, pedig a "+36 20 123 4567" felirat töréspont nélkül már ~485px-től
   is elfér egy sorban (Playwrighttal mérve) — ez sok üres helyet hagyna az
   ikon mellett szűk asztali/böngésző-ablak nézetben. Egyedi, pontosabb
   töréspontot használunk 520px-nél (kis ráhagyással a mérési bizonytalanság
   ellen), ami a Bootstrap-osztályoknál (".d-none", ill. az alap láthatóság)
   nagyobb specificitású, ezért felülírja azokat HTML-módosítás nélkül. */
@media (min-width: 520px) {
  .vl-hero-btn.d-none {
    display: block !important;
  }
  .vl-mobile-call-btn {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   10. "Legújabb munkáink" projekt-kártyák (főoldal) — a sablon a leírás
       szövegét csak :hover-re jeleníti meg (height:0 -> height:142px), ez
       tisztán egérhez tervezett viselkedés. Érintőképernyőn a :hover
       állapot esetlegesen "beragad" egy koppintás után, ezért a szöveg
       teljes magasságban jelenik meg, miközben a kártya (.content-area)
       abszolút pozícióban, a kép aljához rögzítve marad — így a szöveg
       kilóg a képből és a következő szekcióba lóg át ("szétesik" a nézet).
       991px alatt (tablet/telefon, ahol nincs valódi hover) a leírást
       mindig láthatóvá tesszük, a kártyát pedig a kép alá, normál
       dokumentumfolyásba helyezzük, hogy sose lógjon ki. */
@media (max-width: 991px) {
  .project3 .project-arrow-area .project3-main-slider .project-boxarea .content-area {
    position: static !important;
    margin-top: 16px;
  }
  .project3 .project-arrow-area .project3-main-slider .project-boxarea .content-area .desc {
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
  }
  .project3 .project-arrow-area .project3-main-slider .project-boxarea .img1 img {
    height: 260px;
  }
}

/* --------------------------------------------------------------------------
   11. Footer — a "Hasznos linkek" oszlop a sablon eredeti
       ".foot-padding1" szabálya miatt 70px-szel beljebb kezdődött, mint a
       felette/alatta lévő oszlopok (Logó, Kapcsolat, illetve az önálló
       sorba került "Szolgáltatásaink" alosztályai) — ez okozta, hogy a
       lábléc oszlopai nem álltak egy rácsban, "el volt csúszva". */
@media (min-width: 1200px) {
  .footer-widget-area.foot-padding1 {
    padding-left: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   12. Szolgáltatási területeink oldal, megyekártyák ikonjai — a sablon
       saját "ot-icons" SVG-jei egy fő ábra mellé apró, szórt pontokból/
       négyzetekből álló díszítő mintát is tartalmaznak, ami kis méretben
       úgy néz ki, mintha két elem lenne egymásra csúsztatva. Egyszerű,
       egyértelmű Font Awesome helyjelölő ikonra váltottunk helyette. */
.others-section2 .others-boxes .icons-heading .icons i {
  font-size: 32px;
  color: #0F0D0D;
}

/* --------------------------------------------------------------------------
   13. Szolgáltatási területeink oldal, megyekártyák sorköze — a sablon
       ".others-boxes" szabálya csak tablet/mobil médialekérdezésekben ad
       margin-bottom-öt a kártyák közé; 1200px felett (asztali nézet)
       nincs ilyen szabály, ezért a kártyasorok közvetlenül egymáshoz
       értek, "egymásra csúszva" hatást keltve. */
@media (min-width: 1200px) {
  .others-section2 .others-boxes {
    margin-bottom: 30px;
  }
}

/* --------------------------------------------------------------------------
   14. Szolgáltatás-részletek horgony-linkek (service-single.html#szlug) —
       a sticky fejléc alá ne csússzon be a cím, amikor a böngésző a
       #azonosítóra ugrik. */
.service-detail-block {
  scroll-margin-top: 130px;
}
.service-detail-features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-detail-features li {
  margin-bottom: 10px;
}
.service-detail-features li img {
  margin-right: 8px;
}