@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=REM:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 00;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: gray rgba(0, 0, 0, 0);
  scrollbar-width: thin;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}
.w-50 {
  width: unset;
}
.w-full {
  width: unset;
}
.w-20 {
  width: 20%;
}
.w-25 {
  width: 24.06%;
}
.w-33 {
  width: 32.5%;
}
.w-100 {
  width: 100%;
}
.w-full {
  width: 100%;
}
.p-80 {
  padding-top: 80px;
}
.pb-20 {
  padding-bottom: 40px;
}
.w-400px {
  width: 400px;
}
.p-left {
  padding-left: 5%;
}
/* Header start =============================================================== */
.header {
  display: flex;
  justify-content: center;
  background-color: #080202;
  padding: 30px 0;
  position: relative;
}
.container {
  width: 90%;
  max-width: 1600px;
}
.w-60 {
  width: 61%;
}
.scroll-container {
  width: 100%;
  max-width: 1600px;
}
.small-container {
  width: 90%;
  max-width: 1200px;
}
.header-inner-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  display: flex;
  align-items: center;
  position: relative;
}
.navbar ul {
  display: flex;
  gap: 40px;
}
.navbar ul li {
  position: relative;
}
.navbar ul li a {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  display: flex;
  gap: 10px;
  color: #fff;
  align-items: center;
}
.navbar ul li a:hover {
  color: #ca262b;
}
.navbar ul li a:hover svg path {
  fill: #ca262b;
}

/* mobile navbar */
.navbar-m {
  margin-top: 20px;
}

.navbar-m > ul > li > a {
  font-family: "DM Sans", sans-serif;
  padding: 18px 35px;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  gap: 10px;
  color: #000000;
  align-items: center;
}
.navbar-m ul li a:hover {
  color: #ca262b;
}
.navbar-m ul li a:hover svg path {
  fill: #ca262b;
}

/* mega menu */
.mega-menu {
  position: fixed;
  background-color: #ffffff;
  padding: 40px 40px 80px 40px;
  border-radius: 10px;
  display: none;
  gap: 30px;
  width: 1300px;
  z-index: 9;
  left: calc(50% - 700px);
  top: 110px;
}

.mega-menu.active {
  display: flex;
  justify-content: space-between;
	z-index:100;
}

