:root {
  /* Color Variables */
  --light-text-color: hsl(0, 0%, 0%);
  --light-primary: #c61f2a;
  --light-background: hsl(0, 0%, 100%);
  --light-secondary: #b22525;
  --light-success: #00ad7480;
  --error: #c71f2a80;

  /* Additional Colors */
  --text-light: hsl(0, 0%, 80%);
  --light-border: hsl(0, 0%, 7%);
  --light-surface: hsl(0, 0%, 96%);
  --light-accent: #00af74;

  /* Dark Mode Colors */
  --dark-text-color: hsl(0, 0%, 100%);
  --dark-primary: #c61f2a;
  --dark-background: hsl(0, 0%, 10%);
  --dark-secondary: #b22525;
  --dark-surface: hsl(0, 0%, 15%);
  --dark-border: hsl(0, 0%, 20%);

  /* Font size */
  --h1: 5rem;
  --h2: 2.8rem;
  --h3: 2rem;
  --p: 1.3rem;

  --line-height: 1.75;
  --border-width: 2px;

  /* Padding */
  --padding-extrasmall: 1rem;
  --padding-small: 2rem;
  --padding-medium: 4rem;
  --padding-large: 6rem;

  /* Gap */
  --gap-extrasmall: 0.5rem;
  --gap-small: 1rem;
  --gap-medium: 2rem;
  --gap-large: 3rem;

  /* Scrollbar */
  --scrollbar-width: 4px;

  /* Default (Light) Theme Semantic Variables */
  --text-color: var(--light-text-color);
  --primary: var(--light-primary);
  --background: var(--light-background);
  --secondary: var(--light-secondary);
  --surface: var(--light-surface);
  --border: var(--light-border);
  --text-header: var(--light-background);
  --header-background: var(--light-primary);
  --header-secondary-background: var(--light-secondary);
  --header-title: var(--light-background);
  --success: var(--light-success);
  --hover: var(--light-success);
  --button-outlined: var(--light-primary);
  --button-outlined-icon: var(--light-background);
  --tab-unselected: var(--text-light);
  --accent: var(--light-accent);
  --accent-hover: var(--light-accent);
  --button-homepage: var(--light-primary);
  --nebo: #749dd6;
  --sidebar-links: var(--light-background);
}



/* Manual Theme Overrides */
[data-theme="dark"] {
    --text-color: var(--dark-text-color);
    --primary: var(--dark-primary);
    --background: var(--dark-background);
    --secondary: var(--dark-secondary);
    --surface: var(--dark-surface);
    --border: var(--dark-border);
    --text-header: var(--dark-text-color);
    --header-background: var(--dark-background);
    --header-secondary-background: var(--dark-surface);
    --header-title: var(--dark-primary);
    --success: var(--light-success);
    --hover: var(--error);
    --button-outlined: var(--dark-surface);
    --button-outlined-icon: var(--dark-surface);
    --tab-unselected: var(--dark-border);
    --accent: var(--dark-primary);
    --accent-hover: var(--dark-text-color);
    --button-homepage: var(--dark-text-color);
    --nebo: #44474e;
    --sidebar-links: var(--dark-text-color);
}


.disable-scroll {
    overflow: hidden;
}
.current-package {
    background-color: var(--background);
}
.module-card svg {
  stroke: var(--text-color);
}
.social-item a svg {
  fill: var(--text-color);
}
.module-photo {
  background-color: var(--surface);
  border-radius: 0.5rem;
}
details > summary:first-of-type {
  list-style: none;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  padding: var(--padding-extrasmall);
}
.contact-info p:not(.label) {
  margin-block: 0;
}
code {
  color: var(--primary);
}
/* Position */
.fixed {
  position: fixed;
}

/* Base Styles */
* {
  box-sizing: border-box;
}

ol,
li {
  list-style-position: inside;
  line-height: var(--line-height);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  margin: 0;
}

hr {
  height: var(--border-width);
  background-color: var(--border);
  margin: var(--padding-small) 0;
}
.justify-content-end {
  justify-content: flex-end;
}
/* Container */
.container {
  max-width: 1400px;
  margin: 0 auto;
}

/* Typography */
body,
p,
.package-card a,
input:not([type="checkbox"]),
textarea,
label,
.icon-button.dark:not(.homepage),
.button.dark,
.api-item p,
.api-item h4,
.navbar-menu:not(.homepage) #menu-items,
.navbar-menu:not(.homepage) #menu-items a,
.dropdown-menu a,
#tab-maloprodaja:checked ~ .tab-buttons label[for="tab-maloprodaja"],
#tab-usluzne:checked ~ .tab-buttons label[for="tab-usluzne"],
#tab-veleprodaja:checked ~ .tab-buttons label[for="tab-veleprodaja"],
body .contact-info,
.contact-info a,
h1,
h2,
h3,
h4,
h5,
h6,
.module-card-info,
.module-card,
.breadcrumb-list a,
.footer-links a {
  color: var(--text-color);
}

a {
  text-decoration: none;
}

/* Background */

