.elementor-1842 .elementor-element.elementor-element-211b098{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-f20b0ab{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-ef13d30{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-5b2f28e{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-997cbef{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-153bccb{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-1864b0f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-12f4552{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-b47b36c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1842 .elementor-element.elementor-element-2e65da5{--grid-columns:1;}.elementor-1842 .elementor-element.elementor-element-2e65da5 > .elementor-widget-container{padding:0px 0px 0px 0112px;}.elementor-1842 .elementor-element.elementor-element-2e65da5.elementor-element{--align-self:stretch;}.elementor-1842 .elementor-element.elementor-element-a971cb3{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-1842 .elementor-element.elementor-element-b47b36c{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-2e65da5{--grid-columns:1;}.elementor-1842 .elementor-element.elementor-element-2e65da5 > .elementor-widget-container{padding:0px 0px 0px 040px;}}@media(max-width:767px){.elementor-1842 .elementor-element.elementor-element-b47b36c{--justify-content:center;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1842 .elementor-element.elementor-element-2e65da5{--grid-columns:1;width:100%;max-width:100%;}.elementor-1842 .elementor-element.elementor-element-2e65da5 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-1842 .elementor-element.elementor-element-2e65da5.elementor-element{--align-self:stretch;}}/* Start custom CSS for html, class: .elementor-element-748e32e *//* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Sora:wght@600&display=swap');

/* =========================================
   Desktop Layout (Exact Figma Specs)
   ========================================= */

.hero-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 0px 0px 112px;
  gap: 27px;
  width: 100%;
  max-width: 1440px; /* Max-width allows it to be responsive on huge screens */
  height: 641.48px;
  background: #FDFDFD;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
  
  /* Entrance Animation */
  animation: fadeInContainer 0.8s ease-out forwards;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0px;
  gap: 40px;
  width: 559.66px;
  height: auto; 
  flex: none;
  order: 0;
  z-index: 2; /* Keeps text above background gradient */
  
  /* Entrance Animation */
  opacity: 0;
  animation: slideUpContent 1s ease-out 0.2s forwards;
}

.hero-title {
  width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 50px;
  line-height: 53px; /* 106% */
  letter-spacing: -1.1582px;
  color: #171717;
}

/* Added gradient text based on Figma visual */
.highlight-text {
  background: linear-gradient(104.58deg, #FF8A00 0%, #EB1600 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  width: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px; /* 175% */
  letter-spacing: -0.3125px;
  color: #525252;
}

.hero-btn-frame {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  gap: 12px;
}

.hero-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  gap: 8px;
  width: 127px;
  height: 46px;
  background: linear-gradient(104.58deg, #FF8A00 0%, #EB1600 100%);
  border-radius: 8px;
  font-family: 'Sora', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 22px;
  color: #FFFFFF;
  text-decoration: none;
  transition: all 0.3s ease; /* Hover Transition Setup */
}

/* Hover Clickable Animation */
.hero-button:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 8px 20px rgba(235, 22, 0, 0.25);
  cursor: pointer;
}

.hero-image {
  width: 741.34px;
  height: 641.48px;
  flex: none;
  order: 1;
  /* Gradient over image as specified in Figma CSS */
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 0, 0, 0) 100%), 
              url('https://automationcoe.com/wp-content/uploads/2026/07/Hero.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Entrance Animation */
  opacity: 0;
  animation: fadeInImage 1.2s ease-out 0.4s forwards;
}


/* =========================================
   Animations (Entrance)
   ========================================= */

@keyframes fadeInContainer {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUpContent {
  from { 
    opacity: 0; 
    transform: translateY(40px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes fadeInImage {
  from { 
    opacity: 0;
    transform: translateX(30px);
  }
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}


/* =========================================
   Responsive Design (Tablet & Mobile)
   ========================================= */

/* Tablet view (Max-width: 1024px) */
@media (max-width: 1024px) {
  .hero-container {
    flex-direction: column;
    padding: 60px 40px;
    height: auto; /* Remove fixed height */
    text-align: center; /* Center align for tablet */
  }

  .hero-content {
    width: 100%;
    max-width: 600px;
    align-items: center; /* Center items inside flex */
  }

  .hero-title {
    font-size: 40px;
    line-height: 46px;
  }

  .hero-image {
    width: 100%;
    max-width: 700px;
    height: 450px;
    border-radius: 12px;
    /* Remove the white gradient fade on tablet as it stacks vertically */
    background: url('https://automationcoe.com/wp-content/uploads/2026/07/Hero.webp');
    background-size: cover;
    background-position: center;
  }
}

/* Mobile view (Max-width: 768px) */
@media (max-width: 768px) {
  .hero-container {
    padding: 40px 20px;
    gap: 30px;
  }

  .hero-content {
    gap: 24px;
  }

  .hero-title {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.5px;
  }

  .hero-description {
    font-size: 15px;
    line-height: 24px;
  }

  .hero-image {
    height: 300px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3230494 *//* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =========================================
   Desktop Layout (Using CSS Grid Mapping)
   ========================================= */

.overview-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-areas:
    "img header"
    "img paragraphs"
    "img challenges";
  align-content: center;
  gap: 0px 40px; /* Row gap 0, Column gap 40px */
  padding: 80px 112px;
  width: 100%;
  max-width: 1440px;
  min-height: 742.6px;
  background: #FAFAFA;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* Grid Area Assignments */
.overview-image-wrapper { grid-area: img; }
.overview-header-group { grid-area: header; padding-bottom: 16px; }
.overview-paragraphs { grid-area: paragraphs; }
.challenges-section { grid-area: challenges; }

/* Content Styling */
.overview-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 439.99px;
  /* Updated Background Image URL */
  background-image: url('https://automationcoe.com/wp-content/uploads/2026/07/Overview.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* The bulletproof border-radius */
  border-radius: 25px !important; 
  -webkit-border-radius: 25px !important;
  -moz-border-radius: 25px !important;
  overflow: hidden !important; 
  
  /* This specifically forces Chrome/Safari to clip the corners during the entrance animation */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
  
  opacity: 0;
  animation: slideInLeft 1s ease-out forwards;
}

/* Catch-all just in case an <img> tag is being generated by WordPress */
.overview-image-wrapper img {
  border-radius: 25px !important;
  -webkit-border-radius: 25px !important;
  overflow: hidden !important;
  object-fit: cover;
}

.overview-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2.4px;
  color: #EB1600;
  display: block;
  margin-bottom: 12px;
}

.overview-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.350859px;
  color: #171717;
  margin: 0;
}

.overview-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overview-paragraphs p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.3125px;
  color: #525252;
  margin: 0;
}

.challenges-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 0px 0px;
  margin-top: 32px;
  border-top: 0.633113px solid rgba(0, 0, 0, 0.07);
}

.challenges-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 18px;
  color: #121212;
  margin: 0 0 16px 0;
}

.challenges-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0; margin: 0;
  list-style: none;
}

.challenge-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  transition: transform 0.3s ease;
}

.challenge-item:hover { transform: translateX(5px); }

.challenge-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19.99px;
  height: 19.99px;
  background: #FFF1F2;
  box-shadow: 0px 0px 0px 1px #FFCCD3;
  border-radius: 8px;
  flex: none;
  margin-top: 2px;
}

.challenge-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 23px;
  letter-spacing: -0.150391px;
  color: #525252;
}

/* =========================================
   Animations
   ========================================= */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* =========================================
   Responsive Design (Tablet & Mobile)
   ========================================= */

/* Tablet view (Max-width: 1024px) */
@media (max-width: 1024px) {
  .overview-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "header header"
      "paragraphs paragraphs"
      "challenges img";
    padding: 60px 40px;
    gap: 32px 40px; 
    min-height: auto;
  }

  .overview-image-wrapper {
    height: 100%;
    min-height: 280px; 
  }

  .overview-title {
    font-size: 32px;
    line-height: 38px;
  }
  
  .challenges-section {
    margin-top: 0; 
    padding-top: 0; 
    border-top: none; 
  }
}

/* Mobile view (Max-width: 768px) */
@media (max-width: 768px) {
  .overview-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "paragraphs"
      "img"
      "challenges";
    padding: 40px 20px;
    gap: 24px;
  }

  .overview-image-wrapper {
    height: 250px;
    min-height: auto;
  }

  .overview-title {
    font-size: 28px;
    line-height: 34px;
  }

  .overview-paragraphs p {
    font-size: 15px;
    line-height: 26px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-0ef74d4 *//* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =========================================
   Desktop Layout (Exact Figma Specs)
   ========================================= */

.approach-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 80px 112px;
  width: 100%;
  max-width: 1440px;
  background: #FFFFFF;
  margin: 0 auto;
  box-sizing: border-box;
  gap: 60px;
  overflow: hidden;
}

/* Left Content Column */
.approach-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 362.67px;
  flex: none;
  position: sticky;
  top: 100px; /* Keeps the left content visible while scrolling the timeline */
  
  /* Entrance Animation */
  opacity: 0;
  animation: fadeInSlideLeft 0.8s ease-out forwards;
}

.approach-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.approach-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2.4px;
  color: #EB1600;
  margin-bottom: 12px;
}

.approach-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.350859px;
  color: #171717;
  margin: 0 0 16px 0;
}

