/* ============================================
   PROFESIONÁLNÍ ÚPRAVY PRO INDEX STRÁNKU
   ============================================ */

/* 1. ZMENŠENÍ MEZER MEZI SEKCEMI */
.section-padding {
    padding: 60px 0 !important;
}

.section-padding.pt-0 {
    padding-top: 0 !important;
}

@media (max-width: 991px) {
    .section-padding {
        padding: 50px 0 !important;
    }
}

@media (max-width: 767px) {
    .section-padding {
        padding: 40px 0 !important;
    }
}

/* 2. ÚPRAVA HERO SEKCE - kompaktnější a profesionálnější */
.hero-section {
    height: auto !important;
    min-height: 600px !important;
    padding: 80px 0 60px 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* Zajištění, že hero sekce není oříznutá page-wrapper */
.page-wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

@media (max-width: 1399px) {
    .hero-section {
        min-height: 450px !important;
        padding: 60px 0 50px 0 !important;
    }
}

@media (max-width: 991px) {
    .hero-section {
        padding: 50px 0 40px 0 !important;
        min-height: auto !important;
    }
}

.hero-inner-slider {
    padding-top: 0 !important;
}

.hero-inner-slider h2 {
    font-size: 16px !important;
    padding: 6px 20px !important;
    margin-bottom: 15px !important;
}

.hero-inner-slider h3 {
    font-size: 48px !important;
    line-height: 1.2 !important;
    margin-bottom: 15px !important;
}

@media (max-width: 1399px) {
    .hero-inner-slider h3 {
        font-size: 42px !important;
    }
}

@media (max-width: 1199px) {
    .hero-inner-slider h3 {
        font-size: 36px !important;
    }
}

@media (max-width: 991px) {
    .hero-inner-slider h3 {
        font-size: 32px !important;
    }
}

.hero-inner-slider p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

@media (max-width: 575px) {
    .hero-inner-slider p {
        font-size: 15px !important;
        margin-bottom: 20px !important;
    }
}

/* 3. ÚPRAVA SERVICE SEKCE - zmenšení paddingů */
.service-section {
    padding-top: 0 !important;
    margin-top: -80px !important;
}

.service-section .wraper {
    padding: 50px 40px !important;
    padding-bottom: 40px !important;
}

@media (max-width: 1499px) {
    .service-section .wraper {
        padding: 50px 30px !important;
        padding-bottom: 40px !important;
    }
}

@media (max-width: 1399px) {
    .service-section .wraper {
        padding: 40px 20px !important;
        padding-bottom: 30px !important;
    }
}

@media (max-width: 991px) {
    .service-section {
        margin-top: 0 !important;
    }
    
    .service-section .wraper {
        padding: 40px 20px !important;
        padding-bottom: 30px !important;
    }
}

@media (max-width: 767px) {
    .service-section .wraper {
        padding: 30px 15px !important;
        padding-bottom: 20px !important;
    }
}

.service-section .item h2 a {
    font-size: 22px !important;
    line-height: 1.3 !important;
}

@media (max-width: 1199px) {
    .service-section .item h2 a {
        font-size: 20px !important;
    }
}

.service-section .item p {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

@media (max-width: 1199px) {
    .service-section .item p {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}

/* ÚPRAVA SERVICE-SECTION-S2 - stejné velikosti písma jako service-section */
.service-section-s2 .item h2 a {
    font-size: 22px !important;
    line-height: 1.3 !important;
}

@media (max-width: 1199px) {
    .service-section-s2 .item h2 a {
        font-size: 20px !important;
    }
}

.service-section-s2 .item p {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

@media (max-width: 1199px) {
    .service-section-s2 .item p {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}

/* 4. ÚPRAVA ABOUT SEKCE - kompaktnější rozložení */
.about-section {
    padding-top: 0 !important;
    padding-bottom: 30px !important;
}

@media (max-width: 991px) {
    .about-section {
        padding-bottom: 25px !important;
    }
}

@media (max-width: 767px) {
    .about-section {
        padding-bottom: 20px !important;
    }
}

.about-section .right span {
    font-size: 16px !important;
    padding: 6px 18px !important;
    margin-bottom: 15px !important;
}

.about-section .right h2 {
    font-size: 42px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
}

@media (max-width: 1399px) {
    .about-section .right h2 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
}

.about-section .right p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 25px !important;
}

.about-section .about-video h2 {
    font-size: 20px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
}

.about-section .about-video p {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* 5. ÚPRAVA TESTIMONIAL SEKCE */
.testimonial-section {
    padding-top: 20px !important;
}

/* Vycentrování řádku s obrázkem a komentáři */
.testimonial-section .row.align-items-center {
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
}

.testimonial-section .row.align-items-center > div {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Vertikální vycentrování fotografie vlevo s komentáři */
.testimonial-section .row.align-items-center > div:first-child {
    align-self: center !important;
}

.testimonial-section .row.align-items-center > div:last-child {
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@media (max-width: 991px) {
    .testimonial-section {
        padding-top: 15px !important;
    }
}

@media (max-width: 767px) {
    .testimonial-section {
        padding-top: 10px !important;
    }
}

/* Vycentrování obrázku vedle referencí */
.testimonial-section .testimonial-image {
    max-width: 405px !important;
    max-height: 381px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

@media (max-width: 1399px) {
    .testimonial-section .testimonial-image {
        max-width: 350px !important;
        max-height: 330px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 1199px) {
    .testimonial-section .testimonial-image {
        max-width: 300px !important;
        max-height: 280px !important;
        margin: 0 auto !important;
    }
}

.testimonial-section .testimonial-image-wrapper {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.testimonial-section .testimonial-image-slider {
    display: flex !important;
    width: 400% !important;
    transition: transform 0.5s ease-in-out !important;
    will-change: transform !important;
}

.testimonial-section .testimonial-image-slider img {
    width: 25% !important;
    flex-shrink: 0 !important;
    height: auto !important;
    border-radius: 20px !important;
    display: block !important;
}

/* Zmenšení výšky obrázků "skup" o 25% */
.testimonial-section .testimonial-image-slider img[src*="skup"] {
    height: 75% !important; /* Zmenšení o 25% = 100% - 25% = 75% */
    width: auto !important;
    max-width: 25% !important;
    object-fit: contain !important;
}

/* Zmenšení obrázků kočka a pes o 30% */
.testimonial-section .testimonial-image-slider img[src*="kocka-ref"],
.testimonial-section .testimonial-image-slider img[src*="pes-ref"] {
    width: 17.5% !important; /* 25% * 0.7 = 17.5% */
    margin: 0 3.75% !important; /* (25% - 17.5%) / 2 = 3.75% pro vycentrování */
    height: auto !important;
    display: block !important;
}

.testimonial-section .testimonial-main-image {
    width: 100% !important;
    height: auto !important;
    border-radius: 20px !important;
}

.testimonial-section .testimonial-image .shape {
    width: 430px !important;
    height: 343px !important;
}

@media (max-width: 1399px) {
    .testimonial-section .testimonial-image .shape {
        width: 400px !important;
        height: 320px !important;
    }
}

@media (max-width: 1199px) {
    .testimonial-section .testimonial-image .shape {
        width: 390px !important;
        height: 310px !important;
    }
}

/* Vycentrování slideru s komentáři - zobrazení pouze 1 komentáře */
.testimonial-section .testimonial-slider {
    max-width: 500px !important;
    max-height: none !important;
    margin: 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    align-self: center !important;
}

@media (max-width: 1399px) {
    .testimonial-section .testimonial-slider {
        max-width: 450px !important;
        max-height: none !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 1199px) {
    .testimonial-section .testimonial-slider {
        max-width: 420px !important;
        max-height: none !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 991px) {
    .testimonial-section .testimonial-slider {
        margin: 0 auto !important;
        max-width: 100% !important;
        max-height: none !important;
    }
}

/* Zajištění, že je viditelný pouze 1 komentář */
.testimonial-section .testimonial-slider .owl-stage-outer {
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
}

.testimonial-section .testimonial-slider .owl-item {
    width: 100% !important;
    max-width: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    align-items: stretch !important;
}

.testimonial-section .testimonial-slider .owl-item.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fallback - zobrazit první item, pokud Owl Carousel ještě neproběhl */
.testimonial-section .testimonial-slider:not(.owl-loaded) .owl-item:first-child {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Zajištění, že pouze aktivní item je zobrazen */
.testimonial-section .testimonial-slider .owl-stage {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Skrýt neaktivní itemy po načtení Owl Carousel */
.testimonial-section .testimonial-slider.owl-loaded .owl-item:not(.active) {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Zajištění správné šířky pro owl-item a item */
.testimonial-section .testimonial-slider .owl-stage .owl-item {
    min-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    align-items: stretch !important;
}

.testimonial-section .testimonial-slider .owl-stage .owl-item .item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Správné zalamování textu v referencích - text se přizpůsobí šířce boxu */
.testimonial-section .testimonial-slider.owl-carousel,
.testimonial-section .testimonial-slider.owl-loaded,
.testimonial-section .testimonial-slider.owl-drag {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.testimonial-section .testimonial-slider .item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: auto !important;
    min-height: auto !important;
    margin: auto 0 !important;
}

.testimonial-section .testimonial-slider .item h3 {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 25px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    hyphens: auto !important;
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
    text-align: center !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1399px) {
    .testimonial-section .testimonial-slider .item h3 {
        font-size: 15px !important;
    }
}

@media (max-width: 1199px) {
    .testimonial-section .testimonial-slider .item h3 {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {
    .testimonial-section .testimonial-slider .item {
        padding: 0 10px !important;
    }
    
    .testimonial-section .testimonial-slider .item h3 {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 575px) {
    .testimonial-section .testimonial-slider .item {
        padding: 0 5px !important;
    }
    
    .testimonial-section .testimonial-slider .item h3 {
        font-size: 13px !important;
    }
}

/* Zmenšení ikony uvozovek o 30% */
.testimonial-section .item .icon {
    width: 42px !important;
    height: 42px !important;
}

.testimonial-section .item .icon img {
    width: 100% !important;
    height: 100% !important;
}

.testimonial-section .item .client-wrap {
    justify-content: center !important;
    display: flex !important;
}

.testimonial-section .item .client-wrap .text {
    margin-left: 0 !important;
    text-align: center !important;
}

.testimonial-section .item .client-wrap .text h4 {
    font-size: 15.4px !important;
    text-align: center !important;
}

@media (max-width: 1199px) {
    .testimonial-section .item .client-wrap .text h4 {
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .testimonial-section .item .client-wrap .text h4 {
        font-size: 12.6px !important;
    }
}

.testimonial-section .item .client-wrap .text span {
    font-size: 14px !important;
}

@media (max-width: 575px) {
    .testimonial-section .item .client-wrap .text span {
        font-size: 13px !important;
    }
}

/* 6. ÚPRAVA SECTION TITLE - zmenšení nadpisů */
.section-title {
    margin-bottom: 40px !important;
}

@media (max-width: 767px) {
    .section-title {
        margin-bottom: 30px !important;
    }
}

.section-title h3 {
    font-size: 16px !important;
    padding: 6px 20px !important;
}

.section-title h2 {
    font-size: 42px !important;
    line-height: 1.3 !important;
}

@media (max-width: 1199px) {
    .section-title h2 {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 767px) {
    .section-title h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }
}

/* 7. ÚPRAVA BLOG SEKCE */
.blog-section .blog-card .content h2 a {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

@media (max-width: 1399px) {
    .blog-section .blog-card .content h2 a {
        font-size: 22px !important;
    }
}

@media (max-width: 1199px) {
    .blog-section .blog-card .content h2 a {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
}

/* ÚPRAVA BLOG SEKCE PRO BLOG.PHP */
.wpo-blog-pg-section .blog-card .content h2 a {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

@media (max-width: 767px) {
    .wpo-blog-pg-section .blog-card .content h2 a {
        font-size: 15px !important;
    }
}

.blog-section .blog-card .content p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
}

@media (max-width: 1199px) {
    .blog-section .blog-card .content p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
}

.blog-section .blog-card .date li {
    font-size: 14px !important;
}

/* 8. CELKOVÉ ÚPRAVY TYPOGRAFIE */
body {
    font-size: 15px !important;
}

p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

@media (max-width: 767px) {
    p {
        font-size: 15px !important;
    }
}

/* 9. ÚPRAVA TLAČÍTEK - kompaktnější */
.theme-btn-s2 {
    padding: 14px 35px !important;
    font-size: 16px !important;
}

@media (max-width: 991px) {
    .theme-btn-s2 {
        font-size: 15px !important;
        padding: 12px 28px !important;
    }
}

/* 10. OPTIMALIZACE MEZER V KONTEJNERECH */
.container {
    max-width: 1200px !important;
}

/* 11. ZLEPŠENÍ VIZUÁLNÍ HIERARCHIE */
.hero-section .hero-inner-slider {
    max-width: 600px !important;
}

@media (max-width: 1399px) {
    .hero-section .hero-inner-slider {
        max-width: 500px !important;
    }
}

/* 12. ÚPRAVA OBRÁZKŮ V HERO SEKCI */
.hero-image {
    opacity: 0.9;
}

/* 13. RESPONZIVNÍ ÚPRAVY */
@media (max-width: 991px) {
    .about-section .left {
        margin-bottom: 50px !important;
    }
    
    .about-section .right {
        max-width: 100% !important;
    }
}

/* 14. ZLEPŠENÍ ČITELNOSTI */
.hero-inner-slider,
.about-section .right,
.service-section .item {
    line-height: 1.6;
}

/* 15. KOMPAKTNĚJŠÍ ROZLOŽENÍ */
.service-section .col {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .service-section .col {
        margin-bottom: 25px;
    }
}

@media (max-width: 767px) {
    .service-section .col {
        margin-bottom: 20px;
    }
}

/* 16. ZLEPŠENÍ VIZUÁLNÍHO VZHLEDU - jemnější stíny a přechody */
.service-section .wraper {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-radius: 30px !important;
}

/* 17. ÚPRAVA IKON V SERVICE SEKCI */
.service-section .item .icon {
    width: 70px !important;
    height: 70px !important;
    line-height: 70px !important;
    margin-bottom: 15px !important;
}

.service-section .item .icon img {
    max-width: 40px !important;
    max-height: 40px !important;
}

/* 18. ZLEPŠENÍ RESPONZIVITY */
@media (max-width: 1399px) {
    .hero-section .hero-inner-slider {
        margin-left: 20px !important;
    }
}

/* 19. ÚPRAVA OBRÁZKŮ V HERO SEKCI - lepší zobrazení */
.hero-image .top-image img,
.hero-image .buttom-image img {
    transition: transform 0.3s ease;
}

.hero-image .top-image img:hover,
.hero-image .buttom-image img:hover {
    transform: scale(0.65) !important;
}

/* 24. OPRAVA SKRYTÉHO OBRÁZKU V TOP-IMAGE */
.hero-image .top-image {
    overflow: visible !important;
    top: 0 !important;
    padding-top: 50px !important;
}

@media (max-width: 1499px) {
    .hero-image .top-image {
        top: 0 !important;
        padding-top: 50px !important;
    }
}

.hero-image .top-image .item {
    overflow: visible !important;
}

.hero-image .top-image .item img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    transform-origin: center center !important;
    margin: 0 auto !important;
}

/* 20. ZLEPŠENÍ TYPOGRAFIE - lepší čitelnost */
.hero-inner-slider p strong {
    font-weight: 600;
    color: #333;
}

/* 21. ÚPRAVA ABOUT VIDEO BOXU */
.about-section .about-video {
    width: 380px !important;
    height: 380px !important;
    border-radius: 380px !important;
    padding-top: 50px !important;
}

@media (max-width: 1399px) {
    .about-section .about-video {
        width: 100% !important;
        height: auto !important;
        border-radius: 20px !important;
        padding: 40px 20px !important;
    }
}

/* 22. ZLEPŠENÍ KONTRASTU A ČITELNOSTI */
.about-section .right p {
    color: #444 !important;
}

.service-section .item p {
    color: #555 !important;
}

/* 23. ÚPRAVA MARGINŮ PRO LEPŠÍ ROZLOŽENÍ */
.about-section .wraper {
    gap: 40px;
}

@media (max-width: 991px) {
    .about-section .wraper {
        gap: 30px;
    }
}

/* 24. SKRYTÍ QUESTION-AREA SEKCE - dočasně skryto, ale kód zůstává */
.question-area,
.question-area.section-padding,
div.question-area.section-padding {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 25. ANIMOVANÉ POZADÍ S POLETUJÍCÍMI PACIČKAMI PRO FAQ STRÁNKU */
.paws-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.paw {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.35;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(1.2) sepia(0.3) hue-rotate(10deg) saturate(0.8);
}

/* Použití různých obrázků paciček - rozmístěné po celé stránce */
.paw-1 {
    background-image: url('../images/paws-6.png');
    top: 10%;
    left: 5%;
    animation: float1 20s infinite ease-in-out;
}

.paw-2 {
    background-image: url('../images/paws-7.png');
    top: 20%;
    left: 15%;
    animation: float2 25s infinite ease-in-out;
    animation-delay: -2s;
}

.paw-3 {
    background-image: url('../images/paws-8.png');
    top: 30%;
    left: 25%;
    animation: float3 22s infinite ease-in-out;
    animation-delay: -4s;
}

.paw-4 {
    background-image: url('../images/paws-9.png');
    top: 15%;
    left: 40%;
    animation: float4 28s infinite ease-in-out;
    animation-delay: -6s;
}

.paw-5 {
    background-image: url('../images/paws-10.png');
    top: 50%;
    left: 10%;
    animation: float5 24s infinite ease-in-out;
    animation-delay: -8s;
}

.paw-6 {
    background-image: url('../images/paws-11.png');
    top: 60%;
    left: 20%;
    animation: float6 26s infinite ease-in-out;
    animation-delay: -10s;
}

.paw-7 {
    background-image: url('../images/paws-6.png');
    top: 70%;
    left: 35%;
    animation: float7 23s infinite ease-in-out;
    animation-delay: -12s;
}

.paw-8 {
    background-image: url('../images/paws-7.png');
    top: 15%;
    left: 75%;
    animation: float8 27s infinite ease-in-out;
    animation-delay: -14s;
}

.paw-9 {
    background-image: url('../images/paws-8.png');
    top: 35%;
    left: 85%;
    animation: float9 21s infinite ease-in-out;
    animation-delay: -16s;
}

.paw-10 {
    background-image: url('../images/paws-9.png');
    top: 55%;
    left: 90%;
    animation: float10 29s infinite ease-in-out;
    animation-delay: -18s;
}

.paw-11 {
    background-image: url('../images/paws-10.png');
    top: 75%;
    left: 80%;
    animation: float11 25s infinite ease-in-out;
    animation-delay: -20s;
}

.paw-12 {
    background-image: url('../images/paws-11.png');
    top: 85%;
    left: 10%;
    animation: float12 24s infinite ease-in-out;
    animation-delay: -22s;
}

/* Další pacičky - rozmístěné po celé stránce */
.paw-13 {
    background-image: url('../images/paws-6.png');
    top: 5%;
    left: 50%;
    animation: float13 19s infinite ease-in-out;
    animation-delay: -1s;
}

.paw-14 {
    background-image: url('../images/paws-7.png');
    top: 25%;
    left: 60%;
    animation: float14 23s infinite ease-in-out;
    animation-delay: -3s;
}

.paw-15 {
    background-image: url('../images/paws-8.png');
    top: 45%;
    left: 45%;
    animation: float15 21s infinite ease-in-out;
    animation-delay: -5s;
}

.paw-16 {
    background-image: url('../images/paws-9.png');
    top: 65%;
    left: 55%;
    animation: float16 26s infinite ease-in-out;
    animation-delay: -7s;
}

.paw-17 {
    background-image: url('../images/paws-10.png');
    top: 40%;
    left: 30%;
    animation: float17 22s infinite ease-in-out;
    animation-delay: -9s;
}

.paw-18 {
    background-image: url('../images/paws-11.png');
    top: 80%;
    left: 50%;
    animation: float18 25s infinite ease-in-out;
    animation-delay: -11s;
}

.paw-19 {
    background-image: url('../images/paws-6.png');
    top: 90%;
    left: 25%;
    animation: float19 20s infinite ease-in-out;
    animation-delay: -13s;
}

.paw-20 {
    background-image: url('../images/paws-7.png');
    top: 5%;
    left: 65%;
    animation: float20 24s infinite ease-in-out;
    animation-delay: -15s;
}

.paw-21 {
    background-image: url('../images/paws-8.png');
    top: 2%;
    left: 88%;
    animation: float21 27s infinite ease-in-out;
    animation-delay: -17s;
}

.paw-22 {
    background-image: url('../images/paws-9.png');
    top: 22%;
    left: 70%;
    animation: float22 21s infinite ease-in-out;
    animation-delay: -19s;
}

.paw-23 {
    background-image: url('../images/paws-10.png');
    top: 42%;
    left: 75%;
    animation: float23 23s infinite ease-in-out;
    animation-delay: -21s;
}

.paw-24 {
    background-image: url('../images/paws-11.png');
    top: 62%;
    left: 65%;
    animation: float24 26s infinite ease-in-out;
    animation-delay: -23s;
}

.paw-25 {
    background-image: url('../images/paws-6.png');
    top: 82%;
    left: 70%;
    animation: float25 22s infinite ease-in-out;
    animation-delay: -25s;
}

.paw-26 {
    background-image: url('../images/paws-7.png');
    top: 12%;
    left: 95%;
    animation: float26 25s infinite ease-in-out;
    animation-delay: -27s;
}

.paw-27 {
    background-image: url('../images/paws-8.png');
    top: 32%;
    left: 2%;
    animation: float27 20s infinite ease-in-out;
    animation-delay: -29s;
}

.paw-28 {
    background-image: url('../images/paws-9.png');
    top: 52%;
    left: 5%;
    animation: float28 24s infinite ease-in-out;
    animation-delay: -31s;
}

.paw-29 {
    background-image: url('../images/paws-10.png');
    top: 72%;
    left: 15%;
    animation: float29 28s infinite ease-in-out;
    animation-delay: -33s;
}

.paw-30 {
    background-image: url('../images/paws-11.png');
    top: 92%;
    left: 45%;
    animation: float30 19s infinite ease-in-out;
    animation-delay: -35s;
}

/* Animace pro poletující pacičky */
@keyframes float1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(100px, -50px) rotate(5deg);
    }
    50% {
        transform: translate(200px, 50px) rotate(-5deg);
    }
    75% {
        transform: translate(100px, 100px) rotate(3deg);
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-80px, 80px) rotate(-4deg);
    }
    50% {
        transform: translate(-150px, -30px) rotate(6deg);
    }
    75% {
        transform: translate(-80px, -100px) rotate(-3deg);
    }
}

@keyframes float3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(120px, 60px) rotate(7deg);
    }
    50% {
        transform: translate(180px, -80px) rotate(-6deg);
    }
    75% {
        transform: translate(90px, -120px) rotate(4deg);
    }
}

@keyframes float4 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-100px, -60px) rotate(-5deg);
    }
    50% {
        transform: translate(-200px, 40px) rotate(8deg);
    }
    75% {
        transform: translate(-110px, 110px) rotate(-4deg);
    }
}

@keyframes float5 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(90px, -70px) rotate(6deg);
    }
    50% {
        transform: translate(160px, 90px) rotate(-7deg);
    }
    75% {
        transform: translate(70px, 130px) rotate(5deg);
    }
}

@keyframes float6 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-120px, 50px) rotate(-6deg);
    }
    50% {
        transform: translate(-180px, -100px) rotate(9deg);
    }
    75% {
        transform: translate(-90px, -140px) rotate(-5deg);
    }
}

@keyframes float7 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(110px, 80px) rotate(8deg);
    }
    50% {
        transform: translate(190px, -50px) rotate(-8deg);
    }
    75% {
        transform: translate(100px, -110px) rotate(6deg);
    }
}

@keyframes float8 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-90px, -80px) rotate(-7deg);
    }
    50% {
        transform: translate(-170px, 60px) rotate(10deg);
    }
    75% {
        transform: translate(-80px, 120px) rotate(-6deg);
    }
}

@keyframes float9 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(130px, -90px) rotate(9deg);
    }
    50% {
        transform: translate(200px, 70px) rotate(-9deg);
    }
    75% {
        transform: translate(110px, 150px) rotate(7deg);
    }
}

@keyframes float10 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-110px, 70px) rotate(-8deg);
    }
    50% {
        transform: translate(-190px, -90px) rotate(11deg);
    }
    75% {
        transform: translate(-100px, -160px) rotate(-7deg);
    }
}

