/* Basic Styles & Variables */
:root {
    --primary-color: #4285F4; /* Blue color */
    --secondary-color: #34A853; /* Green for highlights if needed */
    --background-light: #f8f9fa; /* Light Gray for general backgrounds */
    --text-dark: #333;
    --text-light: #fff;
    --header-bg: #ffffff;
    --footer-bg: #333;
    --footer-text: #ccc;
    --border-color: #eee;
    --hover-color: #1a73e8; /* Darker blue for hover */

    /* Colors for Radial Diagrams (Core Values & Industries) */
    --cv-color-blue: #4285F4;
    --cv-color-red: #DB4437;
    --cv-color-yellow: #F4B400;
    --cv-color-green: #0F9D58;
    --radial-center-bg-light-gray: #f0f0f0; /* Light Gray for central box */
    --radial-border-black: #000000; /* Black color for borders */
    --radial-line-color: #000000; /* Black color for lines */
}

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #fff;
    overflow-x: hidden; /* Prevent horizontal scroll from minor overflows */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    color: var(--hover-color);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.section {
    padding: 60px 20px;
    box-sizing: border-box;
}
#core-values-section { /* Special padding for core values section */
    padding-top: 30px;
    padding-bottom: 30px;
}


.bg-light {
    background-color: var(--background-light);
}

.text-center {
    text-align: center;
}

/* Text justification */
#introduction p,
#our-story > h3 + p, /* Target p after h3 in #our-story */
#our-story > p:not(:has(strong)):not(:has(em)):not(.core-values-intro-text), /* Exclude specific paragraphs */
#our-story #mission-vision + p,
#company-philosophy-section #company-philosophy + p, /* Target p after h3 in #company-philosophy-section */
#company-philosophy-section #message-founder + p:not(em),
#team p,
#csr p,
#partners p,
#investors p,
#semiconductor > p:first-of-type, /* First paragraph in semiconductor section */
#semiconductor > h3 + p, /* Paragraph immediately after H3 in semiconductor section */
#embedded > p:first-of-type, /* First paragraph in embedded section */
#software > p:first-of-type,
#industries-visualization > p, /* Justify the intro paragraph for industries diagram */
#aerospace > p, #semiconductors > p, #medical > p, #bfsi > p,
#embedded-tech > p, #telecom > p, #automotive > p, #datacenter > p,
#benefits > p, #openings > p, .application-instructions > p,
#contact-content .contact-form-container > p,
#contact-content .contact-info-container > p {
    text-align: justify;
}

#our-story #mission-vision p strong,
#our-story #mission-vision p,
#company-philosophy-section #message-founder em {
    text-align: left;
}


h1, h2, h3, h4 {
    color: var(--text-dark);
    margin-bottom: 20px;
}

h2 { /* General H2 styling */
   border-bottom: 2px solid var(--primary-color);
   padding-bottom: 10px;
   display: inline-block;
   margin-bottom: 40px;
}
/* Specific H3s and H2s that don't need the general border or might need different margin */
#our-story h3,
#core-values-section h3,
#company-philosophy-section h3,
#team h3, #csr h3,
#semiconductor h3, 
#embedded h3, /* Ensured Embedded H3 is covered */
#software h3,
#industries-visualization h3, /* For "Our Diverse Expertise" if it becomes H3 */
#aerospace h3, #semiconductors h3, #medical h3, #bfsi h3,
#embedded-tech h3, #telecom h3, #automotive h3, #datacenter h3,
#benefits h2, #openings h2, .application-instructions h3,
#form h2, #info h2 {
    color: var(--primary-color);
    margin-top: 30px;
    margin-bottom: 15px; /* Adjusted margin for these H3s */
    border-bottom: none; /* Remove general H2 border if applied via cascading */
    display: block; /* Ensure H3s are block for consistent margin */
    text-align: left; /* Default for most section sub-headings */
}
#core-values-section > h3 { /* The "Core Values" title */
    text-align: center; /* Center the main "Core Values" title */
    margin-bottom: 10px;
}
.core-values-elaboration-section h3 { /* "Our Values Explained" title */
     text-align: center;
     margin-bottom: 30px;
     margin-top: 50px; /* Space above this title */
}


#benefits h2, #openings h2, #form h2, #info h2 {
     display: block;
}
.core-values-intro-text {
    margin-bottom: 40px;
    text-align: justify;
}


.cta-button { display: inline-block; background-color: var(--primary-color); color: var(--text-light) !important; padding: 12px 25px; border-radius: 5px; font-size: 1.1em; transition: background-color 0.3s ease; text-decoration: none; }
.cta-button:hover { background-color: var(--hover-color); color: var(--text-light) !important; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Header & Logo */
header { background-color: var(--header-bg); padding: 10px 0; border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo a img#company-logo { max-height: 50px; width: auto; display: block; }

/* Navigation */
.main-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; }
.main-nav li { position: relative; margin-left: 25px; }
.main-nav a { display: block; padding: 15px 10px; color: var(--text-dark); font-weight: bold; text-decoration: none; transition: color 0.3s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--primary-color); text-decoration: none; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background-color: var(--header-bg); list-style: none; padding: 10px 0; margin: 0; min-width: 220px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-top: 3px solid var(--primary-color); z-index: 1100; border-radius: 0 0 5px 5px; }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu li { margin-left: 0; }
.dropdown-menu a { padding: 10px 20px; font-weight: normal; color: var(--text-dark); white-space: nowrap; }
.dropdown-menu a:hover { background-color: var(--primary-color); color: var(--text-light); }
.mobile-nav-toggle { display: none; background: none; border: none; font-size: 1.8rem; cursor: pointer; color: var(--text-dark); padding: 10px; }

