:root {
  --bg-dark: #F8F9FA;
  --bg-medium: #FFFFFF;
  --bg-light: #E9ECEF;
  
  --text-primary: #212529;
  --text-secondary: #495057;
  --text-muted: #6C757D;
  
  --accent-blue: #009CDE;
  --accent-blue-darker: #0A58CA;
  
  --highlight-bg: #D6EAF8;
  --text-on-accent: #FFFFFF;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
  --fz-xs: 0.8rem;
  --fz-sm: 0.9rem;
  --fz-md: 1rem;
  --fz-lg: 1.1rem;
  --fz-xl: 1.25rem;
  --fz-heading-sm: 1.6rem;
  --fz-heading-md: 2.2rem;
  --fz-heading-lg: 2.8rem;
  
  --border-radius: 4px;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--bg-dark);
  color: var(--text-secondary);
  line-height: 1.6;
}

p:empty {
  display: none;
}

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

/* Hero Section */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 60px 0;
  /*margin-bottom: 50px;
    min-height: 60vh;*/
  position: relative;
}

.hero-content {
  flex: 1;
  padding-right: 40px;
  max-width: 600px;
  align-self: flex-start;
}

.hero-content h1 {
  font-size: var(--fz-heading-lg);
  color: var(--text-primary);
  margin-bottom: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.hero-content .subtitle {
  font-size: var(--fz-lg);
  color: var(--text-secondary);
  margin-bottom: 30px;
  line-height: 1.5;
}

.cta-button a {
  display: inline-block;
  text-decoration: none;
  background-color: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--accent-blue-darker);
  padding: 12px 25px;
  font-size: var(--fz-md);
  font-weight: 500;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.cta-button a:hover {
  background-color: var(--accent-blue-darker);
  border-color: var(--accent-blue);
  color: var(--text-on-accent);
}

.hero-image-container {
  flex: 0 0 35%; /* Adjust width of image container */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  align-self: stretch; /* Make it stretch to the hero section's height */
}

.hero-img {
  max-width: 100%;
  height: 100%;
  max-height: 550px;
  object-fit: contain; /* Changed to contain to ensure full visibility */
  object-position: right center;
  opacity: 0.85;
}

/* Objectives Section */
.objectives-section {
  padding: 50px 0;
  border-top: 1px solid var(--bg-light);
  border-bottom: 1px solid var(--bg-light);
  margin-bottom: 50px;
}

.objectives-section h2 {
  font-size: var(--fz-heading-md);
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 40px;
  font-weight: 700;
}

.objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.objective-item {
  display: flex;
  align-items: flex-start;
}

/* This rule remains for the checkmarks in the "Objectives" section */
.objective-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--accent-blue);
  color: white;
  font-size: var(--fz-sm);
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.objective-item h3 {
  font-size: var(--fz-xl);
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 700;
}

