@font-face {

    font-family: 'Bison';

    src: url('/fonts/Bison-Regular.woff2') format('woff2'),

        url('/fonts/Bison-Regular.woff') format('woff'),

        url('/fonts/Bison-Regular.otf') format('opentype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Bison-Bold';

    src: url('/fonts/Bison-Demi-Bold.woff2') format('woff2'),

        url('/fonts/Bison-Demi-Bold.woff') format('woff'),

        url('/fonts/Bison-Demi-Bold.otf') format('opentype');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'HARDLINERS';

    src: url('/fonts/HARDLINERS-Regular.woff2') format('woff2'),

        url('/fonts/HARDLINERS-Regular.woff') format('woff'),

        url('/fonts/HARDLINERS-Regular.otf') format('opentype');

    font-weight: normal;

    font-style: normal;

}

/* RESET */

::-moz-selection {

    background: var(--yellow-color);

    color: #fff;

}

::selection {

    background: var(--yellow-color);

    color: #fff;

}

*,

*::after,

*::before {

    margin: 0;

    padding: 0;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

* {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

*:focus {

    outline: 0;

}

/* HTML5 display-role reset for older browsers */

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

menu,

nav,

section {

    display: block;

}

/* width */

::-webkit-scrollbar {

    width: .5vw;

}

/* Track */

::-webkit-scrollbar-track {

    background: #fff;

}

/* Handle */

::-webkit-scrollbar-thumb {

    background: var(--yellow-color);

}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    background: #dbaf00
}

html {

    font-size: 62.5%;

    scroll-behavior: smooth;

    overflow-x: hidden;

    scrollbar-color: var(--blue-color) #fff;

    scrollbar-width: normal;

}

body {

    overflow-x: hidden;

    scroll-behavior: smooth;

    position: relative;

    font-family: 'Bison', sans-serif;

    background-color: white;

}

body.no-scroll,

html.no-scroll {

    overflow: hidden;

}

img {

    max-width: 100%;

    user-drag: none;

    user-select: none;

    -moz-user-select: none;

    -webkit-user-drag: none;

    -webkit-user-select: none;

    -ms-user-select: none;

}

a {

    text-decoration: none;

    display: inline-block;

    color: inherit;

    cursor: pointer;

}

button {

    cursor: pointer;

    outline: none;

    border: none;

    font-family: inherit;

}

button[disabled] {

    cursor: default;

}

p {

    line-height: 1.7;

    color: var(--txt-color);

}

a {

    color: var(--txt-color);

}

ul,

ol {

    list-style: none;

}

input,

textarea {

    font-family: inherit;

    resize: none;

}

/* HIDE ARROWS ON NUMBER INPUTS */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

/* Firefox */

input[type=number] {

    -moz-appearance: textfield;

}

/* RESET */

/* UTILITIES */

:root {

    --yellow-color: #FFCB01;

    --blue-color: #029BD7;

    --black-color: #1A171B;

}

.container {

    padding-left: 3rem;

    padding-right: 3rem;

    max-width: 166rem;

    margin-left: auto;

    width: 100%;

    margin-right: auto;

}

h4,
h5 {

    font-family: 'Bison', sans-serif;

}

.hero-section {

    height: 100vh;

    width: 100%;


    display: flex;

    align-items: flex-start;

    justify-content: flex-end;

    flex-direction: column;


    position: relative;

}

.yellow-graphic {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.hero-section .background-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.background-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: none;
}

.fake-cursor {
    position: fixed;
    height: 13.6rem;
    width: 13.6rem;
    background-image: url('../images/hover-image.png');
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    transform: translate(-50%, -50%);
}

.hero-container {

    padding-bottom: 17rem;

}

.hero-corner-text {

    position: absolute;

    right: 17rem;

    bottom: 5rem;
    z-index: 3;

}

.hero-container h1 {

    font-size: 0.2rem;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, 50%);

    z-index: -1;

}

.hero-container-title {

    position: relative;

}

.plava-mrlja-hero {

    position: absolute;

    bottom: 0;

    transform: translateY(50%);

    left: 0;

}

.hero-container-text {

    display: flex;

    width: 100%;

    max-width: 77rem;

    gap: 3rem;

    margin-top: 5rem;

    margin-left: 11rem;

    justify-content: space-between;

}

.hero-container-text h4 {

    font-size: 6rem;

    line-height: 5.6rem;

    color: #fff;

    font-weight: 100;

}

.hero-container-text h4 b {

    font-family: 'Bison-Bold', sans-serif;

}

nav {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding-top: 1rem;

    z-index: 999;

    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;

}

nav.active {

    background-color: var(--blue-color);

    padding: 2rem 0rem;

    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);

}

.nav-container {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 3rem;

}

.nav-links-outer {

    width: 100%;

    max-width: 117rem;

    padding-top: 2rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition: padding 0.3s ease;

}

nav.active .nav-links-outer {

    padding: 0;

}

.social-links {

    width: 100%;

    max-width: 23rem;

    display: flex;

    justify-content: space-between;

    gap: 1rem;

}

