/* Základní proměnné pro barvy a styly */
:root {
    --primary-dark: #040b27;    /* Hlavní tmavá barva pro pozadí a text */
    --primary-blue: #3795ba;    /* Hlavní modrá barva pro tlačítka a zvýraznění */
    --light-gray: #c3c4bd;      /* Světle šedá barva pro text a pozadí */
    --dark-gray: #050404;       /* Tmavě šedá barva pro text */
    --accent: #ffb700;          /* Žlutá akcentová barva pro zvýraznění */
}

/* Resetování základních stylů */
* {
    margin: 0;                  /* Odstraní vnější odsazení všech elementů */
    padding: 0;                 /* Odstraní vnitřní odsazení všech elementů */
    box-sizing: border-box;     /* Zahrne padding a border do celkové šířky elementu */
    font-family: 'Montserrat', sans-serif; /* Nastaví základní font pro celou stránku */
}

/* Základní styly pro body */
body {
    line-height: 1.6;          /* Nastaví výšku řádku pro lepší čitelnost */
    color: var(--dark-gray);   /* Nastaví základní barvu textu */
}

/* Styly pro hlavičku stránky */
header {
    background-color: var(--primary-dark); /* Tmavé pozadí hlavičky */
    position: fixed;            /* Fixní pozice na vrcholu stránky */
    width: 100%;               /* Plná šířka obrazovky */
    top: 0;                    /* Přilepení k vrcholu */
    z-index: 1000;             /* Zajistí, že header bude nad ostatními elementy */
    padding: 1rem 2rem;        /* Vnitřní odsazení */
    transition: all 0.3s ease; /* Plynulá animace při změnách */
}

/* Styly pro hlavičku při scrollování */
header.scrolled {
    padding: 0.3rem 2rem;      /* Menší padding při scrollování */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Přidá stín při scrollování */
}

/* Styly pro navigaci */
nav {
    display: flex;             /* Flexbox layout pro navigaci */
    justify-content: space-between; /* Rozdělení prostoru mezi logo a menu */
    align-items: center;       /* Vertikální centrování */
    max-width: 1200px;         /* Maximální šířka navigace */
    margin: 0 auto;            /* Horizontální centrování */
    position: relative;        /* Relativní pozicování */
}

/* Styly pro kontejner loga */
.logo-container {
    display: flex;             /* Flexbox layout pro logo */
    align-items: center;       /* Vertikální centrování */
    gap: 15px;                /* Mezera mezi obrázkem a textem */
    margin-left: -2rem;        /* Záporný margin pro zarovnání */
    transition: all 0.3s ease; /* Plynulá animace při změnách */
}

