/* Custom print styles */
@layer utilities {
  @media print {
    body {
       margin: 0 !important;
       padding: 0 !important;
       font-size: 10pt; /* Adjust print font size if needed */
    }
    .slide {
      page-break-after: always;
      margin-bottom: 0 !important; /* Remove margin for print */
      padding-top: 1rem !important; /* Add some top padding for print */
      padding-bottom: 1rem !important;
    }
    .slide:last-child {
      page-break-after: auto;
    }
    .chart-container canvas {
         max-height: 250px !important; /* Prevent charts breaking pages */
    }
    .image-wrapper img {
         max-height: 250px !important; /* Prevent images breaking pages */
         height: auto !important;
         width: 100%;
         object-fit: contain !important;
    }
    /* Optionally hide elements not needed for print */
    /* .non-printable { display: none; } */
    .mermaid svg { /* Ensure mermaid renders correctly */
        max-width: 100% !important;
        height: auto !important;
    }
    /* Logo specific print style */
    #title-logo-wrapper img { /* Ensure logo scales reasonably */
        max-height: 50px !important;
    }
  }
}
 /* Apply base font to body - using Tailwind defaults here initially */
 body {
     @apply /* font-sans */ text-gray-800 leading-relaxed bg-white; /* Let CSS below handle font */
 }
 /* Use Tailwind apply for custom component styles */
.slide h1, .slide h2, .slide h3 {
    @apply /* font-serif */ font-semibold text-gray-900 mb-2 text-left; /* Let CSS below handle font */
}
.slide p {
    /* @apply mb-3 text-justify text-base; */
    @apply mb-3 text-left text-base; /* Ensure text-left */
}
.slide ul {
     @apply list-disc pl-6 mb-3 text-base;
}
 .slide li {
     @apply mb-1;
 }
.chart-data {
    /* @apply w-full max-w-3xl mx-auto my-4 border-collapse text-xs shadow-sm; */
    @apply w-full mx-auto my-4 border-collapse text-xs shadow-sm; /* Ensure w-full, remove max-w-3xl */
}
.chart-data th, .chart-data td {
     @apply border border-gray-300 p-2 text-left;
}
 .chart-data th {
     @apply bg-gray-100 font-semibold text-gray-700;
}
.chart-data tr:nth-child(even) {
     @apply bg-gray-50;
}
 .chart-data td:nth-child(2), .chart-data td:nth-child(3), .chart-data td:nth-child(4), .chart-data td:nth-child(5) { /* Right align numeric/range data */
     @apply text-right;
}
 /* Specific alignment for known tables */
 #feasibility-revenue .chart-data th:nth-child(3), #feasibility-revenue .chart-data td:nth-child(3) {
     @apply text-right;
 }
  #methodology .chart-data th:nth-child(n+2), #methodology .chart-data td:nth-child(n+2) {
      text-align: left; /* Override for this specific table where text-right doesn't make sense */
  }
   #methodology .chart-data th:nth-child(4), #methodology .chart-data td:nth-child(4),
   #methodology .chart-data th:nth-child(5), #methodology .chart-data td:nth-child(5) {
        @apply text-right;
   }
