/* ================================================================
   EDJEweb Solutions — Custom overrides
   Accent: #3764eb  |  Base: #051b2e
   ================================================================ */

/* Smooth scroll for anchor links (e.g. "View More" → comparison table) */
html {
  scroll-behavior: smooth;
}

/* =====================================================================
   NAVBAR LOGO — smaller logo, compensated padding to keep same height
   Desktop only: max-height 45px + padding 21px/19px = 85px total
   Mobile falls back to nav-menu.css defaults (padding: 12px 0 10px 0)
   ===================================================================== */
@media screen and (min-width: 992px) {
  .navbar-brand img {
    max-height: 45px;
  }

  .navbar-header-custom {
    padding: 21px 0 19px 0;
  }
}


/* Ensure primary accent buttons use white text (blue bg, not yellow) */
.butn-style4,
.butn-style2 {
  color: #ffffff !important;
}

/* Button hover: darken the blue slightly */
.butn-style4:hover span,
.butn-style4:focus span {
  color: #ffffff;
}

/* White-hover variant: keep border visible on dark backgrounds */
.butn-style4.white-hover {
  border-color: rgba(255, 255, 255, 0.6);
}
.butn-style4.white-hover:hover {
  background: #ffffff !important;
  border-color: #ffffff;
  color: #051b2e !important;
}
.butn-style4.white-hover:hover span {
  color: #051b2e !important;
}

/* hover-bg variant (used on light backgrounds) */
.butn-style4.hover-bg:hover {
  background: #2a54d4 !important;
  border-color: #2a54d4 !important;
}

/* Preloader uses primary color */
.loader-icon {
  border-top-color: #3764eb;
}

/* Section title sm-title accent line */
.section-title02 .sm-title::after {
  background-color: #3764eb;
}

/* Nav active underline / caret — use solid blue (the border-color transparent trick) */
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #3764eb;
}

/* Icon-circle bg: subtle blue tint */
.icon-circle {
  background-color: rgba(55, 100, 235, 0.12) !important;
}

/* Process icon circle border */
.process-icons {
  border-color: rgba(55, 100, 235, 0.25);
}

/* Testimonial thumb active border */
.owl-thumbs button.active img,
.owl-thumbs button:hover img {
  border-color: #3764eb !important;
}

/* Alert success override (contact page) */
.alert-success {
  background: rgba(55, 100, 235, 0.08);
  border-color: #3764eb;
  color: #051b2e;
}

/* card-style03 .card-price and .price-before rules removed —
   pricing cards now use the icon-header layout (no floating badge) */

/* ================================================================
   Inline SVG Icon styles
   ================================================================ */

/* Service card icon: the icon-circle IS the flex container.
 *
 * The template places icon-circle as position:absolute;top:0 and then adds
 * top:40px at ≤1199px — that offset was designed for the old <img> layout and
 * causes the circle to drift away from the icon at smaller widths.
 *
 * Fix: cancel all absolute-positioning properties and turn icon-circle into a
 * plain relative flex box. No fixed heights on parent, no breakpoint offsets. */
.card-style06 .card-body .service-img {
  margin: 0 auto 25px;  /* let height be determined by icon-circle content */
}

.card-style06 .card-body .icon-circle {
  position: relative  !important; /* overrides position: absolute               */
  top:       auto     !important; /* cancels top:0 and the ≤1199px top:40px rule */
  left:      auto     !important; /* cancels left: 50%                           */
  transform: none     !important; /* cancels translateX(-50%) !important         */
  display:         flex           !important;
  align-items:     center         !important;
  justify-content: center         !important;
  width:  90px  !important;
  height: 90px  !important;
  border-radius: 50%;
  margin: 0 auto;                 /* centre the circle horizontally in the card  */
}

.card-style06 .card-body .icon-circle svg {
  width:        46px;
  height:       46px;
  stroke-width: 1.5;
  color:        #3764eb;
  display:      block;
  flex-shrink:  0;
}