/* Styly pro obrázek loga */
.logo-img {
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Styly pro text loga */
.logo-text {
    color: var(--light-gray); /* Barva textu loga */
    font-size: 1.1rem;        /* Velikost písma */
    font-weight: 500;         /* Tloušťka písma */
    text-transform: uppercase; /* Velká písmena */
    line-height: 1.1;         /* Výška řádku */
    transition: all 0.3s ease; /* Plynulá animace při změnách */
}

/* Styly pro mobilní menu */
.mobile-only {
    display: none;            /* Skrytí na desktopu */
}

/* Styly pro tlačítko mobilního menu */
.mobile-menu-btn {
    background: none;         /* Bez pozadí */
    border: none;             /* Bez okraje */
    color: var(--light-gray); /* Barva ikony */
    font-size: 1.5rem;        /* Velikost ikony */
    cursor: pointer;          /* Ukazatel myši */
    padding: 0.5rem;          /* Vnitřní odsazení */
    transition: all 0.3s ease; /* Plynulá animace při změnách */
}

/* Styly pro hover efekt tlačítka mobilního menu */
.mobile-menu-btn:hover {
    color: var(--accent);     /* Změna barvy při najetí myší */
}

/* Styly pro aktivní stav tlačítka mobilního menu */
.mobile-menu-btn.active {
    color: var(--accent);     /* Barva při aktivním stavu */
}

/* Styly pro navigační menu */
.nav-menu {
    display: flex;            /* Flexbox layout */
    list-style: none;         /* Odstranění odrážek */
    align-items: center;      /* Vertikální centrování */
    transition: all 0.3s ease; /* Plynulá animace při změnách */
}

/* Styly pro položky menu */
.nav-menu li {
    margin-left: 2rem;        /* Mezera mezi položkami */
}

/* Styly pro odkazy v menu */
.nav-menu li a {
    color: var(--light-gray); /* Barva textu */
    text-decoration: none;    /* Odstranění podtržení */
    transition: color 0.3s;   /* Plynulá animace při změně barvy */
    font-weight: 500;         /* Tloušťka písma */
}

/* Styly pro hover efekt odkazů v menu */
.nav-menu li a:hover {
    color: var(--accent);     /* Změna barvy při najetí myší */
}

/* Styly pro hero sekci */
.hero {
    height: 100vh;            /* Výška celé obrazovky */
    position: relative;        /* Relativní pozicování */
    overflow: hidden;         /* Skrytí přetečení */
}

/* Pozadí hero sekce */
.hero-background {
    position: absolute;       /* Absolutní pozicování */
    top: 0;                  /* Přilepení k vrcholu */
    left: 0;                 /* Přilepení k levému okraji */
    width: 100%;             /* Plná šířka */
    height: 100%;            /* Plná výška */
}

/* Slideshow v hero sekci */
.hero-slideshow {
    position: absolute;       /* Absolutní pozicování */
    top: 0;                  /* Přilepení k vrcholu */
    left: 0;                 /* Přilepení k levému okraji */
    width: 100%;             /* Plná šířka */
    height: 100%;            /* Plná výška */
}

/* Slider v hero sekci */
.hero-slider {
    display: flex;           /* Flexbox layout */
    height: 100%;            /* Plná výška */
    transition: transform 0.5s ease; /* Plynulá animace při změně */
}

/* Jednotlivé slidy */
.hero-slide {
    min-width: 100%;         /* Minimální šířka */
    height: 100%;            /* Plná výška */
}

/* Obrázky v slidech */
.hero-slide img {
    width: 100%;             /* Plná šířka */
    height: 100%;            /* Plná výška */
    object-fit: cover;       /* Vyplnění prostoru */
}

/* Překryv hero sekce */
.hero-overlay {
    position: absolute;       /* Absolutní pozicování */
    top: 0;                  /* Přilepení k vrcholu */
    left: 0;                 /* Přilepení k levému okraji */
    width: 100%;             /* Plná šířka */
    height: 100%;            /* Plná výška */
    background: rgba(0, 0, 0, 0.5); /* Tmavý překryv */
}

/* Obsah hero sekce */
.hero-content {
    position: absolute;      /* Absolutní pozicování */
    top: 50%;               /* Vertikální centrování */
    left: 50%;              /* Horizontální centrování */
    transform: translate(-50%, -50%); /* Přesné centrování */
    text-align: center;     /* Centrování textu */
    color: white;           /* Bílá barva textu */
    z-index: 2;             /* Vrstva nad pozadím */
    background: rgba(0, 0, 0, 0.7); /* Tmavé pozadí */
    padding: 2rem;          /* Vnitřní odsazení */
    border-radius: 10px;     /* Zaoblené rohy */
    max-width: 800px;        /* Maximální šířka */
    width: 90%;             /* Relativní šířka */
    display: flex;          /* Flexbox layout */
    flex-direction: column; /* Vertikální uspořádání */
    align-items: center;    /* Horizontální centrování */
}

.h-u-p-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.h-u-p-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    justify-content: center;
}

.h-u-p-item .letter {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    min-width: 60px;
    text-align: center;
}

.h-u-p-item .text {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
}

.h-u-p-item:last-child .letter {
    font-size: 2.5rem;
    color: var(--primary-blue);
    min-width: auto;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.4;
}

.hero p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
}

