/* Prikaz svih usluga - početak */

.home-page-text {
  text-align: center;
  color: #000;                /* was #414141 */
}

.home-page-text-paragraph {
  font-size: 2rem;
  padding: 1rem;
}

body.creative-layout .home-page-text-paragraph {
  font-size: 2.4rem;
}

body.creative-layout .home-page-text {
  background-color: #DBE9B7;  /* Creative unchanged */
}

/* General styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* Container for service cards */
.service-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Default: 4 cards per row for desktop */
  gap: 1.25rem; /* 20px equivalent in rem */
  padding: 1.25rem; /* 20px equivalent in rem */
}

/* Individual service card styling
   (the card itself is now an <a>) */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  background: #fff;
  border: 0.063rem solid #000;       /* was #ddd */
  border-radius: 0.625rem;           /* 10px */
  text-align: center;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);  /* subtle base shadow */
  padding: 1.25rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;             /* remove underline */
  color: inherit;                    /* keep text color consistent */
  position: relative;                /* for safe stacking */
  cursor: pointer;
}

/* ===== Desktop-only hover / focus interactions ===== */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-0.625rem);
    /* IMPORTANT: do NOT add a stronger box-shadow on hover (prevents big rectangle) */
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  }

  .service-card h2:hover {
    transform: translateY(-0.313rem);
  }

  /* Desktop-only hover effects on media:
     Keep the gentle scale, but NO shadow. */
  .service-card img:hover,
  .service-card dotlottie-player:hover {
    transform: scale(1.05);
    box-shadow: none !important;  /* prevent rectangle */
  }
}

/* Keyboard accessibility stays everywhere */
.service-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25), 0 0.375rem 0.75rem rgba(0, 0, 0, 0.2);
}

/* Images and lottie players inside cards */
.service-card img,
.service-card dotlottie-player {
  outline: none;
  border: none;
  background: transparent;
  /* Make absolutely sure there is NEVER a shadow box around media */
  box-shadow: none !important;
  transition: transform 0.2s ease;
}

/* Headings */
.service-card h2 {
  color: #000;                 /* was #976ED7 */
  font-size: 1.5rem;
  margin: 0 0 0.625rem 0;
  transition: transform 0.2s ease;
}

