@font-face {
  font-family: "Filson Pro";
  src:
    url("../fonts/FilsonProLight.woff2") format("woff2"),
    url("../fonts/FilsonProLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Filson Pro";
  src:
    url("../fonts/FilsonProRegular.woff2") format("woff2"),
    url("../fonts/FilsonProRegular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Filson Pro";
  src:
    url("../fonts/FilsonProBold.woff2") format("woff2"),
    url("../fonts/FilsonProBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fluid typography - scales from 768px to 1920px */
  --font-size-hero: clamp(1.125rem, 0.5rem + 1.63vw, 1.875rem);
  /* 18px -> 30px */
  --font-size-benefiti: clamp(1.75rem, 0.5rem + 3.26vw, 3rem);
  /* 28px -> 48px */
  --font-size-why-zimska: clamp(1.125rem, 0.375rem + 1.96vw, 2.25rem);
  /* 18px -> 36px */
  --font-size-prijedlozi: clamp(1.25rem, 0.5rem + 1.96vw, 1.875rem);
  /* 20px -> 30px */
  --font-size-heading-large: clamp(1.75rem, 0.5rem + 3.26vw, 3rem);
  /* 28px -> 48px */
  --font-size-heading-medium: clamp(1.5rem, 0.5rem + 2.61vw, 2.5rem);
  /* 24px -> 40px */
  --font-size-footer: clamp(1.75rem, 0.5rem + 3.26vw, 2.25rem);
  /* 28px -> 36px */

  /* Fluid spacing */
  --padding-section: clamp(3.75rem, 2.5rem + 3.26vw, 5.625rem);
  /* 60px -> 90px */
  --padding-footer: clamp(3.75rem, 3.75rem + 0vw, 3.75rem);
  /* 60px -> 60px */

  /* Fluid container - eliminates Bootstrap breakpoint jumps */
  --container-max-width: clamp(45rem, 30rem + 39.13vw, 71.25rem);
  /* 720px -> 1140px */
  --container-padding: clamp(0.75rem, 0.5rem + 0.65vw, 1rem);
  /* 12px -> 16px */

  /* Fluid heights */
  --swiper-height: clamp(25vh, 20vh + 1.3vw, 30vh);
  /* 25vh -> 30vh */
  --prijedlozi-height: clamp(31.25rem, 25rem + 16.3vw, 43.75rem);
  /* 500px -> 700px */
  --prijedlozi-img-height: clamp(31.25rem, 25rem + 16.3vw, 41.5625rem);
  /* 500px -> 665px */
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  overflow-x: hidden;
  font-family: "Filson Pro", sans-serif;
  background: #000;
}

/* Override Bootstrap container for fluid scaling */
.container {
  max-width: var(--container-max-width) !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .container {
    width: var(--container-max-width) !important;
  }
}

/* VIDEO SECTION */
.video video {
  display: block;
  height: auto;
  vertical-align: middle;
  width: 100%;
}

/* SWIPER */
.swiper.mySwiper {
  width: 100%;
  height: 85%;
}

.swiper.mySwiper.text-on-image {
  position: absolute;
  left: 50%;
  top: 65%;
  transform: translate(-50%, -50%);
}

.swiper.mySwiper p {
  font-size: var(--font-size-hero);
  font-weight: 300;
  line-height: normal;
  max-width: clamp(37.5rem, 25rem + 32.61vw, 53.125rem);
  /* 600px -> 850px */
  margin: 0 auto;
}

.swiper.mySwiper p:first-child {
  margin-bottom: 1rem;
}

.swiper.mySwiper p:last-child {
  margin-bottom: 0;
}

.swiper-slide.mySwiper {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.swiper.prijedlozi {
  height: var(--prijedlozi-height);
  width: 100%;
  color: #fff;
}

.swiper.benefiti-swiper p {
  font-size: var(--font-size-benefiti);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  max-width: clamp(50rem, 37.5rem + 32.61vw, 65.625rem);
  /* 800px -> 1050px */
  text-align: right;
}

.swiper.benefiti-swiper {
  width: 100%;
  height: 300px;
}

.prijedlozi img {
  border-radius: 1rem;
  max-height: var(--prijedlozi-img-height);
}

body .text-light-custom {
  font-weight: 300 !important;
}

body .text-regular-custom {
  font-weight: 400 !important;
}

body .text-bold-custom {
  font-weight: 700 !important;
}

.text-on-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.why-zimska {
  /* position: absolute;
  right: calc(var(--bs-gutter-x) * 0.5);
  top: 0; */
  color: #fff;
  text-align: right;
  font-size: var(--font-size-why-zimska);
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
}

.swiper.prijedlozi p {
  font-size: var(--font-size-prijedlozi);
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  max-width: clamp(18.75rem, 12.5rem + 16.3vw, 25rem);
  /* 300px -> 400px */
}

.box-heading span {
  color: #fff;
  font-size: var(--font-size-heading-large);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.box-heading p {
  color: #fff;
  font-size: var(--font-size-heading-medium);
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
}

.p-90 {
  padding-top: var(--padding-section);
  padding-bottom: var(--padding-section);
}

.p-60 {
  padding-top: var(--padding-footer);
  padding-bottom: var(--padding-footer);
}

footer p {
  color: #fff;
  text-align: center;
  font-size: var(--font-size-footer);
  font-style: normal;
  line-height: normal;
  text-transform: uppercase;
}

footer p a {
  color: #fff;
  text-decoration: none;
}

footer span {
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

.zimska-idila {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  max-width: clamp(18.75rem, 12.5rem + 16.3vw, 31.25rem);
  /* 300px -> 500px */
  height: auto;
}

.prijedlozi-mobile img {
  height: clamp(25rem, 18.75rem + 16.3vw, 31.25rem);
  /* 400px -> 500px */
  width: 100%;
  object-fit: cover;
}

.prijedlozi-mobile .swiper-button-prev::after,
.benefiti-swiper-mobile .swiper-button-prev::after {
  background-image: url("../arrow-prev.png");
}

.prijedlozi-mobile .swiper-button-next::after,
.benefiti-swiper-mobile .swiper-button-next::after {
  background-image: url("../arrow-next.png");
}

.mySwiper .swiper-button-next::after {
  background-image: url("../arrow-white.png");
}

.mySwiper .swiper-button-prev::after {
  background-image: url("../arrow-white.png");
}

.benefiti-swiper .swiper-button-next::after {
  background-image: url("../arrow-white.png");
}

.benefiti-swiper .swiper-button-prev::after {
  background-image: url("../arrow-white.png");
}

.prijedlozi-mobile .swiper-button-next::after,
.prijedlozi-mobile .swiper-button-prev::after,
.benefiti-swiper-mobile .swiper-button-next::after,
.benefiti-swiper-mobile .swiper-button-prev::after {
  content: "";
  display: block;
  width: clamp(7.5rem, 5rem + 6.52vw, 11.875rem);
  /* 120px -> 190px */
  height: clamp(2rem, 1.5rem + 1.3vw, 2.5rem);
  /* 32px -> 40px */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-family: none;
  color: transparent;
}

.mySwiper .swiper-button-next::after,
.mySwiper .swiper-button-prev::after,
.benefiti-swiper .swiper-button-next::after,
.benefiti-swiper .swiper-button-prev::after {
  content: "";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  font-family: none;
  color: transparent;
  width: clamp(2.5rem, 1.875rem + 1.63vw, 3.125rem);
  /* 40px -> 50px */
  height: clamp(2rem, 1.5rem + 1.3vw, 2.5rem);
  /* 32px -> 40px */
}

.mySwiper .swiper-button-prev {
  left: 46%;
  top: 73%;
  width: clamp(2.5rem, 1.875rem + 1.63vw, 3.125rem);
  /* 40px -> 50px */
  rotate: 180deg;
}

.mySwiper .swiper-button-next {
  left: 54%;
  top: 73%;
  width: clamp(2.5rem, 1.875rem + 1.63vw, 3.125rem);
  /* 40px -> 50px */
}

.benefiti-swiper .swiper-button-prev {
  left: auto;
  bottom: 1rem;
  top: auto;
  width: clamp(2.5rem, 1.875rem + 1.63vw, 3.125rem);
  /* 40px -> 50px */
  rotate: 180deg;
  right: 10%;
}

.benefiti-swiper .swiper-button-next {
  left: auto;
  bottom: 1rem;
  top: auto;
  width: clamp(2.5rem, 1.875rem + 1.63vw, 3.125rem);
  /* 40px -> 50px */
}

.prijedlozi-mobile .swiper-button-next {
  bottom: 0;
  top: auto;
  width: clamp(5rem, 3.75rem + 3.26vw, 6.25rem);
  /* 80px -> 100px */
  left: 35%;
}

.prijedlozi-mobile .swiper-button-prev {
  bottom: 0;
  top: auto;
  width: clamp(5rem, 3.75rem + 3.26vw, 6.25rem);
  /* 80px -> 100px */
  left: 0;
}

.benefiti-swiper-mobile .swiper-button-next {
  bottom: 0;
  top: auto;
  width: clamp(5rem, 3.75rem + 3.26vw, 6.25rem);
  /* 80px -> 100px */
  right: 0;
}

.benefiti-swiper-mobile .swiper-button-prev {
  bottom: 0;
  top: auto;
  width: clamp(5rem, 3.75rem + 3.26vw, 6.25rem);
  /* 80px -> 100px */
  right: 35%;
  left: auto;
}

.swiper.prijedlozi-mobile {
  padding-bottom: 3rem;
}

.prijedlozi-mobile img {
  border-radius: 1rem;
  width: 100%;
}

/* Desktop optimizations - maintain structure above 768px */
@media (min-width: 1300px) {
  .hero .bg-mob img {
    max-height: clamp(50rem, 37.5rem + 32.61vw, 62.5rem);
    /* 800px -> 1000px */
    width: 100%;
    object-fit: cover;
  }
}

@media (min-width: 768px) and (max-width: 1300px) {
  .hero .bg-mob img {
    min-height: clamp(40.625rem, 31.25rem + 24.46vw, 56.25rem);
    /* 650px -> 900px */
    object-fit: cover;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {}

@media (min-width: 768px) and (max-width: 992px) {
  .why-zimska {
    top: 5%;
    font-size: clamp(1rem, 0.625rem + 0.82vw, 1.125rem);
    right: calc(var(--bs-gutter-x) * 0.5);
  }

}

/* Mobile breakpoint - structural changes only below 768px */
@media (max-width: 767px) {
  .prijedlozi-mobile .swiper-slide p {
    font-size: clamp(1rem, 0.75rem + 0.65vw, 1.25rem);
    line-height: normal;
  }

  .box-heading span,
  footer p,
  .swiper.benefiti-swiper-mobile p {
    font-size: clamp(1.2rem, 0.75rem + 0.82vw, 1.75rem);
    line-height: normal;
  }

  .swiper.benefiti-swiper-mobile p {
    margin-bottom: 1.5rem;
  }

  .box-heading p {
    font-size: clamp(1rem, 0.625rem + 0.98vw, 1.5rem);
  }

  .swiper.mySwiper p {
    font-size: clamp(0.9375rem, 0.625rem + 0.82vw, 1.125rem);
  }

  .swiper.mySwiper {
    width: 80%;
    height: 33%;
  }

  .hero .bg-mob img {
    height: 700px;
    width: 100%;
    object-fit: cover;
  }


  .swiper.benefiti-swiper-mobile {
    text-align: end;
    height: 120px;
  }

  .benefiti .text-on-image {
    top: 55%;
  }

  .why-zimska {
    top: 63%;
    font-size: clamp(0.9375rem, 0.625rem + 0.82vw, 1.125rem);
    right: calc(var(--bs-gutter-x) * 0.5);
  }

  .mySwiper {
    height: auto !important;
  }

  .mySwiper .swiper-wrapper {
    display: block;
    transform: none !important;
  }

  .mySwiper .swiper-slide {
    height: auto !important;
    display: block;
    opacity: 1 !important;
    transform: none !important;
    margin-bottom: 1.5rem;
  }

  .zimska-idila {
    top: 20%;
    max-width: clamp(12.5rem, 9.375rem + 8.15vw, 18.75rem);
  }
}

/* Fine-tune for very small mobile devices */
@media (max-width: 400px) {

  .box-heading span,
  footer p,
  .swiper.benefiti-swiper-mobile p {
    font-size: clamp(1rem, 0.625rem + 0.65vw, 1.375rem);
    line-height: normal;
  }
}