:root {
  --bg-color-header: #f7f7f7;
  --gentell-col: rgb(34, 41, 179);
  /* --gentell-col: #0069a7; */

  /* --gentell-col: rgb(14, 73, 128); */

  --gentell-col: #086be2;

  --gentell-col-hover: #002a42;
}

.menu {
  display: auto;
}

.mobilemenubtn {
  display: none;
  font-size: 3rem;
  cursor: pointer;
}

.mobilemenubtnpanel {
  font-size: 3rem;
  cursor: pointer;
  text-align: center;
  margin-top: 2rem;
}



.mmdiv {
  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffffEE;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
}

.mmdiv>.mmitem {
  display: block;
  height: 3rem;
  text-align: center;
  margin: 30px;
  font-size: 1.6rem;
  color: rgb(77, 77, 77);
  background: #43ceff;
  padding: 9px;
  text-decoration: none;
  /* font-weight: bold; */
  border-radius: 5px;
}

.mmdiv>.mmitem:hover {
  background: #24b3e4;
}




.show-desktop {
  display: block;
}

.show-mobile {
  display: none;
}




/* @font-face {
  font-family: Roboto;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  src: url("//www.gentell.com/cdn/fonts/roboto/roboto_n4.2019d890f07b1852f56ce63ba45b2db45d852cba.woff2") format("woff2"),
    url("//www.gentell.com/cdn/fonts/roboto/roboto_n4.238690e0007583582327135619c5f7971652fa9d.woff") format("woff");
} */


@font-face {
  font-family: Roboto;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  src: url("//www.gentell.com/cdn/fonts/roboto/roboto_n4.2019d890f07b1852f56ce63ba45b2db45d852cba.woff2") format("woff2"),
    url("//www.gentell.com/cdn/fonts/roboto/roboto_n4.238690e0007583582327135619c5f7971652fa9d.woff") format("woff");
}

@font-face {
  font-family: Roboto;
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
  src: url("//www.gentell.com/cdn/fonts/roboto/roboto_i4.57ce898ccda22ee84f49e6b57ae302250655e2d4.woff2") format("woff2"),
    url("//www.gentell.com/cdn/fonts/roboto/roboto_i4.b21f3bd061cbcb83b824ae8c7671a82587b264bf.woff") format("woff");
}

/* Typography (body) */
@font-face {
  font-family: Roboto;
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
  src: url("//www.gentell.com/cdn/fonts/roboto/roboto_n4.2019d890f07b1852f56ce63ba45b2db45d852cba.woff2") format("woff2"),
    url("//www.gentell.com/cdn/fonts/roboto/roboto_n4.238690e0007583582327135619c5f7971652fa9d.woff") format("woff");
}

@font-face {
  font-family: Roboto;
  font-weight: 400;
  font-style: italic;
  font-display: fallback;
  src: url("//www.gentell.com/cdn/fonts/roboto/roboto_i4.57ce898ccda22ee84f49e6b57ae302250655e2d4.woff2") format("woff2"),
    url("//www.gentell.com/cdn/fonts/roboto/roboto_i4.b21f3bd061cbcb83b824ae8c7671a82587b264bf.woff") format("woff");
}

@font-face {
  font-family: Roboto;
  font-weight: 700;
  font-style: normal;
  font-display: fallback;
  src: url("//www.gentell.com/cdn/fonts/roboto/roboto_n7.f38007a10afbbde8976c4056bfe890710d51dec2.woff2") format("woff2"),
    url("//www.gentell.com/cdn/fonts/roboto/roboto_n7.94bfdd3e80c7be00e128703d245c207769d763f9.woff") format("woff");
}

@font-face {
  font-family: Roboto;
  font-weight: 700;
  font-style: italic;
  font-display: fallback;
  src: url("//www.gentell.com/cdn/fonts/roboto/roboto_i7.7ccaf9410746f2c53340607c42c43f90a9005937.woff2") format("woff2"),
    url("//www.gentell.com/cdn/fonts/roboto/roboto_i7.49ec21cdd7148292bffea74c62c0df6e93551516.woff") format("woff");
}



