@charset "UTF-8";
/* snippet-row-list-services-2 START */
.snippet-row-list-services-2  {
    .hero-section {
      position: relative;
      width: 100%;
      height: 75vh;
      overflow: hidden;
    }

    .hero-section img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      z-index: 0;
    }

    .content-wrapper {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      height: 100%;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 30px;
      width: 100%;
    }

    .text-panel {
      width: 40%;
      padding: 40px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

    .vertical-line {
      position: absolute;
      left: -20px;
      top: 0;
      width: 4px;
      height: 100%;
      background-color: #ccc;
    }

    .highlight-bar {
      position: absolute;
      left: -20px;
      width: 4px;
      background-color: var(--bs-primary);
      transition: all 0.3s ease;
      z-index: 3;
    }

    .category {
      font-size: 28px;
      font-weight: bold;
      margin: 18px 0;
      color: var(--bs-secondary);
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .category.active {
      color: var(--bs-primary);
    }

    .description {
      margin: 30px 0;
      font-size: 18px;
      color: #111;
      max-width: 90%;
      text-shadow: 0 0 5px #fff; /* pentru lizibilitate pe imagine */
    }


    .note {
      font-size: 16px;
      color: #111;
      opacity: 0.8;
      margin-bottom: 40px;
      text-shadow: 0 0 5px #fff;
    }
    
    #dynamicDesc {
        margin: 15px 0 25px 0;
    }   

    @media screen and (max-width: 768px) {
        .content-wrapper {
            flex-direction: column;
        }
        .text-panel {
            width: 100%;
            height: auto;
        }
        .vertical-line,
        .highlight-bar {
            left: -20;
        }
        .hero-section {
            height: auto;
        }
        .hero-section img {
            display: none;
        }
    }
}   
/* snippet-row-list-services-2 END */