.barsha-main{
height:auto;
width: 90%;
margin: auto;
/* border:1px solid black; */
display: flex;
justify-content: center;
gap: 50px;
flex-wrap: wrap;
margin: 20px auto;
}
.barsha-main .barsha-main-first{
   width: 240px;
    height:235px;
    /* border:1px solid #ededed; */
    margin:2px 2px 2px 2px;
    position:relative;
    box-shadow:0 0 10px rgb(0,0,0,.18);
    /* margin-top: 10px; */
    overflow: hidden;
    border-radius: 10px;
    z-index: 0;
    background-image:url(/assets/images/home/before-get-in-touch/ss.jpg) ;
    transform: scale(1.1);
    transition: .4s;
}

.barsha-main .barsha-main-first:hover::before{
   background:#00000080
}
.barsha-main .barsha-main-first::before{
    content:'';
   width: 100%;
    height:50%;
    /* border:1px solid #ededed; */
    /* margin:2px 2px 2px 2px; */
    position:absolute;
    box-shadow:0 0 10px rgb(0,0,0,.18);
    margin-top: 10px;
    /* overflow: hidden; */
    
    top: -10px;
    z-index: 0;
     transition: .4s;
    
}
.barsha-main .barsha-main-first .barsha-main-first-top{
    height:12px;
    /* border:1px solid green; */
    background-color: #22408d;
    /* position: relative; */

}
.barsha-main .barsha-main-first .barsha-main-first-end{
    width:60px;
    height:60px;
    /* border:1px solid red; */
    position: relative;
    top:-32px;
    left:-32px;
    transform: rotate(-45deg);
    background-color: #ffffff6c;
    
    
}

.barsha-main .barsha-main-first .barsha-main-first-end2{
    width:60px;
    height:60px;
    /* border:1px solid red; */
    position: relative;
    top:-39%;
    left: 88%;
    transform: rotate(45deg);
    background-color: #ffffff6c;
}

.barsha-main .barsha-main-first .barsha-main-first-middle::before{
    height:90px;
    content: '';
    position: absolute;
    width:90px;
    border-radius: 50%;
    justify-items: center;
    align-content: center;
    border: 2.5px dashed rgb(255, 255, 255);
    /* position: relative; */
    margin: auto;
    z-index: -2;
    animation: rotating 4s linear infinite; 
}
@keyframes rotating {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.barsha-main .barsha-main-first .barsha-main-first-middle{
    /* border:1px solid black; */
    height:80px;
    width:80px;
    border-radius: 50%;
    position: relative;
    z-index:2 ;
    /* top: 0; */
    top: -30%;
    margin: auto;
    border: 1px solid rgb(224, 224, 224);
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    box-shadow:inset -1px 1px 9px 5px rgba(106, 202, 232, 0.66);
   

}
.barsha-main .barsha-main-first .barsha-main-first-middle .barsha-main-first-middle-text{
width:50px;
height:50px;
mask-image: url(/assets/images/home/before-get-in-touch/award.png);
background-color: #ffae00;
mask-position: center;
mask-size: cover;
}
.barsha-main .barsha-main-first .barsha-main-first-middle .barsha-main-first-middle-text b{
    color: #308183;
font-size: 25px;
}
.barsha-main .barsha-main-first .barsha-main-first-bottom{
    height:120px;
    width: 100%;
    /* border:1px solid green; */
        
        position: absolute;
        bottom: 0;
        z-index: 0;
    
    background-color:#13407d;
    
}
.barsha-main .barsha-main-first .barsha-main-first-bottom .barsha-main-first-bottom-text{
    /* border:1px solid red; */
    width:80%;
    
    /* height: 100px; */
    margin: auto;
    /* height:50px; */
margin-top: 63px;
transition: .4s;
}
.barsha-main .barsha-main-first:hover .barsha-main-first-bottom-text{
    margin-top: 22px;
    
}

.barsha-main .barsha-main-first .barsha-main-first-bottom .barsha-main-first-bottom-text .p{
    text-align: center;
    font-size: 16px;
    color:white;
    letter-spacing: 1px;
    padding: 2px 0;
    margin: 0;
    font-weight: 560;
    font-family: 'Poppins', sans-serif !important;
}
.barsha-main .barsha-main-first .barsha-main-first-bottom .barsha-main-first-bottom-text .p2{
    text-align: center;
    font-size: 14px;
    color:white;
    letter-spacing: 1px;
    padding: 0px 0;
    margin: 0;
    /* font-weight: 560; */
    font-family: 'Poppins', sans-serif !important;
}
.barsha-main .barsha-main-first .barsha-main-first-bottom .barsha-main-first-bottom-text .btn{
   background-color: rgba(255, 255, 255, 0.904);
   width:107px;
   color: #242424;
  cursor: pointer;
   padding: 7px 5px;
   border-radius: 5px;
   font-weight: 520;
   font-size: 13px;
   font-weight: 560;
   letter-spacing: 1px;
   text-align: center;
   font-family: 'Poppins', sans-serif !important;
   /* border: 1px solid #ff950a; */
   margin: 8px 41px;
}
.barsha-main .barsha-main-first .barsha-main-first-bottom .barsha-main-first-bottom-text .btn i{
  font-size: 10px;
  padding:0 0 0 2px;
}

@media(max-width:1399px){
    .barsha-main{
        width: 100%;
        gap: 40px;
        justify-content: flex-start;
    }
    .barsha-main .barsha-main-first{
        width: 240px;
    }
}
@media(max-width:1199px){
    .barsha-main{
        width: 89%;
    }
}
@media(max-width:1111px){
   .barsha-main{
        width: 90%;
        gap: 40px;
    }
}
 @media(max-width:991px){
    .barsha-main{
        width: 80%;
    }
}

@media(max-width:767px){
   .barsha-main{
        width: 100%;
        gap:40px;
        justify-content: center;
    }
} 
@media(max-width:575px){
   .barsha-main{
        width: 80%;
        gap:40px;
        justify-content: center;
    }
}