:root {
      --bg-dark: #06122b;
      --bg-darker: #030b1d;
      --bg-light: #eef1f6;
      --primary: #2f6cff;
      --primary-2: #3f8cff;
      --text: #0f172a;
      --text-soft: #5b6475;
      --white: #ffffff;
      --card-shadow: 0 14px 40px rgba(11, 24, 55, 0.10);
      --radius: 18px;
      --container: 1180px;
    }
.fb-lightbox__next, .fb-lightbox__prev {
display: block !important;}
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      color: var(--text);
      background: var(--bg-light);
      line-height: 1.5;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .container {
      width: min(calc(100% - 48px), var(--container));
      margin: 0 auto;
    }
.refe .card .imref img {
 width: 100%;
  max-height: 280px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: var(--card-shadow);

}
.kartareferencie {
display:grid; grid-template-columns: 1fr 200px; gap:20px; align-items:center;	
	
	
}
.refe .card .imref {


width: 200px; }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 28px;
      border-radius: 12px;
      background: linear-gradient(90deg, var(--primary), #377bff);
      color: var(--white);
      font-weight: 700;
      letter-spacing: 0.03em;
      font-size: 14px;
      box-shadow: 0 10px 24px rgba(47, 108, 255, 0.28);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(47, 108, 255, 0.34);
    }

    .btn.small {
      padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  align-self: flex-start;
  margin-top: auto;
    }

    .site-header {
      position: absolute;
      inset: 0 0 auto 0;
      z-index: 30;
      padding: 28px 0;
    }

    .nav-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      position: relative;
    }

    .logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      color: var(--white);
      font-weight: 800;
      letter-spacing: 0.08em;
      position: relative;
      z-index: 35;
    }

    .logo-mark {
      width: 68px;
      height: 68px;
      border-radius: 16px;
      border: 2px solid rgba(255,255,255,0.8);
      display: grid;
      place-items: center;
      font-size: 34px;
      line-height: 1;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(6px);
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 34px;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      position: relative;
      z-index: 35;
    }

    .nav a:hover {
      color: var(--white);
    }

    .menu-toggle {
      display: none;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.08);
      color: var(--white);
      width: 48px;
      height: 48px;
      border-radius: 12px;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      backdrop-filter: blur(8px);
      position: relative;
      z-index: 35;
    }

    /* HERO - opravené */
    .hero {
      position: relative;
      min-height: 780px;
     
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 35%, rgba(54, 103, 255, 0.18), transparent 32%),
        radial-gradient(circle at 78% 40%, rgba(47, 108, 255, 0.10), transparent 28%),
        linear-gradient(90deg, #06112a 0%, #071a42 46%, #071633 100%);
    }
   .hero2 {
      position: relative;
      min-height: 580px;
    
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 35%, rgba(54, 103, 255, 0.18), transparent 32%),
        radial-gradient(circle at 78% 40%, rgba(47, 108, 255, 0.10), transparent 28%),
        linear-gradient(90deg, #06112a 0%, #071a42 46%, #071633 100%);
    }
	.hero3 {
      position: relative;
      min-height: 580px;
    
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 35%, rgba(54, 103, 255, 0.18), transparent 32%),
        radial-gradient(circle at 78% 40%, rgba(47, 108, 255, 0.10), transparent 28%),
        linear-gradient(90deg, #06112a 0%, #071a42 46%, #071633 100%);
    }
	.hero4 {
      position: relative;
      min-height: 580px;
      
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 35%, rgba(54, 103, 255, 0.18), transparent 32%),
        radial-gradient(circle at 78% 40%, rgba(47, 108, 255, 0.10), transparent 28%),
        linear-gradient(90deg, #06112a 0%, #071a42 46%, #071633 100%);
    }
	.hero5 {
      position: relative;
      min-height: 580px;
      
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 35%, rgba(54, 103, 255, 0.18), transparent 32%),
        radial-gradient(circle at 78% 40%, rgba(47, 108, 255, 0.10), transparent 28%),
        linear-gradient(90deg, #06112a 0%, #071a42 46%, #071633 100%);
    }
	.hero6 {
      position: relative;
      min-height: 580px;
      
      align-items: center;
      overflow: hidden;
      background:
        radial-gradient(circle at 18% 35%, rgba(54, 103, 255, 0.18), transparent 32%),
        radial-gradient(circle at 78% 40%, rgba(47, 108, 255, 0.10), transparent 28%),
        linear-gradient(90deg, #06112a 0%, #071a42 46%, #071633 100%);
    }
    .hero-bg {
      position: absolute;
      inset: 0;
      background: url("../images/pozadiebaner.webp") center right  no-repeat;
      z-index: 0;
      pointer-events: none;
      transform: scale(1);
	 pointer-events: none;
  will-change: transform;
   animation: uvodHeroZoom 12s ease-out forwards;
    }
@keyframes uvodHeroZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.12);
  }
}
.hero2 .hero-bg {
      position: absolute;
      inset: 0;
      background: url("../images/pozadiebaner2b.webp") center right  no-repeat;
      z-index: 0;
      pointer-events: none;
      transform: scale(1);
    }
	.hero3 .hero-bg {
      position: absolute;
      inset: 0;
      background: url("../images/pozadiebaner3b.webp") center right  no-repeat;
      z-index: 0;
      pointer-events: none;
      transform: scale(1);
    }
	.hero4 .hero-bg {
      position: absolute;
      inset: 0;
      background: url("../images/pozadiebaner4.webp") top right  no-repeat;
      z-index: 0;
	 
      pointer-events: none;
      transform: scale(1);
    }
		.hero5 .hero-bg {
      position: absolute;
      inset: 0;
      background: url("../images/pozadiebaner5.webp") center right  no-repeat;
      z-index: 0;
	 
      pointer-events: none;
      transform: scale(1);
    }
	.hero6 .hero-bg {
      position: absolute;
      inset: 0;
      background: url("../images/pozadiebaner6.webp") center right  no-repeat;
      z-index: 0;
	 
      pointer-events: none;
      transform: scale(1);
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          90deg,
          rgba(6,17,42,0.88) 0%,
          rgba(6,17,42,0.74) 18%,
          rgba(6,17,42,0.54) 34%,
          rgba(6,17,42,0.32) 48%,
          rgba(6,17,42,0.16) 62%,
          rgba(6,17,42,0.08) 78%,
          rgba(6,17,42,0.03) 100%
        );
      z-index: 1;
      pointer-events: none;
    }

    .hero-dots1 {
      position: absolute;
      right: 8%;
      top: 24%;
      width: 34%;
      height: 45%;
      background-image: radial-gradient(rgba(85, 153, 255, 0.16) 1px, transparent 1px);
      background-size: 12px 12px;
      opacity: 0.55;
      z-index: 2;
      pointer-events: none;
    }

    .hero .container, 
    .hero2 .container, .hero3 .container, .hero4 .container, .hero5 .container, .hero6 .container  {
      position: relative;
      z-index: 3;
	  display: flex;
      width: min(calc(100% - 48px), var(--container));
    }

    .hero-content {
      max-width: 620px;
      color: var(--white);
      padding: 150px 0 80px;
    }

    .hero-content h1 {
      font-size: clamp(21px, 6vw, 38px);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin-bottom: 22px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .hero-content p {
      max-width: 420px;
      color: rgba(255,255,255,0.82);
      margin-bottom: 34px;
      font-size: 18px;
    }

    section {
      padding: 86px 0;
    }

    .cards {
 display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
    }
	
	#pod .cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
#onascads2.cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr) !important;
  gap: 22px;
}
    .card {
       background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--card-shadow);

  display: flex;
  flex-direction: column;
  height: 100%;
    }

    .card h3 {
      font-size: 25px;
      line-height: 1.05;
      margin-bottom: 14px;
    }

    .card p {
    color: var(--text-soft);
  font-size: 15px;
  margin-bottom: 18px;
  flex-grow: 1;
    }

    .dark-band {
      background:
        radial-gradient(circle at center, rgba(40, 109, 255, 0.20), transparent 28%),
        linear-gradient(90deg, #020816 0%, #091833 50%, #071223 100%);
      color: var(--white);
    }

    .section-title {
      text-align: left;
      margin-bottom: 44px;
    }

    .section-title .eyebrow {
      color: #63b3ff;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 10px;
      display: inline-block;
    }

    .section-title h2 {
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1.05;
    }

    .reasons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px;
      margin-top: 26px;
    }

    .reason {
      padding: 18px 10px;
    }

    .reason .num {
      font-size: 58px;
      line-height: 1;
      font-weight: 900;
      color: #39a0ff;
      margin-bottom: 14px;
      display: inline-block;
      border-bottom: 2px solid rgba(255,255,255,0.25);
      padding-bottom: 6px;
    }

    .reason h3 {
      font-size: 22px;
      margin-bottom: 12px;
    }

    .reason p {
      color: rgba(255,255,255,0.72);
      font-size: 15px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 42px;
      align-items: center;
    }

    .about-copy .eyebrow,
    .projects .eyebrow,
    .cta .eyebrow {
      color: #3aa1ff;
      font-weight: 700;
      font-size: 14px;
      margin-bottom: 10px;
      display: inline-block;
    }

    .about-copy h2,
    .projects h2,
    .cta h2 {
      font-size: clamp(32px, 4vw, 52px);
      line-height: 1.02;
      margin-bottom: 18px;
    }

    .about-copy p {
      color: var(--text-soft);
      margin-bottom: 16px;
      font-size: 16px;
    }

    .stats {
      display: flex;
      gap: 44px;
      flex-wrap: wrap;
      margin: 28px 0 30px;
    }

    .stats strong {
      display: block;
      font-size: 44px;
      line-height: 1;
      color: #1349bf;
    }

    .stats span {
      color: var(--text-soft);
      font-size: 14px;
    }

    .about-visual {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .about-visual img {
      width: 100%;
      max-height: 280px;
      object-fit: cover;
      border-radius: 22px;
      box-shadow: var(--card-shadow);
    }

    .project-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 34px;
    }

    .project-card {
      background: var(--white);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--card-shadow);
    }

    .project-card img {
      height: 180px;
      width: 100%;
      object-fit: cover;
    }

    .project-card .content {
      padding: 20px;
    }

    .project-card h3 {
      font-size: 28px;
      line-height: 1.02;
      margin-bottom: 10px;
    }

    .project-card p {
      color: var(--text-soft);
      margin-bottom: 18px;
      font-size: 15px;
    }

    .cta {
      position: relative;
      overflow: hidden;
      color: var(--white);
      background:
        linear-gradient(rgba(3, 17, 48, 0.72), rgba(3, 17, 48, 0.88)),
        url("../images/cta.webp") center center / cover no-repeat;
      text-align: center;
      padding: 110px 0;
    }

    .cta p {
      color: rgba(255,255,255,0.78);
      max-width: 740px;
      margin: 0 auto 30px;
    }

    .footer {
      background: #020917;
      color: rgba(255,255,255,0.82);
      padding: 70px 0 26px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
      gap: 30px;
      margin-bottom: 34px;
    }

    .footer h4 {
      color: var(--white);
      margin-bottom: 14px;
      font-size: 16px;
    }

    .footer p,
    .footer li,
    .footer a {
      color: rgba(255,255,255,0.72);
      font-size: 14px;
      line-height: 1.8;
      list-style: none;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 18px;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      font-size: 13px;
      color: rgba(255,255,255,0.56);
    }

    @media (max-width: 1100px) {
      .cards,
      .reasons,
      .project-grid,
      .footer-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .about-grid {
        grid-template-columns: 1fr;
      }

      .hero, .hero2, .hero3, .hero4, .hero5, .hero6 {
        min-height: auto;
      }

      .hero-bg {
        background-position: 72% center;
      }

      .hero-overlay {
        background:
          linear-gradient(
            180deg,
            rgba(6,17,42,0.20) 0%,
            rgba(6,17,42,0.42) 100%
          ),
          linear-gradient(
            90deg,
            rgba(6,17,42,0.72) 0%,
            rgba(6,17,42,0.32) 46%,
            rgba(6,17,42,0.10) 100%
          );
      }

      .hero-dots {
        right: 4%;
        top: auto;
        bottom: 10%;
        width: 42%;
        height: 34%;
      }

      .hero-content {
        max-width: 560px;
        padding-top: 170px;
        padding-bottom: 50px;
      }

      .hero-content p {
        max-width: 100%;
      }
	  	#pod .cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 22px;
}
    }

    @media (max-width: 720px) {
      .container {
        width: min(calc(100% - 32px), var(--container));
      }

      .site-header {
        padding: 22px 0;
      }
.kartareferencie {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}
.refe .card .imref {
  width: 100%;
}
      .nav-wrap {
        align-items: flex-start;
      }

      .menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px;
        right: 0;
        z-index: 40;
      }

      .nav {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        margin-top: 18px;
        padding: 14px;
        border-radius: 16px;
        background: rgba(3, 11, 29, 0.94);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow: 0 20px 50px rgba(0,0,0,0.32);
      }

      .nav.open {
        display: flex;
      }

      .nav a {
        width: 100%;
        padding: 12px 4px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
      }

      .nav a:last-child {
        border-bottom: 0;
      }

      .hero, .hero2, .hero3, .hero4, .hero5, .hero6 {
        min-height: auto;
      }

      .hero-bg {
        background-position: 70% center;
      }

      .hero-overlay {
        background:
          linear-gradient(
            180deg,
            rgba(6,17,42,0.28) 0%,
            rgba(6,17,42,0.46) 100%
          ),
          linear-gradient(
            90deg,
            rgba(6,17,42,0.82) 0%,
            rgba(6,17,42,0.42) 50%,
            rgba(6,17,42,0.12) 100%
          );
      }

      .hero-dots {
        left: 0;
        right: auto;
        bottom: 7%;
        top: auto;
        width: 34%;
        height: 42%;
        opacity: 0.35;
      }

      .hero-content {
        max-width: 100%;
        padding-top: 170px;
        padding-bottom: 34px;
      }

      .hero-content h1 {
        font-size: 44px;
        margin-bottom: 18px;
      }

      .hero-content p {
        max-width: 100%;
        font-size: 16px;
        margin-bottom: 24px;
      }

      .card h3,
      .project-card h3 {
        font-size: 24px;
      }

      .reason .num {
        font-size: 46px;
      }

      .stats {
        gap: 24px;
      }

      .cards,
      .reasons,
      .project-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .footer-bottom {
        flex-direction: column;
      }
	  
	  .hero5 .hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/pozadiebaner5.webp") bottom right no-repeat;
  background-size:  auto 100%;
  z-index: 0;
  pointer-events: none;
  transform: scale(1);
}
.hero2 .hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/pozadiebaner2.webp") bottom 200px no-repeat;
   background-size:  auto 100%;
  z-index: 0;
  pointer-events: none;
  transform: scale(1);
}
.hero4 .hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/pozadiebaner4.webp") top right no-repeat;
    background-size:  auto 120%;
  z-index: 0;
  pointer-events: none;
  transform: scale(1);
}
.hero6 .hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/pozadiebaner6.webp") center right no-repeat;
     background-size:  auto 100%;
  z-index: 0;
  pointer-events: none;
  transform: scale(1);
}
    }
	/* =========================================================
   JOOMLA CATEGORY BLOG
   zladené s template.css
========================================================= */
.com-content-article,
.item-page {
  max-width: var(--container);
  margin: 20px auto;
}
/* hlavný wrapper stránky */
.com-content-category-blog,
.blog,
.blog-category {
 max-width: var(--container);
  margin: 100px auto;
}

