/****** FONT START ******/
/* PRIMARY FONT FAMILY START */
@font-face {
  font-family: AcherusGrotesque-Light;
  font-display: swap;
  src: url(fonts/AcherusGrotesque/AcherusGrotesque-Light.ttf) format("truetype");
}

@font-face {
  font-family: AcherusGrotesque-Regular;
  font-display: swap;
  src: url(fonts/AcherusGrotesque/AcherusGrotesque-Regular.ttf)
    format("truetype");
}

@font-face {
  font-family: AcherusGrotesque-Medium;
  font-display: swap;
  src: url(fonts/AcherusGrotesque/AcherusGrotesque-Medium.ttf)
    format("truetype");
}

@font-face {
  font-family: AcherusGrotesque-SemiBold;
  font-display: swap;
  src: url(fonts/AcherusGrotesque/AcherusGrotesque-SemiBold.ttf)
    format("truetype");
}

@font-face {
  font-family: AcherusGrotesque-Bold;
  font-display: swap;
  src: url(fonts/AcherusGrotesque/AcherusGrotesque-Bold.ttf) format("truetype");
}

/* PRIMARY FONT FAMILY END */

/* SECONDARY FONT FAMILY START */
@font-face {
  font-family: Roboto-Light;
  font-display: swap;
  src: url(fonts/Roboto/Roboto-Light.ttf) format("truetype");
}

@font-face {
  font-family: Roboto-Regular;
  font-display: swap;
  src: url(fonts/Roboto/Roboto-Regular.ttf) format("truetype");
}

@font-face {
  font-family: Roboto-Medium;
  font-display: swap;
  src: url(fonts/Roboto/Roboto-Medium.ttf) format("truetype");
}

@font-face {
  font-family: Roboto-Bold;
  font-display: swap;
  src: url(fonts/Roboto/Roboto-Bold.ttf) format("truetype");
}

/* SECONDARY FONT FAMILY END */

/****** FONT END ******/

/****** ROOT START ******/
:root {
  /* COLOR START */
  --primary: #26a5cb;
  --primary-light: #000000;
  --primary-lighter: #000000;

  --secondary: #ee3d96;
  --secondary-light: #111111;
  --secondary-dark: #111111;

  --tertiary: #f3f3f3;
  --tertiary-light: #222222;
  --tertiary-lighter: #222222;

  --gray: #b7b7b7;
  --gray-light: #e9e9e9;
  --gray-lighter: #f4f6fa;

  --white: #ffffff;
  --black: #000000;

  --text-primary: #171717;
  --text-secondary: #ee3d96;
  --text-tertiary: #4377bc;
  --text-gray: gray;
  --text-white: white;

  --border-primary: #111111;
  --border-secondary: #222222;
  --border-tertiary: #333333;
  --border-gray: #b7b7b7;
  --border-gray-light: #e9e9e9;
  --border-gray-lighter: #f3f3f3;
  --border-white: #ffffff;
  --border-black: #000000;
  /* COLOR END */

  /* FONT START */
  --font-text: 16px;
  /* FONT END */

  /* FONT FAMILY START */
  --font-family: Roboto-Light, sans-serif;
  /* FONT FAMILY END */

  /* FILTER START */
  --filter-primary: invert(55%) sepia(58%) saturate(555%) hue-rotate(147deg)
    brightness(89%) contrast(95%);
  --filter-secondary: invert(31%) sepia(54%) saturate(2517%) hue-rotate(309deg)
    brightness(89%) contrast(97%);
  --filter-tertiary: ;
  --filter-gray: invert(92%) sepia(7%) saturate(28%) hue-rotate(316deg)
    brightness(81%) contrast(84%);
  --filter-white: brightness(0) invert(1);
  --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.3s ease-out;
  --transition-height: height 0.3s ease-out;
  /* TRANSITION END */

  /* MARGIN TOP START */
  --margin-top: 105px;
  --margin-top-fixed: 80px;
  --margin-top-mobile: 105px;
  --margin-top-mobile-fixed: 80px;
  /* MARGIN TOP END */

  /* BOX SHADOW START */
  --box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
  --box-shadow-bottom: rgb(0 0 0 / 12%) 0px 5px 15px;
  /* BOX SHADOW END */

  /* ROUNDED START */
  --rounded: 3px;
  --rounded-large: 8px;
  --rounded-larger: 16px;
  /* ROUNDED END */

  --overlay: rgba(0, 0, 0, 0.65);
}

