/*-----------------------------------*\
    #ABOUT
  \*-----------------------------------*/
  
  .about .article-title { margin-bottom: 15px; }
  
  .about-text {
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-300);
    line-height: 1.6;
  }
  
  .about-text p { margin-bottom: 15px; }
  
  /**
   * #service 
   */
  
  .service { margin-bottom: 35px; }
  
  .service-title { margin-bottom: 20px; }
  
  .service-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .service-item {
    position: relative;
    background: var(--border-gradient-onyx);
    padding: 20px;
    border-radius: 14px;
    box-shadow: var(--shadow-2);
    z-index: 1;
  }
  
  .service-item::before {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--bg-gradient-jet);
    border-radius: inherit;
    z-index: -1;
  }
  
  .service-icon-box { margin-bottom: 10px; }
  
  .service-icon-box img { margin: auto; }
  
  .service-content-box { text-align: center; }
  
  .service-item-title { margin-bottom: 7px; }
  
  .service-item-text {
    color: var(--light-gray);
    font-size: var(--fs-6);
    font-weight: var(--fw-3);
    line-height: 1.6;
  }
  
  /*-----------------------------------*\
    Skills
  \*-----------------------------------*/
  
   .skills-title { margin-bottom: 20px; }
  
   .skills-list { padding: 20px; }
   
   
   .skills-item:not(:last-child) { margin-bottom: 15px; }
   
   .skill .title-wrapper {
     display: flex;
     align-items: center;
     gap: 5px;
     margin-bottom: 8px;
   }
   
   .skill .title-wrapper data {
     color: var(--light-gray);
     font-size: var(--fs-7);
     font-weight: var(--fw-300);
   }
   
   .skill-progress-bg {
     background: var(--jet);
     width: 100%;
     height: 8px;
     border-radius: 10px;
   }
   
   .skill-progress-fill {
     background: var(--text-gradient-yellow);
     height: 100%;
     border-radius: inherit;
   }

   .table-border {
     background: var(--border-gradient-onyx);
     border-radius: 14px;
     overflow: hidden;
     padding: 1px;
   }
  .styled-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: inherit;
    overflow: inherit;
    box-shadow: var(--shadow-2);
    background-color: var(--onyx);
    color: var(--white-2);
    z-index: 1;
  }

  .styled-table thead tr {
    background: var(--bg-gradient-jet); /* Sets background color of the header */
    color: var(--white-2); /* Sets text color for header */
    text-align: left; /* Aligns header text to the left */
    font-size: var(--fs-4);
  }

  .styled-table th,
  .styled-table td {
    padding: 12px 15px; /* Adds space around text in cells */
  }

  .styled-table tbody tr {
    border-bottom: 1px solid var(--jet); /* Adds a border between rows */
  }

  .styled-table tbody tr:nth-of-type(even) {
    background: var(--bg-gradient-jet);
  }

  .styled-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--jet); /* Adds a thicker border to the last row */
  }

  .styled-table tbody tr.active-row {
    color: var(--white-2); /* Changes text color in active rows */
  }