.cta-container {
    display: flex;
    gap: 3rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cta-button {
    display: inline-block !important;
    padding: 1rem 2rem !important;
    background: var(--accent) !important;
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    min-width: 200px !important;
    border: none !important;
    cursor: pointer !important;
}

.cta-button:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.hero-prev-btn,
.hero-next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hero-prev-btn:hover,
.hero-next-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.hero-prev-btn {
    left: 20px;
}

.hero-next-btn {
    right: 20px;
}

/* Sekce služeb */
.services {
    padding: 5rem 2rem;        /* Vnitřní odsazení */
    background-color: var(--light-gray); /* Světle šedé pozadí */
}

/* Nadpis sekce služeb */
.services h2 {
    text-align: center;        /* Centrování textu */
    margin-bottom: 3rem;       /* Mezera pod nadpisem */
    color: var(--primary-dark); /* Barva textu */
    font-size: 2.5rem;         /* Velikost písma */
    font-weight: 700;          /* Tloušťka písma */
}

/* Kontejner pro kategorie služeb */
.service-categories {
    display: grid;             /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Automatické sloupce */
    gap: 2rem;                /* Mezera mezi kartami */
    margin-bottom: 3rem;       /* Mezera pod kategoriemi */
    padding: 0 1rem;          /* Boční odsazení */
}

/* Karta kategorie služby */
.category-section {
    background-color: white;   /* Bílé pozadí */
    padding: 2rem;            /* Vnitřní odsazení */
    border-radius: 10px;       /* Zaoblené rohy */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Stín */
    text-align: center;        /* Centrování textu */
    transition: transform 0.3s ease; /* Plynulá animace při hover */
}

/* Hover efekt pro kategorii */
.category-section:hover {
    transform: translateY(-5px); /* Posun nahoru při najetí myší */
}

/* Nadpis kategorie */
.category-title {
    color: var(--primary-dark); /* Barva textu */
    font-size: 1.5rem;         /* Velikost písma */
    margin-bottom: 1rem;       /* Mezera pod nadpisem */
    font-weight: 600;          /* Tloušťka písma */
}

/* Popis kategorie */
.category-description {
    color: var(--dark-gray);   /* Barva textu */
    margin-bottom: 1.5rem;     /* Mezera pod popisem */
    line-height: 1.6;          /* Výška řádku */
    font-weight: 400;          /* Tloušťka písma */
}

/* Tlačítko kategorie */
.category-btn {
    padding: 0.5rem 1.5rem;    /* Vnitřní odsazení */
    border: 2px solid var(--primary-dark); /* Okraj */
    background-color: transparent; /* Průhledné pozadí */
    color: var(--primary-dark); /* Barva textu */
    border-radius: 25px;       /* Zaoblené rohy */
    cursor: pointer;           /* Ukazatel myši */
    font-weight: 500;          /* Tloušťka písma */
    transition: all 0.3s ease; /* Plynulá animace při změnách */
}

/* Hover efekt pro tlačítko */
.category-btn:hover {
    background-color: var(--primary-dark); /* Tmavé pozadí */
    color: var(--light-gray);  /* Světlý text */
}

/* Aktivní stav tlačítka */
.category-btn.active {
    background-color: var(--primary-dark); /* Tmavé pozadí */
    color: var(--light-gray);  /* Světlý text */
}

/* Grid pro služby */
.service-grid {
    display: grid;             /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Automatické sloupce */
    gap: 2rem;                /* Mezera mezi kartami */
    max-width: 1200px;        /* Maximální šířka */
    margin: 0 auto;           /* Horizontální centrování */
}

/* Karta služby */
.service-card {
    background-color: white;   /* Bílé pozadí */
    padding: 2rem;            /* Vnitřní odsazení */
    border-radius: 10px;       /* Zaoblené rohy */
    text-align: center;        /* Centrování textu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Stín */
    transition: all 0.5s ease; /* Plynulá animace při změnách */
    opacity: 1;               /* Plná viditelnost */
    transform: translateY(0);  /* Výchozí pozice */
}

/* Skrytá karta služby */
.service-card.hidden {
    opacity: 0;               /* Neviditelnost */
    transform: translateY(20px); /* Posun dolů */
    display: none;            /* Skrytí */
}

/* Hover efekt pro kartu */
.service-card:hover {
    transform: translateY(-5px); /* Posun nahoru při najetí myší */
}

/* Ikona služby */
.service-card i {
    font-size: 2.5rem;        /* Velikost ikony */
    color: var(--accent);     /* Barva ikony */
    margin-bottom: 1rem;      /* Mezera pod ikonou */
}

/* Nadpis služby */
.service-card h3 {
    font-size: 1.3rem;        /* Velikost písma */
    margin-bottom: 1rem;      /* Mezera pod nadpisem */
    font-weight: 600;         /* Tloušťka písma */
}

/* Popis služby */
.service-card p {
    font-size: 1rem;          /* Velikost písma */
    font-weight: 400;         /* Tloušťka písma */
}

/* Sekce galerie */
.gallery {
    padding: 5rem 2rem;        /* Vnitřní odsazení */
    background-color: white;   /* Bílé pozadí */
}

/* Nadpis galerie */
.gallery h2 {
    text-align: center;        /* Centrování textu */
    margin-bottom: 3rem;       /* Mezera pod nadpisem */
    color: var(--primary-dark); /* Barva textu */
    font-size: 2.5rem;         /* Velikost písma */
    font-weight: 700;          /* Tloušťka písma */
}

/* Kontejner galerie */
.gallery-container {
    max-width: 1000px;         /* Maximální šířka */
    margin: 0 auto;            /* Horizontální centrování */
    position: relative;        /* Relativní pozicování */
    overflow: hidden;          /* Skrytí přetečení */
}

/* Slider galerie */
.gallery-slider {
    display: flex;             /* Flexbox layout */
    width: 100%;              /* Plná šířka */
    transition: transform 0.5s ease; /* Plynulá animace při změně */
}

/* Jednotlivý slide */
.slide {
    min-width: 100%;          /* Minimální šířka */
    flex-shrink: 0;           /* Zabránění zmenšení */
    position: relative;       /* Relativní pozicování */
}

/* Obrázek v slide */
.slide img {
    width: 100%;              /* Plná šířka */
    height: 600px;            /* Fixní výška */
    object-fit: cover;        /* Vyplnění prostoru */
    display: block;           /* Blokové zobrazení */
}

/* Tlačítka pro navigaci */
.prev-btn, .next-btn {
    position: absolute;       /* Absolutní pozicování */
    top: 50%;                /* Vertikální centrování */
    transform: translateY(-50%); /* Přesné centrování */
    background-color: var(--primary-dark); /* Tmavé pozadí */
    color: var(--light-gray); /* Světlý text */
    border: none;            /* Bez okraje */
    width: 50px;             /* Šířka tlačítka */
    height: 50px;            /* Výška tlačítka */
    border-radius: 50%;      /* Kulaté tlačítko */
    cursor: pointer;         /* Ukazatel myši */
    transition: all 0.3s;    /* Plynulá animace */
    display: flex;           /* Flexbox layout */
    align-items: center;     /* Vertikální centrování */
    justify-content: center; /* Horizontální centrování */
    font-size: 1.2rem;       /* Velikost ikony */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Stín */
    z-index: 10;             /* Vrstva nad obsahem */
}

/* Hover efekt pro tlačítka */
.prev-btn:hover, .next-btn:hover {
    background-color: var(--accent); /* Žluté pozadí */
    transform: translateY(-50%) scale(1.1); /* Zvětšení */
}

/* Pozice předchozího tlačítka */
.prev-btn {
    left: 20px;              /* Odstup zleva */
}

/* Pozice následujícího tlačítka */
.next-btn {
    right: 20px;             /* Odstup zprava */
}

/* Kontaktní sekce */
.contact {
    padding: 5rem 2rem;
    background-color: var(--primary-blue);
    color: var(--light-gray);
}

.contact h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    padding: 0 2rem;
}

