*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

:root {
  --dark-purple: #a953c2;
  --light-purple: #eab8ff;
  --dark-yellow: #fffb00;
  --light-yellow: #fdf8b4;
  --dark-blue: #2e1a47;
  --dark-blue-rgb: 46, 26, 71;
  --my-gray: #f9f9f9;
}



html,
body {
  font-family: "Baloo Bhai 2", sans-serif;
  line-height: 1.6;
  height: 100%;
  margin: 0;
  overflow-x: hidden;

}

html {
  overflow-x: hidden;
  
}

body.menu-open {
  overflow: hidden;
}


a {
  text-decoration: none;
}

ul {
  list-style: none;
}





/* Styl dla stopki */

.row-hero h1{
  font-size: 6.5rem;
  font-family: "Baloo Bhai 2", sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.container-sm {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2rem;
}
.container-bg {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
  font-weight: 600;
}

/* Navbar */



.navbar {
  color: white;
  position: fixed;
  padding: 15px 2rem;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(169, 83, 194, 0.9);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
    opacity 0.2s ease-in-out;
  opacity: 1;
}



.navbar.navbar-scrolled {
  background-color: rgba(169, 83, 194, 0.9);
  

  z-index: 10000000;
}

.navbar img {
  width: 85px;
  height: 85px;

  cursor: pointer;
}

.navbar a {
  color: white;
}

.navbar li {
  margin-top: 20px;
}

.navbar-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}

.navbar .main-menu-list {
  display: flex;
  align-items: center;
  gap: 1.9rem;
  font-weight: 600;
}

.navbar a.link {
  position: relative;
  color: #fff;
  text-decoration: none;
  padding-bottom: 5px;
  transition: color 0.3s ease-in-out;
}

.navbar a.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--dark-yellow);
  transition: width 0.3s ease-in-out;
}

.navbar a:hover {
  color: var(--dark-yellow);
}

.navbar a.active {
  color: var(--dark-yellow);
}

.navbar a:hover::after,
.navbar a.active::after {
  width: 100%;
}

.navbar a i {
  font-size: 1.5rem;
  /* Adjust icon size */
  color: #fff;
  /* Initial color for icons */
  transition: color 0.3s ease-in-out;
}

.logo {
  filter: drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.5));
}

.navbar a:hover i {
  color: var(--dark-yellow);
  /* Icon changes color on hover */
  transform: scale(1.1);
}

/* Mobile Menu */

.mobile-menu {
  display: none;
}

.navbar .mobile-menu-toggle {
  color: #fff;
  cursor: pointer;
}

.navbar .mobile-menu-items {
  position: fixed;
  top: 106px;
  left: 0;
  width: 100%;
  height: 90vh;
  background-color: rgba(0, 0, 0, 0.8);
  opacity: 0.95;
  padding: 1rem 2rem;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.exit-icon{
  z-index: 100000;
}
.navbar .mobile-menu-items.active {
  transform: translateX(0);
}

.navbar .mobile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  font-size: 1.3rem;
}

.navbar .mobile-menu-toggle i {
  transition: transform 0.3s ease;
}

.navbar .mobile-menu-toggle i.fa-times {
  transform: rotate(180deg);
}

/* Hero Section */

.hero-container {
  padding-top: 120px;
  background: linear-gradient(
    0deg,
    var(--light-purple) 0%,
    var(--dark-purple) 100%
  );
}

.row-hero {
  min-height: 1vh;
  position: relative;
}



.carousel-image {
  width: auto;
  background: transparent;
  object-fit: cover;
  /* Zapewnia, że obraz wypełnia cały obszar bez zniekształceń */
  filter: drop-shadow(4px 2px 10px rgba(0, 0, 0, 0.9));
  /* Cień */
}

.carousel-image.carousel-kreatywnosc {
  width: auto;
  height: 150%;
  object-fit: cover;
}

.carousel-fade .active {
  opacity: 1;
}

/* Tekst hero sekcji */
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  position: relative;

  /* Obramowanie */
  z-index: 2;
}

.hero-text p {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: black;
  font-weight: 400;
}

