/* ============================================================
   modern-2026.css  —  additive refresh layer for Sriansh Solar
   Loaded LAST so it overrides the ranzy theme. Non-destructive:
   delete this <link> to revert to the original look instantly.
   ============================================================ */
:root{
  --s-navy:#0c1a4b;
  --s-navy-2:#132a6b;
  --s-orange:#ff7a00;
  --s-orange-2:#ff9d00;
  --s-ink:#1b2333;
  --s-muted:#5b6472;
  --s-line:#e7ebf2;
  --s-bg:#f6f8fc;
  --s-radius:16px;
  --s-shadow:0 10px 30px rgba(12,26,75,.10);
  --s-shadow-lg:0 18px 50px rgba(12,26,75,.16);
  --s-ease:cubic-bezier(.22,.61,.36,1);
}

html{scroll-behavior:smooth;}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  color:var(--s-ink);
  background:var(--s-bg);
}
img{max-width:100%;}
::selection{background:var(--s-orange);color:#fff;}

/* --- Buttons: gradient, pill, hover lift ------------------- */
.btn,.btn-2877,.btn-one,.btn-two,.btn-three,.btn-style-one,
.btn-danger,.btn-success{
  border-radius:50px !important;
  font-weight:600 !important;
  letter-spacing:.2px;
  padding:12px 30px !important;
  border:none !important;
  transition:transform .28s var(--s-ease),box-shadow .28s var(--s-ease),filter .28s var(--s-ease) !important;
  box-shadow:0 8px 20px rgba(255,122,0,.28);
}
.btn:hover,.btn-2877:hover,.btn-one:hover,.btn-two:hover,.btn-three:hover,
.btn-style-one:hover,.btn-danger:hover,.btn-success:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(255,122,0,.38);
  filter:brightness(1.03);
}
.btn-2877,.btn-one,.btn-style-one,.btn-success{
  background:linear-gradient(135deg,var(--s-orange),var(--s-orange-2)) !important;
  color:#fff !important;
}
.btn-two,.btn-three{
  background:linear-gradient(135deg,var(--s-navy),var(--s-navy-2)) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(12,26,75,.25);
}
.btn-danger{background:linear-gradient(135deg,#ff4d4f,#ff7a45) !important;color:#fff !important;}

/* --- Section titles: modern accent underline -------------- */
.section-title .title-heading,.title-heading,.title-section{
  font-weight:800 !important;
  letter-spacing:-.4px;
}
.section-title .title-line,.title-line{
  background:linear-gradient(90deg,var(--s-orange),var(--s-orange-2)) !important;
  height:4px !important;border-radius:4px;
}
.section-title span,.title-inner-page span{color:var(--s-orange) !important;}

/* --- Inner-page hero / breadcrumb ------------------------- */
.header-breadcrumb,.title-inner-page{
  position:relative;
}
.header-breadcrumb:before,.title-inner-page:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(12,26,75,.86),rgba(19,42,107,.72));
  z-index:0;
}
.header-breadcrumb>*,.title-inner-page>*{position:relative;z-index:1;}

/* --- Cards: service / feature / about boxes --------------- */
.features,.features .single-item,.service-box,.single-service,
.about .about-img,.about-img-two,.about-one,.about-two,
[class*="service"] .item,[class*="feature"] .item{
  border-radius:var(--s-radius);
  overflow:hidden;
  transition:transform .35s var(--s-ease),box-shadow .35s var(--s-ease);
}
.features:hover,.features .single-item:hover,.service-box:hover,
.single-service:hover,[class*="service"] .item:hover,
[class*="feature"] .item:hover{
  transform:translateY(-6px);
  box-shadow:var(--s-shadow-lg);
}

/* --- Gallery images: rounded + zoom on hover -------------- */
[class*="gallery"] img,.gallery-items img,.portfolio img{
  border-radius:14px;
  transition:transform .5s var(--s-ease),box-shadow .5s var(--s-ease);
  box-shadow:var(--s-shadow);
}
[class*="gallery"] a:hover img,.gallery-items a:hover img,.portfolio a:hover img{
  transform:scale(1.04);
  box-shadow:var(--s-shadow-lg);
}

/* --- Counters ---------------------------------------------- */
.counter-image-css{filter:drop-shadow(0 4px 8px rgba(12,26,75,.18));}

/* --- Contact bars / meta cards ---------------------------- */
.contact-us-bar,.contact-us-meta{
  border-radius:var(--s-radius);
  box-shadow:var(--s-shadow);
  transition:transform .3s var(--s-ease),box-shadow .3s var(--s-ease);
}
.contact-us-meta:hover{transform:translateY(-4px);box-shadow:var(--s-shadow-lg);}

/* --- Footer polish ---------------------------------------- */
.footer,.footer-bar{
  background:linear-gradient(180deg,var(--s-navy),#081239) !important;
}
.footer a,.footer-link a{transition:color .25s var(--s-ease),padding .25s var(--s-ease);}
.footer a:hover,.footer-link a:hover{color:var(--s-orange) !important;padding-left:4px;}
.footer-logo img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));}

/* --- Back-to-top button ----------------------------------- */
.scroll-to-top,#scroll-to-top,.back-to-top,[class*="scroll-top"]{
  border-radius:14px !important;
  background:linear-gradient(135deg,var(--s-orange),var(--s-orange-2)) !important;
  box-shadow:0 10px 24px rgba(255,122,0,.4) !important;
  transition:transform .28s var(--s-ease) !important;
}
.scroll-to-top:hover,#scroll-to-top:hover,.back-to-top:hover,
[class*="scroll-top"]:hover{transform:translateY(-4px) scale(1.05);}

/* --- Nice focus + link transitions ------------------------ */
a{transition:color .2s var(--s-ease);}
a:focus-visible,button:focus-visible{
  outline:3px solid rgba(255,122,0,.45);outline-offset:2px;border-radius:6px;
}

/* --- Subtle entrance for main sections -------------------- */
@media (prefers-reduced-motion:no-preference){
  section{animation:s-fade .7s var(--s-ease) both;}
  @keyframes s-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}