.contact-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 1rem;
}

.contact-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 1.8rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.contact-item i {
    font-size: 1.8rem;
    color: var(--accent);
    min-width: 40px;
    text-align: center;
}

.contact-text {
    font-size: 1.1rem;
    margin: 0;
    font-weight: 500;
}

.contact-form {
    flex: 1.2;
    background: #ffffff;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.contact-form:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

.form-group {
    margin-bottom: 1.8rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.7rem;
    color: #2c3e50;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px 18px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1.05rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
    color: #2c3e50;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #3795ba;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(55, 149, 186, 0.1);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.submit-btn {
    background: #3795ba;
    color: white;
    padding: 15px 35px;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 1rem;
}

.submit-btn:hover {
    background: #2c7a99;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(55, 149, 186, 0.3);
}

.submit-btn:active {
    transform: translateY(0);
}

#formMessage {
    margin-top: 1.5rem;
    padding: 1.2rem;
    border-radius: 12px;
    font-weight: 500;
    text-align: center;
    font-size: 1.05rem;
}

.success-message {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Placeholder styling */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #95a5a6;
    opacity: 0.8;
}
.number-list {
    list-style-type: none;
    padding: 0;
    margin-top: 20px;
}

.number-list li {
    padding: 4px;
    font-size: 1.2em;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        gap: 2rem;
        padding: 0 1rem;
    }

    .contact-form {
        padding: 1.5rem;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 12px 15px;
    }
    
    .submit-btn {
        padding: 12px 25px;
    }
}

