@charset "utf-8";
:root{
    --primary-color:#004a99;
    --secondary-color:#007bff;
    --accent-color:#f9e547;
    --dark-text:#333333;
    --light-text:#ffffff;
    --section-bg:#f9f9f9;
    --border-color:#dddddd;
    --font-heading:'Poppins',sans-serif;
    --font-body:'Roboto',sans-serif;
    
    /* Workflow CSS Variables */
    --cdmos-primary-color: #005a9c;
    --cdmos-secondary-color: #003366;
    --cdmos-text-primary-color: #333333;
    --cdmos-text-secondary-color: #555555;
    --cdmos-border-color: #dee2e6;
    --cdmos-card-background-color: #ffffff;
    
    /* FAQ Colors based on FAQs-1.html */
    --faq-primary: #1a56db;
    --faq-secondary: #0f172a;
    --faq-neutral-dark: #e2e8f0;
  }
  .v2-container,.container{max-width:1300px !important;margin:0 auto;padding:0 20px;line-height:1.7;}
  @media (min-width: 1300px){
      .container{
     width: 1300px;
}
  }
  
  .v2-container a{
      color:var(--secondary-color) ;
  }
  .v2-container a:hover, .v2-container a:hover *{
      color:var(--secondary-color) !important;
      text-decoration:underline;
  }
  .section{padding:80px 0}
  .section-bg{background-color:var(--section-bg)}
  .section-header{text-align:center;margin-bottom:40px}
  .section-header h2{font-family:var(--font-heading);font-size:2.5rem;color:var(--primary-color);margin-bottom:10px}
  .section-header p{font-size:1.1rem;color:#555;max-width:800px;margin:0 auto}
  .grid-container{display:grid;gap:30px}


  .cdmos-btn-inquiry-now{
    background-color:var(--accent-color);color:var(--dark-text);padding:10px 25px;border-radius:5px;
    font-weight:700;text-decoration:none;transition:background-color .3s;cursor:pointer;
    color:var(--dark-text) !important;
  }
  .cdmos-btn-inquiry-now:hover{background-color:#e0c344;color:var(--light-text) !important;text-decoration:none;}

  .cdmos-btn{display:inline-block;padding:14px 32px;font-family:var(--font-heading);
    font-weight:600;text-decoration:none;border-radius:8px;transition:all .3s;border:2px solid transparent;cursor:pointer}
  .cdmos-btn-primary,a.cdmos-btn-primary{text-decoration:none;background-color:var(--accent-color);color:var(  --dark-text);}
  .cdmos-btn-primary:hover,a.cdmos-btn-primary:hover{background:#e0c344;transform:translateY(-3px);box-shadow:0 4px 15px rgba(243,224,78,.5);color:var(--dark-text); text-decoration: none;}


  /* 1. Banner Full-width & Low Vertical Space (MODIFIED) */
  .hero {
    background:linear-gradient(rgba(0,74,153,.85),rgba(60,0,153,.50)), url('../img/Antibody-CDMO-Solutions-6.jpg') center/cover no-repeat;
    color:var(--light-text);
    padding: 100px 0; /* Reduced padding */
    display:flex;
    align-items:center;
    min-height: 35vh; /* Reduced vertical space */
  }
  .hero-layout{
      display: flex;
      align-items:center;
      gap: 30px;
  } 
  .hero-content-left{
      flex: 1 1 55%; 
      text-align: left; 
      max-width: 100%;
  }
  .hero-content-right {
      flex: 1 1 45%;
      /* Placeholder for potential image or diagram on the right */
      display: none; /* Hidden by default or for text-only content */
  }
  @media (min-width: 992px) {
      .hero-layout {
          flex-direction: row; 
      }
      .hero-content-left {
          margin-right: 0;
      }
  }
  @media (max-width: 991px) {
      .hero-layout {
          flex-direction: column;
          align-items: flex-start;
      }
  }
  .hero h1{font-family:var(--font-heading);font-size:3.2rem;margin-bottom:15px}
  .hero p{font-size:1.25rem;margin-bottom:20px;} 
  .hero p a{
    color:var(--accent-color);
  }
  .hero p a:hover{
    color:var(--accent-color) !important;
    text-decoration: underline;
  }


  /* 2. Solutions Card Style (MODIFIED: Forced two columns on large screens) */
  #solutions .solution-featured-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
      gap: 30px; 
      margin-top: 40px;
  }
  @media (min-width: 1024px) {
      #solutions .solution-featured-grid {
           /* Force 2 columns */
          grid-template-columns: repeat(2, 1fr); 
      }
  }
  #solutions .featured-service-card {
      padding: 30px;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      transition: all .3s;
      display: flex;
      flex-direction: column; 
      text-align: center;
      height: 100%;
      text-decoration: none;
      color: inherit;
  }
  #solutions .featured-service-card a h3{
    color:var(--secondary-color);
  }
  #solutions .featured-service-card:hover {
      transform: translateY(-3px);
      box-shadow: 6px 16px rgba(0,0,0,.08);
  }
  #solutions .featured-service-card:hover h3{
      color:var(--secondary-color);
      text-decoration: underline;
  }
  #solutions .icon-box-large {
      height: 60px;
      width: 60px;
      color: var(--primary-color);
      margin: 0 auto 15px; 
      stroke-width: 1.5;
  }
  #solutions .featured-service-content {
      text-align: left; /* Text content left-aligned inside the card */
  }
  #solutions .featured-service-content h3 {
      font-family: var(--font-heading);
      font-size: 1.3rem;
      color: var(--primary-color);
      margin: 0 0 10px;
      text-align: center; /* Center the title */
  }
  #solutions .featured-service-content p {
      font-size: 0.95rem;
      color: #555;
  }
  #solutions .featured-service-content ul {
      list-style: none;
      padding-left: 0;
      margin-top: 10px;
  }
  #solutions .featured-service-content ul li {
      position: relative;
      padding-left: 20px;
      font-size: 0.9rem;
      line-height: 1.5;
  }
  #solutions .featured-service-content ul li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: var(--accent-color);
      font-weight: bold;
  }