.api-item,
.youtube-container iframe,
.youtube-container .api-items,
/* .package-card:not(.alt), */
.package-card,
footer {
  /* background: linear-gradient(
    135deg,
    var(--surface) 0%,
    var(--background) 100%
  ); */
  background-color: var(--surface);
}
/* .package-card.alt, */
.packages .items a,
.modules .items a,
header:not(.homepage) {
  /* background: linear-gradient(
    135deg,
    var(--background) 0%,
    var(--surface) 100%
  ); */
  background-color: var(--surface);
}

.packages .items a:hover,
.modules .items a:hover {
  /* background: linear-gradient(
    135deg,
    var(--background) 0%,
    var(--surface) 100%
  ); */
  background-color: var(--hover);
}

.hamburger-line.homepage {
  /* background: linear-gradient(
    135deg,
    var(--header-title) 0%,
    var(--surface) 100%
  ); */
  background-color: var(--header-title);
}

/* .package-card:hover, */
body,
input:not([type="checkbox"]),
textarea,
.navbar-menu.active:not(.homepage),
.header:not(.homepage) {
  background-color: var(--background);
}

.navbar-menu.homepage,
header.homepage {
  background-color: var(--header-background);
}
.homepage-banner
 {
  background-color: var(--primary);
}
.service-banner,
.homepage-banner {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}
.banner-bg-image {
  object-fit: cover;
  z-index: 1;
  aspect-ratio: 16 / 9;
}

.banner-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
.navbar-brand.homepage a,
.homepage-banner h1 {
  color: var(--header-title);
}
.download-app h2,
.download-app p {
  color: var(--text-header);
}

.homepage-banner h2,
.homepage-banner p{
  color: var(--text-header);
}
.hamburger-line:not(.homepage) {
  background-color: var(--text-color);
}

/* Buttons */
.module-card,
.icon-button,
.button {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  padding: var(--padding-extrasmall) var(--padding-small);
  text-decoration: none;
  font-weight: 400;
  line-height: var(--line-height);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  justify-content: center;
}
.icon-button.dark.homepage:hover,
.icon-button:not(.dark),
.button.homepage:not(.dark) {
  background-color: var(--header-title);
}

.icon-button.dark:not(.homepage),
.button.dark {
  background-color: transparent;
}
.icon-button.dark.homepage:hover,
.homepage .icon-button.dark:hover,
.icon-button:not(.dark),
.button.homepage:not(.dark) {
  border: 1px solid var(--header-title);
}

.icon-button.dark:not(.homepage) {
  border: 1px solid var(--button-outlined-icon);
}
.button:not(.homepage):not(.dark):hover {
  border: 1px solid var(--accent-hover);
}
.button.dark {
  border: 1px solid var(--text-color);
}
.button:not(.homepage):not(.dark),
.homepage .icon-button.dark,
.icon-button.dark:not(.homepage):hover,
.button.dark:hover {
  border: 1px solid var(--button-outlined);
}
.button:not(.homepage):not(.dark):hover {
  background-color: var(--accent-hover);
}
.module-card-info {
  background-color: var(--surface);
}
.button:not(.homepage):not(.dark),
.icon-button.dark:not(.homepage):hover,
.button.dark:hover {
  background-color: var(--primary);
  color: var(--text-header);
}
.button::after {
  font-size: var(--p);
  transition: transform 0.3s ease;
}
.button.homepage:not(.dark) {
  color: var(--button-homepage);
}
.icon-button:not(.dark):hover,
.button:not(.dark):hover {
  color: var(--background);
}

.icon-button:not(.dark):hover,
.button:not(.dark):hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}
.icon-button:hover::after,
.button:hover::after {
  transform: translate(2px, -2px);
}
.dropdown {
  display: flex;
  flex-direction: column;
}
.dropdown-menu {
  background: var(--surface);
  border-radius: 0.5rem;
  padding: 2rem;
}
.min-height-content {
  height: fit-content;
}
.module-card-info,
.dropdown-menu,
.packages .items a,
.modules .items a,
.api-items,
.module-card,
.package-card,
.content-padding img,
#content img {
  border-radius: 0.5rem;
}
.content-padding p,
#content p:not(.contact-info p),
#content li,
#content a:not(.contact-info a):not(.module-card) {
  margin-block-start: var(--padding-small);
  margin-block-end: var(--padding-small);
}
/* Width */
input:not([type="checkbox"]),
textarea,
.page-title,
.w-100 {
  width: 100%;
}

/* Forms */
label {
  display: block;
  margin-bottom: 0.5rem;
}

.margin-block,
.download-app p,
.package-card h3,
.package-card ul {
  margin-block: 0;
}
.modules strong,
.packages strong {
  font-size: 1rem;
  font-weight: 700;
}
.module-card-info h3,
.package-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
}
.package-card ul {
  padding-inline-start: 0;
}
.package-card li {
  list-style-type: none;
}
.price {
  font-size: 7rem;
  font-weight: 700;
}
.price sup {
  font-size: 2rem;
}
.download-app p {
  font-size: 1rem;
}
.hamburger-menu,
input:not([type="checkbox"]),
textarea,
hr {
  border: none;
}
input:not([type="checkbox"]),
textarea {
  padding: var(--padding-small) 0;
  border-bottom: 1px solid transparent;
  font-size: var(--p);
  border-bottom-color: var(--border);
  transition: border-bottom-color 0.3s ease;
}

