/* ===========================================================
   CTA RED  (REFERENCE STYLE)
   =========================================================== */

.cta-button {
  transition: transform 0.2s ease-in-out, 
              box-shadow 0.2s ease-in-out, 
              background 0.2s ease-in-out;

  background: linear-gradient(135deg, #c81b27, #b30f1a);
}

.cta-button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #d6202d, #b30f1a);

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.18),
    0 0 8px rgba(179, 15, 26, 0.45);
}

.cta-button:active {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #b30f1a, #990b14);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.18),
    0 0 6px rgba(153, 11, 20, 0.55);
}


/* ===========================================================
   CTA BLACK (MATCHES RED CTA BEHAVIOR)
   =========================================================== */

.cta-button-black {
  transition: transform 0.2s ease-in-out, 
              box-shadow 0.2s ease-in-out, 
              background 0.2s ease-in-out;

  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
}

.cta-button-black:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #222222, #0d0d0d);

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.18),
    0 0 8px rgba(255, 255, 255, 0.25);
}

.cta-button-black:active {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #0d0d0d, #050505);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.20),
    0 0 6px rgba(255, 255, 255, 0.20);
}


/* ===========================================================
   CTA BLUE (#578dbb)
   =========================================================== */

.cta-button-blue {
  transition: transform 0.2s ease-in-out, 
              box-shadow 0.2s ease-in-out, 
              background 0.2s ease-in-out;

  background: linear-gradient(135deg, #6ca1ce, #578dbb);
}

.cta-button-blue:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #78aedb, #578dbb);

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.18),
    0 0 8px rgba(87, 141, 187, 0.45);
}

.cta-button-blue:active {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #578dbb, #3d6d93);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.16),
    0 0 6px rgba(87, 141, 187, 0.45);
}


/* ===========================================================
   CTA CYAN (gradient #2c8dbf → #46cdcf)
   =========================================================== */

.cta-button-cyan {
  transition: transform 0.2s ease-in-out, 
              box-shadow 0.2s ease-in-out, 
              background 0.2s ease-in-out;

  background: linear-gradient(135deg, #2c8dbf, #46cdcf);
}

.cta-button-cyan:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #3ca3d8, #5cdfe2);

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.18),
    0 0 8px rgba(70, 205, 207, 0.45);
}

.cta-button-cyan:active {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #2577a2, #39b1b3);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.16),
    0 0 6px rgba(70, 205, 207, 0.45);
}


/* ===========================================================
   CTA TEAL (#1b5b79)
   =========================================================== */

.cta-button-teal {
  transition: transform 0.2s ease-in-out, 
              box-shadow 0.2s ease-in-out, 
              background 0.2s ease-in-out;

  background: linear-gradient(135deg, #226c8f, #1b5b79);
}

.cta-button-teal:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #2b7ea6, #1b5b79);

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.18),
    0 0 8px rgba(27, 91, 121, 0.45);
}

.cta-button-teal:active {
  transform: translateY(-1px);
  background: linear-gradient(145deg, #1b5b79, #103a4f);

  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.16),
    0 0 6px rgba(27, 91, 121, 0.45);
}


/* ---------------- BUY NOW CTA (WHITE + AQUA) ---------------- */

/* Base styles */
.cta-button-bn {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;

    border: 1px solid #37a8c6;
    background: linear-gradient(135deg, #ffffff, #f5f9fb); /* subtle soft-white gradient */

    box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.12);

    transition: 
        transform 0.2s ease-in-out,
        box-shadow 0.2s ease-in-out,
        background 0.2s ease-in-out;
}

/* Hover: lift + aqua glow */
.cta-button-bn:hover {
    transform: translateY(-1px);

    background: linear-gradient(135deg, #ffffff, #e8f6fa); /* lighter & fresher */

    box-shadow:
        0 5px 14px rgba(0,0,0,0.18),
        0 0 8px rgba(55,168,198, 0.45); /* aqua glow */
}

/* Active: pressed effect */
.cta-button-bn:active {
    transform: translateY(-1px);

    /* subtle darker gradient to simulate press */
    background: linear-gradient(145deg, #f2f6f8, #e0edf1);

    box-shadow:
        0 4px 10px rgba(0,0,0,0.16),
        0 0 4px rgba(55,168,198, 0.35); /* tighter glow */
}