/* Hero Section */
.hero { background: url('../images/hero.jpg') no-repeat center center/cover; background-color: #333; color: var(--text-light); padding: 120px 0; text-align: center; position: relative; }
.hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }
.hero-content { position: relative; }
.hero h1 { font-size: 3.2em; margin-bottom: 15px; color: var(--text-light); }
.hero p { font-size: 1.4em; margin-bottom: 30px; text-align: center; }

/* Services Highlights Section (Home) - OLD STYLES (kept for reference, new styles below) */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.service-card { background-color: #fff; padding: 30px; border: 1px solid var(--border-color); border-radius: 8px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; justify-content: flex-start; }
.service-card i { font-size: 2.5em; color: var(--primary-color); margin-bottom: 15px; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
.service-card h3 { color: var(--primary-color); margin-top: 0; margin-bottom: 15px; }
.service-card p { margin-bottom: 20px; text-align: left; flex-grow: 1; }
.learn-more { display: inline-block; margin-top: auto; font-weight: bold; }
.learn-more i { margin-left: 5px; }


/* NEW Key Offerings Oval Styles */
.key-offerings-container {
    display: flex;
    justify-content: space-around; /* Distributes space around items */
    gap: 30px; 
    flex-wrap: wrap;
    margin-top: 30px; 
}

.key-offering-oval {
    border: 1px solid var(--border-color);
    border-radius: 60px; 
    padding: 25px;
    box-sizing: border-box; /* Added for predictable width calculation */
    width: calc((100% - 60px) / 3); /* Adjusted for 3 items and 30px gap (2 gaps) */
    min-width: 280px; 
    max-width: 340px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: 420px; 
}
.key-offering-oval:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.offering-top-circle {
    width: 140px;  /* Increased */
    height: 140px; /* Increased */
    border-radius: 50%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    padding: 10px; /* Adjusted padding */
    box-sizing: border-box;
    color: var(--text-light); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center; /* Ensure text within is centered */
}
.offering-top-circle.color-cv-yellow { 
    color: var(--text-dark);
}
.offering-top-circle.color-cv-yellow i {
    color: var(--text-dark);
}


.offering-top-circle i {
    font-size: 2.2em; 
    margin-bottom: 10px;
    color: inherit; 
}

.offering-top-circle .offering-name {
    font-weight: bold;
    font-size: 1.1em; /* Adjusted or keep as 1.15em if it fits well */
    line-height: 1.2;
    color: inherit; 
    max-width: 100%; /* Helps contain text if very long */
}

.offering-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    width: 100%;
}

.offering-details p {
    margin-bottom: 25px;
    font-size: 0.9em;
    color: #555;
    text-align: center; 
    line-height: 1.6;
    flex-grow: 1; 
}

.offering-details .cta-button {
    margin-top: auto; 
    align-self: center; 
}
.offering-details .cta-button i {
    margin-left: 8px;
}


/* Industries (Home Page) Grid */
.industries-grid { display: grid; gap: 25px; text-align: center; margin-top: 30px; grid-template-columns: 1fr; }
.industries-grid.four-col { grid-template-columns: repeat(4, 1fr); }
.industry-card { background-color: var(--background-light); padding: 25px 15px; border: 1px solid var(--border-color); border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 160px; text-decoration: none; }
a.industry-card, a.industry-card:hover { text-decoration: none; }
.industry-card i { font-size: 2.5em; color: var(--primary-color); margin-bottom: 15px; transition: color 0.3s ease; }
.industry-card span { font-size: 1.1em; font-weight: bold; color: var(--text-dark); transition: color 0.3s ease; }

/* Original hover for industry cards - to be overridden by color classes */
.industry-card:not([class*='color-cv-']):hover { 
    transform: translateY(-5px); 
    box-shadow: 0 8px 16px rgba(66, 133, 244, 0.3); 
    background-color: var(--primary-color); 
    border-color: var(--hover-color); 
}
.industry-card:not([class*='color-cv-']):hover i, 
.industry-card:not([class*='color-cv-']):hover span { 
    color: var(--text-light); 
}

/* Colored industry cards - ensure text/icon colors are correct */
.industry-card.color-cv-blue i, .industry-card.color-cv-blue span,
.industry-card.color-cv-red i, .industry-card.color-cv-red span,
.industry-card.color-cv-green i, .industry-card.color-cv-green span {
    color: var(--text-light);
}
.industry-card.color-cv-yellow i, .industry-card.color-cv-yellow span {
    color: var(--text-dark);
}
/* Add a subtle hover effect for already colored cards if desired */
.industry-card[class*='color-cv-']:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Darker shadow */
    filter: brightness(110%); /* Slightly brighten the card */
}


