.about-banner{
  width:100%;
  height:80vh; /* main size control */
  min-height:520px; /* desktop-il big look */
  background:url("/assets/images/a1.webp") center/cover no-repeat;
  position:relative;
}

/* dark gradient like Lakme */
.about-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
}

.banner-overlay{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.banner-overlay h1{
  color:#fff;
  font-size:58px;
  letter-spacing:3px;
  font-weight:lighter;
}
@media(max-width:768px){
  .about-banner{
    height:50vh;
    min-height:300px;
  }

  .banner-overlay h1{
    font-size:32px;
  }
}





/* .about-section{
  margin-bottom:250px;
} */

.about-section{
  padding:100px 8%;
  background:#000;
}

.about-container{
  display:flex;
  gap:50px;
  align-items:center;
    flex-direction:row-reverse; /* magic line */

}

.about-text{
  flex:1;
}

.about-text h2{
  font-size:38px;
  color:silver;
  margin-bottom:20px;
}

.about-text h3{
  color:silver;
  margin-top:20px;
}

.about-text p,
.about-text li{
  color:#ccc;
  line-height:1.8;
}

.about-images{
  flex:1;
  position:relative;
  min-height:950px;
}

.about-images img{
  width:90%;
  height:100%;
  object-fit:cover;
  border-radius:5px;
  position:absolute;
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  transition:0.4s;
}

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

.img1{
  top:0;
  left:0;
}




/* ===== RESPONSIVE FIX ===== */

/* Tablet */
@media(max-width:992px){

  .about-container{
    flex-direction:column;
    gap:30px;
  }

  .about-images{
    min-height:auto;
    position:relative;
  }

  .about-images img{
    position:relative;
    width:100%;
    height:900px;
  }

  .about-text h2{
    font-size:32px;
  }

}


/* Mobile */
@media(max-width:768px){

  /* Banner */
  .about-banner{
    height:45vh;
    min-height:260px;
  }

  .banner-overlay h1{
    font-size:26px;
    letter-spacing:2px;
  }

  /* Section padding */
  .about-section{
    padding:60px 5%;
    margin-bottom:80px;
  }

  .about-text h2{
    font-size:26px;
  }

  .about-text h3{
    font-size:20px;
  }

  .about-text p,
  .about-text li{
    font-size:15px;
    line-height:1.7;
  }

  /* Image */
  .about-images img{
    height:100%;
  }

}


/* Small mobile */
@media(max-width:480px){

  .banner-overlay h1{
    font-size:22px;
  }

  .about-text h2{
    font-size:22px;
  }

  .about-images img{
    height:100%;
  }

}










/* ===== WHAT WE DO SECTION ===== */

.what-we-do-section{
  padding:80px 8%;
  background:#000;
  overflow:hidden;
  margin-bottom:120px;
}

/* Container */
.what-we-do-section .about-container{
  display:flex;
  align-items:center;
  gap:60px;
}

/* LEFT IMAGES */
.image-side{
  position:relative;
  width:50%;
  min-height:700px;
}

/* Images */
.image-side img{
  width:620px;
  max-width:100%;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  transition:0.4s ease;
  cursor:pointer;
}

/* Hover Effect */
.image-side img:hover{
  transform:scale(1.08) translateY(-12px);
}

/* Image positions (Desktop) */
.image-side .img3{
  position:relative;
  z-index:1;
  top:120px;
  left:80px;
}

.image-side .img4{
  position:absolute;
  top:420px;
  left:220px;
  z-index:2;
}

/* RIGHT TEXT */
.text-side{
  width:50%;
  color:#fff;
}

.text-side h2{
  font-size:40px;
  margin-bottom:20px;
  color:silver;
}

.text-side p{
  color:#ccc;
  line-height:1.8;
  margin-bottom:15px;
}

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

.text-side li{
  margin:12px 0;
  font-size:17px;
  color:#ddd;
}

/* ========================= */
/* ✅ TABLET RESPONSIVE */
/* ========================= */

@media(max-width:992px){

  .what-we-do-section{
    padding:70px 6%;
  }

  .what-we-do-section .about-container{
    flex-direction:column;
    gap:40px;
  }

  .image-side,
  .text-side{
    width:100%;
  }

  .image-side{
    text-align:center;
    min-height:auto;
  }

  .image-side img{
    width:80%;
  }

  /* Remove overlap on tablet */
  .image-side .img3,
  .image-side .img4{
    position:relative;
    top:0;
    left:0;
  }

  .image-side .img4{
    margin-top:20px;
  }

  .text-side{
    text-align:center;
  }

  .text-side h2{
    font-size:32px;
  }
}

/* ========================= */
/* ✅ MOBILE RESPONSIVE */
/* ========================= */

@media(max-width:600px){

  .what-we-do-section{
    padding:60px 5%;
    margin-bottom:80px;
  }

  .image-side img{
    width:100%;
  }

  .text-side h2{
    font-size:26px;
  }

  .text-side p{
    font-size:15px;
  }

  .text-side li{
    font-size:15px;
    line-height:1.6;
  }
}




/* ===== HIGHLIGHTS SECTION ===== */

/* ===== HIGHLIGHTS SECTION ===== */

.highlights-section{
  padding:100px 8%;
}

.highlights-container{
  display:flex;
  align-items:center;
  gap:60px;
}

/* LEFT IMAGE */
.highlights-image{
  width:50%;
}

.highlights-image img{
  width:100%;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 15px 40px rgba(0,0,0,0.6);
  transition:0.4s;
}

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

/* RIGHT TEXT */
.highlights-text{
  width:50%;
  color:#fff;
}

.highlights-text h2{
  font-size:40px;
  color:silver;
  margin-bottom:20px;
}

.highlights-text p{
  color:#ccc;
  line-height:1.8;
  margin-bottom:15px;
}

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

.highlights-text li{
  margin:12px 0;
  font-size:17px;
  color:#ddd;
}

/* ===== RESPONSIVE ===== */

@media(max-width:992px){

  .highlights-container{
    flex-direction:column;
  }

  .highlights-image,
  .highlights-text{
    width:100%;
  }

  .highlights-text{
    text-align:center;
  }

}

@media(max-width:600px){

  .highlights-section{
    padding:60px 5%;
  }

  .highlights-text h2{
    font-size:26px;
  }

  .highlights-text p,
  .highlights-text li{
    font-size:15px;
  }
}