/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 12 2025 | 07:02:01 */
/* === KOLEKCJA STYLÓW KAFELKÓW DLA DENTIM CLINIC === */

/* =============================================
   STYL 1: STANDARDOWY (ZMODYFIKOWANY)
   ============================================= */

.dentim-tile {
  background-color: #f9f9f9 !important; /* Jasne tło zamiast białego, żeby wyróżniało się */
  border-radius: 8px !important;
  box-shadow: 0 3px 15px rgba(0,0,0,0.05) !important; /* Wyraźniejszy cień */
  padding: 25px 15px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(0,0,0,0.04) !important; /* Delikatna ramka */
}

/* Efekt hover dla kafelka */
.dentim-tile:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
  background-color: #fff !important;
}

/* Linia górna przy hover */
.dentim-tile::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--e-global-color-accent, #FFD700), #FFA500) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 2 !important;
}

.dentim-tile:hover::before {
  opacity: 1 !important;
}

/* Style dla ikon/obrazków */
.dentim-tile-icon {
  width: 80px !important;
  height: 80px !important;
  background-color: #f0f0f0 !important;
  border-radius: 50% !important;
  margin: 0 auto 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}

/* Style dla obrazka wewnątrz ikony */
.dentim-tile-icon img {
  width: 45px !important;
  height: auto !important;
  max-width: 45px !important;
  transition: transform 0.3s ease !important;
  filter: grayscale(10%) !important;
  object-fit: contain !important;
}

/* Efekt hover dla obrazka */
.dentim-tile:hover .dentim-tile-icon {
  background-color: #fff !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

.dentim-tile:hover .dentim-tile-icon img {
  transform: scale(1.1) !important;
  filter: none !important;
}

/* Style dla tytułu */
.dentim-tile-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  transition: color 0.3s ease !important;
  line-height: 1.3 !important;
  width: 100% !important;
}

