:root {
    --red-color: 194, 38, 46;
    --blue-color: 8, 114, 186;
    --yellow-color: #FFBA08;
    --white-color: 255, 255, 255;
}

h1.elementor-heading-title,h1,h2,h3,h4 {
    margin-bottom: 10px !important;
}
#heroBanner h1 span,
h2 span {
    font-weight: 300;
}
.mainSection {
    padding: 100px 0;
}
#featBox,
#featBox p,
#featbox svg {
    transition: 0.3s;
}
#featBox:hover p {
    color: black;
    transition: 0.3s;
}
#featBox:hover svg {
    fill: black;
    transition: 0.3s;
}
#subtitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
}
#subtitle::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: #1ea7ff; /* your blue */
  border-radius: 50%;
  display: inline-block;
}
.fade {
    position: relative;
}
.fade:before {
    position: absolute;
    content:"";
    height: 100%;
    width: 25%;
    left: 0;
    background: linear-gradient(
  to right,
  rgba(251,251,251,0.1),
  rgba(251,251,251,0)
);
}
.fade:after {
    position: absolute;
    content:"";
    height: 100%;
    width: 25%;
    right: 0;
    background: linear-gradient(
  to left,
  rgba(251,251,251,0.1),
  rgba(251,251,251,0)
);
}
.techList li {
    background-color: rgba(var(--blue-color), 0.05);
    border-radius: 20px;
    padding: 0px 18px !important;
    color: rgb(var(--red-color));
    border: 1px solid rgba(var(--white-color), 0.2);
}