* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Styly pro první sekci------------------------------------------------------------- */
.content-section-first-section {
    padding: 40px;              /* Vnitřní odsazení pro sekci */
    margin: 20px auto;          /* Okraje pro sekci */
    max-width: 1200px;          /* Maximální šířka sekce */
}

/* Nadpis v sekci */
.content-section-first-section h2 {
    font-size: 28px;
    color: #000000;
    margin-bottom: 20px;         /* Spodní mezera pod nadpisem */
    border-bottom: 3px solid orange; /* Oranžová čára pod nadpisem */
    padding-bottom: 10px;        /* Odsazení pod nadpisem */
}

/* Flexbox pro obrázek a text */
.content1 {
    display: flex;               /* Flexbox pro uspořádání obrázku a textu vedle sebe */
    align-items: center;         /* Vertikální zarovnání na střed */
    gap: 20px;                   /* Mezery mezi obrázkem a textem */
}

/* Styl pro obrázek */
.content1-image {
    width: 500px;                /* Šířka obrázku */
    height: auto;                /* Automatická výška, zachovává poměr stran */
}

/* Styl pro text */
.content1-text {
    font-size: 18px;             /* Velikost písma */
    line-height: 1.6;            /* Výška řádků pro lepší čitelnost */
    color: #333;                 /* Barva textu */
    max-width: 600px;            /* Maximální šířka textu */
}



/* Styly pro druhou sekci ------------------------------------------------------------------*/
/* Styly pro sekci */
.content-section-middle-section {
    padding: 40px;              /* Vnitřní odsazení pro sekci */
    margin: 20px auto;          /* Okraje pro sekci */
    max-width: 1200px;          /* Maximální šířka sekce */
}

/* Nadpis v sekci */
.content-section-middle-section h2 {
    font-size: 28px;
    color: #000000;
    margin-bottom: 20px;         /* Spodní mezera pod nadpisem */
    border-bottom: 3px solid orange; /* Oranžová čára pod nadpisem */
    padding-bottom: 10px;        /* Odsazení pod nadpisem */
    text-align: left;            /* Nadpis zarovnaný na levý okraj */
}

/* Flexbox pro obrázek a text */
 .content2 {
    display: flex;               /* Flexbox pro uspořádání obrázku a textu vedle sebe */
    align-items: center;         /* Vertikální zarovnání na střed */
    align-items: flex-start;     /* Vertikální zarovnání na začátek */
    gap: 20px;                   /* Mezery mezi obrázkem a textem */
}

/* Styl pro obrázek */
.content-section-middle-section .image {
    width: 500px;                /* Šířka obrázku */
    height: auto;                /* Automatická výška, zachovává poměr stran */
}

/* Styl pro text */
.content-section-middle-section .text {
    font-size: 18px;             /* Velikost písma */
    line-height: 1.6;            /* Výška řádků pro lepší čitelnost */
    color: #333;                 /* Barva textu */
    max-width: 600px;            /* Maximální šířka textu */
    text-align: center;          /* Zarovnání textu pod nadpisem na střed */
}

/* Uspořádání nadpisu, textu a obrázku */
.content-section-middle-section .text {
    display: block;              /* Zajištění blokového uspořádání pro text */
}

/* Styl pro odstavce uvnitř textu */
.content-section-middle-section .text p {
    margin-bottom: 15px;         /* Mezery mezi odstavci */
}



/* Styly pro třetí sekci ------------------------------------------------------------------*/
.content-section-third-section {
    padding: 40px;              /* Vnitřní odsazení pro sekci */
    margin: 20px auto;          /* Okraje pro sekci */
    max-width: 1200px;          /* Maximální šířka sekce */
}

/* Nadpis v sekci */
.content-section-third-section  h2 {
    font-size: 28px;
    color: #000000;
    margin-bottom: 20px;         /* Spodní mezera pod nadpisem */
    border-bottom: 3px solid orange; /* Oranžová čára pod nadpisem */
    padding-bottom: 10px;        /* Odsazení pod nadpisem */
}