/* Elements Styling - Flat White */
.image-wrapper { /* Renamed from placeholder-image */
    /* Removed background, min-height, padding, border */
    width: 100%;
    /* max-width: 600px; Removed max-width */
    margin: 15px 0; /* Removed auto L/R margins */
    display: block;
        text-align: center;
    /* Keep overflow hidden for object-fit */
    overflow: hidden;
    /* Keep max-height on container for aspect ratio control */
    max-height: 300px; /* Reduced max height */
}
.image-wrapper img { /* Renamed selector */
     width: 100%; /* Fill container width */
     height: 300px; /* Reduced height */
     max-height: 300px; /* Reduced max height */
     object-fit: cover; /* Scale while preserving aspect ratio, cropping to fill */
     object-position: center; /* Center the image within the crop */
     display: block; /* Remove extra space below image */
     /* Removed margin: 0 auto; container handles centering */
}
@media (max-width: 768px) {
    /* ... existing code ... */
    .image-wrapper { /* Renamed selector */
         margin: 10px 0; /* Reduced margin, removed auto */
         max-height: 250px; /* Adjust max height for mobile */
    }
    .image-wrapper img { /* Renamed selector */
         height: 250px; /* Adjust height for mobile */
         max-height: 250px; /* Adjust max height for mobile */
    }
    /* ... existing code ... */
}
@media (max-width: 480px) {
    /* ... existing code ... */
     .image-wrapper { /* Renamed selector */
         max-height: 200px; /* Further adjust max height */
         margin: 10px 0; /* Consistent margin */
    }
    .image-wrapper img { /* Renamed selector */
         height: 200px; /* Match container */
         max-height: 200px; /* Match container */
    }
    /* ... existing code ... */
}
/* Mermaid container */
.mermaid {
    @apply text-center my-4 p-4 /* bg-gray-50 removed */ rounded;
}
/* Additional style for mermaid SVG scaling */
.mermaid svg {
    max-width: 100%;
    height: auto;
}
/* REINSTATE CSS for Mermaid nodes (no fill, grey border) */
.mermaid svg .node rect,
.mermaid svg .node circle,
.mermaid svg .node ellipse,
.mermaid svg .node polygon { /* Covers [], (), {}, ([]) etc. */
    fill: none !important; /* Override theme fill */
    stroke: #ced4da !important; /* Set desired LIGHT GREY border */
    stroke-width: 1.5px !important; /* Set border width */
}

/* Styling for References Section */
#references {
    /* font-size: 0.85em; Removed base size */
    color: #555; /* Mid-gray text */
}
#references h2 {
    font-size: 1.8em; /* Slightly smaller main heading */
    margin-bottom: 0.8em;
    color: #333;
}
 #references h3 {
     font-size: 1.1em; /* Smaller sub-headings */
     font-weight: bold;
     color: #444;
     margin-top: 1em;
     margin-bottom: 0.3em;
 }
 #references p, #references ul, #references ol {
        margin-bottom: 0.5em;
     line-height: 1.4;
     font-size: 12px; /* Apply 12px to p, ul, ol */
 }
 #references ul li, #references ol li {
     margin-bottom: 0.3em;
     padding-left: 1em; /* Indent list items slightly */
     position: relative; /* For absolute positioning if needed, or just spacing */
 }
 #references ol {
     list-style: decimal;
     padding-left: 2.5em; /* Standard indent for ordered list */
     font-size: 12px; /* Set specific font size for references */
 }
  #references ul {
     list-style: disc;
     padding-left: 2.5em; /* Standard indent for unordered list */
 }
 #references a {
     color: #0056b3; /* Standard link blue */
     text-decoration: none;
 }
 #references a:hover {
     text-decoration: underline;
 }
 /* Global favicon styling */
 .favicon {
    height: 1em; /* Match line height */
    width: 1em;  /* Match line height */
    /* margin: 0 0 0 0.5em; */ /* Remove left margin */
    margin: 0 0.5em 0 0; /* Add right margin */
    vertical-align: middle; /* Align with text */
    /* display: inline-block !important; */ /* Remove inline-block */
    /* float: right; */ /* Remove float right */
    display: inline-block; /* Make inline for placement before text */
}