/* Paragraphs */
.service-card p {
  color: #000;                 /* was #414141 */
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

/* Defensive: if any nested links appear, keep styles clean */
.service-card a {
  text-decoration: none;
  color: inherit;
}

/* ===== Touch devices: neutralize any :hover ===== */
@media (hover: none), (pointer: coarse) {
  .service-card:hover,
  .service-card h2:hover,
  .service-card img:hover,
  .service-card dotlottie-player:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
}

/* Responsive layout for medium screens */
@media (max-width: 1200px) {
  .service-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive layout for small screens */
@media (max-width: 768px) {
  .service-container {
    grid-template-columns: 1fr;
    gap: 0.938rem;
  }

  .service-card {
    padding: 0.938rem;
  }
}

/* Prikaz svih usluga - kraj */






/* Kartice "Our Unique Solutions" Home page desktop High-tech layout- početak */

/* Hide on creative layout - this element should only show on high-tech */
html.creative-layout .high-tech-kartice,
body.creative-layout .high-tech-kartice {
  display: none !important;
}

/* Show on desktop, hide on tablets/phones */
@media (max-width: 1024px) {
  .high-tech-kartice { 
    display: none !important; 
  }
}

/* Minimal black & white */
.high-tech-kartice { color:#000; }
.custom-widget { max-width:1200px; margin:0 auto; }

/* Card field (larger) */
.cards{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, minmax(220px, 280px)); /* bigger */
  gap:32px;
  justify-content:center;
  padding:80px 28px 120px;                               /* bigger */
  perspective:1600px;                                    /* stronger 3D */
  transform-style:preserve-3d;
}

/* ---- COVER (bigger box + rounded corners + stronger 3D) ---- */
.cover{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  z-index:2;
  transition:opacity .5s ease;
}
.cover-box{
  display:inline-block;
  border:2px solid #000;
  border-radius:20px;               /* more rounded */
  padding:26px 44px;                /* bigger */
  background:#fff;
  font-size:2.05rem;                /* bigger text */
  letter-spacing:.02em;
  transform-style:preserve-3d;
  transform:translateZ(0);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  transition:transform .4s ease, box-shadow .4s ease;
}
.cover:hover .cover-box,
.cover-box:focus{
  transform:rotateX(16deg) rotateY(-14deg) translateZ(36px);
  box-shadow:0 26px 70px rgba(0,0,0,.32);
}

/* reveal cards while pointer is in field or once focused from keyboard */
.cards:hover .cover,
.cards:focus-within .cover,
.cover-box:focus { opacity:0; pointer-events:none; }

/* ---- TILES (larger + reveal 3D pop) ---- */
.tile{
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; align-items:center;
  gap:16px;
  transform-style:preserve-3d;
  /* Reveal animation baseline */
  opacity:0;
  transform:translateY(18px) rotateX(8deg) scale(.98);
  transition:
    transform .55s cubic-bezier(.2,.75,.2,1),
    box-shadow .28s ease,
    opacity .55s ease;
}
/* Staggered reveal */
.cards:hover .tile,
.cards:focus-within .tile{ opacity:1; transform:none; }
.tile:nth-of-type(1){ transition-delay:.02s; }
.tile:nth-of-type(2){ transition-delay:.07s; }
.tile:nth-of-type(3){ transition-delay:.12s; }
.tile:nth-of-type(4){ transition-delay:.17s; }
.tile:nth-of-type(5){ transition-delay:.22s; }

/* framed image area (bigger, rounded corners, deeper hover) */
.frame{
  width:100%; height:240px;                              /* bigger height */
  border:1px solid #000; background:#fff;
  display:grid; place-items:center;
  position:relative;
  border-radius:16px;                                     /* ROUND CORNERS */
  overflow:hidden;                                        /* keep content clipped to radius */
  transform:translateY(10px) scale(.985);
  opacity:0;
  transition:opacity .35s ease, transform .3s ease, box-shadow .25s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
  will-change:transform, box-shadow;
}
/* reveal frames */
.cards:hover .frame,
.cards:focus-within .frame{ opacity:1; transform:none; }
/* 3D hover on each card, anywhere you hover */
.tile:hover .frame, .tile:focus-visible .frame{
  box-shadow:0 18px 44px rgba(0,0,0,.28);
  transform:translateY(-6px) scale(1.03) rotateX(3deg);
}
/* subtle inner gloss when hovered for extra depth */
.tile:hover .frame::after,
.tile:focus-visible .frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.05), transparent 60%);
  pointer-events:none;
}

/* images inside cards */
.frame img{
  max-width:94%; max-height:94%;
  object-fit:contain; display:block;
}