.nav-links ul {

    display: flex;

    align-items: center;

    gap: 6rem;

}

.nav-links li {

    font-size: 2.8rem;

    font-family: 'Bison-Bold', sans-serif;

    color: #fff;

    text-transform: uppercase;

}

.nav-links li:last-child a {

    background-color: var(--yellow-color);

    color: var(--black-color);

    padding: 1.2rem 4rem;

    border-radius: 0.8rem;

}

.swiper-pagination-bullet {

    width: 1.5rem !important;

    height: 1.5rem !important;

    background-color: #fff !important;

}

.mainSlider .swiper-slide > p {

    font-size: 1.8rem;

    line-height: 2.8rem;

    color: #fff;

    text-align: center;

    margin: 0 auto;

    margin-bottom: 5rem;

    max-width: 100.5rem;

    font-family: "Inter", sans-serif;

}

.slider-title {

    margin: 0 auto;

    margin-bottom: 4rem;

    width: fit-content;

}

.slider-section {

    background-color: var(--blue-color);

}

.slider-video-container {

    max-width: 80rem;

    margin: 0 auto;

    position: relative;

}

.slider-video-container video {

    width: 100%;

    height: 100%;

    aspect-ratio: 16 / 9;

}

.slider-video-frame {

    position: absolute;

    top: -15px;

    left: 50px;

    z-index: -1;

}

.slider-video-frame img {

    max-width: initial;

}

.pravila-flex {

    display: flex;

    width: 100%;

    max-width: 133rem;

    margin: 0 auto;

    flex-direction: column;

}

.pravila-flex-top,
.pravila-flex-bottom {

    display: flex;

    justify-content: space-between;

    width: 100%;

    gap: 6rem;

}

.pravila-grid-card-image {

    margin-bottom: 2rem;

}

.pravila-grid-card p {

    font-size: 2.6rem;

    line-height: 3.2rem;

    color: #fff;

    max-width: 27rem;

    font-family: 'Bison-Bold', sans-serif;

}

.pravila-line {

    width: 100%;

    height: 1px;

    background-color: #fff;

    margin-bottom: 4.5rem;

    margin-top: 2rem;

    opacity: 0.5;

}

.pravila-flex-top > div:nth-child(2) {

    position: relative;

}

.pravila-flex-top > div:nth-child(2)::after {

    position: absolute;

    top: 0;

    right: 3rem;

    content: "";

    background-color: #fff;

    opacity: 0.5;

    width: 1px;

    height: 28rem;

}

.pravila-flex-bottom > div:first-child {

    position: relative;

}

.pravila-flex-bottom > div:first-child::after {

    position: absolute;

    top: -12rem;

    right: 2rem;

    content: "";

    background-color: #fff;

    opacity: 0.5;

    width: 1px;

    height: 35rem;

}

.pravila-flex-bottom > div,
.pravila-flex-top > div {

    width: 100%;

}

.pravila-flex-bottom > div:nth-child(3) {

    position: relative;

}

.pravila-flex-bottom > div:nth-child(3)::after {

    position: absolute;

    top: -13rem;

    right: 1rem;

    content: "";

    background-color: #fff;

    opacity: 0.5;

    width: 1px;

    height: 26rem;

}

.slider-image-double-container {

    display: flex;

    gap: 2rem;

    position: relative;

    max-width: 110rem;

    margin: 0 auto;

    margin-top: 10rem;

}

.slider-image-double-container-absolute {

    position: absolute;

    top: -5rem;

    right: 0;

    z-index: -1;

}

.slider-image-double-container-absolute img {

    width: initial;

}

.swiper-button-next,
.swiper-button-prev {

    color: #fff;

}

.mainSlider {

    padding-top: 5rem;

    padding-bottom: 10rem;

}

.slider-section {

    position: relative;

}

.plava-mrlja-slider {

    position: absolute;

    bottom: 0;

    left: 0;

    transform: translateY(50%);

}

.football-image {

    position: absolute;

    left: 0;

    top: 60%;

    transform: translateY(-50%);

}

.counter-section {

    padding-top: 15rem;

    padding-bottom: 27rem;

    position: relative;

}

.counter-container {

    display: flex;

    justify-content: space-between;

    position: relative;

    z-index: 1;

}

.counter-container-card {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.counter-container-card > div {

    margin-bottom: 5rem;

}

.counter-container-card p {

    font-size: 5rem;

    font-family: 'Bison-Bold', sans-serif;

    color: var(--black-color);

}

.football-splash {

    position: absolute;

    bottom: 0;

    right: 0;

}

.football-splash img {

    display: block;

}

.imas-li-ono-section {

    position: relative;

}

.imas-li-ono-container {

    display: flex;

    justify-content: space-between;

}

.imas-li-ono-container-image {

    position: relative;

    z-index: 1;

}

.imas-li-ono-container-image-absolute img {

    display: block;

}

.imas-li-ono-container-image-absolute {

    position: absolute;

    left: 0;

    top: -5rem;

    z-index: -1;

}

.imas-li-ono-container-text {

    background-color: var(--yellow-color);

    padding: 5rem 10rem 9rem 20rem;

    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);

    max-width: 120rem;

    width: 100%;

    margin-left: -20rem;

}