input:not([type="checkbox"]):hover,
textarea:hover {
  border-bottom-color: var(--border);
}

input:not([type="checkbox"]):focus,
textarea:focus {
  outline: none;
}

/* Layout */
.main {
  min-height: 100vh;
  display: flex;
}

footer {
  margin-top: auto;
}
.module-card-info,
.module-card {
  border: 1px dotted var(--surface);
}

.module-card {
  border: 1px solid var(--surface);
}
.breadcrumb-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.breadcrumb-item:not(:last-child):after {
  padding: 0 var(--padding-small);
  color: var(--primary);
}

.breadcrumb-item:not(:last-child):after {
  content: "|";
}
.button.down:after,
details:not(.accordion-item) > summary:first-of-type::after {
  content: "\2198"; /* ↘ */
  font-family: -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.button:not(.down):after,
details:not(.accordion-item)[open] > summary:first-of-type::after {
  content: "\2197"; /* ↗ */
  font-family: -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
}
.breadcrumb-list,
.footer-links {
  list-style: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}
.checkbox-item {
  flex-wrap: wrap;
}
.module-card-info h3,
.label-checkbox,
label,
.download-app p,
.modules strong,
.packages strong,
.contact-info .label,
.navbar-brand a,
summary.nav-item,
.navbar-menu a,
.breadcrumb-list,
.uppercase {
  text-transform: uppercase;
}
.api-item:hover,
.module-card:hover {
  border: 1px dotted var(--text-color);
}
a,
.footer-links a:hover {
  color: var(--primary);
}
.icon-button.dark.homepage:hover,
.icon-button:not(.dark) {
  color: var(--button-homepage);
}

/* Padding */
.pt-small,
.ptb-small {
  padding-top: var(--padding-small);
}

.pb-small,
.ptb-small {
  padding-bottom: var(--padding-small);
}
.hamburger-menu {
  padding: var(--padding-small);
}

/* Font */
.download-app p,
.contact-info,
.contact-info a,
p,
li,
.footer-links a,
.font-weight-400 {
  font-weight: 400;
}
.accordion-button,
.tab-buttons,
.navbar-brand a,
summary.nav-item,
.navbar-menu a,
.breadcrumb-list a,
.footer-title,
.font-weight-700 {
  font-weight: 700;
}
h1 {
  margin-block-start: 0px;
  margin-block-end: 0px;
}
.text-center {
  text-align: center;
}
.homepage-banner h1 span {
  font-size: var(--h3);
  display: flex;
  flex-direction: column;
  text-transform: uppercase;
  text-align: center;
}
.homepage-banner h1 {
  font-size: 10rem;
}
h1,
.homepage-banner a,
.text-start {
  text-align: start;
}
.navbar-brand a,
.footer-title,
h3 {
  font-size: var(--h3);
}

.contact-info,
.contact-info a,
p,
li,
.footer-links a {
  font-size: var(--p);
  line-height: var(--line-height);
  transition: all 0.3s ease;
}

/* Flex */
.breadcrumb-list,
.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}
.flex-3 {
  flex: 3;
}
.breadcrumb-list,
.flex-row {
  flex-direction: row;
}
.hamburger-menu,
.main,
.flex-column {
  flex-direction: column;
}

/* Gap */
details > summary:first-of-type,
.hamburger-menu,
.gap-extrasmall {
  gap: var(--gap-extrasmall);
}
.gap-small {
  gap: var(--gap-small);
}
.gap-medium {
  gap: var(--gap-medium);
}
.gap-large {
  gap: var(--gap-large);
}
input[type="checkbox"] {
  margin-bottom: 0.5rem;
}
.justify-space-between {
  justify-content: space-between;
}
.breadcrumb-list {
  justify-content: left;
}
.justify-content-center {
  justify-content: center;
}
details > summary:first-of-type,
.align-items-center {
  align-items: center;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--surface);
}

::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

/* Firefox */
* {
  scrollbar-width: var(--scrollbar-width);
  scrollbar-color: var(--primary) var(--surface);
}

/* Hamburger Menu */
.hamburger-menu {
  display: none;
  background: none;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}
.z-index-3 {
  z-index: 3;
}

.hamburger-line {
  height: 3px;
  transition: all 0.3s ease;
}

.hamburger-menu.active .hamburger-line:nth-child(1),
.hamburger-menu.active .hamburger-line:nth-child(3),
.hamburger-line:nth-child(1) {
  width: 2rem;
}

.hamburger-line:nth-child(2) {
  width: 1.5rem;
}