.approach-description {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: -0.234375px;
  color: #525252;
  margin: 0;
}

/* Legend Styling */
.approach-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 24px;
  margin-top: 28px;
  gap: 12px;
  width: 100%;
  border-top: 0.633113px solid rgba(0, 0, 0, 0.07);
}

.legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.0761719px;
  color: #121212;
}

/* Timeline Column */
.approach-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  max-width: 789.34px;
  padding-left: 42px;
}

/* The Vertical Gradient Line */
.timeline-line {
  position: absolute;
  width: 2px;
  height: 100%;
  left: 14.99px;
  top: 24px;
  background: linear-gradient(180deg, #FCA5A5 0%, #FF8A00 20%, #E5E7EB 50%, #22D3EE 80%, #34D399 100%);
  z-index: 1;
}

/* Individual Timeline Step */
.timeline-step {
  position: relative;
  margin-bottom: 32px;
  z-index: 2;
  
  /* Entrance Animation Start State */
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpFade 0.7s ease-out forwards;
}

/* Staggered Animation Delays */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.5s; }
.delay-5 { animation-delay: 0.6s; }
.delay-6 { animation-delay: 0.7s; }

/* Timeline Dot */
.timeline-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  left: -31.99px; /* Pulls it perfectly onto the timeline line */
  top: 26px;      /* Aligns with the Step Label */
  border-radius: 50%;
  box-shadow: 0px 0px 0px 2px #FFFFFF;
  z-index: 3;
  transition: transform 0.3s ease;
}