.slider-container {
  position: relative;
  height: 600px;
  width: 100%;
  overflow: hidden;

  border-radius: 8px;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* text-shadow: 0px 0px 30px rgba(0, 0, 0); */
  opacity: 1;
}

.slider>img {
  object-fit: cover;
  height: 600px;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  filter: brightness(60%);
}

.slider>.content {
  position: absolute;
  color: #fff;
  font-family: "TT Firs", Helvetica, Arial, Tahoma, sans-serif;
  letter-spacing: 0;
  font-style: normal;
  width: 100%;
  max-width: 1440px;
  text-align: left;
  padding-left: 20px;
}

/* 
.slider>.content>h1 {
  font-size: 4rem;
  margin-top: 200px;
  margin-bottom: 20px;
} */

.slider>.content>.text0 {
  line-height: 1.1;
  font-size: 48px;
  margin-top: 200px;
  margin-bottom: 20px;
}



.slider>.content>.text1 {
  /* font-family: 'TT Firs',Helvetica,Arial,sans-serif; text-transform: uppercase;  */
  font-size: 1.2rem;
  font-weight: 900;
}

.slider>.content>.link {
  text-decoration: none;
  margin-top: 65px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider>.content>.link>.button {
  padding: 20px 30px 20px 30px;


  border: 2px solid #fff;
  border-radius: 5px;
  cursor: pointer;
}

.slider>.content>.link>.button:hover {
  background-color: #ffffffDD;
}

.slider>.content>.link>.button>.caption {
  font-size: 1rem;
  color: #fff;
}

.slider>.content>.link>.button:hover>.caption {
  color: var(--gentell-col);
}

.fade-enter-active,
.slide-fade-leave-active {
  transition: opacity 2s ease, transform 2s ease;
}

.fade-enter,
.slide-fade-leave-to {
  opacity: 0;
  /* Fade out effect */
  transform: scale(1.5);
}

.fade-enter-to {
  opacity: 1;
  /* Fade in effect */
}


.slider-position {
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 10px;
}

.slider-position-indicator {
  width: 90px;
  height: 10px;
  background-color: var(--gentell-col);
  border-radius: 6px;
}

.slider-position-indicator-active {
  background-color: #FFFFFF33;
  cursor: pointer;
}

.slider-position-indicator-active:hover {
  background-color: #FFFFFF55;
}



/*


@font-face {
  font-family: 'Inter';
  src: url('/static/font/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/static/font/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/static/font/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

*/


/* Reset + global */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  line-height: 2rem;
  font-size: 1rem;




  background-color: #ffffff;

  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  /* overflow-y: scroll; */

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

}




h1 {
  /* color: #474b49; */

  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}


a {
  text-decoration: none;
  color: #474b49;
}


/* Header + footer */
.topheader {
  position: sticky;
  top: 0;
  /* stick to the top */
  z-index: 1000;
  background-color: var(--bg-color-header);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.topheader img {
  margin-top: 20px;
  margin-bottom: 20px;
  /* width: 240px; */
  /* width: 200px; */
  height: 60px;
}

.header-container {
  display: flex;
  justify-content: left;
  align-items: center;
}

.footer {
  margin-top: 2rem;
  background-color: var(--bg-color-header);
  text-align: center;
  padding: 15px 10px;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

/* Main content */
.strip {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;

}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  min-height: 100vh;
  width: 100%;
}




a.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  /* background-color: #0069a7; */
  background-color: #43ceff;
  /* your gentell-color */
  /* color: #fff; */

  color: #000;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.1s ease;
}

a.button:hover {
  /* background-color: #002a42; */
  background-color: #7adbff;
  /* hover color */
}

a.button:active {
  transform: scale(0.97);
}



.poist {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  place-items: center;
  /* center each img cell */
  gap: 5px;
  width: 100%;
  margin: 20px 0;
}