.mega-menu-m {
  padding: 30px 35px;
  border-radius: 10px;
  width: 100%;
  /* height: 250px; */
  /* overflow: scroll; */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.parent {
  color: #333333;
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.mega-menu ul,
.mega-menu-m ul {
  flex-direction: column;
  gap: 12px;
  display: flex;
}
.mega-menu ul li a,
.mega-menu-m ul li a {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #666666;
}

.mega-menu-two {
  position: fixed;
  background-color: #ffffff;
  padding: 40px 40px 80px 40px;
  border-radius: 10px;
  display: none;
  gap: 30px;
  width: 1300px;
  z-index: 9;
  left: calc(50% - 700px);
  top: 110px;
}

.mega-menu-two-m {
  margin: 20px 0 0 0;
  padding: 10px 35px;
  border-radius: 10px;
  width: 100%;
  /* height: 250px;
  overflow: scroll; */
  display: none;
  flex-direction: column;
  gap: 30px;
}
.mega-menu-two-m > ul {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.mega-menu-two.active {
  display: flex;
  justify-content: space-around;
}

.mega-menu-two ul {
  flex-direction: column;
  gap: 40px;
}
.mega-menu-two ul li a {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #666666;
}
.active-parent {
  background-color: #e5e5e5;
}
/* Hide mega menus by default */
.mega-menu-m,
.mega-menu-two-m {
  display: none;
}

/* Show when active */
.mega-menu-m.active,
.mega-menu-two-m.active {
  display: flex;
}

.icon-parent {
  display: flex;
  gap: 20px;
}

#mega-menu-two-m .icon-parent {
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon-parent span {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #000000;
}
.icon-parent span p {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #666666;
}

#mega-menu-two-m .icon-parent svg {
  width: 40px;
}

/* Buttons and other styles remain the same */
.buttons {
  display: flex;
  gap: 20px;
  align-items: center;
}
.btn-red-inv {
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ca262b;
  padding: 13px 25px;
  border: 1px solid #ca262b;
  border-radius: 4px;
  background-color: transparent;
  transition: all 0.3s ease;
}
.btn-red-inv:hover {
  color: #ffffff;
  border: 1px solid #ca262b;
  background-color: #ca262b;
  transition: all 0.3s ease;
}
.btn-red {
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  padding: 13px 25px;
  border: 1px solid #ca262b;
  border-radius: 4px;
  background-color: #ca262b;
  transition: all 0.3s ease;
}
.btn-red:hover {
  color: #ca262b;
  border: 1px solid #ca262b;
  background-color: transparent;
  transition: all 0.3s ease;
}
.btn-white {
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000000;
  padding: 13px 25px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  background-color: #ffffff;
  transition: all 0.3s ease;
}
.btn-white:hover {
  color: #000000;
  border: 1px solid #dddddd;
  background-color: #dddddd;
  transition: all 0.3s ease;
}
.add-to-cart {
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000000;
  padding: 7px 20px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background-color: #d9d9d9;
  transition: all 0.3s ease;
}
.add-to-cart:hover {
  color: #ffffff;
  border: 1px solid #ca262b;
  background-color: #ca262b;
  transition: all 0.3s ease;
}
.remove-from-cart {
    cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 7px 20px;
  border-radius: 4px;
  color: #ffffff;
  border: 1px solid #ca262b;
  background-color: #ca262b;
  transition: all 0.3s ease;
}
.remove-from-cart:hover{
      color: #000000;
  border: 1px solid #d9d9d9;
 background-color: #d9d9d9;
  transition: all 0.3s ease;
}
}
.btn-black {
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  padding: 13px 30px;
  border: 1px solid #000000;
  border-radius: 4px;
  background-color: #000000;
  transition: all 0.3s ease;
}
.btn-black:hover {
  color: #ca262b;
  border: 1px solid #ca262b;
  background-color: #ffffff;
  transition: all 0.3s ease;
}
.btn-grey {
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  padding: 13px 30px;
  border: 1px solid #ffffff;
  border-radius: 4px;
  background-color: #211b1b;
  transition: all 0.3s ease;
}
.btn-grey:hover {
  color: #000000;
  border: 1px solid #ffffff;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

/* language dropdown */
.language-dropdown {
  position: relative;
  display: inline-block;
}

.language-button {
  background: #080202;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-button img.arrow {
  width: 12px;
  filter: brightness(0) invert(1); /* makes arrow white */
}

.language-options {
  display: none;
  position: absolute;
  background-color: #080202;
  border: none;
  z-index: 1;
  width: 100%;
}

.language-options div {
  padding: 5px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-options div:hover {
  background-color: #666666;
}

.language-dropdown.open .language-options {
  display: block;
}

.language-flag {
  width: 20px;
  height: auto;
}

.cart svg{
    width: 48px;
    height: 48px;
}


/* breadcrumb */
.breadcrumb {
  display: none;
}
.breadcrumb input {
  display: none;
}
.brd-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #393535;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.brd-btn:hover {
  background-color: #5c5a5a;
  transition: all 0.3s ease;
}

/* mobile menu ====================================================================================== */

.mobl-menu {
  display: none;
  background-color: #ffffff;
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100vh;
  max-height: 100vh;
  overflow: auto;
  z-index: 1000;
}

/* Add an overlay when menu is active */
body.menu-open {
  overflow: hidden; /* Prevent scrolling */
}

body.menu-open::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

body:has(#mobile-menu:checked) .mobl-menu {
  display: block;
}
.logo-mobile {
  display: flex;
  padding: 30px 35px 0 35px;
  justify-content: space-between;
  align-items: center;
}
.close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: #cccccc;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.3s ease;
}
.close-btn:hover {
  background-color: #5c5a5a;
  transition: all 0.3s ease;
}

.lang-mobile {
  padding: 20px 35px 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cnt-btn-mob {
  padding: 20px 35px 20px 35px;
}

/* footer ========================================================================= */
.footer {
  padding: 60px 0 0 0;
  display: flex;
  justify-content: center;
  background-color: #080202;
}
.inner-footer-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gap {
  gap: 30px;
}
.links h6 {
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: #ffffff;
  text-transform: uppercase;
}
.links ul {
  display: flex;
  gap: 6px;
  flex-direction: column;
}
.links ul li a {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #9c9999;
  transition: all 0.3s ease;
  display: inline-block;
}
.links ul li a:hover {
  transform: translateX(5px);
  transition: all 0.3s ease;
  color: #ffffff;
}
.social-links {
  display: flex;
  justify-content: space-between;
}
.social-links a:hover {
  transition: all 0.3s ease;
  transform: scale(1.1);
}
.copyright {
  display: flex;
  justify-content: center;
  background-color: #080202;
}
.inner-copyright {
  border: none;
  margin-top: 30px;
  padding: 30px 0;
  border-top: 1px solid #fefefe66;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
.inner-copyright span {
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
}
.inner-copyright div ul {
  display: flex;
  gap: 20px;
}
.inner-copyright div ul li a {
  text-decoration: underline;
  transition: all 0.3s ease;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 16px;
}
.inner-copyright div ul li a:hover {
  color: #ca262b;
}

/* form section */
.form-section .logo {
  text-align: center;
  margin-bottom: 20px;
}

.form-section .logo img {
  max-width: 200px; /* ili koliko želiš */
  height: auto;
}
.form-section { 
  background:#ffffff !important; 
  color:#080202; 
}
.form-section {
  display: flex;
  justify-content: center;
  padding: 80px 0;
}
.inner-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.left-container {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 10% 0 0;
}
.right-container {
  width: 50%;
  display: flex;
  flex-direction: column;
}
.title {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.title h2 {
  font-family: "DM Sans", sans-serif;
  color: #080202;
  font-weight: 500;
  font-size: 64px;
}
.title h2 span {
  color: #ca262b;
  font-size: 64px;
}
.title p {
  font-family: "DM Sans", sans-serif;
  color: #9c9a9a;
  font-weight: 400;
  font-size: 22px;
}
.p-text {
  font-family: "DM Sans", sans-serif;
  color: #9c9a9a;
  font-weight: 400;
  font-size: 20px;
}
.text-flex {
  width: 60%;
  display: flex;
  padding: 80px 0 0 0;
  justify-content: space-between;
}
.text-box-b h2 {
  font-family: "DM Sans", sans-serif;
  color: #080202;
  font-weight: 400;
  font-size: 64px;
}
.text-box-b span {
  font-family: "DM Sans", sans-serif;
  color: #6a6767;
  font-weight: 400;
  font-size: 20px;
}





/* Ninja form code */
.nf-form-fields-required , .ninja-forms-req-symbol{
    display: none;
}
.nf-field-element input , .field-wrap textarea{
     border: 1px solid #FFF3;
  background-color: #FFFFFF0A;
  height: 60px !important;
  border-radius: 4px;
  padding: 10px 20px;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.field-wrap textarea
{
    height: 200px !important;
}
.nf-field-element input[type="submit"]{
    cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  width: 100% !important;
  padding: 14px 25px;
  border: 1px solid #ca262b;
  border-radius: 4px;
  background-color: #ca262b;
  transition: all 0.3s ease;
}
.nf-field-element input[type="submit"]:hover
{
    color: #ca262b;
  border: 1px solid #ca262b;
  background-color: transparent;
  transition: all 0.3s ease;
}



/* Ninja form code */
.white-bg .nf-field-element input , .white-bg .field-wrap textarea{
     border: 1px solid #08020233;
  background-color: #0802020A;
  height: 60px !important;
  border-radius: 4px;
  padding: 10px 20px;
  color: #000000;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
}
.white-bg .field-wrap textarea
{
    height: 200px !important;
}
.white-bg .nf-field-element input[type="submit"]{
    cursor: pointer;
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  width: 100% !important;
  padding: 14px 25px;
  border: 1px solid #ca262b;
  border-radius: 4px;
  background-color: #ca262b;
  transition: all 0.3s ease;
}
.white-bg .nf-field-element input[type="submit"]:hover
{
    color: #ca262b;
  border: 1px solid #ca262b;
  background-color: transparent;
  transition: all 0.3s ease;
}
/* ===== Sticky Header + Mega menu fixovi ===== */
:root{
  --header-h: 88px;                 /* desktop visina headera (po potrebi prilagodi) */
  --header-bg: #0F0F10;             /* pozadina headera */
}

/* Header je STICKY – uvijek dostupan na vrhu */
/* Header crne boje */
/* Header ostaje crn i iznad svega dok je zatvoren meni */
/* 1) Header ostaje crn (kao što želiš) */
.header{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #000; /* crni header */
}

/* 2) Kad je otvoren mobilni meni – sakrij header */
body.menu-open .header{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* 3) Mobilni overlay (meni) iznad svega i potpuno klikan */
.mobl-menu{
  position: fixed;
  inset: 0;
  z-index: 10000;      /* iznad apsolutno svega */
  display: none;       /* zatvoren po defaultu */
  background: #fff;    /* full pozadina da se ništa "ne probija" ispod */
  pointer-events: auto;
}

/* 4) Checkbox upravlja otvaranjem menija */
#mobile-menu:checked ~ .mobl-menu{
  display: block;
}

/* 5) Dok je meni otvoren, UGASI SVA globalna zatamnjenja i blokere klikova */
body.menu-open::before,
body.menu-open::after,
body.menu-open .overlay,
body.menu-open .site-overlay,
body.menu-open .mega-overlay,
body.menu-open .header::before,
body.menu-open .header::after,
body.menu-open .mega-menu::before,
body.menu-open .mega-menu::after,
body.menu-open .mega-menu.active::before,
body.menu-open .mega-menu.active::after{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 6) Ponekad se koristi filter/backdrop za “zamračivanje” — neutralizuj to dok je meni otvoren */
body.menu-open,
body.menu-open *{
  filter: none !important;
  backdrop-filter: none !important;
}

/* 7) Stranicu zaključaj na scroll samo kad je meni otvoren (ne utiče na klikove) */
body.menu-open{
  overflow: hidden;
}


/* Anchor odmak da sekcije ne idu ispod sticky headera */
[id]{ scroll-margin-top: var(--header-h); }

/* Responsive visina headera (po potrebi korigiraj) */
@media (max-width: 1024px){
  :root{ --header-h: 72px; }
}

/* WordPress admin bar offset (desktop i mob) */
body.admin-bar .header{ top: 32px; }
@media (max-width: 782px){
  body.admin-bar .header{ top: 46px; }
}

/* Uvijek rezerviraj scrollbar da ne "skakuće" širina */
html{ overflow-y: scroll; }

/* (Opcionalno) poboljšaj klik zonu na dropdown trigerima */
.mega-menu-trigger,
.mega-menu-trigger-m{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* (Opcionalno) suptilna tranzicija za mega menije ako se otvaraju na hover/JS */
.mega-menu, .mega-menu-two, .mega-menu-m, .mega-menu-two-m{
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
/* Ukloni svaku sjenu s headera */
.header,
.header.is-scrolled{
  box-shadow: none !important;
}
/* Ako koristiš klasu .open na parentu za prikaz (JS/hover), možeš dodati:
.has-mega-menu:hover > .mega-menu,
.has-mega-menu.open > .mega-menu{ opacity:1; visibility:visible; transform:none; }
*/