.HodhodApp {
    border: 6px solid #5777ba;
    padding: 4px;
    background: #fff;
    z-index: 1;
    transform: scale(1.2);
    margin-top: 10px;
    border-radius: 25px;
    max-width: 39%;
    height: auto;
}

.col-lg-6.d-lg-flex.flex-lg-column.align-items-stretch.order-1.order-lg-2.hero-img {
    align-items: center !important;
}

dotlottie-player {
    width: 41px !important;
height: 29px !important;
}

.col-4 {
flex: 0 0 auto;
width: 29.333333%;
}
.card.align-items-center {
    padding: 3px;
cursor: pointer;
margin-bottom: 10px;
height: 69px;
justify-content: center;
width: 65px;
}

span {
    font-size: 11px;

}

.custimcol {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    cursor: pointer;
}

.HodhodApp {
    border: 6px solid #5777ba;
    padding: 4px;
    background: #fff;
    z-index: 1;
    transform: scale(1.2);
    margin-top: 10px;
    border-radius: 25px;
    max-width: 39%;
    height: auto;
}

.showall {
    margin-top: 105px;
    display: flex;
    justify-content: center;
    margin-bottom: 146px;
}

section#newSection {
    width: 270px;
text-align: center;
border: 6px solid #070707;
padding: 4px;
background: #eee;
z-index: 0;
transform: scale(1.2);
margin-top: 93px;
border-radius: 25px;
max-width: 35%;
height: auto;
flex-direction: column;
}
.card>hr {
margin-right: 20px;
margin-left: 8px;
width: 204px;}
.costombx {
background: black;
right: 0;
position: absolute;
text-align: start;
cursor: pointer;
font-size: 27px;
width: fit-content;
z-index: 20;
left: 0;
/* bottom: 95px; */
top: 100px;
color: white;
border-radius: 15px;
}

.name {
font-size: 12px;
font-weight: 600;
margin-top: 3px;
}
.img-coustom {
max-width: 106%;
height: auto;
object-fit: cover;
max-height: 95%;
margin-bottom: 15px;
background-size: cover;
/* position: relative; */
top: -67px;
margin-right: -7px;
width: 278px;
height: 169px;
margin-left: -6px;
margin-top: -4px;
border-radius: 0px 0px 24px 21px;
}

.backgondimage {
    
width: 120px;
background-color: black;
border-radius: 11px 10px 24px 24px;
text-align: center;
display: flex;
justify-content: end;
height: 23px;
position: absolute;
z-index: 18;
left: 73px;
top: -5px;
}
.camara {
    background: #27292bd6;
    border-radius: 34px;
    width: 13px;
    height: 13px;
    margin-top: 6px;
    margin-left: 11px;
}

.flexcenter {
    justify-content: center;
    align-items: center !important;
    margin-top: -9px;

}

.col-12 {
flex: 0 0 auto;
width: 90%;
}

.rowstyle {
    margin-top: 227px;
    display: flex;
padding: 15px;
align-items: start !important;
justify-content: start !important;
margin-right: -7px;
max-height: 700px;
height: 332px;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
padding-top: 0px !important;
width: 324px;
    }

.rowstyle::-webkit-scrollbar {
    display: none;
    /* WebKit browsers */
}

.row.footerapp {
    margin-right: 16px;
    margin-left: -30px;
    position: relative;
z-index: 12;
margin-top: 9px;
}

.active {
    color: #5777ba;

}



@media  (min-width: 1000px){
    .col-12.mb-2 {
margin-right: -7px;
}
.services-card {
margin-right: 0px;
margin-left: 10px;
width: 218px;
}

.card>hr {
margin-right: 20px;
margin-left: 8px;
width: 168px;
}
} 

@media (max-width: 999px) {
    section#newSection {
        max-width: 300px !important;
    }

    .card.align-items-center {
        width: 63px;
                }

    .animation {
        position: relative;
        width: 80% !important;
        height: 99% !important;
        justify-content: center;
        text-align: center;
        margin-right: 8px !important;
        display: flex;
    }

    .rowstyle {
        margin-top: 227px;
                display: flex;
padding: 15px;
align-items: start !important;
justify-content: start !important;
margin-right: -7px;
max-height: 700px;
height: 332px;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
padding-top: 0px !important;
width: 275px;
    }

    .col-4 {
flex: 0 0 auto;
width: 33.333333%;
}
}
svg {
width: 100%;
height: 93%;
transform: translate3d(0px, 0px, 0px);
content-visibility: visible;
}
img.img-coustom {
position: absolute;
/* top: 15px; */
top: 56px;
left: 1px;
}

.hidegallary {
    opacity: 0;

}

