/* Hlavní styl pro všechna tlačítka */
.product-button {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative; /* Důležité: ukotví text uvnitř tlačítka */
    height: 83px; /* Příklad pevné výšky tlačítka */
    width: 422px;
}

/* Styl pro pozadí tlačítka */
.product-button .button-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 422px;
    height: 83px;
    background-color: #d9d9d9; /* Vaše barva/obrázek pozadí */
    border-radius: 100px;
    z-index: 1;
	transition: background-color 0.3s ease;
}

.product-button:hover .button-bg {
    background-color: #989696;
}
/* Styl pro text uvnitř tlačítka */
.product-button .button-text {
    position: relative; /* Důležité: text musí být nad pozadím */
    z-index: 2;
    /* Flexbox pro vertikální a horizontální centrování textu uvnitř plochy */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: center;
    /* ... ostatní styly fontu ... */
    font-family: "Helvetica Neue-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;    
}

.product-1 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 505px;
    left: 190px;
}

.product-2 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 645px;
    left: 190px;
}

.product-3 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 785px;
    left: 190px;
}

.product-4 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 505px;
    left: 833px;
}

.product-5 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 645px;
    left: 833px;
}

.product-6 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 785px;
    left: 833px;
}

/* Hlavní styl pro všechna tlačítka */
.reference-button {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative; /* Důležité: ukotví text uvnitř tlačítka */
    height: 83px; /* Příklad pevné výšky tlačítka */
    width: 422px;
}

/* Styl pro pozadí tlačítka */
.reference-button .button-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 422px;
    height: 83px;
    background-color: #d9d9d9; /* Vaše barva/obrázek pozadí */
    border-radius: 100px;
    z-index: 1;
	transition: background-color 0.3s ease; 
}

.reference-button:hover .button-bg {
    background-color: #989696;
}

.reference-button .button-text {
    position: relative; /* Důležité: text musí být nad pozadím */
    z-index: 2;
    /* Flexbox pro vertikální a horizontální centrování textu uvnitř plochy */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    text-align: center;
    /* ... ostatní styly fontu ... */
    font-family: "Helvetica Neue-Bold", Helvetica;
    font-weight: 700;
    color: #3153ad;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 30px;	
}

.btn-reference-1 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 363px;
    left: 192px;
}

.btn-reference-2 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 485px;
    left: 192px;
}

.btn-reference-3 { /* Unikátní styl pro pozici */
    position: absolute;
    top: 607px;
    left: 192px;
}


.logo-wrapper {
    position: relative; /* Důležité: Kontejner je relativní */
    display: block;
    /* NEMUSÍTE nastavovat pevnou šířku/výšku, převezme ji od defaultního obrázku */
}

.logo-wrapper .logo-default {
    /* Zajistí, že defaultní obrázek definuje velikost wrapperu */
    display: block; 
}

.logo-hover-image {
    position: absolute; /* Důležité: Hover obrázek je absolutní */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/vrstva-1-2-blue.svg'); /* Cesta k novému obrázku */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0; /* Ve výchozím stavu neviditelný */
    transition: opacity 0.3s ease; /* Plynulý přechod */
}

.logo-wrapper:hover .logo-hover-image {
    opacity: 1; /* Při najetí myší se hover obrázek zobrazí */
}

.logo-wrapper2 {
    position: relative; /* Důležité: Kontejner je relativní */
    display: block;
    top: 5885px;
    left: 188px;	
	margin-right: 20px;
	width: 200px;
	
    /* NEMUSÍTE nastavovat pevnou šířku/výšku, převezme ji od defaultního obrázku */
}

.logo-wrapper2 .logo-default2 {
    /* Zajistí, že defaultní obrázek definuje velikost wrapperu */
    display: block; 
}

.logo-hover-image2 {
    position: absolute; /* Důležité: Hover obrázek je absolutní */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/vrstva-1-1-blue.svg'); /* Cesta k novému obrázku */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0; /* Ve výchozím stavu neviditelný */
    transition: opacity 0.3s ease; /* Plynulý přechod */
    right: 500px;
}

.logo-wrapper2:hover .logo-hover-image2 {
    opacity: 1; /* Při najetí myší se hover obrázek zobrazí */
}

.text-wrapper-14:hover {
  color: #4FA4FF;   
}

.o-n-s:hover {
  color: #4FA4FF; 
}

.o-n-s-2:hover {
  color: #4FA4FF; 
}

.o-n-s-3:hover {
  color: #4FA4FF; 
}
.o-n-s-4:hover {
  color: #4FA4FF; 
}