* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Styly pro sekci */
.content-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 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 */
.content {
    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 */
.content-image {
    width: 500px;                /* Šířka obrázku */
    height: auto;                /* Automatická výška, zachovává poměr stran */
}

/* Styl pro text */
.content-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 */
}









/* Responzivní úpravy pro menší obrazovky */

/* Pro obrazovky menší než 768px (tablety a mobilní telefony) */


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

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

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

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

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

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

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

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

}


/* Flexbox pro obrázek a text */
.content-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 */
}

/* Styly pro obrázek */
.content-image {
    width: 500px;
    height: auto;
    max-width: 100%; /* Zajistí, že obrázek nebude přesahovat */
}

/* Styl pro text */
.content-text {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
    max-width: 600px;
    text-align: justify; /* Text bude rovněž zarovnán */
}








        /* Kontejner stránky */
        .container {
            display: flex;
            justify-content: space-between;
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* Sekce s textem */
        .text-section {
            width: 50%;
            padding: 20px;
        }

        



    


/* Specifické styly pro prostřední sekci (text vlevo, obrázek vpravo) */
.content-section-technology-section-middle-section .content {
    flex-direction: row-reverse; /* Obrázek bude na pravé straně, text na levé */
}
@media (max-width: 768px) {
    .content-section-technology-section-middle-section .content {
        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-technology-section-middle-section .content-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-technology-section-middle-section .content-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-technology-section-middle-section .content-section {
        padding: 0;                /* Odstraní vnitřní odsazení pro menší obrazovky */
        margin: 0;                 /* Odstraní marginy pro sekci */
    }

    .content-section-technology-section-middle-section .content-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-technology-section-middle-section .content-text {
        font-size: 14px;           /* Ještě menší text pro mobilní telefony */
        padding: 0 15px;           /* Menší padding pro text */
    }

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

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







/* Styly pro druhou sekci ------------------------------------------------------------------*/
/* Styly pro sekci */
.content-section-technology-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-technology-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 */
.content-section-technology-section-middle-section .conect {
    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-technology-section-middle-section .image {
    width: 500px;                /* Šířka obrázku */
    height: auto;                /* Automatická výška, zachovává poměr stran */
}

/* Styl pro text */
.content-section-technology-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-technology-section-middle-section .text {
    display: block;              /* Zajištění blokového uspořádání pro text */
}

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


/* Specifické styly pro sekci "Technologie" */
.technology-section .content {
    flex-direction: row-reverse; /* Obrázek bude na pravé straně, text na levé */
}