/* Timeline Card */
.timeline-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover Animation on Cards */
.timeline-step:hover .timeline-card {
  transform: translateY(-4px);
  box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px rgba(0, 0, 0, 0.06);
}
.timeline-step:hover .timeline-dot {
  transform: scale(1.3);
}

/* Typography inside Cards */
.step-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  line-height: 16.5px;
  letter-spacing: 2.04445px;
  margin-bottom: 6px;
}

.step-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 25.5px;
  letter-spacing: -0.86px;
  color: #171717;
  margin: 0 0 8px 0;
}

.step-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: -0.15px;
  color: #525252;
  margin: 0;
}

/* Background Colors & Dot Variables */
.bg-pink { background: #FF637E; }
.bg-orange { background: #FF8A00; }
.bg-cyan { background: #00D3F3; }
.bg-green { background: #00D492; }

.dot-pink { background: #FF637E; }
.dot-orange { background: #FF8A00; }
.dot-gray-light { background: #A1A1A1; }
.dot-gray-dark { background: #737373; }
.dot-green { background: #00D492; }

.card-pink { background: #FFF1F2; }
.card-orange { background: #FFF7ED; }
.card-gray { background: #F5F5F5; }
.card-white { background: #FFFFFF; }
.card-green { background: #ECFDF5; }

.text-pink { color: #FF2056; }
.text-orange { color: #FF8A00; }
.text-black { color: #121212; }
.text-gray { color: #737373; }
.text-green { color: #009966; }


/* =========================================
   Animations
   ========================================= */

@keyframes fadeInSlideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================
   Responsive Design (Tablet & Mobile)
   ========================================= */

/* Tablet view (Max-width: 1024px) */
@media (max-width: 1024px) {
  .approach-container {
    flex-direction: column;
    padding: 60px 40px;
    gap: 40px;
  }

  .approach-content {
    max-width: 100%;
    position: relative;
    top: 0;
  }

  .approach-title {
    font-size: 32px;
    line-height: 38px;
  }

  .approach-timeline {
    padding-left: 32px;
    max-width: 100%;
  }

  .timeline-line {
    left: 4.99px;
  }
}

/* Mobile view (Max-width: 768px) */
@media (max-width: 768px) {
  .approach-container {
    padding: 40px 20px;
  }

  .approach-title {
    font-size: 28px;
    line-height: 34px;
  }

  .approach-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .timeline-step {
    margin-bottom: 24px;
  }

  .timeline-card {
    padding: 16px;
  }

  .step-title {
    font-size: 16px;
    line-height: 24px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-49ceab4 *//* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================
   Desktop Layout (Exact Figma Specs)
   ========================================= */

.capabilities-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 112px;
  width: 100%;
  max-width: 1440px;
  background: #FAFAFA;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header Styling */
.capabilities-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
  margin-bottom: 56px;
  
  /* Entrance Animation */
  opacity: 0;
  animation: fadeDown 0.8s ease-out forwards;
}

.cap-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2.4px;
  color: #EB1600;
  margin-bottom: 12px;
}

.cap-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 43px;
  letter-spacing: -0.428906px;
  color: #171717;
  margin: 0;
}

/* Grid Layout */
.capabilities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  width: 100%;
  max-width: 1216.01px;
}

/* Individual Card Setup */
.cap-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
  transition: transform 0.3s ease, background 0.3s ease;
  
  /* Entrance Animation Initial State */
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpFade 0.8s ease-out forwards;
}

/* Hover Animation - Subtle background and lift effect */
.cap-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  cursor: default;
}

/* Specific Figma Borders and Padding for the "Inner Cross" effect */
.card-1 {
  padding: 32px 48px 48px 0px;
  border-right: 0.633113px solid rgba(0, 0, 0, 0.06);
  border-bottom: 0.633113px solid rgba(0, 0, 0, 0.06);
}

.card-2 {
  padding: 32px 0px 48px 48px;
  border-bottom: 0.633113px solid rgba(0, 0, 0, 0.06);
}

.card-3 {
  padding: 48px 48px 32px 0px;
  border-right: 0.633113px solid rgba(0, 0, 0, 0.06);
}

.card-4 {
  padding: 48px 0px 32px 48px;
}

/* Number Block (01, 02, etc.) */
.cap-number {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, rgba(255, 138, 0, 0.12) 0%, rgba(235, 22, 0, 0.06) 100%);
  border-radius: 10px;
  flex: none;
  margin-top: 2px;
  
  /* Number Typography */
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.0761719px;
  color: #F65D00;
}

/* Content Area inside Cards */
.cap-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
}

.cap-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.89px;
  color: #171717;
  margin: 0 0 8px 0;
}

.cap-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: -0.15px;
  color: #525252;
  margin: 0 0 16px 0;
}

/* Bullet List */
.cap-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cap-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.0761719px;
  color: #737373;
}

/* Orange Bullet Dot */
.cap-list li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: #FF8A00;
  border-radius: 50%;
  flex: none;
}


/* =========================================
   Animations
   ========================================= */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Staggered Delays for Grid Cards */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }


/* =========================================
   Responsive Design (Tablet & Mobile)
   ========================================= */

/* Tablet view (Max-width: 1024px) */
@media (max-width: 1024px) {
  .capabilities-container {
    padding: 60px 40px;
  }
  
  /* We keep grid-template-columns: 1fr 1fr; from desktop so it stays 2 columns */
  
  /* Slightly reduce inner horizontal padding on tablet so text fits better */
  .card-1 { padding: 32px 24px 48px 0px; }
  .card-2 { padding: 32px 0px 48px 24px; }
  .card-3 { padding: 48px 24px 32px 0px; }
  .card-4 { padding: 48px 0px 32px 24px; }
}

/* Mobile view (Max-width: 768px) */
@media (max-width: 768px) {
  .capabilities-container {
    padding: 40px 20px;
  }

  /* NOW it switches to 1 column for mobile phones */
  .capabilities-grid {
    grid-template-columns: 1fr; 
  }

  /* Reset the complex desktop inner-borders for a standard stacked layout */
  .card-1, .card-2, .card-3, .card-4 {
    padding: 32px 0;
    border-right: none; 
  }

  /* Keep bottom borders for all except the last one to separate them */
  .card-1, .card-2, .card-3 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  /* Remove hover background shift on mobile */
  .cap-card:hover {
    background: transparent;
  }

  .cap-title {
    font-size: 32px;
    line-height: 38px;
  }

  .cap-card {
    flex-direction: column; /* Stack the icon above the text on small phones */
    gap: 16px;
  }
  
  .cap-number {
    margin-top: 0;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-09c4976 *//* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================
   Desktop Layout (Exact Figma Specs)
   ========================================= */

.value-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 112px;
  width: 100%;
  max-width: 1440px;
  background: #FFFFFF;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header */
.value-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 600px;
  margin-bottom: 64px;
  
  /* Entrance Animation */
  opacity: 0;
  animation: fadeDown 0.8s ease-out forwards;
}

.value-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2.4px;
  color: #EB1600;
  margin-bottom: 12px;
}

.value-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 43px;
  letter-spacing: -0.428906px;
  color: #171717;
  margin: 0 0 16px 0;
}

.value-description {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.3125px;
  color: #525252;
  margin: 0;
}

/* Grid Wrapper */
.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  width: 100%;
  max-width: 1216.01px;
  position: relative;
}

/* The Horizontal Line Divider from Figma */
.grid-divider-x {
  position: absolute;
  width: 100%;
  height: 1px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #E5E5E5 0%, #F5F5F5 50%, rgba(0, 0, 0, 0) 100%);
  z-index: 0;
}

/* Base Card Styling */
.val-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
  
  /* Entrance Animation */
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpFade 0.8s ease-out forwards;
}

.val-card:hover {
  transform: translateY(-5px);
}

/* Specific Grid Alignments and Borders */
.card-top-left {
  padding: 0px 48px 40px 0px;
  border-right: 0.633113px solid rgba(0, 0, 0, 0.07);
}

.card-top-right {
  padding: 0px 0px 40px 48px;
}

.card-bottom-left {
  padding: 40px 48px 0px 0px;
  border-right: 0.633113px solid rgba(0, 0, 0, 0.07);
}

/* The 100% block is specifically aligned right in Figma */
.card-bottom-right {
  padding: 40px 0px 0px 48px;
  align-items: flex-start;
  text-align: left;
}

/* Number Typography */
.val-number {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  margin: 0;
  line-height: 100%;
}

.num-gradient {
  font-size: 72px;
  letter-spacing: -2.75695px;
  background: linear-gradient(135deg, #FF8A00 0%, #EB1600 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.num-black {
  font-size: 72px;
  letter-spacing: -2.75695px;
  color: #171717;
}

.num-small {
  font-size: 56px;
  letter-spacing: -1.93922px;
  color: #171717;
}

/* Headings and Descriptions */
.val-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.95px;
  color: #171717;
  margin: 12px 0 8px 0;
}

.val-heading-small {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px; /* Slightly smaller per Figma for bottom row */
  line-height: 27px;
  letter-spacing: -0.89px;
  color: #171717;
  margin: 12px 0 8px 0;
}

.val-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: -0.15px;
  color: #737373;
  margin: 0;
  max-width: 380px; /* Constrains text width like Figma */
}


/* =========================================
   Animations
   ========================================= */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }


/* =========================================
   Responsive Design (Tablet & Mobile)
   ========================================= */

/* Tablet view (Max-width: 1024px) */
@media (max-width: 1024px) {
  .value-container {
    padding: 60px 40px;
  }
  
  /* Kept 2 columns (1fr 1fr inherits from desktop automatically) and horizontal divider line */
  
  /* Slightly scaled down horizontal padding inside the columns to ensure text fits cleanly on tablets without overlapping */
  .card-top-left { padding: 0px 24px 32px 0px; }
  .card-top-right { padding: 0px 0px 32px 24px; }
  .card-bottom-left { padding: 32px 24px 0px 0px; }
  .card-bottom-right { padding: 32px 0px 0px 24px; }
}

/* Mobile view (Max-width: 768px) */
@media (max-width: 768px) {
  .value-container {
    padding: 40px 20px;
  }

  .value-title {
    font-size: 32px;
    line-height: 38px;
  }

  /* NOW it switches to 1 column for mobile */
  .value-grid {
    grid-template-columns: 1fr; 
  }

  .grid-divider-x {
    display: none; /* Hide the complex gradient line on mobile */
  }

  /* Reset layout for single column stacking vertically on mobile */
  .card-top-left, .card-top-right, .card-bottom-left, .card-bottom-right {
    padding: 40px 0;
    border-right: none;
    align-items: center; /* Center everything */
    text-align: center;
  }

  .val-desc {
    max-width: 100%;
  }

  /* Add standard bottom borders to visually separate items vertically on mobile */
  .card-top-left, .card-top-right, .card-bottom-left {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  }
  
  .num-gradient, .num-black {
    font-size: 56px; /* Normalize number sizes for mobile */
  }
  
  .num-small {
    font-size: 48px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-8e62856 *//* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =========================================
   Desktop Layout (Exact Figma Specs)
   ========================================= */

.use-cases-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 112px;
  width: 100%;
  max-width: 1440px;
  background: #FAFAFA;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header */
.use-cases-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 600px;
  margin-bottom: 48px;
  
  /* Entrance Animation */
  opacity: 0;
  animation: fadeDown 0.8s ease-out forwards;
}

.uc-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2.4px;
  color: #EB1600;
  margin-bottom: 8px;
}

.uc-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 43px;
  letter-spacing: -0.428906px;
  color: #171717;
  margin: 0;
}

/* Grid Layout */
.use-cases-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 Columns on Desktop & Tablet */
  gap: 24px;
  width: 100%;
  max-width: 1216px;
}

/* Card Styling */
.uc-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 24px;
  gap: 20px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1); 
  border-radius: 14px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  
  /* Entrance Animation */
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpFade 0.8s ease-out forwards;
}

