.flex-container {
	display: flex;
	flex-wrap: wrap;
	margin: 0 45px 45px 0;
}

.qvplaceholder, .qvobject {
	flex: 1 1 auto;
	height: 300px;
	min-width: 400px;
	margin: 45px 0 0 45px;
}

#popup {
	background-color: #c3534b;
	color: #FFFFFF;
	position: fixed;
	max-width: 250px;
	padding: 10px;
	margin: 10px;
	bottom: 0;
	right: 0;
	display: none;
	border-radius: 5px;
	z-index: 6;
	font-family: sans-serif;
}

.close {
	cursor: pointer;
	background: 0 0;
	border: 0;
	float: right;
	font-size: 21px;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
	opacity: .2;
	position: absolute;
	right: 9px;
	top: 7px;
}

.close:hover {
	opacity: .5;
}

#popupText {
	margin-right: 23px;
}

/* Reset & Base Styles */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #f8fafc; /* Slate 50 */
      color: #1e293b; /* Slate 800 */
      line-height: 1.5;
    }

    .container {
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 1rem;
      min-height: 100vh;
    }

    @media (min-width: 768px) {
      .container {
        padding: 2rem;
      }
    }

    /* Header Styles */
    .header {
      background-color: #1e293b; /* Slate 800 */
      color: white;
      padding: 1.5rem;
      border-top-left-radius: 0.75rem;
      border-top-right-radius: 0.75rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      margin-bottom: 2rem;
      text-align: center;
    }

    .header h1 {
      font-size: 1.875rem;
      font-weight: 800;
      letter-spacing: -0.025em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }

    .header p {
      color: #cbd5e1; /* Slate 300 */
      font-size: 0.875rem;
      max-width: 56rem;
      margin: 0 auto;
    }

    .tag {
      display: inline-block;
      background-color: #334155; /* Slate 700 */
      color: #67e8f9; /* Cyan 300 */
      padding: 0.25rem 1rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-family: monospace;
      margin-top: 1rem;
    }

    /* Layout Columns */
    .main-grid {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      position: relative;
    }

    @media (min-width: 768px) {
      .main-grid {
        flex-direction: row;
      }
    }

    .col {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: center;
    }

    .col-center {
      width: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2rem 0;
      z-index: 10;
    }

    @media (min-width: 768px) {
      .col-center {
        width: 16rem;
      }
    }

    /* Card Styles */
    .card {
      position: relative;
      background-color: white;
      padding: 1rem;
      border-radius: 0.5rem;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      border-left: 4px solid #94a3b8; /* Default fallback */
      transition: box-shadow 0.3s ease;
      width: 100%;
    }

    .card:hover {
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .card-content {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
    }

    .icon-box {
      margin-top: 0.25rem;
      flex-shrink: 0;
      background-color: #f1f5f9; /* Slate 100 */
      padding: 0.5rem;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon-box svg {
      width: 1.5rem;
      height: 1.5rem;
    }

    .card h3 {
      font-weight: 700;
      color: #1e293b;
      font-size: 0.875rem;
      line-height: 1.25;
      text-transform: uppercase;
      margin-bottom: 0.25rem;
    }

    @media (min-width: 768px) {
      .card h3 {
        font-size: 1rem;
      }
    }

    .card p.desc {
      font-size: 0.75rem;
      color: #475569; /* Slate 600 */
      margin-bottom: 0.25rem;
      line-height: 1.4;
    }

    .card p.source {
      font-size: 0.625rem;
      color: #94a3b8; /* Slate 400 */
      font-weight: 600;
      text-transform: uppercase;
    }

    /* Connecting Lines */
    .connector {
      display: none;
      position: absolute;
      top: 50%;
      width: 2.5rem; /* 10 in tailwind approx 2.5rem */
      height: 0.25rem;
    }

    @media (min-width: 768px) {
      .connector {
        display: block;
      }
    }

    /* Central Node Styles */
    .central-circle {
      background-color: white;
      padding: 2rem;
      border-radius: 9999px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      border: 4px solid #facc15; /* Yellow 400 */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 14rem;
      height: 14rem;
      position: relative;
      z-index: 10;
    }

    .central-logo img {
      color: #0891b2; /* Cyan 600 */
      width: 15rem;
      height: 10rem;
      margin-bottom: 0.5rem;
    }

    .central-circle h2 {
      font-size: 2.25rem;
      font-weight: 900;
      color: #1e293b;
      letter-spacing: -0.05em;
      line-height: 1;
    }

    .central-circle p {
      font-size: 0.625rem;
      color: #64748b;
      font-weight: 500;
      line-height: 1.25;
      margin-top: 0.25rem;
    }

    /* Arrow Down in Center */
    .arrow-down {
      margin-top: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .arrow-stem {
      width: 0.5rem;
      height: 4rem;
      background-color: #a5f3fc; /* Cyan 200 */
    }

    .arrow-head {
      width: 0; 
      height: 0; 
      border-left: 1rem solid transparent;
      border-right: 1rem solid transparent;
      border-top: 1.5rem solid #a5f3fc; /* Cyan 200 */
    }

    /* Bottom Flow */
    .process-flow {
      margin-top: 3rem;
      display: flex;
      flex-direction: column;
      width: 100%;
      color: white;
      text-align: center;
      font-weight: 700;
      font-size: 1.125rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    @media (min-width: 768px) {
      .process-flow {
        flex-direction: row;
      }
    }

    .flow-step {
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      position: relative;
    }

    .step-1 { background-color: #0e7490; /* Cyan 700 */ }
    .step-2 { background-color: #0891b2; /* Cyan 600 */ }
    .step-3 { background-color: #06b6d4; /* Cyan 500 */ }

    @media (min-width: 768px) {
      .step-3 { border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem; }
      
      .clip-arrow {
        clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
      }
    }

    .footer {
      text-align: center;
      color: #94a3b8;
      font-size: 0.75rem;
      padding-bottom: 1rem;
      margin-top: 2rem;
    }

    /* Specific Colors */
    .border-blue { border-left-color: #3b82f6; }
    .text-blue { color: #2563eb; }
    .bg-blue { background-color: #3b82f6; }

    .border-teal { border-left-color: #14b8a6; }
    .text-teal { color: #0d9488; }
    .bg-teal { background-color: #14b8a6; }

    .border-green { border-left-color: #22c55e; }
    .text-green { color: #16a34a; }
    .bg-green { background-color: #22c55e; }

    .border-lime { border-left-color: #65a30d; }
    .text-lime { color: #4d7c0f; }
    .bg-lime { background-color: #65a30d; }

    .border-yellow { border-left-color: #facc15; }
    .text-yellow { color: #eab308; }
    .bg-yellow { background-color: #facc15; }

    .border-emerald { border-left-color: #10b981; }
    .text-emerald { color: #059669; }
    .bg-emerald { background-color: #10b981; }

    .border-gray { border-left-color: #6b7280; }
    .text-gray { color: #374151; }
    .bg-gray { background-color: #6b7280; }

    .border-darkblue { border-left-color: #1e40af; }
    .text-darkblue { color: #1e3a8a; }
    .bg-darkblue { background-color: #1e40af; }

    .border-cyan { border-left-color: #0891b2; }
    .text-cyan { color: #0891b2; }
    .bg-cyan { background-color: #0891b2; }