@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

/* #44ccff, #6bb666, #8cc888, #488444, #bbdd33, #ffcc44 */

body {
  --logo-padding-ratio-horizontal: 1 / 170 * 24; /* Dolžina terilnice glede na dolžino logotipa */
  /* 
  Logotipu, ki bi zapolnil ves zaslon po širini, dodamo left- in right- margin po formuli 
  C = (A*D)/(1+2D), kjer je
  C ... rezultat (končna dolžina logotipa)
  A ... razpoložljivi prostor (npr. 100vw)
  D ... razmerje --logo-padding-ratio-horizontal 
  Primer uporabe: 
  calc(100vw * var(--logo-padding-ratio-horizontal) / (1 + 2 * var(--logo-padding-ratio-horizontal)))
  */

  font-family: "Merriweather", sans-serif;
}

.hidden {
  display: none !important;
}

/*fonts*/
.vollkorn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    h2 {
      font-size: clamp(3rem, calc(40vw / 855.6 * 167.2), 5rem);
    }
}

.img {
  width: 50px; 
  height: auto; 
}

h3 {
    margin-top: 50px;
    margin-left: 50px;
    margin-bottom: 20px;  
}

/* TIMER */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.hero {
    text-align: center;
    width: 100%;
    margin: 50px 0; /* 50px space before and after */
}

.timebox {
    display: flex;
    justify-content: center; /* Centriramo vodoravno */
    align-items: center;
    gap: min(20px, calc((100% - (4 * 4ch + 3 * 1ch) - 3ch) / 8));
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

.title2 {
    display: inline;
    width: 60px;
}

.time {
    text-align: center;
    min-width: 60px; /* Prepreči premikanje števk */
}

.separator {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 3px;
}

/*slika*/
.hero-image {
    position: relative;
    background-image: url("images/slika_fr_fr.webp"); /* The image used */
    background-color: #cccccc; /* Used if the image is unavailable */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    opacity: 0.98;
    max-width: 100%;
    height: fit-content;
  }
.hero-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(39, 85, 11, 0.2); /* Green overlay with transparency */
    pointer-events: none; /* Ensures it doesn't interfere with clicks */
    height: 100%;
    z-index: -1;
}
/*napis na sliki*/
.hero-text {
    text-align: center;
    color: rgb(255, 255, 255);
    max-width: 100%;
    backdrop-filter: brightness(80%); 
    padding-top: 7rem;
    text-shadow: #000 1px 0 10px;

  }

  .hero-subtitle {
    display: inline-block;
    padding: 10px 16px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    font-size: 1.1rem;
    line-height: 1.4;
    background: rgba(0, 0, 0, 0.45); /* subtle contrast on image */
    backdrop-filter: blur(4px); /* nice glass effect (optional) */
    margin-top: 10px;
}

.link {
    text-decoration: none; /* Removes the underline */
    color: inherit; /* Inherits the color from the parent element (or specify a color) */
    transition: all 0.3s ease; /* Smooth transition for color and transform */
}

.link:hover {
    color: rgb(57, 49, 208); /* Change color on hover */
    transform: translateY(-5px); /* Make the text "jump" by moving it up */
  }

/* Title icons */
.title-icons {
    display: flex; /* Align date and location in a row */
    gap: 0.2rem 20px; /* Space between them */
    align-items: center; /* Align icons and text properly */
    justify-content: center; /* Center horizontally */
    flex-wrap: wrap;
}

.calendar, .location {
    display: flex;
    align-items: center; /* Align icon and text */
    gap: 8px; /* Space between icon and text */
}

.size-6 {
    width: 20px; /* Adjust icon size */
    height: 20px;
}


/* Osnovna navigacija */
/* Navigacijska vrstica */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  top: 0;
  left: 0;
  width: 100%;
}

.logo-home {
  width: 100px;
  height: 100px;
}
.logo-svg {
    width: 220px;
    max-width: 80%;
    height: auto;
    display: block;
    
}
.highlight {
    color: #488444;
  }

/* Navigacijski meni */
/* Navigacijska vrstica */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  top: 0;
  left: 0;
  width: 100%;
  position: fixed; /* Keeps navbar fixed on top */
  z-index: 100; /* Ensures it's on top of other elements */
}

/* Logo container */
.logo-home {
  width: auto;
  height: 50px; /* Set a fixed height for the logo */
}

.logo-home img {
  height: 100%; /* Make sure the logo scales with the container */
  width: auto; /* Maintain aspect ratio */
}