.poist>img {
  max-width: 100%;
  /* key: allow shrinking */
  height: auto;
  /* preserve aspect ratio */
  padding: 5px;
  /* border-radius: 5px;
  box-shadow: 0 0 1px rgba(0,0,0,0.3);
  border: 1px solid #b9b9b9;
  background-color: #f8f8f8; */

}


.product-header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* gap: .5rem; */
}

.product-header>div:last-child {
  background-color: var(--gentell-col);
  padding: 1rem;
  color: #fff;
  border-radius: .5rem;
}

.product-header>div>img {
  width: 100%;
  /* aspect-ratio: 3 / 2; */
  aspect-ratio: 3 / 2;
  /* object-fit: cover; */
  object-fit: contain;
}





.product-header>div>p {
  white-space: pre-line;
  margin-bottom: 0.5rem;
  /* font-size: 0.9rem; */
  line-height: 1.3;
}

.product-header .indikace {

  font-size: 1.2rem;
  font-weight: 500;

}

.product-header .nazov {

  font-size: 1.5rem;
  font-weight: 500;

}




.product-header .order-button {
  margin-top: 2rem;
  display: inline-block;
  padding: 3px 28px;
  /* background: linear-gradient(135deg, #ff7a18, #ffb347); */
  /* background-color: var(--gentell-col);
  color: #fff; */
  background-color: #fff;
  color: var(--gentell-col);
  width: 200px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
  letter-spacing: 0.3px;
  border: none;
}


.product-header .order-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  filter: brightness(1.07);
}

























.product-description {

  padding: 10px;
  /* border: 1px solid var(--gentell-col); */

  margin-bottom: 2rem;

  background-color: #f7f7f7;
  /* 
border-radius: 1rem; */
  /* box-shadow: 0 0px 3px rgba(0, 0, 0, 0.3); */

}



.product-description p {
  margin-top: 10px;
  margin-bottom: 10px;
  white-space: pre-line;


}


.paragraph>h2 {
  margin-bottom: 1rem;
}


.paragraph>p {
  margin-bottom: 1rem;

}


.paragraph>.hero {
  width: 100%;
  margin-bottom: 1rem;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid var(--gentell-col)
}





/* Articles */
.articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 20px;
}

.articles>a {
  user-select: none;
  color: #000;
  background-color: #fff;
  border-radius: 8px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

}

.articles>a div {
  font-weight: bold;
  font-weight: bold;
  background-color: #43ceff;
  color: #000;
  height: 90px;

  display: grid;
  align-items: center;
  /* vertikálne centrovanie */
  justify-items: start;
  /* horizontálne vľavo */
  text-align: left;
  padding-left: 1rem;
}

.articles>a img {
  width: 100%;
  /* aspect-ratio: 3 / 2; */
  aspect-ratio: 3 / 3;
  /* object-fit: cover; */
  object-fit: contain;
  padding: 20px;
}

.articles>a:hover {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
  transform: translateY(-3px);
}





.rubriky {
  display: flex;
  justify-content: center;
  gap: 2px;
  z-index: 100;
}

/* Buttons */
.rubriky-btn {
  text-decoration: none;
  /* color: var(--gentell-col); */
  color: #000;
  font-weight: 600;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-left: 22px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  border-bottom: 2px solid #ffffff00;
}

/* Hover effect */
.rubriky-btn:hover {
  color: var(--gentell-col-hover);
  border-bottom: 2px solid var(--gentell-col-hover);
}

/* Active (selected) state */
.rubriky-btn.active {
  background: #ed1c24;
  z-index: 101;
  color: white;
  border-color: #ed1c24;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: default;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 10px 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: var(--gentell-col);
}


.breadcrumb .crumb::first-letter {
  text-transform: uppercase;
}


.breadcrumb .crumb {
  /* font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase; */
  position: relative;
  color: var(--gentell-col);

}

