.wp-block-drupalblock-vocational-preference-graph-block {



}

h2 {
  display: block !important;
}

.vocationprefclusters {
      font-family: 'Inter', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 20px;




    .diagram-container-single {
      position: relative;
      padding: 30px;
      /* Padding to allow space for the labels */
      max-width: 450px;
      /* Adjusted max-width to accommodate boxes and consistent gap */
      width: 100%;
      box-sizing: border-box;
      display: grid;
      /* Changed to grid layout */
      grid-template-columns: auto auto;
      /* Columns size to content, allowing for consistent gap */
      column-gap: 10px;
      /* Consistent horizontal gap between columns */
      row-gap: 20px;
      /* Vertical gap between rows */
      justify-content: center;
      /* Center the grid within its container */
      align-items: center;
      /* Center items vertically within their grid cells */
    }

    /* Wrapper for each box and its label to manage relative positioning within grid */
    .box-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* Common styles for the large rounded rectangles */
    .cluster-block {
      background-color: #ffffff;
      border-radius: 20px;
      padding: 20px;
      /* Base padding */
      display: flex;
      align-items: center;
      /* Vertically center content by default */
      font-weight: 600;
      color: #333;
      line-height: 1.3;
      position: relative;
      z-index: 1;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    /* Default font size for text inside boxes (for top boxes) */
    .cluster-block span {
      font-size: 0.9rem;
      /* Adjusted font size for all text in boxes */
    }

    /* Top-left cluster specific styles (Green box) */
    .cluster-block.cluster-1 {
      width: 200px;
      /* Fixed width for top square box */
      height: 220px;
      /* Increased height for top box */
      /* Larger Green shadow */
      justify-content: flex-start;
      /* Aligns content (the span) to the left */
      text-align: left;
      /* Aligns text within the span to the left */
      padding-left: 40px;
      /* Less right padding to shift text left */
    }

    .cluster-block.selected {
      width: 200px;
      /* Fixed width for top square box */
      height: 220px;
    }
    .cluster-block.nonselected {
      width: 160px;
      /* Fixed width for top square box */
      height: 160px;
    }

    /* Top-right cluster specific styles (Orange box) */
    .cluster-block.cluster-2-color {
      width: 200px;
      /* Fixed width for top square box */
      height: 220px;
      /* Increased height for top box */
      border: 2px solid #FBAD4B;
      /* Orange border */
      box-shadow: 0 10px 30px #FBAD4B;
      /* Larger Orange shadow */
      justify-content: flex-end;
      /* Aligns content (the span) to the right */
      text-align: right;
      /* Aligns text within the span to the right */
      padding-right: 40px;
      /* More right padding */
      padding-left: 5px;
      /* Less left padding to shift text right */
    }

    /* Top-right cluster specific styles (Orange box) */
    .cluster-block.cluster-3-col {
      width: 200px;
      /* Fixed width for top square box */
      height: 220px;
      /* Increased height for top box */
      border: 2px solid #36B4EA;
      /* Orange border */
      box-shadow: 0 10px 30px #36B4EA;
      /* Larger Orange shadow */
      justify-content: flex-start;
      /* Aligns content (the span) to the right */
      text-align: left;
      /* Aligns text within the span to the right */
      padding-right: 40px;
      /* More right padding */
      padding-left: 40px;
      /* Less left padding to shift text right */
    }

     .cluster-block.cluster-4-col {
      width: 200px;
      /* Fixed width for top square box */
      height: 220px;
      /* Increased height for top box */
      border: 2px solid #B63CCF;
      /* Orange border */
      box-shadow: 0 10px 30px #B63CCF;
      /* Larger Orange shadow */
      justify-content: flex-end;
      /* Aligns content (the span) to the right */
      text-align: right;
      /* Aligns text within the span to the right */
      padding-right: 40px;
      /* More right padding */
      padding-left: 5px;
      /* Less left padding to shift text right */
    }

      /* New styles for bottom boxes (Grey) */
      .cluster-block.cluster-3-color,
      .cluster-block.cluster-4-color {
        width: 170px;
        /* Smaller width for bottom boxes */
        height: 190px;
        /* Smaller height for bottom boxes */
        border: 2px solid #e0e0e0;
        /* Light grey border */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        /* Larger subtle grey shadow */
      }

    /* Smaller font for text in bottom boxes */
    .cluster-block.cluster-3-color span,
    .cluster-block.cluster-4-color span {
      font-size: 0.8rem;
      /* Even smaller font size for bottom boxes */
    }

    /* Bottom-left cluster (Grey) */
    .cluster-block.cluster-4-color {
      justify-content: flex-start;
      /* Keeps text left aligned horizontally */
      text-align: left;
      /* Aligns text within the span to the left */
      padding-left: 20px;
      /* Adjusted padding-left for more corner alignment */
      padding-right: 5px;
      align-items: flex-end;
      /* Pushes content to the bottom */
      padding-bottom: 20px;
      /* Adjusted padding-bottom to push text further down */
    }

    /* Bottom-right cluster (Grey) */
    .cluster-block.cluster-3-color {
      justify-content: flex-end;
      /* Pushes content to the right */
      text-align: right;
      /* Aligns text within the span to the right */
      padding-right: 20px;
      /* Adjusted padding-right for more corner alignment */
      padding-left: 5px;
      align-items: flex-end;
      /* Pushes content to the bottom */
      padding-bottom: 20px;
      /* Adjusted padding-bottom to push text further down */
    }


    /* Selected/Not Selected Label */
    .selection-label {
      position: absolute;
      writing-mode: vertical-lr;
      /* Vertical text */
      text-orientation: mixed;
      /* Rotated characters */
      white-space: nowrap;
      /* Keep text on one line */
      font-size: 1.1rem;
      font-weight: 600;
      z-index: 2;
      /* Ensure it's above the block */
      color: #000000;
      /* Changed to black */
    }

    /* "Selected" labels (green color) */
    .selection-label.selected-color {
      color: #000000;
      /* Green color for Selected */
    }

    /* "Not Selected" labels (grey color) */
    .selection-label.not-selected-color {
      color: #a0a0a0;
      /* Grey color for Not Selected */
    }

    /* Positioning for labels relative to their box-wrapper */
    .label-left {
      top: 50%;
      left: -50px;
      /* Adjusted position for left label */
      transform: translateY(-50%) rotate(180deg);
      /* Rotate for correct orientation */
    }

    .label-right {
      top: 50%;
      right: -50px;
      /* Adjusted position for right label */
      transform: translateY(-50%) rotate(0deg);
      /* No rotation needed */
    }

}

.mainDomains {

  font-family: 'Inter', sans-serif;
  /*background-color: #f8f8f8;*/
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;


    .section-container {
        background-color: #ffffff;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 30px;
        max-width: 700px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px; /* Space between the two main items */
    }

    .main-item {
        display: flex;
        align-items: center;
        background-color: #ffffff; /* White background for the main item itself */
        border-radius: 10px; /* Overall rounded corners for the item */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for each item */
        position: relative;
        padding: 15px 20px; /* Padding inside the item */
        overflow: hidden; /* Ensure content respects border radius */
        border: 1px solid #e2e8f0; /* Light grey border */
    }

         /* Vertical strip on the right - now uses a CSS variable for color */
         .main-item::after {
           content: '';
           position: absolute;
           right: 0;
           top: 0;
           height: 100%;
           width: 15px;
           /* Width of the strip */
           background-color: var(--strip-color, #4CAF50);
           /* Use custom property or default green */
           border-top-right-radius: 10px;
           border-bottom-right-radius: 10px;
         }

    .icon-circle {
        background-color: #ffffff; /* White background for the circle */
         /* Green border for the circle */
        border-radius: 50%;
        width: 80px; /* Size of the icon circle */
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0; /* Prevent shrinking */
        margin-right: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for the circle */
    }

     /* Styling for the image icon inside the circle */
        .icon-circle img {
            width: 50px; /* Adjust size of the image */
            height: 50px;
            object-fit: contain; /* Ensure image fits without cropping */
            border-radius: 50%; /* Keep it circular if desired for the image */
        }

    .icon-circle svg {
        width: 40px; /* Size of the SVG icon */
        height: 40px;
        color: #4CAF50; /* Green color for the icon */
    }

    .text-content {
        flex-grow: 1; /* Allow text content to take remaining space */
        padding-right: 20px; /* Space before the green strip */
    }

    .title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #333;
        margin-bottom: 5px;
        line-height: 1.3;
    }

    .description {
        font-size: 0.9rem;
        color: #555;
        line-height: 1.5;
    }
}


.subDomains {

        font-family: 'Inter', sans-serif;
        /*background-color: #f8f8f8;*/
        display: flex;
        justify-content: center;
        align-items: flex-start; /* Align to start for vertical flow */
        margin: 0;
        padding: 20px;


        .section-container {
            background-color: #ffffff;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: 700px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 20px; /* Space between the main item and sub-items */
            position: relative; /* For dotted line positioning */
        }

        /* Styling for the main header item (AI, Data Science) */
        .main-header-item {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            position: relative;
            padding: 15px 20px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            margin-bottom: 20px; /* Space between header and sub-items */
        }

        .main-header-item::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            width: 15px;
            background-color: var(--strip-color, #4CAF50);
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .main-header-icon-circle {
            background-color: #ffffff;

            border-radius: 50%;
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-right: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        /* Styling for the image icon inside the circle */
        .main-header-icon-circle img {
            width: 50px; /* Adjust size of the image */
            height: 50px;
            object-fit: contain; /* Ensure image fits without cropping */
            border-radius: 50%; /* Keep it circular if desired for the image */
        }

        .main-header-icon-circle span {
            font-size: 40px;
            line-height: 1;
            color: #4CAF50;
        }

        .main-header-text-content {
            flex-grow: 1;
            padding-right: 20px;
        }

        .main-header-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 5px;
            line-height: 1.3;
        }

        .main-header-description {
            font-size: 0.9rem;
            color: #555;
            line-height: 1.5;
        }

        /* Dotted Line connecting main header to sub-items */
        .dotted-line {
            position: absolute;
            top: 130px; /* Start below the main header icon-circle */
            left: 60px; /* Aligned with the center of the icon-circle */
            width: 2px;
            height: calc(100% - 130px - 20px); /* Adjust height to connect to last item */
            background: repeating-linear-gradient(to bottom, #d1d5db 0px, #d1d5db 5px, transparent 5px, transparent 10px);
            z-index: 0; /* Behind the content items */
        }

        /* Styling for the sub-items */
        .sub-item-wrapper {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 1; /* Ensure sub-items are above the dotted line */
            margin-left: 80px; /* Indent sub-items to the right of the dotted line */
            padding-left: 20px; /* Space from the dotted line's horizontal connector */
            margin-bottom: 10px; /* Space between sub-items */
        }

        /* Horizontal connector from dotted line to sub-item */
        .sub-item-wrapper::before {
            content: '';
            position: absolute;
            left: -20px; /* Extend backwards to meet the vertical dotted line */
            top: 50%;
            transform: translateY(-50%);
            width: 20px; /* Length of the horizontal line */
            height: 2px;
            background-color: #d1d5db; /* Light grey */
            z-index: 1;
        }

        .sub-item-block {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: center;
            justify-content: space-between; /* Space out text and percentage */
            padding: 10px 15px;
            border: 1px solid #e2e8f0;
            flex-grow: 1; /* Allow block to expand */
            max-width: 480px; /* Adjust max-width as needed */
        }

        .sub-item-text-content {
            flex-grow: 1;
            padding-right: 10px; /* Space between text and percentage circle */
        }

        .sub-item-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 3px;
        }

        .sub-item-description {
            font-size: 0.8rem;
            color: #666;
            line-height: 1.4;
        }

        /* Percentage Circle (now pure CSS donut) */
        .percentage-circle {
            position: relative;
            width: 60px; /* Size of the percentage donut */
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden; /* Ensure content clips to circle */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Subtle shadow for the whole donut */
            /* Using conic-gradient for the donut effect */
            background: conic-gradient(
                var(--strip-color, #4CAF50) var(--percentage), /* Green for the filled part */
                #e2e8f0 0% /* Light grey for the unfilled part */
            );
            /* Outer border matching fill color */
        }

        /* Inner white circle to create the donut hole */
        .percentage-circle::before {
            content: '';
            position: absolute;
            width: 44px; /* Inner circle size (60px - 2*6px border/stroke) */
            height: 44px;
            border-radius: 50%;
            background-color: #ffffff; /* White hole */
            z-index: 1; /* Above the conic-gradient */
        }

        /* Text inside the donut */
        .percentage-circle .percentage-text {
            position: relative; /* Position relative to .percentage-circle */
            font-size: 14px;
            font-weight: bold;
            color: var(--strip-color, #4CAF50); /* Green text color */
            z-index: 2; /* Ensure text is on top of the white hole */
        }
}