/* ==========================================================================
   Page Setup & General Styles
   ========================================================================== */

:root {
  --body-bg: #f8f9fa;
  --section-bg-light: #ffffff;
  --section-bg-alternate: #e9f2fa; 
  --text-primary: #333;
  --heading-color: #2c3e50;
  --border-light: #e0e0e0;
  --border-dark: #cbd6e2;
  --color-cta-blue: #3498db;
}

html,
body {
    background: var(--body-bg) !important;    
}


@page {
    margin-top: 5mm;
    margin-bottom: 5mm;
    margin-left: 9mm;
    margin-right: 9mm;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1.05rem; 
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
	display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures body takes up at least the full screen/page height */
}

ul.list-checkmark {
    padding-left: 20px;
    list-style-type: none;
}

ul.list-checkmark li {
    position: relative;
    padding-left: 25px; /* Creates space for the checkmark */
    list-style-type: none; /* Ensures no default bullet appears */
}

ul.list-checkmark li::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    position: absolute;
    left: 0;
    background-image: url("Pic/checkmark_green.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: 0.3em;
}

.section ul li,
.section ol li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   Layout Container
   ========================================================================== */

.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 5px 15px 20px 15px;
    box-sizing: border-box;
	background-color: var(--body-bg) !important;
	flex: 1;
}

.container > .section:first-child {
    margin-top: 20px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
    background-color: var(--heading-color); 
    color: #ffffff;
    padding: 15px 0;
    text-align: center;
	border-bottom: 1px solid var(--heading-color); 
}

.header h1 {
    font-size: 2.3em; 
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.header p {
    font-size: 1.1em;
    font-weight: 400;
    opacity: 0.9;
    margin-top: 0.5em;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
    padding: 20px 40px 40px 40px; 
    margin-bottom: 25px; 
    border-radius: 5px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.05);
    background-color: var(--section-bg-light);
    border: 1px solid var(--border-light);
}

.section-alternate {
    background-color: var(--section-bg-alternate);
    border: 1px solid var(--border-dark);
}


.section:last-of-type {
    margin-bottom: 5px;
}

.section h2 {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-top: 0;
    margin-bottom: 1.1em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid var(--border-light);
}

.section h3 {
    font-size: 13pt;
    font-weight: 600;
    color: #34495e; /* Darker grey-blue */
    margin-top: 10px;
    margin-bottom: 5px;
}

.section p,
.section ul {
    margin-bottom: 10px;
}

.section p {
    padding-left: 10px;             
    padding-bottom: 5px;             
	}

.section ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-left: 0;
}


/* ==========================================================================
   Intro
   ========================================================================== */

.intro-section {
	padding-top: 0px;
	padding-bottom: 15px;
	padding-left: 10px;
	padding-right: 10px;
    text-align: center;
    border-left: 5px solid var(--heading-color); /* Add a thick, prominent left border */
    border-right: 1px solid var(--border-dark); /* Keep other borders standard */
}

.intro-section p {
    font-size: 1.03em;  /* Make the text slightly larger than the rest */
    line-height: 1.7;  /* Increase line-height for better readability */
    margin-bottom: 0;  /* Remove bottom margin as the section's padding handles it */
	margin-top: 10px;
}

/* ==========================================================================
   Workflow
   ========================================================================== */

.workflow ul li strong {
    color: #2c3e50; /* Darker, for emphasis */
}

.workflow > h2 + p { /* Targets the p directly after h2 in workflow */
    margin-bottom: 4px;
}

.workflow ol {
    margin-top: 4px;
}



/* ==========================================================================
   Key Capabilities Section
   ========================================================================== */

.capabilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Single column */
    gap: 15px;
	margin-left: 10px; 
	margin-right: 10px; 
}

.capability-item {
    background-color: #e9ecef; /* Base background for odd items */
    padding-top: 8px;
    padding-bottom: 10px;
    padding-left: 14px;
    padding-right: 8px;
    border-radius: 4px;
    border-left: 3px solid #3498db; /* Blue accent */
}

/* Alternating background for even capability items */

.capability-item:nth-child(4n+3),
.capability-item:nth-child(4n+4) {
    background-color: #f8f9fa; 
}


.capability-item strong {
    color: #2c3e50;
}

/* Secondary emphasis for technical details within capability items */
.capability-item .tech-highlight {
    text-decoration: underline;
    text-decoration-color: #7f8c8d; /* Lighter grey for the underline */
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}