/* Automatické vloženie / */
.breadcrumb .crumb:not(:last-child)::after {
  content: " / ";
  color: var(--gentell-col);
}

/* Posledná položka – iná farba */
.breadcrumb .crumb:last-child {
  color: var(--gentell-col-hover);

}





.gridview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  gap: 0;

}


.gridview2 {

  grid-template-columns: 1fr 1fr 1fr;
  gap: 0px;


  background: var(--gentell-col);
  color: #fff;


}




/* SQUARE IMAGE CELL */
.gridview>img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  /* makes each image cell a square */
  object-fit: cover;
  /* fills square fully, no white borders */
  display: block;
}

/* TEXT CELL */
.gridview>div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* ← pridaj toto */
  background: var(--gentell-col);
  color: white;
  padding: 1rem;



}

.gridview>div>p {
  width: 100%;
  white-space: pre-wrap;
  /* text-indent: 0.5rem; */
  /* menší začiatok odstavca */
  /* text-align: center; */
  /* padding-bottom: .5rem; */
}



.gridview2>div {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;

  padding: 0px;
  padding-right: 4rem;


}


.bottom-pad {
  padding-bottom: .5rem;
}


.bottom-pad2 {
  padding-bottom: 1.5rem;
}

.center {
  text-align: center;
}


.taller {
  line-height: 2;
  font-size: 25px;
  transform: scaleY(1.3);
  /* 1.0 = normál, >1 = vyššie, <1 = nižšie */
  transform-origin: center;

}


.tall {
  line-height: 2;
  font-size: 20px;
  transform: scaleY(1.1);
  /* 1.0 = normál, >1 = vyššie, <1 = nižšie */
  transform-origin: center;

}



.uvod_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: left;
  line-height: 1.5;
}

.uvod_grid>div>p {
  white-space: pre-line;
  font-size: 1.1rem;
  color: var(--gentell-col);
  text-align: center;
}

.uvod_grid>div>img {
  /* max-width: 60%;
  height: auto; */
  width: 150px;
  height: 150px;
  display: block;
  /* odstráni prípadné medzery */
  margin: 0 auto;
  /* ak chceš centrovanie */
}




.wrapperlogo {
  display: flex;

  /* justify-content: center; */
  align-self: center;
}

.wrapperlogo img {

  width: 200px;

}




@media (max-width: 1647px) {
  .articles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  /* .uvod_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  } */
}

@media (max-width: 1290px) {
  /* .articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  } */

  .uvod_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }



}


@media (max-width: 1000px) {


  .mobilemenubtn {
    display: block;
  }

  .menu {
    display: none;
  }


  .show-desktop {
    display: none !important;
  }

  .show-mobile {
    display: block !important;
  }



  .articles {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
  }


  .gridview {
    grid-template-columns: 1fr;

  }


  .gridview2>div {


    padding-bottom: 2rem;
  }


  /* .incolumn {  order: -1;
    
    
    background: red;
  
  border: 2px solid blue;
  
  } */
  /* 
.gridview .incolumn:nth-child(1) { order: 2; }
.gridview .incolumn:nth-child(2) { order: 1; } */

  /* { */
  .gridview.incolumn {
    grid-template-columns: 1fr;
  }

  /* flip the order of children */
  .gridview.incolumn>*:first-child {
    order: 2;
  }

  .gridview.incolumn>*:last-child {
    order: 1;
  }






  .product-header {
    grid-template-columns: repeat(1, 1fr);
    /* gap: .5rem; */
  }

}



.footer .strip {
  height: 100px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}



.socials {
  display: flex;
  gap: 14px;
}

.socials a {
  width: 38px;
  height: 38px;

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

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #505050;

  text-decoration: none;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;


}

.socials a:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #000000;
}

.socials i {
  font-size: 16px;
}

.copyright {
  font-size: 13px;
  opacity: 0.7;
}


.footer-links > a {
 
  color: #fff !important;
 
}

.footer-links > a:hover {
    color: #4ff !important;
}