.objective-item p {
  font-size: var(--fz-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* Solutions Section */
.solutions-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 50px; /* row-gap column-gap */
  padding: 50px 0;
}
.content-block {
}
.solution-item {
  /* No background, items sit on main page background */
  /*border-bottom: 1px solid var(--bg-light);*/
  /*padding: 60px 0;*/
}

.solution-label {
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-bottom: 5px;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.3; /* For calc in network-title */
}

.solution-item h3,
.solution-item h4 {
  font-size: var(--fz-heading-sm);
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 700;
}
.solution-item .network-title {
  margin-top: calc((var(--fz-xs) * 1.3) + 5px);
}

/* --- MODIFICATIONS START HERE --- */

ul {
  list-style: none; /* Remove default bullets */
  padding-left: 0; /* Remove default padding */
  margin-bottom: 20px;
}

li {
  /* display: flex; REMOVE - no longer needed for icon alignment */
  /* align-items: flex-start; REMOVE */
  position: relative; /* For ::before positioning */
  padding-left: 30px; /* Space for the icon. Adjust as needed (was 20px icon + 10px margin) */
  margin-bottom: 15px;
  font-size: var(--fz-md);
  line-height: 1.5;
}

/* Remove or comment out the old .icon rule specific to solution-item li */
/*
.solution-item li .icon {
    width: 20px; 
    height: 20px;
    font-size: 0.7rem; 
    margin-right: 10px;
    margin-top: 3px; 
}
*/

/* NEW RULE for the pseudo-element icon */
.solution-item li::before {
  content: '✓'; /* Unicode checkmark character */
}

li::before {
  content: '>';
  position: absolute;
  left: 0;
  top: 2px; /* Adjust for vertical alignment with text. Experiment here. */
  /* Could also use 'top: 50%; transform: translateY(-50%);' for more precise centering if needed */

  display: inline-flex; /* To use align-items and justify-content */
  align-items: center;
  justify-content: center;

  width: 20px; /* Match the size of your previous icon span */
  height: 20px; /* Match the size of your previous icon span */
  border-radius: 50%;
  background-color: var(--accent-blue);
  color: white;
  font-size: 0.8rem; /* Adjust checkmark size inside the circle (was 0.7rem) */
  font-weight: bold;
  line-height: 1; /* Important for centering text in flex container */
  text-align: center;
}

/* --- MODIFICATIONS END HERE --- */

.supporting-metric-label {
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-bottom: 5px;
  font-weight: 500;
  text-transform: uppercase;
}

.metric {
  font-size: var(--fz-lg);
  color: var(--text-primary);
  margin-bottom: 20px; /* Increased margin for button */
  font-weight: 500;
}

.metric .highlight {
  color: var(--text-primary);
  background-color: var(--highlight-bg);
  padding: 2px 6px; /* Adjust padding for highlight */
  border-radius: var(--border-radius);
}

.metric .small-text {
  display: block;
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-top: 5px;
}

.details-button a {
  display: inline-block;
  text-decoration: none;
  background-color: var(--bg-light);
  color: var(--text-primary);
  border: 1px solid var(--accent-blue-darker);
  padding: 10px 20px;
  font-size: var(--fz-sm);
  font-weight: 500;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.details-button a:hover {
  background-color: var(--accent-blue-darker);
  border-color: var(--accent-blue);
  color: var(--text-on-accent);
}

.details-button .arrow {
  margin-left: 8px;
  font-size: var(--fz-xs);
}

/* Cisco WWT Specifics */
.cisco-wwt h4 {
  margin-bottom: 25px;
}

.cisco-block {
  margin-bottom: 25px;
}
.cisco-block:last-child {
  margin-bottom: 0;
}

.cisco-title {
  font-size: var(--fz-md);
  color: var(--text-primary);
  margin: 0 0 5px 0;
  font-weight: 500;
}

.cisco-desc {
  font-size: var(--fz-sm);
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.cisco-desc .small-text {
  font-size: var(--fz-xs);
  line-height: 1.3;
}

/* Navigation Menu Styles */
.site-navigation {
  background-color: var(
    --bg-medium
  ); /* Slightly different from page bg for distinction */
  padding: 25px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Ensure it stays on top */
  
  box-shadow: none; /* Ensure no shadow initially */
  border-bottom: 1px solid transparent; /* Occupy space, but invisible */

  /* ADDED: Transition for smooth effect */
  transition: all 0.3s ease-in-out;
}

.site-navigation.scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth on scroll */
    border-bottom-color: var(--bg-light); /* Visible border on scroll */
    padding: 15px 0;
  }

.nav-container {
  max-width: 1200px; /* Matches .page-container */
  margin: 0 auto;
  padding: 0 20px; /* Matches .page-container */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo {
  /* font-size: var(--fz-xl); Remove, no longer text */
  /* color: var(--text-primary); Remove, no longer text */
  /* font-weight: 700; Remove, no longer text */
  text-decoration: none;
  display: inline-block; /* Good for link wrapping image */
  transition: opacity 0.3s ease; /* Example transition for image logo */
}

.nav-logo img {
  height: 40px; /* Adjust to your logo's desired height */
  width: auto; /* Maintain aspect ratio */
  display: block; /* Removes extra space below if image is treated as inline */
}

.nav-logo:hover {
  /* color: var(--accent-blue); Remove, no longer text */
  opacity: 0.85; /* Example hover effect for image logo */
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 25px; /* Space between menu items */
}

.nav-menu li a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fz-md);
  font-weight: 500;
  padding: 5px 0; /* Add some vertical padding for easier clicking */
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
  position: relative; /* For underline effect */
}

.nav-menu li a::after {
  /* Underline effect on hover/active */
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  transition: width 0.3s ease;
}

.nav-menu li a:hover,
.nav-menu li a:focus {
  /* Added focus for accessibility */
  color: var(--accent-blue);
}

.nav-menu li a:hover::after,
.nav-menu li a:focus::after {
  width: 100%;
}

.nav-menu li::before {
  display: none;
}

/* Style for mobile menu toggle (hamburger icon) - initially hidden */
.nav-mobile-toggle {
  display: none; /* Hidden by default, shown in media query */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.nav-mobile-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--text-primary);
  margin: 5px 0;
  transition: all 0.3s ease-in-out;
}