/* Flexbox pro obrázek a text */
.content3 {
    display: flex;               /* Flexbox pro uspořádání obrázku a textu vedle sebe */
    align-items: center;         /* Vertikální zarovnání na střed */
    gap: 20px;                   /* Mezery mezi obrázkem a textem */
}

/* Styl pro obrázek */
.content3-image {
    width: 500px;                /* Šířka obrázku */
    height: auto;                /* Automatická výška, zachovává poměr stran */
}

/* Styl pro text */
.content3-text {
    font-size: 18px;             /* Velikost písma */
    line-height: 1.6;            /* Výška řádků pro lepší čitelnost */
    color: #333;                 /* Barva textu */
    max-width: 600px;            /* Maximální šířka textu */
}

/* Specifické styly pro prostřední sekci */
.content-section-middle-section .content2 {
    flex-direction: row-reverse; /* Obrázek bude na pravé straně, text na levé */
}

/* Flexbox pro obrázek a text */
.content1-wrapper {
    display: flex; 
    justify-content: center; /* Horizontálně centrováno */
    align-items: center; /* Vertikálně centrováno */
    gap: 20px;
    flex-wrap: wrap; /* Umožňuje přizpůsobení při změně velikosti obrazovky */
}


/* Flexbox pro obrázek a text */
.content2-wrapper {
    display: flex; 
    justify-content: center; /* Horizontálně centrováno */
    align-items: center; /* Vertikálně centrováno */
    gap: 20px;
    flex-wrap: wrap; /* Umožňuje přizpůsobení při změně velikosti obrazovky */
}


/* Flexbox pro obrázek a text */
.content3-wrapper {
    display: flex; 
    justify-content: center; /* Horizontálně centrováno */
    align-items: center; /* Vertikálně centrováno */
    gap: 20px;
    flex-wrap: wrap; /* Umožňuje přizpůsobení při změně velikosti obrazovky */
}


@media (max-width: 768px) {
    .content1 {
        flex-direction: column;   /* Obrázek a text budou pod sebou */
        text-align: center;        /* Text bude centrovaný */
    }

    .content1-image {
        width: 100%;               /* Obrázek bude zabírat celou šířku */
        max-width: 400px;          /* Maximální šířka obrázku */
    }

    .content1-text {
        font-size: 16px;           /* Menší velikost textu pro mobil */
        padding: 0 20px;           /* Vnitřní odsazení pro text */
    }

    .content1-section {
        padding: 20px;             /* Menší odsazení pro menší obrazovky */
    }

    .content1-section h2 {
        font-size: 24px;           /* Menší velikost nadpisu */
    }
}

/* Pro obrazovky menší než 480px (mobilní telefony) */
@media (max-width: 480px) {
    .content1-text {
        font-size: 14px;           /* Ještě menší text pro mobilní telefony */
    }

    .content1-image {
        max-width: 100%;           /* Obrázek bude zabírat celou šířku */
    }

    .content1-section h2 {
        font-size: 22px;           /* Menší velikost nadpisu pro malé telefony */
    }

}



@media (max-width: 768px) {
    .content-section-middle-section .content2 {
        flex-direction: column;   /* Obrázek a text budou pod sebou */
        text-align: center;        /* Text bude centrovaný */
        gap: 0;                    /* Odstraníme mezery mezi textem a obrázkem */
        padding: 0;                /* Odstraníme paddingy pro menší obrazovky */
    }

    .content-section-middle-section .content2-image {
        width: 100%;               /* Obrázek zabírá celou šířku */
        max-width: 100%;           /* Zajistí, že obrázek nevybočí ze svého kontejneru */
        height: auto;              /* Výška se přizpůsobí automaticky */
        margin-bottom: 0;          /* Odstraní jakýkoliv mezery pod obrázkem */
    }

    .content-section-middle-section .content2-text {
        font-size: 16px;           /* Menší velikost textu pro mobil */
        padding: 0 20px;           /* Padding pro text, aby byl dobře čitelný */
        margin: 0;                 /* Odstraníme marginy pro text */
    }

    .content-section-middle-section .content2-section {
        padding: 0;                /* Odstraní vnitřní odsazení pro menší obrazovky */
        margin: 0;                 /* Odstraní marginy pro sekci */
    }

    .content-section-middle-section .content2-section h2 {
        font-size: 24px;           /* Menší velikost nadpisu pro mobilní zařízení */
        margin-bottom: 15px;       /* Méně prostoru pod nadpisem */
    }
}