/* Process / "What Sets Us Apart" icons (120×120 blue circle, white icon) */
.process-icons svg {
  width: 60px;
  height: 60px;
  stroke-width: 1.5;
  color: #ffffff;
}

/* Toggle switch styles (pricing page) */
.billing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 2.5rem;
}
.billing-toggle-wrap .toggle-label {
  font-weight: 600;
  font-size: 15px;
  color: #051b2e;
  cursor: pointer;
  transition: color 0.2s;
}
.billing-toggle-wrap .toggle-label.active {
  color: #3764eb;
}
.billing-toggle {
  position: relative;
  width: 52px;
  height: 26px;
  display: inline-block;
  cursor: pointer;
}
.billing-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.billing-toggle .slider {
  position: absolute;
  inset: 0;
  background: #ccd7f8;
  border-radius: 26px;
  transition: background 0.25s;
}
.billing-toggle .slider:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.billing-toggle input:checked + .slider {
  background: #3764eb;
}
.billing-toggle input:checked + .slider:before {
  transform: translateX(26px);
}
.save-badge {
  display: inline-block;
  background: #3764eb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 30px;
  letter-spacing: 0.3px;
  vertical-align: middle;
  margin-left: 4px;
}

/* ================================================================
   Pricing card redesign — icon header replaces photo + badge
   ================================================================ */

/* Make each card a flex column so header + body fill the full card height */
.card-style03 {
  display: flex;
  flex-direction: column;
}

/* card-body grows to fill remaining height; flex column already on it via Blade class */
.card-style03 .card-body {
  flex: 1 1 auto;
}

