*,
*::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: 10vw 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: 10vw; }

.hero { margin-top: 4vw; }
.cista-izvorska { position: relative; display: block; width: 55vw; margin: -3vw auto 0 auto; }
.hero-lik { position: absolute; width: 29%; bottom: 0; left: 12%; }
.hero-boca { position: absolute; height: 98%; width: auto; left: 50%; transform: translateX(-50%); }

.row { display: flex;  margin: 0 -2vw; flex-wrap: wrap; }
.row .col { width: 50%; padding: 0 2vw; }
.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); }

.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; }

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); }

@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; }

    .cista-izvorska { width: 100%; margin: -10vw auto 0 auto; }
    .hero-lik { width: 39%; bottom: 0; left: 2%; }
    .hero-boca { height: 97%; }

    section { margin: 15vw 0; }

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

    .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, .row-3 .col img { display: block; width: 79%; margin: 0 auto; }

    .swiper { margin-bottom: 10vw; }

    .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');
}