/****** FONT START ******/
/* PRIMARY FONT FAMILY START */
@font-face {
  font-family: OpenSans-Light;
  font-display: swap;
  src: url(fonts/OpenSans/OpenSans-Light.ttf) format("truetype");
}

@font-face {
  font-family: OpenSans-Regular;
  font-display: swap;
  src: url(fonts/OpenSans/OpenSans-Regular.ttf) format("truetype");
}

@font-face {
  font-family: OpenSans-Medium;
  font-display: swap;
  src: url(fonts/OpenSans/OpenSans-Medium.ttf) format("truetype");
}

@font-face {
  font-family: OpenSans-SemiBold;
  font-display: swap;
  src: url(fonts/OpenSans/OpenSans-SemiBold.ttf) format("truetype");
}

@font-face {
  font-family: OpenSans-Bold;
  font-display: swap;
  src: url(fonts/OpenSans/OpenSans-Bold.ttf) format("truetype");
}

@font-face {
  font-family: OpenSans-ExtraBold;
  font-display: swap;
  src: url(fonts/OpenSans/OpenSans-ExtraBold.ttf) format("truetype");
}

/* PRIMARY FONT FAMILY END */

/* SECONDARY FONT FAMILY START */
@font-face {
  font-family: Montserrat-Regular;
  font-display: swap;
  src: url(fonts/BebasNeue/BebasNeue-Regular.ttf) format("truetype");
}

@font-face {
  font-family: Montserrat-Regular-2;
  font-display: swap;
  src: url(fonts/Montserrat/Montserrat-Regular.ttf) format("truetype");
}

@font-face {
  font-family: Montserrat-Medium;
  font-display: swap;
  src: url(fonts/Montserrat/Montserrat-Medium.ttf) format("truetype");
}

@font-face {
  font-family: Montserrat-SemiBold;
  font-display: swap;
  src: url(fonts/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
}

@font-face {
  font-family: Montserrat-Bold;
  font-display: swap;
  src: url(fonts/Montserrat/Montserrat-Bold.ttf) format("truetype");
}

@font-face {
  font-family: Montserrat-ExtraBold;
  font-display: swap;
  src: url(fonts/Montserrat/Montserrat-ExtraBold.ttf) format("truetype");
}

/* SECONDARY FONT FAMILY END */
/****** FONT END ******/

/****** ROOT START ******/
:root {
  /* COLOR START */
  --primary: #232222;
  --primary-light: ;
  --primary-lighter: ;

  --secondary: #c1872a;
  --secondary-light: #ede2d6;
  --secondary-lighter: #f8f2e9;
  --secondary-dark: #f6d8ba;
  --secondary-darker: #ffbe7f;

  --tertiary: #5f8c80;
  --tertiary-light: #b1c6c3;
  --tertiary-lighter: ;

  --custom-color-1: ;

  --gray: #eee5da;
  --gray-light: #f7f7f7;
  --gray-lighter: #f3ece2;
  --gray-dark: ;

  --white: #fff;
  --black: ;

  --text-primary: #232222;
  --text-secondary: #c1872a;
  --text-tertiary: #5f8c80;
  --text-gray: ;
  --text-gray-light: ;
  --text-white: #fff;

  --border-primary: #232222;
  --border-secondary: #c1872a;
  --border-tertiary: #5f8c80;
  --border-gray: #d3d3d3;
  --border-gray-light: #f4f4f4;
  --border-gray-lighter: ;
  --border-white: #fff;
  --border-black: ;
  /* COLOR END */

  /* FONT START */
  --font-text: 16px;
  --font-text-mobile: 15px;
  /* FONT END */

  /* FONT FAMILY START */
  --font-family: OpenSans-Light, sans-serif;
  /* FONT FAMILY END */

  /* FILTER START */
  --filter-primary: invert(9%) sepia(5%) saturate(0%) hue-rotate(170deg)
    brightness(89%) contrast(87%);
  --filter-secondary: invert(19%) sepia(75%) saturate(3904%) hue-rotate(341deg)
    brightness(81%) contrast(91%);
  --filter-tertiary: ;
  --filter-gray: invert(92%) sepia(7%) saturate(28%) hue-rotate(316deg)
    brightness(81%) contrast(84%);
  --filter-white: invert(100%);
  --filter-black: invert(0%);
  /* FILTER END */

  /* TRANSITION START */
  --transition-all: all 0.3s ease-out;
  --transition-color: color 0.3s ease-out;
  --transition-margin: margin 0.3s ease-out;
  --transition-transform: transform 0.5s ease-out;
  --transition-height: height 0.3s ease-out;
  /* TRANSITION END */

  /* MARGIN TOP START */
  --margin-top: 85px;
  --margin-top-fixed: 85px;
  --margin-top-mobile: 70px;
  --margin-top-mobile-fixed: 70px;
  /* MARGIN TOP END */

  /* BOX SHADOW START */
  --box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
  --box-shadow-bottom: rgb(0 0 0 / 12%) 0px 1px 5px;
  /* BOX SHADOW END */

  /* ROUNDED START */
  --rounded: 3px;
  --rounded-large: 8px;
  --rounded-larger: 11px;
  /* ROUNDED END */

  --overlay: rgba(0, 0, 0, 0.65);
}

/****** ROOT END ******/

/****** DEFAULT START ******/
/* * {
    user-select: none !important;
} */

html {
  font-size: var(--font-text);
  overscroll-behavior: none;
  scrollbar-gutter: stable;
}

body {
  background-color: var(--gray-lighter);
  color: var(--text-primary);
  font-family: var(--font-family);
  line-height: 1.6;
  /* letter-spacing: 1.4px; */
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
}

/****** DEFAULT END ******/

@media (min-width: 1400px) {
  html {
    font-size: var(--font-text);
    overscroll-behavior: none;
  }
}

/****** SCROLL BAR START ******/
@media (min-width: 991px) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--gray) var(--gray-lighter);
  }

  *::-webkit-scrollbar {
    width: 13px;
  }

  *::-webkit-scrollbar-track {
    background: var(--gray);
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--gray);
    border-radius: 20px;
    border: 3px solid var(--gray);
  }
}

/****** SCROLL BAR END ******/

/****** CUSTOM START ******/
.sticky-top {
  top: calc(var(--margin-top-fixed) + 3rem) !important;
}

.transition-icon img {
  transition: transform 0.3s ease-out;
}

.transition-icon:hover img {
  transform: rotate(45deg);
}

.h-1 {
  height: 1px;
}

.user-select-none {
  user-select: none;
}

.max-w-unset {
  max-width: unset !important;
}

.scroll-lock {
  overflow: hidden;
}

.text-center-inner * {
  text-align: center !important;
}

.white-normal {
  white-space: normal;
}

.white-nowrap {
  white-space: nowrap;
}

