*,
*::before,
*::after { box-sizing: border-box;padding: 0; margin: 0; }
*:focus { outline: 0; }
* { scrollbar-width: thin; -webkit-tap-highlight-color: transparent; }

:root { overscroll-behavior: none; overflow-x: hidden; }

html { font-size: 100%; }
body { margin: 0;  padding: 0; font-family: "Red Hat Display", sans-serif; font-size: clamp(16px, 1.1vw, 20px); color: #000; }

ul, ol { margin: 0; }
a, a:link, a:hover, a:focus, a:active { text-decoration: none; outline: 0; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; height: auto; }

.container { max-width: 1920px; margin: 0 auto; padding: 0 3vw; }

section { padding-bottom: 4vw; }

.hero { position: relative; padding: 0; }
.hero img { aspect-ratio: 16 / 9; width: 100%;}
.hero .link { position: absolute; top: 50px; right: 50px; font-size: 22px; color: #000; font-weight: 700; text-transform: uppercase; }

.intro h2 img { height: 3.5vw; }

.intro { margin-top: -9vw; text-align: center; }
.intro p { max-width: 30vw; margin: 0 auto; }

.content .container { display: flex; justify-content: space-between; gap: 4vw; }
.content .container > div { width: calc(50% - 2vw); }
.content h2 img { height: 1.4vw; }
.content .flex { display: flex; align-items: center; gap: 4vw; }
.content .hand, .content .mrlje { display: none; }
 
.style-text > * { margin: 1vw 0; }
.style-text > *:first-child { margin-top: 0; }
.style-text > *:last-child { margin-bottom: 0; }
.style-text h3 { font-size: clamp(16px, 1.3vw, 24px); text-transform: uppercase; text-decoration: underline; }
.style-text ul { padding-left: 24px; }
.style-text ul li:not(:last-child) { margin-bottom: 0.3vw; }
.style-text a { color: #000; text-decoration: underline; text-transform: uppercase; }

.dog { display: none; }
.dog img { display: block; width: 100%; }

.about { position: relative; padding-bottom: 0; }
.about img { display: block; width: 100%; }
.about .logo-link { position: absolute; display: block;  }
.about .hodd { width: 18%; height: 24%; top: 7%; left: 3%; }
.about .hks { width: 17%; height: 16%; top: 7%; left: 40%; }
.about .purina { width: 17%; height: 9%; top: 36%; left: 3%; }
.about .petcentar { width: 13%; height: 10%; top: 56%; left: 4%; }
.about .sibenik { width: 7%;  height: 17%; top: 8%; right: 8%; }
.about .visit-sibenik { width: 13%; height: 11%; top: 29%; right: 8%; }
.about .dalmacija-sibenik { width: 19%; height: 10%; top: 46%; right: 5%; }
.about .mint { width: 17%; height: 10%; top: 60%; right: 6%; }

@media (max-width: 1024px) {
    .container { padding: 0 6vw; }

    .hero { padding: 4vw 0; }
    .hero img { aspect-ratio: unset; }

    .content .container { flex-direction: column; }
    .content .container > div { width: 100%; }

    .intro { margin-top: -4vw; }
    .intro h2 img {  height: 7vw; }
    .intro p { max-width: 60vw; }

    .content h2 img { height: 2.5vw; }

    .style-text > * { margin: 3vw 0; }
    .style-text ul li:not(:last-child) { margin-bottom: 1vw; }

    .dog { display: block; }

    .about { padding-bottom: 10vw; }
    .about picture img { padding: 0 6vw; }
    .about .hodd { width: 44%;height: 19%;top: 7%;left: 4%;}
    .about .hks { width: 44%;height: 14%;top: 39%;left: auto;right: 8%;}
    .about .purina { width: 39%;height: 10%;top: 23%;left: auto;right: 10%;}
    .about .petcentar { width: 42%;height: 8%;top: 9%;left: auto;right: 9%;}
    .about .sibenik { width: 23%;height: 19%;top: 64%;right: auto;left: 8%;}
    .about .visit-sibenik { width: 35%;height: 11%;top: 83%;right: 8%;}
    .about .dalmacija-sibenik { width: 49%;height: 9%;top: 70%;right: 11%;}
    .about .mint { width: 45%;height: 8%;top: 86%;right: auto;left: 6%;}
}

@media (max-width: 767px) {

    section { padding-bottom: 10vw; }

    .hero img { aspect-ratio: unset; }
    .hero .link { font-size: 16px; top: 15px; right: 20px; }

    .intro { margin-top: 0; }
    .intro h2 img { height: 12vw; }
    .intro p { max-width: 100%; }

    .content { overflow: hidden; }
    
    .content h2 img { height: 4.5vw; }

    .style-text > * { margin: 4vw 0; }

}