.imas-li-ono-container-text-title {

    margin-bottom: 3rem;

}

.imas-li-ono-container-text p {

    font-size: 1.8rem;

    line-height: 2.8rem;

    color: var(--txt-color);

    font-family: "Inter", sans-serif;

    margin-bottom: 3rem;

}

.imas-li-ono-container-text p a {

    transition: color 0.3s ease;

}

.imas-li-ono-container-text p a:hover {

    color: var(--blue-color);

}

.imas-li-ono-container-text p:last-child {

    margin-bottom: 0rem;

}

.prijavi-ekipu-button {

    margin-top: 0rem;

    width: 100%;

    max-width: 50rem;

    display: flex;

    position: relative;

    gap: 6rem;

}

.prijavi-ekipu-button a {

    color: #fff;

    background-color: var(--blue-color);

    width: 20rem;

    padding: 1.5rem 0rem;

    height: fit-content;

    border-radius: 0.8rem;

    display: flex;

    font-size: 2.8rem;

    line-height: 3rem;

    margin-top: 0rem;

    align-items: center;

    justify-content: center;

    font-family: 'Bison-Bold', sans-serif;

}

.imas-li-ono-container-image {

    margin-left: -8rem;

    margin-top: -3rem;

}

.prijavi-ekipu-button div {

    transform: translateY(-4rem);

    max-width: 16rem;

}

.imas-li-ono-section {

    margin-top: -3rem;

}

.imas-li-ono-section {

    margin-top: -3rem;

}

.imas-li-zuta-mrlja {

    position: absolute;

    bottom: -4rem;

    right: 12rem;

    transform: translateX(50%);

}

.raspored-turnira-container-flex {

    display: flex;

    justify-content: space-between;

    margin-bottom: 5rem;

}

.raspored-turnira-container-flex-text {

    max-width: 67rem;

    width: 100%;

}

.raspored-turnira-container-flex-text-title {

    margin-bottom: 4rem;

}

.raspored-turnira-section {

    padding-top: 16rem;

    padding-bottom: 3rem;

}

.raspored-turnira-container-flex-text > p {

    font-size: 1.8rem;

    line-height: 2.8rem;

    color: var(--black-color);

    margin-bottom: 3rem;

    font-family: "Inter", sans-serif;

}

.raspored-prijavi-ekipu {

    background-color: var(--yellow-color);

    padding: 1.5rem 4rem;

    width: fit-content;

    clip-path: polygon(1% 0, 98.5% 0, 100% 100%, 0% 100%);

}

.raspored-prijavi-ekipu p {

    font-size: 2.8rem;

    line-height: 2.8rem;

    color: var(--black-color);

    font-family: 'Bison-Bold', sans-serif;

    font-weight: 800;

}

.raspored-turnira-container-grid-cards-image img {

    display: block;

    width: 100%;

}

.raspored-turnira-container-grid-cards-text {

    padding: 3rem;

}

.raspored-turnira-container-grid-cards-title {

    margin-bottom: 2rem;

}

.raspored-turnira-container-grid-cards-info {

    margin-bottom: 1rem;

    display: flex;

}

.raspored-turnira-container-grid-cards-info div {

    margin-right: 2rem;

}

.raspored-turnira-container-grid-cards-info p {

    font-size: 1.8rem;

    line-height: 2.8rem;

    color: var(--black-color);

    font-family: "Inter", sans-serif;

}

.raspored-turnira-container-grid-cards {

    border-bottom: 3px solid var(--blue-color);

    box-shadow: 0.4rem 0.4rem 1.5rem 0rem rgba(0, 0, 0, 0.1);

}

.raspored-turnira-container-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 2.4rem;

    margin-top: 8rem;

}

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

}

.gallery-grid img {

    width: 100%;

    display: block;

}

.gallery-grid a {

    display: flex;

    position: relative;

}

.gallery-grid button {

    position: relative;

}

.wide-image {

    min-width: 70rem;

}

.gallery-card-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    background: rgb(2, 155, 215);

    background: linear-gradient(150deg, rgba(2, 155, 215, 0.6530987394957983) 30%, rgba(255, 203, 1, 0.6474964985994398) 100%);

    transition: opacity 0.3s ease;

}

.gallery-card-overlay:hover {

    opacity: 1;

}

.gallery-card-overlay::before {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    content: "";

    width: 4rem;

    height: 0.2rem;

    z-index: 1;

    background-color: #fff;

}

.gallery-card-overlay::after {

    position: absolute;

    left: 50%;

    top: 50%;

    z-index: 1;

    transform: translate(-50%, -50%);

    content: "";

    width: 0.2rem;

    height: 4rem;

    background-color: #fff;

}

.novosti-section {

    background-color: var(--blue-color);

    padding: 7rem 0rem;

}

