body {
    scroll-behavior: smooth; 
    overflow-x: hidden;
}
.navbar {
    background-color: white;
    padding: 3rem 0;
}
.navbar .container-fluid {
    display: flex;
    justify-content: center;
}
.navbar-nav {
    display: flex;
    gap: 5rem;
}
.navbar-nav .nav-link {
    font-size: 18px;
    font-weight: 700;
    color: rgba(30, 30, 30, 0.5);
    text-transform: uppercase;
}
.navbar-nav .nav-link.active {
    color: rgba(30, 30, 30, 1);
}
.video-section {
    background: rgba(0, 0, 0, 1);
    color: white;
    text-align: center;
    padding: 15rem 1rem;
}

.reminder{
    padding-top: 6rem;
}

.reminder div{
    padding-left: 9rem;
}

.reminder p {
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 24px;
    
}

.reminder a {
  display: inline-block;
  width: 141px;
  height: 39px;
  padding: 10px 31px;
  border-radius: 32px;
  border: 1px solid rgba(255, 51, 51, 1);
  background: rgba(255, 51, 51, 1);
  color: #fff;
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  opacity: 1;
  transition: background 0.3s ease;
}

/* Hover efekt */
.reminder a:hover {
  background: rgba(220, 0, 0, 1);
}

/* ===================== REMINDER • responsive only (desktop ostaje isto) ===================== */

/* XL → LG: malo smanji lijevi offset i top razmak */
@media (max-width: 1200px){
  .reminder{ padding-top: clamp(4rem, 6vw, 6rem); }
  .reminder div{ padding-left: 6rem; } /* bilo 9rem u base */
}

/* LG (≤992px): kompaktniji lijevi padding i čitljiviji tekst */
@media (max-width: 992px){
  .reminder div{ padding-left: 3rem; }
  .reminder p{
    font-size: 20px;            /* 24 → 20 */
    line-height: 1.35;
    max-width: 62ch;            /* kontrola duljine retka */
  }
}

/* MD (≤768px): koristi rubne paddove umjesto velikog lijevog; sakrij <br> */
@media (max-width: 768px){
  .reminder{ padding-top: 3rem; }
  .reminder div{
    padding-left: 1.25rem;      /* više nije “gurnuto” udesno */
    padding-right: 1.25rem;
  }
  .reminder p{
    font-size: 18px;
  }
  .reminder p br{ display: none; } /* neka tekst prirodno prelama */
  .reminder a{
    margin-top: 12px;           /* mali razmak od teksta */
  }
}

/* SM (≤576px): još kompaktnije i gumb fleksibilniji */
@media (max-width: 576px){
  .reminder{ padding-top: 2rem; }
  .reminder div{
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .reminder p{
    font-size: 16px;
  }
  .reminder a{
    /* zadržava vizual, ali ne puca u više redova na mini ekranima */
    width: auto;
    padding: 10px 20px;
  }
}


.hero {
    background: #ffff;
    color: rgba(30, 30, 30, 1);
    text-align: center;
    margin-top: 7rem;
    padding-right: 10rem;
    margin-bottom: 3rem;
}
.hero h1{
    font-family: "Gantari", sans-serif;
    font-size: 180px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3rem;
}
.hero h2{
    color: rgba(0, 0, 0, 1);
    font-family: "Gantari", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 100%;
    padding-right: 26rem;
}
.hero span{
    font-family: "Gantari", sans-serif;
    font-size: 32px;
    color: rgba(0, 0, 0, 0.5);
    font-weight: 700;
    text-transform: none;
}

.text-image-section {
    background-color: rgba(0, 0, 0, 1);
    padding: 5rem 1rem;
    text-align: center;
}
.text-image-section h2 {
    color: rgba(255, 255, 255, 1);
    margin-bottom: 2rem;
    font-family: "Gantari", sans-serif;
    font-size: 164px;
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 35rem;
    margin-bottom: 8rem;
}
.text-image-section ul{
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 1);
    padding: 3rem;
    text-align: left;
    padding-left: 16rem;
    
}
.text-image-section ul h5{
    color: rgba(255, 255, 255, 1);
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
} 
.text-image-section ul h2{
    margin: 0;
    padding-right: 10rem;
    color: rgba(255, 255, 255, 1);
    text-transform: none;
    font-family: "DM Sans", sans-serif;
    font-weight: 500;
    font-size: 40px;
} 
.text-image-section ul h6{
    color: rgba(255, 255, 255, 0.5);
    font-family: "DM Sans", sans-serif;
    font-weight: 400;
    font-size: 18px;
} 

.mouse-follower {
    position: fixed; /* Use fixed positioning for consistent behavior */
    width: 50px; /* Adjust the size */
    height: 50px;
    border: 9px solid rgba(255, 255, 255, 1); /* Border to create the ring */
    border-radius: 50%; /* Makes it circular */
    pointer-events: none;
    mix-blend-mode: difference; /* Blends with the background */
    transition: transform 0.1s ease-out; /* Smooth movement */
    z-index: 9999; /* Ensure it's above other elements */
}

.text-image-section .row {
    align-items: center;
}
.text-list-section {
    background-color: rgba(0, 0, 0, 1);
    padding: 5rem 1rem;
}
.text-list-section h2 {
    padding-right: 35rem;
    color: rgba(255, 255, 255, 1);
    font-family: "Gantari", sans-serif;
    font-size: 164px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8rem;
}
.text-list-section h3 {
    color: rgba(255, 255, 255, 1);
    font-family: "Gantari", sans-serif;
    font-size: 64px;
    font-weight: 500;
}
.text-list-section .row {
    align-items: start;
}
.text-list-section .col-md-6 {
    padding: 1rem;
}
.text-list-section .hr-line {
    border: none;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    margin: 1rem 0;
}
.text-list-section .box {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 1);
    font-family: "Gantari", sans-serif;
    font-size: 18;
    font-weight: 500;
    max-width: 200px; /* Adjusted width for compact boxes */
    max-height: 35px; /* Fixed height for uniformity */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.text-list-section .box p {
    margin: 0;
    font-weight: 500;
}

.section-to-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s ease-out;
}

.section-to-animate.animate {
    opacity: 1;
    transform: translateY(0);
}

.image-gallery-section {
    padding: 5rem 1rem;
}
.image-gallery-section h2 {
    padding-left: 4rem;
    color: rgba(0, 0, 0, 1);
    font-family: "Gantari", sans-serif;
    font-size: 180px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8rem;
}
.image-gallery-section .image-wrapper {
    margin-bottom: 2rem;
    position: relative;
    z-index: 100000;
}
.image-gallery-section .image-wrapper img {
    max-width: 100%;
    cursor: none;
    height: auto;
}
.image-gallery-section .image-description {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:.75rem;
    margin-top:.75rem;
    width:100%;              /* vezano za širinu wrappera/kolone */
    max-width:100%;
    padding-inline:0;
    font-family: "Gantari", sans-serif;
    font-size:clamp(1rem, 2vw, 1.5rem);
    font-weight: 500;
    color: rgba(0, 0, 0, 1);
    line-height:1.2;
}
.image-gallery-section .extra-description {
    position:static !important; /* pregazi ako je negdje bilo absolute/right */
    right:auto !important;
    white-space:nowrap;
    opacity:.6;
    font-size:clamp(.95rem, 1.6vw, 1.25rem);
    color: rgba(0, 0, 0, 0.5);
    font-family: "Gantari", sans-serif;
    font-weight: 500;
    margin-left: auto;
}
.image-gallery-section .image-wrapper img {
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform, opacity;
    transform: translateY(0);
}
.image-wrapper{
  max-width:100%;
  overflow:visible;   /* ili hidden ako želiš sakriti sve što bi iscurilo */
}
.image-gallery-section .image-wrapper img.floating {
    transform: translateY(-30px);
    opacity: 0.95;
}
.image-gallery-section .image-wrapper img:hover {
    filter: blur(4px);
    
}

.image-gallery-section .hover-description {
    position: absolute;
    pointer-events: none;
    display: none;
    background: rgba(255, 51, 51, 1);
    color: rgba(255, 255, 255, 1);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100000;
}

/* =================== IMAGE GALLERY – responsive only (desktop ostaje isto) =================== */