.showgallary {
    opacity: 1;


}




@keyframes ShowImagesSlider {
    from {

        display: none;
        opacity: 0;
        transform: translateY(-50px)
    }

    to {
        display: block;
        opacity: 1;
        transform: translateY(0)
    }
}

img.img-store {
    width: 80px;
margin-left: 10px;
object-fit: cover;
background-size: cover;
height: 56px;
}
.name-dev {
margin-top: 5px;
}

.checked {
color: orange;
}
.bx{
margin-left:5px; 
}

.bx-location-plus:before {
content: "\eb48";
color: green;

}
.buttun {
border-radius: 15px;
width: 73px;
text-align:center;

border: 1px solid;
}

.activebuttun {
background: #5777ba;
color: white;
border-radius: 15px;
width: 73px;
}
.fordotandtext{

display: flex;
align-items: center;
font-weight: 600;
font-size: 15px;
}

.storeName{

position: absolute;
z-index: 7;
top: 175px;
left: 34px;
background: #dee2e6;
font-size: 22px;
width: 201px;
border-radius: 23px;
color: #0e6ca2;

}


.dot {
width: 6px;
height: 7px;
background-color: #08b408;
margin-left: 6px;
border-radius: 20px;
font-size: 0px;
text-align: center;
}

.social-links {
display: flex;
justify-content: space-around;
}

.bxl-tiktok:before {
content: "\e97c";
color: #fff;
background: black;
font-size: 15px;
padding: 1px;
border-radius: 4px;
}
.footer-top {
display: none;
}
a.tiktok {
display: flex;
padding: 0px;
justify-content: center;
align-items: center;
}

.bxl-snapchat:before {
content: "\e972";

color: #f3fb55;
font-size: 15px;
padding: 1px;
border-radius: 4px;
}

a.snapchat {
display: flex;
padding: 0px;
justify-content: center;
align-items: center;
}
.bxl-facebook:before {
content: "\e92f";
color: white;
background: #5883c2;
font-size: 15px;
padding: 1px;
border-radius: 4px;
}
.bxl-instagram:before {
content: "\e942";
color: orange;
}
.card {
border: 1px solid #0d6efd;
}
a.facebook {
display: flex;
padding: 0px;
justify-content: center;
align-items: center;
}

.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Ensure loading overlay is above other content */
}

.loading-overlays {
display: none;
position: absolute;
top: -4px;
left: 95px;
width: 64%;
height: 101%;
background-color: white;
justify-content: start;
z-index: 15;
border-radius: 26px;
background: linear-gradient(312deg, #ffffff, #52d5da, #0082ff);
flex-direction: column;
align-items: center;
}

.showloading{

animation: loading-overlays 0.5s ease-in-out;
display: flex;

}

@keyframes loading-overlays {

from{

display: none;
transform: translateX(100px)
}
to{

transform: translateX(0px)


}
}

.hideloading{
display: none;

animation: hideloading-overlays 0.5s ease-in-out;



}


@keyframes hideloading-overlays {

from{
display: flex;
transform: translateX(0px);
}
to{

display: none;
transform: translateX(100px);


}
}
.item-usergestimage {
margin-bottom: 13px;
font-family: 'Poppins';
font-weight: 600;
}

.image-profile {
display: flex;
width: 100px;
background-color: white;
height: 100px;
text-align: center;
justify-content: center;
border-radius: 51px;
margin-top: 50px;
margin-bottom: 20px;
/* margin-right: 119px; */
align-items: center;

}

.usergestimage {
width: 74px;
text-align: center;
}
.all-usergestimage{
justify-content: end;
flex-direction: column;
align-items: start;
color: aliceblue;
margin-right: 9px;
margin-bottom: 12px;
margin-left: auto;
margin-top: 34px;
font-size: 15px;
}

.services-card{
margin-right: 7px;
margin-left: 10px;
width: 238px;
}

.card {

animation: CardAnimation 0.8s ease-in-out 0.1s ;
}

@keyframes CardAnimation {

from {
opacity: 0;
transform: translateY(30px)
}
to {

transform: translateY(0px)
}
}

.backgondimage2 {
    position: absolute;
    top: 0px;
    z-index: 13;
    width: 100%;
    height: 50px;
    left: 0px;
    display: flex;
    align-items: end;
    flex-direction: row;
    justify-content: space-between;
    padding: 3px;
    margin-top: -1px;}

.togell{
    font-size: 18px;
    margin-bottom: -6px;
    cursor:pointer;
}



.mainText{
    color: #5777ba;
    font-size: 20px;
    margin-bottom: -3px;
}
.notfication{
    font-size: 18px;  position: relative;    margin-bottom: -6px;

}