/* Breakpointovi usklađeni sa standardom projekta: 1199 / 991 / 767.

   Tablet i mobile: slajdovi su VIŠI od desktop omjera 2:1 → daje vertikalni
   prostor za veće foreground elemente. Bg se s `cover` lagano krati po
   bočnim rubovima (centriran), ali bitan sadržaj (ljudi, telefon, wordmark)
   ostaje vidljiv jer je u sredini bg-a.

   Foreground PNG-ovi (text + bubble) skaliraju se preko `width: %` —
   pozicije (left/top %) ostaju iste kao desktop, samo se širine povećaju
   pa elementi vizualno izgledaju veći i čitljiviji. */

@media only screen and (max-width: 1199px) {
    .slide-1, .slide-2, .slide-3, .slide-4, .slide-5 {
        aspect-ratio: 1.85 / 1;
    }

    /* Foreground širine × 1.2 (20% veće) + per-element pozicije za tablet */
    .slide-1 .fg-text   { width: 39%;     left: 4.5%; }
    .slide-1 .fg-bubble { width: 20.4%;   left: 15.25%; }

    .slide-2 .fg-text   { width: 32.4%;   top: 13.19%; }
    .slide-2 .fg-bubble { width: 29.55%;  left: auto; right: 13.75%; top: 44.94%; }

    .slide-3 .fg-bubble { width: 63.528%; left: 3.38%; }
    .slide-3 .fg-text   { width: 47.928%; left: 12.44%; top: 34.25%; }

    .slide-4 .fg-text   { width: 37.65%;  left: 7.56%; }
    .slide-4 .fg-bubble { width: 37.275%; }

    .slide-5 .fg-text-1 { width: 38.328%; left: 10.35%; }
    .slide-5 .fg-text-2 { width: 33%;     left: 11%; }

    /* Slajd 4 — vrati standardni delay (na tablet/mobile slajd se manje skroluje,
       elementi su odmah vidljivi pa ne treba dugi delay kao na desktopu) */
    .slide-4.in-view .fg-text   { animation-delay: 0.4s; }
    .slide-4.in-view .fg-bubble { animation-delay: 0.65s; }
}

@media only screen and (max-width: 991px) {
    .main-section-wrapper {
        padding-top: 76px;
    }
}

@media only screen and (max-width: 767px) {
    .main-section-wrapper {
        padding-top: 61.05px;
    }

    .slide-1, .slide-2, .slide-3, .slide-4, .slide-5 {
        aspect-ratio: 1.5 / 1;
    }

    /* Foreground širine × 1.4 (40% veće od desktop-a) + per-element pozicije za mobile */
    .slide-1 .fg-text   { width: 45.5%;   left: 5.5%; }
    .slide-1 .fg-bubble { width: 23.8%;   left: 11.25%; }

    .slide-2 .fg-text   { width: 37.8%; }
    .slide-2 .fg-bubble { width: 34.475%; left: auto; right: 14.75%; }

    .slide-3 .fg-bubble { width: 74.116%; left: 4.38%; }
    .slide-3 .fg-text   { width: 55.916%; left: 12.44%; }

    .slide-4 .fg-text   { width: 43.925%; left: 6.56%; }
    .slide-4 .fg-bubble { width: 43.4875%; }

    .slide-5 .fg-text-1 { width: 44.716%; left: 9.35%; }
    .slide-5 .fg-text-2 { width: 38.5%;   left: 10.2%; }
}