/* Badge and Formula Styles */
.vacancy-badge,
.fee-badge,
.salary-badge {
    padding: 0.15em 0.5em;
    border-radius: 4px;
        font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block; /* Allows padding/margin */
    font-family: monospace; /* Monospace font */
    text-align: center; /* Ensure badge text is centered */
    vertical-align: baseline; /* Align badges better */
    min-width: 45px; /* Ensure min-width 45px */
}
.vacancy-badge {
    background-color: #cfe2ff; /* Light blue */
    color: #0a367a; /* Darker blue text */
}
.fee-badge {
    /* background-color: #d1e7dd; */ /* Light green */
    /* color: #0f5132; */ /* Darker green text */
    background-color: #fff3cd; /* Light yellow */
    color: #664d03; /* Darker yellow/brown text */
}
.salary-badge { /* New badge for Salary */
    background-color: #e9d5ff; /* Light purple */
    color: #581c87; /* Dark purple text */
}
/* New badge specifically for the Opportunity column value */
.opportunity-badge {
    background-color: #d1e7dd; /* Light green */
    color: #0f5132; /* Darker green text */
    /* Inherit common styles from other badges */
    padding: 0.15em 0.5em;
    border-radius: 4px;
        font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    display: inline-block;
    font-family: monospace;
        text-align: center;
    vertical-align: baseline;
    min-width: 45px;
}
/* Re-add formula operator style */
.formula-operator {
    color: #6c757d; /* Medium grey */
    font-size: 0.9em;
    margin: 0 0.2em; /* Spacing around operators */
}

/* Smaller font for inner list items in Demand Overview */
#demand-overview ul ul li {
    font-size: 0.9em;
    position: relative; /* Needed for absolute positioning of favicon */
    list-style: none; /* Remove default bullet */
    padding-left: 1.8em; /* Space for favicon */
    margin-bottom: 0.4em; /* Spacing between software items */
}
/* Position favicon as bullet */
#demand-overview ul ul li .favicon {
    position: absolute;
    left: 0;
    top: 0.15em; /* Adjust vertical alignment */
    height: 1em;
    width: 1em;
    float: none; /* Override global float */
    margin-left: 0;
}
/* Colors for calculation string */
/* Removed .vacancy-color and .fee-color as formula string changed */
/* .vacancy-color { ... } */
/* .fee-color { ... } */

/* Global favicon styling */
/* Combined favicon styles above */
/* .favicon { */
    /* height: 1em; Match line height */
    /* width: 1em; Match line height */
    /* margin-left: 0.5em; */
    /* float: right; */ /* Remove float if using as bullet */
    /* vertical-align: text-bottom; */
/* } */
/* Styling for linkified software names */
a.wiki-link {
    color: inherit; /* Use surrounding text color */
    text-decoration: none; /* Remove solid underline */
    border-bottom: 1px dotted currentColor; /* Add dotted underline */
}
a.wiki-link:hover {
    border-bottom-style: solid; /* Make underline solid on hover */
}

/* Specific styles for demand-table and legend-table removed */

/* ADD CSS for Segmented Bar Chart */
.segmented-bar-title {
    /* font-size: 0.8em; */
    font-size: 1em; /* Make standard size relative to legend */
    font-weight: bold;
    color: #333;
    margin-bottom: 3px; /* Space above bar */
}
.segmented-bar {
    display: flex; /* Use flexbox for segments */
    width: 100%; /* Full width */
    height: 20px; /* Bar height */
    background-color: #e9ecef; /* Light grey background */
    border-radius: 4px; /* Rounded corners */
    overflow: hidden; /* Hide overflow */
    margin-bottom: 5px; /* Space below bar */
}
.segmented-bar-segment {
    height: 100%; /* Segments fill height */
    /* transition: width 0.3s ease; Optional animation */
}
.color-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%; /* Make it a circle */
    margin-right: 5px;
    vertical-align: middle;
}

/* Center specific headers in Governing table */
#governing .chart-data th:nth-child(n+2) { /* Target 2nd column onwards */
         text-align: center;
     }

/* Specific color override for demand-table removed */

