    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .skills {
        padding: 20px;
        background: #f4f4f4;
        font-family: Arial, sans-serif;
      }

      .skills-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .skills-column {
        flex: 1;
        min-width: 300px;
        background: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title {
        font-size: 2.5rem;
        margin-bottom: 20px;
        position: relative;
        color: #000; 
      }

      .skills-box {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .skill-info {
        display: flex;
        justify-content: space-between;
        font-size: 1rem;
        color: #000; 
      }

      .progress-bar {
        height: 10px;
        background: #e0e0e0;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
      }

      .progress {
        height: 100%;
        background: linear-gradient(90deg, #6a11cb, #2575fc);
        border-radius: 5px;
        width: var(--progress-width);
        transition: width 0.5s ease-in-out;
      }

      @media (max-width: 768px) {
        .skills-container {
          flex-direction: column;
        }
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .skills {
        padding: 20px;
        background: #f4f4f4;
        font-family: Arial, sans-serif;
      }

      .skills-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
      }

      .skills-column {
        flex: 1;
        min-width: 300px;
        background: #ffffff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .title {
        font-size: 2.5rem;
        margin-bottom: 20px;
        position: relative;
        color: #000;
      }

      .skills-box {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .experience, .education {
        margin-bottom: 20px;
        font-size: 1.5rem;
        color: #000;
      }

      .experience h3, .education h3 {
        font-size: 1.5rem;
        margin-bottom: 5px;
      }

      .experience p, .education p {
        margin: 5px 0;
      }

      @media (max-width: 768px) {
        .skills-container {
          flex-direction: column;
        }
      }
    </style>
