/* =========================================================================
   eSSL Pune — Site Redesign Stylesheet
   Purpose : Re-skin the existing Bootstrap 4 markup with a new visual
             identity. No HTML/content was changed to produce this file —
             it only restyles existing classes/elements.
   Load order: this file must be linked AFTER the framework "combine" CSS
             (and after any page-level <style> blocks) so these rules win
             the cascade without needing !important everywhere.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* ---- brand tokens: dark navy + glowing orange — deliberately distinct
     from the stock Bootstrap blue/white template shared across the eSSL
     site family ---- */
  --ink:        #070B14;   /* darkest navy — reserved for accent panels (nav / footer / hero / CTA blocks) */
  --ink-2:      #0D1420;
  --ink-soft:   #16223A;
  --teal:       #FF6A1A;   /* primary accent (glowing orange) */
  --teal-dark:  #E85A0A;
  --amber:      #FFB020;   /* secondary accent (amber-orange glow) */
  --amber-dark: #E88800;
  --paper:      #05070C;   /* page background — dark */
  --paper-2:    #0D1420;   /* secondary dark surface */
  --card:       #121A2B;   /* card / panel surface */
  --border:     #232F45;   /* dark hairline border */
  --text:       #E8ECF3;   /* primary text — light, for dark surfaces */
  --text-soft:  #AEB9CC;
  --text-mute:  #7C8AA8;
  --white:      #FFFFFF;
  --radius:     14px;
  --radius-sm:  8px;
  --radius-lg:  22px;
  --shadow-sm:  0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md:  0 8px 24px -8px rgba(15,23,42,.18);
  --shadow-lg:  0 20px 45px -15px rgba(11,18,32,.35);
  --glow:       0 0 16px rgba(255,106,26,.55), 0 0 2px rgba(255,106,26,.8);
  --glow-soft:  0 0 22px rgba(255,106,26,.28);
  --font-head:  'Manrope', 'Segoe UI', sans-serif;
  --font-body:  'Inter', 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Courier New', monospace;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                    */
/* ---------------------------------------------------------------------- */
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body) !important;
  color: var(--text) !important;
  background: var(--paper) !important;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head) !important;
  color: var(--text);
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
h1{
  color: var(--teal) !important;
  text-shadow: 0 0 18px rgba(255,106,26,.4);
}
p, li, td, th, span, label{ color: var(--text-soft); }
a{ color: var(--teal-dark); }
a:hover{ color: var(--teal); text-decoration:none; }
::selection{ background: var(--teal); color:#fff; }

/* thin brand scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--paper-2); }
::-webkit-scrollbar-thumb{ background: var(--ink-soft); border-radius:8px; }

.container, .container-fluid{ position:relative; }

/* generic section rhythm */
.section{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
.section.p-0{ padding-top:0; padding-bottom:0; }
.section-gap{ padding-top: 3rem; padding-bottom: 3rem; }

/* ---------------------------------------------------------------------- */
/* Top utility bar + main nav                                             */
/* ---------------------------------------------------------------------- */
.top-header{
  background: var(--ink) !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-header span{
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .01em;
  color: rgba(255,255,255,.82) !important;
}

.navigation{
  background: var(--ink) !important;
  background-image: linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%) !important;
  border-bottom: 1px solid var(--teal);
  box-shadow: 0 1px 0 rgba(255,106,26,.35), var(--shadow-md);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.navigation .navbar{ background: transparent !important; padding: .5rem 0; justify-content:center !important; }
.navbar-brand{
  display:inline-flex !important;
  align-items:center;
}
.navbar-brand img{ max-height: 44px; width:auto; }
.header-tagline{
  display:inline-block;
  margin-left: .9rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--teal);
  text-shadow: 0 0 10px rgba(255,106,26,.5);
  vertical-align: middle;
}
@media (max-width: 767px){ .header-tagline{ display:block; margin-left:0; margin-top:.4rem; } }

/* Top menu removed from view — the eSSL/Bootstrap mega-menu markup stays
   in the page source (for crawlability / internal linking) but is not
   shown; the footer sitemap is the real navigation now. */
.navbar-toggler,
.navbar-collapse{
  display: none !important;
}

.navbar-nav .nav-link{
  font-family: var(--font-head);
  font-weight: 700 !important;
  font-size: .9rem;
  color: rgba(255,255,255,.88) !important;
  padding: .95rem .9rem !important;
  position: relative;
  transition: color .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus{ color: var(--teal) !important; }
.navbar-nav .nav-item.dropdown > .nav-link::after{
  border-top-color: currentColor;
  vertical-align: .18em;
  opacity:.75;
}
.navbar-nav .nav-item.show > .nav-link,
.navbar-nav .nav-item.active > .nav-link{ color: var(--teal) !important; }

/* dropdown / mega-menu panels — kept light so the dense link lists stay
   easy to scan, framed with a dark header strip for contrast against the
   dark bar it drops from */
.dropdown-menu{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 1rem !important;
  margin-top: 0 !important;
  border-top: 3px solid var(--teal) !important;
}
.dropdown-item{
  border-radius: 8px;
  padding: .45rem .7rem !important;
  font-size: .88rem;
  color: var(--text) !important;
  font-weight: 500;
}
.dropdown-item:hover, .dropdown-item:focus{
  background: var(--paper-2) !important;
  color: var(--teal-dark) !important;
}
.dropdown-menu h5{
  font-size: .8rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text) !important;
  font-weight: 800 !important;
  border-bottom: 2px solid var(--teal);
  display:inline-block;
  padding-bottom: .3rem;
  margin: .6rem 0 .5rem !important;
}
.dropdown-menu .nav-link{
  padding: 0 !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}

/* ---------------------------------------------------------------------- */
/* Page-title / hero band (used at top of every inner page)               */
/* ---------------------------------------------------------------------- */
.bg-cover{
  background:
    radial-gradient(1100px 260px at 15% -20%, rgba(255,106,26,.30), transparent 60%),
    linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 55%, #142038 100%) !important;
  background-size: cover;
  position: relative;
  overflow: hidden;
}
.bg-cover::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, var(--amber), var(--teal));
  height:3px; top:auto; bottom:0;
}
.bg-cover .breadcrumb{ background: transparent !important; margin-bottom:0 !important; }
.bg-cover .breadcrumb-item, .bg-cover .breadcrumb-item a{
  color: rgba(255,255,255,.72) !important;
  font-weight: 600;
  font-size: .88rem;
}
.bg-cover .breadcrumb-item.active{ color: var(--teal) !important; text-shadow: 0 0 12px rgba(255,106,26,.6); }
.bg-cover .breadcrumb-item + .breadcrumb-item::before{ color: rgba(255,255,255,.4) !important; }