@keyframes float11 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(100px, -100px) rotate(10deg);
    }
    50% {
        transform: translate(180px, 80px) rotate(-10deg);
    }
    75% {
        transform: translate(90px, 170px) rotate(8deg);
    }
}

@keyframes float12 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-130px, -70px) rotate(-9deg);
    }
    50% {
        transform: translate(-200px, 100px) rotate(12deg);
    }
    75% {
        transform: translate(-110px, 180px) rotate(-8deg);
    }
}

/* Animace pro další pacičky (13-30) */
@keyframes float13 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(50px, 30px) rotate(4deg);
    }
    50% {
        transform: translate(80px, -20px) rotate(-3deg);
    }
    75% {
        transform: translate(40px, 60px) rotate(2deg);
    }
}

@keyframes float14 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-40px, 50px) rotate(-5deg);
    }
    50% {
        transform: translate(-70px, -30px) rotate(6deg);
    }
    75% {
        transform: translate(-30px, -80px) rotate(-4deg);
    }
}

@keyframes float15 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(60px, -40px) rotate(5deg);
    }
    50% {
        transform: translate(90px, 40px) rotate(-4deg);
    }
    75% {
        transform: translate(50px, 70px) rotate(3deg);
    }
}

@keyframes float16 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-50px, -30px) rotate(-6deg);
    }
    50% {
        transform: translate(-80px, 50px) rotate(7deg);
    }
    75% {
        transform: translate(-40px, 80px) rotate(-5deg);
    }
}