/* XL → LG: malo smanji naslov i lijevi padding */
@media (max-width: 1200px){
  .image-gallery-section{ padding: 4rem 1.5rem; }
  .image-gallery-section h2{
    font-size: 120px;         /* 180 → 120 */
    padding-left: 2rem;
    margin-bottom: 5rem;
  }
}
@media (hover: none), (max-width: 768px){
  .image-gallery-section .image-wrapper img{
    transition: none !important;
    will-change: auto !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: auto !important;
  }
  .image-gallery-section .image-wrapper img.floating{
    transform: none !important;
    opacity: 1 !important;
  }
  .image-gallery-section .image-wrapper img:hover{
    filter: none !important;
  }
}
/* LG (≤992px): jednokolumni ritam, manji heading, neutraliziraj “gallery-*” pomake */
@media (max-width: 992px){
  .image-gallery-section{ padding: 3rem 1.25rem; }
  .image-gallery-section h2{
    font-size: 84px;
    padding-left: 1rem;
    margin-bottom: 2.75rem;
  }

  /* isključi dodatne utility paddinge/margine koji guraju slike */
  .gallery-pt-sm, .gallery-pl-xxl, .gallery-pt-xxl, .gallery-pr-lg{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* hover efekti nemaju smisla na touchu */
  .image-gallery-section .hover-description{ display: none !important; }
  .image-gallery-section .image-wrapper img{ cursor: auto; }
  .image-gallery-section .image-wrapper img:hover{ filter: none; }

  /* razmaci između blokova i captiona */
  .image-gallery-section .image-wrapper{ margin-bottom: 1.75rem; }
  .image-gallery-section .image-description{
    font-size: 1rem;          /* ~16px */
    gap: .5rem;
    margin-top: .5rem;
  }
  .image-gallery-section .extra-description{
    font-size: .95rem;        /* ~15px */
    opacity: .55;
  }
}

/* MD (≤768px): kompaktnije */
@media (max-width: 768px){
  .image-gallery-section{ padding: 2.25rem 1rem; }
  .image-gallery-section h2{
    font-size: 56px;
    padding-left: 0;
    margin-bottom: 3.75rem;
  }
}

/* SM (≤576px): najkompaktnije – lijepi ritam karta+caption */
@media (max-width: 576px){
  .image-gallery-section{ padding: 2rem .75rem; }
  .image-gallery-section h2{
    font-size: 44px;
    margin-bottom: 3.25rem;
  }
  .image-gallery-section .image-wrapper{ margin-bottom: 1.25rem; }
  .image-gallery-section .image-description{
    font-size: .95rem;
    margin-top: .4rem;
  }
  .image-gallery-section .extra-description{ font-size: .9rem; }
}

/* === Utilities: zamjena za bivše inline style-ove (responsivno) === */
.nav-logo-pad{ padding-left: clamp(1rem, 4vw, 3rem); }
.nav-last-pad{ padding-right: clamp(1rem, 5vw, 4rem); }


/* Galerija */
.gallery-pt-sm{ padding-top: clamp(1rem, 3vw, 3rem); }
.gallery-pl-xxl{ padding-left: clamp(1rem, 8vw, 10rem); }
.gallery-pt-xxl{ padding-top: clamp(2rem, 15vw, 20rem); }
.gallery-pr-lg{ padding-right: clamp(1rem, 6vw, 5rem); }


/* Footer */
.footer-row-pad{ padding-bottom: clamp(2rem, 8vw, 10rem); }
.contact-left-pad{ padding-left: clamp(1rem, 6vw, 5rem); }
.marquee-img-shift{ padding-bottom: clamp(0.5rem, 2vw, 2rem); display:inline-block; }


/* Tim – slika "Full Team" */
.team-full-pad{ padding-top: 1.3rem; padding-left: 2.6rem; }
@media (max-width: 768px){
.team-full-pad{ padding-top: .5rem; padding-left: 1rem; }
}
.image-gallery-section .hover-description.active {
    display: block;
}
/* NAV – osnovni razmaci */
.navbar { padding: clamp(8px, 2.4vw, 20px) 0; }
.navbar .container-fluid { gap: 12px; }
.navbar .navbar-nav { gap: clamp(10px, 2vw, 28px); }
.nav-logo-pad { padding-left: clamp(8px, 3vw, 24px); }

/* Hamburger (3 crte) */
.navbar-toggler{
  border: 0;
  padding: .25rem .5rem;
  line-height: 1;
  box-shadow: none !important;
}
.toggler-bar{
  display:block;
  width: 26px;
  height: 2px;
  background: #111;
  margin: 6px 0;
  transition: transform .2s ease, opacity .2s ease;
}
/* animacija u X kad je otvoreno */
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2){ opacity: 0; }
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobilni prikaz: otvoreni meni kao kartica ispod */
@media (max-width: 991.98px){
  .navbar .navbar-collapse{
    background: #fff;
    border-radius: 14px;
    margin-top: .5rem;
    padding: 14px clamp(12px, 4vw, 24px);
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }
  .navbar .navbar-nav{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .navbar .nav-link{
    padding: 8px 0;
    font-size: clamp(15px, 3.8vw, 18px);
  }
  .nav-last-pad{ padding-right: 0 !important; }
}
/* ===== HERO (postojeće klase) – fluidna tipografija i razmaci ===== */
.hero{
  /* fiksni 7rem/10rem su preveliki na mobu */
  margin-top: clamp(2rem, 8vw, 7rem);
  padding-right: clamp(0rem, 8vw, 10rem);
  margin-bottom: clamp(1.25rem, 4vw, 3rem);
}

.hero h1{
  /* 180px -> skala po širini ekrana */
  font-size: clamp(44px, 12vw, 180px);
  line-height: 1;
  text-align: left;
  margin-bottom: clamp(1rem, 4vw, 3rem);
  letter-spacing: -0.02em;
}

.hero h2{
  /* 32px + ogroman padding-right -> fluid + čitljiv max-width */
  font-size: clamp(14px, 3.2vw, 32px);
  line-height: 1.25;
  text-align: left;
  padding-right: clamp(0rem, 10vw, 26rem);
  max-width: 74ch;         /* kontrola duljine retka */
  margin-inline: auto;     /* ostaje centrirano, kao u tvom layoutu */
}

.hero span{
  /* “Est.2011” – malo manji i mekši */
  font-size: clamp(12px, 2.2vw, 32px);
  opacity: .7;
}

/* Sitni tweak za baš uske ekrane */
@media (max-width: 480px){
  .hero h2{ max-width: 36ch; text-align: left;}
}

/* ===== VIDEO SECTION – fleksibilan padding ===== */
.video-section{
  /* 15rem na mobu je preveliko -> fluid */
  padding: clamp(3rem, 12vw, 15rem) 1rem;
}

/* ===== VIDEO SECTION (responzivni 16:9 okvir, bez mijenjanja HTML-a) ===== */
.video-section{
  padding: clamp(16px, 6vw, 64px) clamp(16px, 6vw, 64px);
}

/* .container unutar .video-section postaje fluidni video okvir */
.video-section > .container{
  position: relative;
  width: 100%;
  max-width: 1200px;      /* opcionalni gornji limit širine */
  margin-inline: auto;    /* centriraj unutar sekcije */
  aspect-ratio: 16/9;     /* drži 16:9 na svim širinama */
  border-radius: 16px;
  overflow: hidden;
  background: #111;       /* placeholder dok ne ubaciš video/poster */
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}

/* Sve što ubaciš unutra (iframe/video/img) puni okvir */
.video-section > .container > iframe,
.video-section > .container > video,
.video-section > .container > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop za vizualno uredan prikaz */
}


/* Malo kompaktnije na baš uskim ekranima */
@media (max-width: 480px){
  .video-section{ padding: clamp(12px, 6vw, 24px); }
  .video-section > .container{ border-radius: 12px; }
}