/****** ROOT END ******/

/****** DEFAULT START ******/

html {
  font-size: var(--font-text);
  overscroll-behavior: none;
}

body {
  color: var(--text-primary);
  font-family: var(--font-family);
  line-height: 1.8;
}

img {
  max-width: 100%;
}

/****** DEFAULT END ******/

/****** SCROLL BAR START ******/
@media (min-width: 991px) {
  *::-webkit-scrollbar {
    width: 12px;
    scrollbar-color: var(--primary);
    z-index: 111111111111111;
  }

  *::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  *::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
    background-color: var(--primary);
  }
}

/****** SCROLL BAR END ******/

/****** CUSTOM START ******/

.object-cover {
  object-fit: cover;
}

.z-1 {
  z-index: 1;
}

.z-10 {
  z-index: 10;
}

.z-100 {
  z-index: 100;
}

.z-1000 {
  z-index: 10000;
}

.cursor-pointer {
  cursor: pointer;
}

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

.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: AcherusGrotesque-Light, sans-serif;
}

.ff-p-regular {
  font-family: AcherusGrotesque-Regular, sans-serif;
}

.ff-p-medium {
  font-family: AcherusGrotesque-Medium, sans-serif;
}

.ff-p-semi {
  font-family: AcherusGrotesque-SemiBold, sans-serif;
}

.ff-p-bold {
  font-family: AcherusGrotesque-Bold, sans-serif;
}

/* PRIMARY END */

/* SECONDARY START */
.ff-s-light {
  font-family: Roboto-Light, sans-serif;
}

.ff-s-regular {
  font-family: Roboto-Regular, sans-serif;
}

.ff-s-medium {
  font-family: Roboto-Medium, sans-serif;
}

.ff-s-semi {
  font-family: Roboto-Medium, sans-serif;
}

.ff-s-bold {
  font-family: Roboto-Bold, sans-serif;
}

/* SECONDARY END */
/****** FONT FAMILY END ******/

/****** FONT SIZE START ******/
.fs-4xl {
  font-size: 82px;
  line-height: 98px;
}

.fs-3xl {
  font-size: 62px;
  line-height: 72px;
}

.fs-xxl {
  font-size: 48px;
  line-height: 72px;
}

.fs-xl {
  font-size: 34px;
  line-height: 51px;
}

.fs-lg {
  font-size: 27px;
  line-height: 36px;
}

.fs-xlg {
  font-size: 18px;
  line-height: 23px;
}

.fs-md {
  font-size: 16px;
  line-height: 24px;
}

.fs-sm {
  font-size: 16px !important;
  line-height: 20px !important;
}

.fs-xsm {
  font-size: 14px !important;
  line-height: 21px !important;
}

.fs-xxsm {
  font-size: 12px;
  line-height: 18px;
}

/****** FONT SIZE END ******/

/****** BACKGROUND START ******/
/* 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;
}

/* 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 */

/* 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;
}

/* GRAY END */

/* OTHER COLORS START */
.bg-white {
  background-color: var(--white) !important;
}