/* Nawigacyjne Strzałki (po obu stronach ekranu) */
.carousel-control-prev-custom,
.carousel-control-next-custom {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  padding: 1rem;
  cursor: pointer;
  z-index: 5;
  border-radius: 50%;
}

.carousel-control-prev-custom:hover,
.carousel-control-next-custom:hover {
  color: rgba(0, 0, 0, 0.4);
}

.carousel-control-prev-custom {
  left: 20px;
}

.carousel-control-next-custom {
  right: 20px;
}

.carousel-control-prev-custom .bi-chevron-left,
.carousel-control-next-custom .bi-chevron-right {
  font-size: 2rem;
}

/* Indykatory karuzeli */
.carousel-indicators-custom {
  position: relative;
  /* Opcjonalnie: Możesz dodać margines lub inne style */
}

.carousel-indicators-custom button {
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  box-shadow: 2px 2px 2px rga;
  border: none;
  border-radius: 50%;
  margin: 0 6px;
  cursor: pointer;
}

.carousel-indicators-custom button.active {
  background-color: rgba(255, 255, 255, 1);
}

.slide-in-right {
  animation: slideInRight 0.7s forwards;
}

.fade-out {
  animation: fadeOut 0.7s forwards;
}

/* Animacja Fade dla tekstu - Fade In */
.fade-in {
  animation: fadeIn 0.7s forwards;
}

.carousel-item {
  display: block;
  /* Aby wymusić widoczność, nawet dla nieaktywnych slajdów */
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev {
  display: block;
  /* Widoczność aktywnego slajdu */
  opacity: 1;
  /* Fade-in dla aktywnego slajdu */
  transition: opacity 0.5s ease;
}

.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item:not(.active) {
  opacity: 0;
  /* Fade-out dla slajdów, które opuszczają widok */
  transition: opacity 0.5s ease;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(50px);
    /* Tekst zaczyna się z prawej strony */
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0%);
    opacity: 1;
  }
}


svg {
  width: 100%;
  height: auto;
}

.wave-container {
  height: 11vh;
  background-color: var(--light-purple);
  position: relative;
}

.wave-container::before {
  content: "";
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 49vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  128' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 94L50 88C100 82 200 71 300 48C400 25 500 -10 600 2C700 13 800 71 900 94C1000 117 1100 105 1150 100L1200 94V129H1150C1100 129 1000 129 900 129C800 129 700 129 600 129C500 129 400 129 300 129C200 129 100 129 50 129H0V94Z' fill='%23f9f9f9'/></svg>");
}

@media (max-width: 850px) {
  .wave-container::before {
    height: 51px;
  }
}

/* Oferta - Cards */
.cards {
  background-color: #f0f0f0;
}

.card-row {
  background-color: var(--my-gray);
}

.card-container {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
}

.offert-container h1 {
  font-family: "Baloo Bhai 2", sans-serif; /* lub inna czcionka */
  font-size: 6rem; /* Duży rozmiar, by obrys był widoczny */
  color: var(--dark-purple); /* Kolor wypełnienia */
  text-shadow: 0.125rem 0.125rem 0 #000000, -0.125rem 0.125rem 0 #000000,
    0.125rem -0.125rem 0 #000000, -0.125rem -0.125rem 0 #000000,
    0.125rem 0 0 #000000, -0.125rem 0 0 #000000, 0 0.125rem 0 #000000,
    0 -0.125rem 0 #000000;
  text-align: center; /* Wyrównanie */
}

.card {
  margin-bottom: 30px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
  display: flex;
  min-height: 550px;
  /* Dodano */
  /* Dodano */
}

.card-image {
  position: relative;
  height: 300px;
  /* Ustawiona stała wysokość */
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  /* Zapewnia odpowiednie skalowanie obrazka */
}

.card-content {
  padding: 20px;
  background-color: #fff;
  flex-grow: 1;
  /* Pozwala na równomierne rozłożenie treści */
  position: relative;
  /* Dla pozycjonowania przycisku */
}

.card-content h2 {
  margin: 0;
  font-size: 2rem;
  color: #333;
}

.svg-container {
  overflow: hidden;
}
.card-content p {
  font-size: 1.1rem;
  margin: 10px 0 50px 0px;
  color: #666;
}