.team-section2 {
    background-color: rgb(0, 0, 0) !important;
    padding: 5rem 1rem;
}
.team-section2 h2 {
    text-align: left;
    margin-bottom: 3rem;
    color: rgb(247, 245, 245)!important;
    font-size: 180px;
    text-transform: uppercase;
    font-weight: 700;
    
    font-family: "Gantari", sans-serif;
}
.team-section2 .team-member {
    padding-left: 2rem;
    text-align: left;
    margin-bottom: 2rem;
}
.team-member2 .team-button img{
    margin-top: 6rem;
}
.team-section2 .team-member img {
    width: 224px;
    height: 224px;
    object-fit: cover;
    margin-bottom: 1rem;
}
.team-section2 .team-member h4 {
    font-size: 20;
    font-weight: 600;
    color: rgba(255, 255, 255, 1) !important;
    margin-bottom: 0.2rem;
    font-family: "Gantari", sans-serif;
}
.team-section2 .team-member p {
    font-size: 16px;
    font-weight: 600;
    font-family: "Gantari", sans-serif;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ===== TEAM (mobile layout: 2 kolone, 5 članova + gumb) ===== */
@media (max-width: 768px){
  /* Grid kroz cijelu sekciju; <h2> ide preko obje kolone */
  .team-section2 .container-fluid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 18px;
  }
  .team-section2 .container-fluid > h2{
    grid-column: 1 / -1;
    font-size: 56px;           /* desktop ostaje po tvom */
    margin-bottom: 8px;
  }
  .team-section2 .container-fluid > h4{
    grid-column: 1 / -1;
    font-size: 16px;           /* desktop ostaje po tvom */
    margin-bottom: 8px;
  }
  .team-section2 .container-fluid > p{
    grid-column: 1 / -1;
    font-size: 12px;           /* desktop ostaje po tvom */
    margin-bottom: 8px;
  }

  /* Ukloni “kutije” .row da djeca teku u grid */
  .team-section2 .container-fluid > .row{ display: contents; }

  /* Dimenzije i poravnanja članova u gridu */
  .team-section2 .team-member,
  .team-section2 .team-button{
    padding-left: 0;
    text-align: left;
  }
  .team-section2 .team-member img{
    width: 100%;
    max-width: 224px;          /* ne prelazi desktop vizual */
    aspect-ratio: 1/1;
    height: auto;
    object-fit: cover;
    display: block;
  }

  /* Tablet i manje – mekša tipografija */
@media (max-width: 992px){
  .team-section2 h2{
    font-size: clamp(64px, 10vw, 120px);   /* desktop ostaje tvojih 180px */
    margin-bottom: clamp(16px, 3.5vw, 28px);
  }
  .team-section2 .team-member h4{
    /* base ima 20 (bez px) – ovdje responsivno, bez mijenjanja desktopa */
    font-size: clamp(16px, 3.8vw, 20px);
    line-height: 1.15;
  }
  .team-section2 .team-member p{
    font-size: clamp(13px, 3.2vw, 16px);
    line-height: 1.2;
  }
}

/* Mobile layout koji smo složili (≤768px) – 2 kolone, 5 članova + gumb
   + jednake dimenzije slika u svim karticama */
@media (max-width: 768px){
  /* grid iz prethodnog koraka ostaje */
  .team-section2 .team-member img{
    width: 100%;
    aspect-ratio: 1 / 1;       /* kvadratne */
    height: auto;              /* visina iz omjera */
    object-fit: cover;         /* crop bez deformacije */
    max-width: 224px;          /* ne veće od desktop vizuala */
    margin: 0 auto;            /* centriraj u koloni */
    display: block;
  }

  /* sigurni razmaci ispod slike i tipografija kompaktnija */
  .team-section2 .team-member{
    padding-left: 0;
    margin-bottom: clamp(10px, 3vw, 18px);
  }
  .team-section2 .team-member h4{ margin-top: 10px; }

  /* gumb – malo manji na vrlo uskim ekranima */
  .team-section2 .row:nth-of-type(2) .team-button img{
    max-width: clamp(120px, 30vw, 160px);
  }
}

/* Extra small (≤480px) – još mrvu kompaktnije */
@media (max-width: 480px){
  .team-section2 h2{ font-size: clamp(44px, 12vw, 56px); }
  .team-section2 .team-member h4{ font-size: clamp(15px, 4vw, 18px); }
  .team-section2 .team-member p{ font-size: clamp(12px, 3.6vw, 14px); }
}

  /* PRVI RED: prikaži samo prva 4 člana */
  .team-section2 .row:nth-of-type(1) .team-member:nth-of-type(n+5){
    display: none !important;  /* sakrij 5. i 6. iz prvog reda */
  }

  /* DRUGI RED: prikaži samo 1. člana (bit će 5. ukupno) */
  .team-section2 .row:nth-of-type(2) .team-member:nth-of-type(n+2){
    display: none !important;  /* sakrij sve osim 1. (David Kopčok) */
  }

  /* Gumb ostaje vidljiv i zauzima drugu kolonu u trećem redu */
  .team-section2 .row:nth-of-type(2) .team-button{
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  .team-section2 .row:nth-of-type(2) .team-button img{
    max-width: 160px;
    height: auto;
    margin: 0;                 /* poništi inline margine ako ih ima */
  }
}


.team-section {
    background-color: rgb(253, 252, 252) !important;
    padding: 5rem 1rem;
}
.team-section h2 {
    text-align: left;
    margin-bottom: 3rem;
    color: rgb(5, 5, 5)!important;
    font-size: 180px;
    text-transform: uppercase;
    font-weight: 700;
    
    font-family: "Gantari", sans-serif;
}
.team-section .team-member {
    padding-left: 2rem;
    text-align: left;
    margin-bottom: 2rem;
}
.team-member .team-button img{
    margin-top: 6rem;
}
.team-section .team-member img {
    width: 224px;
    height: 224px;
    object-fit: cover;
    margin-bottom: 1rem;
}
.team-section .team-member h4 {
    font-size: 20;
    font-weight: 600;
    color: rgba(255, 255, 255, 1) !important;
    margin-bottom: 0.2rem;
    font-family: "Gantari", sans-serif;
}
.team-section .team-member p {
    font-size: 16px;
    font-weight: 600;
    font-family: "Gantari", sans-serif;
    color: rgba(255, 255, 255, 0.4) !important;
}
.footer-section {
    padding: 5rem 1rem;
    background-color: rgba(0, 0, 0, 1);
    overflow: hidden; /* Ensures the animation stays within bounds */
    position: relative;
}
.footer-section h2 {
    text-align: left;
    margin-bottom: 3rem;
    color: rgba(255, 255, 255, 1);
    font-size: 180px;
    text-transform: uppercase;
    font-weight: 700;
    
    font-family: "Gantari", sans-serif;
}
.footer-section h3 {
    display: inline-block;
    white-space: nowrap; /* Ensures text stays in one line */
    color: rgba(255, 51, 51, 0.8);
    font-size: 128px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: "Gantari", sans-serif;
    animation: marquee 10s linear infinite; /* Applies the animation */
}
.footer-section .contact-info {
    text-align: left;
    margin-bottom: 0rem;
}
.footer-section .contact-info h4 {
    color: rgba(255, 255, 255, 1);
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 700;
    
    font-family: "Gantari", sans-serif;
}
.footer-section .contact-info p {
    margin: 0%;
    padding: 0%;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    font-family: "DM Sans", sans-serif;
}
.footer-section .contact-info span {
    margin: 0%;
    padding: 0%;
    font-size: 20px;
    color: rgba(255, 255, 255, 1);
    font-weight: 400;
    font-family: "DM Sans", sans-serif;
}
.marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}
.marquee span {
    display: inline-block;
    padding-right: 2rem; /* Adjust spacing between repetitions */
    font-size: 128px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: "Gantari", sans-serif;
    color: rgba(255, 51, 51, 0.8);
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}

/* ================= FOOTER • responsive only (desktop ostaje po tvom) ================= */

/* XL → LG */
@media (max-width: 1200px){
  .footer-section{ padding: 4rem 1.5rem; }
  .footer-section h2{ font-size: 120px; margin-bottom: 2.5rem; }
  .footer-section .contact-info h4{ font-size: 28px; }
  .footer-section .contact-info p,
  .footer-section .contact-info span{ font-size: 18px; }
  .marquee span{ font-size: 96px; }
}

