/* Vynulovanie predvolenych settingov */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5;
    font-family: Tahoma, sans-serif; /* font písma */
}

/* Body upravy */
body {
    background-color: rgb(255, 255, 255); /* farba pozadia */
    color: rgb(51 51 51); /* farba textu */
    width: 100%;
    margin: 0 auto; /* vonkajsi okraj */
 }
/* Hlavná stránka */
.nav {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Obrázok */
img {       /* znacka img ako selektor  */
    width: 90px;
    height: 90px;
    margin-right: 50px;
}
/* Navigácia */             /* ***Funkcne menu - horizontalne ****/
.navigacia {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 5px; /* vonkajsi okraj */
    padding: 5px; /* vnutorny okraj */
}
/* Li v ul*/
li {
    padding-right: 20px;
}
/* Odkazy v li */
li a {
    padding: 5px;
    margin: 5px;
    text-decoration: none; 
    font-size: 22px; /* stylovanie pisma - velkost fontu */
    line-height: 28px;
    color: rgb(51 51 51);
}
/* bude aktivne */
.list.active {
    text-decoration: underline;
    color: rgb(0, 0, 0);
}
/* Hover efekt pre odkazy */
li a:hover {
    text-decoration: underline;
    color: rgb(0, 0, 0);
}
/* Nadpisy h1, h2 */
h1,h2 {
    margin-top: 100px;
    text-align: center;
}
/* Nadpis h2*/
h2 {
    margin: 20px 0 50px 0;
}
/* Nadpis h3*/
h3 {
    margin: 20px 0 20px 0;
    text-align: center;
}
/* uprava strong */
#strong {           /* selektor id */
    font-size: 24px;
}
/* Hlavný text */
.main_text {       /* selektor class */
    width: 50%;
    margin: 0 auto;
    text-align: left;
}
/* Aside */
.index_aside {
    display: flex;
    flex-direction: column; 
    align-items: center; 
}
/* Video */
#video {    /* stylovanie videa */
    width: 400px;
    margin: 40px 0 30px 0;
}

/* podstránka ponuka */

.card_row1 {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    margin: 100px 40px 0;
}
/* Nadpis sekcie */
.section_title {
    width: 100%; 
    text-align: center; 
    color: rgb(51, 51, 51); 
    margin: 20px 0 50px 0; 
}
/* Štýly pre box, ktorý obsahuje jednotlivé karty */
.card_box {
    width: 30%; 
    margin-bottom: 100px; 
    text-align: center;
    box-sizing: border-box; 
}
/* Štýly pre kartu */
.card {
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease; 
    height: 400px;
    padding: 30px;
    cursor: pointer;
}
/* Efekt pri hover (pri prejdení myšou) na kartu */
.card:hover {
    transform: scale(1.05); 
}
/* Kontajner okolo kariet */
.container {
    padding: 0 10px;
    
}
/* Obrázok na karte */
.card_img {
    display: block; 
    margin: 0 auto; 
    width: 190px; 
    height: 190px; 
    border-radius: 10px; 
}
/* Nadpis na karte */
.card_h2 {
    color: rgb(51 51 51);
    margin: 10px 0 10px 0;
}
/* Popis na karte */
.card_p {
    color: rgb(51 51 51);
    margin-bottom: 10px;
}
/* text na karte */
.card_price {
    font-weight: 700;
}
/* Riadky pre sekciu krmivá */
.krmivo {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: space-between; 
    list-style: none; 
    padding: 0; 
    margin: 40px; 
}
/* Riadky v krmive */
.krmivo li {
    width: 30%; 
    margin-bottom: 40px; 
    text-align: center; 
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.2); 
    padding: 20px; 
    transition: transform 0.3s ease; 
    border-radius: 10px; 
    cursor: pointer;
}
/* Efekt hover pre položky v zozname */
.krmivo li:hover {
    transform: scale(1.05); 
}
/* Obrázok položky krmiva */
.krmivo_img {
    display: block; 
    margin: 0 auto; 
    margin-bottom: 20px;
    width: 170px; 
    height: 170px; 
    border-radius: 10px; 
}
/* Sekcia "pripravujeme" */
.pripravujeme {
    margin: 0 40px 80px;
    padding-bottom: 80px;
}
/* Blok */
.ocakavame {
    float: left; /*obtekanie obrazka ktory bude umiesteny vlavo */
    margin-left: 100px;
    width: 200px; 
    height: 200px;
    border: 1px solid black;
    border-radius: 2px; /* zaoblenie rohov */
    cursor: pointer; /* zmena kurzoru po prejdeni na obrazok */
}
/* Efekt pri hover na "ocakavame" */
.ocakavame:hover {
    transform: scale(1.2);  /* zvacsenie obrazka po prejdeni nan */
    border-radius: 120px; /* zaoblenie rohov */
    border: 2px solid rgb(41, 65, 247);
}
/* Popis produktu (zralok_popis) */
.zralok_popis {
    margin-right: 50px;
    padding: 10px;
}