.bg-black {
  background-color: var(--black) !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-w {
  color: var(--text-white) !important;
}

/****** TEXT END ******/

.z-100 {
  z-index: 100;
}

/****** ICON START ******/
.icon-10xl {
  width: 250px;
  height: 250px;
}

.icon-9xl {
  width: 220px;
  height: 220px;
}

.icon-8xl {
  width: 200px;
  height: 200px;
}

.icon-7xl {
  width: 180px;
  height: 55px;
}

.icon-6xl {
  width: 150px;
  height: 150px;
}

.icon-5xl {
  width: 120px;
  height: 55px;
}

.icon-4xl {
  width: 90px;
  height: 90px;
}

.icon-3xl {
  width: 60px;
  height: 60px;
}

.icon-2xl {
  width: 48px;
  height: 48px;
}

.icon-xl {
  width: 30px;
  height: 30px;
}

.icon-lg {
  width: 24px;
  height: 24px;
}

.icon-md {
  width: 20px;
  height: 20px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-xsm {
  width: 14px;
  height: 14px;
}

.icon-xxsm {
  width: 12px;
  height: 12px;
}

.icon-hover {
  transition: var(--transition-transform);
  transform: scale(1) translateZ(0);
}

.icon-hover:hover {
  transform: scale(0.95) translateZ(0);
}

/****** ICON END ******/

/****** BORDER START ******/
/* SIZE START */
.border-t {
  border-top: 1px solid;
}

.border-e {
  border-right: 1px solid;
}

.border-b {
  border-bottom: 1px solid;
}

.border-s {
  border-left: 1px solid;
}

/* SIZE END */

/* COLOR START */
/* BORDER PRIMARY START */
.border-color-p {
  border-color: var(--border-primary);
}

.border-color-p-to-s {
  border-color: var(--border-primary);
}

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

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

.border-color-s-to-g:hover {
  border-color: var(--border-gray);
}

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

.border-color-g-to-p {
  border-color: var(--border-gray);
}

.border-color-g-to-p:hover {
  border-color: var(--border-primary);
}

.border-color-g-to-s {
  border-color: var(--border-gray);
}

.border-color-g-to-s:hover {
  border-color: var(--border-secondary);
}

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

.border-color-g-lighter {
  border-color: var(--border-gray-lighter);
}

/* BORDER GRAY END */

/* BORDER WHITE START */
.border-color-w {
  border-color: var(--border-white);
}

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

.rounded-50 {
  border-radius: 50%;
}

/* RADIUS END */
/****** BORDER END ******/

/****** LINK START ******/
.link-in-text a:not(.btn) {
  transition: var(--transition-color);
  color: var(--text-secondary);
}

.link-in-text a:not(.btn):hover {
  color: var(--text-primary);
}

.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:hover {
  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:hover {
  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-s {
  filter: var(--filter-secondary);
}

.filter-p-to-s {
  filter: var(--filter-primary);
}

.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 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 {
  height: 45px;
  width: 180px;
  border: 1px solid;
  transition: var(--transition-all);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  font-family: AcherusGrotesque-Regular, sans-serif;
  text-transform: uppercase;
  font-size: 16px;
}

.button-primary {
  background-color: var(--primary);
  color: var(--text-white);
  border-color: var(--primary);
}

.button-primary:hover {
  background-color: var(--secondary);
  color: var(--white) !important;
  border-color: var(--secondary);
}

.button-secondary {
  background-color: var(--secondary);
  color: var(--text-white);
  border-color: var(--secondary);
}

.button-secondary:hover {
  background-color: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

.button-secondary.cta:hover {
  border-color: var(--white) !important;
}

.button-tertiary {
}

.button-tertiary:hover {
}

/****** BUTTON END ******/

/****** BOX SHADOW START ******/
.box-shadow {
  box-shadow: var(--box-shadow);
}

.box-shadow-none {
  box-shadow: none !important;
}

.box-shadow-b {
  box-shadow: var(--box-shadow-bottom);
}

/****** BOX SHADOW END ******/

/****** HEADER START ******/
.header {
  transition: var(--transition-all);
  transform: translate3d(0, 0, 0);
  padding-right: 0 !important;
}

.header.fixed {
  transform: translate3d(0, -25px, 0);
  transition: var(--transition-all);
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%) !important;
}

.header-top {
  height: 25px;
}

.header-bottom {
  height: 80px;
}

.nav-link {
  font-size: 16px;
  line-height: 1;
}

.nav-item .dropdown-toggle:after {
  display: none !important;
}

.header .navbar-dropdown-menu.dropdown-menu.show {
  width: 100vw !important;
  position: fixed;
  height: calc(100vh - 105px) !important;
}

.header.fixed .navbar-dropdown-menu.dropdown-menu.show {
  height: calc(100vh - 80px) !important;
}

@media (min-width: 1200px) and (max-width: 1550px) {
  .nav-item.mx-3 {
    margin-right: 1.25rem !important;
    margin-left: 0rem !important;
  }
}

/* .header.fixed .dropdown-hover:hover>.navbar-dropdown-menu {
    transform: translateY(38px);
  } */

.header .dropdown-hover .dropdown-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  transform: translateY(calc(-100% - 30px));
  transition: all 0.8s ease-in-out;
  opacity: 0.3;
  display: inline-block;
  padding-top: 105px;
  z-index: -1000;
  min-height: 60vh;
}

.header .dropdown-hover:hover > .dropdown-menu {
  transform: translateY(0);
  transition: all 0.8s ease-in-out;
  opacity: 1;
}

.header .dropdown-hover .fade-in-element {
  opacity: 0;
  transition: var(--transition-all);
  transform: translateY(-150px);
}

.header .dropdown-hover:hover .fade-in-element {
  animation: fadein 0.6s ease-in-out 0.4s normal forwards 1;
}

.icon-desc p {
  margin-bottom: 0px !important;
}

#carouselHero .carousel-caption {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
}

#carouselHero .carousel-caption.cta {
  background: rgba(0, 0, 0, 0.77) !important;
  color: var(--white) !important;
}

.linear-mask {
  background: rgb(0, 0, 0);
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(255, 255, 255, 0) 45%
  );
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.datum-blog {
  bottom: 20px;
  right: 0;
}

.blogLink {
  text-decoration: underline;
  color: var(--primary);
  transition: var(--transition-all);
}

.blogLink:hover {
  text-decoration: underline;
  color: var(--secondary);
  transition: var(--transition-all);
}

ul {
  list-style: none;
}

/****** HEADER END ******/

.bottom-links {
  border-top: 1px solid var(--primary);
  padding: 0.5rem 0;
}

.social-links a img {
  width: 25px;
  margin: 15px 0 15px 15px;
}

.soc-link:hover .hover {
  display: inline !important;
}

.soc-link .hover,
.soc-link:hover .no-hover {
  display: none !important;
}

.footer .icon-holder img,
.no-hover {
  filter: invert(41%) sepia(100%) saturate(325%) hue-rotate(174deg)
    brightness(89%) contrast(95%) !important;
}

.main-links a {
  color: var(--text-primary) !important;
  padding: 15px 0 !important;
  margin-right: 40px !important;
}

.main-links a:hover {
  color: var(--secondary) !important;
}

/***** HEXA *****/

.hexagon {
  width: 200px;
  /* Increased width */
  height: 115.5px;
  /* Height is sqrt(3)/2 * width */
  background-color: var(--white);
  position: relative;
  margin: 38px 0;
  /* Half the height for vertical spacing */
  display: inline-block;
  transition: var(--transition-all);
}

.hexagon span {
  position: absolute;
  z-index: 1;
  /* Ensures the text is on top of the image */
  color: var(--text-primary);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 100px solid transparent;
  /* Half the width */
  border-right: 100px solid transparent;
  /* Half the width */
  transition: var(--transition-all);
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.75px solid var(--white);
  /* Half the height */
  transition: var(--transition-all);
}

.hexagon:after {
  top: 100%;
  border-top: 57.75px solid var(--white);
  /* Half the height */
  transition: var(--transition-all);
}

.hexagon.usluge:hover {
  background-color: var(--primary);
  color: var(--white);
  transition: var(--transition-all);
}

.hexagon.usluge:hover span {
  color: var(--white) !important;
}

.hexagon img {
  transition: var(--transition-all);
}

.hexagon.usluge:hover img {
  filter: brightness(0) invert(1);
  transition: var(--transition-all);
}

.hexagon.brend:hover img {
  transform: scale(1.2);
  transition: var(--transition-all);
}

.hexagon.usluge:hover:before {
  border-bottom-color: var(--primary);
  /* Change the top triangle color on hover */
  transition: var(--transition-all);
}

.hexagon.usluge:hover:after {
  border-top-color: var(--primary);
  /* Change the bottom triangle color on hover */
  transition: var(--transition-all);
}

.nav.nav-tabs.hexa .nav-item {
  flex: unset !important;
  border: 1px solid var(--primary);
  height: 45px;
  width: 180px;
  margin: 0 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  text-indent: unset !important;
  background-color: var(--white);
  color: var(--primary);
  transition: var(--transition-all);
}

.nav.nav-tabs.hexa .nav-item .nav-link {
  padding: 0;
  width: 180px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-family: AcherusGrotesque-Light, sans-serif;
  text-transform: none !important;
  background-color: transparent;
}

.nav-tabs.hexa .nav-item.show .nav-link,
.nav-tabs.hexa .nav-link.active {
  border-color: var(--primary) !important;
  background-color: var(--primary) !important;
  color: var(--white) !important;
}

#hexa-section {
  /* max-width: 1000px; */
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  background: radial-gradient(circle, #f3f3f3 22%, #fff 100%);
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
  -o-transition: all ease 0.5s;
  -ms-transition: all ease 0.5s;
  transition: all ease 0.5s;
}

/***** REVIEW *****/

.review {
  max-height: 700px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.carousel-indicators.review {
  padding: absolute;
  bottom: 1rem;
}

.review-text {
  height: 120px;
  overflow: hidden;
  text-align: justify;
  padding-right: 1rem;
  overflow-y: auto;
}

#multi-carousel-cards .carousel-control-prev.review,
#multi-carousel-cards .carousel-control-next.review {
  background-color: var(--primary);
  height: 45px !important;
  width: 45px !important;
  opacity: 1 !important;
  transition: var(--transition-all);
}

#multi-carousel-cards .carousel-control-prev.review:hover,
#multi-carousel-cards .carousel-control-next.review:hover {
  background-color: var(--secondary);
  transition: var(--transition-all);
}