/* Responzivní design pro mobilní zařízení */
@media (max-width: 768px) {
    .contact {
        padding: 3rem 1rem !important;
    }

    .contact h2 {
        font-size: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .contact-container {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .contact-info {
        width: 100% !important;
        order: 2 !important;
        gap: 0.5rem !important;
    }

    .contact-form {
        width: 100% !important;
        order: 1 !important;
        margin-bottom: 1.5rem !important;
        padding: 1rem !important;
    }

    .contact-item {
        padding: 0.8rem !important;
        background: rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .contact-item i {
        font-size: 1.2rem !important;
        color: var(--accent) !important;
    }

    .contact-text {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
    }
    
    .form-group {
        margin-bottom: 1rem !important;
    }

    .form-group label {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .form-group input,
    .form-group textarea {
        padding: 0.8rem !important;
        font-size: 0.9rem !important;
        border-radius: 6px !important;
    }

    .submit-btn {
        width: 100% !important;
        padding: 0.8rem !important;
        font-size: 1rem !important;
        margin-top: 0.5rem !important;
    }
}

/* Responzivní design pro tablety */
@media (max-width: 1024px) {
    .service-categories {
        grid-template-columns: repeat(2, 1fr); /* Dva sloupce pro kategorie */
    }
    
    .service-grid {
        grid-template-columns: repeat(2, 1fr); /* Dva sloupce pro služby */
    }
    
    .hero h1 {
        font-size: 2rem;      /* Menší nadpis */
    }
    
    .hero p {
        font-size: 1rem;      /* Menší text */
    }

    .contact-container {
        flex-direction: column !important;
        width: 100% !important;
    }

    .contact-info {
        flex-direction: column !important;
        width: 100% !important;
    }

    .contact-form {
        width: 100% !important;
    }
}

/* Responzivní design pro malé mobilní zařízení */
@media (max-width: 480px) {
    .contact {
        padding: 3rem 1rem;  /* Menší padding */
    }

    .contact h2 {
        font-size: 2rem;     /* Menší nadpis */
        margin-bottom: 2rem; /* Menší mezera */
    }

    .contact-container {
        flex-direction: column !important;
        width: 100% !important;
    }

    .contact-info {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .contact-form {
        width: 100% !important;
    }
}

/* Plynulé scrollování */
html {
    scroll-behavior: smooth; /* Plynulé scrollování */
}

/* Services Detail Page */
.services-detail {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.service-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2.5rem;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.service-section h2 {
    color: var(--primary-color);
    font-size: 2.2rem;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
    padding-bottom: 1rem;
}

.service-section h2:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
}

.service-content {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.service-image {
    flex: 0 0 300px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.service-image:hover img {
    transform: scale(1.05);
}

.service-text {
    flex: 1;
}

.service-text h3 {
    color: var(--primary-color);
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.service-text p {
    color: var(--text-color);
    margin-bottom: 1.5rem;
    line-height: 1.8;
    font-size: 1.1rem;
}

.service-text ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.service-text ul li {
    color: var(--text-color);
    margin-bottom: 0.8rem;
    padding-left: 1.8rem;
    position: relative;
    font-size: 1.1rem;
    line-height: 1.6;
}

.service-text ul li:before {
    content: "•";
    color: var(--primary-color);
    position: absolute;
    left: 0;
    font-size: 1.4rem;
    line-height: 1;
}

/* Responsive Design for Services Detail */
@media (max-width: 768px) {
    .services-detail {
    padding: 1rem;
        gap: 2rem;
}

    .service-section {
        padding: 1.5rem;
    }

    .service-content {
        flex-direction: column;
        gap: 2rem;
}

    .service-image {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

    .service-section h2 {
        font-size: 1.8rem;
    }

    .service-text h3 {
        font-size: 1.4rem;
        text-align: center;
    }

    .service-text p,
    .service-text ul li {
        font-size: 1rem;
    }
}

/* Footer Styles */
footer {
    background-color: #f5f5f5;
    padding: 1.5rem 0;
    text-align: center;
    margin-top: 3rem;
}

footer p {
    margin: 0;
    color: #666;
    font-size: 1rem;
}

/* ... rest of the styles ... */

/* Language Switch Styles */
.lang-btn {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lang-btn:hover {
    background: var(--accent);
    color: var(--primary-dark);
}

.lang-btn.switching {
    animation: switchPulse 0.3s ease;
}

@keyframes switchPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

[data-lang-cs], [data-lang-en] {
    transition: opacity 0.2s ease;
}

/* Service section specific button styles */
.service-section .cta-button {
    margin-top: 1.5rem !important;
    display: inline-block !important;
    padding: 12px 30px !important;
    background: var(--accent) !important;
    color: var(--primary-dark) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer !important;
}

.service-section .cta-button:hover {
    background: var(--accent-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(55, 149, 186, 0.3) !important;
}