.breadcrumb {
    width: 98%;
  color: #666; 
  font-size: 14px; 
  padding: 8px 5px; 
  border: 1px solid #eee; 
}
.breadcrumb a {
  text-decoration: none; 
  color: #666;
}
.breadcrumb a:hover {
  text-decoration: underline; 
}




.title-box {
  text-align: center;

}
.title-box h2 {
  font-size: 35px; 
  font-weight: bold; 
  color: #333; 
  display: inline-block;

  border-bottom: none;
  position: relative;
}

.title-box h2::after {
  content: "";
  display: block;
  margin: 0 auto;
  margin-top: 8px;
  width: 35%;
  border-bottom: 6px solid rgb(254, 202, 10);
}

.content-box {
  padding: 15px 0; 
  line-height: 1.6; 
  color: #444; 
}
.content-box p {
  margin-bottom: 10px; 
}
.content-body-about {
    width: 80%;
    margin: 0 auto;
}

.content-bottom{
    text-align: center;
    margin: 40px 0 20px 0;

}
.content-bottom h2{
    font-size: 24px;
}

.content-shade {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    margin: 20px 0;
}

.content-box-img {
  width: 100%;

  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
}



.box {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.imgList {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.imgList img {
  width: 200px;   
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}


  .about-banner{
  margin-top: 90px;
}
.about-banner-img{
    width: 100%; 
   max-width: 100%; 
  height: auto;    
  
  margin-bottom: 10px;
}

.footcopntainer {
 justify-content: center; 
  gap: 15px;
  padding: 0 10vw;
}

@media (max-width: 1800px){
  .imgList img {
    width: 180px;
    height: 180px;
}
}
@media (max-width: 1600px){
  .imgList img {
    width: 160px;
    height: 160px;
}
}
@media (max-width: 1300px){
  .imgList img {
    width: 100px;
    height: 100px;
}
}
@media (max-width: 1450px){
  .imgList img {
    width: 140px;
    height: 140px;
}
}

@media (max-width: 1200px) {
    
    .about-banner {
        margin-top: 72px;
    }
    .content-body-about {
        width: 90%;
        padding: 0 15px;
    }
    .title-box h2 {
        font-size: 30px;
    }
    .imgList {
        gap: 30px;
    }
    .imgList img {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 992px) {
    .content-body-about {
        width: 95%;
        padding: 0 10px;
    }
    .title-box h2 {
        font-size: 28px;
    }
    .content-box-img {
        height: 200px;
    }
    .imgList {
        gap: 20px;
    }
    .imgList img{
        height: 100px;
        width: 100px;
    }
    .content-box {
        padding: 12px 0;
    }
    .content-box p {
        font-size: 15px;
    }
    .content-shade {
        padding: 20px;
        margin: 15px 0;
    }
}

@media (max-width: 768px) {
    .content-body-about {
        width: 95%;
        margin: 0 auto;
    }

    .title-box h2 {
        font-size: 20px;
    }
    .title-box h2::after {
        width: 40%;
        margin-top: 6px;
    }
    .content-box-img {
        height: 150px;
    }
    .imgList {
        gap: 15px;
    }
    .imgList img{
        height: 80px;
        width: 80px;
    }
    .content-box {
        padding: 10px 0;
    }
    .content-box p {
        font-size: 14px;
        line-height: 1.5;
    }
    .breadcrumb {
        font-size: 12px;
        padding: 6px 4px;
    }
    .content-shade {
        padding: 15px;
        margin: 10px 0;
    }
}

@media (max-width: 600px) {

    .title-box h2 {
        font-size: 20px;
    }
    .title-box h2::after {
        width: 45%;
        margin-top: 5px;
    }
    .content-box-img {
        height: 120px;
    }
    .imgList {
        gap: 10px;
        max-width: 320px;
        margin: 0 auto;
    }
    .imgList img{
        height: 80px;
        width: 80px;
        flex: 0 0 calc(33.333% - 7px);
    }
    .content-box {
        padding: 8px 0;
    }
    .content-box p {
        font-size: 14px;
        line-height: 1.4;
    }

    .content-shade {
        padding: 12px;
        margin: 8px 0;
    }
}

@media (max-width: 480px) {
    .about-banner {
        margin-top: 70px;
    }

    .title-box h2 {
        font-size: 20px;
    }
    .title-box h2::after {
        width: 50%;
        margin-top: 4px;
    }
    .content-box-img {
        height: 100px;
    }
    .imgList {
        gap: 8px;
        max-width: 280px;
        margin: 0 auto;
    }
    .imgList img{
        height: 70px;
        width: 70px;
        flex: 0 0 calc(33.333% - 6px);
    }
    .content-box {
        padding: 6px 0;
    }
    .content-box p {
        font-size: 14px;
        line-height: 1.3;
    }

    .content-shade {
        padding: 10px;
        margin: 6px 0;
    }
}