.mask.review {
  background-color: rgba(0, 0, 0, 0.2);
}

#multi-carousel-cards .carousel-control-prev,
#multi-carousel-cards .carousel-control-next {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
}

#multi-carousel-cards .carousel-control-prev {
  margin-right: 10px;
}

.white-space-normal {
  white-space: normal;
}

.ratings {
  width: 6.66667rem;
  height: 1.33333rem;
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.ratings > span {
  display: block;
  height: 1.33333rem;
  position: absolute;
  text-indent: -10000px;
  overflow: hidden;
}

.ratings::before {
  width: 6.66667rem;
  height: 1.33333rem;
  background-size: 1.33333rem;
  content: "";
  display: block;
  position: absolute;
  inset: 0px;
  background-repeat: repeat-x;
  background-image: url(/images/icons/royal-auto-servis-beograd-ratings.svg);
}

.ratings > span::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0px;
  height: 1.33333rem;
  text-indent: 10000px;
  background-repeat: repeat-x;
  background-size: 1.33333rem;
  background-image: url(/images/icons/royal-auto-servis-beograd-ratings-full.svg);
}

/****** MODAL ******/

.form-control {
  background-color: var(--white) !important;
  box-shadow: none !important;
  outline: none !important;
  height: 55px !important;
  border: 1px solid #bdbdbd;
}

