/* --- General Body & Typography Reset (to ensure consistency) --- */
body {
     /* Recommended clean font stack */
    color: #333;
    line-height: 1.6;
    background-color: #ffffff; /* Ensure background is white/light */
}

/* --- Main Page Content Container Styling --- */
.page_content {
    /* Ensures content is contained and has consistent background */
    background-color: #ffffff; 
}

/* --- Heading Styles (to define a visual hierarchy) --- */
.page_content h1, .page_content h2, .page_content h3, .page_content h4 {
    color: #2c3e50; /* Darker, professional color */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.page_content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    border-left: 5px solid #3498db; /* Blue accent line */
    padding-left: 15px;
}

.page_content h4 {
    font-size: 1.3rem;
    font-weight: 500;
    color: #3498db; /* Main accent color */
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

/* --- Paragraph Styles --- */
.page_content p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* --- List Styling (for all the capability/application lists) --- */
.page_content ul {
    list-style: none; /* Remove default bullets */
    padding-left: 0; /* Remove default left padding */
    margin-bottom: 1.5rem;
}

.page_content ul li {
    position: relative;
    padding-left: 25px; /* Space for the custom icon */
    margin-bottom: 10px;
    font-size: 1rem;
    line-height: 1.5;
}

/* Custom bullet/icon using pseudo-element */
.page_content ul li::before {
    content: "\2713"; /* Unicode for a checkmark (✓) */
    font-family: 'Font Awesome 5 Free', 'Font Awesome'; /* Use Font Awesome if available, or just the checkmark */
    font-weight: 900;
    color: #2ecc71; /* Green color for validation/bullet */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1rem;
}

/* --- Two-Column Layout (for capabilities section) --- */
.two-column-layout {
    margin-top: 20px;
}

.services-column, .industries-column {
    padding: 15px;
}

/* --- Card Image Fix (to ensure images in the Bootstrap cards look good) --- */
.card-img-fixed {
    /* Center the image within the available space */
    object-fit: contain !important; 
    padding: 10px;
}

/* Optional: Make list items within a card less prominent */
.card ul li::before {
    content: '\2022'; /* Simple dot marker for lists inside cards */
    color: #95a5a6;
}

/* --- Container Spacing (for better visual separation) --- */
.why-smt-container,
.highlights-container,
.Why-cadamps-container,
.how-container,
.Application-container {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px dashed #eee;
}

.Application-container {
    border-bottom: 1px dashed #eee;
    padding-bottom: 20px;
    margin-bottom: 30px;
}
.card {
  border: none;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.card:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 20px 35px rgba(0,0,0,0.15);
}
.card img {
  width: 100%;
  border-bottom: 2px solid #3498db;
  transition: transform 0.4s ease;
}
.card:hover img {
  transform: scale(1.05);
}

a.main-cta {
  display: inline-block;
  padding: 14px 34px;
  color: #fff;
  background: linear-gradient(90deg, #3498db 0%, #2980b9 100%);
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-decoration: none;
  box-shadow: 0 5px 20px rgba(52,152,219,0.4);
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

/* Subtle shine animation on hover */
a.main-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75px;
  width: 50px;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-25deg);
  transition: 0.75s;
}

a.main-cta:hover::before {
  left: 120%;
}

a.main-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(52,152,219,0.6);
  background: linear-gradient(90deg, #4aa3df 0%, #1d6fa5 100%);
}

a.main-cta:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(52,152,219,0.5);
}
a.main-cta.outline {
  background: transparent;
  color: #3498db;
  border: 2px solid #3498db;
  box-shadow: none;
}

a.main-cta.outline:hover {
  background: #3498db;
  color: #fff;
  box-shadow: 0 5px 20px rgba(52,152,219,0.4);
}