.hamburger-line:nth-child(3) {
  width: 2.5rem;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(10px, -10px);
}
.cookie-info p {
  font-size: var(--font-size-small);
  padding: 0px;
}
/* Dropdown Menu */
.dropdown {
  position: relative;
}
.dropdown-menu {
  width: 100%;
  z-index: 1000;
}
.dropdown-menu {
  display: flex;
}
.dropdown-menu a {
  padding: var(--padding-extrasmall);
  text-decoration: none;
  text-transform: none;
  font-weight: 400;
}
.contact-form .label-checkbox:before,
.contact-form label::before {
  position: relative;
  content: attr(data-number);
  left: -2rem;
}
.package-card > a:not(:last-child) {
  border-bottom: 1px dashed var(--border);
}
.module-card {
  display: flex;
  gap: 0.5rem;
  padding: var(--padding-small);
}
.tab-panel {
  display: none;
}
.tab-button {
  cursor: pointer;
}
.accordion-panel img {
  width: 100%;
}
.accordion-panel h3,
.accordion-panel p {
  text-align: start;
  width: 100%;
}
.accordion-item {
  color: var(--tab-unselected);
}

.accordion-button {
  text-transform: uppercase;
}

.accordion-item[open] {
  color: var(--text-color);
}

/* CSS-only tab switching */
input[name="vrsta-tabs"]:checked ~ .tab-buttons ~ .tab-panel[data-vrsta] {
  display: none;
}
#tab-maloprodaja:checked ~ .tab-buttons ~ [data-vrsta="maloprodaja"],
#tab-usluzne:checked ~ .tab-buttons ~ [data-vrsta="usluzne"],
#tab-veleprodaja:checked ~ .tab-buttons ~ [data-vrsta="veleprodaja"] {
  display: block;
}

/* Tab button selected state */
#tab-maloprodaja:not(:checked) ~ .tab-buttons label[for="tab-maloprodaja"],
#tab-usluzne:not(:checked) ~ .tab-buttons label[for="tab-usluzne"],
#tab-veleprodaja:not(:checked) ~ .tab-buttons label[for="tab-veleprodaja"] {
  color: var(--tab-unselected);
}
.api-item {
  padding: var(--padding-small);
  border-radius: 0.5rem;
  border: 1px solid transparent;
}
.module-card-info:hover,
.package-card a:hover {
  /* background: linear-gradient(
    135deg,
    var(--hover) 0%,
    rgba(180, 255, 230, 0.151) 100%
  ); */
  background-color: var(--hover);
}
.selected {
  /* background: linear-gradient(
    135deg,
    var(--success) 0%,
    rgba(180, 255, 230, 0.151) 100%
  ); */
  background-color: var(--success);
}
.non-selected {
  /* background: linear-gradient(
    135deg,
    var(--error) 0%,
    rgba(255, 205, 205, 0.266) 100%
  ); */
  background-color: var(--error);
}
.featured {
  /* background: linear-gradient(
    135deg,
    var(--surface) 0%,
    var(--background) 100%
  ); */
  background-color: var(--background);
}
.module-card-info:hover,
.package-card a:hover,
.package-card,
.packages .items a,
.modules .items a,
.hamburger-line.homepage,
body,
input:not([type="checkbox"]),
textarea,
.navbar-menu,
.header,
.youtube-container iframe,
.youtube-container .api-items,
footer,
.download-app,
.homepage-banner,
.api-item
/* .selected, */
/* .non-selected */
 {
  background-size: 100% 400%;
  animation: gradientShift 8s ease infinite;
}
.youtube-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin: var(--padding-medium) 0;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
}
.modules .items a {
  display: flex;
  gap: 1rem;
  background-color: var(--background);
}
.packages .items a {
  background-color: var(--background);
}
.icon-button.dark.homepage:hover svg,
.icon-button:not(.dark) svg {
  fill: var(--button-homepage);
}
.icon-button.dark:not(.homepage) svg {
  fill: var(--text-color);
}
.icon-button.dark.homepage svg,
.icon-button.dark:not(.homepage):hover svg {
  fill: var(--text-header);
}
.icon-button:not(.dark):hover svg {
  fill: var(--background);
}
.navbar-brand a {
  padding-left: var(--padding-small);
}
.p-extrasmall {
  padding: var(--padding-extrasmall);
}
.p-medium {
  padding: var(--padding-medium);
}
.grid {
  display: grid;
}
.align-content-center {
    align-content: center;
}
.package-comparison,
#funkcionalnosti,
.moduls-tabs {
  /* background: linear-gradient(
    to bottom,
    var(--surface),
    var(--background),
    var(--surface)
  ); */
  background-color: var(--surface);
}
.homepage-banner {
  background: linear-gradient(
    to bottom,
    var(--header-background),
    var(--header-secondary-background),
    var(--header-background)
  );
  background-size: 100% 400%;
}
.download-app {
  background-color: var(--header-background);
}
.p-small-0 {
    padding: var(--padding-small) 0;
}