.form-control:focus,
.form-control:hover {
  color: var(--text-primary) !important;
  border-color: var(--secondary) !important;
}

.form-control-text-area {
  min-height: 140px !important;
}

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: none !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: 12px;
}

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: #ee3d96;
  stroke-width: 1px;
  transition: all 0.5s ease-in-out;
  fill: none;
}

.nav-close-button:hover .nav-circle circle {
  stroke-dashoffset: 0;
  transition: all 0.5s ease-in-out;
}

.nav-close-button.filter-modal {
  right: 10px !important;
  top: 3px !important;
}

.seo-links-title {
  color: var(--primary) !important;
}

/*
.nav.nav-tabs .nav-item {
    flex: 1;
    border: 0;
    height: 80px;
    margin: 0 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    text-indent: unset !important;
    background-color: var(--tertiary);
    color: var(--text-primary);
    transition: var(--transition-all);
    position: relative;
}

.nav.nav-tabs .nav-item .nav-link {
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-family: AcherusGrotesque-Light, sans-serif;
    text-transform: none !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border-color: var(--primary) !important;
}

.nav-tabs .nav-link.custom:hover,
.nav-tabs .nav-item.show .nav-link.custom,
.nav-tabs .nav-link.custom.active {
    background-color: var(--white) !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.nav-tabs .nav-link.custom,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    border-color: var(--white) !important;
    background-color: var(--white) !important;
}

.nav-link:hover img,
.nav-link.show img,
.nav-link.active img {
    filter: brightness(0) invert(1);
}

.nav-link.custom:hover img,
.nav-link.custom.show img,
.nav-link.custom.active img {
    filter: none !important;
} */

