/* ==========================================================================
   easycons.php page-only styles (scoped under .easycons-page)
   Do not move any of these rules into main.css / responsive.css — they must
   stay scoped so they never leak onto other pages sharing the same global
   classes (.solution-box, .about-img, .heading11, .main-video-section, etc).
   ========================================================================== */

/* ---- Heading accent bar ---- */
.easycons-page .heading11 h2{position:relative;padding-top:18px;}
.easycons-page .heading11 h2::before{content:"";position:absolute;top:0;left:0;width:46px;height:4px;border-radius:2px;background:linear-gradient(90deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));}
.easycons-page .heading11.text-center h2::before{left:50%;transform:translateX(-50%);}

/* ---- Hero: richer overlay gradient + eyebrow badge + title shadow ---- */
.easycons-page .main-video-section .video-overlay-main{background: linear-gradient(120deg, rgba(6,14,34,.82) 0%, rgba(24,88,202,.55) 55%, rgba(6,14,34,.78) 100%);}
.easycons-page .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.easycons-page .hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#4A8AFE;box-shadow:0 0 0 4px rgba(74,138,254,.3);}
.easycons-page .main-video-section .section-content .title{text-shadow:0 2px 18px rgba(0,0,0,.25);}

/* ---- Problem-statement grid cards: soft rounded-icon cards with hover lift ----
   NOTE: border-top / border-left MUST stay "none !important" — a mobile-only
   rule elsewhere sets all-sides !important dashed borders on .solution-box.
   border-right / border-bottom must NOT have !important so the existing
   per-cell utility classes (.border-right-0 / .border-bottom-0), which are
   more specific selectors, can still correctly remove the divider on edge
   cells of the grid. This page has 5 "solution-section-main" blocks
   (Problem Statement, Impact on Business, and further problem/impact
   sections) all sharing the same .solution-section-main / .solution-box /
   .icon / .heading2 / .heading1 markup, so one set of rules covers all of
   them. */
.easycons-page .solution-box{
  border-top: none !important;
  border-left: none !important;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  padding: 34px 26px;
  transition: background-color .3s ease, transform .3s ease;
}
.easycons-page .solution-box:hover{transform: translateY(-4px);}
.easycons-page .solution-box .icon{width:64px;height:64px;border-radius:16px;background:var(--vtc-bg-main-blue-1);display:flex;align-items:center;justify-content:center;transition:background-color .3s ease;}
.easycons-page .solution-box:hover .icon{background: var(--vtc-bg-main-bg-1);}
.easycons-page .solution-box .icon img{max-width:30px;max-height:30px;transition:filter .3s ease;}
.easycons-page .solution-box:hover .icon img{filter:brightness(0) invert(1);}
.easycons-page .solution-box .heading2 h3{font-size:19px;}
.easycons-page .solution-box .heading1 p{font-size:14.5px;line-height:1.65;}
.easycons-page .solution-section-main{background: var(--vtc-bg-bg-white);border-radius: 20px;box-shadow: 0 10px 40px rgba(24,88,202,.08);overflow: hidden;}

/* ---- Soft radial glow behind .about-img SVG/illustration ---- */
.easycons-page .about-img{position:relative;padding:30px;}
.easycons-page .about-img::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side, rgba(24,88,202,.10), rgba(24,88,202,0) 72%);border-radius:24px;z-index:0;}
.easycons-page .about-img img{position:relative;z-index:1;}

/* ---- Gradient card background behind the bottom CTA button row ---- */
.easycons-page .container.d-lg-flex.justify-content-center{
  background: linear-gradient(120deg, rgba(24,88,202,.08) 0%, rgba(74,138,254,.05) 100%);
  border-radius: 20px;
  padding-top: 34px;
  padding-bottom: 34px;
}

/* ---- Problem Statement / Impact on Business grids: 3 columns like semsto.php ----
   Only these two of the page's 5 solution-box sections got col-lg-4 in the HTML
   (marked with .grid-3col-r1); the other 3 sections stay col-lg-6 (2-column) and
   are untouched by this block. The individual border-right-0 / border-bottom-0
   utility classes on each card were hand-placed for the OLD 2-column grid and are
   now wrong for 3 columns. Rather than re-editing all 23 affected cards by hand
   (error-prone — the same mistake pattern that caused the earlier stray-border
   bug), this forces the correct border via !important + higher specificity, then
   strips it only on true right-edge / last-row cards using :nth-child position
   math. Both sections have counts where count % 3 == 1 (13 and 10 cards), so the
   final row always has exactly 1 lone card — hence "-r1" (:last-child covers it
   for both the right-edge and bottom-row removal).
   Scoped to >=992px (Bootstrap's lg breakpoint) so tablet/mobile keep rendering
   at their original col-md-6 2-column layout, where the original hand-placed
   utility classes are still correct as-is. */