/* Hover Animation */
.uc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 12px 24px -8px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.15);
  cursor: default;
}

/* Badge (All Industries) */
.uc-badge-wrapper {
  flex: none;
}

.uc-badge {
  display: inline-block;
  padding: 8px 12px;
  background: #FFF3E5;
  border-radius: 32px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.0644531px;
  color: #FF8A00;
  white-space: nowrap;
}

/* Content */
.uc-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 1;
}

.uc-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.71px;
  color: #171717;
  margin: 0 0 8px 0;
}

.uc-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 22.75px;
  letter-spacing: -0.15px;
  color: #737373;
  margin: 0;
}


/* =========================================
   Animations
   ========================================= */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.5s; }


/* =========================================
   Responsive Design (Tablet & Mobile)
   ========================================= */

/* Tablet view (Max-width: 1024px) */
@media (max-width: 1024px) {
  .use-cases-container {
    padding: 60px 40px;
  }
  
  /* We keep grid-template-columns: 1fr 1fr; from desktop so it stays 2 columns! */
}

/* Mobile view (Max-width: 768px) */
@media (max-width: 768px) {
  .use-cases-container {
    padding: 40px 20px;
  }

  /* NOW it switches to 1 column for mobile phones */
  .use-cases-grid {
    grid-template-columns: 1fr; 
  }

  .uc-title {
    font-size: 32px;
    line-height: 38px;
  }

  .uc-card {
    flex-direction: column; /* Stack the badge on top of the text */
    gap: 16px;
    padding: 20px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-42275e2 *//* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* =========================================
   Desktop Layout (Exact Figma Specs)
   ========================================= */

.case-studies-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 112px;
  width: 100%;
  max-width: 1440px;
  background: #FFFFFF;
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

/* Header Styling */
.cs-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 40px;
  
  /* Entrance Animation */
  opacity: 0;
  animation: fadeDown 0.8s ease-out forwards;
}

.cs-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 2.4px;
  color: #EB1600;
  margin-bottom: 8px;
}

