*{
    margin: 0px;
    padding: 0;
}

:root{
     --primary: #172d66;
     --secondary: white;

}

.inner-section {
     margin-bottom: 30px;
}


.inner-section .main-top-bar{
     background: #172d66;
    color: #fff;
    padding: 20px 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
       


}

 .main-top-bar .inner-logo-box {
    display: flex;
    gap: 6px;
}

.left-side .inner-logo-box span{
        width: 35px;
    height: 22px;
    background: white;
    border-radius: 2px;
    display: inline-block;

}

.goal-section{
    margin-bottom:30px;
}

.main-top-bar-2{
        background: #007bff14;
    display: flex;
    justify-content: end;
    color: white;
    padding: 10px 30px;

}

.main-top-bar-2 .h1-heading{
    color: black;
    font-size: 20px;
   font-weight: 600;
}

.left-side .main-heading-box{
    
   background: #172d66;
    color: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    width: 15%;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    top: 8%;
    margin-left: 30px;
}

.two-section{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.section-one{
    width: 50%;
}



.left-side .sub-title{
   
    font-size: 25px;
margin-top:35px;
padding: 10px 20px;
display: inline-block;
background-color: var(--primary);
color: var(--secondary);
}

.left-side .left-side-text{
   
    text-align: justify;
    margin-left: 20px;
    padding-top: 20px;
}

.section-two-img-box img{
    height: 500px;
    width: 100%;
    object-fit: cover;
    border-radius: 25px;
    margin-top: 25px;
}


/* card */
.info-card{
  background:#007bff14;
      margin-top: 50px;

  padding:30px 30px 30px 30px;
  border-radius:25px 0px 30px 25px;
  border: 1px solid var(--primary);
  position:relative;
  transition:.4s ease;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* hover animation */
.info-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}

/* title */
.info-card .title{
  background:var(--primary);
  color:#fff;
  padding:10px 25px;
  position: absolute;
  top: -40px;
  display:inline-block;
  border-radius:12px;
  font-weight:700;
  font-size:22px;
  margin-bottom:20px;
     
    left: 0;
    width: 80% !important;
    max-width: 80%;
}

/* paragraph */
.info-card p{
  font-size:16px;
  margin:0;
  line-height:1.6;
}

/* image */
.image-box{
  overflow:hidden;
  border-radius:25px;
}

.image-box img{
  width:100%;
  height: 400px;
  object-fit: cover;
  transition:.5s;
}

.image-box:hover img{
  transform:scale(1.05);
}

/* mobile spacing */
@media(max-width:768px){
  .info-card{
    padding:25px;
  }
}



/* title */
.goal-title{
  background:var(--primary);
  color:#fff;
  width:80%;
  padding:14px 30px;
  display:inline-block;
  border-radius:14px;
  font-weight:700;
  font-size:22px;
}

/* list items */
.goal-item{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  transition:.3s;
}

/* icon box */
.goal-item span{
  width:55px;
  height:55px;
  background:#007bff14;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-size:20px;
  flex-shrink:0;
}

/* text */
.goal-item p{
  margin:0;
  font-size:17px;
}

/* hover effect */
.goal-item:hover{
  transform:translateX(8px);
}

/* image */
.goal-img{
  overflow:hidden;
  border-radius:25px;
}

.goal-img img{
  width:100%;
  transition:.5s;
   height: 400px;
  object-fit: cover;
}

.goal-img:hover img{
  transform:scale(1.05);
}

/* mobile */
@media(max-width:768px){
  .goal-item{
    gap:12px;
  }
}


/* ===== top header bar ===== */
.clients-topbar{
  background:#007bff14;
  padding:25px 0;
  position:relative;
  margin:15px;
}

/* title badge */
.clients-title{
  background:var(--primary);
  color:#fff;
  padding:12px 30px;
  border-radius:14px;
  font-weight:700;
  margin:0;
  width:30%;
  font-size:25px;
}

/* company name */
.company-name{
  color:#000000;
  width:100%;
      text-align: end;
  font-weight:600;
  font-size:18px;
}

/* ===== logo cards ===== */
.logo-card{
  background:#fff;
  padding:30px;
  border-radius:18px;
  border:2px solid #8c1b0f20;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  transition:.35s;
  height:150px;
    margin-bottom: 20px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.client-box-top{
    display:flex;
    align-items: center;
}

.logo-card img{
  max-height:100px;
  object-fit:contain;
}

/* hover effect */
.logo-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,.15);
  border-color:var(--primary);
}