@media (min-width: 992px){
  .easycons-page .grid-3col-r1 .solution-box{
    border-right: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
  }
  .easycons-page .grid-3col-r1 > div:nth-child(3n) .solution-box,
  .easycons-page .grid-3col-r1 > div:last-child .solution-box{
    border-right: none !important;
  }
  .easycons-page .grid-3col-r1 > div:last-child .solution-box{
    border-bottom: none !important;
  }
}

/* ---------------------------------------------------------------------- */
/* "Easy Construction Streamlines..." feature grid — futuristic/HUD-style  */
/* card redesign, matching the same treatment applied to e-token.php's     */
/* "Industries Served" grid (identical markup: .etoken-features-section >  */
/* .row.g-4 > .feature-box > img + h3 — a copy-paste-shared class name,    */
/* not renamed per product). Soft gradient surface, rounded-square icon    */
/* badge that glows and inverts to white on hover, a laser-line accent     */
/* sweeping in across the top edge on hover, and a faint decimal index     */
/* (01, 02...) in the corner via CSS counters (no HTML changes). A faint   */
/* dot-grid sits behind the section for texture. Only reaches this page —  */
/* every rule is prefixed `.easycons-page`, so it never touches            */
/* our-products.php, which reuses the same unscoped `.feature-box` class.  */
/* ---------------------------------------------------------------------- */
.easycons-page .etoken-features-section{position: relative; z-index: 0;}
.easycons-page .etoken-features-section::before{
  content: "";
  position: absolute;
  inset: -20px -20px auto -20px;
  height: calc(100% + 40px);
  background-image: radial-gradient(rgba(24,88,202,.14) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 40%, #000 0%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
.easycons-page .etoken-features-section .row.g-4{counter-reset: ecFeature;}
.easycons-page .feature-box{
  position: relative;
  counter-increment: ecFeature;
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%) !important;
  border: 1px solid rgba(24,88,202,.12) !important;
  border-radius: 18px !important;
  padding: 38px 22px 26px !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, border-color .35s ease;
}
.easycons-page .feature-box::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1858CA, #4A8AFE, #8ec2ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.easycons-page .feature-box::after{
  content: counter(ecFeature, decimal-leading-zero);
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(24,88,202,.30);
}
.easycons-page .feature-box:hover{
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(24,88,202,.16);
  border-color: rgba(24,88,202,.3) !important;
}
.easycons-page .feature-box:hover::before{transform: scaleX(1);}
/* NOTE: the badge background/glow lives on .icon-wrap (a <span> wrapping the
   <img>), and the color-invert filter is applied only to the <img> inside it.
   Putting both the background AND the filter on the SAME element was the bug
   here — `filter` renders the whole element (background included), so
   brightness(0) invert(1) inverted the blue gradient background to solid
   white right along with the icon, hiding it completely on hover. Keeping
   them on separate elements (wrapper = background, img = filter) fixes it. */
.easycons-page .feature-box .icon-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eaf2ff, #dfebff);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.9), 0 6px 16px rgba(24,88,202,.10);
  transition: background .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.easycons-page .feature-box .icon-wrap img{
  display: block;
  width: 28px;
  height: 28px;
  -o-object-fit: contain;
  object-fit: contain;
  transition: filter .4s ease;
}
.easycons-page .feature-box:hover .icon-wrap{
  background: linear-gradient(135deg, #1858CA, #4A8AFE);
  box-shadow: 0 0 0 6px rgba(74,138,254,.16), 0 12px 26px rgba(24,88,202,.35);
  transform: scale(1.08) rotate(-4deg);
}
.easycons-page .feature-box:hover .icon-wrap img{
  filter: brightness(0) invert(1);
}
.easycons-page .feature-box h3{
  position: relative;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--vtc-text-heading-text-2);
  transition: color .3s ease;
}
.easycons-page .feature-box:hover h3{color: var(--vtc-bg-main-bg-1);}

@media (max-width: 767px){
  .easycons-page .feature-box{padding: 30px 18px 20px !important;}
}