/* ---------------------------------------------------------------------- */
/* Typography helpers used across generated pages                         */
/* ---------------------------------------------------------------------- */
.subtitle{
  color: var(--teal-dark) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: .78rem !important;
  letter-spacing: .09em;
  font-family: var(--font-mono);
}
.section-title{
  font-size: 1.9rem !important;
  margin-top: .35rem !important;
}
.section-title-border{
  display:inline-block;
  width: 46px; height: 4px;
  background: var(--amber) !important;
  border-radius: 4px;
  margin-bottom: .6rem;
  box-shadow: var(--glow-soft);
}
.section-label{
  color: var(--teal-dark) !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .75rem;
  font-family: var(--font-mono);
}

/* product long-form content block */
.product-content h1{ font-size: 2rem !important; margin-bottom: 1rem; }
.product-content h2{
  font-size: 1.4rem !important;
  margin-top: 2.1rem;
  padding-top: .3rem;
  border-top: 1px solid var(--border);
}
.product-content h3{ font-size: 1.1rem !important; color: var(--text); }
.product-content p{ line-height: 1.75; }
.product-content ul{ padding-left: 1.1rem; }
.product-content ul li{
  margin-bottom: .5rem;
  line-height: 1.6;
  list-style: none;
  position: relative;
  padding-left: 1.4rem;
}
.product-content ul li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:8px; height:8px; border-radius:2px;
  background: var(--teal);
  transform: rotate(45deg);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  font-family: var(--font-head);
  font-weight: 700 !important;
  border-radius: 999px !important;
  letter-spacing: .01em;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.btn-primary{
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #0B1220 !important;
  box-shadow: var(--glow-soft);
}
.btn-primary:hover{
  background: var(--teal-dark) !important;
  border-color: var(--teal-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--glow), var(--shadow-md);
}
.btn-secondary{
  background: var(--paper-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.btn-outline-primary{
  color: var(--teal) !important;
  border-color: var(--teal) !important;
  background: transparent !important;
}
.btn-outline-primary:hover{
  background: var(--teal) !important;
  color: #0B1220 !important;
  box-shadow: var(--glow-soft);
}
.btn.hover-ripple{ box-shadow: var(--shadow-sm); }
.btn.hover-ripple:hover{ transform: translateY(-2px); box-shadow: var(--glow), var(--shadow-md); }
.btn-sm{ padding:.45rem 1.05rem !important; font-size:.82rem !important; }

/* ---------------------------------------------------------------------- */
/* Cards / product tiles                                                  */
/* ---------------------------------------------------------------------- */
.card{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
  background: var(--card) !important;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--glow-soft), var(--shadow-md); }
.card-body{ padding: 1.35rem !important; }
.card-title{ font-family: var(--font-head); font-weight: 800 !important; color: var(--text); }

/* colour badges some product cards use — technical monospace labels */
.prod-tag{
  display:inline-block;
  background: rgba(255,106,26,.12) !important;
  color: var(--teal-dark) !important;
  border: 1px solid rgba(255,106,26,.4) !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: .7rem;
  padding: .2rem .65rem;
  letter-spacing: .02em;
  font-family: var(--font-mono);
}
.meta-pill{
  display:inline-block;
  background: var(--paper-2) !important;
  color: var(--text) !important;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border: 1px solid var(--border) !important;
  font-family: var(--font-mono);
}

/* ---------------------------------------------------------------------- */
/* FAQ blocks (both static <div class="faq"> pages and card-style pages)  */
/* ---------------------------------------------------------------------- */
.faq h3{
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: .75rem 1rem;
  font-size: 1rem !important;
  margin-top: 1rem !important;
  margin-bottom: .4rem !important;
  color: var(--text);
}
.faq p{ padding: 0 1rem .25rem; }

.faq-item{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem !important;
  box-shadow: var(--shadow-sm);
}
.faq-question, .faq-q{
  color: var(--text);
  font-family: var(--font-head);
  font-weight: 700 !important;
  display:flex; align-items:center; gap:.6rem;
}
.faq-question::before, .faq-q::before{
  content:"Q";
  flex: 0 0 auto;
  width: 24px; height:24px;
  border-radius:50%;
  background: var(--ink);
  color:#fff;
  font-size:.72rem;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.faq-answer, .faq-a{ color: var(--text-soft); margin-top:.4rem; }
.faq-icon{ color: var(--teal) !important; }

/* ---------------------------------------------------------------------- */
/* Stats / flow / process / "why choose" style blocks                     */
/* ---------------------------------------------------------------------- */
.stat-num{
  font-family: var(--font-head);
  font-weight: 800 !important;
  color: var(--teal);
  text-shadow: 0 0 14px rgba(255,106,26,.45);
  font-size: 2.1rem !important;
}
.stat-label{ color: var(--text-mute); font-weight:600; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; }

.why-item, .intro-item, .challenge-item{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.why-item:hover, .intro-item:hover, .challenge-item:hover{
  transform: translateY(-3px);
  box-shadow: var(--glow-soft), var(--shadow-md);
  border-color: var(--teal);
}
.ci-icon, .ii-icon{
  color: var(--teal-dark) !important;
  background: rgba(255,106,26,.12);
  width:48px; height:48px;
  border-radius: 12px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.3rem;
}

.flow-step{ position:relative; }
.flow-num{
  background: var(--ink) !important;
  color:#fff !important;
  font-family: var(--font-mono);
  font-weight:700;
  box-shadow: var(--glow-soft);
}
.flow-line{ background: var(--border) !important; }
.result-stat{ color: var(--teal); text-shadow: 0 0 14px rgba(255,106,26,.45); font-family: var(--font-head); font-weight:800; }

/* circle bullet lists (spec lists etc.) */
.list-styled.style-circle{ padding-left: 0; list-style:none; }
.list-styled.style-circle li{
  position:relative;
  padding-left: 1.35rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom:.55rem;
}
.list-styled.style-circle li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:7px; height:7px; border-radius:50%;
  background: var(--amber);
}

/* ---------------------------------------------------------------------- */
/* Tables                                                                  */
/* ---------------------------------------------------------------------- */
table{ border-color: var(--border) !important; }
th{
  background: var(--ink) !important;
  color:#fff !important;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-size:.78rem;
  letter-spacing:.04em;
}
td{ background: var(--card); }
tr:nth-child(even) td{ background: var(--paper-2); }

/* price / highlight boxes some landing pages use */
.price-box{
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-top: 4px solid var(--amber) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
footer .section.bg-secondary{
  background:
    radial-gradient(700px 240px at 90% -10%, rgba(255,106,26,.20), transparent 60%),
    var(--ink) !important;
  padding-top: 3.5rem;
  padding-bottom: 2rem;
  border-top: 3px solid var(--teal);
}
footer h4{
  color:#fff !important;
  font-size:.82rem !important;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-family: var(--font-mono);
  border-bottom: 1px solid rgba(255,106,26,.3);
  padding-bottom: .5rem;
}
footer p, footer li, footer a{ color: rgba(255,255,255,.72) !important; }
footer a{ transition: color .15s ease, text-shadow .15s ease; }
footer a:hover{ color: var(--teal) !important; text-shadow: 0 0 10px rgba(255,106,26,.7); }
footer .list-styled, footer .list-unstyled{ padding-left:0; list-style:none; }
footer i.fa{ color: var(--teal) !important; }

.whatsapp-icon a{
  box-shadow: var(--shadow-lg) !important;
  border-radius: 50%;
}

/* ---------------------------------------------------------------------- */
/* Misc utility overrides                                                  */
/* ---------------------------------------------------------------------- */
.text-primary{ color: var(--teal-dark) !important; }
.bg-primary{ background: var(--ink) !important; }
.badge-primary{ background: var(--teal) !important; }
.text-muted{ color: var(--text-mute) !important; }
.text-dark{ color: var(--text) !important; }
.text-secondary{ color: var(--text-soft) !important; }
.text-body{ color: var(--text) !important; }
.bg-light{ background: var(--card) !important; }
.bg-white{ background: var(--card) !important; }
hr{ border-color: var(--border); }

/* image frame used on product pages: .bg-contain */
.bg-contain{
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* small screens: tighten hero + nav spacing */
@media (max-width: 767px){
  .section{ padding-top: 2.2rem; padding-bottom: 2.2rem; }
  .navbar-brand img{ max-height: 40px; }
  .section-title{ font-size: 1.5rem !important; }
}