@keyframes gradientShift {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}
.sticky-header {
  position: sticky;
  top: 70px;
  z-index: 1;
  background-color: var(--surface);
}
.rounded-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.3s ease;
}
.nav-single-item {
  inline-size: max-content;
  text-align: center;
  color: var(--text-color);
}
a.nav-single-item {
  color: var(--sidebar-links);
}
a.nav-single-item:not(.homepage)  {
  color: var(--text-color);
}
@media (min-width: 953px) {
  .footer-section {
    flex: 1;
  }
}
@media (max-width: 700px) {
  .module-card {
    width: 100%;
    padding: var(--padding-extrasmall);
    flex-direction: column;
  }
  .sticky-header > div > div {
    font-size: 0.6rem;
  }
  .p-small-0 {
    padding: 20px 5px;
  }
}
@media (max-width: 455px) {
  .sticky-header > div > div {
    font-size: 0.4rem;
  }
  .p-small-0 {
    padding: 20px 1px;
  }
  .rounded-icon {
    height: 20px;
    width: 20px;
  }
}
@media (max-width: 952px) {
  .footer-section {
    justify-content: space-between;
  }
}
@media (min-width: 1601px) {
  .d-block-sm {
    display: none !important;
  }
  .flex-column-row-md{
      flex-direction: column;
  }
  .gap-medium-justify-md {
    gap: var(--gap-medium);
  }
}
@media (min-width: 701px) and (max-width: 1600px) {
    .flex-column-row-md{
        flex-direction: row;
    }
    .gap-medium-justify-md {
        justify-content: space-between;
    }
}
@media (max-width: 700px) {
    .flex-row-sm {
      flex-direction: column;
    }
    .flex-column-row-md{
        flex-direction: column;
    }
    .gap-medium-justify-md {
        gap: var(--gap-medium);
    }
}