@keyframes float17 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(45px, -50px) rotate(4deg);
    }
    50% {
        transform: translate(75px, 30px) rotate(-5deg);
    }
    75% {
        transform: translate(35px, 90px) rotate(3deg);
    }
}

@keyframes float18 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-55px, 40px) rotate(-7deg);
    }
    50% {
        transform: translate(-85px, -50px) rotate(8deg);
    }
    75% {
        transform: translate(-45px, -90px) rotate(-6deg);
    }
}

@keyframes float19 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(40px, 55px) rotate(6deg);
    }
    50% {
        transform: translate(70px, -40px) rotate(-7deg);
    }
    75% {
        transform: translate(30px, -85px) rotate(5deg);
    }
}

@keyframes float20 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-45px, -45px) rotate(-5deg);
    }
    50% {
        transform: translate(-75px, 35px) rotate(6deg);
    }
    75% {
        transform: translate(-35px, 75px) rotate(-4deg);
    }
}

@keyframes float21 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-50px, 35px) rotate(5deg);
    }
    50% {
        transform: translate(-80px, -45px) rotate(-6deg);
    }
    75% {
        transform: translate(-40px, -80px) rotate(4deg);
    }
}

@keyframes float22 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-60px, -35px) rotate(-8deg);
    }
    50% {
        transform: translate(-90px, 55px) rotate(9deg);
    }
    75% {
        transform: translate(-50px, 95px) rotate(-7deg);
    }
}