/* mobile */
@media(max-width:768px){
  .company-name{
    font-size:14px;
  }
}



/*map css*/

 .page{
        width:100%;
        background:#fff;
        border-radius:4px;
        overflow:hidden;
    }

    /* TOP BAR */
    .top-bar{
        background:#172d66;
        color:#fff;
        padding:10px 30px;
        display:flex;
        justify-content:flex-end;
        align-items:center;
    }
    .top-bar .logo-box{
        display:flex;
        gap:6px;
    }
    .top-bar .logo-box span{
        width:35px;
        height:12px;
        background:white;
        border-radius:2px;
        display:inline-block;
    }

    .top-bar-2 .h1-heading{
        color: #000000;
        font-weight:600;
        font-size: 20px;
    }


/*top bar 2*/


 .top-bar-2{
     
        background:#007bff14;
       display:flex;
       justify-content:end;
       color:white;
           padding: 10px 30px;
      
 }

    /* MAIN WRAP */
    .main{
     
    }
    .section-row{
        display:flex;
        gap:40px;
    }
    .left, .right{flex:1;}

    /* Left map block */
    .state-box-title{
        background:#172d66;
        color:#fff;
        padding:8px 12px;
        border-radius:10px;
        width:40%;
        font-weight:bold;
        position: absolute;
      top:88px;
          font-size: 25px;
       margin-left: 30px;
    }
    .state-box{
        /*background:#f7e4b2;*/
        border-radius:0 0 4px 4px;
        padding:10px 12px;
        width:100%;
        margin-bottom:20px;
    }
   .india-map{
    position:relative;
    width:100%;
    height:100%;
    border-radius:4px;
   
}

    /*map=img*/

.map-img{
    max-width: 100%;

    position: absolute;
    left: 8%;
}
.india-map img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.state-list{
    position:absolute;
    top:-15px;
    right:10px;
   
    padding:8px 10px;
    font-size:11px;
    line-height:1.4;
    border-radius:3px;
    font-weight: 800;

}


    /* Right text block */
    .headline{
        font-size:39px;
        font-weight:bold;
      line-height: 1.3;
        text-align: left;
    }
    .subtext{
         font-size:39px;
        font-weight:bold;
       text-align: left;
        margin-bottom:12px;
        color:#b13b2d;
        line-height: 1.3;
        
    }
    .yellow-box{
        background:#007bff14;
        padding:28px 25px;
        border-radius:6px;
        font-size:18px;
        line-height:1.4;
        text-align: justify;
    }

    /* Middle banner text */
    .mid-banner{
        display:inline-block;
        background:#172d66;
        color:white;
        padding:8px 44px;
        border-radius:25px;
        font-size:17px;
        text-align:center;
        margin:22px 0 10px 80px;
        width:77%;
    }

    /* Chart area */
    .chart-wrap{
        border:3px solid #172d66;
        border-radius:6px;
        padding:16px 20px 22px;
    }
    .chart-title{
        text-align:center;
        font-weight:bold;
        margin-bottom:18px;
        font-size:20px;
    }
    .chart{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        height:170px;
        margin-bottom:8px;
    }
    
    .year-heading{
    font-size: 30px;
     font-weight: 600;
    }
    
    .bar{
        width:40px;
        background:#007bff14;
        position:relative;
        border-radius:4px 4px 0 0;
    }
    .bar.dark{background:#172d66;}
    .bar-label{
        position:absolute;
        top:-38px;
        left:50%;
        transform:translateX(-50%);
        font-size:20px;
        font-weight: 700;
    }
    .years{
        display:flex;
        justify-content:space-between;
        font-size:10px;
        padding:0 4px;
    }
    .y-axis{
        position:absolute;
        left:-30px;
        top:100%;
        transform:rotate(-90deg) translateX(50%);
        transform-origin:left center;
        font-size:18px;
    }
    .chart-area{
        position:relative;
    }

    /* Bottom paragraph */
    .bottom-text{
       font-size: 15px;
        font-weight: 800;
        margin-top:10px;
        line-height:1.4;
        text-align:justify;
    }
    
    
/* image box */
.machine-box{
  height:420px;             
  overflow:hidden;
  border-radius:20px;
 margin-bottom:20px;
 margin-top:20px;
}

/* image */
.machine-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.6s ease;
}