/* LG / tablet (≤992px) */
@media (max-width: 992px){
  .footer-section{ padding: 3rem 1.25rem; }
  .footer-section h2{ font-size: 84px; margin-bottom: 2rem; }

  /* malo veći razmak među blokovima */
  .footer-section .row{ row-gap: 1.25rem; }

  /* naslovčići + tekst */
  .footer-section .contact-info h4{ font-size: 24px; }
  .footer-section .contact-info p,
  .footer-section .contact-info span{ font-size: 17px; }

  /* marquee čitljiviji i mrvu sporiji */
  .marquee span{
    font-size: 72px;
    animation-duration: 12s;
  }
}

/* SM / mobile (≤768px) – layout kao na slici: sve u jednom stupcu, lijevo poravnano */
@media (max-width: 768px){
  .footer-section{ padding: 2.25rem 1rem; }
  .footer-section h2{
    font-size: 56px;
    margin-bottom: 1.5rem;
    text-align: left;
  }

  /* kolone padaju u jedan stupac (Bootstrap već radi, ali osiguraj razmake) */
  .footer-section .row{ row-gap: 1.5rem; }
  .footer-section .contact-info{ text-align: left; margin-bottom: 0; }

  .footer-section .contact-info h4{ font-size: 20px; }
  .footer-section .contact-info p,
  .footer-section .contact-info span{
    font-size: 15.5px;
    line-height: 1.45;
  }

  /* marquee – velik, ali da stane u širinu ekrana */
  .marquee{ margin-top: 1.25rem; }
  .marquee span{
    font-size: 44px;
    animation-duration: 14s; /* malo sporije na mobu */
  }
}

/* XS / very small (≤480px) – najkompaktnije */
@media (max-width: 480px){
  .footer-section{ padding: 2rem .75rem; }
  .footer-section h2{ font-size: 44px; margin-bottom: 1.25rem; }
  .footer-section .contact-info h4{ font-size: 18px; }
  .footer-section .contact-info p,
  .footer-section .contact-info span{ font-size: 14.5px; }

  .marquee span{ font-size: 36px; animation-duration: 16s; }
}


/*Experize sekcija */