/* special contents (bigger) */
.badge-big{ font-size:6.6rem; font-weight:700; opacity:.9; line-height:1; }
.svg-e-commerce{ width:150px; height:150px; fill:#000; opacity:.9; }

/* labels under cards (slightly bigger) */
.label{
  font-size:1.08rem; line-height:1.32;
  text-align:center;
  transition:transform .2s ease;
}
.tile:hover .label, .tile:focus-visible .label{ transform:translateY(-2px); }

/* ---- Dual Design overlay content (inside the clickable card) ---- */
.tile.dual-design .frame{ position:relative; }
.tile.dual-design .custom-content{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:18px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.35));
  backdrop-filter:saturate(140%) blur(1px);
}
.tile.dual-design .top-text,
.tile.dual-design .bottom-text{
  font-size:.95rem; line-height:1.35;
}
.tile.dual-design .click-button{
  display:inline-block;
  padding:10px 18px;
  border:1px solid #000;
  background:#fff;
  font-weight:700;
  border-radius:999px;                    /* pill button */
  cursor:pointer;
  user-select:none;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.tile.dual-design:hover .click-button,
.tile.dual-design:focus-visible .click-button{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}

/* Responsiveness */
@media (max-width: 1200px){
  .cards{ grid-template-columns:repeat(3, minmax(200px, 1fr)); }
}
@media (max-width: 720px){
  .cards{ grid-template-columns:repeat(2, minmax(190px, 1fr)); gap:22px; padding:48px 16px 80px; }
  .frame{ height:220px; }
  .cover-box{ font-size:1.8rem; padding:22px 34px; }
}
@media (max-width: 420px){
  .cards{ grid-template-columns:1fr; }
  .frame{ height:210px; }
  .cover-box{ font-size:1.6rem; padding:20px 28px; }
}

/* Demo-only highlight when button is activated */
.tile.dual-design.dd-active .frame {
  box-shadow: 0 26px 72px rgba(0,0,0,.35), 0 0 0 3px #000 inset;
  transform: translateY(-6px) scale(1.03) rotateX(3deg);
}

/* ——— FORCE REST: neka pobedi sve :hover / :focus-visible / :focus-within ——— */
.cards:hover .tile.force-rest .frame,
.cards:focus-within .tile.force-rest .frame,
.tile.force-rest .frame,
.tile.force-rest:hover .frame,
.tile.force-rest:focus-visible .frame{
  transform: none !important;          /* mirna pozicija (bez podizanja) */
  box-shadow: none !important;
}
.cards:hover .tile.force-rest .label,
.cards:focus-within .tile.force-rest .label,
.tile.force-rest .label{ transform: none !important; }
.cards:hover .tile.force-rest .frame::after,
.cards:focus-within .tile.force-rest .frame::after,
.tile.force-rest .frame::after{ content: none !important; }


/* Kartice "Our Unique Solutions" Home page desktop High-tech layout- kraj */





/* Home page kartice "Our Unique solutions" na oba layout-a za mobile i na creative layoutu za desktop  - početak */

/* Main Card Styles */
.card {
  overflow: visible;
  width: 11.875rem; /* 190px */
  height: 15.875rem; /* 254px */
  transition: all 0.3s ease-in-out; /* Smooth resizing */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; /* cleaner touch feel */
  -webkit-user-select: none;
  user-select: none;
}

.card .zero { font-size: 9rem !important; line-height: 1 !important; }
.card .unique-text { font-size: 1.2rem !important; line-height: 1 !important; }
.card p { font-size: 0.9rem !important; line-height: 1.5 !important; }

@media (max-width: 768px) {
  .card p { font-size: 1.2rem !important; line-height: 1.4 !important; }
  .card .unique-text { line-height: 1.1 !important; }
}

.content {
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 300ms;
  box-shadow: 0 0 0.625rem 0.0625rem #000000ee;
  border-radius: 0.3125rem;
  align-items: center;
  text-align: center;
}

.front, .back {
  background-color: #151515;
  position: absolute; width: 100%; height: 100%;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 0.3125rem;
  overflow: hidden;
}

.back { display: flex; align-items: center; justify-content: center; }

.back::before {
  position: absolute; content: ''; display: block;
  width: 10rem; height: 160%;
  background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
  animation: rotation_481 10.5s infinite linear;
}

.back-content {
  position: absolute; width: 97%; height: 97%;
  background-color: #151515;
  border-radius: 0.3125rem;
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 1.25rem;
  padding: 2.1875rem 0.9375rem;
  font-size: 1rem; line-height: 1.5;
}

/* ⛔ Hover-to-flip only on real desktops */
@media (hover: hover) and (pointer: fine) {
  .card:hover .content { transform: rotateY(180deg); }
}

@keyframes rotation_481 { 0%{transform:rotateZ(0)} 100%{transform:rotateZ(360deg)} }

.front { transform: rotateY(180deg); color: #fff; }

.front .front-content {
  position: absolute; width: 100%; height: 100%;
  padding: 0.625rem;
  flex-direction: column; justify-content: space-between;
  font-size: 1rem; line-height: 1.5;
}

/* Buttons & CTA links */
.highlight-button,
.plan-info-btn {
  margin-top: .75rem; padding: .5rem 1rem;
  background-color: #029a2c;
  border: none; border-radius: .625rem;
  color: #fff; cursor: pointer; transition: background-color .3s;
  font-size: 1rem; line-height: 1.5;
}

/* Make anchor look like a button */
a.plan-info-btn {
  display: inline-block;
  text-decoration: none;
}
a.plan-info-btn:visited { color: #fff; }

/* Optional focus ring for accessibility */
.plan-info-btn:focus-visible,
.highlight-button:focus-visible {
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 2px;
}

.content.flipped { transform: rotateY(180deg); }

/* Layout */
.card-container {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 1rem; margin: 0 auto; background-color: #CEE5ED; padding: 1rem; place-items: center;
}

@media (max-width:1024px) and (min-width:769px){
  .card-container{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .card:nth-child(3){ grid-column:span 2; justify-self:center; }
  .card{ width:14rem; height:18.5rem; }
  .front-content .dualdesign-text-front{ line-height:2.2; }
  .front-content .b2b-b2c-front{ line-height:2.2; }
}

@media (max-width:768px){
  .card-container{ grid-template-columns:1fr; }
  .card{ width:16rem; height:21rem; }
  .front-content .dualdesign-text-front{ font-size:1.2rem; line-height:2.2; }
  .front-content .b2b-b2c-front{ font-size:1.1rem; line-height:1.7; }
  .plan-info-btn, .highlight-button{ font-size:1.1rem; }
  .unique-text{ font-size:1.5rem !important; }
  .dualdesign-text-front, .b2b-b2c-front{ font-size:1.2rem !important; line-height:2.2 !important; }
  .b2b-b2c-front{ font-size:1.1rem !important; line-height:1.5 !important; }
}

@media (min-width:1025px){
  .card{ width:11.875rem; height:15.875rem; }
  .back-content, .front .front-content{ font-size:1rem; line-height:1.4; }
  .highlight-button, .plan-info-btn{ font-size:1rem; line-height:1.4; }
  .front-content .dualdesign-text-front{ line-height:2; }
}

/* misc */
.zero{ color:#03c03c; }
.dualdesign-text{ margin-top:.625rem; }
.dualdesign-back{ margin-top:1.0625rem; }
.dualdesign-text-front{ line-height:1.5; }
.b2b-b2c-front{ line-height:1.8; font-size:.8rem; }
.dualdesign-front-content .dualdesign-text-front{ margin-bottom:0 !important; margin-top:.9375rem; }
.custom-e-comerce-front{ margin-bottom:.625rem; }
body.creative-layout .card-container{ background-color:#DBE9B7; }

@media (min-width:1025px){
  body.high-tech-layout .card-container,
  body.high-tech-layout .our-unique-solutions{ display:none; }
}

/* High-tech green sweep */
body.high-tech-layout .back::before{
  background:linear-gradient(90deg,transparent,#08FF08,#08FF08,#08FF08,#08FF08,transparent);
}

/* Home page kartice "Our Unique solutions" na oba layout-a za mobile i na creative layoutu za desktop  - kraj */





/* Why our services are your solution? - početak */

.why-our-services { cursor: default; }

.why-our-services p {
  color: #000;                     /* was white */
}

/* Creative */
body.creative-layout .why-our-services {
  background-color: #836953;
}
body.creative-layout .why-our-services h2 {
  color: #DBE9B7;
}

/* High-tech */
body.high-tech-layout .why-our-services {
  background-color: gray;          /* was #00226B */
}
body.high-tech-layout .why-our-services h2 {
  color: #000;                     /* was #08FF08 */
}

/* Why our services are your solution? - kraj */





/* Tehnologije seamless animacija Home page - početak */
.showcase {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

body.creative-layout .showcase {
  background-color: #DBE9B7;       /* Creative unchanged */
}

.slider {
  display: flex;
  width: calc(200px * 12 + 20px * 11);
  animation: slide 10s linear infinite;
}

.item {
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-right: 20px;
}

.item img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

/* Keyframes for seamless scrolling */
@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-200px * 6 - 20px * 6)); }
}

/* Tehnologije seamless animacija Home page - kraj */