/* Navigacijski meni */
.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  flex-grow: 1; 
  justify-content: flex-end;
  margin-right: 50px; /* Doda malo prostora med navigacijo in gumbom */
}

/* Povezave v meniju */
.nav-links li {
  display: inline;
}

.nav-links a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease-in-out;
  font-size: 16px; /* Adjust font size for consistency */
}

.nav-links a:hover {
  color: #8cc888; /* Hover effect color */
}

/* Gumb "Postani partner" */
.partner-btn {
  background: #5ba75b;
  position: relative;
  padding: 5px 15px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 25px;
  outline: none;
  overflow: hidden;
  color: #fff;
  transition: color 0.3s 0.1s ease-out;
  text-align: center;
  border: 1.2px solid transparent;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.partner-btn span {
  margin: 10px;
}

.partner-btn::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content: '';
  border-radius: 50%;
  display: block;
  width: 20em;
  height: 20em;
  left: -5em;
  text-align: center;
  transition: box-shadow 0.5s ease-out;
  z-index: -1;
}

.partner-btn:hover {
  color: #fff;
  border: 1.2px solid  #254423;
  background-color: #488444;
  box-shadow: 0px 7px 20px rgba(0, 0, 0, 0.4);
}

.partner-btn:hover::before {
  box-shadow: inset 0 0 0 10em  #488444;
}
   

   






  
/* General styles for the heading */
.main__heading {
    font-weight: 600;
    font-size: 2.25em;
    margin-bottom: 0.75em;
    text-align: center;
    color: #167dc1;
  }

.cards__inner {
    display: flex;  
    flex-wrap: wrap; /* Ensures responsiveness */
    gap: max(1vw, 5px); /* Adds spacing between cards */
    justify-content: center; /* Centers them in the container */
    width: min(95vw, 800px);
    margin: auto;
  }
  .cards {
    width: 100%;
    max-width: 1000px; /* Adjust if necessary */
    margin: auto;
    padding-bottom: min(5rem, 5vh);
    text-shadow: 0 0;
  }
  
  .card {
    --flow-space: 0.5em;
    --hsl: var(--hue), var(--saturation), var(--lightness);
    width: calc(33.333% - max(1vw, 5px));  /* Each card takes up 1/3 of the container minus the gap */
    min-width: 200px;
    max-width: 22rem;
    padding: 1.5em min(2em, 5vw);
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    gap: 1.25em;
    color: #228735;
    background-color: rgba(234, 247, 234, 0.9);
    border: 1px solid #381cf033;
    border-radius: 15px;
    box-sizing: border-box;  /* Ensure padding doesn't affect width */
  }
  
  .card:nth-child(1) {
    --hue: 165;
    --saturation: 82.26%;
    --lightness: 51.37%;
  }
  
  .card__bullets {
    line-height: 1.4;
  }
  
  .card__heading {
    font-size: 1.05em;
    font-weight: 600;
  }
  
  .card__price {
    font-size: 1.75em;
    font-weight: 700;
  }
.cards_image{
  max-width:  100px;
}
  
  .flow > * + * {
    margin-top: var(--flow-space, 1.25em);
  }
  
  .cta {
    display: block;
    align-self: end;
    margin: 0.1em 0 0.1em 0;
    text-align: center;
    text-decoration: none;
    color: #134d23;
    background-color: transparent;
    outline: 1px solid rgb(29, 90, 48);
    padding: 0.7em;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
  }
  
  .card:hover {
    --lightness: 80%;
    background: #1ca6ae80;
    color: #ffffff;
    outline: 1px solid rgb(255, 255, 255);
    box-shadow: inset 0 0 80px rgb(14, 159, 86), inset 20px 0 80px rgb(43, 123, 80),
      inset -20px 0 80px rgb(16, 117, 52), inset 20px 0 300px rgb(23, 87, 48), inset -20px 0 300px #0ff,
      0 0 50px #fff, -10px 0 80px transparent, 10px 0 80px transparent;
    transition: all ease-in-out 0.3s;
  }
  
  .card:hover > .cta {
    outline: none;
    color: #fff;
    background-color: #117b42;
  }



/*FAQ*/
h2.faq-heading {
/*     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 */    text-align: center;
    font-weight: 300;
    font-size: 28px;
    color: #09390a;
    margin: 8px 0;
    margin-top: 60px;
}