.object-cover {
  object-fit: cover;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-10 {
  z-index: 10;
}

.z-100 {
  z-index: 100;
}

.z-1000 {
  z-index: 10000;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.pointer-none {
  pointer-events: none !important;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--overlay);
}

.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.w-fit {
  width: fit-content;
}

.title-in-text p strong {
  font-size: 20px !important;
  line-height: 27px !important;
  font-family: OpenSans-Medium, sans-serif;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.text-not-last p:last-child {
  margin-bottom: 0 !important;
}

.text-align-last-center {
  text-align-last: center !important;
}

.text-justify {
  text-align: justify;
}

.border-divider {
  background-color: var(--border-gray-lighter);
  width: 100%;
  height: 1px;
}

.ls-none {
  list-style: none;
}

.ls-dist {
  list-style-type: disc;
}

.m-top {
  margin-top: var(--margin-top);
  transition: var(--transition-margin);
}

.m-top.fixed {
  margin-top: var(--margin-top-fixed);
  transition: var(--transition-margin);
}

/****** CUSTOM END ******/

/****** WEBKIT START ******/
.webkit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.webkit-1 {
  -webkit-line-clamp: 1;
}

.webkit-2 {
  -webkit-line-clamp: 2;
}

.webkit-3 {
  -webkit-line-clamp: 3;
}

.webkit-4 {
  -webkit-line-clamp: 4;
}

.webkit-5 {
  -webkit-line-clamp: 5;
}

.webkit-6 {
  -webkit-line-clamp: 6;
}

.webkit-7 {
  -webkit-line-clamp: 7;
}

.webkit-8 {
  -webkit-line-clamp: 8;
}

/****** WEBKIT END ******/

/****** FONT FAMILY START ******/
/* PRIMARY START */
.ff-p-light {
  font-family: OpenSans-Light, sans-serif;
}

.ff-p-regular {
  font-family: OpenSans-Regular, sans-serif;
}

.ff-p-medium {
  font-family: OpenSans-Medium, sans-serif;
}

.ff-p-semi {
  font-family: OpenSans-SemiBold, sans-serif;
}

.ff-p-bold {
  font-family: OpenSans-Bold, sans-serif;
}

.ff-p-extra {
  font-family: OpenSans-ExtraBold, sans-serif;
}

/* PRIMARY END */

/* SECONDARY START */
.ff-s-regular {
  font-family: Montserrat-Regular, sans-serif;
}

.ff-s-regular-2 {
  font-family: Montserrat-Regular-2, sans-serif;
}

.ff-s-medium {
  font-family: Montserrat-Medium, sans-serif;
}

.ff-s-semi {
  font-family: Montserrat-SemiBold, sans-serif;
}

.ff-s-bold {
  font-family: Montserrat-Bold, sans-serif;
}

.ff-s-extra {
  font-family: Montserrat-ExtraBold, sans-serif;
}

/* SECONDARY END */
/****** FONT FAMILY END ******/

/****** FONT SIZE START ******/
.fs-6xl {
  font-size: 95px;
  line-height: 105px;
}

.fs-5xl {
  font-size: 70px;
  line-height: 80px;
}

.fs-4xl {
  font-size: 60px;
  line-height: 65px;
}

.fs-3xl {
  font-size: 48px;
  line-height: 1.3;
}

.fs-xxl {
  font-size: 42px;
  line-height: 1.3;
}

.fs-xl {
  font-size: 32px;
  line-height: 1.3;
}

.fs-lg {
  font-size: 24px;
  line-height: 1.6;
}

.fs-md {
  font-size: 20px !important;
  line-height: 1.6 !important;
}

.fs-xmd {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

.fs-sm {
  font-size: 16px;
  line-height: 1.6;
}

.fs-xsm {
  font-size: 14px;
  line-height: 1.6;
}

.fs-xxsm {
  font-size: 13px;
  line-height: 1.6;
}

.fs-xxxsm {
  font-size: 11px;
  line-height: 1.6;
}

/****** FONT SIZE END ******/

/****** BACKGROUND START ******/
.bg-1 {
  background-color: #131313;
}

.bg-2 {
  background-color: #242321;
}

.bg-3 {
  background-color: #222426;
}

.bg-4 {
  background-color: #615e59;
}

.bg-none {
  background: none;
}

/* PRIMARY START */
.bg-p {
  background-color: var(--primary) !important;
}

.bg-p-light {
  background-color: var(--primary-light) !important;
}

.bg-p-lighter {
  background-color: var(--primary-lighter) !important;
}

/* PRIMARY END */

/* SECONDARY START */
.bg-s {
  background-color: var(--secondary) !important;
}

.bg-s-light {
  background-color: var(--secondary-light) !important;
}

.bg-s-lighter {
  background-color: var(--secondary-lighter) !important;
}

.bg-s-dark {
  background-color: var(--secondary-dark) !important;
}

.bg-s-darker {
  background-color: var(--secondary-darker) !important;
}

/* SECONDARY END */

/* TERTIARY START */
.bg-t {
  background-color: var(--tertiary) !important;
}

.bg-t-light {
  background-color: var(--tertiary-light) !important;
}

.bg-t-lighter {
  background-color: var(--tertiary-lighter) !important;
}

/* TERTIARY END */

.custom-color-1 {
  background-color: var(--custom-color-1);
}

/* GRAY START */
.bg-gray {
  background-color: var(--gray) !important;
}

.bg-gray-light {
  background-color: var(--gray-light) !important;
}

.bg-gray-lighter {
  background-color: var(--gray-lighter) !important;
}

.bg-gray-dark {
  background-color: var(--gray-dark) !important;
}

/* GRAY END */

/* OTHER COLORS START */
.bg-w {
  background-color: var(--white) !important;
}

.bg-w-to-g {
  background-color: var(--white) !important;
}

.bg-w-to-g:hover {
  background-color: var(--gray-lighter) !important;
}

.bg-w.bg-w {
  background-color: var(--white) !important;
}

.bg-b {
  background-color: var(--black) !important;
}

.bg-w-opacity {
  background-color: #ffffffc5;
}

.bg-g-to-b {
  background-color: var(--gray-lighter);
  transition: var(--transition-all);
}

.bg-g-lighter-to-g {
  background-color: var(--gray-lighter) !important;
}

.bg-g-lighter-to-g:hover {
  background-color: var(--gray) !important;
}

.bg-g-to-b:hover {
  background-color: var(--black);
}

.bg-g-to-b p {
  transition: var(--transition-all);
}

.bg-g-to-b:hover p {
  color: var(--white) !important;
}

.bg-g-to-b:hover .button {
  background-color: var(--white) !important;
  color: var(--text-primary) !important;
}

/* OTHER COLORS END */
/****** BACKGROUND END ******/

/****** TEXT START ******/
.text-p {
  color: var(--text-primary) !important;
}

.text-s {
  color: var(--text-secondary) !important;
}

.text-t {
  color: var(--text-tertiary) !important;
}

.text-g {
  color: var(--text-gray) !important;
}

.text-g-light {
  color: var(--text-gray-light) !important;
}

.text-w {
  color: var(--text-white) !important;
}

/****** TEXT END ******/

/****** ICON START ******/
.icon-11xl {
  width: 300px;
}

.icon-10xl {
  width: 250px;
}

.icon-10xl-custom {
  width: 250px;
  height: 120px;
  object-fit: contain;
}

@media (min-width: 991px) {
  .button-secondary-outline.desktop.button {
    color: var(--white);
    background-color: var(--secondary);
    transition: var(--transition-all);
  }

  .button-secondary-outline.desktop.button:hover {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--border-primary) !important;
  }

  .icon-10xl-custom.smaller {
    height: 90px;
  }
}

.icon-9xl {
  width: 220px;
}

.icon-8xl {
  width: 200px;
}

.icon-7xl {
  width: 180px;
}

.icon-6xl {
  width: 150px;
}

.icon-5xl {
  width: 110px;
}

.icon-4xl {
  width: 100px;
}

.icon-3xl {
  width: 72px;
  min-width: 72px;
}

.icon-img {
  width: 55px;
}

.icon-2xl {
  width: 48px !important;
  height: 48px !important;
}

.icon-xl {
  width: 34px;
}

.icon-parent-custom {
  width: 62px !important;
  height: 62px !important;
}

.icon-custom {
  min-width: 42px !important;
  min-height: 42px !important;
}

.icon-lg {
  width: 24px;
}

.icon-md {
  width: 20px;
}

.icon-sm {
  width: 16px;
}

.icon-xsm {
  width: 14px;
}

.icon-xxsm {
  width: 12px;
}

.icon-hover {
  transition: var(--transition-transform);
  transform: scale(1) translateZ(0);
}

.icon-hover-minus:hover {
  transform: scale(0.95) translateZ(0);
}

.icon-hover-plus:hover {
  transform: scale(1.05) translateZ(0);
}

/****** ICON END ******/

/****** BORDER START ******/
/* SIZE START */
.border-t {
  border-top: 1px solid !important;
}

.border-e {
  border-right: 1px solid !important;
}

.border-b {
  border-bottom: 1px solid !important;
}

.border-s {
  border-left: 1px solid !important;
}

/* SIZE END */

/* COLOR START */
/* BORDER PRIMARY START */
.border-color-p {
  border-color: var(--border-primary) !important;
}

.border-color-p-to-s-parent span,
.border-color-p-to-s {
  border-color: var(--border-primary);
}

.border-color-p-to-s-parent:hover span,
.border-color-p-to-s:hover {
  border-color: var(--border-secondary);
}

.border-color-p-to-t {
  border-color: var(--border-primary);
}

.border-color-p-to-t:hover {
  border-color: var(--border-tertiary);
}

.border-color-p-to-g {
  border-color: var(--border-primary);
}

.border-color-p-to-g:hover {
  border-color: var(--border-gray);
}

.border-color-p-to-w {
  border-color: var(--border-primary);
}

.border-color-p-to-w:hover {
  border-color: var(--border-white);
}

.border-color-p-to-b {
  border-color: var(--border-primary);
}

.border-color-p-to-b:hover {
  border-color: var(--border-black);
}

/* BORDER PRIMARY END */

/* BORDER SECONDARY START */
.border-color-s {
  border-color: var(--border-secondary) !important;
}

.border-color-s-to-p {
  border-color: var(--border-secondary);
}

.border-color-s-to-p:hover {
  border-color: var(--border-primary);
}

.border-color-s-to-t {
  border-color: var(--border-secondary);
}

.border-color-s-to-t:hover {
  border-color: var(--border-tertiary);
}

.border-color-s-to-g {
  border-color: var(--border-secondary) !important;
}

.border-color-s-to-g:hover {
  border-color: var(--border-gray) !important;
}

.border-color-s-to-w {
  border-color: var(--border-secondary);
}

.border-color-s-to-w:hover {
  border-color: var(--border-white);
}

.border-color-s-to-b {
  border-color: var(--border-secondary);
}

.border-color-s-to-b:hover {
  border-color: var(--border-black);
}

/* BORDER SECONDARY END */

/* BORDER TERTIARY START */
.border-color-t {
  border-color: var(--border-tertiary);
}

.border-color-t-to-p {
  border-color: var(--border-tertiary);
}

.border-color-t-to-p:hover {
  border-color: var(--border-primary);
}

.border-color-t-to-s {
  border-color: var(--border-tertiary);
}

.border-color-t-to-s:hover {
  border-color: var(--border-secondary);
}

.border-color-t-to-g {
  border-color: var(--border-tertiary);
}

.border-color-t-to-g:hover {
  border-color: var(--border-gray);
}

.border-color-t-to-w {
  border-color: var(--border-tertiary);
}

.border-color-t-to-w:hover {
  border-color: var(--border-white);
}

.border-color-t-to-b {
  border-color: var(--border-tertiary);
}

.border-color-t-to-b:hover {
  border-color: var(--border-black);
}

/* BORDER TERTIARY END */

/* BORDER GRAY START */
.border-color-g {
  border-color: var(--border-gray) !important;
}

.border-color-g-to-p {
  border-color: var(--border-gray) !important;
}

.border-color-g-to-p:hover {
  border-color: var(--border-primary) !important;
}

.border-color-g-to-s {
  border-color: var(--border-gray) !important;
}

.border-color-g-to-s:hover {
  border-color: var(--border-secondary) !important;
}

.border-color-g-to-t {
  border-color: var(--border-gray);
}

.border-color-g-to-t:hover {
  border-color: var(--border-tertiary);
}

.border-color-g-to-w {
  border-color: var(--border-gray);
}

.border-color-g-to-w:hover {
  border-color: var(--border-white);
}

.border-color-g-to-b {
  border-color: var(--border-gray);
}

.border-color-g-to-b:hover {
  border-color: var(--border-black);
}

.border-color-g-light {
  border-color: var(--border-gray-light) !important;
}

.border-color-g-light-to-g {
  border-color: var(--border-gray-light) !important;
}

.border-color-g-light-to-g:hover {
  border-color: var(--border-gray) !important;
}

.border-color-g-lighter {
  border-color: var(--border-gray-lighter) !important;
}

/* BORDER GRAY END */

/* BORDER WHITE START */
.border-color-w {
  border-color: var(--border-white) !important;
}

.border-color-w-to-p {
  border-color: var(--border-white);
}

.border-color-w-to-p:hover {
  border-color: var(--border-primary);
}

.border-color-w-to-s {
  border-color: var(--border-white);
}

.border-color-w-to-s:hover {
  border-color: var(--border-secondary);
}

.border-color-w-to-g {
  border-color: var(--border-white);
}

.border-color-w-to-g:hover {
  border-color: var(--border-gray);
}

.border-color-w-to-t {
  border-color: var(--border-white);
}

.border-color-w-to-t:hover {
  border-color: var(--border-tertiary);
}

.border-color-w-to-b {
  border-color: var(--border-white);
}

.border-color-w-to-b:hover {
  border-color: var(--border-black);
}

/* BORDER WHITE END */

/* BORDER BLACK START */
.border-color-b {
  border-color: var(--border-black);
}

.border-color-b-to-p {
  border-color: var(--border-black);
}

.border-color-b-to-p:hover {
  border-color: var(--border-primary);
}

.border-color-b-to-s {
  border-color: var(--border-black);
}

.border-color-b-to-s:hover {
  border-color: var(--border-secondary);
}

.border-color-b-to-g {
  border-color: var(--border-black);
}

.border-color-b-to-g:hover {
  border-color: var(--border-gray);
}

.border-color-b-to-t {
  border-color: var(--border-black);
}

.border-color-b-to-t:hover {
  border-color: var(--border-tertiary);
}

.border-color-b-to-w {
  border-color: var(--border-black);
}

.border-color-b-to-w:hover {
  border-color: var(--border-white);
}

/* BORDER BLACK END */

/* COLOR END */

/* RADIUS START */
.rounded-p {
  border-radius: var(--rounded);
}

.rounded-s {
  border-radius: var(--rounded-large);
}

.rounded-t {
  border-radius: var(--rounded-larger);
}

/* RADIUS END */
/****** BORDER END ******/

.rotate-90 {
  transform: rotate(-90deg);
}

.rotate-180 {
  transform: rotate(-180deg);
}

/****** LINK START ******/
.link-in-text a {
  transition: var(--transition-color);
  color: var(--text-secondary);
}

.link-in-text a:hover {
  color: var(--text-primary);
}

.heading-in-text h1,
.heading-in-text h2,
.heading-in-text h3,
.heading-in-text h4,
.heading-in-text h5,
.heading-in-text h6 {
  font-family: Montserrat-Regular-2, sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: var(--text-secondary) !important;
}

.link {
  transition: var(--transition-color);
}

.link-p-to-s {
  color: var(--text-primary) !important;
}

.link-p-to-s:hover {
  color: var(--text-secondary) !important;
}

.link-p-to-t {
  color: var(--text-primary) !important;
}

.link-p-to-t:hover {
  color: var(--text-tertiary) !important;
}

.link-p-to-w {
  color: var(--text-primary) !important;
}

.link-p-to-w:hover {
  color: var(--text-white) !important;
}

.link-s-to-p {
  color: var(--text-secondary) !important;
}

.link-s-to-p:hover {
  color: var(--text-primary) !important;
}

.link-s-to-t {
  color: var(--text-secondary) !important;
}

.link-s-to-t:hover {
  color: var(--text-tertiary) !important;
}

.link-s-to-w:hover {
  color: var(--text-secondary) !important;
}

.link-s-to-w:hover {
  color: var(--text-white) !important;
}

.link-t-to-p {
  color: var(--text-tertiary) !important;
}

.link-t-to-p:hover {
  color: var(--text-primary) !important;
}

.link-t-to-s {
  color: var(--text-tertiary) !important;
}

.link-t-to-s:hover {
  color: var(--text-secondary) !important;
}

.link-t-to-w:hover {
  color: var(--text-tertiary) !important;
}

.link-t-to-w:hover {
  color: var(--text-white) !important;
}

.link-w-to-p:hover {
  color: var(--text-white) !important;
}

.link-w-to-p:hover {
  color: var(--text-primary) !important;
}

.link-w-to-s {
  color: var(--text-white) !important;
}

.link-w-to-s:hover {
  color: var(--text-secondary) !important;
}

.link-w-to-t:hover {
  color: var(--text-white) !important;
}

.link-w-to-t:hover {
  color: var(--text-tertiary) !important;
}

/* LINK BORDER START */
.link-border {
  display: inline-block;
}

.link-border:after {
  content: "";
  display: block;
  border-bottom: solid 1px;
  transform: scaleX(0);
  transition: var(--transition-transform);
}

.link-border:after {
  transform-origin: 100% 50%;
}

.link-border:hover:after {
  transform: scaleX(1);
  transform-origin: 0% 50%;
}

.link-border-p:after {
  border-color: var(--text-primary);
}

.link-border-s:after {
  border-color: var(--text-secondary);
}

.link-border-t:after {
  border-color: var(--text-tertiary);
}

.link-border-w:after {
  border-color: var(--white);
}

/* LINK BORDER END */
/****** LINK END ******/

/****** FILTER START ******/
/* FILTER PRIMARY START */
.filter-p {
  filter: var(--filter-primary);
}

.filter-p-to-s-parent img,
.filter-p-to-s {
  filter: var(--filter-primary);
}

.filter-p-to-s-parent:hover img,
.filter-p-to-s:hover {
  filter: var(--filter-secondary);
}

.filter-p-to-t {
  filter: var(--filter-primary);
}

.filter-p-to-t:hover {
  filter: var(--filter-tertiary);
}

.filter-p-to-w {
  filter: var(--filter-primary);
}

.filter-p-to-w:hover {
  filter: var(--filter-white);
}

.filter-p-to-b {
  filter: var(--filter-primary);
}

.filter-p-to-b:hover {
  filter: var(--filter-black);
}

.filter-p-to-g {
  filter: var(--filter-primary);
}

.filter-p-to-g:hover {
  filter: var(--filter-gray);
}

.filter-s-to-p-parent img,
.filter-s-to-p {
  filter: var(--filter-secondary);
}

.filter-s-to-p-parent:hover img,
.filter-s-to-p:hover {
  filter: var(--filter-primary);
}

/* FILTER PRIMARY END */

/* FILTER SECONDARY START */
.filter-s {
  filter: var(--filter-secondary);
}

.filter-s-to-p {
  filter: var(--filter-secondary);
}

.filter-s-to-p:hover {
  filter: var(--filter-primary);
}

.filter-s-to-t {
  filter: var(--filter-secondary);
}

.filter-s-to-t:hover {
  filter: var(--filter-tertiary);
}

.filter-s-to-w {
  filter: var(--filter-secondary);
}

.filter-s-to-w:hover {
  filter: var(--filter-white);
}

.filter-s-to-b {
  filter: var(--filter-secondary);
}

.filter-s-to-b:hover {
  filter: var(--filter-black);
}

.filter-s-to-g {
  filter: var(--filter-secondary);
}

.filter-s-to-g:hover {
  filter: var(--filter-gray);
}

/* FILTER SECONDARY END */

/* FILTER TERTIARY START */
.filter-t {
  filter: var(--filter-tertiary);
}

.filter-t-to-p {
  filter: var(--filter-tertiary);
}

.filter-t-to-p:hover {
  filter: var(--filter-primary);
}

.filter-t-to-s {
  filter: var(--filter-tertiary);
}

.filter-t-to-s:hover {
  filter: var(--filter-secondary);
}

.filter-t-to-w {
  filter: var(--filter-tertiary);
}

.filter-t-to-w:hover {
  filter: var(--filter-white);
}

.filter-t-to-b {
  filter: var(--filter-tertiary);
}

.filter-t-to-b:hover {
  filter: var(--filter-black);
}

.filter-t-to-g {
  filter: var(--filter-tertiary);
}

.filter-t-to-g:hover {
  filter: var(--filter-gray);
}

/* FILTER TERTIARY END */

/* FILTER WHITE START */
.filter-w {
  filter: var(--filter-white);
}

.filter-w-to-p {
  filter: var(--filter-white);
}

.filter-w-to-p:hover {
  filter: var(--filter-primary);
}

.filter-w-to-s {
  filter: var(--filter-white);
}

.filter-w-to-s:hover {
  filter: var(--filter-secondary);
}

.filter-w-to-t {
  filter: var(--filter-white);
}

.filter-w-to-t:hover {
  filter: var(--filter-tertiary);
}

.filter-w-to-b {
  filter: var(--filter-white);
}

.filter-w-to-b:hover {
  filter: var(--filter-black);
}

.filter-w-to-g {
  filter: var(--filter-white);
}

.filter-t-to-g:hover {
  filter: var(--filter-gray);
}

/* FILTER WHITE END */

/* FILTER BLACK START */
.filter-b {
  filter: var(--filter-black);
}

.filter-b-to-p {
  filter: var(--filter-black);
}

.filter-b-to-p:hover {
  filter: var(--filter-primary);
}

.filter-b-to-s {
  filter: var(--filter-black);
}

.filter-b-to-s:hover {
  filter: var(--filter-secondary);
}

.filter-b-to-t {
  filter: var(--filter-black);
}

.filter-b-to-t:hover {
  filter: var(--filter-tertiary);
}

.filter-b-to-w {
  filter: var(--filter-black);
}

.filter-b-to-w:hover {
  filter: var(--filter-white);
}

.filter-b-to-g {
  filter: var(--filter-black);
}

.filter-t-to-g:hover {
  filter: var(--filter-gray);
}

/* FILTER BLACK END */

/* FILTER GRAY START */
.filter-g {
  filter: var(--filter-gray);
}

.filter-g-to-p {
  filter: var(--filter-gray);
}

.filter-g-to-p:hover {
  filter: var(--filter-primary);
}

.filter-g-to-s {
  filter: var(--filter-gray);
}

.filter-g-to-s:hover {
  filter: var(--filter-secondary);
}

.filter-g-to-t {
  filter: var(--filter-gray);
}

.filter-g-to-t:hover {
  filter: var(--filter-tertiary);
}

.filter-g-to-w {
  filter: var(--filter-gray);
}

.filter-g-to-w:hover {
  filter: var(--filter-white);
}

.filter-g-to-b {
  filter: var(--filter-gray);
}

.filter-g-to-b:hover {
  filter: var(--filter-black);
}

/* FILTER GRAY END */
/****** FILTER END ******/

/****** BUTTON START ******/

/****** BUTTON END ******/

/****** BOX SHADOW START ******/
.box-shadow {
  box-shadow: var(--box-shadow);
}

.box-shadow-b {
  box-shadow: var(--box-shadow-bottom);
}

/****** BOX SHADOW END ******/

.nav-link-tabs span {
  text-transform: initial !important;
  color: var(--text-primary) !important;
}

.nav-link-tabs.active span {
  color: var(--text-white) !important;
}

.nav-link-tabs.active img {
  filter: var(--filter-white) !important;
}

.nav-link-tabs.active {
  background-color: var(--secondary) !important;
}

.eee::after {
  position: absolute;
  content: "";
  right: 20px;
  bottom: 8px;
  width: 26px;
  height: 26px;
  background-image: url(/images/turn-right.svg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100;
}

th,
td {
  vertical-align: middle !important;
  font-family: OpenSans-Medium, sans-serif !important;
  white-space: nowrap !important;
}

.clip-path {
  clip-path: polygon(
    90.775% 89.056%,
    90.775% 89.056%,
    92.271% 88.985%,
    93.691% 88.778%,
    95.014% 88.447%,
    96.223% 88.002%,
    97.298% 87.456%,
    98.22% 86.819%,
    98.97% 86.103%,
    99.53% 85.319%,
    99.879% 84.478%,
    100% 83.592%,
    100% 5.464%,
    100% 5.464%,
    99.879% 4.578%,
    99.53% 3.737%,
    98.97% 2.953%,
    98.22% 2.237%,
    97.298% 1.6%,
    96.223% 1.054%,
    95.014% 0.61%,
    93.691% 0.279%,
    92.271% 0.072%,
    90.775% 0,
    9.225% 0,
    9.225% 0,
    7.729% 0.072%,
    6.309% 0.279%,
    4.986% 0.61%,
    3.777% 1.054%,
    2.702% 1.6%,
    1.78% 2.237%,
    1.03% 2.953%,
    0.47% 3.737%,
    0.121% 4.578%,
    0 5.464%,
    0 94.521%,
    0 94.521%,
    0.121% 95.407%,
    0.47% 96.248%,
    1.03% 97.032%,
    1.78% 97.748%,
    2.702% 98.385%,
    3.777% 98.931%,
    4.986% 99.376%,
    6.309% 99.707%,
    7.729% 99.914%,
    9.225% 99.985%,
    72.324% 99.985%,
    72.324% 99.985%,
    73.82% 99.914%,
    75.24% 99.707%,
    76.564% 99.376%,
    77.772% 98.931%,
    78.847% 98.385%,
    79.769% 97.748%,
    80.52% 97.032%,
    81.079% 96.248%,
    81.428% 95.407%,
    81.549% 94.521%,
    81.549% 94.521%,
    81.67% 93.635%,
    82.02% 92.794%,
    82.579% 92.01%,
    83.329% 91.294%,
    84.251% 90.657%,
    85.326% 90.111%,
    86.535% 89.666%,
    87.859% 89.335%,
    89.278% 89.128%,
    90.775% 89.056%
  );
}

.info-box-parent-image {
  position: absolute !important;
  right: 0.25rem !important;
  top: 0.25rem !important;
  bottom: unset !important;
  left: unset !important;
}

.info-box-parent-image .info-box {
  margin-left: 0.25rem !important;
}

.info-box {
  width: 110px !important;
}

.hero-content {
  position: absolute !important;
  left: 1rem !important;
  bottom: 1rem !important;
  right: 1rem !important;
}

.hero-img {
  min-height: 50svh;
}

.hero-boxx {
  transition: all 0.3s ease-in-out;
}

.hero-boxx:hover {
  background-color: var(--secondary) !important;
  color: var(--white) !important;
}
.hero-boxx:hover .text-s,
.hero-boxx:hover .text-p {
  color: var(--white) !important;
}

.hero-boxx:hover img {
  filter: brightness(0) invert(1);
}

.fixed-call {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-all);
}

.fixed-call.visible {
  opacity: 1;
  visibility: visible;
}

.mobile-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;

  /* start hidden off-screen and transparent */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;

  /* animiraj transform i opacity odmah,
     a visibility sakrij tek nakon 0.3s */
  transition:
    transform 0.3s ease 0s,
    opacity 0.3s ease 0s,
    visibility 0s linear 0.3s;
  z-index: 100;
}

.mobile-cta.visible {
  /* prikaži odmah i klizni gore */
  transform: translateY(0);
  opacity: 1;
  visibility: visible;

  /* poništi delay na visibility kada se pojavljuje */
  transition:
    transform 0.3s ease 0s,
    opacity 0.3s ease 0s,
    visibility 0s linear 0s;
}

.fixed-call.middle {
  bottom: 6rem !important;
}

.fixed-call.top {
  bottom: 10rem !important;
}

.fixed-call.bg-viber {
  background-color: #665cac;
}

.fixed-call.bg-whatsapp {
  background-color: #25d366;
}

.vertical-inherit {
  vertical-align: inherit !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  margin-bottom: 0 !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: var(--border-secondary) !important;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  margin: 0 !important;
  border-color: var(--border-gray) !important;
}

.invalid-feedback {
  margin-top: 0 !important;
  font-size: 12px !important;
  color: var(--secondary) !important;
}

#map {
  height: 100%;
  min-height: 500px;
}

