@charset "UTF-8";
/* CSS Document */


body {
  font: 1rem/1.5 var(--bs-font-sans-serif); font-family: 'Roboto', sans-serif;
}


/* farby */
:root {
  --color-1: #80cdc0;
  --color-2: #ede1e4;
  --color-3: #fff5f8;
  --color-4: #b6c9cd;
}

.color1 {
color: var(--color-1);
  }

  a {
color: var(--bs-white);
}
a:hover {
color: #007BB5;
}
.custom-link .col-content h4 { color: inherit; transition: color .15s ease; }
.custom-link:hover .col-content h4 { color: #007BB5; }
.custom-link p { margin: 0; transition: color .15s ease; color: inherit; }


h1 {font-size: 5.6em;text-transform: normal;line-height: 0.9;font-weight: 800;}
h2 {font-size: 1.7em;text-transform: uppercase;}
h3 {font-size: 1.5em;text-transform: uppercase;font-weight: 300;}
h4 {font-size: 3.8em;text-transform: uppercase;}
h5 {font-size: 4em;text-transform: uppercase;font-weight: 400;}
h6 {font-size: 1.2em;text-transform: normal;}

.bg-hneda {background-color: #613f21;}
.bg-zelena {background-color: #cce2df;}

.zoom {
transition: transform 0.5s ease; /* Prechod pre efekt zoom */
}

.zoom:hover {
transform: scale(0.8); /* Zväčšenie obrázka na 120% */
}

.footer p {font-size: 1.0em;text-transform: normal;line-height: 1.1;font-weight: 100;margin-top: 15px;}

.hero{
position:relative;
background-image: url('../images/bg-dvere.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 2rem 0;              /* väčší vertikálny priestor /
overflow: visible;           / zamedzí orezaniu /
display:flex;
align-items:center;          / vertikálne centrovanie obsahu */
}
    
.hero-title {
  margin:40px;
  font-weight:800;
  line-height:0.95;
  text-transform:none;
  /* fluid base for whole h1 */
  font-size: clamp(4.4em, 6vw, 5.6rem);
  display:flex;
  flex-direction:column;
  gap:0.15em;
}
.hero-title .hero-large {
  font-size: clamp(8rem, 1vw, 9.9rem);
  line-height:0.9;
  display:block;
}
.hero-title .hero-small {
  font-size: clamp(3rem, 6vw, 3.9rem);
  line-height:1;
  display:block;
}

/* small screens: center content and add padding */
@media (max-width:767.98px){
  .hero .row{ flex-direction:column; text-align:center; }
  .hero .col-12{ padding:1.25rem; }
  .hero-title{ align-items:center; }
}

.cont-top { margin-top: calc(90px + 1rem); } /* uprav podľa potreby */