/* centrovanie obsahu ako .container */
.com-content-category-blog .blog,
.blog.blog-category,
.blog-category {
  width: min(calc(100% - 48px), var(--container));
  margin: 0 auto;
}

/* ak je na stránke title / description */
.blog .page-header,
.blog-category .page-header {
  margin-bottom: 18px;
}

.blog .page-header h1,
.blog-category .page-header h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.02;
  margin-bottom: 18px;
  color: var(--text);
}

.category-desc,
.blog-description,
.blog .category-desc {
  color: var(--text-soft);
  margin-bottom: 32px;
  font-size: 16px;
  line-height: 1.6;
  max-width: 900px;
}

/* blog layout iba 1 stĺpec */
.blog-items,
.items-leading,
.items-row {
  display: block !important;
  margin: 0;
}

.items-leading > div,
.items-row > div,
.blog-items > div,
.blog .item,
.blog .leading,
.blog .items-row .item {
  width: 100% !important;
  float: none !important;
  margin: 0 0 24px 0 !important;
}

/* ARTICLE ako card */
.blog .item,
.blog .leading,
.blog .items-row .item,
.blog-item,
.com-content-category-blog article {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* title */
.blog .item .page-header,
.blog .leading .page-header,
.blog-item .page-header {
  margin-bottom: 14px;
}

.blog .item .page-header h2,
.blog .leading .page-header h2,
.blog-item .page-header h2,
.blog .item-title,
.blog .item-title a {
  font-size: 25px;
  line-height: 1.05;
  margin: 0;
  color: var(--text);
}

.blog .item .page-header h2 a,
.blog .leading .page-header h2 a,
.blog-item .page-header h2 a,
.blog .item-title a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog .item .page-header h2 a:hover,
.blog .leading .page-header h2 a:hover,
.blog-item .page-header h2 a:hover,
.blog .item-title a:hover {
  color: var(--primary);
}

/* intro obrázok */
.blog .item-image,
.blog .intro-image,
.blog .pull-left.item-image,
.blog .pull-right.item-image {
  margin: 0 0 18px 0;
  float: none;
  max-width: 100%;
}

.blog .item-image img,
.blog .intro-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* meta */
.article-info,
.blog .article-info,
dl.article-info {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 0 0 16px;
  padding: 0;
  color: var(--text-soft);
  font-size: 14px;
}

.article-info dt,
.article-info dd,
dl.article-info dt,
dl.article-info dd {
  margin: 0;
  padding: 0;
}

/* intro text */
.blog .item-content,
.blog .introtext,
.blog .item p,
.blog-item p {
  color: var(--text-soft);
  font-size: 15px;
  margin-bottom: 18px;
  line-height: 1.7;
}

.blog .introtext p:last-child,
.blog .item p:last-child {
  margin-bottom: 0;
}

/* readmore ako btn small */
.readmore,
p.readmore,
.blog .readmore {
  margin-top: auto;
}

.readmore a,
p.readmore a,
.blog .readmore a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  align-self: flex-start;
  margin-top: auto;
  background: linear-gradient(90deg, var(--primary), #377bff);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 10px 24px rgba(47, 108, 255, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}

.readmore a:hover,
p.readmore a:hover,
.blog .readmore a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(47, 108, 255, 0.34);
}

/* pagination */
.pagination {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination li {
  margin: 0;
}

.pagination a,
.pagination span {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  box-shadow: var(--card-shadow);
  text-decoration: none;
  font-weight: 700;
}

.pagination .active span,
.pagination a:hover {
  background: linear-gradient(90deg, var(--primary), #377bff);
  color: var(--white);
}

/* responsive */
@media (max-width: 720px) {
  .com-content-category-blog .blog,
  .blog.blog-category,
  .blog-category {
    width: min(calc(100% - 32px), var(--container));
  }

  .blog .item,
  .blog .leading,
  .blog .items-row .item,
  .blog-item,
  .com-content-category-blog article {
    padding: 22px;
  }

  .blog .page-header h1,
  .blog-category .page-header h1 {
    font-size: 36px;
  }

  .blog .item .page-header h2,
  .blog .leading .page-header h2,
  .blog-item .page-header h2,
  .blog .item-title,
  .blog .item-title a {
    font-size: 24px;
  }
 
}

/* =============================
   SCROLL TO TOP BUTTON
============================= */

#scrollTopBtn {
  position: fixed;
  right: 28px;
  bottom: 28px;

  width: 48px;
  height: 48px;

  border-radius: 12px;
  border: none;

  background: linear-gradient(90deg, var(--primary), #377bff);
  color: #fff;

  font-size: 20px;
  font-weight: bold;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;

  box-shadow: 0 10px 24px rgba(47,108,255,0.35);

  opacity: 0;
  visibility: hidden;

  transform: translateY(10px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
}

/* viditeľné */
#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollTopBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(47,108,255,0.45);
}