@import url("https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap");

#melitta,
#melitta * {
  box-sizing: border-box;
  font-family: "century-gothic", "Didact Gothic", sans-serif;
}
/* Styl globalny dla elementu Rich Content */
#melitta * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Kontener bez marginesów zewnętrznych, szerokość 100% */
#melitta .container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Sekcje */
#melitta .section {
    width: 100%;
    background: linear-gradient(to bottom, #3B4146, #494E53);
    padding: 0 5%; /* Wewnętrzny padding */
    margin: 0; /* Usuń marginesy między sekcjami */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#melitta .section-img,
#melitta .section img {
    width: 100%;
    margin: 0; /* Usuń marginesy obrazów */
    padding: 0;
    display: block;
}
/* Rzędy */
#melitta .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Kolumny */
#melitta .col {
  padding: 15px;
  flex: 1 0 0%;
}

#melitta .col-2 img {
    max-width: 200px;
}

#melitta img {
    width: 100%;
    display: block; /* Ustaw obrazki jako bloki, aby nie dodawały marginesów */
    margin: 0;
    padding: 0;
}

#melitta .img-title {
    display: block;
    margin: auto;
    padding: 30px 0;
}

#melitta .logo-bottom {
    display: block;
    max-width: 400px;
    margin-right: 0;
    padding: 30px 0;
}

#melitta .cechy-green {
    max-width: 500px;
    margin: 150px 10px;
    display: block;
}

/* Stylizacja tekstu i nagłówków */
#melitta h1,
#melitta h2,
#melitta h3,
#melitta h4,
#melitta p {
  color: #fff; /* Kolor tekstu */
  line-height: 1.5;
}

#melitta li {
    line-height: 1.2;
    color: #fff;
}

#melitta p {
    font-size: 20px;
    margin-bottom: 10px;
}

#melitta p.big,
#melitta li.big {
    font-size: 24px;
    margin-bottom: 20px;
}

#melitta p.small {
    font-size: 14px;
}

#melitta h1 {
  font-size: 2em;
  color: #fff;
}
#melitta h2 {
  font-size: 1.75em;
  color: #fff;
}
#melitta h3 {
  font-size: 1.7em;
  text-transform: uppercase;
  color: #fff;
}
#melitta h4 {
  font-size: 1.4em;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
}

#melitta ul {
    margin: 20px 40px;
}




/* Szerokości kolumn inspirowane Bootstrapem */
#melitta .col-1 {
  flex: 0 0 8.33%;
  max-width: 8.33%;
}
#melitta .col-2 {
  flex: 0 0 16.66%;
  max-width: 16.66%;
}
#melitta .col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}
#melitta .col-4 {
  flex: 0 0 33.33%;
  max-width: 33.33%;
}
#melitta .col-5 {
  flex: 0 0 41.66%;
  max-width: 41.66%;
}
#melitta .col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}
#melitta .col-7 {
  flex: 0 0 58.33%;
  max-width: 58.33%;
}
#melitta .col-8 {
  flex: 0 0 66.66%;
  max-width: 66.66%;
}
#melitta .col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}
#melitta .col-10 {
  flex: 0 0 83.33%;
  max-width: 83.33%;
}
#melitta .col-11 {
  flex: 0 0 91.66%;
  max-width: 91.66%;
}
#melitta .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Responsywność i układ Mobile First */
@media (max-width: 768px) {
  #melitta .col {
    flex: 1 0 100%;
    max-width: 100%;
  }
}



/* Przykładowe style dla przycisków */
#melitta .button {
  background-color: #005b96;
  color: #ffffff;
  padding: 10px 20px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

#melitta .button:hover {
  background-color: #6497b1;
}

/* Usunięcie marginesów i paddingów dla iframe */
#melitta iframe {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
}