/* Dot Matrix Table Styling for ALL tables */
.chart-data, /* Generic data table class */
.demand-table, /* Demand landscape table */
.legend-table /* Exec Summary legend */
 {
    font-family: 'Courier New', Courier, monospace; /* Monospace font */
    /* border: 1px dashed #bbb; */ /* Previous border */
    border: 1.2px dashed #aaa; /* Darker, slightly thicker border */
    box-shadow: none; /* Remove shadow */
}
.chart-data td,
.demand-table td,
.legend-table td
 {
    font-size: 0.75rem; /* Explicitly set small font size (text-xs) */
    /* Explicitly remove other borders and force top border */
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1.2px dashed #ccc !important; /* Add border only to top for row lines */
    /* padding: 3px 5px; */ /* Previous padding */
    padding: 5px 8px; /* Ensure consistent padding */
    color: #000; /* Black font color */
    font-weight: 500; /* Slightly thicker text */
}
.chart-data th,
.demand-table th,
.legend-table th
 {
    font-size: 0.75rem; /* Explicitly set small font size (text-xs) */
    background-color: transparent; /* Remove header background */
    border-bottom: 1.2px dashed #ccc; /* Match row border style */
    border-top: 1.2px dashed #aaa; /* Match table border for top th */
    border-left: none !important;
    border-right: none !important;
    padding: 5px 8px; /* Ensure consistent padding */
    color: #555; /* Darker grey header text */
    /* font-weight: normal; */ /* Previous non-bold */
    font-weight: bold; /* Bold header */
}
/* Ensure first row doesn't have double top border */
.chart-data tr:first-child td,
.demand-table tr:first-child td,
.legend-table tr:first-child td {
    border-top: none !important;
}
.chart-data tr:nth-child(even),
.demand-table tr:nth-child(even),
.legend-table tr:nth-child(even)
 {
    background-color: transparent; /* Remove alternating row color */
}

/* Specific Alignments for Dot Matrix Tables */
.legend-table td:nth-child(2) { /* Software Name column */
    text-align: left !important;
}
.legend-table td:nth-child(3) { /* Value column */
    text-align: right !important;
}
.demand-table th:nth-child(1), /* Key Software header */
.demand-table th:nth-child(2) { /* Typical Roles header */
    text-align: left !important;
}

/* --- Specific Table Alignments --- */

/* Feasibility/Revenue: Right align fee header */
#feasibility-revenue .chart-data th:nth-child(2) {
    text-align: right;
}

/* Removed specific Governing Environment right-alignment rule */

/* Methodology: Override right alignment for Time-to-Fill */
#references .chart-data th:nth-child(3), /* References table has appendix */
#references .chart-data td:nth-child(3) {
     text-align: left; /* Keep Time-to-fill left aligned in Appendix */
}

/* Market Salaries: Right align salary header */
#market-salaries .chart-data th:nth-child(2) {
    text-align: right;
}

/* Market Vacancies: Right align vacancies header */
#market-vacancies .chart-data th:nth-child(2) {
    text-align: right;
}

/* Governing Environment: Force left align headers and columns 2-5 */
#governing .chart-data th:nth-child(n+2),
#governing .chart-data td:nth-child(n+2) {
    text-align: left !important; /* Override previous right alignment */
}

/* Feasibility/Revenue (Aggregate Table): Left align Industry column (2nd) */
#feasibility-revenue .chart-data:nth-of-type(2) th:nth-child(2),
#feasibility-revenue .chart-data:nth-of-type(2) td:nth-child(2) {
    text-align: left !important;
}

/* --- Force Dot Matrix Styles on Specific Tables --- */
/* Removing this entire redundant block as the styles are already applied in the main '.chart-data, .demand-table, .legend-table' block above */
/* .demand-table th, */
/* .legend-table th { ... } */
/* .demand-table td, */
/* .legend-table td { ... } */
/* .demand-table tr:first-child td, */
/* .legend-table tr:first-child td { ... } */
/* .demand-table tr:nth-child(even), */
/* .legend-table tr:nth-child(even) { ... } */