.faq-container {
    max-width: 1300px;
    border-radius: 8px;
    box-shadow: 0 4px 50px -8px rgba(0,0,0,0.3);
    margin: 32px auto;
/*     font-family: 'Merriweather Sans', sans-serif;
 */    color: rgb(11, 20, 9);
    line-height: 1.9;
}

.faq-container .question-container {
    border-bottom: 1px solid #eee;
}

.faq-container .question {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    font-size: 18px;
    padding: 16px 24px;
    cursor: pointer;
}

.faq-container .question .question-icon {
    width: 20px;
    height: 20px;
    background: #dadada;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    transition: all 300ms ease;
}

.faq-container .question-container.expanded .question-icon {
    background: #2a9d8f;
    color: #fff;
    transform: rotateZ(180deg);
}

.faq-container .answer {
    display: flex;
    margin: 8px;
    gap: 8px;
}

.faq-container .answer-container {
    padding: 0px 32px;
    background: rgba(234, 247, 234, 0.9);
    max-height: 0;
    overflow: hidden;
    transition: all 300ms ease;
}

.faq-container .question-container.expanded .answer-container {
    max-height: 500px;
    padding: 8px 32px;
}



footer {
  background-color: #8CC888;
  padding: 20px;
  text-align: center;
}

footer a {
  display: inline-block;
  margin: 0 10px; /* Adjust spacing between icons */
}

footer img {
  width: 40px; /* Adjust size as needed */
  height: auto; /* Maintain aspect ratio */
}



#letniPartnerji {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 20px;
}

#letniPartnerji a {
    display: flex;
    align-items: center;
    justify-content: center;
}

#letniPartnerji img {
    height: 60px;
    width: auto;
    object-fit: contain;
    max-width: 170px;
}








.sponzor_logo{
  display: flex;
  justify-content: center;

}
.sponzor_logo img{
  width: auto;
  height: auto;
  /* min-width: 80px; This was needed for LEK, however, it distorts vertical images */
  margin: 2rem; /* modify to satisfy common needs of partners */
  margin: calc(70px / 35 * 28) calc(100vw * var(--logo-padding-ratio-horizontal) / (1 + 2 * var(--logo-padding-ratio-horizontal))) calc(70px / 35 * 28) calc(100vw * var(--logo-padding-ratio-horizontal) / (1 + 2 * var(--logo-padding-ratio-horizontal))); 
  max-height: 70px;
  max-width: 80vw;
}

.partner_content {
  background: linear-gradient(#fff, 10rem, #EAF7EA, #fff);
}

.sub_navbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(91, 167, 91, 0.8); 
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}


.sub_cards__inner {
  display: flex;  
  flex-wrap: wrap; /* Ensures responsiveness */
  justify-content: center; /* Centers them in the container */
  margin: auto;
}
.sub_cards {
  max-width: 1000px; /* Adjust if necessary */
  margin: auto;
  padding-bottom: min(10rem, 10vh);
  text-shadow: 0 0;
  font-size: 20px;

}


.sub_card {
  --flow-space: 0.5em;
  --hsl: var(--hue), var(--saturation), var(--lightness);
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
  border-radius: 15px;
  box-sizing: border-box;  /* Ensure padding doesn't affect width */

}

.sub_card:nth-child(1) {
  --hue: 165;
  --saturation: 82.26%;
  --lightness: 51.37%;
}

.sub_card__bullets {
  line-height: 1.4;
}

.sub_card_image{
  max-width: 400px;
  width: 100%;
  height: auto;
  box-shadow: 0 4px 10px rgba(90, 28, 28, 0.1); /* Soft shadow */
  border-radius: 15px;
  border: 0px;
  justify-content: center;
}

.text-image-container {
  display: flex;
  padding: 1px;
  margin: 1px;
  flex-wrap: wrap; /* allows it to stack on small screens */
  gap: 1.5rem 3ch;
/*   font-family: 'Merriweather Sans', sans-serif;
 */  align-items: center;
  justify-content: center;
}
.sub_card_text_image{
  flex: 1;
  text-align: justify;
  hyphens: none;
  word-break: normal;
  overflow-wrap: break-word;
  min-width: min(20ch, 99vw);
}
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  cursor: pointer;
}

