.color_lightgreen {
    background-color: #c5d8d4;
}

.color_green {
    background-color: #adc9c3;
}

.color_rd {
    background-color: #ff0000;
}

/*
.container {
            display: flex;
  justify-content: center;
  align-items: center;
  
            height: 100%;
            width: 100%;
            background-color: #ffffff; 
        }
*/



        .circular-image {
          /* width: 400px; /* szerokość zdjęcia */
           /* height: 400px; /* wysokość zdjęcia */
		   width: 100%;         /* zajmuje 100% szerokości kolumny */
    max-width: 400px;    /* maksymalnie 400px na dużych ekranach */
   
aspect-ratio: 1 / 1;

            border-radius: 50%; /* zaokrąglone rogi, tworzące okrąg */
            overflow: hidden; /* ukrywa część zdjęcia, która wychodzi poza okrąg */
            border: 8px solid #256B60; /* obwódka wokół okręgu */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* efekt cienia */
            box-sizing: border-box; /* uwzględnia obwódkę w wymiarach elementu */

        }
        .circular-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* sprawia, że obraz wypełnia okrąg, przycięty do odpowiednich proporcji */
        /*    filter: grayscale(100%);*/ /* sprawia, że obraz jest szary */
            transition: filter 0.3s ease; /* dodaje płynne przejście dla efektu hover */
        }
        .circular-image img:hover {
            filter: grayscale(0%); /* przywraca kolory obrazu przy najechaniu myszką */
        }

@media (max-width: 600px) {
    .circular-image {
        border: 6px solid #256B60;  /* cieńsza obwódka na telefonie */
    }
	}

/*
@media screen and (max-width: 600px) {
    .circular-image {
       border: 3px solid #256B60; 
    }
	*/




		  #imageContainer img {
            max-width: 100%;
            height: auto;
        }



        .link-button {
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #008CBA;
            text-align: center;
            text-decoration: none;
            border-radius: 12px;
            border: none;
            cursor: pointer;
        }


 .center-flex {
            display: flex;
            flex-direction: column;
            align-items: center; /* Wycentrowanie poziome */
            justify-content: center; /* Wycentrowanie pionowe */
            text-align: center; /* Wycentrowanie tekstu */
        }

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolumny */
    gap: 4px;
}

/* Każdy element siatki */
.service-item {
    display: flex;
    justify-content: center;
	 align-items: flex-start;
}

/* Małe ekrany */
@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny */
    }
}


.content-container {
    width: min(1200px, 100% - 40px);
    margin: 0 auto;
}




/* uzywam do wyswietlenia obrazkow w rzedzie ktore maja te sama wysokosc a rozne szerokosci*/
.equal-height-img {
    height: 300px;
    width: auto;
}

@media (max-width: 600px) {
    .equal-height-img {
        height: 200px;
    }
}




/*                  ikonki obracania                                           */
.center-row {
  display: flex;
  justify-content: center;   /* wyśrodkowanie całego rzędu */
  align-items: center;
  flex-wrap: wrap;
  gap: 0;                    /* brak odstępu */
}

.icon-img {
  width: 70px;               /* desktop */
  height: auto;
  margin: 0;                 /* brak marginesów */
  padding: 0;
  display: block;
}

/* MOBILE */
@media (max-width: 600px) {
  .icon-img {
    width: 50px;
  }
}