body {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.4;
    margin: 0;
    padding: 0;
    /* background-color: #f4f4f4; */
}

header, article, footer {
    max-width: 800px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

header h1 {
    color: #191919;
    margin-bottom: .5em;
    font-size: 2.6rem;
    letter-spacing: -.025em;
    font-weight: 700;
}

header p {
    color: #191919;
    font-size: 1.25rem;
    margin-bottom: 25px;
}


section {
    margin-bottom: 20px;
}

h2 {
    color: #333;
    margin-top: 35px;
    margin-bottom: 0px;
    font-size: 1.6rem;
    font-weight: 700;
}

p {
    margin-bottom: 5px;
    margin-top: 5px;
    line-height: 1.6;
    font-weight: 300;

}

section {
    font-weight: 300;
    line-height: 1.6;

}

footer {
    font-size: 0.9em;
    text-align: left;
    clear: both;
    padding-bottom: 75px;
}

footer p {
    margin-bottom: 10px;
}

footer a {
    color: rgb(9 194 105);;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

.learn-more-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-left: auto;
    margin-right: auto;
}

.learn-more-btn:hover {
    background-color: #367c00; /* Ciemniejszy odcień zieleni dla efektu hover */
    text-decoration: none;
    background-color: rgba(7, 155, 84, 1);
}



button.size-large, a.size-large {
    padding: 1rem 2rem;
    line-height: 1.25rem;
    letter-spacing: .025em;
    text-decoration: none;
    z-index: 2;
}

button.type-primary, a.type-primary {
    display: inline-flex;
    border-radius: .475rem;
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(9 194 105);
    --tw-text-opacity: 1;
    color: rgb(255 255 255);
    position: relative;
    z-index: 2;
}

button.type-primary:hover, a.type-primary:hover {
    background-color: rgba(7, 155, 84, 1);
    transition: background-color 0.3s ease;

}


p.details{
    font-size: .875rem;
    margin-top: .75rem;
    opacity: .5;
    color: #000;
    letter-spacing: .025em;
}


#stickyButtonContainer {
    position: fixed;
    top: 0;
    width: 100%;
    margin: 20px auto;
    z-index: 1000;
    display: none; 
    left: 50%;
    transform: translateX(-50%);
    padding: auto 20px;

    
}

.sticky {
    z-index: 1000; 
}


ul{
    padding-left: 15px;
}

ol{
    padding-left: 20px;
}

.see-also-cont{
    padding-top: 75px;
}
.see-also{
    font-weight: 300;
}

.group-links{
    display: flex;
    flex-direction: column;
}
.group-links a{

    font-weight: 300;
    text-decoration: none;
    color: #09C269;
    text-decoration: none;
}

.group-links a:hover{
    text-decoration: underline;
}

ul{
list-style-type: none;
padding-left: 0px;
}
li{
    margin-bottom: 10px;
}

section ul {
    list-style-type: square;
    padding-left: 15px;

}

.trial-info{
    position: relative
}


.overlay-image {
    position: absolute;
    top: -8px;
    left: 160px;
    width: 330px;
    height: auto;
    margin-top:-66px;
}

@media (max-width: 503px) {
    .trial-info .overlay-image {
      display: none;
    }
  }

  

.overlay-image-mobile
  {
    position: absolute;
    top: 25px;
    left: -15px;
    width: 230px;
    height: auto;
    margin-top: -65px;
    z-index: 1;
}
  /* Styl domyślny, obrazek ukryty */
.trial-info .overlay-image-mobile {
    display: none;
}

/* Media query dla urządzeń mobilnych */
@media (max-width: 503px) {
  .trial-info .overlay-image-mobile {
    display: block; /* lub inline, inline-block, zależnie od potrzeb */
    z-index:1;
  }
}