.section-break {
  border-top: 1px solid var(--bg-light);
}

.section-break h3 {
  margin-top: 20px;
}

/* START: Styles for New Feature Highlight Section */
.feature-highlight-section {
  display: flex;
  align-items: center; /* Vertically center content if items have different natural heights */
  gap: 50px; /* Space between image and text content, matches solutions-container column-gap */
  padding: 60px 0; /* Vertical padding, similar to other major sections */
  margin-bottom: 50px; /* Space before the next section */
  /* Uncomment to add borders similar to .objectives-section */
  /* border-top: 1px solid var(--bg-light); */
  /* border-bottom: 1px solid var(--bg-light);*/
}

.feature-highlight-image {
  flex: 0 0 40%; /* Image container takes 40% of the width */
  max-width: 450px; /* Optional: Prevent image from becoming excessively large */
}

.feature-highlight-image img {
  width: 100%; /* Make image responsive within its container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove potential extra space below the image */
  border-radius: var(--border-radius); /* Consistent rounded corners */
}

.feature-highlight-content {
  flex: 1; /* Text content takes the remaining available space */
}

.feature-highlight-content h2 {
  font-size: var(--fz-heading-md); /* Matches .objectives-section h2 */
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 20px; /* Space between title and paragraph */
  font-weight: 700;
  line-height: 1.3; /* Consistent line height for headings */
}

.feature-highlight-content p {
  font-size: var(--fz-lg); /* Matches .hero-content .subtitle */
  color: var(--text-secondary);
  margin-bottom: 0; /* Adjust if more paragraphs or elements follow */
  line-height: 1.6; /* Standard line height for readability */
}
/* END: Styles for New Feature Highlight Section */

.grid__poexis_flex {
  gap: 0rem !important;
  justify-content: left !important;
  justify-items: left !important;
}

.objective-item .services-icon {
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
}
.objective-item .services-icon img {
  -webkit-transition: all 0.4s ease-out 0s;
  -moz-transition: all 0.4s ease-out 0s;
  -ms-transition: all 0.4s ease-out 0s;
  -o-transition: all 0.4s ease-out 0s;
  transition: all 0.4s ease-out 0s;
  max-height: 35px;
}

.site-footer {
  background-color: var(--bg-medium);
  color: var(--text-muted); /* Muted text color for footer */
  padding: 30px 0; /* Vertical padding */
  border-top: 1px solid var(--bg-light); /* A slightly darker border than bg-light, or use var(--bg-light) if it's the same as page border */
  font-size: var(--fz-sm); /* Smaller font size for footer text */
  margin: 30px 0 0 0;
}

.footer-container {
  max-width: 1200px; /* Matches .page-container and .nav-container */
  margin: 0 auto;
  padding: 0 20px; /* Matches .page-container and .nav-container */
}

.footer-content {
  display: flex;
  flex-direction: column; /* Stack items vertically on small screens by default */
  justify-content: space-between;
  align-items: center;
  text-align: center; /* Center text for stacked layout */
}

.copyright {
  margin: 0 0 15px 0; /* Space below copyright when stacked */
}

.footer-nav a {
  color: var(--text-muted); /* Muted text color for links */
  text-decoration: none;
  margin: 0 10px; /* Spacing between footer links */
  transition: color 0.3s ease;
}

.footer-nav a:hover {
  color: var(--accent-blue); /* Accent color on hover */
  text-decoration: underline;
}

/* Adjust page content to not be hidden by fixed nav */
body {
  /* ... your existing body styles ... */
  padding-top: 75px; /* Adjust this value based on the actual height of your nav bar */
  /* Height: 15px padding-top + text height + 15px padding-bottom + 1px border ~ 50-60px. 75px gives buffer. */
}