/* podstránka zdroje */

#zhrnutie {
    margin: 15px 0; 
    padding: 10px;  
    line-height: 1.6; 
    text-align: center; 
}
/* Zdroje - základné nastavenie */
.zdroje {
    text-align: left; 
    margin: 0 auto; 
}
/* Zoznam zdrojov */
.zdroje_zoznam {
    padding-left: 0;         
    display: flex;           
    align-items: center;     
    justify-content: center; 
    margin: 0 auto;          
}
/* Zoznamové položky */
.zdroje_zoznam li {
    list-style-position: inside; 
    text-align: left;            
    margin: 5px 0 40px 0;  
}
/* Odkazy v zozname */
.zdroje_zoznam a {
    text-decoration: none; 
    color: rgb(51 51 51);
}
/* Efekt pri hover na odkazy */
.zdroje_zoznam a:hover {
    text-decoration: underline;
    color: rgb(41, 65, 247);
}
/* Riadok s horizontálnym oddelením */
.hr1 {
    display: block;             
    text-align: center;        
    width: 80%;                 
    border-radius: 5px;         
    border: 1px solid rgb(51, 51, 51); 
    margin: 0 auto 40px auto; 
}

/* obrazkova mapa */
img[usemap="#image-map"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 900px; 
    height: auto; 
}

/* Tabulka s obrazkami */
.tabulka {
    margin: 20px auto;
    border-collapse: collapse;
    text-align: center;
}

thead {
    background-color:rgb(31, 105, 189);
    color: white;
}

th, td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
}

.tab-img {
    margin: 0 auto;
}

/* podstránka kontakt */
/* Riadky pre kontaktné karty */
.card_row2 {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin: 80px 50px 0;
}
/* Okraje tabuľke */
dt,dd {
    margin-bottom: 5px;
}
/* Mapa (mapa pre zobrazenie lokalizácie) */
.mapa {
    width: 450px;
    height: 350px;
    margin-left: 50px;
    border: 1px solid rgb(51 51 51);
}
/* Odkazy pre ikonky */
.social_link{
    display: inline-block;
    margin: 5px 10px 0 0;
}

.social_icon {
    width: 20px; 
    height: 20px;  
}
/* Posledná ikona nemá pravý okraj */
.social_icon:last-child{
    margin-right: 0;
}
/* Odkazy na email, mobil a adresu */
.email,.mobile,.address {
    text-decoration: none;
    color: rgb(51 51 51);
}
/* Efekt pri hover na odkazy */
.email:hover, .mobile:hover, .address:hover {
    text-decoration: underline;
    color: rgb(7, 95, 226);
}
/* Tabuľka kontaktov */
table {
    border-collapse: collapse;
}
/* Rozmery a okraje buniek tabuľky */
th,td {
    font-size: 14px;
    padding: 5px;
    border: 1px solid black;
}
/* Pata stránky */
.footer {
    text-align: center;
    margin: 10px auto 0 auto;
}
/* text v päte */
.ft {
    margin: 0 auto;
    padding-top: 20px;
}