.cs-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 35px;
  letter-spacing: -0.23375px;
  color: #171717;
  margin: 0;
}

/* Grid Layout */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 Columns */
  gap: 20px;
  width: 100%;
  max-width: 1216px;
}

/* Individual Card Styling */
.cs-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  box-sizing: border-box;
  transition: all 0.3s ease;
  overflow: hidden;
  
  /* Entrance Animation */
  opacity: 0;
  transform: translateY(30px);
  animation: slideUpFade 0.8s ease-out forwards;
}

/* Hover Effect */
.cs-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 15px 30px -10px rgba(0, 0, 0, 0.1), 0px 0px 0px 1px rgba(0, 0, 0, 0.07);
}

/* Card Image Section */
.cs-image-wrapper {
  position: relative;
  width: 100%;
  height: 160px;
}

.cs-image-bg {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.img-banking {
  background-image: url('https://automationcoe.com/wp-content/uploads/2026/07/Banking.webp');
}

.img-healthcare {
  background-image: url('https://automationcoe.com/wp-content/uploads/2026/07/Enterprise-IT.webp');
}

.cs-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(23, 23, 23, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
}

.cs-badge {
  position: absolute;
  left: 16px;
  bottom: 14px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 30px;
  padding: 3px 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #FFFFFF;
}

/* Card Content Section */
.cs-content {
  display: flex;
  flex-direction: column;
  padding: 24px;
  flex-grow: 1;
}

.cs-card-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 26px;
  letter-spacing: -0.856641px;
  color: #171717;
  margin: 0 0 12px 0;
}

