/* ====================== */
/* === CSS VARIABLES ==== */
/* ====================== */

:root {
  
  /* Common button vars */
  --cta-btn-radius: 100px;
  --cta-btn-color: white;
  --cta-btn-bg: #000;
  --cta-btn-hover-bg: #222;
  --cta-btn-outline-bg: transparent;
  --cta-btn-outline-color: #000;
  --cta-btn-outline-border: 2px solid #000;
  --cta-btn-outline-hover-bg: transparent;
}

/* Industry variables */
.colourmetrix {
  --cta-background: linear-gradient(0deg, #c7a3ff30 0%, #fbcdcd85 70%), url("/images/colourmetrix/cta-banner.jpg");
  --cta-heading-color: #a30c5e;
  --cta-btn-radius: 10px;
  --cta-btn-bg: #a30c5e;
  --cta-btn-hover-bg: #930b56;
  --cta-btn-outline-bg: transparent;
  --cta-btn-outline-color: #a30c5e;
  --cta-btn-outline-border: 2px solid #a30c5e;
  --cta-btn-outline-hover-bg: #ffe1e166;
  --cta-padding: 60px 82px;
  --cta-border-radius: 24px;
  --mobile-cta-max-width : 200px;
  --cta-max-width: 1200px;
  --cta-margin: 20px auto 60px;
  --mobile-cta-margin :1.25rem 2rem 2.5rem;
  --mobile-cta-border-radius : 1rem;
}

.flavandfrag, .tredapi {
  --cta-background: linear-gradient(to bottom, rgb(0 0 0 / 50%) 80%, #0b2d50 100%), url('/images/flavandfrag/flav-and-frag-background.jpg');
  --cta-heading-color: #cfedfb;
  --cta-btn-bg: #053763;
  --cta-btn-hover-bg: #ddf4ff;
  --cta-btn-hover-color: #000;
  --cta-btn-outline-color: #ddf4ff;
  --cta-btn-outline-border: 2px solid #ddf4ff;
  --mobile-cta-max-width : 280px;
  --cta-padding: 40px 82px;
}

.keyintermediates {
  --cta-background: linear-gradient(to bottom, rgb(0 0 0 / 50%) 80%, #0b2d50 100%), url('/images/keyintermediates/keyintermediates-background.jpg');
  --cta-heading-color: #cfedfb;
  --cta-btn-bg: #053763;
  --cta-btn-hover-bg: #ddf4ff;
  --cta-btn-hover-color: #000;
  --cta-btn-outline-color: #ddf4ff;
  --cta-btn-outline-border: 2px solid #ddf4ff;
  --mobile-cta-max-width : 280px;
  --cta-padding: 40px 82px;
}

.phormulations {
  --cta-background: linear-gradient(to bottom, rgb(0 0 0 / 50%) 80%, #0b2d50 100%), url('/images/phormulations/formulations-background.jpg');
  --cta-heading-color: #cfedfb;
  --cta-btn-bg: #053763;
  --cta-btn-hover-bg: #ddf4ff;
  --cta-btn-hover-color: #000;
  --cta-btn-outline-color: #ddf4ff;
  --cta-btn-outline-border: 2px solid #ddf4ff;
  --mobile-cta-max-width : 280px;
  --cta-padding: 40px 82px;
}

.spicemetrix {
  --cta-background: #0f224a;
  --cta-heading-color: #cfedfb;
  --cta-btn-radius: 8px;
  --cta-btn-color: #0f4386;
  --cta-btn-bg: #ddf4ff;
  --cta-btn-hover-bg: #ddf4ff;
  --cta-btn-outline-color: #ddf4ff;
  --cta-btn-outline-border: 2px solid #ddf4ff;
  --mobile-cta-max-width : 280px;
  --cta-padding: 40px 82px;
}

.xipients {
  --cta-background: linear-gradient(to bottom, rgb(0 0 0 / 50%) 80%, #0b2d50 100%), url('/images/xipients/xipient-cta-banner.jpg');
  --cta-heading-color: #cfedfb;
  --cta-btn-color: #0f4386;
  --cta-btn-bg: #ddf4ff;
  --cta-btn-hover-bg: #ddf4ff;
  --cta-btn-outline-color: #ddf4ff;
  --cta-btn-outline-border: 2px solid #ddf4ff;
  --mobile-cta-max-width : 280px;
  --cta-padding: 40px 82px;
}

/* ====================== */
/* === COMMON CTA CSS === */
/* ====================== */

.cta {
  background: var(--cta-background);
  padding: var(--cta-padding);
  border-radius: var(--cta-border-radius);
  max-width: var(--cta-max-width);
  margin: var(--cta-margin);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  text-align: center;
  position: relative;
  box-shadow: inset 0px 1px 4px 0px #00000010;
  font-family: 'Afacad', sans-serif;
  z-index: 1;
}

.cta-heading {
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--cta-heading-color);
}

.cta-description {
    color: #e8ebea;
    font-size: 20px;
    font-weight: 400;
    margin: 0px 0px 30px;
}

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.cta-btn.unified {
  padding: 12px 28px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  color: var(--cta-btn-color);
  background-color: var(--cta-btn-bg);
  border-radius: var(--cta-btn-radius);
  border: 2px solid transparent;
  transition: all 0.3s ease, transform 0.3s ease;
}

.cta-btn.unified:hover {
  background-color: var(--cta-btn-hover-bg);
  color: var(--cta-btn-hover-color, var(--cta-btn-color));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cta-btn.unified.outline {
  background-color: var(--cta-btn-outline-bg);
  color: var(--cta-btn-outline-color);
  border: var(--cta-btn-outline-border);
}

.cta-btn.unified.outline:hover {
  background-color: var(--cta-btn-outline-hover-bg);
}

/* ====================== */
/* === RESPONSIVE ======= */
/* ====================== */

@media (max-width: 768px){
  .cta {
        padding: 2.5rem 1.2rem;
        margin: var(--mobile-cta-margin);
        border-radius: var(--mobile-cta-border-radius);
        background-size: cover !important;
        background-position: center !important;
        text-align: center;
  }
  .cta-heading {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
  }
  .cta-buttons {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }
  .cta-btn.unified {
    width: 100%;
    max-width: var(--mobile-cta-max-width);
  }
}