/* Efekt hover dla tytułu */
.dentim-tile:hover .dentim-tile-title {
  color: var(--e-global-color-accent, #FFD700) !important;
}

/* Style dla tekstu opisu */
.dentim-tile-description {
  font-size: 14px !important;
  color: #666 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* =============================================
   STYL 2: NOWOCZESNY Z NAROŻNIKIEM
   ============================================= */

.dentim-tile-modern {
  background-color: #fff !important;
  border-radius: 0 !important; /* Ostre rogi */
  box-shadow: 0 5px 20px rgba(0,0,0,0.04) !important;
  padding: 30px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; /* Elegancka animacja */
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* Wyrównanie do lewej */
  justify-content: flex-start !important;
  text-align: left !important;
  cursor: pointer !important;
  border-left: 3px solid var(--e-global-color-accent, #FFD700) !important; /* Linia po lewej */
}

/* Efekt "odgiętego narożnika" */
.dentim-tile-modern::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 30px !important;
  height: 30px !important;
  background: linear-gradient(135deg, transparent 50%, var(--e-global-color-accent, #FFD700) 50%) !important;
  transition: all 0.3s ease !important;
  z-index: 1 !important;
}

/* Efekt hover dla kafelka */
.dentim-tile-modern:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

.dentim-tile-modern:hover::after {
  width: 40px !important;
  height: 40px !important;
}

/* Style dla ikon/obrazków */
.dentim-tile-modern .dentim-tile-icon {
  width: 60px !important;
  height: 60px !important;
  background-color: rgba(255, 215, 0, 0.1) !important; /* Półprzezroczysty kolor akcentu */
  border-radius: 0 !important; /* Kwadratowa ikona */
  margin: 0 0 20px 0 !important; /* Wyrównanie do lewej */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

/* Style dla obrazka wewnątrz ikony */
.dentim-tile-modern .dentim-tile-icon img {
  width: 35px !important;
  height: auto !important;
  max-width: 35px !important;
  transition: transform 0.3s ease !important;
  filter: none !important;
  object-fit: contain !important;
}

/* Efekt hover dla obrazka */
.dentim-tile-modern:hover .dentim-tile-icon {
  background-color: rgba(255, 215, 0, 0.2) !important;
}

.dentim-tile-modern:hover .dentim-tile-icon img {
  transform: scale(1.1) !important;
}

/* Style dla tytułu */
.dentim-tile-modern .dentim-tile-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #333 !important;
  margin: 0 0 15px 0 !important;
  padding: 0 !important;
  transition: color 0.3s ease !important;
  line-height: 1.2 !important;
  width: 100% !important;
  position: relative !important;
}

/* Efekt hover dla tytułu */
.dentim-tile-modern:hover .dentim-tile-title {
  color: var(--e-global-color-accent, #FFD700) !important;
}

/* Style dla tekstu opisu */
.dentim-tile-modern .dentim-tile-description {
  font-size: 14px !important;
  color: #666 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* =============================================
   STYL 3: ZAOKRĄGLONY Z GRADIENTEM
   ============================================= */

.dentim-tile-rounded {
  background-color: #fff !important;
  border-radius: 16px !important; /* Bardzo zaokrąglone rogi */
  box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
  padding: 30px 25px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  cursor: pointer !important;
}

/* Gradient tła po hover */
.dentim-tile-rounded::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,215,0,0.03) 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  z-index: 1 !important;
}

/* Efekt hover dla kafelka */
.dentim-tile-rounded:hover {
  transform: translateY(-7px) translateX(2px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

.dentim-tile-rounded:hover::before {
  opacity: 1 !important;
}

/* Style dla ikon/obrazków */
.dentim-tile-rounded .dentim-tile-icon {
  width: 90px !important;
  height: 90px !important;
  background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%) !important;
  border-radius: 50% !important;
  margin: 0 auto 25px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.5s ease !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Wewnętrzny okrąg dla ikony */
.dentim-tile-rounded .dentim-tile-icon::after {
  content: '' !important;
  position: absolute !important;
  top: 5px !important;
  left: 5px !important;
  right: 5px !important;
  bottom: 5px !important;
  border-radius: 50% !important;
  border: 1px dashed rgba(0,0,0,0.07) !important;
  transition: all 0.3s ease !important;
}

/* Style dla obrazka wewnątrz ikony */
.dentim-tile-rounded .dentim-tile-icon img {
  width: 45px !important;
  height: auto !important;
  max-width: 45px !important;
  transition: transform 0.3s ease, filter 0.5s ease !important;
  filter: none !important;
  object-fit: contain !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Efekt hover dla obrazka */
.dentim-tile-rounded:hover .dentim-tile-icon {
  background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}

.dentim-tile-rounded:hover .dentim-tile-icon::after {
  border-color: rgba(255,215,0,0.2) !important;
  transform: scale(1.1) !important;
}

.dentim-tile-rounded:hover .dentim-tile-icon img {
  transform: scale(1.15) rotate(5deg) !important;
}

/* Style dla tytułu */
.dentim-tile-rounded .dentim-tile-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #222 !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  line-height: 1.3 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Efekt hover dla tytułu */
.dentim-tile-rounded:hover .dentim-tile-title {
  color: var(--e-global-color-accent, #FFD700) !important;
  transform: translateY(-2px) !important;
}

/* Style dla tekstu opisu */
.dentim-tile-rounded .dentim-tile-description {
  font-size: 14px !important;
  color: #666 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
}

.dentim-tile-rounded:hover .dentim-tile-description {
  transform: translateY(-2px) !important;
}

/* =============================================
   STYL 4: CIEMNY ELEGANCKI
   ============================================= */

.dentim-tile-dark {
  background-color: #1e1e24 !important; /* Ciemny granatowy */
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  padding: 30px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Subtelny efekt tła */
.dentim-tile-dark::before {
  content: '' !important;
  position: absolute !important;
  top: -100% !important;
  left: -100% !important;
  right: -100% !important;
  bottom: -100% !important;
  background: radial-gradient(circle at center, rgba(255,215,0,0.03) 0%, rgba(0,0,0,0) 70%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  z-index: 1 !important;
}

/* Efekt hover dla kafelka */
.dentim-tile-dark:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25) !important;
  background-color: #252530 !important; /* Nieco jaśniejszy przy hover */
}

.dentim-tile-dark:hover::before {
  opacity: 1 !important;
}

/* Linia złota na górze */
.dentim-tile-dark::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 3px !important;
  background: var(--e-global-color-accent, #FFD700) !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}

.dentim-tile-dark:hover::after {
  width: 50% !important;
}

/* Style dla ikon/obrazków */
.dentim-tile-dark .dentim-tile-icon {
  width: 80px !important;
  height: 80px !important;
  background-color: rgba(255,255,255,0.03) !important;
  border-radius: 50% !important;
  margin: 0 auto 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Style dla obrazka wewnątrz ikony */
.dentim-tile-dark .dentim-tile-icon img {
  width: 40px !important;
  height: auto !important;
  max-width: 40px !important;
  transition: all 0.4s ease !important;
  filter: brightness(0) invert(1) !important; /* Biała ikona */
  opacity: 0.8 !important;
  object-fit: contain !important;
}

/* Efekt hover dla obrazka */
.dentim-tile-dark:hover .dentim-tile-icon {
  background-color: rgba(255,215,0,0.1) !important;
  border-color: rgba(255,215,0,0.2) !important;
  transform: scale(1.05) !important;
}

.dentim-tile-dark:hover .dentim-tile-icon img {
  filter: brightness(0) invert(0.9) sepia(1) saturate(5) hue-rotate(20deg) !important; /* Złota ikona */
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* Style dla tytułu */
.dentim-tile-dark .dentim-tile-title {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  line-height: 1.3 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  letter-spacing: 0.3px !important;
}

/* Efekt hover dla tytułu */
.dentim-tile-dark:hover .dentim-tile-title {
  color: var(--e-global-color-accent, #FFD700) !important;
}

/* Style dla tekstu opisu */
.dentim-tile-dark .dentim-tile-description {
  font-size: 14px !important;
  color: rgba(255,255,255,0.6) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
}

.dentim-tile-dark:hover .dentim-tile-description {
  color: rgba(255,255,255,0.8) !important;
}

/* Responsywność dla wszystkich styli */
@media (max-width: 1024px) {
  .dentim-tile,
  .dentim-tile-modern,
  .dentim-tile-rounded,
  .dentim-tile-dark {
    padding: 20px 15px !important;
  }
  
  .dentim-tile .dentim-tile-icon,
  .dentim-tile-modern .dentim-tile-icon,
  .dentim-tile-rounded .dentim-tile-icon,
  .dentim-tile-dark .dentim-tile-icon {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 15px !important;
  }
  
  .dentim-tile-rounded .dentim-tile-icon {
    width: 80px !important;
    height: 80px !important;
  }
  
  .dentim-tile .dentim-tile-title,
  .dentim-tile-modern .dentim-tile-title,
  .dentim-tile-rounded .dentim-tile-title,
  .dentim-tile-dark .dentim-tile-title {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  .dentim-tile,
  .dentim-tile-modern,
  .dentim-tile-rounded,
  .dentim-tile-dark {
    padding: 20px 12px !important;
  }
  
  .dentim-tile .dentim-tile-icon,
  .dentim-tile-modern .dentim-tile-icon,
  .dentim-tile-dark .dentim-tile-icon {
    width: 60px !important;
    height: 60px !important;
  }
  
  .dentim-tile-rounded .dentim-tile-icon {
    width: 70px !important;
    height: 70px !important;
  }
  
  .dentim-tile .dentim-tile-title,
  .dentim-tile-modern .dentim-tile-title,
  .dentim-tile-rounded .dentim-tile-title,
  .dentim-tile-dark .dentim-tile-title {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }
  
  .dentim-tile .dentim-tile-description,
  .dentim-tile-modern .dentim-tile-description,
  .dentim-tile-rounded .dentim-tile-description,
  .dentim-tile-dark .dentim-tile-description {
    font-size: 13px !important;
  }
}

/* === POPRAWKI DO STYLÓW KAFELKÓW === */

/* =============================================
   STYL 4: CIEMNY ELEGANCKI (POPRAWIONY - BARDZIEJ SZARY)
   ============================================= */

.dentim-tile-dark {
  background-color: #333340 !important; /* Bardziej szary zamiast czarnego */
  border-radius: 10px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  padding: 30px 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(255,255,255,0.03) !important;
}

/* Subtelny efekt tła */
.dentim-tile-dark::before {
  content: '' !important;
  position: absolute !important;
  top: -100% !important;
  left: -100% !important;
  right: -100% !important;
  bottom: -100% !important;
  background: radial-gradient(circle at center, rgba(255,215,0,0.03) 0%, rgba(0,0,0,0) 70%) !important;
  opacity: 0 !important;
  transition: opacity 0.5s ease !important;
  z-index: 1 !important;
}

/* Efekt hover dla kafelka */
.dentim-tile-dark:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25) !important;
  background-color: #3c3c4a !important; /* Nieco jaśniejszy przy hover, ale nadal szary */
}

.dentim-tile-dark:hover::before {
  opacity: 1 !important;
}

/* Linia złota na górze */
.dentim-tile-dark::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 3px !important;
  background: var(--e-global-color-accent, #FFD700) !important;
  transition: all 0.3s ease !important;
  transform: translateX(-50%) !important;
}

.dentim-tile-dark:hover::after {
  width: 50% !important;
}

/* Style dla ikon/obrazków */
.dentim-tile-dark .dentim-tile-icon {
  width: 80px !important;
  height: 80px !important;
  background-color: rgba(255,255,255,0.05) !important; /* Nieco jaśniejsze tło ikony */
  border-radius: 50% !important;
  margin: 0 auto 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Style dla obrazka wewnątrz ikony */
.dentim-tile-dark .dentim-tile-icon img {
  width: 40px !important;
  height: auto !important;
  max-width: 40px !important;
  transition: all 0.4s ease !important;
  filter: brightness(0) invert(1) !important; /* Biała ikona */
  opacity: 0.9 !important; /* Nieco większa nieprzezroczystość */
  object-fit: contain !important;
}

/* Efekt hover dla obrazka */
.dentim-tile-dark:hover .dentim-tile-icon {
  background-color: rgba(255,215,0,0.1) !important;
  border-color: rgba(255,215,0,0.2) !important;
  transform: scale(1.05) !important;
}

.dentim-tile-dark:hover .dentim-tile-icon img {
  filter: brightness(0) invert(0.9) sepia(1) saturate(5) hue-rotate(20deg) !important; /* Złota ikona */
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

/* Style dla tytułu */
.dentim-tile-dark .dentim-tile-title {
  font-size: 17px !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  transition: all 0.3s ease !important;
  line-height: 1.3 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
  letter-spacing: 0.3px !important;
}

/* Efekt hover dla tytułu */
.dentim-tile-dark:hover .dentim-tile-title {
  color: var(--e-global-color-accent, #FFD700) !important;
}

/* Style dla tekstu opisu */
.dentim-tile-dark .dentim-tile-description {
  font-size: 14px !important;
  color: rgba(255,255,255,0.7) !important; /* Jaśniejszy tekst opisu */
  margin: 0 !important;
  line-height: 1.6 !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
}

.dentim-tile-dark:hover .dentim-tile-description {
  color: rgba(255,255,255,0.9) !important;
}

/* =============================================
   STYL 5: STANDARDOWY Z LINIĄ PO LEWEJ
   ============================================= */

.dentim-tile-left-line {
  background-color: #f9f9f9 !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 15px rgba(0,0,0,0.05) !important;
  padding: 25px 15px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}

/* Efekt hover dla kafelka */
.dentim-tile-left-line:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
  background-color: #fff !important;
}

/* Linia lewa przy hover */
.dentim-tile-left-line::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  height: 0 !important; /* Początkowo niewidoczna */
  background: linear-gradient(to bottom, var(--e-global-color-accent, #FFD700), #FFA500) !important;
  opacity: 1 !important;
  transition: height 0.4s ease !important;
  z-index: 2 !important;
}

.dentim-tile-left-line:hover::before {
  height: 100% !important; /* Rozciąga się na całą wysokość przy hover */
}

/* Style dla ikon/obrazków */
.dentim-tile-left-line .dentim-tile-icon {
  width: 80px !important;
  height: 80px !important;
  background-color: #f0f0f0 !important;
  border-radius: 50% !important;
  margin: 0 auto 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03) !important;
}

/* Style dla obrazka wewnątrz ikony */
.dentim-tile-left-line .dentim-tile-icon img {
  width: 45px !important;
  height: auto !important;
  max-width: 45px !important;
  transition: transform 0.3s ease !important;
  filter: grayscale(10%) !important;
  object-fit: contain !important;
}

/* Efekt hover dla obrazka */
.dentim-tile-left-line:hover .dentim-tile-icon {
  background-color: #fff !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05) !important;
}

.dentim-tile-left-line:hover .dentim-tile-icon img {
  transform: scale(1.1) !important;
  filter: none !important;
}

/* Style dla tytułu */
.dentim-tile-left-line .dentim-tile-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  transition: color 0.3s ease !important;
  line-height: 1.3 !important;
  width: 100% !important;
}

/* Efekt hover dla tytułu */
.dentim-tile-left-line:hover .dentim-tile-title {
  color: var(--e-global-color-accent, #FFD700) !important;
}

/* Style dla tekstu opisu */
.dentim-tile-left-line .dentim-tile-description {
  font-size: 14px !important;
  color: #666 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* Responsywność dla nowych styli */
@media (max-width: 1024px) {
  .dentim-tile-dark,
  .dentim-tile-left-line {
    padding: 20px 15px !important;
  }
  
  .dentim-tile-dark .dentim-tile-icon,
  .dentim-tile-left-line .dentim-tile-icon {
    width: 70px !important;
    height: 70px !important;
    margin-bottom: 15px !important;
  }
  
  .dentim-tile-dark .dentim-tile-title,
  .dentim-tile-left-line .dentim-tile-title {
    font-size: 16px !important;
  }
}

@media (max-width: 767px) {
  .dentim-tile-dark,
  .dentim-tile-left-line {
    padding: 20px 12px !important;
  }
  
  .dentim-tile-dark .dentim-tile-icon,
  .dentim-tile-left-line .dentim-tile-icon {
    width: 60px !important;
    height: 60px !important;
  }
  
  .dentim-tile-dark .dentim-tile-title,
  .dentim-tile-left-line .dentim-tile-title {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }
  
  .dentim-tile-dark .dentim-tile-description,
  .dentim-tile-left-line .dentim-tile-description {
    font-size: 13px !important;
  }
}