.app{
    background: var(--body-bg);
    box-shadow: var(--box-shadow);
    max-width: 768px;
    min-height: 100vh;
    margin: 0 auto;
}
.app.tech{
    background: var(--body-bg-2);
}

#body{
    padding-bottom: 110px;
}

.swiper{
    --swiper-pagination-bullet-size: 12px;
    --swiper-pagination-bullet-inactive-color: rgb(0 0 0 / 25%);
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-color: var(--primary);
    --swiper-pagination-bullet-active-opacity: 1;
    --swiper-navigation-sides-offset: 0;
    --swiper-pagination-bullet-horizontal-gap: 6px;

    --swiper-navigation-color: var(--primary);
    --swiper-navigation-size: 26px;
    --swiper-navigation-opacity: 1;
    --swiper-navigation-sides-offset: 0;
}
.swiper-pagination-bullet:not(.swiper-pagination-bullet-active):is(:hover, :focus, :active){
    --swiper-pagination-bullet-inactive-color: var(--secondary);
}

#hero-slider{
    --swiper-pagination-bottom: 0px;
}
#hero-slider .swiper{
    padding-inline-start: 1rem;
    /* padding-bottom: 40px; */
}
#hero-slider .swiper-slide{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: min(300px, (100% - 60px));
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
}
#hero-slider .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}







#services-categories .flex{
    row-gap: 20px;
    column-gap: 10px;
}
#services-categories .swiper-slide{
    width: min(80px, (33.33% - (20px / 3)));
}
#services-categories .swiper-slide .img{
    width: 100%;
    min-height: min(80px, (33.33% - (20px / 3)));
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: #eee;
    background-size: cover;
    background-position: center;
    border-radius: 50px;
    margin-bottom: 12px;
}
#services-categories a{
    font-weight: 600;
}
#services-categories a:not(:hover, :focus, .active) {
    color: var(--text-primary);
}



#market-categories .swiper-slide{
    width: fit-content;
}
#market-categories .swiper-slide a{
    display: inline-block;
    padding: 4px 16px;
    background-color: #ddd;
    color: var(--text-primary);
    border-radius: 100px;
    font-weight: 600;
}
#market-categories .swiper-slide a:is(:hover, :focus, .active) {
    color: #fff;
    background-color: var(--primary);
}



.home-card, .home-card:is(:hover, :focus, :active){
    display: block;
    position: relative;
    z-index: 1;
    width: calc(50% - 8px);
    padding: 16px;
    padding-top: 64px;
    background: linear-gradient(315deg, #f5a319, hsl(36, 91%, 84%));
    background: linear-gradient(315deg, #9366f7, hsl(259, 90%, 85%));
    border-radius: var(--radius-lg);
    /* box-shadow: var(--box-shadow); */
    /* border: 1px solid rgb(0 0 0 / 5%); */
    overflow: hidden;
    color: #fff;
    text-shadow: 2px 2px 3px rgb(0 0 0 / 10%);
    box-shadow: var(--box-shadow-lg);
}
.home-card:nth-child(2) {
    background: #2eca65;
    background: linear-gradient(315deg, #2eca65, hsl(141, 63%, 70%));
}
.home-card i{
    width: 52px;
    height: 52px;
    background: rgb(255 255 255 / 20%);
    border-radius: var(--radius);
    --icon-size: 32px;
    position: absolute;
    left: 16px;
    top: 16px;
    box-shadow: var(--box-shadow-sm);
}
/* .home-card::after{
    display: block;
    position: absolute;
    top: -50%;
    left: -20%;
    z-index: -1;
    width: 60%;
    height: 200%;
    content: "";
    background: linear-gradient(90deg, rgb(255 255 255 / 50%), transparent);
    transform: rotate(25deg);
    transition: width 0.2s ease-in-out, transform 0.1s ease-in-out;
} */

#pending-orders .container:empty{
    background: url(../img/loading.svg) center center no-repeat;
    background-size: 100px 100px;
    min-height: 100px;
}

#testimonials .starRating-group{
    justify-content: center !important;
    margin-top: 1rem;
}