/* .tab-content a {
    color: var(--secondary);
    text-decoration: underline;
}

.tab-content a {
    color: var(--secondary);
    text-decoration: underline;
}

.tab-content a:hover {
    color: var(--primary);
    text-decoration: underline;
} */

.link-404 {
  color: var(--primary);
  text-decoration: underline;
}

.link-404:hover {
  color: var(--secondary);
  text-decoration: underline;
}

/****** HERO START ******/
/****** HERO END ******/

/****** MEDIA QUERY START ******/
/* MIN WIDTH START */
@media (min-width: 576px) {
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
  .container.narrow-3 {
    max-width: 750px;
  }

  #carouselHero .carousel-caption {
    right: 5vw;
    left: unset;
    top: 50%;
    transform: translateY(-50%);
    bottom: unset;
    min-width: 25vw;
    max-width: 25vw;
  }

  #carouselHero .carousel-caption.cta {
    left: 25%;
    top: 50%;
    transform: translateY(-50%);
    bottom: unset;
    min-width: 25vw;
    max-width: 50%;
  }

  #carouselHero .carousel-indicators {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
  }

  #carouselHero .carousel-indicators button {
    flex: 1;
    border: 0;
    height: 80px;
    margin: 0 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    text-indent: unset !important;
    background-color: var(--tertiary);
    color: var(--text-primary);
    transition: var(--transition-all);
    position: relative;
  }

  #carouselHero .carousel-indicators button.active,
  #carouselHero .carousel-indicators button:hover {
    background-color: var(--primary);
    color: var(--white);
  }

  .carousel-indicators [data-mdb-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 0.5;
    transition: opacity 0.6s ease;
  }

  .transform-left-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    padding-left: 5vw;
    padding-right: 5vw;
    width: 65vw;
  }

  .flex-lg-row {
    flex-direction: row !important;
  }

  .cta-text {
    max-width: 370px;
  }
}

@media (min-width: 1200px) {
  .transform-left-center {
    width: 40vw;
  }
}

@media (min-width: 1400px) {
  .container-fluid {
    padding-left: 5rem;
    padding-right: 5rem;
  }

  .container.narrow {
    max-width: 1150px;
  }
}

/* MIN WIDTH END */

/* MAX WIDTH START */
@media (max-width: 1400px) {
}

