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

*:focus { outline: 0; }

html { scroll-behavior: smooth; scroll-padding: 5vw; }
body { font-family: 'SoapRegular'; font-size: clamp(16px, 3vw, 32px); background: #79D2F2; color: #174C99;  -webkit-tap-highlight-color: transparent; letter-spacing: 0.05vw; position: relative; }

a { text-decoration: none; }

img { max-width: 100%; height: auto; }

.w-100 { width: 100%; }
.text-center { text-align: center; }

.container { padding: 0 12vw; }
.container.px-0 { padding: 0; }

section { margin: 6vw 0; }

header { padding-top: 3vw; }
header ul { display: flex; justify-content: center; align-items: center; gap: 3.5vw; list-style: none; }
header ul li a { font-size: clamp(16px, 2.6vw, 24px); color: #174C99; text-decoration: none; line-height: 1; }
.logo { width: 8vw; }

.hero { position: relative; margin-top: 0; }
.hero-img { width: 100%; margin: 0 auto; }
.hero-img .narikace { display: block; transform: rotate(-180deg); }
.hero-img .logo { position: absolute; left: 50%; top: 1.5vw; transform: translateX(-50%); z-index: 1; }

.title-wrapper { width: 55vw; margin: 1vw auto 0 auto; }
.title-wrapper img { display: block; margin-inline: auto; }

.cista-izvorska { position: relative; width: 42vw; margin: 3vw auto; }
.cista-izvorska:before, .cista-izvorska:after { content: ""; position: absolute; width: 4vw; height: 2.5vw; background: url('../images/ficlek.svg') center center / contain no-repeat; }
.cista-izvorska:before { left: -1vw; bottom: -2vw; }
.cista-izvorska:after { transform: rotate(180deg); right: 0; top: 0; }

.row { display: flex;  margin: 0 -2vw; flex-wrap: wrap; }
.row .col { width: 50%; padding: 0 2vw; }
.row .col:has(img) img { display: block; margin: 0 auto; }
.row-1 .col img { width: 80%; }
.row-2 .col img { width: 60%; }
.row-3 .col img { width: 50%; height: unset; aspect-ratio: 4 / 6.9; }
.row.row-mb { margin-bottom: 6vw; }
.align-items-center { align-items: center; }

.section-title img { display: block;  margin: 0 auto 4vw auto; }
.section-title-1 img { width: 25vw; }
.section-title-2 img { width: calc(25vw * 0.5525); margin: 0 auto 2vw auto; }
.section-title-3 img { width: 22vw; margin: 0 auto 2vw auto;  }

.swiper { margin-bottom: 4vw; }
.swiper img { width: 100%; }

.socials { display: flex; justify-content: center; gap: 1.5vw; margin-top: 2vw; }
.socials a img { height: 1.6vw; }

.pre-footer .logo { display: block; margin: 0 auto 1vw auto; }
.everybody-guc-guc { display: block; width: 50vw; margin: 0 auto; }

.swiper-slide .merch-img-wrapper { background: #fff; padding: 3vw; opacity: 0.1; transition: .6s opacity ease-in-out; }
.swiper-slide:before,
.swiper-slide:after { opacity: 0.1; transition: .6s opacity ease-in-out; }
.swiper-slide.swiper-slide-active .merch-img-wrapper,
.swiper-slide.swiper-slide-active:before,
.swiper-slide.swiper-slide-active:after { opacity: 1; }
.swiper-slide .merch-img-wrapper iframe { border-radius: 30px; pointer-events: none; }
.swiper-slide.swiper-slide-active .merch-img-wrapper iframe { pointer-events: auto; }
.swiper-slide { padding-top: 6vw; }
.swiper-slide:before { content: ""; display: block; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 8vw; height: 6vw; background: url('../images/antena.svg') bottom center / contain no-repeat; }
.swiper-slide:after { content: ''; position: absolute; width: 100%; aspect-ratio: 16 / 9; background-image: url('../images/border-video.svg'); background-size: 100%; bottom: 10px; left: 0; pointer-events: none; }
.swiper-button-next, .swiper-button-prev { top: 60%; transform: translateY(-50%); width: 50px; height: 50px; margin: 0; background: #174C99; color: #fff; border-radius: 50%; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 30px; }
.swiper-button-next { right: 2vw; }
.swiper-button-prev { left: 2vw; }

footer { padding-bottom: 4vw; }
footer ul { display: flex; justify-content: center; gap: 1vw; list-style: none; }
footer ul li a { font-family: sans-serif; font-size: clamp(14px, 1vw, 16px); letter-spacing: 0px; color: #174C99; }

.swiper-slide p { font-size: clamp(14px, 2.4vw, 24px); }

.icon { font-family: 'Icons' !important; }

.swiper-button-next:after { content: '→'; font-family: 'Icons' !important; }
.swiper-button-prev:after { content: '←'; font-family: 'Icons' !important; }

@media screen and (min-aspect-ratio: 1/1){

    header li {
        width: 20%;
        text-align: center;
    }
    header li:last-child {
        width: 40%;
        text-align: left;
    }
    header li:first-child {
        width: 40%;
        text-align: right;
    }
}

@media screen and (max-aspect-ratio: 1/1) {
    .container { padding: 0 6vw; }
    .container.px-mob-0 { padding-left: 0; padding-right: 0; }

    header { padding: 8vw 0; }
    header ul { justify-content: space-between; }
    header ul li:nth-child(1) { order: 2; }
    header ul li:nth-child(2) { order: 1; }
    header ul li:nth-child(3) { order: 3; }
    .logo { width: 30vw; }

    .hero { margin: 0; padding-bottom: 4vw; overflow-x: hidden; }

    .hero-img .logo { width: 27vw; top: 5vw; }
    .hero-img .narikace { width: 200%; margin-left: -50%; max-width: unset; }

    .title-wrapper { width: 100%; margin: 5vw auto 0 auto; }

    .cista-izvorska { width: 100%; margin: 6vw auto 0 auto; padding-bottom: 4vw; }
    .cista-izvorska:before, .cista-izvorska:after { width: 6vw; height: 4.5vw; }
    .cista-izvorska:before { bottom: 0; }

    section { margin: 12vw 0; }

    #o-kampanji { margin: 4vw 0 12vw 0; }

    .section-title { margin: 0 auto 8vw auto; }
    .section-title-1 img { width: 55vw; }
    .section-title-2 img {width: calc(55vw * 0.5525); }
    .section-title-3 img { width: 50vw; }

    .row { flex-direction: column; }
    .row .col { width: 100%; }
    .row-2 .col:nth-child(1) { order: 2; }
    .row-2 .col:nth-child(2) { order: 1; }
    .row.row-mb { margin-bottom: 10vw; }
    .row-1 .col:first-child, .row-3 .col:first-child { margin-bottom: 6vw; }
    .row-2 .col:last-child { margin-bottom: 6vw; }
    .row-1 .col img { width: 100%; }
    .row-3 .col img { width: 60%; }

    .swiper { margin-bottom: 10vw; }
    .swiper-slide { padding-top: 10vw; }
    .swiper-slide .merch-img-wrapper { aspect-ratio: 16 / 9.3; padding: 0; }
    .swiper-slide .merch-img-wrapper iframe { border-radius: 0; }
    .swiper-slide:before { width: 16vw; height: 10vw; }
    .swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; }
    .swiper-button-next, .swiper-button-prev { width: 40px; height: 40px; }

    .socials { gap: 6vw; margin-top: 6vw; }
    .socials a img { height: 6vw; }

    .pre-footer .logo { margin: 0 auto 2vw auto; }
    .everybody-guc-guc { width: 100%; }

    footer { padding-bottom: 10vw; }
    footer ul { flex-direction: column; align-items: center; gap: 2vw; }
}


@font-face {
    font-family: 'SoapRegular';
    src: url('../fonts/SoapRegular.eot');
    src: url('../fonts/SoapRegular.eot') format('embedded-opentype'),
         url('../fonts/SoapRegular.woff2') format('woff2'),
         url('../fonts/SoapRegular.woff') format('woff'),
         url('../fonts/SoapRegular.ttf') format('truetype'),
         url('../fonts/SoapRegular.svg#SoapRegular') format('svg');
}

@font-face {
    font-family: 'Icons';
    src: url('../fonts/icons.eot?v=20260617095200');
    src: url('../fonts/icons.eot?v=20260617095200') format('embedded-opentype'),
         url('../fonts/icons.woff2?v=20260617095200') format('woff2'),
         url('../fonts/icons.woff?v=20260617095200') format('woff'),
         url('../fonts/icons.ttf?v=20260617095200') format('truetype'),
         url('../fonts/icons.svg?v=20260617095200#icons') format('svg');
}