.gm-style-iw.gm-style-iw-c {
  box-shadow: none !important;
  border-radius: 0px !important;
  padding: 0rem !important;
}

.gm-ui-hover-effect {
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.gm-ui-hover-effect span {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
}

.form-control {
  height: 60px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border-gray);
  outline: none !important;
  box-shadow: none !important;
}

textarea.form-control {
  height: 120px;
}

.form-control:hover,
.form-control:focus {
  border-color: var(--border-secondary) !important;
}

.accordion-button:after {
  background-image: url("/images/icons/iznajmljivanje-opreme-za-proslave-podijum-arrow-down.svg") !important;
  margin-left: 0.5rem !important;
}

.accordion-button {
  justify-content: space-between !important;
}

.datepicker .icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.btn-check + label {
  position: relative;
}

.btn-check:checked + label {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

.btn-check:checked + label::before {
  content: "";
  background-image: url("/images/icons/iznajmljivanje-opreme-za-proslave-podijum-check.svg");
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: flex;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  right: 15px !important;
  top: 20px !important;
  z-index: 10;
}

.select-arrow:before {
  flex-shrink: 0;
  width: 1.25rem;
  height: 45px;
  margin-left: auto;
  display: flex;
  content: "";
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234f4f4f'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 01.708 0L8 10.293l5.646-5.647a.5.5 0 01.708.708l-6 6a.5.5 0 01-.708 0l-6-6a.5.5 0 010-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  background-position: center;
}

.gallery-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.m-top {
  margin-top: var(--margin-top);
}

.m-top.fixed {
  margin-top: var(--margin-top-fixed);
}

.breadcrumb-background {
  height: 80px;
  min-height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-list ul {
  padding-left: 0rem !important;
  list-style: none;
}

.custom-list li {
  margin-bottom: 1rem !important;
  position: relative;
  display: flex;
  align-items: center;
}

.custom-list li::before {
  content: "";
  background-image: url("/images/icons/iznajmljivanje-opreme-za-proslave-podijum-list-check.svg");
  width: 14px;
  height: 12px;
  min-width: 14px;
  min-height: 12px;
  display: inline-flex;
  background-repeat: no-repeat;
  background-size: cover;
  margin-right: 25px;
  margin-left: 7px;
  z-index: 10;
  filter: invert(1) brightness(1);
}

.custom-list li::after {
  content: "";
  background-color: var(--secondary);
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  position: absolute;
  border-radius: 50%;
}

/****** HEADER START ******/
.header {
  transition: var(--transition-all);
  background-color: transparent;
  margin: 0;
}

.header.fixed {
  box-shadow: var(--box-shadow-bottom);
}

.header-bottom {
  height: 85px !important;
}

/****** HEADER END ******/

/****** BUTTON START ******/
.button-more {
  width: 100%;
  background: none;
  outline: none;
  box-shadow: none;
  border: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button {
  min-width: fit-content;
  width: 180px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: OpenSans-Regular, sans-serif;
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.button.large {
  width: 230px !important;
  height: 60px !important;
}

.button-primary {
  color: var(--white);
  background-color: var(--primary);
  transition: var(--transition-all);
  border: 1px solid var(--primary) !important;
}

.button-primary:hover {
  color: var(--white) !important;
  background-color: var(--secondary);
  border: 1px solid var(--secondary) !important;
}

.button-secondary {
  color: var(--white);
  background-color: var(--secondary);
  transition: var(--transition-all);
}

.button-secondary:hover {
  color: var(--white);
  background-color: var(--primary);
}

.button-secondary-outline {
  color: var(--text-secondary);
  background-color: transparent;
  transition: var(--transition-all);
  border: 1px solid var(--border-secondary) !important;
}

.button-secondary-outline:hover {
  color: var(--white);
  background-color: var(--secondary);
}

.button-tertiary {
  color: var(--white);
  background-color: var(--tertiary);
  transition: var(--transition-all);
}

.button-tertiary:hover {
  color: var(--white);
  background-color: var(--secondary);
}

.button-tertiary-outline {
  color: var(--text-tertiary);
  background-color: transparent;
  border: 1px solid var(--border-tertiary);
  transition: var(--transition-all);
}

.button-tertiary-outline:hover {
  color: var(--white);
  background-color: var(--tertiary);
}

.button-white {
  color: var(--text-primary);
  background-color: var(--white);
  transition: var(--transition-all);
}

.button-white:hover {
  color: var(--white);
  background-color: var(--primary);
}

.btn-link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-link .btn-text {
  overflow: hidden;
  position: relative;
}

.btn-link .btn-text span {
  display: block;
  -webkit-transition: 0.3s cubic-bezier(0.34, 0, 0.18, 1);
  transition: 0.3s cubic-bezier(0.34, 0, 0.18, 1);
}

.btn-link .btn-text span:nth-child(2) {
  left: 0;
  bottom: -30px;
  position: absolute;
}

.btn-link:hover .btn-text span:nth-child(1) {
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
}

.btn-link:hover .btn-text span:nth-child(2) {
  bottom: 0;
}

/****** BUTTON END ******/

/****** SWIPER START ******/
.swiper-buttons {
  display: flex;
  align-items: center;
}

.swiper-buttons .swiper-button {
  position: static !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0.5rem;
  border: 1px solid var(--primary);
  width: 55px !important;
  height: 55px !important;
}

.swiper-buttons .swiper-button::after,
.swiper-buttons .swiper-button::before {
  display: none !important;
}

/****** SWIPER END ******/

/****** CUSTOM START ******/
.dropdown-toggle:after {
  display: none;
}

/****** CUSTOM END ******/

/****** MEDIA QUERY START ******/
/* MIN WIDTH START */
@media (min-width: 576px) {
}

@media (min-width: 768px) {
  .transform-left-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    padding-left: 5vw;
    padding-right: 5vw;
    width: 65vw;
  }

  .cta .cta-image {
    height: 450px;
  }

  .hero {
    height: calc(100svh - var(--margin-top));
    overflow: hidden;
  }
}

@media (min-width: 992px) {
  .me-lg-5.custom {
    margin-right: 2rem !important;
  }
}

@media (min-width: 1090px) {
}

@media (min-width: 1200px) {
  .nav-item.dropdown .dropdown-toggle .arrow {
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
  }

  .nav-item.dropdown .dropdown-toggle.show .arrow {
    transform: rotateX(180deg);
  }

  .container.narrow {
    max-width: 1150px;
  }

  .container.narrow.extra {
    max-width: 950px;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: unset;
    padding-left: 5vw;
    padding-right: 5vw;
  }
}

@media (min-width: 1400px) {
  .cta .cta-image {
    height: 550px;
  }

  .container-fluid {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1400px;
    padding: 0 !important;
  }
}

@media (min-width: 1700px) {
  .padding-end-desktop {
    padding-right: 9rem !important;
  }
}

@media (min-width: 1800px) {
  .container-fluid {
    padding-left: 9rem !important;
    padding-right: 9rem !important;
  }
}

/* MIN WIDTH END */

/* MAX WIDTH START */

@media (max-width: 1400px) {
}

@media (max-width: 1200px) {
  .header-bottom {
    height: 70px !important;
  }
  .header-bottom .navbar {
    box-shadow: none !important;
  }
  /* 1) Drawer (cela collapse zona) */
  .header-bottom .navbar-collapse {
    position: fixed;
    left: 0;
    width: 100vw;
    background: var(--white);
    border-top: 1px solid var(--border-gray);
    top: var(--margin-top-mobile);
    height: calc(100svh - var(--margin-top-mobile)) !important;
    transform: translateY(100svh);
    transition: transform 0.3s ease-out;
    display: flex !important;
    z-index: 99;
  }

  .header.fixed .header-bottom .navbar-collapse {
    top: var(--margin-top-mobile-fixed) !important;
    height: calc(100svh - var(--margin-top-mobile-fixed)) !important;
  }

  .header-bottom .navbar-collapse.collapse.show {
    transform: translateY(0);
  }

  /* 2) Drilldown (unutrašnji “leveli”) */
  .header-bottom .mobile-navigation {
    position: fixed;
    left: 0;
    width: 100vw;
    background: var(--gray-lighter);
    top: 0;
    height: 100%;
    transform: translateX(100vw);
    transition: transform 0.3s ease-out;
    z-index: 100;
  }

  .header-bottom .mobile-navigation.active {
    transform: translateX(0);
  }

  /* 3) Scroll sadržaja */
  .header-bottom .mobile-navigation-content {
    overflow-y: auto;
    width: 100%;
    height: 100%;
  }

  /* 4) Stavke menija */
  .header-bottom .mobile-navigation-item,
  .header-bottom .mobile-navigation-back-link {
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    border-bottom: 1px solid var(--border-gray) !important;
  }

  .header-bottom .mobile-navigation-back-link {
    justify-content: flex-start;
  }

  /* 5) Hamburger ikonica */
  #menu-button span,
  #menu-button span::before,
  #menu-button span::after {
    cursor: pointer;
    height: 0.5px;
    width: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    content: "";
    transition: 0.25s ease;
    background: var(--primary);
  }

  #menu-button span::before {
    top: -10px;
  }
  #menu-button span::after {
    top: 10px;
  }

  #menu-button:not(.collapsed) span {
    background: transparent;
  }
  #menu-button:not(.collapsed) span::before,
  #menu-button:not(.collapsed) span::after {
    top: 0;
  }
  #menu-button:not(.collapsed) span::before {
    transform: rotate(135deg);
  }
  #menu-button:not(.collapsed) span::after {
    transform: rotate(-135deg);
  }

  .arrow-back-link {
    transform: rotate(-180deg);
  }

  .nav-gallery-tabs .nav-item {
    width: 50% !important;
    min-width: 50% !important;
  }

  .sticky-top-mobile {
    position: sticky !important;
    top: var(--margin-top-mobile-fixed);
  }

  .pb-1px {
    padding-bottom: 1px;
  }

  .accordion-toggler {
    border-bottom: 1px solid var(--border-gray) !important;
  }

  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }

  .accordion-content.visible {
    max-height: 500px;
  }

  .accordion-toggler img {
    transition: transform 0.3s ease-in-out;
    transform-origin: center center;
  }

  .accordion-toggler.active img {
    transform: rotateX(180deg);
  }

  .link-border-no-m::after {
    content: unset;
  }

  .fs-3xl {
    font-size: 38px;
    line-height: 1.6;
  }

  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl,
  .container-fluid {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .m-top {
    margin-top: var(--margin-top-mobile);
  }

  .m-top.fixed {
    margin-top: var(--margin-top-mobile-fixed);
  }

  .header {
    height: var(--margin-top-mobile) !important;
  }

  .navbar-collapse {
    background: var(--gray-lighter) !important;
    position: fixed;
    left: 0%;
    top: 0;
    height: 100% !important;
    width: 100%;
    z-index: 20;
    display: flex;
    align-items: center;
    transform: translateX(0);
    transition: var(--transition-all);
    flex-direction: column;
  }

  .navbar .navbar-logo {
    z-index: 100 !important;
  }

  .navbar .nav-item a {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    border-bottom: 1px solid var(--border-gray) !important;
    display: flex;
    width: 100% !important;
  }

  .navbar-collapse:not(.show) {
    transform: translateX(100%);
  }

  .navbar-toggler {
    width: 50px !important;
    padding: 0 !important;
  }

  .navbar-toggler span,
  .navbar-toggler span:before,
  .navbar-toggler span:after {
    cursor: pointer;
    height: 1px;
    width: 28px;
    background: var(--text-primary);
    position: absolute;
    left: auto !important;
    right: 0;
    top: 50%;
    display: block;
    content: "";
  }

  .navbar-toggler span,
  .navbar-toggler span:before,
  .navbar-toggler span:after,
  .navbar-toggler span,
  .navbar-toggler span:before,
  .navbar-toggler span:after {
    background: var(--text-primary);
  }

  .navbar-toggler span:before {
    top: -8px;
  }

  .navbar-toggler span:after {
    top: 8px;
  }

  .navbar-toggler span,
  .navbar-toggler span:before,
  .navbar-toggler span:after {
    transition: var(--transition-all);
  }

  .navbar-toggler:not(.collapsed) span {
    background-color: transparent !important;
  }

  .navbar-toggler:not(.collapsed) span:before,
  .navbar-toggler:not(.collapsed) span:after {
    top: 0;
  }

  .navbar-toggler:not(.collapsed) span:before {
    transform: rotate(135deg);
  }

  .navbar-toggler:not(.collapsed) span:after {
    transform: rotate(-135deg);
  }

  .icon-3xl {
    width: 60px;
    min-width: 60px;
  }

  .fs-5xl-m {
    font-size: 88px;
    line-height: 78px;
  }

  .fs-4xl-m {
    font-size: 65px;
    line-height: 65px;
  }

  .fs-3xl-m {
    font-size: 48px;
    line-height: 57px;
  }

  .fs-xxl-m {
    font-size: 37px;
    line-height: 44px;
  }

  .fs-xl-m {
    font-size: 28px;
    line-height: 34px;
  }

  .fs-lg-m {
    font-size: 24px;
    line-height: 36px;
  }

  .fs-md-m {
    font-size: 20px !important;
    line-height: 27px !important;
  }

  .fs-sm {
    font-size: 16px;
    line-height: 1.6;
  }

  .fs-sm-m {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  .fs-xxsm-m {
    font-size: 13px;
    line-height: 18px;
  }

  .fs-3xsm-m {
    font-size: 10px;
    line-height: 16px;
  }
}

@media (max-width: 991px) {
  .box-16-9-tablet {
    aspect-ratio: 16 / 9 !important;
  }

  .fs-xxl,
  .fs-3xl {
    font-size: 34px;
    line-height: 1.3;
  }

  html {
    font-size: var(--font-text-mobile);
  }
  .bg-gray-lighter-mobile {
    background-color: var(--gray-lighter) !important;
  }

  .bg-gray-mobile {
    background-color: var(--gray) !important;
  }
}

@media (max-width: 768px) {
  .info-box-parent {
    position: absolute;
    left: 0.25rem;
    bottom: 0.25rem;
  }

  .info-box {
    width: 90px !important;
  }

  .bg-s-mobile {
    background-color: var(--secondary);
  }

  .icon-5xl {
    width: 110px !important;
  }

  .hero-box {
    position: static !important;
    background-color: var(--gray-light) !important;
  }

  .hero-box.white {
    background-color: var(--white) !important;
  }

  .fs-xxl {
    font-size: 24px;
    line-height: 1.4;
  }

  .button {
    width: 160px;
    height: 45px;
  }
}

@media (max-width: 575px) {
  .box-4-3-mobile {
    aspect-ratio: 4 / 3 !important;
  }

  .uptitle-mobile {
    color: var(--text-primary) !important;
    font-size: 13px;
    line-height: 1.6;
  }
}

@media (max-width: 375px) {
  .button {
    width: 140px;
    font-size: 14px !important;
  }
}

/* MAX WIDTH END */
/****** MEDIA QUERY END ******/
.toast {
  display: flex !important;
  justify-content: space-between;
  align-items: start;
  min-width: fit-content;
  border-radius: 0 !important;
}

.toast-success .toast-icon-warning,
.toast-success .toast-close-warning,
.toast-success .toast-para-warning {
  display: none;
}

.toast-warning .toast-icon-success,
.toast-warning .toast-close-success,
.toast-warning .toast-para-success {
  display: none;
}

.toast.show {
  right: 30px !important;
  bottom: 30px !important;
}

.toast .btn-close {
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  opacity: 1;
}

.toast .toast-icon {
  width: 40px;
}

.toast .toast-close {
  width: 14px;
}

@media (max-width: 500px) {
  .toast.show {
    right: calc(1.5rem * 0.75) !important;
    bottom: calc(1.5rem * 0.75) !important;
    max-width: 320px;
    left: unset !important;
  }
}

html {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

html.loaded {
  opacity: 1;
}

.mask {
  display: none !important;
}

.streamline-img {
  pointer-events: none;
  object-fit: cover;
  width: auto;
  height: 100%;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.navbar-expand-xl .navbar-nav .dropdown-menu {
  position: fixed;
  height: calc(100svh - var(--margin-top));
  overflow-y: auto;
  left: 0;
  bottom: 0;
  right: 0;
  top: var(--margin-top);
  border-radius: 0 !important;
  background: var(--gray-lighter) !important;
  transition: var(--transition-all) !important;
}

.header.fixed .navbar-expand-xl .navbar-nav .dropdown-menu {
  height: calc(100svh - var(--margin-top-fixed));
  top: var(--margin-top-fixed);
}

button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
}

.nav-close-button {
  width: 30px;
  height: 30px;
  padding: 9px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: 11111111;
  outline: 0 !important;
}

.nav-close-button.absolute {
  position: absolute;
  right: 15px !important;
  top: 15px !important;
}

.nav-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.close-icon {
  width: 14px;
  height: 14px;
}

span.border {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) rotate(-90deg);
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.nav-circle circle {
  stroke-dasharray: 92;
  stroke-dashoffset: 92;
  stroke: var(--primary);
  stroke-width: 1px;
  transition: all 0.5s ease-in-out;
  fill: none;
}

.modal-header.filter .nav-circle circle {
  stroke: #fff;
}

.nav-close-button:hover .nav-circle circle {
  stroke-dashoffset: 0;
  transition: all 0.5s ease-in-out;
}

.logos-slider {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    #000 15%,
    #000 85%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0,
    #000 15%,
    #000 85%,
    rgba(0, 0, 0, 0) 100%
  );
}

.logos-slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  animation: slide 60s linear infinite;
}