@media (max-width: 1200px) {
  /* MOBILE NAVIGATION START */
  #menu-button span,
  #menu-button span:before,
  #menu-button span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 2px;
    width: 25px;
    background: var(--primary);
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    content: "";
  }

  .header-white #menu-button span,
  .header-white #menu-button span:before,
  .header-white #menu-button span:after,
  .header.fixed #menu-button span,
  .header.fixed #menu-button span:before,
  .header.fixed #menu-button span:after {
    background: var(--primary);
  }

  #menu-button span:before {
    top: -8px;
  }

  #menu-button span:after {
    top: 8px;
  }

  #menu-button span,
  #menu-button span:before,
  #menu-button span:after {
    transition: var(--transition-all);
  }

  #menu-button:not(.collapsed) span {
    background-color: transparent !important;
  }

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

  .navbar-collapse.collapse.show {
    transform: translateY(0);
    transition: var(--transition-all);
  }

  .fixed .navbar-collapse {
    top: 105px;
    transition: var(--transition-all);
    height: calc(100vh - 80px);
  }

  .navbar-collapse {
    border-top: 1px solid var(--gray-light);
    position: fixed;
    top: 105px;
    left: 0;
    background-color: var(--white);
    width: 100vw;
    height: calc(100vh - 80px);
    transform: translateY(100vh);
    transition: var(--transition-all);
    display: flex !important;
  }

  .mobile-navigation-item,
  .mobile-navigation-back-link,
  .mobile-navigation-list-link,
  .mobile-navigation-gray-link {
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: var(--mdb-gutter-x, 1rem);
    padding-left: var(--mdb-gutter-x, 1rem);
    position: relative;
    border-bottom: 1px solid var(--gray-light);
  }

  .mobile-navigation-back-link .arrow,
  .mobile-navigation-item .arrow {
    width: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: brightness(0) invert(0) !important;
  }

  .mobile-navigation.active {
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
  }

  .mobile-navigation {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--white);
    width: 100vw;
    height: calc(100vh - 87px);
    transform: translateX(100vw);
    transition: transform 0.3s ease-in-out;
    z-index: 99;
  }

  .mobile-navigation-back-link {
    font-size: 1rem !important;
    margin-bottom: 0 !important;
    justify-content: flex-start !important;
  }

  .mobile-navigation-item,
  .mobile-navigation-back-link,
  .mobile-navigation-list-link,
  .mobile-navigation-gray-link {
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: var(--mdb-gutter-x, 1rem);
    padding-left: var(--mdb-gutter-x, 1rem);
    position: relative;
    border-bottom: 1px solid var(--gray-light);
    font-family: AcherusGrotesque-Light, sans-serif !important;
  }

  .mobile-navigation-back-link .arrow,
  .mobile-navigation-item .arrow {
    width: unset !important;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: brightness(0) invert(0) !important;
  }

  .mobile-navigation-back-link .arrow {
    transform: scale(-1, 1);
    margin-right: 3px;
  }
}