.learn-more {
  background-color: var(--dark-blue);
  color: #fff;
  border: none;
  margin-top: 10px;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
  position: absolute;
  /* Pozycjonowanie przycisku */
  bottom: 15px;
  right: 15px;
}

.learn-more:hover {
  background-color: var(--dark-purple);
}

.carousel-icons-container {
  overflow: hidden; /* Ukrywa elementy wychodzące poza widok */
  padding: 60px 0;
  background-color: var(--dark-purple);
  white-space: nowrap;
}

.carousel-icons {
  display: flex; /* Ustawienie elementów w jednym rzędzie */
  animation: scroll-continuous 30s infinite linear; /* Płynne przesuwanie elementów */
}

.carousel-icons section {
  box-sizing: border-box;
  text-align: center;
  margin: 0 70px;
}

.carousel-icons i,
.carousel-icons h5 {
  font-size: 2rem; /* Rozmiar ikon */
  color: var(--dark-yellow); /* Kolor ikon */
}

@keyframes scroll-continuous {
  from {
    transform: translateX(0); /* Start od lewej */
  }
  to {
    transform: translateX(
      -100%
    ); /* Przesunięcie całego rzędu o szerokość oryginalnego zestawu */
  }
}

.wave-container-yellow-rotated {
  height: 10vh;
  background-color: #fdf8b4;
  position: relative;
  transform: rotate(180deg);
}

.wave-container-yellow-rotated::before {
  content: "";
  width: 100%;
  height: 93px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 17vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%23f9f9f9'/></svg>");
}




@media (max-width: 850px) {
  .wave-container-yellow-rotated::before {
    height: 46.5px;
  }
}

.wave-container-yellow {
  height: 10vh;
  background-color: #fdf8b4;
  position: relative;
}

.wave-container-yellow::before {
  content: "";
  width: 100%;
  height: 93px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 17vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%23a953c2'/></svg>");
}

@media (max-width: 850px) {
  .wave-container-yellow::before {
    height: 46.5px;
  }
}

.wave-container-purple {
  height: 8vh;
  background-color: var(--dark-purple);
  position: relative;
}

.wave-container-purple::before {
  content: "";
  width: 100%;
  height: 70px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 1vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%23f9f9f9'/></svg>");
}

@media (max-width: 850px) {
  .wave-container-purple::before {
    height: 45.5px;
  }

  .wave-container-purple {
    height: 10vh;
    padding: 0 auto;
    
  }
}

/* ABOUT US */

.about-us-row {
  background-color: var(--light-yellow);
}

.about-us img {
  width: 90%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  display: block;
  text-align: center;
}

.about-us p,
h2 {
  margin-left: 10px;
}



.about-us h2 {
  font-size: 2.25rem;
  padding-bottom: 20px;
}
.about-us p {
  font-size: 1.25rem;
  line-height: 1.8; /* Poprawa czytelności tekstu */

}

/* instruktors */
.instructors {
  background-color: var(--my-gray);
}

.instructors img {
  max-width: 100%;
  height: auto; /* Zachowanie proporcji zdjęć */
  border-radius: 10px; /* Zaokrąglone rogi zdjęć */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Delikatny cień pod zdjęciami */
}

.instructors h2 {
  font-family: "Baloo Bhai 2", sans-serif; /* lub inna czcionka */
  font-size: 6.5rem; /* Duży rozmiar, by obrys był widoczny */
  color: var(--dark-yellow); /* Kolor wypełnienia */
  text-shadow: 0.125rem 0.125rem 0 #000000, -0.125rem 0.125rem 0 #000000,
    0.125rem -0.125rem 0 #000000, -0.125rem -0.125rem 0 #000000,
    0.125rem 0 0 #000000, -0.125rem 0 0 #000000, 0 0.125rem 0 #000000,
    0 -0.125rem 0 #000000;
  text-align: center; /* Wyrównanie */
}

.instructors h3 {
  font-size: 5rem;
  margin-bottom: 80px;
}

.instructors p {
  line-height: 2;
  font-size: 1.75rem;
}

