.about-hero {
      background: linear-gradient(135deg, #98d7be, #0B2E33);
      padding: 60px 0;
      position: relative;
      overflow-y: hidden;
      margin-top: -80px;
    }
    .about-hero  .heading {
      font-weight: 700;
      font-size: 4.7rem;
      line-height: 1.3;
    }
    .about-hero h1 span {
      color: #0B2E33;
    }
    .about-hero p {
      font-size: 18px;
      color: #555;
      margin-top: 20px;
      max-width: 500px;
    }
   

.bannerimg{
  height: 400px;
}
  
   

.brand-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 50px auto;
    max-width: 1200px;
}


.brand-card {
width: 350px;
height: 300px;
background: white;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: black;
transition: 0.2s ease-in-out;
box-shadow:1px 6px 8px rgba(0, 0, 0, 0.5);
}

.img {
height: 350px;
width: 300px;
border-radius: 20px;
position: absolute;
transition: 0.2s ease-in-out;
z-index: 1;
/* border: 3px solid black; */
}

.textBox {
opacity: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px !important;
transition: 0.2s ease-in-out;
z-index: 2;
}

.textBox > .text {
font-weight: bold;

}

.text a{
text-decoration: none;
font-size: 20px;
color: black;
}

.textBox > .head {
font-size: 22px;
}

.textBox > .price {
font-size: 14px;
}

.textBox > span {
font-size: 16px;
color: black;
padding: 10px 40px;
}

.brand-card:hover > .textBox {
opacity: 1;
}

.brand-card:hover > .img {
height: 65%;
filter: blur(20px);
animation: anim 3s infinite;
}


.icons{
height: 20px;
width: 20px;
margin-top: 6px;
}

@keyframes anim {
0% {
transform: translateY(0);
}

50% {
transform: translateY(-20px);
}

100% {
transform: translateY(0);
}
}

.brand-card:hover {
transform: scale(1.04) ;
}
.readmore{
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
}

.brand-card-container{
margin-top: 50px;
display: flex;
flex-wrap: wrap;
gap:60px;
justify-content: center;
}

@media (max-width: 768px) {
  .about-hero  .heading {
    margin-top: 30px;
      font-size: 3.7rem; 
    }

   
.bannerimg{
  height: 200px;
}
  

    }