@media (min-width: 1601px) {
  .dropdown-menu {
    display: flex;
  }
  .banner-overlay {
    padding: var(--padding-extrasmall);
  }
  .banner-bg-image {
    position: absolute;
    right: 0;
    bottom: 9rem;
  }
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
  .package-card a,
  .package-card {
    padding: var(--padding-small);
  }
  .p-medium-small {
    padding: var(--padding-medium);
  }
  .flex-row-md,
  .flex-row-md-reverse {
    flex-direction: row;
  }
  .dropdown {
    position: relative;
  }
  .dropdown-menu {
    position: fixed;
    top: 70px;
    left: 0;
    background-color: var(--surface);
    padding: 2rem;
    width: 100vw;
    z-index: 1000;
    display: none;
  }
  
  .dropdown[open] .dropdown-menu {
    display: flex;
  }
  .dropdown-menu a {
    flex: 1;
  }
  .page-title {
    padding-top: 16rem;
  }
  .content-padding,
  .download-app,
  #content {
    padding: var(--padding-medium) 0;
  }
  footer {
    padding: var(--padding-medium) 0;
  }
  .service-banner {
    padding: var(--padding-large) 0;
  }
  .gap-medium-extrasmall {
    gap: var(--gap-medium);
  }
  .package-card li {
    font-size: 1rem;
  }
  .moduls-tabs {
    padding: var(--padding-medium);
  }
  .api-items {
    padding: var(--padding-medium);
  }
  .download-app {
    padding: var(--padding-medium) 0;
  }
  .modules .items a {
    max-width: 250px;
    min-width: 250px;
  }
  .nav-item.homepage,
  .nav-single-item,
  .nav-item a,
  .nav-item.homepage:first-of-type::after {
    color: var(--text-header);
  }
  .homepage-banner h2,
  .homepage-banner p {
    text-align: start;
  }
  .flex-3-md {
    flex: 3;
  }
  .flex-1-md {
    flex: 1;
  }
  .height-fill-available-md {
    height: -webkit-fill-available;
  }
  .accordion-button,
  .tab-buttons,
  h2 {
    font-size: var(--h2);
  }
  h1 {
    font-size: var(--h1);
  }
}
@media (max-width: 1600px) {
  .contact-form label::before {
    left: -10px;
  }
  summary.nav-item,
  .nav-single-item {
    padding: var(--padding-extrasmall);
    height: 51px;
  }
  h1 {
    font-size: var(--h3);
  }
  .accordion-button, .tab-buttons, h2 {
    font-size: var(--h3);
  }
  .banner-overlay {
    padding: var(--padding-medium);
  }
  .banner-text h1 {
    font-size: 6rem;
  }
  .banner-text h1,
  .banner-text p {
    text-align: center;
  }
  .feature-content{
    padding-top: var(--padding-extrasmall);
    padding-bottom: var(--padding-extrasmall);
    font-weight: 700;
  }
  .d-none-sm {
    display: none !important;
  }
  .d-block-sm {
    display: block !important;
  }
  /* Override for toggleWrapper to maintain flex display for centering */
  .toggleWrapper.d-block-sm {
    display: flex !important;
  }
  .homepage-banner {
    padding-top: 10vh;
  }
  .package-card a,
  .package-card {
    padding: var(--padding-extrasmall);
  }
  .p-medium-small {
    padding: var(--padding-small);
  }
  .dropdown,
  .dropdown-menu,
  details > summary:first-of-type,
  #menu-items a {
    width: 100%;
  }
  .justify-content-center-md {
    justify-content: center;
  }
  .homepage-banner h2,
  .homepage-banner p {
    text-align: center;
  }
  .dropdown-menu {
    display: none;
  }
  
  .dropdown[open] .dropdown-menu {
    display: flex;
  }
  .gap-md-small {
    gap: var(--gap-small);
  }
  .nav-item.homepage,
  .nav-single-item,
  .nav-item a,
  .nav-item.homepage:first-of-type::after {
    color: var(--text-header);
  }
  .packages .items a {
    flex: 1;
  }
  .modules .items a {
    width: 100%;
  }
  .download-app {
    padding: var(--padding-small);
  }
  .api-items {
    padding: var(--padding-small);
  }
  .moduls-tabs {
    padding: var(--padding-medium) var(--padding-extrasmall);
  }
  .button.dark:not(.down) span {
    display: none;
  }
  .gap-medium-extrasmall {
    gap: var(--gap-extrasmall);
  }
  .service-banner {
    padding: var(--padding-extrasmall);
  }
  footer {
    padding: var(--padding-extrasmall);
  }
  .dropdown summary {
    padding: var(--padding-extrasmall);
  }
  .content-padding,
  #content {
    padding: var(--padding-extrasmall);
  }
  .page-title {
    padding: var(--padding-large) var(--padding-extrasmall)
      var(--padding-extrasmall) var(--padding-extrasmall);
  }
  .navbar-menu,
  .flex-row-md {
    flex-direction: column;
  }
  .flex-row-md-reverse {
    flex-direction: column-reverse;
  }
  .navbar-menu.justify-space-between:not(.active) {
    align-items: flex-start !important;
  }
  .hamburger-menu {
    display: flex;
  }
  .navbar-menu.active,
  .hamburger-menu.active {
    position: fixed;
    top: 0;
    right: 0;
  }

  .hamburger-menu.active {
    width: 100%;
    align-items: flex-end;
  }

  .hamburger-menu:not(.homepage).active {
    background-color: var(--background);
  }
  .navbar-menu.active .navbar-brand,
  .navbar-menu:not(.active) #menu-items {
    display: none;
  }
  /* Ensure mobile toggle is visible and positioned first */
  .navbar-menu.active #menu-buttons .toggleWrapper.d-block-sm {
    display: flex;
    order: -1; /* Move toggle before other buttons */
    justify-content: center;
  }
  header:has(.hamburger-menu.active) {
    background-color: transparent;
  }

  .navbar-menu.active {
    bottom: 0;
    padding: 90px var(--padding-small) var(--padding-small)
      var(--padding-small);
    width: 100%;
    z-index: 1000;
    max-height: 100vh;
    overflow-y: auto;
  }

  .navbar-menu.active {
    display: flex;
  }

  nav {
    position: relative;
  }
  .homepage-banner {
    flex-direction: column-reverse;
    align-items: center;
    position: relative;
  }
  .banner-bg-image {
    width: 100%;
    padding: 0 var(--padding-medium);
  }
  .sticky-header {
    top: 89px;
  }
  .dropdown-menu {
    position: fixed;
    top: 89px;
    left: 0;
    background-color: var(--surface);
    padding: 2rem;
    width: 100vw;
    z-index: 1000;
    display: none;
  }
  .mobile-nav,
  #menu-buttons {
    display: none !important;
  }
  .navbar-menu.active .mobile-nav {
    display: flex !important;
  }
  .navbar-menu.active #menu-buttons {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-small);
    width: 100%;
  }
  .navbar-menu.active #menu-buttons .button {
    width: 100%;
  }
}
.text-background {
    color: var(--text-color);
}

.cookie-consent-banner {
  pointer-events: initial;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--background);
}

.expend-cookie{
    cursor: pointer;
    width: 20px;
}
.feature-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-icon {
  background-color: var(--light-success);
  color: white;
}

.error-icon {
  background-color: var(--error);
  color: white;
}

.success-icon svg {
  fill: white;
}

.error-icon svg {
  fill: white;
}

.rounded-icon:hover {
  transform: scale(1.1);
}

.success-icon {
  background-color: var(--success);
}

.error-icon {
  background-color: var(--error);
}
.packages-title {
    font-weight: 700;
    text-transform: uppercase;
}
.packages-title > div,
.package-comparison .flex-row > div {
    position: relative;
}
.packages-title > div::before,
.package-comparison .flex-row > div::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 5px;
    right: 5px;
    height: 1px;
    background-image: linear-gradient(to right, var(--border) 50%, transparent 50%);
    background-size: 4px 1px;
    background-repeat: repeat-x;
}
.packages-title > div:not(:last-child)::after,
.package-comparison .flex-row > div:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background-image: linear-gradient(to bottom, var(--border) 50%, transparent 50%);
    background-size: 1px 4px;
    background-repeat: repeat-y;
}
.packages-title > div {
    padding-left: var(--padding-extrasmall);
    padding-right: var(--padding-extrasmall);
}
.feature-content {
    padding-left: var(--padding-extrasmall);
    padding-right: var(--padding-extrasmall);
}
.flex-4 {
  flex: 4;
}
figcaption {
  font-size: var(--p);
  text-align: end;
  font-style: italic;
}

