.video-wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px); /* header ki height ke hisaab se adjust karo */
  overflow: hidden;
}

.video-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}


/* heading */
.sub-title-left {
   margin-bottom: 15px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    padding-left: 0;
    max-width: max-content;
    color:#0060aa;
    text-transform:uppercase;
}
.sub-title-left::after {
    content: "";
    position: absolute;
    width: 42px;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: linear-gradient(90deg, #ffcc01, rgba(33, 38, 45, 0)) !important;
}


.heading-main{
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 1.2;
    font-family: "Urbanist", serif;
    font-weight: 700;
    color:#1f242e;
}


 .sub-title {
    margin: 0 auto;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color:#0060aa;
    position: relative;
    max-width: max-content;
    z-index: 1;
    padding: 0 35px;
     text-transform:uppercase;
}

 .sub-title::before {
    content: "";
    position: absolute;
    width: 56px;
    height: 2px;
    background: linear-gradient(-90deg, #ffcc01, rgba(33, 38, 45, 0)) !important;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}
.sub-title::after {
    content: "";
    position: absolute;
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, #ffcc01, rgba(33, 38, 45, 0)) !important;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}


/* End Heading */


/* theam color */
.bg-1{
   background:#ffcc01; 
}
.bg-2{
   background:#1f242e; 
}

.bg-3{
   background:#0060aa; 
}

.bg-4{
    background:#065897;
}
.bg-5{
 background:#f4f6f9;
}
.bg-overlay-black{
  background: rgba(0, 0, 0, 0.5);  
}

.parallax-section {
    position: relative;
    overflow: hidden;
}

/* overlay */
.parallax-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* content ko upar le aao */
.parallax-section > * {
    position: relative;
    z-index: 2;
}

.text-1{
   color:#ffcc01; 
}
.text-2{
   color:#1f242e; 
}

.text-3{
   color:#0060aa; 
}


/* end theam color */


/* button color */
.btn-theam {
    background: linear-gradient(to right, #ffcc01 50%, #1f242e 50%);
    background-size: 200% 100%;
    background-position: left bottom;
    color: #1f242e;
    border: none;
    padding: 12px 30px;
    cursor: pointer;
    transition: all 0.6s ease; /* slow effect */
   font-size: 16px;
    font-weight: 600;
}



.btn-theam:after{ 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #1f242e;
    transform: scaleY(0);
    z-index: -1;
    transform-origin: top center;
    transition: transform 0.24s ease-in-out, -webkit-transform 0.24s ease-in-out;
    color: #fff;

}

.btn-theam:hover {
    background-position: right bottom;
    color: #fff; /* IMPORTANT */
}



/* button color */


/* service section */
.service-card-style {
  background: #f8f9fa;
  
}

.section-title {
  font-size: 36px;
  font-weight: 700;
}

/* Card */
.service-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: 0.4s;
  height: 100%;
}

/* Image */
.img-box {
  position: relative;
  overflow: hidden;
}

.img-box img {
  width: 100%;

  object-fit: cover;
  transition: 0.5s;
}

/* Overlay */
.icon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: 0.4s;
}

/* Icon */
.icon-overlay a {
  width: 60px;
  height: 60px;
  background: #fff;
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: 0.3s;
  transform: scale(0.7);
  opacity: 0;
}

.service-card:hover .icon-overlay {
  opacity: 1;
}

.service-card:hover .icon-overlay a {
  transform: scale(1);
  opacity: 1;
}

.icon-overlay a:hover {
  background: #ffcc01;
  color: #000;
}

/* Content */
.content {
  padding: 20px;
  text-align: center;

}

.content h4 {
  font-size: 20px;
  margin-bottom: 8px;
  text-transform:uppercase;
    font-weight:600;
}

.content p {
  font-size: 16px;
  color: #000;
}

/* Hover Effects */
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.service-card:hover img {
  transform: scale(1.1);
}

/* Bottom Line */
.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: #0060aa;
;
  transition: 0.4s;
}

.service-card:hover::after {
  width: 100%;
}
/* end service section */



.social-icon-style-04 a{
 color:#fff;   
}


/* fonder message */

/* ----- main grid ----- */
.vs4-grid{
  display:grid;
  grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(30px,5vw,70px);
  align-items:center;
}

/* IMAGE side — clean & minimal */
.vs4-imgwrap{
  position:relative;width:100%;
  padding:18px 18px 0 0;
}
/* subtle outlined frame, offset top-right */
.vs4-imgwrap .shape{
  position:absolute;right:0;top:0;
  width:calc(100% - 30px);height:calc(100% - 30px);
  border:1.5px solid #0060aa;
  border-radius:8px;z-index:0;
}
/* small yellow square accent */
.vs4-imgwrap .dots{
  position:absolute;right:-6px;top:-6px;
  width:22px;height:22px;background:#ffcc01;
  border-radius:4px;z-index:3;
}
/* tiny blue dot accent bottom-left */
.vs4-imgwrap .yel{
  position:absolute;left:-6px;bottom:18px;
  width:10px;height:10px;background:#0060aa;
  border-radius:50%;z-index:3;
}
.vs4-imgwrap .photo{
  position:relative;z-index:2;width:100%;display:block;
  border-radius:8px;
  /*box-shadow:0 20px 45px -20px rgba(31,36,46,.25);*/
  background:#e5e5e5;
}
/* badge */
.vs4-badge{
  position:absolute;right:-10px;bottom:30px;z-index:4;
  background:#fff;color:#1f242e;
  padding:14px 18px;border-radius:14px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 20px 40px -15px rgba(31,36,46,.3);
  border:1px solid #e5e8ef;
}
.vs4-badge .n{
  font-weight:700;font-size:1.9rem;line-height:1;color:#0060aa;
}
.vs4-badge .t{
  font-size:.66rem;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;line-height:1.3;
}

/* CONTENT side */
.vs4-content{position:relative;}
.vs4-quote{
  font-family:'Fraunces',serif;font-weight:700;font-style:italic;
  font-size:6rem;/*line-height:.7;*/color:#0060aa;
  display:block;margin-bottom:10px;
  line-height: 0px;
}
.vs4-content p{
line-height:1.85;font-size:clamp(.98rem,1.05vw,1.07rem);
  margin-bottom:18px;
}
.vs4-content p.lead{
font-weight:600;
  font-size:clamp(1.15rem,1.5vw,1.35rem);line-height:1.55;margin-bottom:22px;
}
.vs4-content strong{color:#1f242e;font-weight:600;}

/* signature row */
.vs4-sign{
  margin-top:32px;padding-top:26px;
  border-top:1px solid #e5e8ef;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;
}
.vs4-sign .who{display:flex;align-items:center;gap:16px;}
.vs4-sign .av{
  width:54px;height:54px;border-radius:50%;
  background:#1f242e;color:#ffcc01;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;
  flex-shrink:0;
}
.vs4-sign .name{
 font-weight:600;font-size:1.25rem;color:#1f242e;margin:0;line-height:1.2;
}
.vs4-sign .role{
  color:#0060aa;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:700;
}
.vs4-sign .stamp{
font-style:italic;font-size:.95rem;
  display:flex;align-items:center;gap:10px;
}
.vs4-sign .stamp::before{content:"";width:24px;height:1px;background:#ffcc01;}


/* end fonder message */


/* timline */

/* ── ERA BLOCK ── */
.era-block { margin-bottom: 52px; }
.era-header {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 26px;
}
.era-badge {
    background:  #0060aa;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 96, 170, .28);
    flex-shrink: 0;
    position: relative;
    line-height:normal;
}
.era-badge::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: #ffcc01;
border-radius: 8px 0 0 8px;
}
.era-line { flex: 1; height: 2px;
	background: linear-gradient(to right, #d0dce8, transparent); }
.era-count { font-size: .78rem; font-weight: 600; color: #8a96a3; white-space: nowrap; }

/* ── PROJECT CARD ── */
.project-card {
background: #fff;
border-radius: 10px;
border: 1px solid #e4eaf0;
padding: 18px 20px;
display: flex;
gap: 14px;
align-items: flex-start;
box-shadow: 0 2px 6px rgba(0,0,0,.04);
transition: transform .2s, box-shadow .2s, border-color .2s;
position: relative;
overflow: hidden;
height: 100%;
}
.project-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0,96,170,.12);
border-color: #b8d3ea;
}
.project-card::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
}

/* Accent colours by type */
.type-road::before   { background:  #0060aa; }
.type-metro::before  { background: #6f42c1; }
.type-canal::before  { background: #198754; }
.type-dam::before    { background: #ffcc01; }

.proj-icon {
width: 42px; height: 42px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; flex-shrink: 0;
}
.type-road  .proj-icon { background: #ddeeff; }
.type-metro .proj-icon { background: #ede7f6; }
.type-canal .proj-icon { background: #d1f0e0; }
.type-dam   .proj-icon { background: #fff8d6; }

.proj-name {
font-size: 16px;
    font-weight: 600;
    color: #212529;
    line-height: 1.45;
    margin-bottom: 13px;
}
.meta-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: normal;
}
.tag-org   { background: #ffcc01; color: #212529; }
.tag-road  { background: #ddeeff; color:  #0060aa; }
.tag-metro { background: #ede7f6; color: #6f42c1; }
.tag-canal { background: #d1f0e0; color: #146c43; }
.tag-dam   { background: #fff8d6; color: #856404; }


 /* ── LEGEND ── */
    .legend-strip {
      background: #fff;
      border-radius: 10px;
      border: 1px solid #e4eaf0;
      padding: 14px 22px;
      margin-bottom: 36px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
    }
    .legend-title {
      font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #8a96a3;
    margin-right: 4px;
    }
    .legend-item {     display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #4a5568;}
    .legend-dot  { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
/* end timeline */




/* project */
/* ===== NEWPROJECT WRAPPER ===== */
.newproject .project-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,0.08);
    transition:0.4s ease;
    border:1px solid rgba(0,0,0,0.05);
}

.newproject .project-card:hover{
    transform:translateY(-8px);
}

/* Status */
.newproject .project-status{
    background:#ffcc01;
    color:#212529;
    font-weight:700;
    padding:10px 20px;
    border-radius:50px;
    font-size:13px;
    letter-spacing:0.5px;
}

/* Content */
.newproject .project-content{
    padding:30px;
}

.newproject .project-content h3{
    font-size:24px;
    font-weight:700;
    line-height:1.5;
    color:#0060aa;
    margin-bottom:25px;
}

/* Info box */
.newproject .info-box{
    background:#f8f9fa;
    border-left:5px solid #0060aa;
    padding:16px 18px;
    border-radius:12px;
    margin-bottom:18px;
}

.newproject .info-box h5{
    font-size:16px;
    text-transform:uppercase;
    margin-bottom:8px;
    font-weight:700;
    color:#0060aa;
}

.newproject .info-box p{
margin: 0;
    color: #000;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
}

/* Gallery */
.newproject .gallery-image{
    border-radius:12px;
    overflow:hidden;
}

.newproject .gallery-image img{
    width:100%;
    object-fit:cover;
    transition:0.4s ease;
}

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

/* Responsive */
@media(max-width:991px){
    .newproject .project-content h3{
        font-size:22px;
    }
}

@media(max-width:767px){
    .newproject .project-content{
        padding:22px;
    }

    .newproject .project-content h3{
        font-size:20px;
    }
}
/* end project */







@media (max-width: 991.98px){
  .vs4-grid{
    grid-template-columns:1fr;
    gap:50px;
    max-width:560px;margin:0 auto;
  }
  .vs4-quote{font-size:4.5rem;}
}
@media (max-width: 575.98px){
  .vs4-imgwrap .yel{width:54px;height:54px;right:-8px;bottom:-8px;}
  .vs4-imgwrap .dots{width:64px;height:64px;left:-10px;top:-10px;border-width:5px;}
  .vs4-badge{right:0;left:0;bottom:-22px;margin:0 auto;justify-content:center;width:max-content;}
  .vs4-content{padding-top:30px;}
  .vs4-sign{flex-direction:column;align-items:flex-start;}
  .stat-divider { border-left: none; border-top: 1px solid rgba(255,255,255,.15); }
}

}