@media (max-width: 992px) {
  .mobile-navigation-content {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
  }

  .m-top {
    margin-top: var(--margin-top-mobile);
    transition: var(--transition-margin);
  }

  .m-top.fixed {
    margin-top: var(--margin-top-mobile-fixed);
    transition: var(--transition-margin);
  }

  #carouselHero .carousel-caption {
    background: var(--tertiary);
    color: var(--text-primary);
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  #carouselHero .carousel-indicators {
    position: relative;
    background: var(--tertiary);
    margin: 0;
  }

  #carouselHero .carousel-indicators [data-mdb-target] {
    position: relative;
    border-radius: 50%;
    border: 0;
    width: 23px;
    height: 23px;
    margin: 0 7px;
    background-color: var(--primary);
  }

  .transform-left-center {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .bg-p-mobile {
    background-color: var(--primary) !important;
  }

  .carousel-caption-home {
    position: absolute;
    right: 1.5rem;
    bottom: 1.25rem;
    left: 1.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
    top: calc(100vw - 7rem) !important;
  }

  .mobile-fixed-nav {
    transition: var(--transition-all);
    transform: translateY(65px);
    z-index: 11;
  }

  .mobile-fixed-nav.fixed {
    transform: translateY(0);
  }

  .mobile-fixed-nav {
    transition: var(--transition-all);
    transform: translateY(65px);
    z-index: 11;
  }

  .main-links,
  .social-links {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .bottom-links {
    flex-direction: column;
    padding: 0 0;
  }

  .main-links a {
    padding: 15px 0 !important;
    margin: 0 20px !important;
    font-size: 16px !important;
  }

  .seo-links-list {
    margin-bottom: 0px !important;
    max-height: 60px !important;
    overflow: hidden;
  }

  .seo-links-list.visible {
    margin-bottom: 0px !important;
    max-height: 1000px !important;
    overflow: hidden;
  }

  .seo-links-title {
    margin-bottom: 0 !important;
    height: 60px !important;
    line-height: 60px !important;
    border-bottom: 1px solid var(--primary);
    position: relative;
    color: var(--primary);
  }

  .seo-links-title h4 {
    line-height: 60px !important;
  }

  .seo-link {
    padding: 5px 0;
  }

  .links .arrow-wrapper {
    width: 21px;
    position: absolute;
    right: 0;
    top: 20px;
  }

  .mobile-navigation-back-link span,
  .arrow,
  span,
  .mobile-navigation-item span {
    pointer-events: none !important;
  }

  .arrow {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .links .arrow::after,
  .links .arrow::before {
    display: block;
    position: absolute;
    top: 50%;
    width: 9px;
    height: 1px;
    background-color: var(--primary);
    content: "";
  }

  .links .arrow::before {
    left: 3px;
    transform: rotate(45deg);
    transition: all 0.3s ease-in-out;
  }

  .links .arrow::after {
    right: 3px;
    transform: rotate(-45deg);
    transition: all 0.3s ease-in-out;
  }

  .bottom-links {
    border-top: 0 !important;
  }

  .links .visible .arrow-wrapper .arrow::before {
    transform: rotate(-45deg);
  }

  .links .visible .arrow-wrapper .arrow::after {
    transform: rotate(45deg);
  }

  .icon-hover {
    transition:
      transform 0.3s ease-in,
      z-index 0.3s ease;
    transform: scale(1) translateZ(0);
    z-index: 0;
  }

  .footer-bottom {
    padding-bottom: 80px !important;
  }
}

@media (max-width: 768px) {
  .hexagon.usluge,
  .hexagon.brend {
    margin: 38px auto;
    display: block;
  }

  .text-align-last-center-mobile {
    text-align-last: center;
  }

  .icon-xl {
    height: 25px;
    width: 25px;
  }
}

.text-not-last {
  text-align: justify;
}

@media (max-width: 576px) {
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 500px) {
  .linear-mask {
    height: 100vw;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .hexagon.usluge {
    margin: 38px auto;
    display: block;
  }
}

/* MAX WIDTH END */
/****** MEDIA QUERY END ******/

.seo-links-list {
  transition: max-height 0.5s ease-in-out;
  overflow: hidden;
}

.close.search {
  position: absolute;
  top: 160px;
  right: 20px;
  color: #000;
  z-index: 9999999;
  text-shadow: 0 0 black;
  opacity: 1;
  font-size: 30px;
  cursor: pointer;
}

/****** LOGOS START ******/
.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 160s linear infinite;
}

.logos-slider-container img {
  width: 120px;
  max-width: 120px;
  filter: grayscale(1);
  opacity: 0.6;
  transition: all 0.3s ease-in-out;
}

.logos-slider-container img:hover {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.button-primary-outline {
  background-color: transparent !important;
  border: 1px solid var(--white) !important;
  color: var(--text-primary) !important;
}

.button-primary-outline:hover {
  background-color: var(--white) !important;
  color: var(--text-secondary) !important;
}

.button.smaller {
  width: 100px;
  min-height: 35px !important;
  max-height: 35px !important;
}

/****** LOGOS END ******/

.breadcrumb-background {
  height: 250px;
  background-image: url(/images/royal-auto-servis-beograd-breadcrumb-background.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right -80px center;
  background-blend-mode: color-burn;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.breadcrumb-background.smaller {
  height: 100px !important;
}

.link-in-text h5 {
  font-family: AcherusGrotesque-Bold, sans-serif !important;
}

.text-transform-initial {
  text-transform: initial !important;
}

.opacity-hover {
  opacity: 1;
}

.opacity-hover:hover {
  opacity: 0.5;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.tab-content.custom {
  border-top: 1px solid var(--gray-lighter);
}