/* ==========================================================================
   Licensing
   ========================================================================== */


.fair {
	margin-top: 10px;
	text-align: center;
	display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
	background-color: #2c3e50;
    color: #ffffff; 
    font-size: 11pt; 
    padding: 20px 0;
    display: flex;          
    justify-content: center;
    align-items: center;    
    flex-wrap: wrap;       
}

/* This new rule styles our separator */


.footer-item:first-child::after {
    content: ""; 
    display: inline-block; 
    width: 6px;
    height: 6px;
    background-color: #ecf0f1;
    border-radius: 50%; 
    vertical-align: middle;
    margin: 0 1em;
	position: relative; 
    top: -2px;
	display: none;	
}

.print-only {
    display: none;
}

.footer a,
.footer a:link,
.footer a:visited,
.footer a:hover, /* Ensures color consistency on hover */
.footer a:active {  /* Ensures color consistency when clicked */
    color:  #ffffff;
    text-decoration: none; /* Remove default underline */
	font-weight: 400;
}

/* Add underline on hover for better UX, while keeping color same */
.footer a:hover {
    text-decoration: underline;
}

	
/* ==========================================================================
   PRINT SPECIFIC STYLES 
   ========================================================================== */
@media print {
 
 @page {
    margin-top: 0mm;
    margin-bottom: 0mm;
    margin-left: 0mm;
    margin-right: 0mm;
}
 
	.container {
		max-width: 195mm ;
	}
 
	body {
        font-size: 9.5pt; 
		line-height: 1.25;
	}
    
	.header {
        border-bottom: 2px solid #2c3e50 !important; /* Explicit border for print */
        margin-bottom: 0 !important; /* Remove any margin that might cause gaps */
        padding-bottom: 15px !important; /* Ensure consistent padding */
    }

    .header h1 {
        font-size: 17pt; 
    }

    .header p {
        font-size: 12pt; 
    }

    .section h2 {
        font-size: 13pt;
		margin-bottom: 0.8em;	
    }

    .section h3 {
        font-size: 13pt; 
    }

	.section {
		padding: 10px;             
		margin-bottom: 17px;     
        box-shadow: none !important; 
        border: 1px solid #e0e0e0; 
	}
	
	.capability-item {
        box-shadow: none !important;
    }
	
    .intro-section {
        padding: 10px 12px;
		border-left: 5px solid var(--heading-color); /* Add a thick, prominent left border */
		border-right: 1px solid var(--border-dark); /* Keep other borders standard */
    }

	.section ul li,
	.section ol li {
		margin-top: 0.45em;
		margin-bottom: 0.45em;
	}

	.intro-section p {
		font-size: 10pt; 
		margin-bottom: 0; 
		margin-top: 0px;
	}

    .footer {
        font-size: 9pt; 
		padding-bottom: 20px;
	}

    .print-only {
        display: inline; 
    }

    .footer-item:first-child::after {
        display: inline-block;
    }

}

      
/* ==========================================================================
   MOBILE SPECIFIC STYLES 
   ========================================================================== */
@media (max-width: 600px) { 
 	br {
		display: none;
	}
 
	.container {	
		    overflow-x: auto;
	}

	
     .header h1 span:last-child {
        display: block;
    }
  
    .header {
        padding-top: 20px;    
        padding-bottom: 20px; 
        padding-left: 20px;   
        padding-right: 20px;  
    }
 
    .container {
        padding-left: 22px;  
        padding-right: 22px; 
		 
    }


    /* Grid in capabilities section should have only 1 column */
    .capabilities-grid {
        grid-template-columns: 1fr; 
        gap: 18px; 
    }

    .capabilities-grid .capability-item:nth-child(odd) {
        background-color: #e9ecef; /* Base color for odd items in single column */
    }

    .capabilities-grid .capability-item:nth-child(even) {
        background-color: #f8f9fa; /* Alternate color for even items in single column */
    }


 .section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .section p {
        padding-left: 0;
    }

    .capabilities-grid {
        margin-left: 0;
        margin-right: 0;
    }

    .intro-section {
        padding-left: 15px;
        padding-right: 15px;
    }
	
		.workflow p { 
    text-align: center;
}
	
	    .section ul {
        padding-left: 5px;
    }
  
  .section ol {
        padding-left: 25px;
    }
}