.heroSection{
    padding-inline: 1rem;
    padding-top: 100px;
    overflow-x: hidden;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow: hidden;
    background: url("../img//websiteImages//cricketImages/homeBanner.webp");
    background-attachment: fixed;
}
.heroSection .imgContainer{
   max-width: 400px;

}
.heroSection .imgContainer img{
width: 100%;
height: 100%;
max-height: 400px;
object-fit: contain;
}
.heroSection .heroContent{
  padding: 2rem;
  border-bottom: 2px solid var(--brandColor);
  border-left: 2px solid var(--brandColor);
  border-bottom-left-radius: 1rem;
  border-top-right-radius: 1rem;
  box-shadow: 3px -3px 5px black;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.heroSection .heroContent h2{
font-size: 4rem;
}
.heroSection .heroContent h2 span{
    color: var(--brandColor);
}
.heroSection .heroContent p{
color: black;
text-transform: capitalize;
font-size: 1.2rem;
font-weight: 500;
}

@media (max-width:768px){
    .heroSection{
        padding-top: 100px;
    }
    .heroSection .heroContent h2{
        font-size: 2rem;
        }
    .heroSection .imgContainer{
       width: auto;
       height: 250px;
        }
}
@media (max-width:500px){
    .heroSection{
        padding-top: 40px;
    }

}