h1 {
  font-family: "Baloo Bhai 2", sans-serif; /* lub inna czcionka */
  font-size: 100px; /* Duży rozmiar, by obrys był widoczny */
  color: var(--dark-yellow); /* Kolor wypełnienia */
  text-shadow: 0.125rem 0.125rem 0 #000000, -0.125rem 0.125rem 0 #000000,
    0.125rem -0.125rem 0 #000000, -0.125rem -0.125rem 0 #000000,
    0.125rem 0 0 #000000, -0.125rem 0 0 #000000, 0 0.125rem 0 #000000,
    0 -0.125rem 0 #000000;
  text-align: center; /* Wyrównanie */
}

/* Karuzela Opinie */

.opinion-row {
  background-color: var(--my-gray);
}

.review-carousel {
  display: flex;
  margin: 20px auto;
  max-width: 1200px;
}

.review-item {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  padding: 20px;
  margin: 5px;
  box-sizing: border-box;
  text-align: left;
  position: relative;
}

.review-item .stars {
  color: #ffb400;
  font-size: 16px;
  margin-bottom: 10px;
}

.review-item p {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.5;
}

.review-item .author {
  font-weight: bold;
  color: #555;
}

.slick-slide {
  opacity: 1 !important;
}

.slick-track {
  display: flex !important;
}

/* cennik */

.header-title{
  margin-top: 100px;
}

.pricing-page {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: linear-gradient(
    0deg,
    var(--light-purple) 0%,
    var(--dark-purple) 100%
  );
  background-attachment: fixed;
}

.pricing-card {
  background-color: var(--light-purple);
  border-radius: 1rem;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  margin-bottom: 1.25rem;
}

.pricing-card p,span{
  font-size: 1.25rem;
  font-weight: 500;
}
.pricing-card h3{
  font-size: 2rem;
  font-weight: 700;
}


.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.3);
}


.section-wrapper {
  flex: 1; /* Wszystkie sekcje zajmują równe miejsce */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Zachowanie proporcji wewnętrznej zawartości */
}





.highlight {
  background: var(--light-yellow);
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-weight: bold;
  display: inline-block;
  font-size: 1.5rem;
}



.section-wrapper {
  border: 4px solid var(--dark-blue);
  border-radius: 1rem;
  padding: 1rem;
  margin-bottom: 2rem;
  background: var(--dark-purple);
  position: relative;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

.section-title {
  background: var(--light-yellow);
  padding: 0.5rem 1.5rem;
  border-radius: 1rem;
  color: black;
  font-size: 2.5rem;
  font-weight: bold;
  display: block; /* Upewnij się, że jest blokowy */
  width: fit-content; /* Dopasuj szerokość do zawartości */
  margin: -3rem auto 0 auto; /* Wyśrodkowanie w poziomie i podniesienie do góry */
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  
}



.pricing-row {
  display: flex;
  align-items: stretch; 
}


.pricing-row .section-wrapper {
  flex: 1; 
  display: flex;
  flex-direction: column;
  justify-content:start;
  background: var(--dark-purple);
  min-height: 595px;
  border: 4px solid var(--dark-blue);
  border-radius: 1rem;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.5);
}