/* SHARED Radial Diagram Styles for Core Values & Industries */
.radial-diagram-container {
    position: relative;
    margin: 60px auto;
    padding: 0;
}

#core-values-diagram.radial-diagram-container {
    width: 600px;
    height: 600px;
}

#industries-diagram.radial-diagram-container {
    width: 700px; /* Adjusted for potentially wider industry names */
    height: 700px;
}

.radial-center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--radial-center-bg-light-gray);
    border: 2px solid var(--radial-border-black);
    padding: 20px 30px;
    border-radius: 8px;
    z-index: 10;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

#core-values-diagram .radial-center-box { /* Specific size for Core Values center */
    width: 180px;
}
#industries-diagram .radial-center-box { /* Specific size for Industries center */
    width: 200px; /* Slightly wider for "Industries" text */
}


.radial-item-container { /* Shared by Core Values items and Industry items (which are <a> tags) */
    position: absolute;
    top: 50%; 
    left: 50%; 
    height: 120px; /* Circle Diameter */
    margin-top: -60px; /* -height/2 */
    margin-left: 0; 
    transform-origin: 0% 50%; 
    display: flex;
    align-items: center;
    text-decoration: none; /* For <a> tags used as containers */
}
/* Setting radius for item positioning */
#core-values-diagram .radial-item-container {
    width: 300px; /* Radius for Core Values */
}
#industries-diagram .radial-item-container {
    width: 300px; /* Radius for Industries - same radius for visual consistency */
}


.radial-line {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background-color: var(--radial-line-color);
    z-index: 1;
}
/* Adjust line start and length based on center box and radius */
#core-values-diagram .radial-line {
    left: 90px; /* Based on 180px center box */
    width: calc(300px - 90px - 60px); /* Radius - start_offset - half_circle_width */
}
#industries-diagram .radial-line {
    left: 100px; /* Based on 200px center box */
    width: calc(300px - 100px - 60px); /* Radius - start_offset - half_circle_width */
}


.radial-item-circle { /* Shared by Core Values and Industry items */
    position: absolute;
    right: 0px; 
    top: 0px; 
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--radial-border-black);
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center; 
    text-align: center; 
    padding: 10px;
    box-sizing: border-box;
    z-index: 5;
    color: var(--text-dark);
}

/* Specific content styling for Core Values circles */
#core-values-diagram .radial-item-circle i {
    font-size: 1.8em;
    margin-bottom: 8px;
}
#core-values-diagram .radial-item-circle h4 {
    font-size: 1em;
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
    border-bottom: none;
    color: inherit;
}
/* Specific content styling for Industries circles */
#industries-diagram .radial-item-circle i { /* Styles for new icons in Industries */
    font-size: 1.8em; /* Match Core Values icon size or adjust */
    margin-bottom: 8px; /* Space between icon and text */
    color: inherit; /* Color will be handled by .color-cv-* classes */
}
#industries-diagram .radial-item-circle span {
    font-size: 0.9em; /* Adjust as needed for industry names */
    font-weight: bold;
    line-height: 1.3;
    color: inherit;
}


/* Rotation for Core Values item containers */
#core-values-diagram .value-item-1 { transform: rotate(0deg); }
#core-values-diagram .value-item-2 { transform: rotate(45deg); }
#core-values-diagram .value-item-3 { transform: rotate(90deg); }
#core-values-diagram .value-item-4 { transform: rotate(135deg); }
#core-values-diagram .value-item-5 { transform: rotate(180deg); }
#core-values-diagram .value-item-6 { transform: rotate(225deg); }
#core-values-diagram .value-item-7 { transform: rotate(270deg); }
#core-values-diagram .value-item-8 { transform: rotate(315deg); }

/* Counter-rotation for Core Values circles */
#core-values-diagram .value-item-1 .radial-item-circle { transform: rotate(0deg); }
#core-values-diagram .value-item-2 .radial-item-circle { transform: rotate(-45deg); }
#core-values-diagram .value-item-3 .radial-item-circle { transform: rotate(-90deg); }
#core-values-diagram .value-item-4 .radial-item-circle { transform: rotate(-135deg); }
#core-values-diagram .value-item-5 .radial-item-circle { transform: rotate(-180deg); }
#core-values-diagram .value-item-6 .radial-item-circle { transform: rotate(-225deg); }
#core-values-diagram .value-item-7 .radial-item-circle { transform: rotate(-270deg); }
#core-values-diagram .value-item-8 .radial-item-circle { transform: rotate(-315deg); }

