.connection-flow {
    padding: 90px 0;
    background: #ffffff;
    color: #222;
}

.flow-header {
    text-align: center;
    margin-bottom: 70px;
}

.flow-header h2 {
    color: #000000;      /* pure black */
    font-weight: 700;
}

.flow-header p {
    color: #000000;      /* black subtitle */
    opacity: 0.75;       /* thoda soft look */
}


/* Flow layout */
.flow-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* Step box */
.flow-step {
    background: #ffffff;
    padding: 35px 22px;
    text-align: center;
    border-radius: 16px;
    width: 100%;
    max-width: 230px;
    position: relative;
    border: 1px solid #e9ecef;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

.flow-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* Step number */
.step-count {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: #fe5e15;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icons */
.flow-icon {
    font-size: 42px;
    margin: 22px 0;
    color: #ffc107; /* solar yellow */
}

.flow-step h4 {
    font-weight: 600;
    color: #212529;
}

.flow-step p {
    font-size: 14px;
    color: #6c757d;
}

/* Connector line */
.flow-line {
    flex: 1;
    height: 3px;
    background: linear-gradient(
        to right,
        transparent,
        #fe5e15,
        transparent
    );
}

/* Animation */
.flow-step {
    animation: slideUp 1s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .flow-wrapper {
        flex-direction: column;
    }

    .flow-line {
        width: 3px;
        height: 40px;
        background: linear-gradient(
            to bottom,
            transparent,
            #fe5e15,
            transparent
        );
    }
}


/* ********************PPA Section **************************** */
.ppa-overlay {
    padding: 100px 0;
    background: #ffffff;
}

.ppa-overlay-wrap {
    max-width: 1200px;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Image */
.ppa-img {
    flex: 1;
    position: relative;
}

.ppa-img img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 18px;
}

/* Content */
.ppa-text {
    flex: 1;
    background: #ffffff;
    padding: 45px;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(0,0,0,0.15);
    margin-left: -120px; /* overlap on image */
    z-index: 2;
    animation: slideIn 1.2s ease forwards;
}

.ppa-text h2 {
    font-size: 38px;
    margin-bottom: 15px;
    color: #000;
}

.ppa-text p {
    color: #555;
    margin-bottom: 20px;
}

.ppa-text ul {
    padding-left: 0;
    list-style: none;
}

.ppa-text li {
    margin-bottom: 10px;
    color: #333;
}

/* Animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive */
@media (max-width: 992px) {
    .ppa-overlay-wrap {
        flex-direction: column;
    }

    .ppa-text {
        margin-left: 0;
        margin-top: -80px;
        text-align: center;
    }

    .ppa-img img {
        height: 300px;
    }
}
.animate-on-scroll {
    opacity: 0;
    transition: all 1s ease;
}

.from-left {
    transform: translateX(-60px);
}

.from-right {
    transform: translateX(60px);
}

.animate-on-scroll.show {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================= */
.ds-timeline{
  padding:100px 0;
  background:#fff;
}

.ds-head{
  text-align:center;
  margin-bottom:70px;
}

.ds-head h2{
  font-size:40px;
  font-weight:800;
  color:white;
}

.ds-head p{
  color:white;
}

/* Timeline base */
.timeline{
  position:relative;
  max-width:1000px;
  margin:auto;
}

.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:100%;
  background:#fd5d15;
  transform:translateX(-50%);
}

/* Items */
.tl-item{
  width:50%;
  padding:20px 40px;
  position:relative;
}

.tl-item.left{ left:0; text-align:right; }
.tl-item.right{ left:50%; text-align:left; }

/* Content box */
.tl-content{
  background:#fff;
  padding:28px;
  border-radius:16px;
  border:1px solid #e9ecef;
  box-shadow:0 12px 35px rgba(0,0,0,0.1);
  position:relative;
}

/* Icon */
.tl-icon{
  width:46px;
  height:46px;
  border-radius:50%;
  background:#fd5d15;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  position:absolute;
  top:20px;
}

.left .tl-icon{ right:-23px; }
.right .tl-icon{ left:-23px; }

.tl-content h4{
  margin:0 21px 16px;
  font-size:18px;
  font-weight:700;
}

.tl-content p{
  margin:0;
  font-size:14px;
  color:#555;
  line-height:1.5;
}

/* Responsive */
@media(max-width:768px){
  .timeline::before{ left:20px; }
  .tl-item{
    width:100%;
    padding-left:60px;
    padding-right:15px;
  }
  .tl-item.left,
  .tl-item.right{
    left:0;
    text-align:left;
  }
  .tl-icon{
    left:0 !important;
    right:auto !important;
  }
}
.bg-image{
    position: relative;
    background-image: url("/img/survy.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay */
.bg-image::before{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(0,0,0,0.55); /* dark overlay */
    z-index:0;
}

/* Content upar rahe */
.bg-image > *{
    position: relative;
    z-index:1;
}

/* Text color adjust */

/* ************************************** */
.pmx-section{
  padding:100px 0;
  background:#ffffff;
}

.pmx-container{
  max-width:1200px;
  margin:auto;
  padding:0 15px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:start;
}

/* Left side */
.pmx-left h2{
  font-size:38px;
  font-weight:800;
  color:#000;
  margin-bottom:15px;
}

.pmx-left p{
  color:#555;
  line-height:1.6;
  margin-bottom:30px;
}

/* Progress bar */
.pmx-progress{
  margin-top:20px;
}

.pmx-bar{
  width:100%;
  height:8px;
  background:#e9ecef;
  border-radius:10px;
  overflow:hidden;
  margin-bottom:6px;
}

.pmx-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#fe5e15,#20c997);
  border-radius:10px;
}

.pmx-progress small{
  color:#666;
}

/* Right steps */
.pmx-right{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.pmx-step{
  display:flex;
  gap:16px;
  padding:22px;
  border-radius:16px;
  border:1px solid #eef1f4;
  background:#f9fafb;
  transition:0.35s;
}

.pmx-step:hover{
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,0.1);
  transform:translateY(-4px);
}

.pmx-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  background:#fe5e15;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  flex-shrink:0;
}

.pmx-step h4{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  color:#111;
}

.pmx-step p{
  margin:0;
  font-size:14px;
  color:#555;
  line-height:1.5;
}

/* Responsive */
@media(max-width:992px){
  .pmx-container{
    grid-template-columns:1fr;
  }
}
.pmx-section{
  padding:100px 0;
  background:
    radial-gradient(circle at top left, #eef4ff 0%, transparent 40%),
    radial-gradient(circle at bottom right, #f3fff8 0%, transparent 40%),
    #ffffff;
}

/* *********************************** */
.energization-section{
  padding:100px 0;
  background: linear-gradient(
    135deg,
    #f8fbff 0%,
    #f3f7fc 60%,
    #ffffff 100%
  );
}

.energization-container{
  max-width:900px;
  margin:auto;
  padding:0 15px;
  text-align:center;
}

.energization-header h2{
  font-size:40px;
  font-weight:800;
  color:#000;
  margin-bottom:10px;
}

.energization-header p{
  color:#555;
  font-size:16px;
  margin-bottom:50px;
}

.energization-content{
  background:#ffffff;
  padding:45px;
  border-radius:18px;
  border:1px solid #e9ecef;
  box-shadow:0 18px 45px rgba(0,0,0,0.12);
}

.energization-content p{
  color:#444;
  line-height:1.7;
  margin-bottom:20px;
}

.energization-points{
  list-style:none;
  padding:0;
  margin:25px 0;
  text-align:left;
}

.energization-points li{
  margin-bottom:12px;
  padding-left:28px;
  position:relative;
  color:#333;
}

.energization-points li::before{
  content:"⚡";
  position:absolute;
  left:0;
  top:0;
}

.energization-note{
  font-weight:600;
  color:#fe5e15;
}

.site-footer{
  background:#0b1d2a;
  color:#cfd8dc;
  padding-top:70px;
  font-size:15px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  padding:0 15px;
  display:flex;
  gap:60px;
}

/* Left section */
.footer-left{
  flex:1;
}

.footer-logo{
  width:160px;
  margin-bottom:18px;
}

.footer-left p{
  line-height:1.7;
  color:#b0bec5;
  margin-bottom:22px;
}

/* Social icons */
.footer-social a{
  display:inline-flex;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fe5e15;
  color:#fff;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  transition:0.3s ease;
  text-decoration:none;
}

.footer-social a:hover{
  background:#20c997;
  transform:translateY(-3px);
}

/* Right section */
.footer-right{
  flex:2;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

.footer-col h4{
  color:#ffffff;
  margin-bottom:18px;
  font-weight:700;
}

.footer-col a{
  display:block;
  color:#b0bec5;
  margin-bottom:10px;
  text-decoration:none;
  transition:0.3s ease;
}

.footer-col a:hover{
  color:#ffffff;
  padding-left:4px;
}

.footer-col p{
  margin-bottom:10px;
  color:#b0bec5;
}

.footer-col i{
  margin-right:8px;
  color:#fe5e15;
}

/* Bottom bar */
.footer-bottom{
  margin-top:50px;
  padding:18px 15px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.1);
  color:#90a4ae;
  font-size:14px;
}

/* Responsive */
@media(max-width:992px){
  .footer-container{
    flex-direction:column;
  }

  .footer-right{
    grid-template-columns:1fr;
  }

  .footer-left{
    text-align:center;
  }

  .footer-social{
    justify-content:center;
  }
}
/* ************* */
.whatsapp-float{
 position: fixed;
    right: 30px;
    bottom: 92px;
    width: 68px;
    height: 68px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    z-index: 9999;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    transition: 0.3s ease;
}

.whatsapp-float:hover{
  transform: scale(1.08);
  background: #20b858;
}