.video-thumbnail img {
  width: 100%;
  display: block;
  border-radius: 15px;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100px;
  width: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.play-button::after {
  content: '';
  position: absolute;
  top: 32%;
  left: 38%;
  width: 0;
  height: 0;
  border-left: 25px solid #ffcc00;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

.youtube-iframe {
  width: 100%;
  height: 280px;
  border-radius: 15px;
}

.partner-section {
  text-align: center;
  padding: 40px 20px;
  margin-bottom: 3rem;
}

.partner-section h1 {
  margin: 40px 0 20px;
  font-size: 40px;
  font-weight: bold;
  padding-bottom: 1rem;

  &:not(:first-child) {
    padding-top: 4rem;
  }
}

.diamantni {
  color: #9ac5db;
}
.zlati {
  color: #cfb53b;
}
.srebrni {
  color: #a6a6a6;
}
.bronasti {
  color: #cd7f32;
}


.partner-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

.partner-logo {
  flex: 1 1 300px; 
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partner-logo img {
  width: 100%;              /* Ensures the image never overflows */
  height: auto;             /* Maintain aspect ratio */
  max-height: 100px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.partner-logo img:hover {
  transform: scale(1.05);
}




.cta-section {
  background-color: #8CC888; /* barva ozadja */
  padding: 60px 20px;
  border-radius: 40px;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
/*   font-family: 'Merriweather Sans', sans-serif;
 */}

.cta-section h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #000;
}

.cta-section p {
  font-size: 18px;
  color: #444;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid #333;
  border-radius: 6px;
  background-color: transparent;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-button:hover {
  background-color: #333;
  color: #fff;
}




/* Greatly modified from https://github.com/threkk/examples/blob/main/css-only-hamburger-menu/index.html */
nav a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease-in-out;
  font-size: 16px;
  width: 100%;
  &:hover {
      color: #8cc888; /* Hover effect color */
  }

  img {
      height: 2rem;
      padding-left: min(1rem, 5vw);
      max-width: 52vw;
  }
}

/* Here we start */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
/*     padding: 15px 20px;
*/
  background-color: rgba(91, 167, 91, 0.8); 
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;

  
  .logo-home {
      height: 2rem;
    }      
}

nav ul {
  /* Make the markers disappear */
  list-style-type: none;
  margin: 1rem 0;
  padding: 0;
}

.hideable {
  padding: 0;
}

nav ul:not(:first-child) li {
  /* Puts the elements in a single line */
  display: inline-flex;
  padding: 0.3rem 1rem;
}

/* These two lines make the checkbox and the label disappear when we are in desktop mode. */
nav input[type="checkbox"],
nav label {
  display: none;
  padding: min(0.5rem, 4vw);
  align-self: center;

  img {
      border-radius: 8px;
      height: 2.5rem;
      max-height: 18vw;
      transition: rotate 0.2s cubic-bezier(.18,.89,.32,1.28);
  }
}

/* This start to get interesting: we go into mobile phone mode */
@media (max-width: calc(2rem / 0.21 + 1rem + 5 * 2rem + 44ch + 16px)) {
  /* Use this @media query ONLY for navbar. It is specific to the length of the words in the navbar!
  If you add new links to navbar, increase the "44ch" value to actual number of characters.
  Do not use this query for other mobile layouts. */

  /* Here is the magic: if the checkbox is not marked, the adjacent list is not displayed */
  input[type="checkbox"]:not(:checked)+ul {
      display: none;
  }
  nav {
      flex-direction: row;
      flex-wrap: wrap;
      margin-left: 0;
      margin-right: 0;
      /* Animation, but it only works when opening
      because elements are removed (display: none) immediately when closing.
      The nav collapses (because there are no new elements), hence no animation */
/*         max-height: 4rem;
      transition: max-height 0.25s ease-in-out;
      &:has(input[type="checkbox"]:checked) {
          max-height: calc(5 * 3.1rem + 2rem);
      }
*/        
  }
  
  /* Stlying the menu icon, the checkbox stays hidden */
  nav label {
      display: block;
      &:has(~ input[type="checkbox"]:checked) img {
          rotate: 90deg;
      }
  }
  
  /* Because we are in mobile mode, we want to display it as a vertical list */
  nav ul {
      display: block;
  }
  
  /* We have two lists: the first one are the always visibile items in the 
  menu bar. The second one is the one that will be hidden */
  nav ul:last-child {
      width: 100%;
      flex-basis: 100%;
  }
  
  nav ul.hideable li {
      margin-bottom: 0;
      width: 88%;
      text-align: end;
      padding: 0.5em;
  }

}
.team_page {
  padding: 2rem;
  background: linear-gradient(#fff, 10rem, #8CC888, #fff);
}

.team_section_title {
  text-align: center;
  font-size: 2rem;
  margin: 3rem 0 1.5rem 0;
  color: #2d7a2d;
  font-weight: bold;
}

.team_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 3rem;
}

.team_x {
  background: rgba(235, 248, 235, 0.9);
  border-radius: 1rem;
  padding: 1rem;
  width: 220px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.team_x.visible {
  opacity: 1;
  transform: translateY(0);
}

.team_x_image {
  width: 200px;
  height: 250px;
  object-fit: cover;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

.team_x_textbox {
  font-size: 1rem;
  color: #2d7a2d;
  font-weight: bold;
  margin-top: auto;
}




.biokviz-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(to bottom, #d9f2d9, #a7d7a7, #ffffff);
  padding: 2rem;
}

.biokviz-box {
  background: #ffffff;
  border: 2px solid #8bc48b;
  border-radius: 1.5rem;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.biokviz-title {
  font-size: 1.8rem;
  color: #387538;
  font-weight: bold;
  margin-bottom: 1.5rem;
  text-align: center;
}

.biokviz-text {
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.biokviz-button {
  display: block;
  text-align: center;
  background-color: #4caf50;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0.75rem;
  border: none;
  border-radius: 1rem;
  margin-top: 1.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.biokviz-button:hover {
  background-color: #45a049;
}



.razgovori-container {
  max-width: 900px;
  margin: auto;
/*   padding: 0 20px; */
  color: #111;
}

.razgovori-header-green {
  background-color: #6CBF73;
  padding: 30px 20px;
  text-align: center;
  border-radius: 8px 8px 0 0;
}

.razgovori-header-title {
  font-size: 28px;
  font-weight: 700;
  color: white;
}

.razgovori-main-content {
  background: #fff;
  padding: 25px;
  border: 1px solid #d4d4d4;
  border-top: none;
  border-radius: 0 0 8px 8px;
}

.razgovori-section-title {
  font-size: 20px;
  margin-bottom: 20px;
}

.razgovori-text-block {
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.6;
}

.razgovori-cv-link {
  color: #e69000;
  font-weight: 600;
  text-decoration: none;
}

.razgovori-cv-link:hover {
  text-decoration: underline;
}

.razgovori-green-highlight {
  background-color: #eafbe8;
  border: 2px dashed #6CBF73;
  margin-top: 35px;
  padding: 25px;
  text-align: center;
  border-radius: 8px;
}

.razgovori-highlight-text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.razgovori-partner-button {
  background-color: #6CBF73;
  color: white;
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.razgovori-partner-button:hover {
  background-color: #5aa462;
}

.razgovori-signup-button-wrapper {
  text-align: center;
  margin-top: 25px;
}

.razgovori-signup-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.razgovori-signup-button:hover {
  background-color: #449d48;
}



@media (max-width: 800px) { /* FONE */
  /*   .separator {
      display: none;
    }
   */
  
   .timebox {
     font-size: 1.2rem;
  /*  gap: min(20px, calc((100% - (4 * 4ch + 3 * 1ch) - 3ch) / 8 / 2));
    gap: 0;
    font-size: calc(100vw / 22); */
    .time {
      min-width: unset; 
    }
   }

  .partner-section h1 {
    font-size: 28px;
  }
  
  /*  .cards__inner {
    gap: 5px;
   } */
  
   .card {
    width: 95vw;
   }

  .biokviz-box {
    padding: 1.5rem;
    border-radius: 1rem;
    max-width: 95vw;
  }

  .biokviz-title {
    font-size: 1.5rem;
  }

  .biokviz-text {
    font-size: 0.95rem;
  }

  .biokviz-button {
    font-size: 1rem;
    padding: 0.65rem;
  }

  .team_section_title {
    font-size: 1.5rem;
    margin: 2rem 0 1rem 0;
  }

  .team_container {
    gap: 1rem;
  }

  .team_x {
    padding: 0.8rem;
  }

  .team_x_image {
    width: 200px;
    height: 250px;
    margin-bottom: 0.5rem;
  }

  .team_x_textbox {
    font-size: 0.9rem;
  }

  .team_container {
    align-items: center;
  }

  .team_x {
    max-width: 300px;
  }
  

}
    .hero-subtitle {
        font-size: 0.95rem;
        padding: 8px 12px;
        border-radius: 10px;
        text-align: center;
    }