/* Theme Toggle */
.toggleWrapper {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
}

.toggleWrapper .theme-input {
  position: absolute;
  left: -99em;
}

.toggle {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 90px;
  height: 50px;
  background-color: #83d8ff;
  border-radius: 84px;
  transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transform: scale(0.9); /* Scale down to fit navbar */
}

.toggle__handler {
  display: inline-block;
  position: relative;
  z-index: 1;
  top: 3px;
  left: 3px;
  width: 44px;
  height: 44px;
  background-color: #ffcf96;
  border-radius: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: rotate(-45deg);
}

.toggle__handler .crater {
  position: absolute;
  background-color: #e8cda5;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  border-radius: 100%;
}

.toggle__handler .crater--1 {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
}

.toggle__handler .crater--2 {
  top: 28px;
  left: 22px;
  width: 6px;
  height: 6px;
}

.toggle__handler .crater--3 {
  top: 10px;
  left: 25px;
  width: 8px;
  height: 8px;
}

.star {
  position: absolute;
  background-color: #fff;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  border-radius: 50%;
}

.star--1 {
  top: 10px;
  left: 35px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--2 {
  top: 18px;
  left: 28px;
  z-index: 1;
  width: 30px;
  height: 3px;
}

.star--3 {
  top: 27px;
  left: 40px;
  z-index: 0;
  width: 30px;
  height: 3px;
}

.star--4, .star--5, .star--6 {
  opacity: 0;
  /*transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95);*/
}

.star--4 {
  top: 16px;
  left: 11px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

.star--5 {
  top: 32px;
  left: 17px;
  z-index: 0;
  width: 3px;
  height: 3px;
  transform: translate3d(3px, 0, 0);
}

.star--6 {
  top: 36px;
  left: 28px;
  z-index: 0;
  width: 2px;
  height: 2px;
  transform: translate3d(3px, 0, 0);
}

.theme-input:checked + .toggle {
  background-color: var(--nebo);
}

.theme-input:checked + .toggle:before {
  color: #749ed7;
}

.theme-input:checked + .toggle:after {
  color: #fff;
}

.theme-input:checked + .toggle .toggle__handler {
  background-color: #ffe5b5;
  transform: translate3d(40px, 0, 0) rotate(0);
}

.theme-input:checked + .toggle .toggle__handler .crater {
  opacity: 1;
}

.theme-input:checked + .toggle .star--1 {
  width: 2px;
  height: 2px;
}

.theme-input:checked + .toggle .star--2 {
  width: 4px;
  height: 4px;
  transform: translate3d(-5px, 0, 0);
}

.theme-input:checked + .toggle .star--3 {
  width: 2px;
  height: 2px;
  transform: translate3d(-7px, 0, 0);
}

.theme-input:checked + .toggle .star--4, .theme-input:checked + .toggle .star--5, .theme-input:checked + .toggle .star--6 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.theme-input:checked + .toggle .star--4 {
  transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.theme-input:checked + .toggle .star--5 {
  transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.theme-input:checked + .toggle .star--6 {
  transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

label.toggle {
  margin: 0;
}

/* Category links in navigation */
summary .category-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}

summary .category-link:hover {
  text-decoration: none;
  opacity: 0.8;
}

.mobile-accordion-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid var(--border);
  padding: var(--padding-extrasmall) 0;
}

.mobile-accordion-item:first-child {
  border-top: 1px solid var(--border);
}

.mobile-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.mobile-category-link {
  flex: 1;
  padding: var(--padding-extrasmall);
  text-decoration: none;
  color: inherit;
}

.mobile-accordion-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--padding-extrasmall);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  transition: transform 0.3s ease;
}

.mobile-accordion-toggle svg {
  transition: transform 0.3s ease;
}

.mobile-accordion-item.active .mobile-accordion-toggle svg {
  transform: rotate(180deg);
}

.mobile-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 var(--padding-extrasmall);
}

.mobile-accordion-item.active .mobile-accordion-content {
  max-height: 10000px;
  padding: var(--padding-small) var(--padding-extrasmall);
}

.mobile-accordion-content .nav-item {
  padding: var(--padding-extrasmall);
  display: flex;
  align-items: center;
  gap: var(--gap-extrasmall);
  text-decoration: none;
  color: inherit;
}

.mobile-accordion-content .nav-item:hover {
  opacity: 0.8;
}

/* Ensure mobile menu is scrollable */
.navbar-menu.active {
  overflow-y: auto;
  max-height: 100vh;
}
.navbar-brand a {
  width: max-content;
  display: block;
}
.packages-title div:nth-child(3) {
  background-color: var(--background);
}
#packages-icons div:nth-child(n+5):nth-child(-n+7) {
  background-color: var(--background);
}
.feature-group .flex-row div:nth-child(n+5):nth-child(-n+7) {
  background-color: var(--background);
}
.grecaptcha-badge {
  width: 70px !important;
  /* overflow: hidden !important; */
  transition: all 0.3s ease !important;
  right: 14px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

/* Blog Styles */

/* Blog Grid Layout */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap-medium);
  margin-top: var(--padding-medium);
}