.btn-custom {
  background: var(--dark-purple);
  color: var(--light-yellow);
  font-weight:600;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  font-size: 1.5rem;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-custom:hover {
  background: var(--light-yellow);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}



.collaboration-title {
  font-family: "Baloo Bhai 2", sans-serif;
  text-align: center;
  font-size:5rem;
  color: var(--dark-yellow);
  text-shadow: 0.125rem 0.125rem 0 #000000, -0.125rem 0.125rem 0 #000000,
    0.125rem -0.125rem 0 #000000, -0.125rem -0.125rem 0 #000000;
}

.colaboration img{
  width: 30rem;
}

.colaboration p,
.colaboration i{
  font-size: 2rem;
}

.card-align{
  margin-top: 0;
}




.row .col-md-6{
  margin-top: 0.8rem;
}


.activenow-table-container{
  margin-top: 150px;
}

.js-clear-filters,
.activenow-table-signup{
  background: var(--dark-purple);
  color: var(--light-yellow);
  font-weight:600;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 1rem;
  font-size: 0.8em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  margin-bottom: 0 !important;
}

.js-clear-filters:hover,
.activenow-table-signup:hover{
  background: var(--dark-purple);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
  color: var(--light-yellow);
}

.activenow-table-signup{
  font-size: 1em;
}
.filters{
  font-size: 1.4em;
}
.activenow-table-header{
  font-size: 1.5rem;
}



@media (max-width: 1200px) {
  
  h1{
    font-size: 5rem;
  }


  
  .navbar-flex a{
    font-size: 15px;
  }

  

  .row-hero h1{
    font-size: 5rem;
  }

  .row-hero p{
    font-size: 1.2rem;
    line-height: 1.6;
  }

  .instructors h3{
    margin-bottom: 15px;
    
  }

  .instructors p{
    font-size: 1.25rem;
    
  }

  .offer-header{
    font-size: 20rem;
  }

}

/* Dla urządzeń o szerokości poniżej 992px */
@media (max-width: 992px) {

  .carousel-icons {
    animation: none; /* Wyłączenie animacji */
  }
  .navbar .main-menu-list {
    gap: 1rem;
    font-weight: 600;
  }

  .row-hero h1{
    font-size: 5.5rem;
  }

  .hero-text {
    font-size: 2rem;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
  }
  .carousel-icons h5 {
    font-size: 1.5rem;
    color: var(--dark-yellow);
    /* Zawijanie słów, jeśli są zbyt długie */
    white-space: normal; /* Wymuszenie normalnego zawijania */
    text-align: start; /* Wyśrodkowanie tekstu */
  }
  .carousel-icons i {
    font-size: 2.6rem; /* Zmniejszenie ikon */
  }

  .card {
    margin-bottom: 2rem;
  }
  nav li a {
    font-size: 13px;
  }

  
}
@media(max-width: 880px){
  nav li a {
    font-size: 14px;
  }

  

  .about-us-row .row{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-text h1 {
    margin-left: 16px;
    font-size: 5rem;
  }
  

  .instructors h3{
    margin-bottom: 10px;
  }

  .instructors p{
    font-size: 17px;
  }

  
  .about-us h2{
    text-align: center;
  }
  
  
  .main-menu-list li a{
    font-size: 13.9px;
  }

  .main-menu-list li i{
    font-size: 14px;
  }
}

/* Dla urządzeń o szerokości poniżej 768px */
@media (max-width: 768px) {
  .main-menu-items {
    display: none;
  }
  h1 {
    font-family: "Baloo Bhai 2", sans-serif;
  } 

  .navbar{
    padding-top: 30px;
  }
  

  .about-us img{
    width: 350px;
  };

  .colaboration img{
    width: 400000px;
    height: 800px;
  }
  

  .navbar .main-menu-list {
    gap: 0rem;
    font-weight: 600;
  }

  .about-us p{
    font-size: 18px;
    
  }
  .about-us img{
    width: 350px;
    
  }
  
  .card p{
    font-size: 17px;
  }
  .mobile-menu {
    display: block;
  }

  .instructors h2 {
    font-size: 4.5rem;
  }
  .instructors h3 {
    text-align: center;
    margin: 20px auto;
  }

  .instructors p {
    text-align: center;
    font-size: 15px;
  }

  .hero-text h1 {
    text-align: center;
    margin-left: 50px;
    font-size: 4.1rem;
  }

  .hero-text p {
    margin-left: 50px;
    font-size: 1.5rem;
  }
  .offert-container h1{
    font-size: 90px;
    text-shadow: 0.1rem 0.1rem 0 #000000, -0.1rem 0.1rem 0 #000000,
    0.1rem -0.1rem 0 #000000, -0.1rem -0.1rem 0 #000000,
    0.1rem 0 0 #000000, -0.1rem 0 0 #000000, 0 0.1rem 0 #000000,
    0 -0.1rem 0 #000000;
  }

  .carousel-icons h5 {
    font-size: 1.2rem;
    color: var(--dark-yellow);
    /* Zawijanie słów, jeśli są zbyt długie */
    white-space: normal; /* Wymuszenie normalnego zawijania */
    text-align: start; /* Wyśrodkowanie tekstu */
  }
  .carousel-icons i {
    font-size: 2.2rem; /* Zmniejszenie ikon */
  }

  .pricing-row .section-wrapper {
    min-height: auto; /* Usuń wymuszony minimalny rozmiar */
    margin-bottom: 1rem; /* Dodaj margines dla odstępów */
  }

  .navbar .mobile-menu-items {
    
    top:130px;
    
  }

  

}

/* Dla urządzeń o szerokości poniżej 576px */
@media (max-width: 576px) {

  .offert-container h1{
    font-size: 65px;
    text-shadow: 0.1rem 0.1rem 0 #000000, -0.1rem 0.1rem 0 #000000,
    0.1rem -0.1rem 0 #000000, -0.1rem -0.1rem 0 #000000,
    0.1rem 0 0 #000000, -0.1rem 0 0 #000000, 0 0.1rem 0 #000000,
    0 -0.1rem 0 #000000;
  }

  
  .instructors h2 {
    font-size: 3rem;
    font-family: "Baloo Bhai 2", sans-serif;;
    margin: 20px auto;
    text-shadow: 0.1rem 0.1rem 0 #000000, -0.1rem 0.1rem 0 #000000,
    0.1rem -0.1rem 0 #000000, -0.1rem -0.1rem 0 #000000,
    0.1rem 0 0 #000000, -0.1rem 0 0 #000000, 0 0.1rem 0 #000000,
    0 -0.1rem 0 #000000;
  }
  .instructors h3 {
    text-align: center;
    margin: 5px auto;
  }

  .instructors p {
    text-align: center;
    font-size: 1.25rem;
    
  }

  h1{
    font-size: 4rem;
  }

  .hero-text h1 {
    margin: 0px 0px 16px 35px;
    font-size: 3rem;
    text-align: center;
  }

  .hero-text p {
    margin-left: 35px;
    font-size: 1.1rem;
  }

  .about-us p{
    margin-right: 15px;
  }

  .navbar img {
    width: 65px;
    height: 65px;
    
  
    cursor: pointer;
  }

  
  

  .about-us img{
    width: 250px;
  }

  .pricing-container h1,
  .collaboration-title
  {
    font-size: 2.5rem;
  }

  .section-title{
    font-size: 2rem;
  }

  .pricing-card h3{
    font-size: 1.5rem;
  }

  .section-wrapper .section-title{
    font-size: 1.52rem;
  }
  .colaboration img{
    width: 15rem;
  }
  
  .colaboration i,
  .colaboration p{
    font-size: 1.05rem;
  }

  .highlight{
    font-size: 1.3rem;
  }

  .js-clear-filters{
    font-size: 1rem;
  }

  .navbar .mobile-menu-items {
    
    top: 106px;
    
  }

  .row-hero h1{

    text-align: center;
    font-size: 41px;
    
  }

  
}


@media (max-width: 320px){
  .row-hero h1{

    text-align: center;
    font-size: 40px;
    
  }

  .navbar img {
    width: 32px;
    height: 32px;
  
    cursor: pointer;
  }

  .row-hero p{
    text-align: center;
    margin-left: 40px;
  }

  .instructors h2{
    font-size: 40px;
    margin: 0 auto;
  }

  .instructors h3{
    font-size: 3.5rem;
  }

  .about-us img{
    width: 200px;
    margin-left: 40px;
  }

  .instructors p{
    font-size: 16px;
  }


  .about-us p{
    text-align: center;
  }

  

  .section-wrapper .section-title{
    font-size: 1.2rem;
  }

  .pricing-card h3{
    font-size: 1.2rem;
  }

  .colaboration i,
  .colaboration p{
    font-size: 0.85rem;
  }

  .highlight{
    font-size: 1.1rem;
  }

  .navbar .mobile-menu-items {
    
    top: 80px;
    
  }

  
  

  
  
}

@media (max-width: 280px){
  .row-hero h1{
    text-align: center;
    font-size: 30px;
    margin-left: 28px;
    
  }

  .row-hero p{
    font-size: 13px;
  }
  .navbar .mobile-menu-items {
    
    top: 83px;
    
  }
}