@keyframes float23 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-55px, 50px) rotate(7deg);
    }
    50% {
        transform: translate(-85px, -35px) rotate(-8deg);
    }
    75% {
        transform: translate(-45px, -85px) rotate(6deg);
    }
}

@keyframes float24 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-40px, -55px) rotate(-6deg);
    }
    50% {
        transform: translate(-70px, 40px) rotate(7deg);
    }
    75% {
        transform: translate(-30px, 90px) rotate(-5deg);
    }
}

@keyframes float25 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-65px, 30px) rotate(8deg);
    }
    50% {
        transform: translate(-95px, -60px) rotate(-9deg);
    }
    75% {
        transform: translate(-55px, -100px) rotate(7deg);
    }
}

@keyframes float26 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-50px, -40px) rotate(-7deg);
    }
    50% {
        transform: translate(-80px, 50px) rotate(8deg);
    }
    75% {
        transform: translate(-40px, 100px) rotate(-6deg);
    }
}

@keyframes float27 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-45px, 60px) rotate(9deg);
    }
    50% {
        transform: translate(-75px, -30px) rotate(-10deg);
    }
    75% {
        transform: translate(-35px, -95px) rotate(8deg);
    }
}

@keyframes float28 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-60px, -50px) rotate(-8deg);
    }
    50% {
        transform: translate(-90px, 45px) rotate(9deg);
    }
    75% {
        transform: translate(-50px, 105px) rotate(-7deg);
    }
}

@keyframes float29 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-55px, 45px) rotate(10deg);
    }
    50% {
        transform: translate(-85px, -55px) rotate(-11deg);
    }
    75% {
        transform: translate(-45px, -110px) rotate(9deg);
    }
}

@keyframes float30 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(55px, -35px) rotate(4deg);
    }
    50% {
        transform: translate(85px, 45px) rotate(-5deg);
    }
    75% {
        transform: translate(45px, 85px) rotate(3deg);
    }
}

/* Zajištění, že obsah je nad pozadím */
.page-wrapper {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Responzivní úpravy */
@media (max-width: 991px) {
    .paw {
        width: 50px;
        height: 50px;
        opacity: 0.12;
    }
}

@media (max-width: 767px) {
    .paw {
        width: 40px;
        height: 40px;
        opacity: 0.1;
    }
}