/* Global Highlighter Style */
.highlight {
    background-color: rgba(255, 255, 0, 0.15); /* Faint yellow highlight */
    padding: 0 0.2em; /* Slight horizontal padding */
    font-weight: normal; /* Ensure text is not bold */
    /* Add rounded corners slightly? Optional */
    /* border-radius: 2px; */
}

/* Governing Environment: Center the spanning 'Outlook' header */
#governing .chart-data thead tr:first-child th[colspan="3"] {
    text-align: center !important;
}

/* Remove padding between circle and name in legend table */
.legend-table td:nth-child(1) { /* Circle column */
    padding-right: 0 !important;
    width: 1.2em !important; /* Adjusted width (target: ~40% reduction) */
}
.legend-table td:nth-child(2) { /* Name column */
    padding-left: 0 !important;
}

/* Center specific columns in Demand table */
#demand-overview .demand-table th:nth-child(1),
#demand-overview .demand-table th:nth-child(2) { /* Typical Roles header */
    text-align: left !important;
}

/* Right-align Appendix table headers 2-5 within Tailwind styles */
#references .chart-data th:nth-child(n+2) {
    @apply text-right;
}

/* Dot Matrix Paper Feed Holes Effect - Simple stroked circles */
.dot-matrix-paper {
    position: relative;
    padding-left: 22px;
    padding-right: 22px;
    margin-top: 1em;
    margin-bottom: 1em;
}
.dot-matrix-paper::before,
.dot-matrix-paper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    background-color: #f8f8f8; /* Keep the light gray background */
    background-image:
        /* Grey fill */
        radial-gradient(circle at center,
            #e8e8e8 0px,
            #e8e8e8 2px,
            transparent 2px
        ),
        /* Circle stroke */
        radial-gradient(circle at center,
            transparent 2px,
            #ddd 2px,
            #ddd 2.3px,
            transparent 2.3px
        );
    background-size: 18px 15px;
    background-repeat: repeat-y;
    background-position: center 5px;
}
.dot-matrix-paper::before {
    left: 0;
}
.dot-matrix-paper::after {
    right: 0;
}

/* Inline Citation Style */
.citation {
    font-size: 0.7em; /* Smaller font size */
    vertical-align: super; /* Superscript */
    color: #0056b3; /* Blue color */
    margin-left: 2px; /* Small space before citation */
    text-decoration: none; /* No underline */
    cursor: pointer; /* Indicate interactivity */
}
.citation:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Custom Font Application */
body {
    font-family: 'Lato', sans-serif;
    /* other body styles if needed */
}

h1,
h2,
h3 {
    font-family: 'Lustria', serif;
    /* other heading styles if needed */
}

/* Modal and Table Responsive Styles */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.modal-content {
    position: relative;
    background-color: white;
    margin: 20px auto;
    padding: 20px;
    width: 95%;
    max-width: 1200px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    background-color: #f3f4f6;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

.modal-close:hover {
    background-color: #e5e7eb;
}

.table-wrapper {
    overflow-x: auto;
    margin: 1rem 0;
    -webkit-overflow-scrolling: touch;
}

.table-wrapper table {
    min-width: 800px;
    width: 100%;
    border-collapse: collapse;
}

.modal-content .legend-table,
.modal-content .chart-data {
    font-size: 14px;
}

.modal-content th,
.modal-content td {
    padding: 8px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .table-container {
        background-color: #f3f4f6;
        border-radius: 0.5rem;
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        margin: 1rem 0;
    }

    .table-container table {
        display: none;
    }

    .view-table-btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.5rem;
        background-color: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        font-weight: 500;
        color: #374151;
        transition: all 0.2s;
    }

    .view-table-btn:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
    }

    .table-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

.swot-diagram-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.swot-grid {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: white;
    border-radius: 40px;
    overflow: hidden;
}

.swot-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 40px;
    pointer-events: none;
    overflow: hidden;
}

.border-segment {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: 40px;
    transition: all 0.3s ease;
}

.border-strengths {
    border-color: rgba(34, 197, 94, 0.3);
}