.pricing-card-header {
  background: linear-gradient(135deg, #3764eb 0%, #1a3a6b 100%);
  padding: 2.25rem 1.5rem 1.75rem;
  border-radius: 0.375rem 0.375rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  position: relative;
}

/* Featured (Business) card gets a slightly richer gradient */
.pricing-card-header--featured {
  background: linear-gradient(135deg, #2a54d4 0%, #051b2e 100%);
}

.pricing-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pricing-icon svg {
  width: 50px;
  height: 50px;
  color: #ffffff;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.pricing-plan-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  min-height: 1.5em;           /* same height across all three cards */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-plan-tagline {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  line-height: 1.4;
  min-height: 2.5em;           /* reserve space for up to 2 lines of tagline */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Most Popular" ribbon on Business card */
.pricing-popular-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffffff;
  color: #3764eb;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── Featured (Business) card elevation ──────────────────────────────
   Strategy: pull the card up by 1.5rem with a negative margin-top, then
   add exactly 1.5rem back to the header's padding-top so the first piece
   of content (icon) lands at the SAME vertical position as Standard/Pro.
   Add 1.5rem extra padding-bottom so the card extends equally below.

   Net result:  card top = Standard/Pro top − 1.5rem  (extends above)
                content  = Standard/Pro content top  (stays aligned)
                card bot = Standard/Pro bot + 1.5rem  (extends below)

   pt-lg-4 on the row creates the matching gap above Standard/Pro so the
   Business card's upward extension fills that space cleanly.
   ──────────────────────────────────────────────────────────────────── */
.pricing-featured {
  margin-top: -1.5rem;
  position: relative;
  z-index: 1;
  border: 2px solid #3764eb !important;   /* overrides Bootstrap's border-0 !important */
  box-shadow: 0 24px 64px rgba(55, 100, 235, 0.28) !important;
}

/* Push header content down to compensate for the -1.5rem margin-top */
.pricing-featured .pricing-card-header {
  padding-top: calc(2.25rem + 1.5rem);    /* = 3.75rem */
}

/* Extend card symmetrically below Standard/Pro */
.pricing-featured .card-body {
  padding-bottom: calc(1.9rem + 1.5rem);  /* = 3.4rem */
}

/* Mobile/tablet (< lg): all cards stack — remove elevation, keep accent border */
@media (max-width: 991.98px) {
  .pricing-featured {
    margin-top: 0;
  }

  .pricing-featured .pricing-card-header {
    padding-top: 2.25rem;
  }

  .pricing-featured .card-body {
    padding-bottom: 1.9rem;
  }
}

/* ── Price block ── */
.pricing-price-block {
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  min-height: 7rem;            /* fixed height so price numbers align across cards */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Strike-through row (visible in 3-year mode) */
.price-was-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.price-was {
  text-decoration: line-through;
  color: #aaa;
  font-size: 0.95rem;
}

.price-was small { font-size: 0.8em; }

/* Per-card save badge inside was-row (different from toggle save-badge) */
.save-pct-badge {
  background: rgba(55, 100, 235, 0.1);
  color: #3764eb;
  border: 1px solid rgba(55, 100, 235, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  line-height: 1;
}

.price-currency {
  font-size: 1.25rem;
  font-weight: 700;
  color: #051b2e;
}

.price-main {
  font-size: 2.6rem;
  font-weight: 800;
  color: #051b2e;
  line-height: 1;
  letter-spacing: -0.02em;
}

.price-period {
  font-size: 0.82rem;
  color: #888;
  margin-top: 0.35rem;
}

/* ── Feature list ── */
.pricing-features {
  list-style: none;
  text-align: left;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  color: #3a3a4a;
  border-bottom: 1px solid rgba(0, 0, 0, 0.045);
}

.pricing-features li:last-child { border-bottom: none; }

.feat-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.feat-check { color: #22c55e; }
.feat-cross  { color: #ef4444; }

/* ================================================================
   Feature comparison table
   ================================================================ */

.pricing-compare-table {
  width: 100%;
  min-width: 580px;           /* triggers horizontal scroll below 580px */
  border-collapse: collapse;
  font-size: 0.9rem;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
}

.pricing-compare-table thead th {
  background: #3764eb;
  color: #fff;
  padding: 1rem 1.25rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  border: none;
}

.pricing-compare-table thead th.feature-col {
  background: #051b2e;
  text-align: left;
  width: 38%;
}

/* Highlight the "Business" column header */
.pricing-compare-table thead th.plan-col--featured {
  background: #2a54d4;
}

.pricing-compare-table tbody td {
  padding: 0.7rem 1.25rem;
  text-align: center;
  border-bottom: 1px solid #eef0f4;
  vertical-align: middle;
  color: #444;
}

.pricing-compare-table tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: #051b2e;
}

/* Alternating row shading */
.pricing-compare-table tbody tr:nth-child(even) td { background: #f8f9fc; }
.pricing-compare-table tbody tr:nth-child(even) td:first-child { background: #f4f5f9; }

/* Hover tint */
.pricing-compare-table tbody tr:not(.cmp-divider):hover td {
  background: rgba(55, 100, 235, 0.04);
}

/* Section divider rows */
.pricing-compare-table tr.cmp-divider td {
  background: #3764eb !important;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45rem 1.25rem;
  border: none;
}

/* Check / cross symbols */
.cmp-yes {
  color: #22c55e;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

.cmp-no {
  color: #ef4444;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
}

/* Light grey background behind comparison table section */
.bg-light-gray { background-color: #f5f6fa; }

/* ================================================================
   About page — fluid image containers
   No fixed pixel dimensions. Containers maintain their intended
   portrait / square shape via aspect-ratio; images fill them with
   object-fit: cover so nothing overflows or distorts.
   ================================================================ */

/* Large image wrapper — fluid width, portrait aspect ratio */
.about-main-img-wrap {
  overflow: hidden;
  aspect-ratio: 365 / 450;  /* portrait shape, scales with column width */
}

.about-main-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Small overlay image — template keeps width: 250px; we add shape + clip */
.about-style-02 .left-top-box {
  overflow: hidden;
  aspect-ratio: 1 / 1;  /* square */
  padding: 0;
}

.about-style-02 .left-top-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ================================================================
   Scrolling marquee — Industries We Serve
   ================================================================

   How the loop works:
   - .marquee-content contains two identical word-sets side by side.
   - Its natural width is therefore 2× one set.
   - The animation moves it left by exactly 50% of its own width,
     at which point the second set occupies the same position the
     first set started at → seamless, gapless infinite loop.
   ================================================================ */

.marquee-section {
  overflow: hidden;          /* essential: clips the sliding content   */
  background: #ffffff;
  padding: 2.5rem 0;
  border-top: 1px solid #e8eaf0;
  border-bottom: 1px solid #e8eaf0;
}

.marquee-track {
  overflow: hidden;          /* belt-and-braces clip                   */
  width: 100%;
}

.marquee-content {
  display: inline-flex;      /* row of words, sized to their content   */
  align-items: center;
  white-space: nowrap;
  animation: mq-scroll 30s linear infinite;
  will-change: transform;
}

/* Pause on hover so a reader can catch a word if they want */
.marquee-section:hover .marquee-content {
  animation-play-state: paused;
}

@keyframes mq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Individual word ── */
.mq-word {
  display: inline-block;
  font-size: clamp(2.6rem, 5.5vw, 5.5rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1;
  padding: 0 1.5rem;           /* equal L/R → identical gap at every seam */
}

/* Odd words: solid, dark navy fill */
.mq-solid {
  color: #051b2e;
}

/* Even words: outline only, accent-blue stroke, no fill */
.mq-outline {
  color: transparent;
  -webkit-text-stroke: 3px #3764eb;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    animation-play-state: paused;
  }
}

/* ================================================================
   How It Works — step-process section
   ================================================================

   Layout:
   - lg+  (≥ 992px): 4 columns in a row, horizontal connecting line
   - md   (768–991px): 2 × 2 grid, no connector
   - <md  (< 768px): single-column vertical stack, downward connectors

   The horizontal line on desktop is a ::before pseudo-element on
   .hiw-steps. It sits at top: 60px (half of the 120px icon circle)
   so it runs precisely through the centers of all four icon circles.
   The .hiw-icon-area sits at z-index: 1 so the solid blue circles
   cover the line cleanly at each step.
   ================================================================ */

/* Icon area: relative container so the number badge can be absolute,
   z-index: 1 so it floats above the desktop connector line. */
.hiw-icon-area {
  position: relative;
  display: inline-block;
  z-index: 1;
}

/* Step number badge — overlays the top-right of the icon circle */
.hiw-num {
  position: absolute;
  top:   -6px;
  right: -6px;
  width:  30px;
  height: 30px;
  border-radius: 50%;
  background: #3764eb;
  color: #fff;
  font-size:   11px;
  font-weight: 800;
  line-height: 1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border: 3px solid #f8f9fa; /* matches bg-light so it "punches" out of the circle */
  z-index: 2;
  letter-spacing: 0;
}

/* Step column: needs position: relative so ::after connectors work */
.hiw-step {
  position: relative;
}

/* ── Desktop: horizontal connector line (lg+) ── */
@media (min-width: 992px) {
  .hiw-steps {
    position: relative;
  }

  /* Runs from center of col-1 icon (12.5% from left)
     to center of col-4 icon (12.5% from right),
     aligned with the vertical center of the 120px circles. */
  .hiw-steps::before {
    content: '';
    position: absolute;
    top:   60px;   /* half of 120px icon height */
    left:  12.5%;  /* center of first col       */
    right: 12.5%;  /* center of last col        */
    height: 2px;
    background: linear-gradient(
      90deg,
      rgba(55, 100, 235, 0.35) 0%,
      rgba(55, 100, 235, 0.12) 50%,
      rgba(55, 100, 235, 0.35) 100%
    );
    z-index: 0;
  }
}

/* ── Mobile: vertical connector between stacked steps (< 768px) ── */
@media (max-width: 767.98px) {
  /* Spacing between steps */
  .hiw-step {
    padding-bottom: 2.5rem;
  }
  .hiw-step:last-child {
    padding-bottom: 0;
  }

  /* Thin vertical line from the bottom of each non-last step */
  .hiw-step:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 2rem;
    background: linear-gradient(
      180deg,
      rgba(55, 100, 235, 0.35),
      rgba(55, 100, 235, 0.08)
    );
  }
}

/* ── Tablet 2×2 grid (768–991px): just vertical rhythm between rows ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hiw-step {
    padding-bottom: 2rem;
  }
  .hiw-step:nth-child(3),
  .hiw-step:nth-child(4) {
    padding-bottom: 0;
  }
}

/* ================================================================
   Mobile hero carousel fixes  (≤ 767px)
   ================================================================ */
@media (max-width: 767.98px) {

  /* 1. Owl dots — template anchors them with position:absolute; right:50px
        which pushes them to the right on narrow screens.
        Override to span full width and center the dots within. */
  .slider-fade1.owl-theme .owl-nav.disabled + .owl-dots {
    right:      0    !important;
    left:       0    !important;
    bottom:     20px !important;
    width:      100% !important;
    text-align: center !important;
  }

  /* 2. Slides: fill via background cover from the center focal point. */
  .slider-fade1 .item {
    background-size:     cover         !important;
    background-position: center center !important;
  }

  /* 3. Hero section + slides: fill full viewport height on mobile */
  .slider-fade1 {
    height: 100vh;
  }

  .slider-fade1 .item {
    min-height: 100vh;
  }

  /* 4. Override nav-menu.css margin-top: -73px (calibrated for original larger navbar).
        Actual mobile navbar = 47px logo + 6px top + 6px bottom + 1px border = 60px. */
  .top-position1 {
    margin-top: -70px;
  }

}

/* =====================================================================
   CAREERS PAGE
   ===================================================================== */

/* "Coming Soon" badge */
.careers-badge {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 50px;
  background: rgba(55, 100, 235, 0.1);
  color: #3764eb;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* "What we look for" card */
.careers-values-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* Checkmark circle */
.careers-check {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(55, 100, 235, 0.1);
  color: #3764eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ================================================================
   Get Quote button (pricing cards)
   ================================================================ */

.quote-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.65rem 1rem;
  margin-top: 0.6rem;
  background: #051b2e;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  letter-spacing: 0.02em;
  font-family: inherit;
}

.quote-btn:hover {
  background: #0d2d4a;
}

.quote-btn svg {
  flex-shrink: 0;
}

/* ================================================================
   Quote modal
   ================================================================ */

.quote-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 27, 46, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.quote-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.quote-modal-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 2.6rem 2.25rem 2.25rem;
  max-width: 540px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(5, 27, 46, 0.28);
  transform: translateY(16px);
  transition: transform 0.22s ease;
  max-height: 90vh;
  overflow-y: auto;
}

.quote-modal-overlay.is-open .quote-modal-box {
  transform: translateY(0);
}

.quote-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  transition: color 0.15s;
}

.quote-modal-close:hover {
  color: #051b2e;
}

.quote-modal-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.3rem;
  padding-right: 1.5rem;
}

.quote-modal-header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(55, 100, 235, 0.1);
  color: #3764eb;
  flex-shrink: 0;
}

.quote-modal-header-icon svg {
  width: 18px;
  height: 18px;
}

.quote-modal-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #051b2e;
  margin: 0;
  line-height: 1.3;
}

.quote-modal-summary {
  font-size: 0.88rem;
  color: #3764eb;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.quote-modal-message-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.quote-modal-message-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #888;
  font-size: 0.78rem;
}

.quote-modal-textarea {
  width: 100%;
  border: 1px solid #dde2ea;
  border-radius: 6px;
  padding: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #333;
  resize: vertical;
  font-family: inherit;
  min-height: 110px;
  margin-bottom: 1rem;
  background: #f8f9fc;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.quote-modal-textarea:focus {
  outline: none;
  border-color: #3764eb;
  background: #fff;
}

.quote-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.quote-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.78rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.1s ease;
  letter-spacing: 0.01em;
  font-family: inherit;
}

.quote-action-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.quote-action-email {
  background: #3764eb;
  color: #ffffff;
}

.quote-action-whatsapp {
  background: #25d366;
  color: #ffffff;
}

@media (max-width: 575.98px) {
  .quote-modal-box {
    padding: 1.9rem 1.4rem 1.6rem;
  }
}