/* Blog Card */
.blog-card {
  background-color: var(--surface);
  border-radius: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--surface);
  transition: all 0.3s ease;
}

.blog-card:hover {
  border: 1px solid var(--text-color);
}

.blog-card-image {
  width: 100%;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: var(--padding-small);
  display: flex;
  flex-direction: column;
  gap: var(--gap-small);
  flex: 1;
}

.blog-card-meta {
  text-transform: uppercase;
  font-size: 0.9rem;
  opacity: 0.7;
}

.blog-card-title {
  margin: 0;
  font-size: var(--h3);
}

.blog-card-title a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-card-title a:hover {
  color: var(--primary);
}

.blog-card-excerpt {
  font-size: var(--p);
  line-height: var(--line-height);
  color: var(--text-color);
  flex: 1;
}

/* Blog Post Header */
.blog-post-header {
  margin-bottom: var(--padding-medium);
}

.blog-post-header img {
  width: 100%;
  border-radius: 0.5rem;
}

/* Blog Post Meta */
.blog-post-meta {
  font-size:var(--p);
  text-transform: uppercase;
}

.blog-post-meta .date {
  opacity: 0.8;
}

/* Blog Post Excerpt */
.blog-post-excerpt {
  font-size: 1.2rem;
  line-height: var(--line-height);
}

/* Blog Post Content */
.blog-post-content {
  padding: var(--padding-small) 0;
}

.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
  margin-top: var(--padding-medium);
  margin-bottom: var(--padding-small);
}

.blog-post-content p {
  margin-block: var(--padding-small);
}

.blog-post-content img {
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
}

.blog-post-content a {
  color: var(--primary);
  text-decoration: underline;
}

.blog-post-content a:hover {
  color: var(--secondary);
}

/* Social Sharing */
.blog-social-share {
  /* border-top: var(--border-width) solid var(--border);
  border-bottom: var(--border-width) solid var(--border); */
  /* padding: var(--padding-medium) 0;
  margin: var(--padding-medium) 0; */
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--gap-medium);
  flex-wrap: wrap;
}

.blog-social-share-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.blog-social-icons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.blog-social-share .icon-button {
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background-color: var(--surface) !important;
  border: var(--border-width) solid var(--border) !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
}

.blog-social-share .icon-button:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  transform: translateY(-2px);
}

.blog-social-share .icon-button:hover svg {
  fill: white !important;
}

.blog-social-share .icon-button svg {
  width: 20px !important;
  height: 20px !important;
}

/* Related Posts */
.blog-related-posts {
  margin-top: var(--padding-large);
}

.blog-related-posts h2 {
  margin-bottom: var(--padding-small);
  font-size: var(--h2);
}

.blog-post-navigation h3 {
  margin-bottom: var(--padding-small);
}

.blog-post-navigation .blog-grid {
  grid-template-columns: repeat(auto-fill, minmax(300px, 400px));
  justify-content: start;
}

/* Reading Time */
.blog-post-divider {
  margin: 0 var(--padding-extrasmall);
  opacity: 0.5;
}

.reading-time {
  opacity: 0.8;
}

/* Table of Contents */
.blog-toc {
  background-color: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: 0.5rem;
  padding: var(--padding-small);
}

.blog-toc h3 {
  margin: 0 0 var(--padding-small) 0;
  font-size: 1rem;
  font-weight: 700;
}

.toc-nav {
  display: flex;
  flex-direction: column;
  gap: var(--gap-extrasmall);
}

.toc-link {
  color: var(--text-color);
  text-decoration: none;
  padding: var(--padding-extrasmall) 0;
  margin: 0 !important;
  transition: color 0.3s ease;
  display: block;
}

.toc-link:hover {
  color: var(--primary);
}

.toc-h2 {
  font-weight: 600;
}

.toc-h3 {
  padding-left: var(--padding-small);
  opacity: 0.8;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination-links {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
}

.pagination-link {
  display: flex;
  align-items: center;
  gap: var(--gap-extrasmall);
  padding: var(--padding-extrasmall) var(--padding-small);
  color: var(--text-color);
  text-decoration: none;
  border: var(--border-width) solid var(--border);
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  font-weight: 600;
}

.pagination-link:hover {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

.pagination-link svg {
  width: 20px;
  height: 20px;
}

.pagination-numbers {
  display: flex;
  gap: var(--gap-extrasmall);
}

.pagination-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: var(--padding-extrasmall) var(--padding-small);
  color: var(--text-color);
  text-decoration: none;
  border: var(--border-width) solid var(--border);
  border-radius: 0.25rem;
  transition: all 0.3s ease;
  font-weight: 600;
}

.pagination-number:hover {
  background-color: var(--surface);
}

.pagination-number.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-small);
  }
  
  .blog-post-navigation a {
    font-size: 1.8rem;
  }
  
  .blog-card-image img {
    height: 200px;
  }
}