/*Za glavnu stranicu*/
main.special-landing-content{
  display: flex;
  max-width: 100%;
  /* width: 70%; */
  /* text-align: end; */
}

#cta-heading{
  font-size: 4rem;
  color: var(--font-primary);
  margin-bottom: 8px;
  align-items: center;
}

#cta-paragraph{
    font-size: 1.4rem;
    color: var(--font-primary);
}

h2.landing-heading,
h2.special-landing-heading{
    font-size: 2.6rem;
    color: var(--font-primary);
}

.special-landing-paragraph{
    font-size: 1.4rem;
    color: var(--font-primary);
}

.special-button{
  padding: 12px 16px;
  box-shadow: rgb(8 8 8 / 98%) 0px 3px 12px;
  /* background-color: var(--button-background-color); */
  background-color: var(--button-special-background-color);

  border-radius: 12px;
  color: var(--tertiary);
  /* text-shadow: 0 0 6px var(--button-shadow-color); */
  transition: 0.1s ease;
  /* font-size: 0.8rem; */
  /* font-size: 1rem; */
  font-size: 0.8rem;
}

.special-button.alt-design{
  background-color: transparent;
  border: 2px solid var(--button-background-color);
}

.special-button.alt-design:hover{
  background-color: transparent;
}

.special-button:hover{
    /* text-shadow:
    0 0 5px var(--tertiary),
    0 0 8px var(--tertiary),
    0 0 4px var(--tertiary),
    0 0 30px var(--tertiary); */
    background-color: var(--button-special-hover-background-color);
    scale: 1.05;
    transition: 0.1s ease;
}

.special-button:active{
    scale: 1.0;
    transition: 0.1s ease;
}

a.special-button{
  align-items: center;
  color: var(--font-primary);
}

.bigger-heading{
  font-size: 2.5rem;
  color: var(--font-primary);
}

.bigger-paragraph{
  font-size: 1.1rem;
  color: var(--font-primary);
}

/* Define keyframes for fade-in */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#cta-heading,
#cta-paragraph,
.special-landing-paragraph,
.special-button {
  opacity: 0;
  animation: fadeIn 1.3s forwards; 
}

#cta-heading{
  animation-delay: 1.0s;
}

#cta-paragraph{
  animation-delay: 2.0s;
}

.special-landing-heading{
  animation-delay: 3.4s;
}

.special-landing-paragraph{
    animation-delay: 4.0s;
}

.special-button{
  animation-delay: 3.0s;
}

.special-button-wrapper{
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 16px;
}

#hero{
    max-width: 100%;
    width: 100%;
    /* padding-top: 5%; */
    /* padding: 5%; */
}

#hero-heading{
    font-size: 6rem;
    margin-bottom: 0px;
    /* padding-left: 5%; */
    color: var(--font-primary);
}

#hero-under-heading{
    font-size: 2rem;
    margin-top: 0px;
    /* padding-left: 5%; */
    color: var(--font-secondary);
}

@media (max-width: 768px) {

    a.special-button{
        font-size: 0.8rem;
    }

    .special-button-wrapper{
        margin-top: 24px;
        flex-direction: column;
        align-items: flex-end;
    }

    .special-button{
      width: fit-content;
    }

      /* HERO */
    #hero {
      /* padding: 10% 0%; */
      text-align: center;
    }

    #hero-heading {
      font-size: 2.5rem;
    }

    #hero-under-heading {
      font-size: 1.2rem;
    }

     #cta-heading, h2.special-landing-heading{
        font-size: 2.2rem;
        text-align: center;
    }

    #cta-heading,
    #cta-paragraph{
      text-align: right;
    }
    .end-container{
        padding: 0px 24px;
    }

    .special-button{
      width: fit-content;
      align-self: flex-end;
    }
}

@media (max-width: 480px){

    #hero {
      text-align: left;
    }

    #hero-heading {
      text-align: left;
    }

    #cta-heading, h2.special-landing-heading{
        font-size: 1.4rem;
        text-align: center;
    }

    #cta-paragraph, p.special-landing-paragraph{
        font-size: 0.8rem;
        text-align: center;
    }

    .special-button{
      width: fit-content;
      align-self: center;
    }
}