.novosti-container {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.novosti-card-flex {

    display: flex;

    gap: 2.5rem;

}

.novosti-card {

    flex: 1;

}

.novosti-card-image {

    margin-bottom: 2.7rem;

}

.novosti-card-text div {

    max-height: 20rem;

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    margin-bottom: 3rem;

}

.novosti-card-text h4 {

    font-size: 2.4rem;

    line-height: 2.8rem;

    color: #fff;

    font-family: "Inter", sans-serif;

    margin-bottom: 3rem;

    min-height: 6rem;

}

.novosti-card-text {

    padding-left: 2.7rem;

    border-left: 1px solid #fff;

}

.novosti-card-text p {

    font-size: 1.8rem;

    line-height: 2.8rem;

    color: #fff;

    font-family: "Inter", sans-serif;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 4;

    overflow: hidden;

}

.novosti-card-text span {

    font-size: 1.8rem;

    line-height: 2.8rem;

    font-weight: 600;

    font-family: "Inter", sans-serif;

    color: #fff;

}

.novosti-card-text span svg {

    margin-left: 1rem;

}

.novosti-title {

    margin-bottom: 4rem;

}

.pogledaj-sve-novosti {

    margin-top: 5rem;

    background-color: var(--yellow-color);

    color: var(--black-color);

    font-size: 2.8rem;

    padding: 1.2rem 4rem;

    font-weight: 900;

    font-family: 'Bison-Bold', sans-serif;

    border-radius: 0.8rem;

}

.zabava-section {

    background-color: var(--yellow-color);

    position: relative;
    z-index: 2;

}

.container-right {

    padding-left: calc((100vw - 160rem) / 2);

    position: relative;

}

.container-left {

    padding-right: calc((100vw - 160rem) / 2);

    position: relative;

}

.zabava-text {

    padding: 10rem 0rem;

}

.zabava-container {

    display: flex;

    justify-content: space-between;

    gap: 5rem;

}

.zabava-text p {

    font-size: 1.8rem;

    line-height: 2.8rem;

    margin-bottom: 3rem;

    max-width: 58rem;

    font-family: "Inter", sans-serif;

}

.zabava-image {

    margin-bottom: -5rem;

}

.zabava-image img {

    display: block;

}

.football-splash-white {

    position: absolute;

    bottom: 15.2rem;

    left: 0;

}

.sponzori-section {

    padding: 14rem 0rem;
    position: relative;

}

.sponzori-section .background {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;



}

.sponzori-title {

    margin-bottom: 5rem;

}

.sponzori-container {

    display: flex;

    flex-direction: column;

    align-items: center;
    position: relative;
    z-index: 2;

}

footer {

    position: relative;

    background-color: var(--blue-color);

}

.footer-football {

    position: absolute;

    left: 0;

    bottom: 0rem;

}

.footer-football img {

    display: block;

}

.footer-container {

    display: flex;

    justify-content: space-between;

    padding-top: 5rem;

    height: 34rem;

}

.footer-3x3-logo {

    display: flex;

    flex-direction: column;

    align-items: center;

    transform: translateY(-16rem);

}

.footer-3x3-logo div {

    margin-bottom: 4rem;

}

.footer-3x3-logo > a {

    color: var(--black-color);

    background-color: var(--yellow-color);

    width: 20rem;

    padding: 1.5rem 0rem;

    height: fit-content;

    border-radius: 0.8rem;

    display: flex;

    font-size: 2.8rem;

    line-height: 3rem;

    margin-bottom: 5rem;

    align-items: center;

    justify-content: center;

    font-family: 'Bison-Bold', sans-serif;

}

.footer-3x3-logo p {

    font-family: 'Bison', sans-serif;

    font-size: 2.4rem;

    line-height: 2.8rem;

    color: #fff;

    font-weight: 100;

}

.footer-info-flex {

    display: flex;

    gap: 2.5rem;

    margin-bottom: 3rem;

    justify-content: flex-end;

}

.footer-info-flex a {

    font-size: 1.8rem;

    color: #fff;

    font-family: "Inter", sans-serif;

}

#raspored,
#novosti {

    scroll-margin-top: 3rem;

}

#football-3x3 {

    scroll-margin-top: 4rem;

}

#prijavi-se {

    scroll-margin-top: 16rem;

}

.footer-container > div {

    flex: 1;

}

.footer-social {

    margin-top: 4rem;

    display: flex;

    gap: 2.8rem;

    width: fit-content;

    margin-left: auto;

}

.footer-jelen-logo {

    transform: translateX(23rem);

}

.nav-logo {

    display: flex;

    gap: 6rem;

}

.nav-logo a {

    max-width: 13.5rem;

    transition: max-width 0.3s ease;

}

nav.active .nav-logo a {

    max-width: 6rem;

}

nav.inner .nav-logo a,
nav.inner .nav-logo div {

    max-width: 6rem;

}

.nav-logo div {

    max-width: 13.5rem;

    transition: max-width 0.3s ease;

}

nav.active .nav-logo div {

    max-width: 6rem;

}

.footer-blue-splash {

    position: absolute;

    top: 0;

    transform: translateY(-50%);

    left: 0;

}

.all-news-hero-title h1 {

    opacity: 0;

    pointer-events: none;

    position: absolute;

}