.cs-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.cs-outcome-section {
  border-top: 0.633113px solid rgba(0, 0, 0, 0.06);
  padding-top: 12px;
  margin-top: 8px; /* Slight offset to group nicely */
}

.cs-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 1.82445px;
  color: #A1A1A1;
  text-transform: uppercase;
}

.text-orange {
  color: #FF8A00;
}

.cs-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 21px;
  letter-spacing: -0.0761719px;
  color: #525252;
  margin: 4px 0 12px 0;
}

.cs-bold {
  font-weight: 500;
  color: #171717;
}

/* Link Styling */
.cs-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  letter-spacing: -0.0761719px;
  color: #FF8A00;
  text-decoration: none;
  transition: opacity 0.3s ease;
  width: fit-content;
}

.cs-link:hover {
  opacity: 0.7;
}


/* =========================================
   Animations
   ========================================= */

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }


/* =========================================
   Responsive Design (Tablet & Mobile)
   ========================================= */

/* Tablet view (Max-width: 1024px) */
@media (max-width: 1024px) {
  .case-studies-container {
    padding: 60px 40px;
  }
  
  /* Inherits 1fr 1fr from desktop so it stays 2 columns! */
}

/* Mobile view (Max-width: 768px) */
@media (max-width: 768px) {
  .case-studies-container {
    padding: 40px 20px;
  }

  /* NOW it switches to 1 column for mobile */
  .cs-grid {
    grid-template-columns: 1fr; 
  }

  .cs-title {
    font-size: 28px;
    line-height: 34px;
  }

  .cs-card-title {
    font-size: 16px;
  }
  
  .cs-desc {
    font-size: 14px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1ce7154 *//* ==========================================================================
   RESPONSIVE DESIGN: FAQ TEXT OVERFLOW FIX (OVERRIDE)
   ========================================================================== */

@media screen and (max-width: 768px) {
  /* 1. Force the question text to wrap to the next line */
  #coe-faq-root .faq-question h4 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    flex: 1 !important; /* Tells the text to take available space but no more */
    padding-right: 16px !important; /* Creates a breathing gap before the plus icon */
    line-height: 1.4 !important;
  }

  /* 2. Push the items to align at the top instead of center */
  /* (This ensures the + icon stays at the top when the text wraps to 2-3 lines) */
  #coe-faq-root .faq-question {
    align-items: flex-start !important;
    padding: 20px 0 !important;
  }

  /* 3. Protect the plus icon from shrinking or being pushed off-screen */
  #coe-faq-root .faq-icon {
    flex-shrink: 0 !important;
    margin-top: 2px !important; /* Slight nudge to visually align with the first line of text */
  }
}/* End custom CSS */