* {

            box-sizing: border-box; /* Zahrne padding a border do šířky každého prvku */

            margin: 0; /* Odstraní výchozí marginy */

            padding: 0; /* Odstraní výchozí paddingy */

            max-width: 100%; /* Žádný prvek nepřesáhne šířku rodiče */

        }



        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-Regular.woff2') format('woff2'),

                url('písma/Poppins-Regular.woff') format('woff');

            font-weight: 400;

            font-style: normal;

            font-display: swap;

        }

        /* Thin */

        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-Thin.woff2') format('woff2'),

                url('písma/Poppins-Thin.woff') format('woff'),

                url('písma/Poppins-Thin.ttf') format('truetype');

            font-weight: 100;

            font-style: normal;

            font-display: swap;

        }



        /* Thin Italic */

        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-ThinItalic.woff2') format('woff2'),

                url('písma/Poppins-ThinItalic.woff') format('woff'),

                url('písma/Poppins-ThinItalic.ttf') format('truetype');

            font-weight: 100;

            font-style: italic;

            font-display: swap;

        }



        /* Light */

        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-Light.woff2') format('woff2'),

                url('písma/Poppins-Light.woff') format('woff'),

                url('písma/Poppins-Light.ttf') format('truetype');

            font-weight: 300;

            font-style: normal;

            font-display: swap;

        }



        /* Light Italic */

        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-LightItalic.woff2') format('woff2'),

                url('písma/Poppins-LightItalic.woff') format('woff'),

                url('písma/Poppins-LightItalic.ttf') format('truetype');

            font-weight: 300;

            font-style: italic;

            font-display: swap;

        }



        /* ExtraLight */

        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-ExtraLight.woff2') format('woff2'),

                url('písma/Poppins-ExtraLight.woff') format('woff'),

                url('písma/Poppins-ExtraLight.ttf') format('truetype');

            font-weight: 200;

            font-style: normal;

            font-display: swap;

        }



        /* ExtraLight Italic */

        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-ExtraLightItalic.woff2') format('woff2'),

                url('písma/Poppins-ExtraLightItalic.woff') format('woff'),

                url('písma/Poppins-ExtraLightItalic.ttf') format('truetype');

            font-weight: 200;

            font-style: italic;

            font-display: swap;

        }



        /* Bold */

        @font-face {

            font-family: 'Poppins';

            src: url('písma/Poppins-Bold.woff2') format('woff2'),

                url('písma/Poppins-Bold.woff') format('woff'),

                url('písma/Poppins-Bold.ttf') format('truetype');

            font-weight: 700;

            font-style: normal;

            font-display: swap;

        }



        body {

            font-family: 'poppins', sans-serif;

            font-weight: 100;

            line-height: 1.6;

            margin: 0;

            padding: 0;

            color: #ffffff;

            background: #ffffff;

            display: flex;

            flex-direction: column;

            background-size: cover; /* Obrázek pokryje celou plochu */

            background-repeat: no-repeat; /* Zamezí opakování obrázku */

            background-position: center; /* Obrázek bude zarovnán na střed */

            justify-content: center;

            min-height: 100vh;

            overflow-y: auto; /* Povolí svislé scrollování */

            width: 100%;

            min-width: 100%; /* Minimalizujeme možné zmenšení */

            margin: 0;

            padding: 0;

            align-items: stretch; /* Roztáhne děti na celou šířku */

            overflow-x: hidden; /* Skryje horizontální scrollování */

            max-width: 100%; /* Zabrání přetékání obsahu */

            }



            /* Speciální vzhled jen pro děkujeme.html */

        body.dekujeme {

            background: #000;

            color: #fff;

            text-align: center;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }



        body.dekujeme .zpet {

            margin-top: 20px;

            display: inline-block;

            padding: 5px 20px;

            background: #343434;

            color: #fff;

            text-decoration: none; /* odstraní podtržení */

            border-radius: 5px;

            transition: all 0.3s ease;

            font-weight: 700;  

        }



        body.dekujeme .zpet:hover {

            background: #386091;

        }

        

        header {

            font-family: 'poppins', sans-serif;

            font-style: thin;

            font-weight: 100;

            color: rgb(255, 255, 255);

            padding: 20px 40px; /* Vnitřní mezery headeru */

            background: rgb(0, 0, 0);

            display: flex;

            align-items: center;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.418), 0 2px 5px rgba(0, 0, 0, 0.418); /* Stín pro efektní vzhled */

            justify-content: space-between;  

            overflow: hidden; /* Skryje přetékající obsah */

            width: 100%; /* Zajistí šířku podle viewportu */

            }



        .header-left, .header-right {

            flex: 1; /* Rovnoměrné rozložení prostoru */

        }



        .header-left {

            flex: 1;

            text-align: left; /* Zarovnání textu na levou stranu */

            color: white;

            font-family: 'Poppins', sans-serif;

            font-weight: 100;

            line-height: 1.5; /* Lepší mezera mezi textem */

        }



        .header-left h2 {

            margin: 0;

            font-size: 2.3rem; /* Velikost textu pro "Grafické Portfolio" */

            white-space: nowrap; /* Zabrání zalomení na další řádek */

            font-family: 'Poppins', sans-serif;

            font-weight: 200;

        }

            

        .header-left p {

            margin: 0;

            font-size: 1.7rem; /* Velikost textu pro "Anna Teichmanová" */

            

        }



        .header-logo {

            flex: 1; /* Logo zůstane pevně na svém místě */

            align-self: center; /* Zajistí vertikální zarovnání loga na střed */

            display: flex;

            justify-content: center; /* Logo na střed */

            align-items: center;

        }



        .logo {

            width: 170px;

            height: auto; 

        }



        .header-right p {

            font-size: 1.4rem;

        }



        .contact-info-header {

            display: flex;

            flex-direction: column; /* Zarovnání položek pod sebe */

            align-items: flex-end; /* Věci uvnitř budou doprava */

            justify-content: right; /* Celý boxík se přesune doprava */

            width: 100%; /* Můžeš upravit podle potřeby */

            gap: 10px;  

        }



        .email-item, .instagram-item {

            display: flex;

            align-items: center; /* Ikony budou zarovnané s textem */

            justify-content: flex-end; /* Celá skupina se přesune doprava */

            width: 100%; /* Zajistí rovnoměrné rozložení */

            gap: 10px; /* Přidá mezeru mezi ikonou a textem */

        }



        .email-icon-header, .instagram-icon-header {

            width: 50px; /* Zmenšení ikon */

            height: auto; /* Zachování poměru stran */

             margin-left: 0; /* Odstraníme margin-left, který posouval ikony */

        }



        .contact-info-header a:hover {

            color: #c7e0ff; /* Modrá barva při najetí */

            transition: color 0.3s ease-in-out; /* Plynulý efekt */

        }



        @media (min-width: 0px) and (max-width: 476px) {

            header {



                display: block; /* Disable Flexbox */

                flex-direction: row; /* Horizontální rozložení */

                align-items: center;

                

                flex-wrap: wrap; /* Allow wrapping on smaller screens */

                

                justify-content: space-between; /* Udrží texty vlevo a logo vpravo */

                padding-left: 20px; 

                padding-right: 20px; 

                padding-top: 15px; 

                padding-bottom: 20px; 

            }



            .header-left {

                flex: 1;

                text-align: left; /* Všechny texty vlevo */

            }

            .header-left h2 {

                font-size: 1.4rem !important; /* Velikost textu pro "Grafické Portfolio" */

                line-height: 1.8!important; /* Lepší čitelnost */

            }



            .header-left p {

                font-size: 1rem !important; /* Velikost textu pro "Anna Teichmanová" */

                margin-top: 5px; /* Mezera nad textem */

                line-height: 0.5 !important; /* Pro plynulé rozložení textu */

            }

            .logo {

                margin-left: auto; /* Posune logo doprava */

                margin-right: 0; /* Zajistí, že je zarovnané k pravému okraji */

                flex: none; /* Zamezí roztažení loga */

                text-align: right;

                float: right; /* Logo zarovnáme doprava */

                margin-top: -47px; /* Přizpůsobení pozice loga nad texty */

                width: 130px !important; /* Menší velikost loga */

            }



            .header-right p {

                font-size: 0.8rem !important; /* Zajištění správné velikosti textu */

                display: inline-block; /* Zajistí, že rámeček bude jen kolem textu */

                padding: 2px 5px; /* Menší mezery uvnitř rámečku */

                width: fit-content; /* Automatická velikost podle textu */

                margin: 0; /* Zabrání nechtěným posunům */

            }



            .contact-info-header {

                display: flex;

                flex-direction: column; /* Zarovnání položek pod sebe */

                align-items: flex-start; /* Věci uvnitř budou doprava */

                justify-content: left; /* Celý boxík se přesune doprava */

                width: 100%; /* Můžeš upravit podle potřeby */

                gap: 8px;  /* Mezera mezi ikonama email a ig */

                margin-top: -60px; /* Přizpůsobení pozice loga nad texty */

            }



            .email-item, .instagram-item {

                display: flex;

                align-items: center; /* Ikony budou zarovnané s textem */

                justify-content: flex-start; /* Celá skupina se přesune doprava */

                width: 100%; /* Zajistí rovnoměrné rozložení */

                gap: 5px; /* Přidá mezeru mezi ikonou a textem */

            }



            .email-icon-header, .instagram-icon-header {

                width: 25px; /* Zmenšení ikon */

                height: auto; /* Zachování poměru stran */

                margin-left: 0; /* Odstraníme margin-left, který posouval ikony */

                order: -1; /* Předřadí ikonu před text */

            }



           

        }





        @media (min-width: 477px) and (max-width: 858px) {

            header {

                    display: block; /* Disable Flexbox */

                    flex-direction: row; /* Horizontální rozložení */

                    align-items: center;

                    

                    flex-wrap: wrap; /* Allow wrapping on smaller screens */

                    justify-content: space-between; /* Udrží texty vlevo a logo vpravo */

                    padding-left: 30px; 

                    padding-right: 30px; 

                    padding-top: 15px; 

                    padding-bottom: 25px; 

                }



                .header-left {

                    flex: 1;

                    text-align: left; /* Všechny texty vlevo */

                }



                .header-left h2 {

                    font-size: 1.9rem !important; /* Velikost textu pro "Grafické Portfolio" */

                    line-height: 1.8!important; /* Lepší čitelnost */

                }



                .header-left p {

                    font-size: 1.4rem !important; /* Velikost textu pro "Anna Teichmanová" */

                    margin-top: 5px; /* Mezera nad textem */

                    line-height: 0.5 !important; /* Pro plynulé rozložení textu */

                }



                .logo {

                    margin-left: auto; /* Posune logo doprava */

                    margin-right: 0; /* Zajistí, že je zarovnané k pravému okraji */

                    flex: none; /* Zamezí roztažení loga */

                    text-align: right;

                    float: right; /* Logo zarovnáme doprava */

                    margin-top: -50px; /* Přizpůsobení pozice loga nad texty */

                    width: 150px !important; /* Menší velikost loga */

                }



                .header-right p {

                    font-size: 1rem !important; /* Zajištění správné velikosti textu */

                    display: inline-block; /* Zajistí, že rámeček bude jen kolem textu */

                    padding: 2px 5px; /* Menší mezery uvnitř rámečku */

                    width: fit-content; /* Automatická velikost podle textu */

                    margin: 0; /* Zabrání nechtěným posunům */

                }



                .contact-info-header {

                    display: flex;

                    flex-direction: column; /* Zarovnání položek pod sebe */

                    align-items: flex-start; /* Věci uvnitř budou doprava */

                    justify-content: left; /* Celý boxík se přesune doprava */

                

                    width: 100%; /* Můžeš upravit podle potřeby */

                    gap: 10px;  /* Mezera mezi ikonama email a ig */

                    margin-top: -75px; /* Přizpůsobení pozice loga nad texty */

                }



                .email-item, .instagram-item {

                    display: flex;

                    align-items: center; /* Ikony budou zarovnané s textem */

                    justify-content: flex-start; /* Celá skupina se přesune doprava */

                    width: 100%; /* Zajistí rovnoměrné rozložení */

                    gap: 5px; /* Přidá mezeru mezi ikonou a textem */

                }



                .email-icon-header, .instagram-icon-header {

                    width: 35px; /* Zmenšení ikon */

                    height: auto; /* Zachování poměru stran */

                    margin-left: 0; /* Odstraníme margin-left, který posouval ikony */

                    order: -1; /* Předřadí ikonu před text */

                }

                

        }





        @media (min-width: 859px) and (max-width: 973px) {



            .header {

                padding: 15px 30px; /* Menší mezery */

                

            }



            .header-left h2 {

                font-size: 2rem !important; /* Velikost textu pro "Grafické Portfolio" */

                line-height: 2!important; /* Lepší čitelnost */

            }



            .header-left p {

                font-size: 1.5rem !important; /* Velikost textu pro "Anna Teichmanová" */

                margin-top: 0px; /* Mezera nad textem */

                line-height: 1.0 !important; /* Pro plynulé rozložení textu */

                margin-bottom: 20px;

            }



            .header-logo {

                flex: 1; /* Logo zůstane pevně na svém místě */

                align-self: center; /* Zajistí vertikální zarovnání loga na střed */

                display: flex;

                justify-content: center; /* Logo na střed */

                align-items: center;

            }



            .logo {

                width: 170px;

                height: auto; 

            }



            .header-right p {

               font-size: 1.2rem;

           

            }



            .contact-info-header {

                display: flex;

                flex-direction: column; /* Zarovnání položek pod sebe */

                align-items: flex-end; /* Věci uvnitř budou doprava */

                justify-content: right; /* Celý boxík se přesune doprava */

            

                width: 100%; /* Můžeš upravit podle potřeby */

                gap: 10px;  /* Mezera mezi ikonama email a ig */

            

            }



            .email-item, .instagram-item {

                display: flex;

                align-items: center; /* Ikony budou zarovnané s textem */

                justify-content: flex-end; /* Celá skupina se přesune doprava */

                width: 100%; /* Zajistí rovnoměrné rozložení */

                gap: 10px; /* Přidá mezeru mezi ikonou a textem */

            }



            .email-icon-header, .instagram-icon-header {

                width: 43px; /* Zmenšení ikon */

                height: auto; /* Zachování poměru stran */

                margin-left: 0; /* Odstraníme margin-left, který posouval ikony */

                

            }

        }



        

        

        .intro {

            font-family: 'poppins', sans-serif;

            font-weight: 300;

            font-style: italic;

            font-size: 0.8rem;

            color: #00000085;

            background-color: rgba(0, 0, 0, 0); /* Poloprůhledné pozadí */

            text-align: justify;

            display: flex; /* Aktivace Flexboxu */

            justify-content: center; /* Zarovnání textu na střed horizontálně */

            align-items: center;

            height: auto; /* Automatická výška podle obsahu */

            max-width: 800px; /* Maximální šířka textového bloku */        

            margin: 10px auto; /* Automaticky vycentrováno */

            padding: 20px 90px; /* Menší pevný padding místo 20 % */

        }



        .intro p {

            margin: 0px 0px; /* Mezera mezi jednotlivými odstavci */

            line-height: 1.5; /* Příjemné čtení díky většímu řádkování */

            word-break: break-word; /* Zalamuje slova na správné pozici */

        }



        .columns {

            display: flex;

            justify-content: center;

            margin: 0 auto;

            flex-direction: column; /* Uspořádání sloupců pod sebe */

            align-items: stretch; /* Zarovnání sloupců na střed */

            text-align: center; /* Zarovná text v rámci elementu */

            flex: 1; /* Každá sekce zabere stejný podíl šířky */

            padding: 0rem;

            background: #b92a9f00;

            border-radius: 0px;

            margin-top: 10px;

            margin-bottom: 10px;

            margin-left: 5px;

            margin-right: 5px;

            height: 1500px;

            gap: 5px;

            padding-left: 3%; /* Relativní mezery místo pevného marginu */

            padding-right: 3%;

            cursor: default; /* Zachová standardní kurzor pro celý container */

        }   



        .columns > * {

            flex-grow: 1; /* Dynamické přizpůsobení prvků ve sloupci */

            flex-shrink: 1; /* Umožní zmenšení prvků při omezeném prostoru */

            flex-basis: auto; /* Nastaví flexibilní základní velikost */

        }

  

        .column::before {

            content: "";

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0); /* Výchozí průhledná vrstva */

            transition: background-color 0.5s ease; /* Plynulý přechod */

            z-index: 0; /* Pseudo-prvek bude pod textem */

        }



        .column:hover::before {

            background-color: #0000009d; /* Překryvná barva při hoveru */

            cursor: pointer; /* Změna kurzoru na ukazatel */  

        }



        .details {

            margin: 0 auto; /* Mezera od nadpisu */

            padding: 0;

            list-style-type: disc; /* Styl odrážek */

            color: #ffffff; /* Barva textu */

            transition: opacity 0.5s ease, transform 0.5s ease; /* Přidání jemného přechodu */

            opacity: 0; /* Seznam bude ve výchozím stavu neviditelný */

            z-index: 2; /* Odrážky nad pseudo-prvkem */

            transform: translateY(-0px); /* Výchozí posun dolů */           

            flex-direction: column; /* Zarovnejte odrážky vertikálně */

            justify-content: center; /* Zajistí vycentrování na střed */

            align-items: center; /* Zarovná odrážky horizontálně na střed */

            text-align: left; /* Zarovná text odrážek doleva hned od začátku */

            display: block; /* Seznam je viditelný, ale skrytý kvůli opacity */  

            font-size: 1.3rem;          

        }           



        .column:hover .details {

            display: block; /* Zobrazí seznam při hoveru na column */

            opacity: 1; /* Seznam se zobrazí postupně */

            transform: translateY(30px); /* Odrážky se vrátí na původní pozici */        

            

        }

        .column:hover h2 {

            transform: translateY(-70px); /* Posun nadpisu nahoru při hoveru */            

        }



        .details li {

            margin: 7px 0; /* Mezera mezi jednotlivými odrážkami */

            justify-content: center!important;

            align-items: center;    

        }

        

        .column {

            margin: 0px; /* Vnější okraj mezi sloupci */

            padding: 0px; /* Vnitřní mezera uvnitř každého sloupce */

            background-color: #a4a4a4; /* Barva pozadí */

            box-shadow: 0 2px 5px rgb(0, 0, 0); /* Stín pro efektní vzhled */

            display: flex;

            position: relative; /* Potřebné pro absolutní pozicování pseudo-prvku */

            overflow: hidden; /* Zajistí, že nic nevyčnívá mimo sloupec */           

            background-size: cover;

            background-position: center;

            z-index: 1; /* Text zůstane nad pseudo-prvkem */

            border-radius: 10px; 

            text-align: left; /* Odrážky a text zarovnané doleva */                   

            justify-content: center; /* Obsah na střed horizontálně */

            align-items: center; /* Obsah na střed vertikálně */

            flex-direction: column; /* Vertikální uspořádání obsahu */

            margin-bottom: 5px; /* Pevná mezera mezi sloupci */

            min-height: 320px;     

            cursor: pointer;   

        }



        .column h2 {

            position: relative; /* Text zůstane nad pseudo-prvkem */

            z-index: 2; /* Text získá vyšší prioritu než pseudo-prvek */

            text-shadow: 2px 2px 5px rgb(0, 0, 0), 2px 2px 10px rgb(0, 0, 0), 2px 2px 15px rgb(0, 0, 0) ; /* Jemný tmavý stín pod textem */

            margin: 0; /* Zrušení výchozího odsazení */

            width: 100%; /* Zajistí nadpisu šířku odpovídající sloupci */

            transition: transform 0.5s ease; /* Jemný přechod posunu */

            display: flex;

            justify-content: center; /* Zajistí vycentrování na střed */

            align-items: center; /* Zarovná odrážky horizontálně na střed */    

            position: absolute; /* Nadpis je absolutně umístěn v rámci rodičovského boxu */

            top: 37%; /* Umístí střed nadpisu do poloviny výšky sloupce */

            padding: 0;

            text-align: center; /* Text uvnitř nadpisu je horizontálně zarovnán na střed */

            font-size: 2.5rem;        

            font-style: normal;

            font-family: 'poppins', sans-serif;

            font-weight: 200;  

        }

        

        .column.education {

            background-image:url(edu2.png); /* Zde vložte cestu k vašemu obrázku */

            background-size: cover; /* Obrázek se přizpůsobí velikosti sloupce */

            background-position: center;

            height: 300px; /* Nastavení výšky sloupce */

            color: #ffffff; /* Barva textu pro dobrý kontrast s obrázkem */

            display: flex !important;

            justify-content:center!important;

            align-items: center!important;   

            flex-direction: column!important;/* Obsah uvnitř education bude uspořádán vertikálně */           

        }

               

        .column.propagace {

            background-image:url(propagace2.png); /* Zde vložte cestu k vašemu obrázku */

            background-size: cover; /* Obrázek se přizpůsobí velikosti sloupce */

            background-position: center;

            height: 300px; /* Nastavení výšky sloupce */

            color: #ffffff; /* Barva textu pro dobrý kontrast s obrázkem */

            display: flex;

            justify-content: center!important;

            align-items: center!important;

            flex-direction: column!important;/* Obsah uvnitř education bude uspořádán vertikálně */          

        }



        .column.malba {

            background-image:url(malba\ a\ ilustrace2.jpg); /* Zde vložte cestu k vašemu obrázku */

            background-size: cover; /* Obrázek se přizpůsobí velikosti sloupce */

            background-position: center; /* Obrázek zarovná na střed */

            height: 300px; /* Nastavení výšky sloupce */

            color: #ffffff; /* Barva textu pro dobrý kontrast s obrázkem */

            display: flex;

            justify-content: center!important;

            align-items: center!important;

            flex-direction: column!important;/* Obsah uvnitř education bude uspořádán vertikálně */  

        }



        /* Pro displeje od 0px do 429px */

        @media (min-width: 0px) and (max-width: 429px) {



            .gallery {

                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))!important; /* Dynamická šířka sloupců */

                gap: 5px;

                justify-content: center!important; /* Zarovnání obrázků na střed */

                place-items: center!important;

                margin: auto!important; /* Přizpůsobení na střed */

                }



            .gallery img {

                height: auto;

                }



            figcaption {

                margin-top: 2px; /* Mezera mezi obrázkem a popiskem */

                text-align: center!important; /* Popisek zarovnaný doprostřed */

                font-size: 0.8rem!important;

                transform: translateX(-3%) !important; /* Popisek zarovnaný doprostřed nabastlený */

                line-height: 1.2; /* Sníží řádkování */

                }



            .column {

                height: 170px !important; /* Nižší výška sloupce */

                padding: 0px; /* Přidáme trochu prostoru uvnitř */

                min-height: 150px;    

            }



            .column h2 {

                font-size: 1.5rem!important; /* Menší velikost textu pro nadpis */    

            }



            .details li {

                font-size: 0.8rem!important; /* Menší velikost odrážek */

                line-height: 1.2; /* Mírné snížení řádkování */

            }



            .intro {

                width: 95%; /* Maximální šířka pro malé obrazovky */

                font-size: 0.6rem; /* Ještě menší velikost textu pro mobily */

                line-height: 1.4; /* Menší řádkování pro úsporu prostoru */

                padding: 10px; /* Větší mezery kolem textu pro pohodlné čtení */

                max-width: 400px;

                }



            .details {

                font-size: 0.8rem; /* Ještě menší text pro mobily */

                line-height: 1.3; /* Optimalizace řádkování */

                }



            .column:hover h2 {

                transform: translateY(-40px); /* Menší posun nadpisu nahoru */

                transition: transform 0.5s ease; /* Plynulý přechod */

                }



            .column:hover .details {

                transform: translateY(20px); /* Menší posun odrážek dolů */

                transition: transform 0.5s ease; /* Plynulý přechod */

                }

        }









        @media (min-width: 429px) and (max-width: 550px) {

            .gallery {

                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))!important; /* Dynamická šířka sloupců */

                gap: 5px;

                justify-content: center!important; /* Zarovnání obrázků na střed */

                place-items: center!important;

                margin: auto!important; /* Přizpůsobení na střed */

                }



            .gallery img {

                height: auto;

                }



            figcaption {

                margin-top: 2px; /* Mezera mezi obrázkem a popiskem */

                text-align: center!important; /* Popisek zarovnaný doprostřed */

                font-size: 0.8rem!important;

                transform: translateX(-4%) !important; /* Popisek zarovnaný doprostřed nabastlený */

                line-height: 1.2; /* Sníží řádkování */

                }



            .column {

                height: 200px !important; /* Nižší výška sloupce */

                min-height: 150px;

                }



            .column h2 {

                font-size: 1.8rem!important; /* Menší velikost textu pro nadpis */

                }



            .details li {

                font-size: 0.9rem!important; /* Menší velikost odrážek */

                line-height: 1.3; /* Mírné snížení řádkování */

                }

            .intro {

                width: 90%; /* Text bude trochu roztaženější */

                font-size: 0.8rem; /* Mírné zmenšení velikosti textu */

                line-height: 1.6; /* Zachování pohodlného řádkování */

                max-width: 700px;

                padding: 10px; /* Větší mezery kolem textu pro pohodlné čtení */

                }



            .details {

                font-size: 0.9rem; /* Zmenšení velikosti textu pro větší telefony/tablety */

                line-height: 1.4; /* Mírné snížení řádkování */

                }



            .column:hover h2 {

                transform: translateY(-45px); /* Střední posun nadpisu nahoru */

                transition: transform 0.5s ease; 

                }



            .column:hover .details {

                transform: translateY(25px); /* Střední posun odrážek dolů */

                transition: transform 0.5s ease;

                }

        }



        

        

        

        @media (min-width: 550px) and (max-width: 767px) {

            .gallery {

                grid-template-columns: repeat(auto-fit, minmax(170px, 1fr))!important; /* Dynamická šířka sloupců */

                gap: 5px;

                justify-content: center!important; /* Zarovnání obrázků na střed */

                place-items: center!important;

                margin: auto!important; /* Přizpůsobení na střed */

                }



            .gallery img {

                height: auto;

                }



            figcaption {

                margin-top: 2px; /* Mezera mezi obrázkem a popiskem */

                text-align: center!important; /* Popisek zarovnaný doprostřed */

                font-size: 0.9rem!important;

                transform: translateX(-5%) !important; /* Popisek zarovnaný doprostřed nabastlený */

                line-height: 1.2; /* Sníží řádkování */

                }



        .column {

            height: 200px !important; /* Nižší výška sloupce */

            min-height: 150px;           

                }



        .column h2 {

            font-size: 2rem!important; /* Menší velikost textu pro nadpis */

                }



        .details li {

            font-size: 0.9rem!important; /* Menší velikost odrážek */

            line-height: 1.3; /* Mírné snížení řádkování */

                }



        .intro {

            width: 90%; /* Text bude trochu roztaženější */

            font-size: 0.8rem; /* Mírné zmenšení velikosti textu */

            line-height: 1.6; /* Zachování pohodlného řádkování */

            max-width: 700px;

            padding: 10px; /* Větší mezery kolem textu pro pohodlné čtení */

                }



        .details {

            font-size: 0.9rem; /* Zmenšení velikosti textu pro větší telefony/tablety */

            line-height: 1.4; /* Mírné snížení řádkování */

                }



        .column:hover h2 {

            transform: translateY(-45px); /* Střední posun nadpisu nahoru */

            transition: transform 0.5s ease; 

                }



        .column:hover .details {

            transform: translateY(25px); /* Střední posun odrážek dolů */

            transition: transform 0.5s ease;

                }



                



        

        }





        @media (min-width: 767px) and (max-width: 850px) {

        .column {

            height: 250px !important; /* Nižší výška sloupce */

            min-height: 150px; 

            }

        

        .column h2 {

            font-size: 2.3rem!important; /* Menší velikost textu pro nadpis */

            }      



        .details li {

            font-size: 0.9rem!important; /* Menší velikost odrážek */

            line-height: 1.3; /* Mírné snížení řádkování */

            }



        .intro {

            width: 90%; /* Text bude trochu roztaženější */

            font-size: 0.8rem; /* Mírné zmenšení velikosti textu */

            line-height: 1.6; /* Zachování pohodlného řádkování */

            max-width: 700px;

            padding: 10px; /* Větší mezery kolem textu pro pohodlné čtení */

            }



        .details {

            font-size: 0.9rem; /* Zmenšení velikosti textu pro větší telefony/tablety */

            line-height: 1.4; /* Mírné snížení řádkování */

            }



        .column:hover h2 {

            transform: translateY(-45px); /* Střední posun nadpisu nahoru */

            transition: transform 0.5s ease; 

            }



        .column:hover .details {

            transform: translateY(25px); /* Střední posun odrážek dolů */

            transition: transform 0.5s ease;

            }

        }

        

        



      

        

        @media (max-height: 1500px) {

                .columns {

                    height: 70vh; /* Mírně menší výška pro velmi vysoké obrazovky */

                }

            }



            @media (max-height: 800px) {

                .columns {

                    height: 60vh; /* Ještě menší výška pro středně vysoké obrazovky */

                }

            }



            @media (max-height: 500px) {

                .columns {

                    height: auto; /* Automatická výška pro malé obrazovky */

                }

            }

            

        

        

       .gallery {

            _border: 2px solid #ff0000;



            max-height: 0;

            opacity: 0;

            overflow: hidden;

            transform: translateY(-20px);

            transition: max-height 0.5s ease, opacity 0.5s ease, transform 0.5s ease;



            display: flex;

            flex-wrap: wrap;

            _justify-content: space-between;

            justify-content: center;

            gap: 15px;



            position: relative;

            z-index: 10;

            width: 100%;

            box-sizing: border-box;

            margin-top: 20px;

        }



        .gallery.active {

            max-height: none;

            opacity: 1;

            transform: translateY(0);

            overflow: visible;

            margin-bottom: 40px;

        }



        .gallery-item {

            position: relative;

            border-radius: 5px;

            _box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);

            /* Automatická velikost podle obsahu */

            flex: 0 0 auto;

            text-align: center;

            max-width: 100%;

            display: flex;

            flex-direction: column;

            align-items: center;

           

        }

        .gallery-item .image-box {

            overflow: hidden;

            border-radius: 5px;

            box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8);

            display: block;

            padding: 0;

        }

            .image-box img {

            height: 300px;

            width: auto;

            

            margin: 0 auto;

        }



        .gallery-item img {

            max-height: 300px;

            width: auto;

            height: auto;

            max-width: 100%;

            object-fit: contain;

            opacity: 0;

            transform: translateY(10px);

            transition: opacity 0.5s ease, transform 0.5s ease;

            _border: 2px solid #003cff;

            display: block;

            margin: 0 auto;

        }



        .gallery-item .caption {

            margin-top: 10px;

            font-size: 0.9rem;

            color: #323232;

            font-family: 'poppins';

            font-weight: 300;

            font-style: italic;

            opacity: 0;

            transform: translateY(5px);

            transition: opacity 0.5s ease, transform 0.5s ease;

        }



            .caption {

                

            max-width: 280px;

            white-space: normal; /* povolí zalomení */

            _max-width: 100%;

  

 

 

 

  word-break: break-word;

  white-space: normal;



 

 

 

  display: inline-block;

        }



            /* Aktivace efektu */

        .gallery.active .gallery-item img,

        .gallery.active .gallery-item .caption {

            opacity: 1;

            transform: translateY(0);

        }



      

        

        



        footer {

            

            bottom: 0;

            width: 100%;

            background-color: #000000;

            color: white;

            position: relative; /* Ujistíme se, že footer nemá vyšší z-index */

            z-index: 1; /* Nižší hodnota než galerie */

            padding-top: 20px;

            padding-bottom: 20px;



            display: flex;

            overflow: visible;

            

            

            

        }

        

        .footer-container {

            display: flex;

            justify-content: space-between;

            _align-items: center; /* Flexibilní roztažení na výšku */

            height: auto; /* Zajistí dostatek prostoru pro vnitřní obsah */



            min-height: 250px; /* Jasná minimální výška footru */

            width: 100%;

            

            

            margin-top: 20px;

            margin-bottom: 20px;

            margin-right: 3%;

            margin-left: 3%;



            overflow: visible;

            flex-wrap: wrap;

            align-items: stretch;

            _border: 2px solid rgb(0, 255, 21);

           

        }



        .contact-info {

            _border: 2px solid rgb(255, 0, 255);

            display: flex;

            flex-direction: column; /* Umístí obsah vertikálně */

            justify-content: center; /* `contact-text` nahoře, `contact-emailinsta` dole */

            height: 100%; /* Plná výška rodičovského prvku */

            align-items: flex-start;

            gap: 20%;

            

        }



        .contact-text {

            

            text-align: left; /* Zarovnání textu  */

            font-size: 1.6rem;

            color: #ffffff;

            max-width: 400px; /* Omezení šířky pro čistý vzhled */

            white-space: nowrap; /* Zabrání zalomení na další řádek */

            padding-right: 10px;

            

            max-width: 100%;

            _border: 2px solid rgb(0, 140, 255); /* Červený rámeček kolem textu */

           

        }



        .contact-emailinsta {

            display: flex;

            flex-direction: column;

            align-items: start; /* Zarovnání  */

            gap: 10px; /* Mezera mezi prvky */

            color: white;

            max-width: 100%;

            align-self: flex-start;

            _border: 2px solid rgb(255, 247, 0);

        }



       



        .contact-info a {

            color: #ffffff; /* Bílé odkazy */

            text-decoration: none; /* Odebrání podtržení */

            padding-left:5px;

            text-align: left;

            font-size: 1.4rem;

        

        }



        .contact-info a:hover {

            color: #c7e0ff; /* Změna barvy při najetí myší */

            

        }



        .email-icon-footer {

            width: 50px; /* Nastavení velikosti ikonky */

            height: auto; /* Zachování proporcí */

            _margin-left: 10px; /* Přidání mezery mezi ikonou a textem */

            

        }



        .email-item {

            display: flex;

            align-items: center; /* Zarovnání ikonky a textu do řádku */

            width: auto; /* Ujistíme se, že nemají pevnou šířku, která je odlišná */

            max-width: 100%;

            

           

        }



        .instagram-item {

            display: flex;

            align-items: center; /* Zarovnání ikonky a textu do řádku */

            width: auto; /* Ujistíme se, že nemají pevnou šířku, která je odlišná */

            max-width: 100%;

            

        }



        .instagram-icon-footer {

            width: 50px; /* Nastavení velikosti ikonky */

            height: auto; /* Zachování proporcí */

            _margin-left: 10px; /* Přidání mezery mezi ikonou a textem */

            

            

            

        }



        .logo-wrapper {

           

            _display: flex;

            _justify-content: center;

            width: 180px;

           

            _flex: 0 1 180px; /* nebo jiná šířka dle loga */

            display: flex;

            justify-content: center;

            align-items: center;

           



            }



         .logo-footer {

            

            height: auto; /* Zachování proporcí */

            width: 100%;



            _border: 2px solid red; /* Červený rámeček kolem formuláře */

        }



        form {

            font-family: 'poppins';

            font-weight: 100;

            font-size: 1rem;

            display: grid;

            grid-template-columns: 1fr 6fr; /* Dva stejné sloupce */

            gap: 10px; /* Větší mezera mezi prvky */

            text-align: right;

            _border: 2px solid red; /* Červený rámeček kolem formuláře */

            height: auto; 

            align-self: right;

            

            flex: 1; /* Automaticky zabere prostor podle dostupné šířky */

            

            _padding-left: 5%;

        }



        label { /* popisky u formuláře */

            margin-top: 3px; /* Posune názvy kolonky o 5px níž */

            

        }



        input {

            background-color: #ffffff;

            color: #000000;

            font-family: 'Poppins', sans-serif;

            font-size: 1rem;

            border: 1px solid transparent;

            border-radius: 5px;

            transition: 0.3s;

            width: 100%;

            height: 30px;

            padding-left: 10px;



        }



        .message-group {

            grid-column: 2;

            display: flex;

            flex-direction: column;

        }



        textarea {

            background-color: #ffffff;

            color: #000000;

            font-family: 'Poppins', sans-serif;

           

            font-size: 1rem;

            border: 1px solid transparent;

            border-radius: 5px;

            transition: 0.3s;

            width: 100%;

            min-height: 150px; /* Větší pole pro zprávu */

            resize: none; /* Zakáže manuální změnu velikosti */

            line-height: 18px; /* Sjednotí výšku řádku pro stejnou úroveň textu */ 



            padding-left: 10px;

            padding-right: 7px;

            padding-top: 6.5px;



        }



        input:focus, textarea:focus {

            

            _border: 2.5px solid #343434;

            _background-color:  #c7e0ff; /* Jemné zatmavení */

            outline: none; /* Odstraní standardní obrys */

            transition: 0.3s ease-in-out; /* Plynulý efekt */

           

        }



        textarea::-webkit-scrollbar {

            width: 11px; /* Šířka posuvníku */

            

        }



        textarea::-webkit-scrollbar-track {

            background: #000000; /* Barva pozadí posuvníkové dráhy */

            border-radius: 10px;

            

        }



        textarea::-webkit-scrollbar-thumb {

            background:  #555555; /* Barva samotného posuvníku */

            border-radius: 10px;

            cursor: default; /* Zabrání změně na textový kurzor */  

            

        }



        textarea::-webkit-scrollbar-thumb:hover {

            background:  #7b7b7b; /* Barva posuvníku při najetí myší */

           

        }



        /* Tlačítko odeslat přes celou šířku */

        button {

            font-family: 'Poppins', sans-serif;

            font-weight: bold;

            letter-spacing: 1px;

            text-transform: uppercase;

            background: #343434;

            color: white;

            padding: 12px;

            font-size: 1rem;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            transition: 0.3s;

            grid-column: 2; /* Tlačítko přes oba sloupce */

        }



        button:hover {

            background: #386091;

        }

        

        a {

            color: rgb(255, 255, 255); /* Nastavení barvy odkazu */

            text-decoration: none; /* Odstranění podtržení */

        }







         @media (min-width: 0px) and (max-width: 468px) {



            .footer-container {

                display: flex;

                flex-direction: column;       /* vedle sebe */

                align-items: center;        

                justify-content: center;

                flex-wrap: wrap;

                gap: 30px;

            

                position: relative;



                margin-right: 4%;

                margin-left: 4%;



                _border: 2px solid rgb(43, 255, 0);

                margin-top: 8px;

               

            }



            .contact-info {

                _border: 2px solid rgb(255, 0, 255);

                display: flex;

                flex-direction: column;

                justify-content: space-between;

                align-items: center;

                order: 1;

                gap: 20px !important;

                height: fit-content;

                margin-left: auto;

                width: 100%;





                

            }



            .contact-text {

                _border: 2px solid rgb(13, 0, 255);

                font-size: 1.0rem;

                white-space: nowrap; /* Zabrání zalomení na další řádek */

                text-align: center;

                

                

            }

             .contact-emailinsta {

                flex-direction: row;

                justify-content: center;

                align-items: flex-end; /* Zarovnání y  */

                gap: 25px; /* Mezera mezi prvky */

                color: white;

                width: 100%;

               

                _border: 2px solid rgb(255, 247, 0);

                

            }



            .contact-info a {

                font-size: 0.8rem;

                _border: 2px solid rgb(43, 255, 0);

                padding-left: 1px;

            }



            .email-icon-footer {

                width: 25px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .instagram-icon-footer {

                width: 25px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .logo-wrapper {

                order: 3; 

                

                display: flex;

                justify-content: center;

                align-items: center;

                width: 100px;

                _border: 2px solid rgb(255, 0, 0);

                height: fit-content;



                _position: absolute;

   

            }



            .logo-footer {

                width: 100%;

                height: auto;

                _border: 2px dashed rgb(195, 0, 255);

            }







            /* Každý label bude nad svým políčkem */

            label {

                text-align: center;

                _margin: 3px;

                margin-top: 4px;

                margin-bottom: 2px;

                

                _border: 2px solid rgb(8, 0, 255);

            }

            

            form {

                

                font-size: 0.8rem;

                gap: 0px; /* Větší mezera mezi prvky */

                

                _border: 2px solid rgb(255, 0, 0);

                flex-direction: column;

                display: flex;

                width: 100%

            }



            .popisky-form {

                order: 2;

                flex: 1 1 45%;

                display: flex;

                flex-direction: column;

                justify-content: stretch;

                height: 100%; /* důležité pro výšku jako rodič */

                _border: 2px solid rgb(81, 255, 0);

                width: 100%;

            }



            input {

                font-size: 0.8rem;

                padding-left: 7px;

                _border: 2px solid rgb(212, 0, 255);

                height: 30px;



            }



            .message-group {

                grid-column: 2;

                display: flex;

                flex-direction: column;

            }



            textarea {

                background-color: #ffffff;

                color: #000000;

                font-family: 'Poppins', sans-serif;

            

                font-size: 0.8rem;

                border: 1px solid transparent;

                border-radius: 5px;

                transition: 0.3s;

                width: 100%;

                min-height: 150px; /* Větší pole pro zprávu */

                resize: none; /* Zakáže manuální změnu velikosti */

                line-height: 18px; /* Sjednotí výšku řádku pro stejnou úroveň textu */ 



                padding-left: 7px;

                padding-right: 7px;

                padding-top: 6.5px;



            }





            button {

                margin-top: 15px;

                margin-bottom: 15px;

                font-size: 0.8rem;

            }



        }









         @media (min-width: 469px) and (max-width: 680px) {



                    

            

            

            .footer-container {

                display: flex;

                flex-direction: column;       /* vedle sebe */

                align-items: center;        

                justify-content: center;

                flex-wrap: wrap;

                gap: 50px;

            

                position: relative;



                margin-right: 4%;

                margin-left: 4%;



                _border: 2px solid rgb(43, 255, 0);

               

            }



            .contact-info {

                _border: 2px solid rgb(255, 0, 255);

                display: flex;

                flex-direction: column;

                justify-content: space-between;

                align-items: center;

                order: 1;

                gap: 30px !important;

                height: fit-content;

                margin-left: auto;

                width: 100%;





                

            }



            .contact-text {

                _border: 2px solid rgb(13, 0, 255);

                font-size: 1.2rem;

                white-space: nowrap; /* Zabrání zalomení na další řádek */

                text-align: center;

                

                

            }

             .contact-emailinsta {

                flex-direction: row;

                justify-content: center;

                align-items: flex-end; /* Zarovnání y  */

                gap: 50px; /* Mezera mezi prvky */

                color: white;

                width: 100%;

               

                _border: 2px solid rgb(255, 247, 0);

                

            }



            .contact-info a {

                font-size: 1rem;

                _border: 2px solid rgb(43, 255, 0);

            }



            .email-icon-footer {

                width: 35px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .instagram-icon-footer {

                width: 35px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .logo-wrapper {

                order: 3; 

                

                display: flex;

                justify-content: center;

                align-items: center;

                width: 100px;

                _border: 2px solid rgb(255, 0, 0);

                height: fit-content;



                _position: absolute;

   

            }



            .logo-footer {

                width: 100%;

                height: auto;

                _border: 2px dashed rgb(195, 0, 255);

            }







            /* Každý label bude nad svým políčkem */

            label {

                text-align: center;

                _margin: 3px;

                margin-top: 4px;

                margin-bottom: 2px;

                

                _border: 2px solid rgb(8, 0, 255);

            }

            

            form {

                

                font-size: 1rem;

                gap: 0px; /* Větší mezera mezi prvky */

                

                _border: 2px solid rgb(255, 0, 0);

                flex-direction: column;

                display: flex;

                width: 100%

            }



            .popisky-form {

                order: 2;

                flex: 1 1 45%;

                display: flex;

                flex-direction: column;

                justify-content: stretch;

                height: 100%; /* důležité pro výšku jako rodič */

                _border: 2px solid rgb(81, 255, 0);

                width: 100%;

            }



            input {

                font-size: 1rem;

                padding-left: 7px;

                _border: 2px solid rgb(212, 0, 255);

                height: 34px;



            }



            .message-group {

                grid-column: 2;

                display: flex;

                flex-direction: column;

            }



            textarea {

                background-color: #ffffff;

                color: #000000;

                font-family: 'Poppins', sans-serif;

            

                font-size: 1rem;

                border: 1px solid transparent;

                border-radius: 5px;

                transition: 0.3s;

                width: 100%;

                min-height: 150px; /* Větší pole pro zprávu */

                resize: none; /* Zakáže manuální změnu velikosti */

                line-height: 18px; /* Sjednotí výšku řádku pro stejnou úroveň textu */ 



                padding-left: 7px;

                padding-right: 7px;

                padding-top: 6.5px;



            }





            button {

                margin-top: 15px;

                margin-bottom: 10px;

                font-size: 1rem;

            }



        }







        @media (min-width: 681px) and (max-width: 800px) {



                    

            

            

            .footer-container {

                display: flex;

                flex-direction: row;       /* vedle sebe */

                align-items: stretch;         /* ← důležité: roztáhne děti na stejnou výšku */

                justify-content: space-between;

                flex-wrap: wrap;

                _gap: 20px;

                position: relative;



                margin-right: 4%;

                margin-left: 4%;

               

            }



            .contact-info {

                _border: 2px solid rgb(255, 0, 255);

                display: flex;

                flex-direction: column;

                justify-content: flex-start;

                align-items: flex-start;

                _order: 1;

                gap: 25px;

                height: fit-content;





                

            }



            .contact-text {

                _border: 2px solid rgb(13, 0, 255);

                font-size: 1.2rem;

                white-space: nowrap; /* Zabrání zalomení na další řádek */

                padding-right: 10px;

                text-align: left;

                

                

            }

             .contact-emailinsta {

                flex-direction: column;

                align-items: flex-start; /* Zarovnání  */

                gap: 10px; /* Mezera mezi prvky */

                color: white;

                max-width: 100%;

               

                _border: 2px solid rgb(255, 247, 0);

                

            }



            .contact-info a {

                font-size: 1rem;

                _border: 2px solid rgb(43, 255, 0);

            }



            .email-icon-footer {

                width: 35px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .instagram-icon-footer {

                width: 35px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .logo-wrapper {

                _order: 2; /* logo až pod kontakty */

                

                display: flex;

                justify-content: flex-start;

                align-items: flex-end;

                width: 100px;

                _border: 2px solid rgb(255, 0, 0);

                height: fit-content;



                position: absolute;

                left: 0px;

                bottom: 0;

            }



            .logo-footer {

                width: 100%;

                height: auto;

                _border: 2px dashed rgb(195, 0, 255);

            }



            form {

                

                font-size: 1rem;

                gap: 10px; /* Větší mezera mezi prvky */

                height: auto; 

                width: 100%;

                height: 100%; /* ← zajistí, že form zabírá celý prostor */

                padding-left: 40px;

                _border: 2px solid rgb(255, 0, 0);

            

            }



            .popisky-form {

                order: 2;

                flex: 1 1 45%;

                display: flex;

                flex-direction: column;

                _align-items: flex-start;

                justify-content: space-between;

                height: 100%; /* důležité pro výšku jako rodič */

            }



        }







        @media (min-width: 801px) and (max-width: 1100px) {



                    

            

            

            .footer-container {

                display: flex;

                flex-direction: row;       /* vedle sebe */

                align-items: stretch;         /* ← důležité: roztáhne děti na stejnou výšku */

                justify-content: space-between;

                flex-wrap: wrap;

                _gap: 20px;

                position: relative;



                margin-right: 4%;

                margin-left: 4%;



                _border: 2px solid rgb(0, 255, 21);

               

            }



            .contact-info {

                _border: 2px solid rgb(255, 0, 255);

                display: flex;

                flex-direction: column;

                justify-content: flex-start;

                align-items: flex-start;

                _order: 1;

                gap: 20px;

                height: fit-content;





                

            }



            .contact-text {

                _border: 2px solid rgb(13, 0, 255);

                font-size: 1.4rem;

                white-space: nowrap; /* Zabrání zalomení na další řádek */

                padding-right: 10px;

                text-align: left;

                

                

            }

             .contact-emailinsta {

                flex-direction: column;

                align-items: flex-start; /* Zarovnání  */

                gap: 10px; /* Mezera mezi prvky */

                color: white;

                max-width: 100%;

               

                _border: 2px solid rgb(255, 247, 0);

                

            }



            .contact-info a {

                font-size: 1rem;

                _border: 2px solid rgb(43, 255, 0);

            }



            .email-icon-footer {

                width: 35px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .instagram-icon-footer {

                width: 35px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .logo-wrapper {

                _order: 2; /* logo až pod kontakty */

                

                display: flex;

                justify-content: flex-start;

                align-items: flex-end;

                width: 100px;

                _border: 2px solid rgb(255, 0, 0);

                height: fit-content;



                position: absolute;

                left: 0px;

                bottom: 0;

                



            }



            .logo-footer {

                width: 100%;

                height: auto;

                _border: 2px dashed rgb(195, 0, 255);

            }



            form {

                justify-content: flex-end;

                font-size: 1rem;

                gap: 10px; /* Větší mezera mezi prvky */

                

                width: 100%;

                height: 100%; /* ← zajistí, že form zabírá celý prostor */

                padding-left: 60px;

                _border: 2px solid rgb(255, 0, 0);

                max-width: 500px;

                margin-left: auto;

                

                

                

            

            }



            .popisky-form {

                order: 2;

                flex: 1 1 45%;

                display: flex;

                flex-direction: column;

                _align-items: flex-start;

                justify-content: space-between;

                height: 100%; /* důležité pro výšku jako rodič */

               





            }



            label { /* popisky u formuláře */

                margin-top: 3px; /* Posune názvy kolonky o 5px níž */ 

            }



            input {

                font-size: 1rem;

                border: 1px solid transparent;

                border-radius: 5px;

                height: 30px;

                padding-left: 10px;

                width: 100%;

            }



            textarea {

                font-size: 1rem;

                border: 1px solid transparent;

                border-radius: 5px;

                min-height: 150px; /* Větší pole pro zprávu */

                line-height: 18px; /* Sjednotí výšku řádku pro stejnou úroveň textu */ 



                padding-left: 10px;

                padding-right: 7px;

                padding-top: 6.5px;

                width: 100%;



            }



            textarea::-webkit-scrollbar {

                width: 11px; /* Šířka posuvníku */

            }



            textarea::-webkit-scrollbar-track {

                border-radius: 10px;

            }



            textarea::-webkit-scrollbar-thumb {

                border-radius: 10px;

            }



            /* Tlačítko odeslat přes celou šířku */

            button {

                letter-spacing: 1px;

                padding: 12px;

                font-size: 1rem;

                border-radius: 5px;

            }

        }









        @media (min-width: 1101px) and (max-width: 1280px) {



            .contact-info {

                gap: 27%;

            }



            .contact-text {

                font-size: 1.4rem;

                white-space: nowrap; /* Zabrání zalomení na další řádek */

                padding-right: 10px;

            }



           



            .contact-info a {

                font-size: 1.2rem;

            }



            .email-icon-footer {

                width: 45px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .instagram-icon-footer {

                width: 45px; /* Nastavení velikosti ikonky */

                height: auto; /* Zachování proporcí */

            }



            .logo-wrapper {

                 align-self: center;

                display: flex;

                justify-content: center;

                

                width: 160px;

            }



            .logo-footer {

                width: 100%;

                height: auto; /* Zachování proporcí */

            }



        }