/* hover effect */
.machine-box:hover img{
  transform:scale(1.08);
}

/* mobile */
@media(max-width:768px){
  .machine-box{
    height:260px;
  }
}
    
    /* <!--map responcive -->
     */


        @media (max-width: 480px)  {
            .section-title h2 span {
            font-size: 62px;
            }
            
           
       
        
        }  
        
        
        @media (max-width: 767px)  { 
            
             .two-section{
                  flex-direction: column;
            }
            
            .section-one{
                width:100%;
            }
            
            .left-side .main-heading-box{
                width:40%;
            }
            
            .left-side .sub-title{
                margin-top:60px;
            }
            
            .image-box img{
               margin-top:20px;
            }
            
            .client-box-top{
                    flex-direction: column;
                  
            }
            .left-side .left-side-text{
                margin:20px;
            }
            
            .clients-title{
                font-size:20px !important;
                width:50%;
                text-align:center;
            }
            
            .company-name{
                text-align:center;
                 margin-top:20px;
            }
        
         .section-title h2 span {
            font-size: 60px;
            }
            
            .chart{
                margin-top:40px;
            }
            
            
       
        .map-img{
         height:auto;
        
        }  
        
        .section-row{
            flex-direction:column;
        }
        
        .headline{
        
            font-size: 17px;
        }
        
        .subtext{
        
         font-size: 17px;
        }
        
        .mid-banner{
        margin-left:0px;
        margin-bottom:22px;
        
        font-size:17px;
       text-align: justify;
        }
        
        
        .year-heading{
         font-size:20px;
        }
        
        .chart-title{
        font-size:14px;
        }
        
        .bar{
        width:10px;
        margin-right:3px;
        }
        
        .bar-label {
            font-size:13px;
        }
        
        
        .years{
        font-size:8px;
        
        }
        
        
        .state-box-title{
        
        position: relative;
        width:100%;
        margin:0px;
        top:6px;
        
        }
        
        .state-list{
        
         position: relative;
         left: 30%;
        font-size: 9px;
        top:0;
        }
        
        .right{
        padding-top: 52%;
        }
        
        }
        
        @media only screen and (min-width: 820px) and (max-width: 1180px) {
        
        .map-img{
        max-width: 100%;
        height:auto;
        left:2%;
        
        }
        
        .headline {
            font-size:22px;
        }
        
        .subtext{
       font-size:22px;
       
        }
        
        .page-section py-5{
        max-width:1200px;
        width:max-content;
        
        }
        
          
        
        
      
    }
    
    @media (max-width: 768px) { 
         .map-img{
         height:auto;
        
        }  
        
        .left-side .left-side-text{
            margin:20px;
        }
        
        .two-section{
                flex-direction: column;
        }
        
        .section-one{
            width:100%;
        }
        
        .image-box{
            margin-top:20%;
        }
       .client-box-top .clients-title{
              width: 100%;
            font-size: 22px;
        }
        
        .state-box-title{
            top:0;
        }
           .left-side .main-heading-box{
            width:auto;
            top:6%;
        }
        
   
        .info-card {
            margin-bottom:10%;
        }
        
        .section-row{
            flex-direction:column;
        }
        
        .headline{
        
            font-size: 17px;
        }
        
        .subtext{
        
         font-size: 17px;
        }
        
        .mid-banner{
        margin-left:0px;
        margin-bottom:22px;
        
        font-size:17px;
        text-aline:left;
        }
        
        
        .year-heading{
         font-size:20px;
        }
        
        .chart-title{
        font-size:14px;
        }
        
        .bar{
        width:30px;
        }
        
        .bar-label {
            font-size:13px;
        }
        
        
        .years{
        font-size:8px;
        
        }
        
        
        .state-box-title{
        
        position: relative;
        width:100%;
        margin:0px;
        
        }
        
        .state-list{
        
         position: relative;
         left: 30%;
        font-size: 9px;
        top:0;
        }
        
        .right{
        padding-top: 37%;
        }
        
    
    }