.HeroExpertize .image-container img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
}
.HeroExpertize .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.HeroExpertize .text-container p {
    font-size: 88px;
    padding: 0;
    font-family: "Gantari", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(30, 30, 30, 1);
    line-height: 105px;
}
.HeroExpertize .text-container span {
    font-size: 88px;
    padding: 0;
    font-family: "Gantari", sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 51, 51, 1);
    line-height: 105 px;
}  
.HeroExpertize {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

/* ==== HERO EXPERTIZE — responsive only (desktop ostaje po tvom) ==== */

/* Fluidni razmaci sekcije */
.HeroExpertize{
  padding-top: clamp(2.5rem, 6vw, 7rem);
  padding-bottom: clamp(2.5rem, 6vw, 7rem);
}

/* Lijevi padding slike – zadrži ~5rem na velikom ekranu, smanjuj ispod */
.HeroExpertize .image-container{ padding-left: clamp(1rem, 5vw, 5rem); }

/* Slika: na većim širinama kontrolirani maksimum */
.HeroExpertize .image-container img{
  display: block;
  width: 100%;
  max-width: 520px;      /* da ne bježi preširoko na tabletima */
  height: auto;
  margin: 0 auto clamp(12px, 3vw, 24px);
  border-radius: 8px;
}

/* Tekst: fluidna tipografija + ispravljen line-height (bez razmaka u px) */
.HeroExpertize .text-container{ display:flex; flex-direction:column; justify-content:center; }
.HeroExpertize .text-container p{
  font-size: clamp(40px, 7vw, 88px);
  line-height: clamp(50px, 8vw, 105px);
  margin: 0;
  text-transform: uppercase;
  font-weight: 700;
}
.HeroExpertize .text-container span{
  font-size: clamp(40px, 7vw, 88px);
  line-height: clamp(50px, 8vw, 105px);  /* pregazi tipfeler '105 px' */
  color: rgba(255, 51, 51, 1);
  text-transform: uppercase;
  font-weight: 700;
}

/* === Manji ekrani: tekst GORE, slika DOLJE + neutralizacija inline paddings === */
@media (max-width: 992px){
  /* redoslijed */
  .HeroExpertize .text-container{ order: 1; padding: 0 1.25rem; }
  .HeroExpertize .image-container{ order: 2; padding-left: 0 !important; margin-top: 1rem; }

  /* poravnanja */
  .HeroExpertize .text-container p{ text-align: left; }

  /* slika ide preko cijele kolone */
    .HeroExpertize .image-container img{
    width: 92%;
    max-width: none;         /* pregazi max-width:520px */
    margin: 0 auto;          /* centriraj */
    border-radius: 0 !important;
  }
}

@media (max-width: 576px){
  .HeroExpertize .image-container img{
    width: 88%;
    margin: 8px auto 0;      /* mrvu zraka iznad */
    border-radius: 0 !important;
  }
}

/* Extra kompaktno na baš uskim ekranima */
@media (max-width: 480px){
  .HeroExpertize .text-container{ padding: 0 .75rem; }
  .HeroExpertize .image-container{ padding-left: 0 !important; }
}

.text-list-section-expertize {
    background-color: rgba(0, 0, 0, 1);
    padding: 5rem 1rem;
}
.text-list-section-expertize h2 {
    padding-right: 35rem;
    color: rgba(255, 255, 255, 1);
    font-family: "Gantari", sans-serif;
    font-size: 180px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3rem;
}
.text-list-section-expertize h3 {
    color: rgba(255, 255, 255, 1);
    font-family: "DM Sans", sans-serif;
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 1rem;
}
.text-list-section-expertize h4 {
    color: rgba(255, 255, 255, 0.5);
    font-family: "DM Sans", sans-serif;
    font-size: 24px;
    font-weight: 400;
    max-width: 630px;
    margin-bottom: 5rem;
    padding-left: 3rem;
    line-height: 31.25px;
}
.text-list-section-expertize span {
    color: rgba(255, 255, 255, 1);
    font-family: "DM Sans", sans-serif;
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 1rem;
}
.text-list-section-expertize p {
    color: rgba(255, 255, 255, 0.8);
    font-family: "Gantari", sans-serif;
    font-size: 20px;
    line-height: 26.04px;
}
.text-list-section-expertize .row {
    align-items: center;
    margin-bottom: 2rem;
    margin-top: 2rem;
}
.text-list-section-expertize .hr-line {
    border: none;
    border-top: 4px solid rgba(255, 255, 255, 0.5);
    margin: 1rem 0;
}
.text-list-section-expertize .btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 400;
    background-color: rgba(255, 51, 51, 1);
    color: rgba(255, 255, 255, 1);
    font-family: "Gantari", sans-serif;
    border-radius: 32px;
}
.text-list-section-expertize a.btn{
    background-color: rgba(255, 51, 51, 1);
    color: rgba(255, 255, 255, 1);
    border: 0;
}
/* Initially hide the button */
.text-list-section-expertize .hover-container .btn {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Style the hover container background */
.text-list-section-expertize .hover-container:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

/* Show the button when hovering over the container */
.text-list-section-expertize .hover-container:hover .btn {
    visibility: visible;
    opacity: 1;
}

/* Optional: Ensure text and other elements aren't affected */
.text-list-section-expertize .hover-container {
    padding: 1rem;
    border-radius: 8px; /* Optional styling for the hover container */
}

/* ================== WHAT WE DO (responsive only) ================== */

/* XL → LG */
@media (max-width: 1200px){
  .text-list-section-expertize{ padding: 4rem 1.5rem; }
  .text-list-section-expertize h2{
    font-size: 120px;
    padding-right: 10rem;      /* manje nego 35rem */
    margin-bottom: 2.5rem;
  }
  .text-list-section-expertize h4{ font-size: 20px; }
}
/* WHAT WE DO – poravnaj gumb lijevo na manjim ekranima */
@media (max-width: 992px){
  .text-list-section-expertize .row > .col-md-2.d-flex{
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .text-list-section-expertize .hover-container .btn{
    display: inline-block;
    margin: .5rem 0 0 0 !important;   /* bez auto margina */
  }
}

/* Tablet i manje (≤992px) */
@media (max-width: 992px){
  .text-list-section-expertize{ padding: 3rem 1.25rem; }

  /* Naslov i uvod */
  .text-list-section-expertize h2{
    font-size: 84px;
    padding-right: 0;          /* makni veliki desni padding */
    margin-bottom: 2rem;
  }
  .text-list-section-expertize h4{
    font-size: 18px;
    line-height: 1.45;
    max-width: none;
    padding-left: 0;           /* uvod ulijevo kao na maketi */
    margin-bottom: 2rem;
  }
  .text-list-section-expertize span{ font-size: 18px; }

  /* Svaka “stavka” u jednom stupcu: h3 → p → gumb */
  .text-list-section-expertize .row{
    align-items: flex-start;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .text-list-section-expertize .row > [class*="col-"]{ margin-bottom: .5rem; }

  /* sakrij desnu strelicu kolonu */
  .text-list-section-expertize .row > .col-md-1{ display: none !important; }

  /* gumb uvijek vidljiv (bez hovera) i poravnan lijevo */
  .text-list-section-expertize .hover-container .btn{
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: .5rem;
  }

  /* hover pozadina nema smisla na touchu */
  .text-list-section-expertize .hover-container{ padding: .75rem 0; }
  .text-list-section-expertize .hover-container:hover{
    background-color: transparent;
  }

  /* tekstovi u stavkama */
  .text-list-section-expertize h3{ font-size: 28px; margin-bottom: .25rem; }
  .text-list-section-expertize p{ font-size: 16px; line-height: 1.45; }

  /* hr linija malo tanja */
  .text-list-section-expertize .hr-line{ border-top-width: 3px; }
}

/* Mobitel (≤576px) – najkompaktnije */
@media (max-width: 576px){
  .text-list-section-expertize{ padding: 2rem .75rem; }
  .text-list-section-expertize h2{ font-size: 56px; margin-bottom: 1.25rem; }
  .text-list-section-expertize h4{ font-size: 16px; margin-bottom: 1.25rem; }
  .text-list-section-expertize h3{ font-size: 24px; }
  .text-list-section-expertize p{ font-size: 15px; }
  .text-list-section-expertize .btn{ font-size: 15px; padding: 9px 18px; }
  .text-list-section-expertize .hr-line{ border-top-width: 2px; }
}

/* Dodatno: ugasi hover efekte na uređajima bez hovera */
@media (hover: none){
  .text-list-section-expertize .hover-container:hover{ background-color: transparent; }
  .text-list-section-expertize .hover-container .btn{
    visibility: visible !important;
    opacity: 1 !important;
  }
}


.our-process-section {
    padding: 4rem 0;
}

.our-process-section h2 {
    font-size: 180px;
    font-weight: 700;
    color: rgba(0, 0, 0, 1);
    font-family: "Gantari", sans-serif;
    margin-bottom: 3rem;
    text-transform: uppercase;
}

.process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    flex: 1;
    transition: flex 0.3s ease-in-out;
    min-width: 150px;
    justify-content: center; /* Center vertically */
    align-items: center; /* Center horizontally */
   
}

.process-step .description {
    margin-left: 3rem;
    white-space: pre-line;
    margin-top: 3rem;
    font-size: 20px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    font-family: "DM Sans", sans-serif;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.process-step:hover {
    flex: 3;
}

.process-step:hover .description {
    max-height: 200px;
    opacity: 1;
}

.process-step .step-title {
    font-size: 32px;
    font-family: "Gantari", sans-serif;
    color: rgba(0, 0, 0, 1);
    font-weight: 500;
    text-transform: uppercase;
    margin-top: auto;
}

.vertical-line {
    width: 1px;
    height: 475px;
    background-color: rgba(0, 0, 0, 0.5);
    margin: auto;
}

/* OUR PROCESS — Mobile slider: pune kartice, bez prelamanja */
@media (max-width: 992px){
  .our-process-section{ padding: 2.25rem 0; }
  .our-process-section h2{
    font-size: 84px;
    margin: 0 12px 16px;
    text-align: left;
  }

  /* Track */
  .our-process-section .row{
    display: flex;
    flex-wrap: nowrap;                 /* <— NE prelamaj */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 12px 12px;              /* unutarnji rubovi, da 1. i zadnja kartica ne lijepe rub */
    margin: 0;                         /* neutraliziraj bootstrap margine */
    cursor: grab;
  }
  .our-process-section .row::-webkit-scrollbar{ display: none; }

  /* Makni vertikalne linije na mobu */
  .our-process-section .col-auto,
  .our-process-section .vertical-line{ display: none !important; }

  /* Svaki step = “slide” širine ~100% ekrana (mrvu margine) */
  .our-process-section .process-step{
    flex: 0 0 calc(100% - 48px) !important;  /* <— nadjača .col */
    scroll-snap-align: start;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
    min-width: unset;                         /* pregazi min-width:150px */
  }

  /* Uvijek prikaži opis; bez hover logike */
  .our-process-section .process-step:hover{ flex: 0 0 calc(100% - 48px) !important; }
  .our-process-section .process-step .description{
    margin: 0 0 12px 0;          /* makni left offset 3rem */
    max-height: none;
    opacity: 1;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0,0,0,1);
  }
  .our-process-section .process-step .step-title{
    font-size: 22px;
    margin-top: 4px;
    text-transform: uppercase;
  }
}
@media (max-width: 576px){
  .our-process-section h2{ font-size: 56px; margin: 0 12px 12px; }
  .our-process-section .process-step{ flex-basis: calc(100% - 40px) !important; padding: 14px; }
  .our-process-section .process-step .description{ font-size: 15px; }
  .our-process-section .process-step .step-title{ font-size: 20px; }
}
 /* OUR PROCESS — mobile polish: separator, opacities, smooth */
@media (max-width: 992px){
  .our-process-section .row{
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;             /* glatko kod programskog scrolla */
  }

  .our-process-section .process-step{
    position: relative;
    transition: opacity .3s ease, transform .3s ease;
    opacity: .6;                         /* default */
  }
  /* aktivna = puna, sljedeća = malo zatamnjena, ostale još više */
  .our-process-section .process-step.is-active{ opacity: 1; }
  .our-process-section .process-step.is-next  { opacity: .4; }
  .our-process-section .process-step.is-dim   { opacity: .25; }

  /* separator (u sredini gapa od 12px) */
  .our-process-section .process-step::after{
    content: "";
    position: absolute;
    right: -6px;                         /* pola od gap-a (12px) */
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(0,0,0,.2);
    pointer-events: none;
  }
  .our-process-section .process-step:last-of-type::after{ display: none; }
}

/* Vizual kod draganja */
.our-process-section .row.is-dragging{ cursor: grabbing; user-select: none; }

/* Team Section */


/* === MEET THE TEAM === */
.team-section{
  padding: 100px 0 140px;
  background:#fff;
}
.team-section, 
.team-section *:not(.team-title span) {
  color: inherit;
}
.team-section { color: #000; }  
/* Naslov */
.team-title{
  font-family: 'Gantari', sans-serif;
  font-weight: 700;        /* Bold */
  font-style: normal;
  font-size: clamp(56px, 12vw, 180px);      /* traženo */
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;      /* centrirano */
  color: #000;
  margin: 0;               /* makni extra razmake koji znaju “odsjeći” MEET */
  word-break: keep-all;
  overflow-wrap: normal;
  padding-left: 5rem;
}
.team-title span{
  color: #ff3333;          /* "THE" crveno */
  font-weight: 700;
}

/* Podnaslov i maleni opis lijevo */
.team-subtitle{
  font-family: 'Gantari', sans-serif;
  font-weight: 400;        /* Regular */
  font-style: normal;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0;
  text-align: center;      /* centriraj */
  color: #111;
  margin: 16px 0 36px;
}
.team-blurb{
  font-family:'DM Sans',sans-serif;
  font-size:20px;
  line-height: 100%;
  color:#00000080;
  font-weight: 400; 
  max-width: 520px;
  margin: 0 0 40px;
}

/* Header layout da blurb sjedi lijevo, a naslov ostane gore */
.team-header{
  position: relative;
  padding-inline: clamp(20px, 4vw, 80px);
}

/* Grid — 12 kolona za “razbacan” raspored */
.team-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 120px 48px;                  /* veći vertikalni, manji horizontalni razmak */
  padding-inline: clamp(20px, 4vw, 80px);
}

/* Kartica člana */
.member {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 3/4;
  box-shadow: 0 30px 60px rgba(0,0,0,0.08);
  transition: transform .4s ease, box-shadow .4s ease;
  cursor: pointer;
  background: #000;
}

.member img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.2) brightness(0.9);
  transition: transform .6s ease, filter .6s ease, opacity .6s ease;
  display: block;
}