/* Make sure html has smooth scrolling */
html {
  scroll-behavior: smooth;
}

.is--center {
  text-align: center !important;
}

.is--left {
  text-align: start !important;
}

.is--right {
  text-align: end !important;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  /* Tablet and smaller */
  .hero-section {
    flex-direction: column;
    text-align: center;
    padding: 40px 0;
    min-height: auto;
  }
  .hero-content {
    padding-right: 0;
    margin-bottom: 30px;
    max-width: 100%;
  }
  .hero-image-container {
    flex-basis: auto; /* Reset flex-basis */
    width: 80%;
    max-width: 350px; /* Control image size on smaller screens */
    justify-content: center;
    align-self: center;
  }
  .hero-img {
    max-height: 400px; /* Adjust max height */
  }

  .solutions-container {
    grid-template-columns: 1fr; /* Stack solutions */
  }
  .solution-item .network-title {
    margin-top: 0; /* Reset alignment helper on stacked layout */
  }
  .objectives-section h2 {
    text-align: center;
  }

  .feature-highlight-section {
    flex-direction: column; /* Stack image and text vertically */
    gap: 30px; /* Adjust gap for vertical stacking */
    padding: 40px 0; /* Reduce padding for smaller screens */
  }

  .feature-highlight-image {
    flex-basis: auto; /* Reset flex-basis for stacked layout */
    width: 80%; /* Adjust width of the image when stacked */
    max-width: 400px; /* Cap image width on smaller screens */
    margin-left: auto; /* Center the image */
    margin-right: auto; /* Center the image */
  }

  .feature-highlight-content {
    text-align: center; /* Center the heading */
  }
  .feature-highlight-content p {
    text-align: left; /* Keep paragraphs left-aligned for readability */
    /* Or text-align: center; if you prefer fully centered text */
  }
}

@media (max-width: 768px) {
  /* Mobile */
  .hero-content h1 {
    font-size: var(--fz-heading-md);
  }
  .hero-content .subtitle {
    font-size: var(--fz-md);
  }

  .objectives-grid {
    grid-template-columns: 1fr; /* Stack objectives */
  }

  .objectives-section h2 {
    font-size: var(--fz-heading-sm);
  }
  .solution-item h3,
  .solution-item h4 {
    font-size: 1.5rem;
  }

  .feature-highlight-content h2 {
    font-size: var(--fz-heading-sm); /* Slightly smaller heading for mobile */
  }

  .feature-highlight-content p {
    font-size: var(--fz-md); /* Slightly smaller paragraph text for mobile */
  }

  .feature-highlight-image {
    width: 90%; /* Allow image to be a bit wider on very small screens */
  }

  .nav-menu {
    display: none; /* Hide the menu items by default */
    flex-direction: column; /* Stack them vertically */
    position: absolute;
    top: 100%; /* Position below the nav bar */
    left: 0;
    width: 100%;
    background-color: var(--bg-medium);
    padding: 15px 0;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    border-top: 1px solid var(--bg-light);
  }

  .nav-menu.active {
    /* Class to show the menu */
    display: flex;
  }

  .nav-menu li {
    text-align: center;
    padding-left: 0;
    margin: 0; /* Reset horizontal margins */
  }

  .nav-menu li a {
    display: block; /* Make links take full width */
    /*padding: 12px 20px;*/
    width: 100%;
    border-bottom: 1px solid var(--bg-light); /* Separator for items */
  }
  .nav-menu li:last-child a {
    border-bottom: none;
  }

  .nav-menu li a::after {
    /* Remove underline effect for mobile dropdown */
    display: none;
  }

  .nav-mobile-toggle {
    display: block; /* Show the hamburger icon */
  }

  /* Hamburger animation to X */
  .nav-mobile-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav-mobile-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .footer-content {
    flex-direction: column; /* Align items in a row on larger screens */
    text-align: left; /* Align text to the left for row layout */
}

.copyright {
    margin: 0; /* Reset bottom margin when in a row */
}

.footer-nav {
    text-align: right; /* Align nav links to the right */
}
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--accent-blue-darker);
  text-decoration: none;
  display: inline-block;
}