/* Animacja dla zmiany kolorów ramki sekcji */
@keyframes borderColor {
    0% {
        border-color: #4C1D95; /* Fioletowy */
    }
    25% {
        border-color: #4338CA; /* Niebieski */
    }
    50% {
        border-color: #9333EA; /* Fioletowy */
    }
    75% {
        border-color: #6366F1; /* Jasny niebieski */
    }
    100% {
        border-color: #4C1D95; /* Fioletowy */
    }
}

/* Animowana ramka wokół sekcji */
.animate-border {
    position: relative;
    border: 2px solid; /* Cienka ramka wokół sekcji */
    border-radius: 12px; /* Zaokrąglenie rogów */
    animation: borderColor 3s infinite; /* Animacja koloru ramki */
    padding: 30px; /* Większy padding, aby ramka była widoczna */
    margin-top: 20px; /* Odstęp od navbaru */
}

/* Animacja dla zmiany kolorów ramki wokół zdjęcia */
@keyframes borderColorImg {
    0% {
        border-color: #4C1D95; /* Fioletowy */
    }
    25% {
        border-color: #4338CA; /* Niebieski */
    }
    50% {
        border-color: #9333EA; /* Fioletowy */
    }
    75% {
        border-color: #6366F1; /* Jasny niebieski */
    }
    100% {
        border-color: #4C1D95; /* Fioletowy */
    }
}


/* Animowana ramka wokół zdjęcia */
.animate-border-img {
    border: 2px solid #4C1D95;
    animation: borderColorImg 3s linear infinite;
  }

/* Zdjęcie w odpowiednich rozmiarach */
section img {
    margin-bottom: 10px; /* Daje przestrzeń pomiędzy zdjęciem a resztą treści */
    width: 128px; /* Ustawiamy szerokość zdjęcia */
    height: 128px; /* Ustawiamy wysokość zdjęcia */
    object-fit: cover; /* Dopasowuje zdjęcie do okrągłego kształtu */
}

/* Przycisk w sekcji */
section .space-x-4 {
    margin-top: 20px; /* Daje przestrzeń pomiędzy przyciskami a resztą treści */
}

/* Własny styl dla small-caps */
.uppercase-small-caps {
    text-transform: uppercase;
    font-variant: small-caps;
}

.hover\:text-purple-400:hover {
    color: #8b5cf6;
    transition: color 0.3s ease; /* Dodaje płynne przejście koloru */
}

/* Animacja scrollowania */
@keyframes scroll-logos {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  /* Ustawienia kontenera z logotypami */
  .logos-container {
    display: flex;
    animation: scroll-logos 15s linear infinite;
  }
  
  /* Styl dla logotypów w kółkach */
  .logo {
    margin-right: 1rem; /* Odstęp między logotypami */
  }
  
  /* Ukrywanie zbędnych elementów po lewej stronie */
  .logos-container {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
  }
  
  /* Aby tylko 3 loga były widoczne w jednym czasie */
  @media (max-width: 768px) {
    .logos-container {
      width: calc(3 * 4rem); /* Szerokość dla 3 logotypów */
    }
  }