/* Efekt lebdenja — blur + svjetlina */
.member:hover img {
  filter: grayscale(20%) brightness(1.05);
}



/* Tekst dolje lijevo */
.member .meta {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 60px;
  color: #fff;
  z-index: 2;
  font-family: "DM Sans", sans-serif;

}

.member .meta h4 {
  font-weight: 600;
  font-size: 23px;
  color: #fff;
  margin: 0 0 4px;
}

.member .meta small {
  font-weight: 400;
  font-size: 17px;
  color: #FFFFFF99;
  opacity: 0.85;
}

/* crveni LinkedIn kvadrat */
.member .in {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 35px;
  height: 35px;
  border-radius: 4px;
  background: #ff3333;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.member .in::before {
  content: "in";
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: black;
  line-height: 1;
}



.t1{ grid-column: 2 / span 3;  grid-row: 1; transform: translateY(90px);}
.t2{ grid-column: 8 / span 3;  grid-row: 1; transform: translateX(80px);}
.t3{ grid-column: 10 / span 3; grid-row: 2; transform: translateX(60px); }
.t4{ grid-column: 5 / span 3;  grid-row: 2; transform: translateY(90px); }
.t5{ grid-column: 8 / span 3;  grid-row: 3; transform: translateX(70px);}
.t6{ grid-column: 2 / span 3;  grid-row: 3; transform: translateY(60px); }
.t7{ grid-column: 8 / span 3;  grid-row: 4; transform: translateX(70px); }
.t8{ grid-column: 3 / span 3;  grid-row: 4; transform: translateY(40px); }
.t9{ grid-column: 6 / span 3;  grid-row: 5; transform: translateY(40px); }



/* ===== MEET THE TEAM — strict mobile spec (≤600px) ===== */
@media (max-width: 600px){

  /* Header */
  .team-header{ padding-inline: 12px !important; }

  /* Title */
  .team-title{
    font-family: 'Gantari', sans-serif !important;
    font-weight: 600 !important;              /* SemiBold */
    font-style: normal !important;
    font-size: 56px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    margin: 0 !important;
    padding-left: 0 !important;
  }
  .team-title span{ color:#ff3333 !important; font-weight:600 !important; }

  /* Subtitle */
  .team-subtitle{
    font-family: 'Gantari', sans-serif !important;
    font-weight: 400 !important;              /* Regular */
    font-style: normal !important;
    font-size: 16px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 8px 0 12px !important;
  }

  /* Blurb */
  .team-blurb{
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 400 !important;              /* Regular */
    font-style: normal !important;
    font-size: 14px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    max-width: 520px !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    color: #00000080 !important;
    text-align: left !important;
  }

 
  .member img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: grayscale(100%) contrast(1.2) brightness(0.9) !important;
  }

  /* Meta text */
  .member .meta{
    left: 8px !important;
    right: 32px !important;
    bottom: 8px !important;
    color: #fff !important;
  }
  .member .meta h4{
    width: 56px !important;        /* po specifikaciji */
    height: 13px !important;       /* po specifikaciji */
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 100% !important;
    margin: 0 0 2px !important;
    color: #fff !important;
  }
  .member .meta small{
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 8.14px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color: #FFFFFF99 !important;
    opacity: 1 !important;
  }

  /* LinkedIn badge */
  .member .in{
    width: 16.2857px !important;
    height: 16.2857px !important;
    right: 8px !important;
    bottom: 8px !important;
    border-radius: 3px !important;
    background: #ff3333 !important;
  }
  .member .in::before{
    font-size: 10px !important;
    line-height: 1 !important;
    color: #000 !important;
    content: "in" !important;
    font-weight: 700 !important;
    font-family: Arial, sans-serif !important;
  }


}


@media (max-width: 600px){
  /* 2 kolone, uredni razmaci */
  .team-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
    padding-inline: 8px !important;
  }

  /* kartice iste širine; visinu drži po omjeru */
  .member{
    width: 100% !important;
    aspect-ratio: 3 / 4 !important; /* tvoj odnos */
    margin: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    transform: translateY(0) !important;     /* baza */
    will-change: transform !important;
  }

  /* R A S P R Š E N O — blagi vertikalni offset po kartici */
  .team-grid .member:nth-child(1){ grid-column: 4 / span 8; transform: translateY(14px) !important; }
  .team-grid .member:nth-child(2){ grid-column: 14 / span 8; transform: translateY(0px)  !important; }
  .team-grid .member:nth-child(3){ grid-column: 14 / span 8; transform: translateY(28px) !important; }
  .team-grid .member:nth-child(4){ grid-column: 5 / span 8; transform: translateY(10px) !important; }
  .team-grid .member:nth-child(5){ grid-column: 13 / span 8; transform: translateY(36px) !important; }
  .team-grid .member:nth-child(6){ grid-column: 4 / span 8; transform: translateY(16px) !important; }
  .team-grid .member:nth-child(7){ grid-column: 14 / span 8; transform: translateY(32px) !important; }
  .team-grid .member:nth-child(8){ grid-column: 5 / span 8; transform: translateY(12px) !important; }
  .team-grid .member:nth-child(9){ grid-column: 4 / span 8; transform: translateY(40px) !important; }

  /* (opcionalno) malo omekšaj hover da ne “skače” preko offseta */
  .member:hover{ transform: translateY(calc(var(--y, 0px) - 2px)) !important; }
}

/* CTA section */
.cta-work {
  padding: 80px 20px 120px;
  background: #fff;
  text-align: center;
}
.cta-work h2 {
  font-family: 'Gantari', sans-serif;
  font-weight: 700;          /* Bold */
  font-style: normal;
  font-size: 88px;           /* traženo */
  line-height: 100%;
  letter-spacing: 0;
  color: #1E1E1E;            /* traženo */
  margin: 0 0 24px;
}

/* crveni pill gumb (isti stil kao ranije) */
.btn-red{
  display:inline-block;
  padding: 10px 22px;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,0.1);
  background:#ff3333;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition: transform .2s ease, background .2s ease;
}
.btn-red:hover{ background:#dc0000; transform: translateY(-2px); }

/* responsive smanjenje naslova */
@media (max-width: 992px){
  .cta-work h2{ font-size: 56px; }
}
@media (max-width: 600px){
  .cta-work h2{ font-size: 40px; }
}


/* Sekcija za portfolio */

  .category {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .category:hover,
  .category.active {
    background-color: #ff4d4d;
    color: #fff;
    border-color: #ff4d4d;
  }
  
  /* Portfolio slike Sekcija cijela */

  .portfolio-section {
    padding: 5rem 1rem;
    background-color: #fff;
  }
  
  .portfolio-section h2 {
    font-family: "Gantari", sans-serif;
    font-size: 180px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(30, 30, 30, 1);
    margin-bottom: 3rem;
    margin-left: 3.5rem;
    max-width: 1700px;
    text-align: start;
  }

  .portfolio-section h3{
    font-family: "Gantari", sans-serif;
    font-size: 88px;
    font-weight: 700;
    line-height: 105.6px;
    color: rgba(0, 0, 0, 1);
    margin-left: 3.5rem;
    max-width: 1050px;
    text-align: start;
  }
  
  /* Wrapper za slike */
  .portfolio-section .image-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
  
.portfolio-section .image-wrapper img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
}
  /* Flexbox for buttons */
.portfolio-section .image-wrapper .button-container {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    gap: 10px;  /* Space between buttons */
    flex-wrap: wrap;  /* If buttons exceed width, wrap them */
    z-index: 10;  /* Ensure buttons are on top of the image */
  }
  .portfolio-section .button-container {
    display: flex;
    gap: 20px; /* Space between the buttons */ /* Center the buttons */
    margin-top: 1rem; /* Space between h2 and buttons */
    margin-bottom: 1rem; /* Space below the buttons */
  }
  
  /* Category Button */
  .portfolio-section .image-category {
    background: rgba(30, 30, 30, 0.5);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-family: "Gantari", sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: none;
    cursor: pointer;
  }
  .portfolio-section .active {
    background: rgba(255, 36, 67, 1)
    ;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-family: "Gantari", sans-serif;
    font-size: 18px;
    font-weight: 600;
    border: none;
    cursor: pointer;
  }
  .portfolio-section .image-wrapper img:hover {
    filter: blur(4px);
    
}

.portfolio-section .hover-description {
    position: absolute;
    pointer-events: none;
    display: none;
    background: rgba(255, 51, 51, 1);
    color: rgba(255, 255, 255, 1);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100000;
}
  
  
  /* Opis unutar slike */
  .portfolio-section .image-description {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    font-family: "Gantari", sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
  }
  
  .portfolio-section .extra-description {
    justify-content: space-between;
    font-family: "Gantari", sans-serif;
    font-size: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
  }
  .portfolio-section .hover-description.active {
    display: block;
}

/* ============ PORTFOLIO — responsive tweaks ============ */

/* Naslov + uvod */
.portfolio-section{
  padding: clamp(2rem, 6vw, 5rem) 1rem !important;
}
.portfolio-section h2{
  font-size: clamp(44px, 12vw, 180px) !important;
  margin-left: 0 !important;
  margin-bottom: clamp(1.25rem, 3.5vw, 3rem) !important;
  text-align: left !important;
}
.portfolio-section h3{
  font-size: clamp(22px, 6vw, 88px) !important;
  line-height: clamp(28px, 7vw, 105.6px) !important;
  margin: 0 0 clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 3.5rem) !important;
}