/* Rotation for Industries item containers */
#industries-diagram .industry-item-1 { transform: rotate(0deg); }
#industries-diagram .industry-item-2 { transform: rotate(45deg); }
#industries-diagram .industry-item-3 { transform: rotate(90deg); }
#industries-diagram .industry-item-4 { transform: rotate(135deg); }
#industries-diagram .industry-item-5 { transform: rotate(180deg); }
#industries-diagram .industry-item-6 { transform: rotate(225deg); }
#industries-diagram .industry-item-7 { transform: rotate(270deg); }
#industries-diagram .industry-item-8 { transform: rotate(315deg); }

/* Counter-rotation for Industries circles */
#industries-diagram .industry-item-1 .radial-item-circle { transform: rotate(0deg); }
#industries-diagram .industry-item-2 .radial-item-circle { transform: rotate(-45deg); }
#industries-diagram .industry-item-3 .radial-item-circle { transform: rotate(-90deg); }
#industries-diagram .industry-item-4 .radial-item-circle { transform: rotate(-135deg); }
#industries-diagram .industry-item-5 .radial-item-circle { transform: rotate(-180deg); }
#industries-diagram .industry-item-6 .radial-item-circle { transform: rotate(-225deg); }
#industries-diagram .industry-item-7 .radial-item-circle { transform: rotate(-270deg); }
#industries-diagram .industry-item-8 .radial-item-circle { transform: rotate(-315deg); }


/* Circle Colors (Shared by both diagrams and key offering circles) */
.color-cv-blue { background-color: var(--cv-color-blue); }
.color-cv-red { background-color: var(--cv-color-red); }
.color-cv-yellow { background-color: var(--cv-color-yellow); }
.color-cv-green { background-color: var(--cv-color-green); }

/* Text color adjustments for circle backgrounds (Shared) */
.color-cv-blue, .color-cv-red, .color-cv-green { color: var(--text-light); }
.color-cv-blue i, .color-cv-red i, .color-cv-green i { color: var(--text-light); } /* Ensure icons within these also get light color */
.color-cv-blue h4, .color-cv-red h4, .color-cv-green h4 { color: var(--text-light); }
.color-cv-blue span, .color-cv-red span, .color-cv-green span { color: var(--text-light); }

.color-cv-yellow { color: var(--text-dark); }
.color-cv-yellow i { color: var(--text-dark); } /* Ensure icons within yellow also get dark color */
.color-cv-yellow h4 { color: var(--text-dark); }
.color-cv-yellow span { color: var(--text-dark); }


/* Core Values Elaboration Section (Below Diagram) */
.core-values-elaboration-section {
    margin-top: 60px;
    text-align: left;
}
.core-values-elaboration-section h3 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 30px;
}
.core-value-detail {
    margin-bottom: 25px;
}
.core-value-detail h4 {
    display: flex;
    align-items: center;
    font-size: 1.25em;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: bold;
}
.core-value-detail h4 i {
    color: var(--primary-color);
    margin-right: 12px;
    font-size: 1.4em;
}
.core-value-detail p {
    text-align: justify;
    padding-left: 42px;
    line-height: 1.7;
    color: #555;
}


/* Industries Page - Sections below visualization */
#aerospace i, #semiconductors i, #medical i, #bfsi i, #embedded-tech i, #telecom i, #automotive i, #datacenter i { margin-right: 10px; color: var(--primary-color); }

/* Embedded Services Circles Styles */
.embedded-circles-container {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    flex-wrap: nowrap; 
    padding-bottom: 40px; 
    margin-top: 30px; 
    overflow: hidden; 
}

.embedded-circle {
    width: calc(100% / 8 - 12px); 
    max-width: 130px; 
    min-width: 80px;  
    aspect-ratio: 1 / 1; 
    border-radius: 50%;
    border: 1px solid #e0e0e0; 
    overflow: hidden; 
    display: flex;
    flex-direction: column; 
    text-align: center;
    background-color: #ffffff; 
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.embedded-circle:hover {
    transform: translateY(-4px) scale(1.03); 
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
}

.embedded-circle:nth-child(even) {
    margin-top: 30px; 
}
.embedded-circle:nth-child(odd) {
    margin-top: 0;
}

.circle-top {
    height: 50%; 
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 5px; 
    box-sizing: border-box;
    color: var(--text-light); 
    position: relative; 
}

.circle-top::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%; 
    right: 15%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.25); 
}
.color-yellow-bg.circle-top::after {
    background-color: rgba(0, 0, 0, 0.15); 
}

.circle-top i {
    font-size: clamp(1.2em, 2.5vw, 1.6em); 
    margin-bottom: 4px;
}

.circle-top span {
    font-size: clamp(0.7em, 1.8vw, 0.85em); 
    font-weight: bold;
    line-height: 1.1;
    display: block; 
}

.circle-bottom {
    height: 50%; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px; 
    box-sizing: border-box;
    background-color: #ffffff; 
}

.circle-bottom p {
    font-size: clamp(0.65em, 1.6vw, 0.75em); 
    margin: 0;
    line-height: 1.25;
    color: #555; 
}

