.hatrikContainer{
   display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:90px;
    padding:50px 0 80px
}

.bottomZone{
    display:flex;
    justify-content:center;
    align-items:center;
}

.bottomZone ul {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:150px;
    flex-wrap:wrap 
}

.bottomZone ul li{
    display:flex;
    justify-content:center;
    align-items:center;
     gap:20px;
     flex-direction:column;
     width:314px;
     aspect-ratio:314/314
}

.bottomZone ul li .mainCard{
     display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    border-radius: 23px;
    border: 3px solid #FFF;
    position:relative;
    width:100%;
    height:100%
}

.bottomZone ul li .mainCard p{
    border-radius: 50px;
    background: #F3F3F3;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
        padding: 0 40px;
    width:auto;
    height:50px;
    position:absolute;
    top:-25px;
    left:50%;
    transform:translateX(-50%);
    color:#1A247D;
    font-size:22px;
    font-weight:bold
}

.bottomZone ul li .mainCard p:before{
    content:'';
    display:inline-block;
    width:28px;
    height: 23px;
    background: url(../Images/GamesIcons/pointIcon.svg) no-repeat center center;
    background-size: 100%;
}
.bottomZone ul li .mainCard img{
    width:56%;
    height:auto
}

.bottomZone ul li:last-child .mainCard img {
        width: 75%;
    }

.bottomZone ul li:nth-child(2n) .mainCard img {
          width: 76%;
    }


.bottomZone ul li .btn{
    border-radius: 50px;
background: #F3F3F3;
width: 170px;
height: 56px;
display:flex;
justify-content:center;align-items:center;
color:#1A247D;
font-family:droidBold,Arial;
font-size:16px;
  transition: 0.3s;
}

.bottomZone ul li .btn:hover{
    background:#2194FB;
    color:#fff
}


@media screen and (min-width:1152px) and (max-width:1919px) {
    .hatrikContainer{padding:20px 0 50px;gap: 40px;}
    .topZone img{width:180px;height:auto}
    .bottomZone ul{
       gap: 90px;
    }
    .bottomZone ul li{
        width:240px;
    }
    .bottomZone ul li .mainCard p{
    padding: 0 35px;
          height: 40px;
          font-size: 20px;
          top:-20px
    }
    .bottomZone ul li .mainCard p:before{
        width: 22px;
    height: 20px;
    }
    .bottomZone ul li .btn{
        width: 150px;
    height: 43px;
    font-size: 15px;
    }
}


@media screen and (min-width:1024px) and (max-width:1151px) {
    .hatrikContainer{padding:20px 0 50px;gap: 40px;}
    .topZone img{width:170px;height:auto}
    .bottomZone ul{
       gap: 90px;
    }
    .bottomZone ul li{
        width:220px;
    }
    .bottomZone ul li .mainCard p{
    padding: 0 35px;
          height: 40px;
          font-size: 20px;
          top:-20px
    }
    .bottomZone ul li .mainCard p:before{
        width: 22px;
    height: 20px;
    }
    .bottomZone ul li .btn{
        width: 150px;
    height: 43px;
    font-size: 15px;
    }
}


@media screen and (min-width:768px) and (max-width:1023px) {
    .hatrikContainer{padding:20px 0 50px;gap: 40px;}
    .topZone img{width:150px;height:auto}
    .bottomZone ul{
       gap: 30px;
    }
    .bottomZone ul li{
        width:180px;
    }
    .bottomZone ul li .mainCard p{
    padding:0 28px;
          height: 30px;
          font-size: 16px;
          top:-15px
    }
    .bottomZone ul li .mainCard p:before{
        width: 22px;
    height: 20px;
    }
    .bottomZone ul li .btn{
   width: 116px;
        height: 36px;
        font-size: 14px;
    }
}

@media screen and (min-width:320px) and (max-width:767px) {
    .hatrikContainer{gap: 36px;padding:50px 0 0}
    .topZone img{width:184px;height:auto}
    .bottomZone ul{
       gap: 43px;
    }
    .bottomZone ul li{
        width:185px;
        gap: 15px;
    }
    .bottomZone ul li .mainCard p{
    padding:0 18px;
          height: 30px;
          font-size: 14px;
          top:-15px
    }
    .bottomZone ul li .mainCard p:before{
        width: 16px;
    height: 20px;
    }
    .bottomZone ul li .btn{
   width:97px;
        height: 35px;
        font-size: 11px;
    }
}