/* Gornji filter gumbi */
.portfolio-section .button-container{
  display:flex !important;
  flex-wrap: wrap !important;
  gap: clamp(6px, 2vw, 12px) clamp(8px, 2.5vw, 20px) !important;
  padding: 0 clamp(1rem, 4vw, 3.5rem) !important;
  margin: 0 0 clamp(1rem, 3vw, 1.5rem) 0 !important;
}
.portfolio-section .image-category{
  padding: clamp(6px, 1.8vw, 10px) clamp(10px, 3vw, 16px) !important;
  font-size: clamp(12px, 3.3vw, 16px) !important;
  border-radius: 30px !important;
}

/* Svaka slika: omjer, crop i položaji bedževa/teksta */
.portfolio-section .image-wrapper{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/12 !important;        /* uredan omjer na svim širinama */
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-top: clamp(12px, 3vw, 32px) !important;
  margin-bottom: clamp(12px, 3vw, 32px) !important;
}
.portfolio-section .image-wrapper img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Kategorije unutar slike (gornji lijevi “pillovi”) */
.portfolio-section .image-wrapper .button-container{
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  padding: 0 !important;
  gap: clamp(6px, 2vw, 10px) !important;
}

/* Caption (naziv + godina) u dnu slike */
.portfolio-section .image-description{
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  font-size: clamp(14px, 4.2vw, 32px) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: .5rem !important;
}
.portfolio-section .extra-description{
  font-size: clamp(13px, 3.8vw, 28px) !important;
  opacity: .8 !important;
}

/* Hover blur – ugasi na touch uređajima */
@media (hover: none){
  .portfolio-section .image-wrapper img:hover{ filter: none !important; }
  .portfolio-section .hover-description{ display: none !important; }
}

/* Breakpointi za layout / razmake */
@media (max-width: 992px){
  .portfolio-section{ padding: 2.5rem 1rem !important; }
  .portfolio-section h2{ font-size: clamp(48px, 10vw, 84px) !important; }
}

/* Telefon ≤ 576px – kompaktno, kao na slici */
@media (max-width: 576px){
  .portfolio-section{ padding: 2rem .75rem !important; }
  .portfolio-section h2{
    font-size: 44px !important;
    margin-bottom: 1rem !important;
  }
  .portfolio-section .button-container{
    padding: 0 .25rem !important;
    gap: 8px 10px !important;
  }
  .portfolio-section .image-category{
    padding: 6px 12px !important;
    font-size: 12.5px !important;
  }
  .portfolio-section .image-wrapper{
    aspect-ratio: 16/9 !important;      /* zadrži isti omjer i na mini ekranima */
    margin: 12px 0 !important;
  }
  .portfolio-section .image-description{
    font-size: 15px !important;
  }
  .portfolio-section .extra-description{
    font-size: 14px !important;
  }
}
@media (max-width: 768px){
  .portfolio-section .row.gallery-pt-sm{
    display: none !important;
  }
}


#backToTop {
  position: fixed;
  bottom: 20px; /* udaljenost od dna */
  right: 20px;  /* udaljenost od desnog ruba */
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;   /* centriranje vertikalno */
  justify-content: center; /* centriranje horizontalno */
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #ff3333;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

#backToTop img {
  max-width: 50px;   /* da se slika ne rastegne previše */
  max-height: 50px;
}

#backToTop.show {
  opacity: 1;
  pointer-events: auto;
}

#backToTop:hover {
  background: #dc0000;
}

/* Back-to-top — stabilna pozicija na malim ekranima + iOS safe area */
@media (max-width: 768px){
  #backToTop{
    /* umjesto fiksnih 20px koristi max(...) i safe-area insets */
    bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px);
    right:  max(12px, env(safe-area-inset-right,  0px) + 12px);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    /* spriječi “skakanje” kod mobilnih toolbara */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    z-index: 9999;
  }
  #backToTop img{
    max-width: 44px;
    max-height: 44px;
  }
  /* nema hover stanja na touchu */
  @media (hover: none){
    #backToTop:hover{ background:#ff3333; }
  }
}

/* Ako želiš stalno koristiti safe-area (i na desktopu s notchom) */
@supports (bottom: max(0px)){
  #backToTop{
    bottom: max(20px, env(safe-area-inset-bottom, 0px) + 20px);
    right:  max(20px, env(safe-area-inset-right,  0px) + 20px);
  }
}
/* Back-to-top u footeru na malim ekranima */
#backToTop.btt-in-footer{
  position: absolute !important;                   /* vezan za .footer-section (ona je već relative) */
  bottom: max(12px, env(safe-area-inset-bottom, 0px) + 12px);
  right:  max(12px, env(safe-area-inset-right,  0px) + 12px);
  opacity: 1;                                      /* uvijek vidljiv na mobu */
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 8px;
}
#backToTop.btt-in-footer img{
  max-width: 44px;
  max-height: 44px;
}




.contact-header {
  padding: 130px 20px 40px 20px; 
  background: #fff;
}
.contact-header div{
    padding-left: 4rem;
}

.contact-header h2 {
  font-family: 'Gantari', sans-serif;
  font-weight: 700;
  font-style: normal; /* Bold je već pokriven sa font-weight:700 */
  font-size: 124px;
  line-height: 100%;
  letter-spacing: 0;
  color: #000;
  margin-bottom: 30px;
}

.contact-header p {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;

  color: #555;
}

/* ===== CONTACT HEADER — responsive ===== */

/* XL → LG */
@media (max-width: 1200px){
  .contact-header{ padding: 96px 20px 36px 20px !important; }
  .contact-header h2{ font-size: 96px !important; }
  .contact-header p{ font-size: 22px !important; line-height: 1.35 !important; }
}

/* LG / tablet (≤992px) */
@media (max-width: 992px){
  .contact-header{ padding: 80px 20px 32px 20px !important; }
  .contact-header h2{ font-size: 72px !important; }
  .contact-header p{
    font-size: 18px !important;
    line-height: 1.45 !important;
    max-width: 68ch !important;
  }
  /* sakrij <br> na manjim ekranima da tekst prirodno prelama */
  .contact-header p br{ display: none !important; }
}