/* Background colors for top halves (used by Embedded Circles & Software Cards) */
.color-blue-bg { background-color: #4285F4; }
.color-red-bg { background-color: #DB4437; }
.color-yellow-bg { background-color: #F4B400; color: var(--text-dark); } 
.color-yellow-bg i, .color-yellow-bg span, .color-yellow-bg .software-service-name { color: var(--text-dark); } 
.color-green-bg { background-color: #0F9D58; }


/* Software Services Grid & Card Styles (Services Page) */
.software-services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; 
    margin-top: 30px;
}

.software-service-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    min-height: 224px; 
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.software-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.software-card-upper {
    height: 40%; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    padding: 12px 8px; 
    box-sizing: border-box;
    text-align: center;
    position: relative; 
    color: var(--text-light); 
}

.software-service-name {
    font-size: clamp(0.72em, 1.6vw, 0.88em); 
    font-weight: bold;
    margin-bottom: 8px; 
    line-height: 1.2;
}
.color-yellow-bg .software-service-name { /* Handles text color on yellow for services page */
    color: var(--text-dark);
}


.software-icon-circle {
    width: 48px; 
    height: 48px; 
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.software-icon-circle i {
    font-size: 1.44em; 
    color: var(--primary-color); 
}

.software-card-lower {
    height: 60%; 
    padding: 16px; 
    box-sizing: border-box;
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
}

.software-card-lower p {
    font-size: 0.72em; 
    color: #555;
    line-height: 1.5;
    margin: 0;
}


/* Chip Design Infographic Styles */
.chip-design-infographic-container {
    margin: 60px 0;
    padding: 20px 0; 
    position: relative;
    min-height: 450px; 
}

.chip-design-infographic {
    position: relative;
    width: 100%; 
    height: 400px; 
    margin: 0 auto; 
}

.infographic-line {
    position: absolute;
    left: 10.625%; 
    right: 10.625%; 
    top: 50%; 
    height: 6px; 
    background-color: #000000; 
    transform: translateY(-50%);
    z-index: 1;
}

.infographic-item {
    position: absolute;
    width: 11%; 
    z-index: 2;
    display: flex;
    flex-direction: column; 
    align-items: center; 
}

.infographic-box {
    width: 100%; 
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    color: var(--text-light); 
    min-height: 170px; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    box-sizing: border-box;
}

.infographic-box i {
    font-size: 2em;
    margin-bottom: 10px;
    color: inherit; 
}

.infographic-box span {
    font-size: 1em;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.infographic-box p {
    font-size: 0.85em;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Colors for infographic boxes */
.infographic-box.color-blue { background-color: #4285F4; }
.infographic-box.color-red { background-color: #DB4437; }
.infographic-box.color-yellow { background-color: #F4B400; color: var(--text-dark); } 
.infographic-box.color-yellow i { color: var(--text-dark); } 
.infographic-box.color-green { background-color: #0F9D58; }


.infographic-connector {
    width: 4px; 
    height: 30px; 
    background-color: #000000; 
}

.infographic-item.above {
    bottom: calc(50% + 3px); 
    flex-direction: column; 
}
.infographic-item.above .infographic-box { order: 1; margin-bottom: 0; }
.infographic-item.above .infographic-connector { order: 2; }

.infographic-item.below {
    top: calc(50% + 3px); 
    flex-direction: column-reverse;
}
.infographic-item.below .infographic-connector { order: 2; } 
.infographic-item.below .infographic-box { order: 1; margin-top: 0; }


/* Horizontal positioning of items along the line. (LINE_START_OFFSET = 5%, ITEM_SLOT_WIDTH = 11.25%, PADDING_IN_SLOT = 0.125%) */
.infographic-item.item-1 { left: calc(5% + (11.25% * 0) + 0.125%); } 
.infographic-item.item-2 { left: calc(5% + (11.25% * 1) + 0.125%); } 
.infographic-item.item-3 { left: calc(5% + (11.25% * 2) + 0.125%); } 
.infographic-item.item-4 { left: calc(5% + (11.25% * 3) + 0.125%); } 
.infographic-item.item-5 { left: calc(5% + (11.25% * 4) + 0.125%); } 
.infographic-item.item-6 { left: calc(5% + (11.25% * 5) + 0.125%); } 
.infographic-item.item-7 { left: calc(5% + (11.25% * 6) + 0.125%); } 
.infographic-item.item-8 { left: calc(5% + (11.25% * 7) + 0.125%); } 


/* Careers Page Styling */
.benefits-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 30px; }
.benefit-item { background-color: var(--background-light); padding: 25px; border-radius: 8px; text-align: center; }
.benefit-item i { font-size: 2.2em; color: var(--primary-color); margin-bottom: 15px; }
.benefit-item h4 { margin-top: 0; margin-bottom: 10px; font-size: 1.2em; }
.job-opening { margin-bottom: 40px; }
.job-opening h3 { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 20px; color: var(--primary-color); }
.job-card { background-color: #fff; border: 1px solid var(--border-color); border-left: 4px solid var(--primary-color); padding: 20px; margin-bottom: 20px; border-radius: 5px; }
.job-card h4 { margin-top: 0; font-size: 1.3em; }
.job-card p { margin-bottom: 8px; text-align: left; }
.job-card p strong { color: var(--text-dark); }
.application-instructions { background-color: var(--background-light); padding: 30px; border-radius: 8px; margin-top: 30px; text-align: center; }
.application-instructions h3 { margin-top: 0; }

/* Contact Page Styling */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.contact-form-container h2, .contact-info-container h2 { margin-bottom: 15px; }
.contact-form .form-group { margin-bottom: 20px; }
.contact-form label { display: block; margin-bottom: 8px; font-weight: bold; color: #555; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 1em; }
.contact-form textarea { resize: vertical; }
.contact-form .form-submission-note { font-size: 0.85em; color: #777; margin-top: 15px; }
.contact-details { list-style: none; padding: 0; margin-top: 20px; }
.contact-details li { margin-bottom: 15px; font-size: 1.1em; display: flex; align-items: center; }
.contact-details li i { margin-right: 12px; color: var(--primary-color); width: 20px; text-align: center; }
.contact-details li .contact-address-text {
    font-size: 0.85em; /* Makes address text smaller relative to the li's 1.1em font-size */
    line-height: 1.4; /* Improves readability if it needs to wrap slightly */
}
.social-media-contact { margin-top: 25px; } /* Styles kept in case it's used elsewhere, but content removed from contact page */
.social-media-contact a { display: inline-block; margin-right: 15px; font-size: 1.8em; color: var(--primary-color); }
.social-media-contact a:hover { color: var(--hover-color); }

/* Testimonials */
.testimonial { background-color: #fff; padding: 25px; border-left: 5px solid var(--primary-color); margin-bottom: 25px; font-style: italic; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.testimonial p { text-align: left; }
.testimonial cite { display: block; text-align: right; font-style: normal; font-weight: bold; margin-top: 15px; color: var(--text-dark); }

/* Page Title Section */
.page-title-section { background-color: var(--primary-color); color: var(--text-light); padding: 40px 20px; text-align: center; }
.page-title-section h1 { color: var(--text-light); margin: 0; border-bottom: none; }


/* Why Choose Us List / Octagon Section */
.reasons-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns for desktop */
    gap: 50px 25px; /* row-gap column-gap */
    margin-top: 40px;
    justify-items: center; 
}

.octagon-item {
    width: 300px; 
    height: 300px; /* For a regular-looking octagon, width and height of bounding box are often equal */
    position: relative;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background-color: #ccc; /* Fallback */
    padding: 0; 
    transition: transform 0.3s ease;
}
.octagon-item:hover {
    transform: scale(1.05); 
}

.octagon-content {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 30px 25px; /* Adjust padding as needed for octagon shape and content */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center icon and h4 */
    justify-content: center; 
    text-align: center; /* For icon and h4 */
}

.octagon-item i {
    font-size: 2.5em;
    margin-bottom: 15px;
    /* Color is set by specific octagon color class */
}

.octagon-item h4 {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: bold;
    /* Color is set by specific octagon color class */
}

.octagon-item p {
    font-size: 0.9em;
    line-height: 1.5;
    text-align: justify; /* Justify description text */
    /* Color is set by specific octagon color class */
    max-width: 85%; /* Adjust to prevent text from touching edges of octagon */
}

/* Octagon Background Colors */
.octagon-blue { background-color: #4285F4; } 
.octagon-red { background-color: #DB4437; }   
.octagon-yellow { background-color: #F4B400; }
.octagon-green { background-color: #0F9D58; } 

/* Text Color for Octagons (Contrast) - Targeting content inside colored octagons */
.octagon-blue .octagon-content,
.octagon-red .octagon-content,
.octagon-green .octagon-content {
    color: var(--text-light); /* White text */
}
/* Explicitly color i, h4, p within these colored octagons */
.octagon-blue i, .octagon-blue h4, .octagon-blue p,
.octagon-red i, .octagon-red h4, .octagon-red p,
.octagon-green i, .octagon-green h4, .octagon-green p {
    color: var(--text-light);
}


.octagon-yellow .octagon-content {
    color: var(--text-dark); /* Dark text for yellow background */
}
/* Explicitly color i, h4, p within yellow octagon */
.octagon-yellow i, .octagon-yellow h4, .octagon-yellow p {
    color: var(--text-dark);
}


/* Footer */
footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 30px 20px; text-align: center; font-size: 0.9em; }
.footer-links { margin-bottom: 15px; }
.footer-content a { color: var(--footer-text); margin: 0 10px; transition: color 0.3s ease; }
.footer-content a:hover { color: var(--text-light); text-decoration: underline; }
.social-media { margin: 15px 0; }
.social-media a { font-size: 1em; display: inline-flex; align-items: center; }
.social-media a i { margin-right: 6px; font-size: 1.2em; }

/* Responsive Styles */
@media (min-width: 769px) {
    .contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) { /* Desktop */
    .industries-grid.four-col,
    .software-services-grid { 
        grid-template-columns: repeat(4, 1fr); 
    }
    /* Ensure key offerings are 3 in a row on desktop */
    .key-offering-oval {
        /* width: calc((100% - 60px) / 3); /* Already set above, this is a reminder of its context */
        /* Ensure min-width doesn't force wrapping if container is slightly less than 3*min-width + gaps */
    }
}

@media (min-width: 576px) and (max-width: 991.98px) { /* Tablet */
    .industries-grid.four-col { 
        grid-template-columns: repeat(2, 1fr); 
    }
     .software-services-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    .software-service-card {
        min-height: 208px; 
    }
    .key-offerings-container {
        gap: 20px; /* Tablet gap for key offerings */
    }
    .key-offering-oval {
        width: calc((100% - 20px) / 2); /* 2 ovals per row on tablet, with 20px gap */
        min-height: 400px;
    }
}


/* Responsive for Radial Diagrams */
@media (max-width: 800px) { 
    #core-values-diagram.radial-diagram-container,
    #industries-diagram.radial-diagram-container {
        position: static;
        width: 100%;
        height: auto;
        min-height: auto;
        padding: 20px 0;
        display: flex; 
        flex-direction: column; 
        justify-content: flex-start;
        align-items: center;
    }
    #core-values-diagram .radial-center-box,
    #industries-diagram .radial-center-box {
        position: static; 
        transform: none; 
        margin: 0 auto 40px auto;
    }
    #core-values-diagram .radial-item-container,
    #industries-diagram .radial-item-container {
        position: static; 
        transform: none !important; 
        width: 90%; 
        max-width: 300px; 
        height: auto; 
        margin: 0 auto 20px auto; 
        display: flex; 
        justify-content: center; 
        align-items: center;
        background-color: var(--background-light); 
        padding: 15px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    #core-values-diagram .radial-line,
    #industries-diagram .radial-line {
        display: none; 
    }
    #core-values-diagram .radial-item-circle,
    #industries-diagram .radial-item-circle {
        position: static; 
        transform: none !important; 
        margin: 0; 
    }

    #core-values-diagram .radial-item-circle {
        width: 150px; height: 150px;
    }
    #core-values-diagram .radial-item-circle i { font-size: 1.8em; }
    #core-values-diagram .radial-item-circle h4 { font-size: 1em; }
    
    #industries-diagram .radial-item-circle {
         width: 150px; height: 150px;
    }
     #industries-diagram .radial-item-circle i { font-size: 1.8em; } 
     #industries-diagram .radial-item-circle span { font-size: 0.9em; }


    .core-values-elaboration-section { margin-top: 30px;}
    .core-value-detail h4 { font-size: 1.15em;}
    .core-value-detail h4 i { font-size: 1.2em;}
    .core-value-detail p { padding-left: 35px; }
}


@media (max-width: 768px) { /* General tablet and smaller mobile adjustments */
    .header-content { flex-direction: row; justify-content: space-between; align-items: center; position: relative; padding: 0 15px; }
    .logo { flex-shrink: 0; }
    .main-nav { width: 100%; position: absolute; top: 100%; left: 0; background-color: var(--header-bg); box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    .main-nav .nav-list { display: none; flex-direction: column; width: 100%; }
    .main-nav .nav-list.active { display: flex; }
    .main-nav li { margin-left: 0; width: 100%; border-bottom: 1px solid var(--border-color); }
    .main-nav li:last-child { border-bottom: none; }
    .main-nav a { padding: 15px 20px; width: 100%; box-sizing: border-box; }
    .mobile-nav-toggle { display: block; }

    .dropdown-menu { position: static; display: none; box-shadow: none; border-top: none; background-color: #f0f0f0; padding-left: 30px; width: 100%; box-sizing: border-box; border-radius: 0; }
    .dropdown-menu a { padding: 12px 20px; }
    .dropdown:hover .dropdown-menu { display: none; }
    .dropdown.open .dropdown-menu { display: block; }

    .hero h1 { font-size: 2.2em; } .hero p { font-size: 1.1em; }
    .services-grid { grid-template-columns: 1fr; } /* Old services grid, might be obsolete */

    .key-offering-oval {
        width: 100%; /* Full width for ovals on smaller screens */
        margin-bottom: 25px;
        min-height: auto; /* Adjust min-height for mobile */
    }
    .key-offerings-container {
        gap: 0; /* Remove gap if ovals are full width and stacked */
    }


    /* Responsive Chip Design Infographic for smaller screens */
    .chip-design-infographic-container {
        min-height: auto; 
        padding: 20px 0;
        overflow-x: visible; 
    }
    .chip-design-infographic {
        display: flex;
        flex-direction: column; 
        align-items: center; 
        height: auto; 
        min-width: 0; 
        width: 100%;
    }
    .infographic-line {
        display: none; 
    }
    .infographic-item {
        position: static; 
        width: 80%; 
        max-width: 350px; 
        margin-bottom: 30px; 
        transform: none !important; 
        left: auto !important; 
        top: auto !important; 
        bottom: auto !important;
        flex-direction: column !important; 
    }
    .infographic-item:last-child {
        margin-bottom: 0;
    }
    .infographic-item.above .infographic-box, 
    .infographic-item.below .infographic-box {
        order: 0; 
        margin: 0;
    }
    .infographic-connector {
        display: none; 
    }
    .infographic-box {
        min-height: auto; 
    }

    /* Responsive adjustments for Embedded Circles on smaller screens */
    .embedded-circles-container {
        padding-bottom: 25px; 
    }
    .embedded-circle {
        min-width: 70px; 
    }
    .embedded-circle:nth-child(even) {
        margin-top: 20px; 
    }
    .circle-top i { font-size: clamp(1em, 2.2vw, 1.4em); }
    .circle-top span { font-size: clamp(0.65em, 1.6vw, 0.8em); line-height: 1; }
    .circle-bottom p { font-size: clamp(0.6em, 1.5vw, 0.7em); line-height: 1.1; }

    /* Responsive Software Services Grid for tablets and smaller */
    .software-services-grid {
        grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); 
    }
     .software-service-card {
        min-height: 192px; 
    }
    .software-card-upper {
        height: 45%; 
        padding: 8px; 
    }
    .software-service-name {
        font-size: clamp(0.64em, 1.44vw, 0.8em); 
        margin-bottom: 6px; 
    }
    .software-icon-circle {
        width: 40px; 
        height: 40px; 
    }
    .software-icon-circle i {
        font-size: 1.28em; 
    }
    .software-card-lower {
        height: 55%;
        padding: 12px; 
    }
    .software-card-lower p {
        font-size: 0.68em; 
    }

    /* Octagon responsive adjustments */
    .reasons-list {
        grid-template-columns: 1fr; /* Stack octagons in a single column */
        gap: 30px; 
    }
    .octagon-item {
        width: 80%; 
        max-width: 320px; 
        /* height: calc( (100% - 40px) * 0.866 ); /* Previous hexagon aspect ratio */
        height: calc( Min(100vw * 0.8, 320px) ); /* Maintain square aspect for octagon */
        margin: 0 auto; 
    }
    .octagon-content {
        padding: 25px 20px; /* Adjust padding for smaller octagons */
    }
}


@media (max-width: 630px) { /* Further adjustments for smaller mobiles */
    #core-values-diagram .radial-item-circle,
    #industries-diagram .radial-item-circle {
        width: 130px; height: 130px;
    }
    #core-values-diagram .radial-item-circle i { font-size: 1.5em; }
    #core-values-diagram .radial-item-circle h4 { font-size: 0.9em; }

    #industries-diagram .radial-item-circle i { font-size: 1.5em; } 
    #industries-diagram .radial-item-circle span { font-size: 0.8em; }


    .industries-grid.four-col { 
         grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 2 columns for smaller mobiles */
    }
    .industry-card {
        min-height: 130px; /* Adjust height for smaller cards */
        padding: 15px 10px;
    }
    .industry-card i { font-size: 2em; }
    .industry-card span { font-size: 1em; }


    .hero { padding: 80px 0; } .hero h1 { font-size: 2em; } .hero p { font-size: 1em; }

    .core-values-elaboration-section { margin-top: 20px;}
    .core-value-detail h4 { font-size: 1.1em;}
    .core-value-detail h4 i { font-size: 1.1em;}
    .core-value-detail p { padding-left: 30px; font-size: 0.95em }

    .infographic-item {
        width: 90%; 
    }

    .embedded-circles-container {
        justify-content: space-around; 
        padding-left: 5px;
        padding-right: 5px;
    }
    .embedded-circle {
        width: calc(100% / 8 - 6px); 
        min-width: 55px; 
        max-width: 80px; 
    }
    .embedded-circle:nth-child(even) {
        margin-top: 15px; 
    }
    .circle-top i { font-size: clamp(0.9em, 2vw, 1.2em); }
    .circle-top span { font-size: clamp(0.55em, 1.5vw, 0.7em); }
    .circle-bottom p { font-size: clamp(0.5em, 1.4vw, 0.65em); }
    .circle-top::after { display: none; } 

    /* Software services on very small screens */
    .software-services-grid {
         grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); 
         gap: 12px; 
    }
    .software-service-card {
        min-height: 176px; 
    }
     .software-card-upper {
        height: 40%;
        padding: 6px; 
    }
    .software-service-name {
        font-size: clamp(0.6em, 1.36vw, 0.72em); 
        margin-bottom: 5px; 
    }
    .software-icon-circle {
        width: 36px; 
        height: 36px; 
    }
    .software-icon-circle i {
        font-size: 1.12em; 
    }
    .software-card-lower {
        height: 60%;
        padding: 8px; 
    }
    .software-card-lower p {
        font-size: 0.64em; 
    }
    /* Octagon responsive for very small mobiles */
    .octagon-item {
        width: 90%;
        height: calc(90vw); /* Maintain square aspect based on viewport width */
    }
     .octagon-content {
        padding: 20px 15px; /* Further reduce padding */
    }
    .octagon-item i { font-size: 2em; }
    .octagon-item h4 { font-size: 1.1em; }
    .octagon-item p { font-size: 0.85em; max-width: 90%; }
}