/* Pro obrazovky menší než 480px (mobilní telefony) */
@media (max-width: 480px) {
    .content-section-middle-section .content2-text {
        font-size: 14px;           /* Ještě menší text pro mobilní telefony */
        padding: 0 15px;           /* Menší padding pro text */
    }

    .content-section-middle-section .content2-image {
        width: 100%;               /* Obrázek zabírá celou šířku */
        margin-bottom: 0;          /* Odstraní mezery pod obrázkem */
    }

    .content-section-middle-section .content2-section h2 {
        font-size: 22px;           /* Menší velikost nadpisu pro malé telefony */
    }
}





@media (max-width: 768px) {
    .content3 {
        flex-direction: column;   /* Obrázek a text budou pod sebou */
        text-align: center;        /* Text bude centrovaný */
    }

    .content3-image {
        width: 100%;               /* Obrázek bude zabírat celou šířku */
        max-width: 400px;          /* Maximální šířka obrázku */
    }

    .content3-text {
        font-size: 16px;           /* Menší velikost textu pro mobil */
        padding: 0 20px;           /* Vnitřní odsazení pro text */
    }

    .content3-section {
        padding: 20px;             /* Menší odsazení pro menší obrazovky */
    }

    .content3-section h2 {
        font-size: 24px;           /* Menší velikost nadpisu */
    }
}

/* Pro obrazovky menší než 480px (mobilní telefony) */
@media (max-width: 480px) {
    .content3-text {
        font-size: 14px;           /* Ještě menší text pro mobilní telefony */
    }

    .content3-image {
        max-width: 100%;           /* Obrázek bude zabírat celou šířku */
    }

    .content3-section h2 {
        font-size: 22px;           /* Menší velikost nadpisu pro malé telefony */
    }

}


/* Nastavení pro kontejner */
.containerBUT {
    margin-top: 20px; /* Přidání horního okraje pro lepší vzdálenost */
    display: flex; /* Aktivuje flexbox pro kontejner */
    flex-direction: column; /* Změní uspořádání na vertikální */
    justify-content: flex-start; /* Zarovná obsah na začátek kontejneru */
    align-items: center; /* Horizontální zarovnání na střed */
    height: auto; /* Automatická výška kontejneru */
    padding-bottom: 20px; /* Přidání dolního okraje pro lepší vzdálenost od tlačítka */
}

.button {
    background-color: #dfc605; /* Zelená barva pozadí */
    color: white; /* Barva textu */
    padding: 15px 32px; /* Vnitřní okraje (padding) */
    text-align: center; /* Zarovnání textu */
    text-decoration: none; /* Zruší podtržení */
    font-size: 30px; /* Velikost písma */
    border: none; /* Bez okraje */
    border-radius: 8px; /* Zaoblení rohů */
    cursor: pointer; /* Ukazatel myši na "ruku" */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Stín */
    transition: all 0.3s ease; /* Hladký přechod */
    margin-top: 20px; /* Přidání vzdálenosti mezi tlačítkem a textem */
}

/* Efekt při najetí myší */
.button:hover {
    background-color: #000000; /* Tmavší zelená při najetí */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2); /* Tmavší stín */
    transform: translateY(-2px); /* Tlačítko se mírně zvedne */
}

/* Efekt při kliknutí */
.button:active {
    background-color: #3e8e41; /* Ještě tmavší zelená při kliknutí */
    transform: translateY(0); /* Tlačítko se vrátí zpět na původní místo */
}