/* MD / mobile (≤768px) */
@media (max-width: 768px){
  /* neutralizira .contact-header div { padding-left: 4rem; } */
  .contact-header > .container-fluid{ padding-left: 1rem !important; padding-right: 1rem !important; }

  .contact-header{ padding: 64px 0 28px 0 !important; }
  .contact-header h2{
    font-size: 56px !important;
    line-height: 1 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
  .contact-header p{
    font-size: 16px !important;
    line-height: 1.45 !important;
    max-width: 60ch !important;
    color: #555 !important;
    margin: 0 !important;
    text-align: left !important;
  }
}

/* XS / very small (≤480px) */
@media (max-width: 480px){
  .contact-header{ padding: 52px 0 24px 0 !important; }
  .contact-header h2{ font-size: 44px !important; }
  .contact-header p{ font-size: 15px !important; }
}


/* Layout */
.contact-section { padding: 60px 0 80px; background:#fff; }

.general {
    padding-left: 4rem;
}

.general2{
    padding-left: 4rem;
}

.general a {
  
  font-family:'DM Sans',sans-serif;
  font-size:24px;
  color:rgba(0, 0, 0, 0.7);
  text-decoration:none;
  line-height: 100%;
  letter-spacing: 0;
}
.section-label {
    font-family:'DM Sans',sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: rgba(0, 0, 0, 1);
}
.small-photo{
    padding-left: 10rem;
}
.small-photo p {
    font-family:'DM Sans',sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.7);
}
.small-photo img{
    max-width: 995px;
    max-height: 974px;
    opacity: 1;
    top: 394px;
    left: 825px;

}
.big-photo img {
    max-width: 560px;
    max-height: 496px;
}

.socials { list-style:none; padding:0; margin-top:12px; }
.socials li { font-family:'DM Sans',sans-serif; font-size:18px; margin-bottom:6px; color:#666; }
.socials .emph { font-weight:700; color:#000; text-decoration:none; }
.socials .emph:hover { text-decoration:underline; }

.address p { font-family:'DM Sans',sans-serif; font-size:14px; line-height:1.5; color:#000; }

.contact-form label {
  display:block; margin-top:18px; margin-bottom:6px;
  font-size:12px; letter-spacing:.08em; color:#777;
}
.contact-form input,
.contact-form textarea {
  width:100%; border:none; border-bottom:1px solid #e6e6e6;
  padding:12px 0; font-size:14px; background:transparent;
  outline:none; color:#000;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:#aaa; }
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color:#ff3333; }

.btn-send {
  display:block; width:100%; height:48px; margin-top:24px;
  border-radius:32px; border:1px solid rgba(255,255,255,0.1);
  background:#ff3333; color:#fff; font-weight:600; cursor:pointer;
  transition: background .25s ease;
}
.btn-send:hover { background:#dc0000; }

/* ===== CONTACT SECTION — responsive layout ===== */

/* Desktop fine-tune */
@media (max-width: 1200px){
  .small-photo{ padding-left: 6rem !important; }
  .small-photo img{ max-width: 100% !important; height: auto !important; }
  .big-photo img{ max-width: 100% !important; height: auto !important; }
}

/* Tablet (≤ 992px) */
@media (max-width: 992px){
  .contact-section{ padding: 48px 0 64px !important; }

  /* neutraliziraj velike ljeve paddinge */
  .general, .general2{ padding-left: 2rem !important; }
  .small-photo{ padding-left: 2rem !important; }

  .section-label{ font-size: 20px !important; }
  .general a,
  .small-photo p{ font-size: 18px !important; }

  .small-photo img,
  .big-photo img{
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
  }

  /* forma malo kompaktnija */
  .contact-form label{ margin-top: 14px !important; }
  .btn-send{ height: 46px !important; }
}

/* Mobile (≤ 768px) — stacked layout kao na slici */
@media (max-width: 768px){
  .contact-section{ padding: 40px 0 56px !important; }

  /* full-width sadržaj s malim bočnim paddingom */
  .contact-section .container-fluid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .general, .general2, .small-photo{ padding-left: 0 !important; }

  .section-label{ font-size: 18px !important; }
  .general a{ font-size: 18px !important; line-height: 1.3 !important; }

  .small-photo{ margin-top: 16px !important; }
  .small-photo img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  .small-photo .address{ margin-top: 14px !important; }
  .small-photo p{ font-size: 16px !important; line-height: 1.45 !important; }

  .big-photo{ margin-top: 24px !important; }
  .big-photo img{
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  .socials{ margin-top: 12px !important; }
  .socials li{ font-size: 16px !important; }

  /* Forma - rubovi i veličine */
  .contact-form label{
    margin-top: 12px !important;
    font-size: 11px !important;
  }
  .contact-form input,
  .contact-form textarea{
    padding: 10px 0 !important;
    font-size: 15px !important;
  }
  .btn-send{
    height: 44px !important;
    margin-top: 20px !important;
  }
}

/* XS (≤ 480px) — još kompaktnije */
@media (max-width: 480px){
  .section-label{ font-size: 16px !important; }
  .general a{ font-size: 16px !important; }
  .small-photo p{ font-size: 15px !important; }
  .socials li{ font-size: 15px !important; }
  .btn-send{ height: 42px !important; }
}
/* ==== Contact row: form first on small screens ==== */
@media (max-width: 768px){
  /* Drugi red: .col-lg-6 (forma) ide gore, .col-lg-5 (slika+socials) ispod */
  .contact-section .row.align-items-start > .col-lg-6{
    order: 1 !important;
    margin-top: 0 !important;      /* nema praznine iznad forme */
  }
  .contact-section .row.align-items-start > .col-lg-5{
    order: 2 !important;
    margin-top: 24px !important;   /* mali razmak ispod forme prije slike */
  }
}


/* Naslov */
.products-section{ padding: 100px 0 20px; padding-left: 4rem; }
.products-title{
  font-family:'Gantari',sans-serif; font-weight:800;
  font-size: clamp(56px, 9vw, 140px); line-height:1; margin:0 0 10px;
}

/* PIN zona: visina = broj slajdova * 100vh */
.products-pin{ position: relative; }
.products-track{
  position: sticky; top: 80px; height: 60vh; overflow: hidden; background:#fff;
}
/* Horizontalna traka sa slajdovima */
.slides{ display: flex; height: 100%; will-change: transform; }

/* Svaki slajd zauzima cijeli viewport */
.slide{
  min-width: 100vw; height: 100%; display: grid;
  grid-template-columns: 1fr minmax(300px,680px) 1fr; align-items: center;
  gap: clamp(12px,3vw,40px); padding: 0 clamp(16px,4vw,40px);
}

/* Sadržaj (tipografija po tvojim specifikacijama) */
.product-content{
    padding-left: 10rem;
}
.product-kicker{
  display:inline-block; font-family:'DM Sans',sans-serif; font-weight:400;
  font-size:16px; line-height:100%; letter-spacing:0; color:#000000; margin-bottom:14px;
}
.product-heading{
  font-family:'DM Sans',sans-serif; font-weight:500;
  font-size:40px; line-height:100%; letter-spacing:0; color:#000000; margin:0 0 16px;
}
.product-desc{
  font-family:'DM Sans',sans-serif; font-weight:400;
  font-size:18px; line-height:100%; letter-spacing:0; color:#00000080; max-width:560px; margin:0 0 22px;
}
.btn-red{
  display:inline-block; padding:10px 22px; border-radius:32px;
  border:1px solid rgba(255,255,255,0.1); background:#ff3333; color:#fff; text-decoration:none; font-weight:600;
  transition: transform .2s ease, background .2s ease;
}
.btn-red:hover{ background:#dc0000; transform: translateY(-2px); }

/* Slike + “papir” pozadina */
.product-image{ position: relative; isolation: isolate; }
.product-image img{
  width:100%; height:auto; display:block; object-fit:cover; filter:grayscale(100%);
  border:1px solid rgba(0,0,0,.06); box-shadow:0 20px 60px rgba(0,0,0,.08);
}
.product-image::after{
  content:""; position:absolute; width:85%; height:85%; left:7.5%; top:7.5%;
  background:#eee; z-index:-1; opacity:.6; transform: rotate(6deg);
}
.img-left img{ transform: rotate(-8deg); }
.img-right img{ transform: rotate(8deg); }
.img-left::after{ transform: rotate(-2deg); }
.img-right::after{ transform: rotate(2deg); }

/* Responsive */
@media (max-width: 992px){
  .slide{ grid-template-columns: 1fr; gap:20px; padding: 0 20px; }
  .img-right{ display:none; }
}
/* Sakrij "OUR PRODUCTS" naslov i cijeli pinned scroller na manjim ekranima */
@media (max-width: 992px){  /* možeš promijeniti prag na 768px ako želiš */
  #our-products,
  .products-section,
  #products-pin,
  .products-pin{
    display: none !important;
  }
}