.all-news-hero {

    padding-top: 15rem;

    padding-bottom: 2rem;

    background-color: var(--blue-color);

    position: relative;

}

.all-news-hero-title {

    display: flex;

    justify-content: center;

    z-index: 1;

    position: relative;

}

.inner-hero-splash img {

    display: block;

}

.inner-hero-splash {

    position: absolute;

    left: 0;

    bottom: 0;

    transform: translateY(30%);

}

.all-news-grid-section {

    padding-top: 14rem;

    padding-bottom: 30rem;

}

.all-news-grid-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 2.4rem;

    row-gap: 9rem;

}

.all-news-grid-container .novosti-card-text {

    border-color: var(--black-color);

}

.all-news-grid-container .novosti-card-text h4,
.all-news-grid-container .novosti-card-text p,
.all-news-grid-container .novosti-card-text span {

    color: var(--black-color);

}

.single-news-hero {

    height: 50rem;

    background-color: var(--blue-color);

    position: relative;

}

.single-news-hero {

    display: flex;

    align-items: flex-end;

}

.single-news-hero img {

    display: block;

}

.single-new-hero-image {

    z-index: 1;

    position: relative;

    margin-bottom: -2rem;

}

nav.inner .nav-links-outer {

    padding: 0;

}

.single-news-main {

    padding: 13rem 0rem;

    padding-bottom: 23rem;

}

.single-news-main-container {

    max-width: 105rem;

    width: 100%;

    margin: 0 auto;

}

.single-news-main-image-flex {

    position: relative;

    display: flex;

    gap: 3.5rem;

    margin-bottom: 0rem;

    margin-top: 10rem;

}

.single-news-absolute-image {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: -1;

}

.single-news-main-container h1 {

    font-size: 8rem;

    line-height: 9rem;

    margin-bottom: 6rem;

    color: var(--blue-color);

    font-family: 'Bison-Bold', sans-serif;

    text-align: center;

}

.single-news-main-container p {

    font-size: 1.8rem;

    line-height: 2.8rem;

    color: var(--black-color);

    margin-bottom: 3rem;

    font-family: "Inter", sans-serif;

    text-align: center;

}

.single-news-main-image-flex > div:first-child {

    margin-top: -2.5rem;

}

img[alt="hero-naslov-mobile"] {

    display: none;

}

@media only screen and (max-width: 1330px) {

    .hero-corner-text {

        display: none;

    }

}

@media only screen and (max-width: 1330px) {

    .hero-container-text div {

        display: none;

    }

}

@media only screen and (max-width: 670px) {

    .hero-container-text {

        margin-left: 0rem;

    }

    img[alt="hero-naslov-mobile"] {

        display: block;

    }

    img[alt="hero-naslov"] {

        display: none;

    }

}

@media only screen and (max-width: 480px) {

    .hero-section {

        background-image: url('../images/3x3-hero-mobile.jpg');

        background-size: cover;

        justify-content: flex-start;

        padding-top: 23rem;

    }

    .hero-container-text h4 {

        font-size: 3rem;

        line-height: 3rem;

    }

    .hero-container {

        padding-bottom: 0rem;

    }

    .hero-container-text {

        margin-top: 2rem;

    }

}

@media only screen and (max-width: 1500px) {

    .swiper-button-prev,
    .swiper-button-next {

        display: none;

    }

}

@media only screen and (max-width: 1000px) {

    .pravila-flex-top,
    .pravila-flex-bottom {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

    }

    .pravila-flex-top > div:nth-child(2)::after,
    .pravila-line,
    .pravila-flex-bottom > div:first-child::after,
    .pravila-flex-bottom > div:nth-child(3)::after {

        display: none;

    }

}

@media only screen and (max-width: 480px) {

    .pravila-grid-card p {

        font-size: 1.5rem;

        line-height: 1.8rem;

    }

    .pravila-flex-top {

        margin-bottom: 6rem;

    }

    .slider-video-frame {

        left: 50%;

        transform: translateX(-50%);

        width: 100%;

    }

    .slider-video-frame img {

        max-width: 100%;

    }

    .mainSlider .swiper-slide > p {

        font-size: 1.6rem;

        line-height: 2.6rem;

    }

    .mainSlider {

        padding-bottom: 0rem;

    }

}

@media only screen and (max-width: 900px) {

    .counter-container-card p {

        font-size: 4rem;

    }

    .counter-container-card > div {

        max-height: 6rem;

    }

    .counter-container-card > div img {

        height: 100%;

    }

    .counter-container-card {

        margin-bottom: 3rem;

    }

}

@media only screen and (max-width: 480px) {

    .counter-container {

        flex-direction: column;

    }

    .counter-section {

        padding: 8rem 0rem;

    }

}

@media only screen and (max-width: 800px) {

    .imas-li-ono-container {

        display: flex;

        flex-direction: column-reverse;

    }

    .imas-li-ono-container-image-absolute {

        bottom: 0rem;

        top: unset;

    }

    .imas-li-ono-container-text {

        margin-left: 0rem;

        clip-path: unset;

        padding: 7rem 3rem 7rem 3rem;

    }

    .raspored-turnira-container-flex {

        flex-direction: column-reverse;

    }

}

