@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;600&display=swap');

header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.9);
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 100;
    flex-wrap: wrap;
    box-sizing: border-box;
    font-size: 24px;
    
  }
  .left-group{
    flex:0 1 auto;              /* <-- može da se smanji */
    min-width:0;
  }
  
  .logo{
    font-weight:bold;
    text-transform:uppercase;
    color:#E0B84F;
    margin:0;
    white-space:nowrap;         /* da ne lomi u 2 reda */
    font-size:clamp(14px, 2.2vw, 24px); /* <-- automatski se smanjuje */
  }
  
  .logo span{ color:#ccc; }
  
  /* NAV (centar) */
  .main-nav{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    justify-content:center;
  }
  
  .main-nav ul{
    list-style:none;
    display:flex;
    align-items:center;
    gap:22px;
    padding:0;
    margin:0;
    white-space:nowrap;
  }
  
  .main-nav a{
    text-decoration:none;
    color:#E0B84F;
    font-weight:500;
    font-size:14px;
    transition:color .3s;
  }
  
  .main-nav a:hover{ color:#fff; }
  
  /* RIGHT */
  .right-group{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }
  
  .social-icons{
    display:flex;
    align-items:center;
    gap:14px;
  }
  
  .social-icons a{
    color:#fff;
    font-size:18px;
    transition:transform .3s, color .3s;
  }
  
  .social-icons a:hover{
    transform:scale(1.12);
    color:#E0B84F;
  }
  
  /* DROPDOWN */
  .mentoring-dropdown{ position:relative; }
  
  .mentoring-dropdown .dropdown-content{
    display:none;
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    background:#111;
    min-width:220px;
    border-radius:8px;
    padding:10px 0;
    z-index:9999;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
  }
  
  .mentoring-dropdown.open .dropdown-content{ display:block; }
  
  .dropdown-content li{ padding:6px 14px; }
  .dropdown-content a{ color:#fff; font-size:13px; }
  .dropdown-content a:hover{ color:#E0B84F; }
  
  /* LANGUAGE (hover) */
  .language-selector{ position:relative; cursor:pointer; }
  .language-selector i{ color:#fff; font-size:18px; }
  
  .language-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    background:#111;
    border:1px solid #333;
    border-radius:8px;
    display:none;
    flex-direction:column;
    padding:6px;
  }
  
  .language-selector:hover .language-dropdown{ display:flex; }
  
  .language-dropdown button{
    background:none;
    border:none;
    color:#fff;
    padding:6px 10px;
    cursor:pointer;
    font-size:12px;
    text-align:left;
  }
  .language-dropdown button:hover{ color:#E0B84F; }
  
  
  
  /* Responsive */
  
  @media (max-width: 768px) {
    header{
      padding:10px 12px;
      gap:3px;
    }
    .logo{
      font-size:14px;
      line-height:1.1;
    }
    
    .logo span{
      display:block;
    }
    .main-nav{ overflow: visible !important; }
    .main-nav ul{ overflow: visible !important; }
    .main-nav ul{ gap:12px; }
    .main-nav a{ font-size:12px; }
  
    .social-icons{ gap:10px; }
    .social-icons a{ font-size:16px; }
  
    /* ako baš nema mjesta, nav može malo da "skroluje" umjesto da pada dole */
    .main-nav{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
    }
    .main-nav::-webkit-scrollbar{ display:none; 
    }
  }
  
body {
    
    
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
  }
  /* HERO SEKCIJA */
/* SPLIT HERO SEKCIJA */

.hero-split {
    display: flex;
    width: 100%;
    height: 80vh;
    margin-top: 80px; /* da ne upadne u header */
}

/* Lijeva strana – slika */
.hero-left {
    width: 50%;
    height: 100%;
    overflow: hidden;
}

.hero-left img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* slika ostaje lijepa i vertikalna */
    object-position:50% 42%; 
}

/* Desna strana – pastel box */
.hero-right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7DDE2; /* pastel roza */
   
}

.hero-text-box {
    max-width: 85%;
    background: rgba(255, 255, 255, 0.45); 
    padding: 25px 30px;
    border-radius: 14px;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

.hero-text-box h2 {
    color: #4A3B40; /* tamno rozi ton */
    font-size: 28px;
    font-weight: 400;
    margin-bottom: 12px;
}

.hero-text-box p {
    color: #4A3B40;
    font-size: 18px;
    margin: 0;
}

/* RESPONSIVE – za telefon */
@media (max-width: 768px) {
    .hero-split {
        flex-direction: column;
        height: auto;
    }

    .hero-left, .hero-right {
        width: 100%;
        height: auto;
    }

    .hero-left img {
        height: 60vh; 
    }

    .hero-right {
        padding: 20px;
    }

    .hero-text-box h2 {
        font-size: 22px;
    }

    .hero-text-box p {
        font-size: 16px;
    }
}
.lineunder {
    width: 250px;                 /* dužina crte */
    height: 4px;                 /* debljina crte */
    background-color: #E0B84F;   /* zlatna/žuta boja */
    border-radius: 2px;
    margin-top: 200px;            /* razmak od teksta iznad */
}


:root{
  --mint: #a7cfc2;        /* outer */
  --frame: #f5f1e8;       /* inner poster */
  --ink: #163332;
  --muted: rgba(22,51,50,.72);
  --big: #9fb0df;         /* big title color */
  --script: #c88f97;      /* small script */
 
  --stroke: rgba(22,51,50,.16);
}

/* outer mint background */
.se-hero{
  background: #e4ecf6;
  padding: clamp(26px, 4vw, 60px) 16px;
}

/* max width center */
.se-shell{
  max-width: 1180px;
  margin: 0 auto;
}

/* inner frame like dribbble shot */
.se-frame{
  background: var(--frame);
  border-radius: 28px;
  border: 2px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3.6vw, 44px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* top text */
.se-kicker{
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--script);
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: .02em;
}

/* huge title */
.se-title{
  margin: 0;
  font-size: clamp(44px, 6vw, 100px);
  line-height: .9;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--big);
  text-transform: uppercase;
}

/* center area */
.se-center{
  display: flex;
  justify-content: center;
  margin-top: clamp(16px, 3vw, 30px);
}

/* “cut-out retro visual” */
.se-visual{
  width: min(420px, 100%);
  aspect-ratio: 4 / 3;   /* 👈 sada je landscape */
  position: relative;
  border-radius: 42px 24px 44px 22px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(0,0,0,.16);
  background: #dfe7e3;
  border: 1px solid rgba(22,51,50,.10);
}





/* image itself */
.se-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;         /* popuni lijepo, bez deformacije */
  object-position: center;   /* možeš mijenjati */
  filter: contrast(1.12) saturate(.9) brightness(1.03);
}

/* options row */
.se-options{
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: clamp(18px, 3.2vw, 30px);
}

/* sweet escape style pills */
.se-pill{
  text-decoration: none;
  font-weight: 800;
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(246, 244, 244, 0.62);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.se-pill:hover{

  box-shadow: 0 18px 34px rgba(0,0,0,.12);
}

/* subtle pastel differences per option */
.se-pill--a{ background:#f4f1ea; }
.se-pill--b{ background: rgba(175, 196, 237, 0.55); }
.se-pill--c{ background: rgba(189, 231, 213, 0.55); }
.se-pill--d{ background: rgba(247, 199, 205, 0.55); }

.se-pill--a{
  color: #a5c8d4;
}
.se-pill--b{
  color:#235d5b;
}
.se-pill--c{
  color: #5D8DAA;
}
.se-pill--d{
  color: #784757;
}

/* bottom note */
.se-footnote{
  margin: 18px 0 0;
  color: rgba(0, 5, 5, 0.45);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* responsive */
@media (max-width: 700px){
  .se-title{ letter-spacing: .03em; }
  .se-visual{ transform: rotate(-1deg); }
}










  /* ====== THEME (podesi boje ovde) ====== */
  :root{
    --bg: #fbfaf7;
    --card: #e9d9ad;          /* glavna bež */
    --ink: #F7DDE2;           /* tamno (naslovi) */
    --muted: #3c4a44;         /* tekst */
    --accent: #6a8277;        /* zelenkasto-siva */
    --accent-2: #9fb0a8;      /* svetliji akcenat */
    --stroke: rgba(106,130,119,.85);
    --white: #ffffff;
  }




/* ====== Layout wrapper ====== */
.mentoring-section{
  background: #F3EFE8; /* ili koju želiš da bude glavna */
  padding: 80px 0; /* vertikalni razmak */
  width: 100%;
  
}

.mentoring-card{
  width: 100%;
  max-width: 1200px; /* da ne bude preširoko na velikim ekranima */
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) 20px;
  position: relative;
}

/* ====== Header ====== */
.mentoring-header{
  text-align: center;
  max-width: 760px;
  margin: 0 auto 26px auto;
  position: relative;
  z-index: 2;
  background: #e7eceb;
  border-radius: 18px;
  padding: 28px;
}

.mentoring-header h2{
  margin: 0 0 8px 0;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(20px, 2.4vw, 34px);
}

.mentoring-header p{
  margin: 0;
  color: var(--accent);
  line-height: 1.55;
  font-size: clamp(13px, 1.3vw, 16px);
}

/* ====== TOP GRID (image + who-for) ====== */
.top-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 4vw, 42px);
  align-items: start;
  position: relative;
  z-index: 2;
  margin-top: 6px;
}

/* ====== Media (image + papers) ====== */
.mentoring-media{
  display: flex;
  justify-content: center;
}

.media-stack{
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
}

.paper{
  position: absolute;
  margin-top: 30px;
  inset: 0;
  border-radius: 22px;
  transform-origin: center;
}

.paper--back{
  background: rgba(94, 141, 149, 0.35);
  transform: rotate(-9deg) translate(-8px, 10px);
  filter: saturate(0.9);
}

.paper--mid{
  background: rgba(138, 215, 223, 0.18);
  transform: rotate(6deg) translate(8px, -6px);
}

.media-frame{
  position: absolute;
  inset: 0;
  margin-top: 20px;
  border-radius: 22px;
  background: #70a2c2;;
  padding: 14px;
  backdrop-filter: blur(2px);
}

.media-frame img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 12px 26px rgba(177, 161, 161, 0.12);
}

/* ====== Who-for block (right of image) ====== */
.who-for{
  padding-top: 8px;
}

.who-title{
  margin: 0 0 14px 0;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(18px, 2vw, 26px);
}

.who-list{
  display: grid;
  gap: 14px;
}

.who-item{
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  align-items: start;
  color: rgba(46,58,53,.86);
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.6;
}

/* Strelice u bojama */
.arrow-blue { color: #5D8DAA; }
.arrow-orange { color: #E37849; }
.arrow-teal { color: #7BA39D; }
.arrow-gold { color: #D8A14A; }

.icon{
  font-weight: bold;
  margin-right: 12px;
  font-size: 18px;
  display: inline-block;
  width: 20px;
}

/* ====== HOW IT WORKS boxes ====== */
.hiw{
  margin-top: clamp(28px, 4vw, 44px);
  position: relative;
  z-index: 2;
  padding: 10px 6px 6px 6px;
}

.hiw-title{
  text-align: center;
  margin: 0 0 22px 0;
  color: rgba(30,35,33,.92);
  letter-spacing: 3px;
  font-weight: 800;
  font-size: clamp(18px, 2vw, 26px);
}

.hiw-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
  align-items: stretch;
}

.hiw-card{
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 22px 20px;
  border: 2px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  min-height: 260px;
}

.hiw-card-top{
  text-align: center;
  margin-bottom: 14px;
}

.hiw-kicker{
  display: inline-block;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
  opacity: .9;
}

.hiw-card h3{
  margin: 0;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(20,22,21,.92);
}

.hiw-card p{
  margin: 0;
  color: rgba(46,58,53,.86);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

/* borders in colors like reference */
.hiw-blue{ border-color: rgba(93,141,170,.85); }
.hiw-blue .hiw-kicker{ color: #5D8DAA; }

.hiw-teal{ border-color: rgba(123,163,157,.90); }
.hiw-teal .hiw-kicker{ color: #7BA39D; }

.hiw-orange{ border-color: rgba(227,120,73,.90); }
.hiw-orange .hiw-kicker{ color: #E37849; }

/* CTA button */
.hiw-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 22px auto 0 auto;
  padding: 14px 26px;
  border-radius: 999px;
  background: #E7D85A;
  color: rgba(20,22,21,.92);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  width: max-content;
}

/* ====== SVG path styling ====== */
.mentoring-path{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mentoring-path path{
  stroke: var(--stroke);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 10 12;
  opacity: .65;
}

.mentoring-path circle{
  fill: var(--accent);
}

/* ====== Responsive ====== */
@media (max-width: 920px){
  .top-grid{
    grid-template-columns: 1fr;
  }
  .who-for{
    padding-top: 0;
  }
  .hiw-grid{
    grid-template-columns: 1fr;
  }
  .hiw-card{
    min-height: unset;
  }
}





























.fixed-email {
  position: fixed;
  bottom: 20px;
  right: 100px;
  background-color: rgba(255, 255, 0, 0.3);
  color: black;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 14px;
  z-index: 999;
  box-shadow: 0 0 8px 2#E0B84F(255, 255, 0, 0.3);
}

.fixed-email a {
  color: black;
  text-decoration: none;
  font-weight: 500;
}

.fixed-email a:hover {
  color: #e0b84f;
}


  
.contact-float{
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.contact-main img{
  width: 60px;        /* VELIČINA – možeš promijeniti */
  height: 60px;
  border-radius: 50%; /* pravi krug */
  object-fit: cover;
  border: 2px solid white; /* eventualni okvir */
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.contact-options{
  display: none;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
}

.contact-option{
  width: 45px;
  height: 45px;
  background: white;
  border-radius: 50%;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 20px;
}



/* =========================
   1-on-1 mentoring – MOBILE FIX
   ========================= */
   @media (max-width: 768px){

    html, body { overflow-x: hidden; }
  
    .mentoring-section{
      padding: 24px 14px;
    }
  
    .mentoring-card{
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
  
    /* Najbitnije: SVG dekoracija ne smije širiti stranicu */
    .mentoring-path{
      width: 100%;
      max-width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
    }
  
    /* ako je SVG pozicioniran apsolutno i “viri” */
    .mentoring-card{ position: relative; overflow: hidden; }
    .mentoring-path{ position: absolute; left: 0; right: 0; bottom: 0; }
  
    /* top dio (slika + who-for) stack na mobu */
    .top-grid{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  
    .mentoring-media,
    .who-for{
      width: 100%;
      max-width: 100%;
    }
  
    /* slika da bude responsive */
    .media-frame img{
      width: 100%;
      height: auto;
      display: block;
    }
  
    /* HOW IT WORKS kartice jedna ispod druge */
    .hiw-grid{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  
    .hiw-card{
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
  
    /* izbaci <br> razmake na mobu (prave čudne rupe) */
    .hiw-card br{ display: none; }
  
    /* dugme da stane */
    .hiw-btn{
      width: 100%;
      max-width: 100%;
      display: flex;
      justify-content: center;
      box-sizing: border-box;
    }
  
    /* sigurnosno: ikonice/tekst da ne guraju udesno */
    .who-item, .hiw-item{
      display: flex;
      gap: 10px;
      align-items: flex-start;
    }
    .icon{ flex: 0 0 auto; }
    .who-item span:last-child,
    .hiw-item span:last-child{
      min-width: 0;
      word-break: break-word;
    }
  }




  /* ===== TEAMS PAGE WRAPPER ===== */
.teams-page{
  background:#e4ecf6; /* slično tvojoj pozadini */
}

/* ===== HERO ===== */
.teams-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 56px) 16px;
  
}

.teams-hero-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 3vw, 36px);
  position: relative;
  z-index: 2;
}

.teams-title-box{
  background:rgba(210, 222, 220, 0.55);
  border: 2px solid #fbfaf7;
  border-radius: 18px;
  padding: clamp(16px, 2.2vw, 22px);
  margin-bottom: 18px;
}

.teams-title-box h2{
  margin: 0 0 8px 0;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.1;
  color: #5f6f6c;
}

.teams-subtitle{
  margin: 0;
  color: #6b7a78;
  font-size: 15px;
}

.teams-photo-frame{
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  padding: 14px;
  background: rgba(95, 150, 160, 0.35);
  transform: rotate(-2deg);
}

.teams-photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  display: block;
}

/* ===== RIGHT SIDE ===== */
.teams-hero-right h3{
  margin: 0 0 12px 0;
  font-size: 22px;
  color: #5f6f6c;
}

.teams-list{
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: grid;
  gap: 10px;
}

.teams-list li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 1.35;
}

.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-top: 6px;
}
.dot-teal{ background: #5f96a0; }
.dot-gold{ background: #e09c4f; }
.dot-slate{ background: #72c9c1; }

.teams-cta-btn{
  display: inline-block;
  background: #E0B84F;
  color: #1a1a1a;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 999px;
  padding: 14px 20px;
  text-decoration: none;
}

.teams-note{
  margin: 12px 0 0 0;
  font-size: 13px;
  color: #7a7a7a;
}

/* ===== HOW IT WORKS ===== */
.teams-how{
  padding: 10px 16px 56px;
}

.teams-how-title{
  max-width: 1100px;
  margin: 0 auto 18px;
  text-align: center;
  letter-spacing: 3px;
  color: #2f2f2f;
}

.teams-cards{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
 
}

.teams-card{
  background: rgba(255,255,255,0.6);
  border: 3px solid rgba(198, 90, 23, 0.25);
  border-radius: 16px;
  padding: 18px;
}

.teams-card h4{
  margin: 0 0 8px 0;
  color: #2f2f2f;
}

.teams-card p{
  margin: 0;
  color: #6b6b6b;
  font-size: 14px;
  line-height: 1.45;
}

/* ===== SOFT SHAPES BACKGROUND (no dots) ===== */
.teams-bg-shapes{
  position: absolute;
  inset: -120px -120px -120px -120px;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(95,150,160,0.22), rgba(95,150,160,0) 70%) 12% 28% / 520px 520px no-repeat,
    radial-gradient(closest-side, rgba(224,184,79,0.18), rgba(224,184,79,0) 70%) 78% 18% / 520px 520px no-repeat,
    radial-gradient(closest-side, rgba(120,150,145,0.14), rgba(120,150,145,0) 70%) 58% 78% / 620px 620px no-repeat;
  filter: blur(0px);




}/* TEAMS hero — topographic background */
.teams-hero{
  position: relative;
  overflow: hidden;
  background:#e4ecf6; /* slično tvojoj pozadini */
  ;
}

/* 2 velika geometrijska oblika, vrlo suptilno */
.teams-hero::before,
.teams-hero::after{
  content:"";
  position:absolute;
  border-radius: 48px;
  pointer-events:none;
  z-index:0;
  opacity: 0.22;
}

/* teal blok */
.teams-hero::before{
  width: 520px;
  height: 520px;
  left: -160px;
  top: -140px;
  background: #5f96a0;
  transform: rotate(12deg);
}

/* gold blok */
.teams-hero::after{
  width: 560px;
  height: 560px;
  right: -200px;
  bottom: -220px;
  background: #E0B84F;
  transform: rotate(-10deg);
  opacity: 0.16;
}

/* sadržaj iznad */
.teams-hero-inner{
  position: relative;
  z-index: 1;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px){
  .teams-hero-inner{
    grid-template-columns: 1fr;
  }
  .teams-photo-frame{
    transform: none;
    margin-bottom: 6px;
  }
  .teams-cards{
    grid-template-columns: 1fr;
  }
}


/* ===== FEDERATIONS SECTION ===== */
.feds-block-1{
  background: #f6f1ea;
  padding: 70px 16px 60px;
}

.feds-row{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 64px;              /* ovo gura tekst više udesno */
  align-items: center;
}

.feds-img img{
  
  height: 520px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  width: min(420px, 100%);
  aspect-ratio: 1 / 1;
  border-radius: 26px;
  padding: 14px;
  background: rgba(95, 150, 160, 0.35);
  transform: rotate(-2deg);
}

/* TITLE BOX (light-blue) */
.feds-title-box{
  display: inline-block;
  background: rgba(210, 222, 220, 0.65);  /* svijetlo plava */
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.feds-title{
  margin: 0;
  color: #f06a3f; /* tvoj koral */
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 38px;
  line-height: 1.05;
}

.feds-sub{
  margin: 0 0 14px;
  color: #6b6b6b;
  line-height: 1.55;
  max-width: 52ch;
}

.feds-mini{
  margin: 0 0 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  color: #2f2f2f;
}

.feds-bullets{
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  gap: 12px;
}

.feds-bullets li{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: #3d3d3d;
  line-height: 1.45;
}

.arr{ font-weight: 900; font-size: 18px; margin-top: 2px; }
.arr.a1{ color:#f06a3f; }
.arr.a2{ color:#E0B84F; }
.arr.a3{ color:#5f96a0; }
.arr.a4{ color:#8aa2a0; }

/* CTA like TEAMS (yellow pill) */
.feds-cta{
  display: inline-block;
  background: #E0B84F;
  color: #1a1a1a;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 999px;
  padding: 14px 20px;
  text-decoration: none;
  text-transform: uppercase;
}

/* HOW IT WORKS (single box) */
.feds-how-box{
  max-width: 1100px;
  margin: 40px auto 0;
  background: rgba(255,255,255,0.55);
  border: 3px solid rgba(198, 90, 23, 0.25);
  border-radius: 18px;
  padding: 18px 18px 16px;
}

.feds-how-title{
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: 3px;
  color: #2f2f2f;
}

.feds-how-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.feds-how-list li{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: #6b6b6b;
  line-height: 1.5;
  font-size: 16px;
}

.how-arr{
  font-weight: 900;
  color: #ed996c;
  font-size: 20px;
  margin-top: 2px;
}

/* RESPONSIVE */
@media (max-width: 768px){
  .feds-row{
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .feds-img img{
    height: 340px;
  }
  .feds-title{
    font-size: 30px;
  }
}