.banner-headline{
        font-size: 48px;
    letter-spacing: 0px;
    line-height: normal;
    
}
@media(max-width:1024px){
    .heroimage-banner{
        display: none;
    }
}
@media(max-width:375px){
    .banner-headline{
        font-size: 36px;
    letter-spacing: 0px;
    line-height: normal;
    
}
}
.hero-list-sections {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0;
    padding: 0;
    list-style: none;
}

.hero-list-sections li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #E4E4E4;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
}
 
      .community-row {
          background: #0b0d10;
          padding: 30px 24px;
          margin-top: 14px;
      }

      .row-container {
          max-width: 1000px;
          margin: 0 auto;
      }

      .row-header {
          text-align: center;
          margin-bottom: 50px;
      }

    

      .row-header h2 {
          color: white;
          font-size: 2.8rem;
          font-weight: 700;
          margin: 0 0 18px 0;
          line-height: 1.2;
      }

      .row-text {
          color: #a0a8b5;
          font-size: 1.1rem;
          line-height: 1.6;
          max-width: 700px;
          margin: 0 auto;
      }

      .row-cards {
          display: flex;
          justify-content: center;
          gap: 18px;
          flex-wrap: wrap;
      }

      .row-card {
          text-decoration: none;
          width: 220px;
          background: #111316;
          border: 1px solid #1e1f24;
          border-radius: 18px;
          transition: all 0.25s ease;
      }

      .row-card:hover {
          border-color: #8a2be2;
          background: #16181f;
          transform: translateY(-3px);
          box-shadow: 0 12px 25px -12px rgba(138, 43, 226, 0.3);
      }

      .row-card-inner {
          padding: 22px 18px;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 14px;
      }

      .row-icon {
          width: 52px;
          height: 52px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.25s ease;
      }

      .row-card:hover .row-icon {
          transform: scale(1.05);
      }

      /* Icon background colors - subtle purple */
      .row-icon.mattermost {
          background: rgba(138, 43, 226, 0.12);
      }

      .row-icon.github {
          background: rgba(138, 43, 226, 0.12);
      }

      .row-icon.telegram {
          background: rgba(138, 43, 226, 0.12);
      }

      .row-icon.twitter {
          background: rgba(138, 43, 226, 0.12);
      }

      .row-icon svg {
          fill: #b794f4;
          width: 26px;
          height: 26px;
      }

      .row-content h3 {
          color: white;
          font-size: 1.2rem;
          font-weight: 600;
          margin: 0 0 6px 0;
      }

      .row-content span {
          color: #b794f4;
          font-size: 0.9rem;
          font-weight: 500;
          opacity: 0.9;
          transition: opacity 0.2s ease;
      }

      .row-card:hover .row-content span {
          opacity: 1;
      }

      @media (max-width: 900px) {
          .row-cards {
              gap: 15px;
          }

          .row-card {
              width: calc(50% - 15px);
              min-width: 180px;
          }
      }

      @media (max-width: 550px) {
          .row-header h2 {
              font-size: 2.2rem;
          }

          .row-text {
              font-size: 1rem;
              padding: 0 10px;
          }

          .row-cards {
              flex-direction: column;
              align-items: center;
          }

          .row-card {
              width: 100%;
              max-width: 260px;
          }

          .row-card-inner {
              flex-direction: row;
              text-align: left;
              padding: 16px 20px;
          }

          .row-content h3 {
              font-size: 1.1rem;
              margin-bottom: 4px;
          }
      }
  