@media only screen and (max-width: 480px) {

    .raspored-turnira-container-flex-text > p {

        font-size: 1.6rem;

        line-height: 2.6rem;

    }

    .raspored-turnira-section {

        padding-top: 7rem;

        padding-bottom: 0;

    }

    .raspored-turnira-container-flex-image {

        margin-top: 3rem;

    }

    .counter-container-card > div {

        margin-bottom: 0rem;

        height: 6rem;

    }

    .raspored-prijavi-ekipu p {

        font-size: 2.4rem;

    }

    .raspored-prijavi-ekipu {

        padding: 1.5rem 2rem;

    }

}

@media only screen and (max-width: 1150px) {

    .raspored-turnira-container-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}

@media only screen and (max-width: 900px) {

    .raspored-turnira-container-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}

@media only screen and (max-width: 700px) {

    .raspored-turnira-container-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media only screen and (max-width: 480px) {

    .raspored-turnira-container-grid {

        grid-template-columns: repeat(1, 1fr);

    }

}

@media only screen and (max-width: 1500px) {

    .wide-image {

        min-width: 55rem;

    }

}

@media only screen and (max-width: 1300px) {

    .wide-image {

        min-width: 48rem;

    }

}

@media only screen and (max-width: 1000px) {

    .wide-image {

        min-width: 37rem;

    }

}

@media only screen and (max-width: 850px) {

    .wide-image {

        min-width: 30rem;

    }

}

@media only screen and (max-width: 700px) {

    .wide-image {

        min-width: 22rem;

    }

}

.gallery-container-mobile {

    display: none;

}

@media only screen and (max-width: 550px) {

    .gallery-container {

        display: none;

    }

    .gallery-container-mobile {

        display: block;

    }

    .gallery-grid {

        grid-template-columns: repeat(1, 1fr);

    }

    .gallery-grid div {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

    }

}

.novosti-slider {

    width: 100%;

}

.novosti-card-image img {

    width: 100%;

    object-fit: cover;

    min-height: 24rem;

}

@media only screen and (max-width: 1670px) {

    .container-right {

        padding-left: 3rem;

    }

}

img[alt="3x3-zabava-title-mobile"] {

    display: none;

}

@media only screen and (max-width: 1000px) {

    .zabava-container {

        flex-direction: column-reverse;

    }

    .zabava-text {

        padding: 0rem;

        display: flex;

        flex-direction: column;

        align-items: center;

    }

    img[alt="3x3-zabava-title-mobile"] {

        display: block;

    }

    img[alt="3x3-zabava-title"] {

        display: none;

    }

    .zabava-text p {

        text-align: center;

    }

    .container-right {

        padding: 0rem 3rem;

    }

    .zabava-section {

        padding: 7rem 0rem;

    }

    .football-splash-white {

        display: none;

    }

}

.footer-3x3-logo.mobile {

    display: none;

}

@media only screen and (max-width: 480px) {

    .zabava-text p {

        font-size: 1.6rem;

        line-height: 2.6rem;

    }

    .zabava-title {

        margin-bottom: 3rem;

    }

}

@media only screen and (max-width: 1750px) {

    .footer-football {

        left: -10rem;

    }

}

@media only screen and (max-width: 1250px) {

    .footer-football {

        display: none;

    }

    .footer-jelen-logo {

        transform: translateX(0);

    }

}

.mobile-copyright {

    display: none;

}

@media only screen and (max-width: 700px) {

    .footer-container {

        flex-direction: column;

        height: auto;

        align-items: center;

    }

    .footer-3x3-logo {

        display: none;

    }

    .footer-3x3-logo.mobile {

        display: block;

        transform: translateY(0);

        margin-top: -13rem;

    }

    .mobile-copyright {

        display: block;

        position: relative;

        padding-top: 1.3rem;

        margin-top: 3rem;

    }

    .mobile-copyright::before {

        width: 3.5rem;

        height: 1px;

        background-color: #fff;

        position: absolute;

        top: 0;

        left: 50%;

        transform: translateX(-50%);

        content: "";

    }

    .mobile-copyright p {

        font-family: 'Bison', sans-serif;

        font-size: 1.8rem;

        color: #fff;

        line-height: 2.8rem;

    }

    .footer-info {

        display: flex;

        align-items: center;

        flex-direction: column;

        margin-top: 4rem;

    }

    footer {

        padding-bottom: 2rem;

    }

}

img[alt="news-template-mobile"] {

    display: none;

}

@media only screen and (max-width: 700px) {

    img[alt="news-template"] {

        display: none;

    }

    .single-news-hero img {

        min-height: 30rem;

        object-fit: cover;

    }

    img[alt="news-template-mobile"] {

        display: block;

    }

    .single-news-hero {

        height: unset;

        padding-top: 10rem;

    }

    .single-new-hero-image {

        margin-bottom: -8rem;

    }

    .single-news-main-container h1 {

        font-size: 3.2rem;

        line-height: 4rem;

        margin-bottom: 3rem;

    }

    .single-news-main-container p {

        font-size: 1.6rem;

        line-height: 2.6rem;

    }

    .single-news-main-image-flex > div:first-child {

        margin-top: 0rem;

    }

    .single-news-main-image-flex {

        flex-direction: column;

    }

    .single-news-main {

        padding-bottom: 5rem;

    }

}

@media only screen and (max-width: 1200px) {

    .all-news-grid-container {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media only screen and (max-width: 600px) {

    .all-news-grid-container {

        grid-template-columns: repeat(1, 1fr);

    }

    .all-news-grid-section {

        padding-top: 7rem;

        padding-bottom: 7rem;

    }

}

.hamburger {

    display: none;

}

@media only screen and (max-width: 1080px) {

    .social-links {

        display: none;

    }

    .nav-links li {

        display: none;

    }

    .hamburger {

        display: flex;

        width: 4rem;

        height: 2rem;

        justify-content: space-between;

        flex-direction: column;

        background-color: transparent;

    }

    .hamburger span {

        height: 2px;

        display: block;

        width: 100%;

        z-index: 1;

        background-color: #fff;

    }

    .hamburger span:first-child {

        transform: translateY(-50%);

    }

    .hamburger span:last-child {

        transform: translateY(50%);

    }

    .nav-container {

        align-items: center;

    }

}

@media only screen and (max-width: 480px) {

    .nav-links-outer {

        width: fit-content;

        padding: 0rem !important;

    }



    .nav-logo a {

        max-width: 4.5rem !important;



    }

    .sponzori-section {

        padding: 7rem 0rem;

    }

    .nav-logo {

        align-items: center;

        gap: 2rem;

    }

    .all-news-hero {

        padding-top: 10rem;

    }

    .zabava-text p:last-child {

        margin-bottom: 0rem;

    }

    .nav.active .nav-logo div {

        max-width: 5rem;

    }

    .nav-logo div {

        max-width: 5rem;

    }

    .hamburger {

        height: 1.3rem;

        width: 2rem;

    }

    .zabava-image {

        margin-bottom: 0rem;

    }

    .nav-links li {

        font-size: 2.6rem;

    }

    .nav-links li:last-child {

        padding: 0.5rem 2rem;

    }

    .novosti-card-text p {

        -webkit-line-clamp: 3;

    }

}

.mobile-popout {

    display: none;

}

@media only screen and (max-width: 1080px) {

    .mobile-popout {

        display: flex;

        height: 100vh;

        width: 100%;

        background: rgb(2, 155, 215);

        background: linear-gradient(90deg, rgba(2, 155, 215, 1) 0%, rgba(63, 193, 244, 1) 100%);

        position: fixed;

        top: 0;

        left: 0;

        flex-direction: column;

        align-items: center;

        z-index: 99;

        justify-content: center;

        padding: 3rem 7rem 7.5rem 7rem;

        transform: translateX(100%);

        transition: transform 0.5s ease;

    }

    .mobile-popout.opened {

        transform: translateX(0);

    }

    .mobile-links ul li {

        font-size: 3rem;

        color: #fff;

        margin-bottom: 1rem;

        text-align: center;

    }

    .mobile-logo {

        margin-bottom: 3rem;

    }

    .mobile-social {

        margin-top: 2rem;

    }

    .mobile-social h3 {

        font-size: 3rem;

        color: #fff;

        text-align: center;

        margin-bottom: 2rem;

    }

    .mobile-social div {

        display: flex;

        gap: 3rem;

    }

    .close-popout {

        position: absolute;

        top: 0;

        right: 0;

        color: #fff;

        background: transparent;

        top: 3rem;

        right: 3rem;

        font-family: "Inter", sans-serif;

        font-size: 3rem;

    }

}

img[alt="zabava-image-mobile"] {

    display: none;

}

@media only screen and (max-width: 480px) {



    .mobile-popout {

        align-items: flex-start;

        justify-content: flex-start;

    }

    .mobile-links ul li {

        text-align: left;

        font-family: 'Bison-Bold', sans-serif;

        font-size: 2.8rem;

        margin-bottom: 3rem;

    }

    .mobile-logo img {

        max-width: 10rem;

    }

    .mobile-links ul li:last-child {

        background-color: var(--yellow-color);

        color: var(--black-color);

        padding: 0.5rem 2.4rem;

        padding-bottom: 0.9rem;

        border-radius: 0.8rem;

        font-size: 2.4rem;

        font-family: 'Bison-Bold', sans-serif;

        text-align: center;

        margin-top: 5rem;

    }

    .mobile-social h3 {

        text-align: left;

    }

    .imas-li-ono-container-image {

        margin-top: -9rem;

    }

    .raspored-turnira-container-grid-cards {

        display: flex;

    }

    .raspored-turnira-container-grid-cards-image {

        max-width: 16rem;

    }

    .raspored-turnira-container-grid-cards-image img {

        height: 100%;

        object-fit: cover;

    }

    .raspored-turnira-container-grid-cards-text {

        padding: 2rem;

    }

    .raspored-turnira-container-grid-cards-title {

        max-width: 15rem;

    }

    .zabava-section {

        padding-top: 0rem;

    }

    .zabava-section .container-right {

        padding: 0rem;

    }

    .zabava-image img {

        width: 100%;

    }

    .footer-social {

        margin-left: unset;

    }

    .zabava-container {

        gap: 0rem;

    }

    .zabava-text {

        padding: 0rem 3rem;

    }

}

@media only screen and (min-width: 1080px) {

    .nav-links li a,
    .pogledaj-sve-novosti,
    .footer-3x3-logo a {

        transition: color 0.3s ease, background-color 0.3s ease;

    }

    .nav-links li:not(:last-child) a:hover {

        color: var(--yellow-color);

    }

    .nav-links li:last-child a:hover {

        color: var(--yellow-color);

        background-color: #fff;

    }

    .social-links a,
    .footer-social a {

        transition: transform 0.3s ease;

    }

    .social-links a:hover,
    .footer-social a:hover {

        transform: scale(1.2);

    }

    .prijavi-ekipu-button a {

        transition: color 0.3s ease, background-color 0.3s ease;

    }

    .prijavi-ekipu-button a:hover {

        color: var(--blue-color);

        background-color: #fff;

    }

    .novosti-card {

        cursor: pointer;

    }

    .novosti-card-text h4,
    .novosti-card-text p,
    .novosti-card-text span {

        transition: color 0.3s ease;

    }

    .novosti-card-text {

        transition: border-color 0.3s ease;

    }

    .novosti-card:hover .novosti-card-text h4,
    .novosti-card:hover .novosti-card-text p,
    .novosti-card:hover .novosti-card-text span {

        color: var(--yellow-color);

    }

    .novosti-card:hover .novosti-card-text {

        border-color: var(--yellow-color);

    }

    .novosti-card-text span svg path {

        transition: fill 0.3s ease;

    }

    .pogledaj-sve-novosti:hover,
    .footer-3x3-logo a:hover {

        color: var(--yellow-color);

        background-color: #fff;

    }

    .novosti-card:hover .novosti-card-text span svg path {

        fill: var(--yellow-color);

    }

    .footer-info-flex a {

        transition: color 0.3s ease;

    }

    .footer-info-flex a:hover {

        color: var(--yellow-color);

    }

}

/* font-family: 'Bison', sans-serif;

font-family: 'HARDLINERS', sans-serif;

font-family: "Inter", sans-serif; */
.swiper-sponsors {
    margin-bottom: 7.5rem;

}

.swiper-sponsors .swiper-slide {
    display: flex;
    justify-content: center;
    height: auto;
    align-items: center;
}

.swiper-sponsors .swiper-slide img {
    max-width: 20rem;
}

.sportvision-logo {
    position: relative;
}



.sponzori-section .sponzori-title {
    padding-right: 2rem;
    padding-left: 2rem;
}

.gradovi {
    width: 100%;
    display: block;
    position: absolute;
    inset: 0;

}

.gradovi div,
.gradovi img {
    position: absolute;
    cursor: pointer;

}

.mapa-gradovi-container {
    position: relative;
}



.gradovi .banjaluka {
    left: 28%;
    top: 16%;
    width: 23%;

}

.gradovi .prijedor {

    width: 17%;
    left: 16%;
    top: 2%;

}

.gradovi .srbac {
    width: 14%;
    left: 29%;
    top: -2%;
}

.gradovi .prnjavor {
    position: absolute;

    width: 17%;
    left: 37%;
    top: 9%;
}

.gradovi .derventa {
    position: absolute;

    width: 17%;
    left: 46%;
    top: 2%;
}

.gradovi .teslic {
    position: absolute;

    width: 17%;

}

.gradovi .teslic {
    position: absolute;

    width: 17%;
    left: 50%;
    top: 20%;
}

.gradovi .odzak {
    position: absolute;

    width: 16%;
    left: 61%;
    top: 8%;
}

.gradovi .samac {
    position: absolute;

    width: 17%;
    left: 66%;
    top: 2%;

}

.gradovi .brcko {
    position: absolute;

    width: 10%;
    left: 70%;
    top: 10%;
}

.gradovi .ugljevik {
    position: absolute;
    width: 17%;
    left: 81%;
    top: 16%;

}

.gradovi .bijeljina {
    position: absolute;
    width: 20%;
    left: 87%;
    top: 12%;

}

.gradovi .text {
    width: unset;


}

.prijedor .text,
.banjaluka .text,
.srbac .text,
.prnjavor .text {
    top: 5.5rem;
}

.gradovi .pin {
    cursor: pointer;
}

.derventa .text,
.ugljevik .text,
.bijeljina .text,
.brcko .text {
    top: 5.5rem;

}

.teslic .text,
.odzak .text {
    top: 5rem;
}

.samac .text {
    top: 2rem;
    left: 3rem;
}
@media only screen and (max-width: 480px) {
    .swiper-sponsors .swiper-wrapper{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
    .swiper-sponsors .swiper-slide img{
        inset: 0;
        height: fit-content;
        width: 100%;
    }
     .swiper-sponsors .swiper-slide{
         align-items: center;
     }
}