.border-weaknesses {
    border-color: rgba(239, 68, 68, 0.3);
}

.border-opportunities {
    border-color: rgba(59, 130, 246, 0.3);
}

.border-threats {
    border-color: rgba(245, 158, 11, 0.3);
}

.grid-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vertical-line, .horizontal-line {
    position: absolute;
    background: #e5e7eb;
}

.vertical-line {
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.horizontal-line {
    height: 1px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.swot-quadrant {
    position: absolute;
    width: 50%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    transition: all 0.3s ease;
}

.quadrant-label {
    position: absolute;
    color: #9ca3af;
    font-weight: 600;
    font-size: 1.1em;
    transition: all 0.3s ease;
    white-space: nowrap;
    max-width: 150px;
}

.strengths .quadrant-label {
    top: 15%;
    left: 15%;
    transform: rotate(-45deg);
    transform-origin: left center;
    color: rgba(34, 197, 94, 0.6);
}

.weaknesses .quadrant-label {
    top: 15%;
    right: 15%;
    transform: rotate(45deg);
    transform-origin: right center;
    color: rgba(239, 68, 68, 0.6);
}

.opportunities .quadrant-label {
    bottom: 15%;
    left: 15%;
    transform: rotate(45deg);
    transform-origin: left center;
    color: rgba(59, 130, 246, 0.6);
}

.threats .quadrant-label {
    bottom: 15%;
    right: 15%;
    transform: rotate(-45deg);
    transform-origin: right center;
    color: rgba(245, 158, 11, 0.6);
}

.swot-quadrant:hover .quadrant-label {
    opacity: 1;
}

.swot-quadrant ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.swot-quadrant li {
    position: relative;
    text-align: center;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.strengths li:nth-child(1) { font-size: 1em; transform: translateY(0); }
.strengths li:nth-child(2) { font-size: 0.9em; transform: translateY(10px); }
.strengths li:nth-child(3) { font-size: 0.8em; transform: translateY(20px); }
.strengths li:nth-child(4) { font-size: 0.7em; transform: translateY(30px); }

.weaknesses li:nth-child(1) { font-size: 1em; transform: translateY(0); }
.weaknesses li:nth-child(2) { font-size: 0.9em; transform: translateY(10px); }
.weaknesses li:nth-child(3) { font-size: 0.8em; transform: translateY(20px); }
.weaknesses li:nth-child(4) { font-size: 0.7em; transform: translateY(30px); }

.opportunities li:nth-child(1) { font-size: 1em; transform: translateY(0); }
.opportunities li:nth-child(2) { font-size: 0.9em; transform: translateY(10px); }
.opportunities li:nth-child(3) { font-size: 0.8em; transform: translateY(20px); }
.opportunities li:nth-child(4) { font-size: 0.7em; transform: translateY(30px); }

.threats li:nth-child(1) { font-size: 1em; transform: translateY(0); }
.threats li:nth-child(2) { font-size: 0.9em; transform: translateY(10px); }
.threats li:nth-child(3) { font-size: 0.8em; transform: translateY(20px); }
.threats li:nth-child(4) { font-size: 0.7em; transform: translateY(30px); }

.strengths:hover ~ .swot-border .border-strengths {
    border-color: rgb(34, 197, 94);
    border-width: 3px;
}

.weaknesses:hover ~ .swot-border .border-weaknesses {
    border-color: rgb(239, 68, 68);
    border-width: 3px;
}

.opportunities:hover ~ .swot-border .border-opportunities {
    border-color: rgb(59, 130, 246);
    border-width: 3px;
}

.threats:hover ~ .swot-border .border-threats {
    border-color: rgb(245, 158, 11);
    border-width: 3px;
}

.strengths {
    top: 0;
    left: 0;
}

.weaknesses {
    top: 0;
    right: 0;
}

.opportunities {
    bottom: 0;
    left: 0;
}

.threats {
    bottom: 0;
    right: 0;
}