:root {
      --solar-primary: #87CE6E;
      --solar-secondary: #9ACD32;
      --solar-accent: #556B2F;
      --solar-background: #F5F5DC;
      --solar-text: #333333;
    }

    .solarx-section {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 60px 60px;
      gap: 60px;
      width: 100%;
      margin: 0 auto;
      flex-wrap: wrap;
	  font-family: 'Segoe UI', sans-serif;
	  background : var(--solar-background);
      color: var(--solar-text);
    }

    .solarx-text {
      max-width: 600px;
      flex: 1;
	  margin-top: 0;
    }

    .solarx-text h2 {
      font-size: 42px;
      margin-bottom: 10px;
      font-weight: 800;
      color: var(--solar-primary);
    }

    .solarx-text h3 {
      font-size: 34px;
      margin-bottom: 30px;
      font-weight: 700;
      color: var(--solar-text);
    }

    .solarx-step {
      position: relative;
      margin-bottom: 30px;
      padding-left: 30px;
    }

    .solarx-step::before {
      content: "";
      position: absolute;
      left: 0;
      top: 6px;
      width: 6px;
      height: 100%;
      background: linear-gradient(to bottom, var(--solar-primary), var(--solar-secondary));
      border-radius: 4px;
      animation: growBar 1.2s ease forwards;
    }

    .solarx-step:nth-child(2)::before {
      animation-delay: .3s;
    }
    .solarx-step:nth-child(3)::before {
      animation-delay: .6s;
    }

    @keyframes growBar {
      0% { height: 0; }
      100% { height: 100%; }
    }

    .solarx-step strong {
      display: block;
      font-size: 18px;
      margin-bottom: 6px;
      color: var(--solar-accent);
    }

    .solarx-image {
      flex: 1;
      min-width: 360px;
      max-width: 640px;
      border-radius: 18px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      transform: scale(1);
      transition: transform 0.4s ease;
    }

    .solarx-image:hover {
      transform: scale(1.035);
    }

    .solarx-image img {
      width: 100%;
      display: block;
    }

    .solarx-cta {
      margin-top: 40px;
      font-size: 22px;
      color: var(--solar-text);
    }

    .solarx-cta span {
      color: var(--solar-primary);
      font-weight: 700;
    }

    .solarx-btn {
      display: inline-block;
      background: var(--solar-accent);
      color: #fff;
      padding: 14px 26px;
      margin-top: 20px;
      font-size: 16px;
      border-radius: 8px;
      text-decoration: none;
      transition: background 0.3s ease;
    }

    .solarx-btn:hover {
      background: var(--solar-text);
    }

    @media (max-width: 900px) {
      .solarx-section {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
      }
      .solarx-text h2, .solarx-text h3 { text-align: center; }
      /* Put the blue side bars back at the left on mobile and keep steps readable */
      .solarx-step {
        padding-left: 32px;
        text-align: left;
      }
      .solarx-step::before {
        left: 0;
        transform: none;
        width: 6px;
      }
    }