.logos-slider-container img {
  width: 200px;
  max-width: 200px;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.h-60 {
  height: 60px !important;
}

.modal-content {
  border-radius: 0 !important;
}

.form-check,
.form-check .form-label {
  cursor: pointer !important;
  width: fit-content !important;
}

.form-check-input[type="checkbox"]::before {
  display: none !important;
}

.form-check-input[type="checkbox"]:checked:focus,
.form-check-input[type="checkbox"]:checked {
  background-color: var(--secondary);
  border-color: var(--secondary);
}

.select-options-wrapper {
  max-height: 240px !important;
}

.select-option {
  height: 60px !important;
  min-height: 60px !important;
  border-bottom: 1px solid var(--border-gray);
  background: var(--gray-lighter);
}

.select-option:hover:not(.disabled),
.select-option.active {
  background-color: var(--secondary) !important;
  color: var(--text-white) !important;
}

.select-option.selected.active {
  background: var(--secondary) !important;
  color: var(--text-white) !important;
}

.input-group {
  background-color: var(--gray-lighter);
  min-height: 60px !important;
  border-bottom: 1px solid var(--border-gray-light) !important;
}

.form-control.select-filter-input {
  border: 0 !important;
  padding: 0 !important;
  background-color: var(--gray-lighter);
}

.form-notch-leading {
  border-left: 0 !important;
  border-radius: 0 !important;
  border-top: 0 !important;
}

.form-notch-middle {
  border-top: 0 !important;
  border-radius: 0 !important;
}

.form-notch > * {
  box-shadow: none !important;
}

.select-input.focused ~ .form-notch .form-notch-middle,
.select-input.form-control[readonly]:not([disabled]):focus ~ .form-notch > * {
  border-color: var(--secondary) !important;
}

.form-notch-trailing {
  border-right: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
}

.select-input.form-control[readonly]:not([disabled]) {
  padding: 0 !important;
  user-select: none !important;
}

.form-label {
  user-select: none !important;
}

option {
  user-select: none !important;
}

.btn-group {
  box-shadow: none !important;
}

.radio-button {
  background-color: var(--white) !important;
  color: var(--text-primary) !important;
  height: 40px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  cursor: pointer !important;
  user-select: none !important;
}

.btn-check:checked + label::before {
  display: none !important;
}

.btn-check:checked + label {
  background-color: var(--secondary) !important;
  color: var(--text-white) !important;
}

.not-visible {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease;
}

.not-visible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.not-visible.is-open::after {
  opacity: 0;
}

.table th {
  text-transform: uppercase;
}

.box-3x2 {
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
}

.box-3x2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.form-outline
  .form-control.select-input:focus
  ~ .form-notch
  .form-notch-trailing,
.select-input.focused ~ .form-notch .form-notch-trailing,
.form-outline
  .form-control.select-input:focus
  ~ .form-notch
  .form-notch-leading,
.select-input.focused ~ .form-notch .form-notch-leading {
  border-color: var(--secondary) !important;
}

.px-0.container,
.px-0.container-sm,
.px-0.container-md,
.px-0.container-lg,
.px-0.container-xl,
.px-0.container-xxl,
.px-0.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.hero-media {
  position: relative;
  aspect-ratio: 4 / 3; /* za mobilni */
  width: 100%;
  overflow: hidden;
}

@media (min-width: 576px) and (max-width: 991px) {
  .hero-media {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 992px) {
  .hero-media {
    aspect-ratio: 3 / 2;
  }
}

.hero-media picture,
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