.featured-title-wrapper{
  display: flex;
  margin-bottom:15px;
  align-items: center;
}
.featured-title-wrapper h3{
  text-align: left !important;
}
.featured-title-wrapper .cdmos-title-icon{
  margin-right:10px;
}
.featured-title-wrapper .cdmos-title-icon svg{
  width:40px;
  height:40px;
}
  /* 3. Platforms Interactive Style (Built-In Quality inspired) */
  #platforms .interactive-platform-container {
      display: flex;
      flex-direction: row-reverse; 
      gap: 40px;
      align-items: flex-start;
  }
  #platforms .platform-nav-panel {
      flex: 1; 
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding-top: 10px;
      min-width: 300px;
  }
  #platforms .platform-nav-item {
      background-color: var(--light-text);
      border-left: 5px solid var(--border-color);
      padding: 15px 20px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      font-weight: 600;
      color: var(--dark-text);
  }
  #platforms .platform-nav-item:hover, 
  #platforms .platform-nav-item.active {
      border-left-color: var(--primary-color);
      background-color: #f0f6ff; 
      color: var(--primary-color);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
  #platforms .platform-content-display {
      flex: 2; 
      background-color: var(--light-text);
      padding: 30px;
      border-radius: 8px;
      border: 1px solid var(--border-color);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      min-height: 350px;
  }
  #platforms .platform-detail {
      display: none;
      animation: fadeIn 0.4s;
  }
  #platforms .platform-detail.active {
      display: block;
  }
  #platforms .platform-detail h3 {
      color: var(--primary-color);
      margin-bottom: 15px;
      font-size: 1.8rem;
  }
  #platforms .platform-detail ul {
      list-style: none;
      padding-left: 0;
      margin-top: 20px;
  }
  #platforms .platform-detail ul li {
      position: relative;
      padding-left: 25px;
      margin-bottom: 10px;
  }
  #platforms .platform-detail ul li::before {
      content: '→';
      position: absolute;
      left: 0;
      color: var(--primary-color);
      font-weight: bold;
  }
  @media (max-width: 992px) {
      #platforms .interactive-platform-container {
          flex-direction: column; 
      }
      #platforms .platform-nav-panel {
          order: -1; 
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
          gap: 5px;
      }
      #platforms .platform-nav-item {
          flex-basis: 48%; 
          border-left: 1px solid var(--border-color);
          text-align: center;
      }
      #platforms .platform-nav-item.active {
          border-color: var(--primary-color);
      }
      #platforms .platform-content-display {
          min-height: auto;
      }
  }


  /* 4. Advantages Card Style (Key Platforms Card inspired) */
  #advantages .advantages-card {
      background-color: var(--light-text);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
      margin: 40px auto 0;
      max-width: 1000px;
  }
  #advantages .advantages-header {
      min-height: 150px;
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      background-size: 50px;
      position: relative;
      clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  #advantages .advantages-header h2 {
      color: var(--light-text);
      z-index: 10;
      text-align: center;
      font-size: 2.2rem;
  }
  #advantages .advantages-content {
      padding: 40px 60px 50px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
  }
  #advantages .advantage-item-large {
      padding: 15px;
      border-left: 4px solid var(--accent-color);
  }
  #advantages .advantage-item-large h3 {
      color: var(--primary-color);
      margin-bottom: 5px;
      font-size: 1.4rem;
  }
  @media (max-width: 768px) {
      #advantages .advantages-content {
          grid-template-columns: 1fr;
          padding: 30px;
      }
  }

  /* Workflow icon sizes (optimized) */
  .wfs-flow-strip .wfs-step-head .icon, .wfs-mobile-list .wfs-m-item svg { 
      width: 56px; 
      height: 56px; 
      color: var(--primary-color);
      stroke-width: 1.5;
      margin-inline: auto;
      display: block;
      filter: none;
  }

  /* Hide Original Static Workflow Elements */
  .wfs-flow-strip, .wfs-timeline, .wfs-descs, .wfs-mobile-list, .workflow-table { display: none !important; }

  /* START: New Workflow Styles from worklow-1.html, renamed */
  
  .cdmos-workflow-container {

      margin: auto;
  }
  .cdmos-workflow-steps {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-bottom: 2rem;
      padding: 0 25px; /* Space for ends */
  }
  .cdmos-workflow-steps::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50px;
      right: 50px;
      height: 2px;
      background: var(--cdmos-border-color);
      transform: translateY(-50%);
      z-index: 1;
  }
  .cdmos-workflow-step {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      flex-grow: 1;
  }
  .cdmos-workflow-step:last-child {
      flex-grow: 0;
  }
  .cdmos-workflow-step-arrow {
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
  }
  .cdmos-workflow-step-arrow svg {
      color: var(--cdmos-border-color);
  }
  .cdmos-workflow-step button {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid var(--cdmos-border-color);
      background-color: var(--cdmos-card-background-color);
      color: var(--cdmos-text-secondary-color);
      font-size: 1.5rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      flex-shrink: 0;
  }
  .cdmos-workflow-step button.cdmos-active,
  .cdmos-workflow-step button:hover {
      background-color: var(--primary-color); /* Use primary color from main theme */
      color: white;
      border-color: var(--primary-color);
      transform: scale(1.1);
  }
  .cdmos-workflow-content {
      display: none;
      padding: 2rem;
      border: 1px solid var(--cdmos-border-color);
      border-radius: 8px;
      background-color: #ffffff;
  }
  .cdmos-workflow-content.cdmos-active {
      display: block;
  }
  .cdmos-workflow-content h3 {
      color: var(--primary-color); /* Use primary color from main theme */
      margin-bottom: 1rem;
  }
  .cdmos-workflow-content ul {
      list-style-type: disc;
      padding-left: 20px;
  }
  .cdmos-workflow-content ul li {
      margin-bottom: 0.5rem;
  }
  .cdmos-workflow-cta {
      text-align: center;
      margin-top: 3rem;
  }
  
  /* Responsive Adjustments for new workflow */
  @media (max-width: 992px) {
      .cdmos-workflow-steps { padding: 0 5px; }
      .cdmos-workflow-steps::before { left: 30px; right: 30px; }
  }

  @media (max-width: 768px) {
      /* On small screens, hide steps and just show content stacked */
      .cdmos-workflow-steps { display: none; } 
      .cdmos-workflow-content { 
          display: block; 
          margin-bottom: 1rem; 
          border: 1px solid var(--cdmos-border-color); 
          border-radius: 8px; 
          padding: 1.5rem;
      }
      .cdmos-workflow-content:not(:last-child) {
          margin-bottom: 20px;
      }
  }
  
  /* END: New Workflow Styles */
  
  /* START: New FAQ Styles from FAQs-1.html, renamed */
  .cdmos-faq-wrapper {
      display: flex;
      flex-direction: column;
      gap: 16px; /* space-y-4 */
  }
  .cdmos-faq-item {
      border: 1px solid var(--faq-neutral-dark); /* border-neutral-dark */
      border-radius: 8px; /* rounded-lg */
      overflow: hidden;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
  }
  .cdmos-faq-question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px; /* p-5 */
      cursor: pointer;
      background-color: rgba(var(--faq-primary), 0.1); /* bg-primary/10 */
      transition: all 0.3s;
  }
  .cdmos-faq-question:hover {
      background-color: rgba(var(--faq-primary), 0.2); /* hover:bg-primary/20 */
  }
  .cdmos-faq-q {
      font-size: 1.125rem; /* text-lg */
      font-weight: 600; /* font-semibold */
      color: var(--faq-secondary); /* text-secondary */
      flex-grow: 1;
      padding-right: 15px;
  }
  .cdmos-faq-icon-wrapper {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(var(--faq-primary), 0.2); /* bg-primary/20 */
      color: var(--faq-primary); /* text-primary */
      border-radius: 9999px; /* rounded-full */
      transition: transform 0.3s;
      flex-shrink: 0;
  }
  .cdmos-faq-icon-wrapper.cdmos-active-icon {
      transform: rotate(45deg); /* rotate-45 */
  }
  .cdmos-faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease-in-out;
      background-color: var(--light-text);
      padding: 0 20px;
  }
  .cdmos-faq-answer.cdmos-active-answer {
      max-height: 500px; /* Increased max-height for content visibility */
  }
  .cdmos-faq-a {
      padding: 20px 0; /* py-5 */
      color: #4b5563; /* text-gray-700 */
      line-height: 1.625; /* leading-relaxed */
  }
  /* END: New FAQ Styles */
  
  /* Related Resources Image/Icon Display */
  .cdmos-resource-grid {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 20px;
      flex-wrap: wrap;
  }
  .cdmos-resource-item {
      flex: 1 1 auto;
      text-align: center;
      text-decoration: none;
      /* color: inherit; */
      display: block;
      transition: transform 0.3s;
      color:var(--primary-color) !important;
  }
  .cdmos-resource-item:hover {
      transform: translateY(-5px);
      color:var(--secondary-color) !important;
      text-decoration: none !important;
  }
  .cdmos-resource-icon {
      width: 100%;
      max-width: 300px;
      height: 200px;
      margin: 0 auto 15px;
      border-radius: 8px;
      background-color: var(--section-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
  }
.cdmos-resource-icon img{
  object-fit: cover;
}
  .cdmos-resource-title {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      /* color: var(--dark-text); */
      font-weight: 600;
  }
  @media (max-width: 768px) {
      .cdmos-resource-grid {
          justify-content: center;
      }
      .cdmos-resource-item {
          flex: 1 1 100%;
          max-width: 300px;
      }
  }
  /* Table Styling for Products (MODIFIED for outer border) */
  .cdmos-product-table-container {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      overflow: hidden;
  }
  .cdmos-product-table {
      width: 100%; 
      border-collapse: collapse; 
      margin-bottom: 0; /* Removed bottom margin since container holds border */
      text-align: left; 
  }
  .cdmos-product-table a:hover{
      color:var(--primary-color);
  }
  .cdmos-product-table th, .cdmos-product-table td {
      padding: 12px 15px; 
      border-bottom: 1px solid var(--border-color);
  }

  .cdmos-product-table thead tr {
      background-color: var(--section-bg);
  }
  .cdmos-product-table th {
      border-bottom: 2px solid var(--border-color);
  }
  .cdmos-product-table tbody tr:last-child td {
      border-bottom: none; /* Remove border from last row */
  }
  
  /* Simple responsiveness for product table */
  @media (max-width: 600px) {
      .cdmos-product-table thead {
          display: none;
      }
      .cdmos-product-table, .cdmos-product-table tbody, .cdmos-product-table tr, .cdmos-product-table td {
          display: block;
          width: 100%;
      }
      .cdmos-product-table tr {
          margin-bottom: 15px;
          border: 1px solid var(--border-color);
          border-radius: 8px;
      }
      .cdmos-product-table td {
          text-align: right;
          padding-left: 50%;
          position: relative;
          border-bottom: 1px solid var(--border-color) !important;
      }
      .cdmos-product-table tr:last-child {
           border-bottom: 1px solid var(--border-color);
      }
      .cdmos-product-table td::before {
          content: attr(data-label);
          position: absolute;
          left: 10px;
          width: 45%;
          padding-right: 10px;
          white-space: nowrap;
          text-align: left;
          font-weight: 600;
          color: var(--primary-color);
      }
      .cdmos-product-table-container {
          border: none;
      }
  }
  
  .cdmos-sticky-nav-bar{
	position:sticky;top:-100px;background-color:var(--light-text);
	z-index:500;box-shadow:0 4px 12px rgba(0,0,0,0.08);
	padding:10px 0;height:65px;transition:height .4s,padding .4s,top .4s;
	display: none;
  }
  .cdmos-sticky-nav-container{
	width:90%;max-width:1300px;margin:0 auto;display:flex;
	justify-content:space-between;align-items:center;height:100%;position:relative;
  }
  
  /* PC STYLE OPTIMIZATION: Replacing Biparatopic's default nav style with template-like style */
  .cdmos-sticky-nav-links{display:flex;align-items:center}
  .cdmos-sticky-nav-links a{
	text-decoration:none;
	color:var(--dark-text);
	font-weight:500; /* Slightly less bold than default */
	font-family:var(--font-body); /* Using body font for lighter feel */
	font-size:1rem; /* Standard font size */
	transition:color .3s, background-color .3s;
	padding: 0 16px; /* Padding for wider links */
	line-height: 45px; /* Vertical centering */
	height: 45px;
	position:relative;
	cursor:pointer;
	/* border-right: 1px solid var(--border-color); Vertical separator like template's li */
  }
a:not([href]):not([class]):hover {
    color: #fff !important;
    text-decoration: none;
}
  .cdmos-sticky-nav-links a:last-child {
	  border-right: none;
  }
  .cdmos-sticky-nav-links a:hover{
	  color:#fff;
	  background-color: var(--primary-color); /* Light hover background */
  }
  /* Remove the bottom indicator for PC style (since it's not present in the template nav) */
  .cdmos-sticky-nav-links a::before{ display: none; } 
  /* Active link style */
  .cdmos-sticky-nav-links a.cdmos-active-link{
	  font-weight: 600; /* Emphasize active link */
	  background-color: var(--primary-color);
	  color:#fff;
  }
  .cdmos-sticky-nav-links a.cdmos-active-link::before{ display: none; }
  /* Remove vertical separator (already handled by border-right) */
  .cdmos-sticky-nav-links a:not(:last-of-type)::after{ display: none; }
  /* END PC STYLE OPTIMIZATION */
    .cdmos-mobile-nav-toggle-btn{
      display:none;padding:8px;font-family:var(--font-heading);font-weight:600;background:transparent;color:var(--dark-text);
      border:none;border-radius:5px;cursor:pointer;margin-right:20px;font-size:1rem;align-items:center;justify-content:center;width:44px;height:44px
    }
    .cdmos-icon-toggle{width:24px;height:24px}
    .cdmos-icon-toggle.cdmos-hidden{display:none}
  /* Template 2 Header/Footer CSS Overrides/Additions */
  /* This ensures the mobile menu remains functional */
  @media (max-width: 992px) {
	  .cdmos-sticky-nav-bar.cdmos-expanded{height:auto}
	  .cdmos-sticky-nav-container{justify-content:space-between}
	  .cdmos-mobile-nav-toggle-btn{display:flex}
	  .cdmos-sticky-nav-links{
		display:none;flex-direction:column;position:absolute;top:64px;left:0;width:100%;
		background:var(--light-text);box-shadow:0 8px 16px rgba(0,0,0,.1);border-top:1px solid var(--border-color);
		/* Mobile style specific overrides */
		padding: 0;
		height: auto;
	  }
	  .cdmos-sticky-nav-links.cdmos-expanded{display:flex}
	  .cdmos-sticky-nav-links a{
		  width:100%;
		  padding:15px 20px;
		  border-bottom:1px solid var(--border-color);
		  border-right: none; /* Remove PC border-right in mobile */
		  line-height: normal;
		  height: auto;
	  }
	  .cdmos-sticky-nav-links a:hover{ background-color: #f0f6ff; }
	  .cdmos-sticky-nav-links a:not(:last-of-type)::after{display:none}
	  .cdmos-sticky-nav-links a:hover::before,.cdmos-sticky-nav-links a::before{display:none}
  }