/* CSS Document */

/* ============================================================
   ?? STYLED LIST
   ============================================================ */
.styled-list {
  list-style: none;
  padding: 0;
  padding-left: 20px;
  margin: 0;
}

.styled-list li {
  font-family: "Gordita", Sans-serif;
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight:500;
  color: #444;
  line-height: 1.7;
  transition: color 0.3s ease;
}

.styled-list li::before {
  font-family: "Font Awesome 5 Pro"; /* ?? IMPORTANT */
  font-weight: 900;                  /* solid */
  content: "\f0c8";                  /* fa-square */
  position: absolute;
  display: block;
  padding-top: 7px;
  left: 0;
  top: 0;
  font-size: 8px;
  color: #003728;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover effect */
.styled-list li:hover {
  color: #111;
}

.styled-list li:hover::before {
  color: #5cc9e0;
  transform: translateX(4px);
}

/* =====================================
   Tablet (768px - 1024px)
===================================== */
@media (max-width: 992px) {
.styled-list li {
  font-size: 14px;
  font-weight:500;
}

.styled-list li::before { 
  padding-top: 6px;
}

@media (max-width: 768px) {
.styled-list li {
  font-size: 14px;
  font-weight:500;
}

.styled-list li::before { 
  padding-top: 6px;
}
}
/* =====================================
   Mobile (767px and below)
===================================== */
@media (max-width: 576px) {
.styled-list li {
  font-size: 13px;
  font-weight:400;
}

.styled-list li::before { 
  padding-top: 5px;
}

}

/* --- =480px (Small Mobile) --- */
@media (max-width: 480px) {
.styled-list li {
  font-size: 13px;
  font-weight:400;
}

.styled-list li::before { 
  padding-top: 5px;
}

}