@font-face {
    font-family: 'Yekan';
    src:	url('../fonts/Yekan.eot'); /* IE9 Compat Modes */
    src:	url('../fonts/Yekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Yekan.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/Yekan.woff') format('woff'), /* Modern Browsers */
    url('../fonts/Yekan.otf') format('opentype'), /* Open Type Font */
    url('../fonts/Yekan.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    font-display: auto;
}
* {
    font-family: "Yekan" !important;
}
.container[data-v-01aa129f] {
    position: relative
}

/* استایل پس‌زمینه بلور شده */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* رنگ تیره برای پس‌زمینه */
    backdrop-filter: blur(8px); /* اعمال افکت بلور */
    -webkit-backdrop-filter: blur(8px); /* برای سازگاری با سافاری */
    display: none; /* در ابتدا مخفی است */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* اطمینان از نمایش روی همه عناصر */
    opacity: 0; /* برای انیمیشن fade-in */
    transition: opacity 0.3s ease-in-out;
}

.modal-overlay.active {
    display: flex; /* نمایش داده می‌شود وقتی کلاس active دارد */
    opacity: 1;
}

/* استایل کارت مدال */
.modal-content {
    background-color: #fff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%; /* عرض در موبایل */
    max-width: 500px; /* حداکثر عرض در دسکتاپ */
    text-align: center;
    transform: translateY(-50px); /* برای انیمیشن slide-in */
    opacity: 0; /* برای انیمیشن fade-in */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.modal-header h5 {
    margin-bottom: 0;
    font-size: 1.5rem;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
    color: #6c757d;
}

.close-modal-btn:hover {
    color: #343a40;
}

.modal-body p {
    font-size: 1.1rem;
    color: #555;
}

.modal-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 20px;
}

/* استایل دکمه دانلود */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* استایل دکمه بستن */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}


.container .banner-subtitle[data-v-01aa129f] {
    color: var(--primary-color);
    width: fit-content;
    font-size: 100%
}

.container .banner-title[data-v-01aa129f] {
    font-weight: 200;
    line-height: 2
}

.container .banner-title span[data-v-01aa129f] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

.container .main-item-back[data-v-01aa129f] {
    position: relative;
    border-radius: 155px;
    font-weight: 600
}

.container .first-arrow[data-v-01aa129f] {
    color: #232323;
    opacity: .25;
    font-size: 80%
}

.container .second-arrow[data-v-01aa129f] {
    color: #232323;
    opacity: .5;
    font-size: 100%
}

.container .third-arrow[data-v-01aa129f] {
    color: #232323;
    font-size: 120%
}

.container .banner-images[data-v-01aa129f] {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    width: 100%
}

@media (min-width: 992px) {
    .container .banner-images[data-v-01aa129f] {
        display: block;
        position: static;
        margin-bottom: 0;
        width: 100%
    }
}

.container .image-container[data-v-01aa129f] {
    width: 50%
}

@media (min-width: 992px) {
    .container .image-container[data-v-01aa129f] {
        width: auto;
        position: absolute
    }
}

.container .image-container img[data-v-01aa129f] {
    width: 100%
}

@media (min-width: 992px) {
    .container .image-container img[data-v-01aa129f] {
        width: 100%
    }
}

.container .image-container-1[data-v-01aa129f] {
    float: right
}

.container .image-container-2[data-v-01aa129f] {
    float: left
}

@media (min-width: 992px) {
    .container .image-container-1[data-v-01aa129f] {
        right: 0;
        bottom: 0
    }

    .container .image-container-2[data-v-01aa129f] {
        left: 0;
        bottom: 0
    }
}

.desktop-search-wrapper[data-v-01aa129f] {
    border-radius: 62px;
    background: var(--box-color);
    width: 70%
}

.salon-icon[data-v-01aa129f] {
    margin-right: 110px;
    background-color: var(--primary-color);
    color: #fff
}

.people-icon[data-v-01aa129f] {
    background-color: var(--box-color);
    margin-left: 10px;
    color: var(--description-color);
    font-size: 100%;
    font-weight: 400
}

.search-component .search-container[data-v-01aa129f], .search-component .search-results[data-v-01aa129f] {
    z-index: 1500 !important
}

.teams-services-wrapper .subtitle[data-v-b66afc9f] {
    border-radius: var(--border-radius-xl);
    border: 1px solid #fff;
    color: var(--primary-color);
    width: fit-content;
    background: #fff;
    font-size: 100%
}

.teams-services-wrapper .title[data-v-b66afc9f] {
    font-weight: 200;
    line-height: 2.2;
    font-size: 125%
}

.teams-services-wrapper .title span[data-v-b66afc9f] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

@media (min-width: 992px) {
    .teams-services-wrapper .title[data-v-b66afc9f] {
        font-size: 210%;
        line-height: 2
    }
}

.teams-services-wrapper .services-wrapper[data-v-b66afc9f] {
    background-color: var(--primary-ultralight-color);
    border-radius: 50px;
    position: relative
}

.teams-services-wrapper .services-wrapper .icon-wrapper[data-v-b66afc9f] {
    position: absolute;
    top: -36px;
    right: 37%;
    background-color: #fcfcfc;
    border-radius: 50%
}

@media (min-width: 992px) {
    .teams-services-wrapper .services-wrapper .icon-wrapper[data-v-b66afc9f] {
        right: 47%
    }
}

.teams-services-wrapper .services-wrapper .icon-wrapper span[data-v-b66afc9f] {
    background-color: var(--primary-ultralight-color);
    border-radius: 50%
}

.teams-services-wrapper .services-wrapper .service-box[data-v-b66afc9f] {
    border-radius: 40px;
    background: #f5e7e0
}

.teams-services-wrapper .services-wrapper .service-box span[data-v-b66afc9f] {
    border-radius: 24px;
    background: var(--primary-ultralight-color);
    box-shadow: 0 8px 16px #00000014
}

.teams-services-wrapper .services-wrapper .service-box h3[data-v-b66afc9f] {
    font-size: 100%;
    text-align: center
}

@media (min-width: 992px) {
    .teams-services-wrapper .services-wrapper .service-box h3[data-v-b66afc9f] {
        font-size: 130%
    }
}

.teams-services-wrapper .services-wrapper .service-box p[data-v-b66afc9f] {
    font-size: 90%;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden
}

@media (min-width: 992px) {
    .teams-services-wrapper .services-wrapper .service-box p[data-v-b66afc9f] {
        font-size: 100%
    }
}

.teams-services-wrapper .teams-wrapper[data-v-b66afc9f] {
    margin-top: -60px;
    border-radius: 96px;
    background: #f5e7e0
}

@media (min-width: 992px) {
    .teams-services-wrapper .teams-wrapper[data-v-b66afc9f] {
        margin-top: -40px
    }
}

.teams-services-wrapper .slider-box img[data-v-b66afc9f] {
    filter: grayscale(100%);
    height: 70px
}

@media (min-width: 992px) {
    .teams-services-wrapper .slider-box img[data-v-b66afc9f] {
        height: 90px
    }
}

.teams-services-wrapper .slider-box:hover img[data-v-b66afc9f] {
    filter: grayscale(0)
}

.container .subtitle[data-v-b0620131] {
    color: var(--primary-color);
    width: fit-content;
    font-size: 100%
}

.container .title[data-v-b0620131] {
    font-weight: 200;
    line-height: 2.2;
    font-size: 125%
}

.container .title span[data-v-b0620131] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

@media (min-width: 992px) {
    .container .title[data-v-b0620131] {
        font-size: 210%;
        line-height: 2
    }
}

.container .see-all[data-v-b0620131] {
    font-size: 90%;
    position: relative;
    background-color: var(--primary-color);
    border-radius: 155px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 12px #45a5d53d, 2px 2px 12px #fff3 inset, -2px -2px 4px #0000000a inset
}

.container .see-all[data-v-b0620131]:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 155px;
    top: 0;
    right: 0;
    transform: rotate(6deg);
    z-index: -1;
    background: #e4f0f6;
    box-shadow: 2px 2px 12px #fff3 inset, -1px -1px 4px #0000000a inset
}

@media (min-width: 992px) {
    .container .see-all[data-v-b0620131] {
        font-size: 100%
    }
}

.container .mostselling-tabs button[data-v-b0620131] {
    font-size: 90%;
    font-weight: 600;
    color: var(--secondary-color);
    border-bottom: 1px solid transparent
}

.container .mostselling-tabs .active[data-v-b0620131] {
    color: var(--primary-color);
    border-color: var(--primary-color)
}

.container .swiper[data-v-b0620131] {
    padding-bottom: 50px
}

.container .slider-box[data-v-b0620131] {
    cursor: pointer;
    height: 100%
}

.container .slider-box[data-v-b0620131] {
    width: 100%;
    color: var(--secondary-color);
    text-decoration: none;
    border: 1px solid transparent;
    position: relative;
    border: 1px solid var(--stroke-color);
    background: var(--background-color);
    border-radius: 32px;
    cursor: pointer
}

.container .slider-box .more-info[data-v-b0620131] {
    color: #a09f9f;
    font-weight: 400;
    font-size: 85%;
    position: absolute;
    bottom: 16px;
    left: 16px
}

.container .slider-box .location-wrapper[data-v-b0620131] {
    font-size: 100%;
    font-weight: 600
}

.container .slider-box .location-wrapper .value-location[data-v-b0620131] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: var(--text-primary-color);
    letter-spacing: -1px
}

@media (min-width: 992px) {
    .container .slider-box .location-wrapper[data-v-b0620131] {
        font-size: 100%
    }
}

.container .slider-box .location-wrapper .box-title[data-v-b0620131] {
    color: var(--description-color);
    font-weight: 600;
    white-space: nowrap
}

.container .slider-box .location-wrapper .value-status[data-v-b0620131] {
    color: var(--success-color)
}

.container .slider-box .location-wrapper .value-status.text-danger[data-v-b0620131] {
    color: var(--danger-color)
}

.container .slider-box .location-wrapper .value-opacity[data-v-b0620131] {
    color: var(--text-color);
    font-weight: 600
}

.container .slider-box .value-sports[data-v-b0620131] {
    color: var(--text-primary-color);
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.container .slider-box .project-name[data-v-b0620131] {
    color: var(--secondary-color);
    font-size: 90%;
    font-weight: 600
}

.container .slider-box .project-name .club-name[data-v-b0620131] {
    display: -webkit-box;
    width: 75%;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.container .slider-box .project-name .fav[data-v-b0620131] {
    font-size: 81%;
    color: #fff
}

@media (min-width: 1200px) {
    .container .slider-box .project-name[data-v-b0620131] {
        font-size: 100%
    }
}

.container .slider-box .rate-wrapper[data-v-b0620131] {
    background: #fdca25;
    box-shadow: 0 4px 12px #fdca253d, 2px 2px 10px #fff3 inset;
    border-radius: var(--border-radius-md)
}

.container .slider-box .price-wrapper[data-v-b0620131] {
    font-size: 100%;
    color: var(--secondary-color)
}

.container .slider-box .price-wrapper .main-price[data-v-b0620131] {
    color: var(--primary-color);
    font-weight: 600
}

.container .slider-box .price-wrapper .price-title[data-v-b0620131] {
    font-weight: 600;
    color: var(--text-primary-color)
}

.container .slider-box .project-info[data-v-b0620131] {
    border-bottom: 2px dashed var(--stroke-color)
}

.container .slider-box[data-v-b0620131]:hover {
    box-shadow: 0 8px 12px #7ab2d33d;
    background-color: transparent;
    border-color: var(--primary-color)
}

.container .slider-box:hover .shop-btn a[data-v-b0620131] {
    color: #fff;
    border: 1px solid var(--primary-color);
    background: var(--primary-color)
}

.container .slider-box:hover .shop-btn img[data-v-b0620131] {
    filter: brightness(0) invert(1)
}

@media (min-width: 992px) {
    .container .slider-box[data-v-b0620131] {
        padding: 3px
    }
}

.container .image-container[data-v-b0620131] {
    width: 100%;
    height: 162px;
    border-radius: 24px;
    border: 1px solid transparent;
    position: relative;
    z-index: 1
}

@media (min-width: 992px) {
    .container .image-container[data-v-b0620131] {
        height: 225px
    }
}

.container .image-container .ultra-wide[data-v-b0620131] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 100%;
    border-radius: var(--border-radius-xl)
}

.container .count-wrapper[data-v-b0620131] {
    padding: 5px;
    margin-top: -50px;
    position: relative;
    z-index: 100
}

.container .count-wrapper .count-item[data-v-b0620131] {
    border-radius: 40px;
    box-shadow: 0 4px 12px #0000003d;
    background-color: var(--background-color);
    padding: 2px 5px;
    color: var(--text--color);
    font-size: 100%
}

.container .count-wrapper .count-item img[data-v-b0620131] {
    width: 20px
}

.container .count-wrapper .phone-item[data-v-b0620131] {
    border-radius: 40px;
    box-shadow: 0 4px 12px #0000003d;
    background-color: var(--background-color);
    padding: 2px 5px;
    color: var(--primary-color);
    font-size: 100%
}

.container .swiper-button-next[data-v-b0620131] {
    background-color: #fff;
    box-shadow: 0 1px 5px #bfbfbfbf;
    color: var(--text-primary-color);
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px
}

@media (min-width: 992px) {
    .container .swiper-button-next[data-v-b0620131] {
        width: 40px;
        height: 40px
    }
}

.container .swiper-button-next[data-v-b0620131]:after {
    content: "" !important;
    width: 30px
}

.container .swiper-button-prev[data-v-b0620131] {
    background-color: #fff;
    box-shadow: 0 1px 5px #bfbfbfbf;
    color: var(--text-primary-color);
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px
}

@media (min-width: 992px) {
    .container .swiper-button-prev[data-v-b0620131] {
        width: 40px;
        height: 40px
    }
}

.container .swiper-button-prev[data-v-b0620131]:after {
    content: "" !important;
    width: 30px
}

.container .timer span[data-v-b0620131] {
    color: var(--primary-color)
}

.container .height-54[data-v-b0620131] {
    height: 54px
}

.container .shop-btn[data-v-b0620131] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.container .shop-btn a[data-v-b0620131] {
    color: var(--primary-color);
    font-size: 70%;
    font-style: normal;
    font-weight: 700;
    border-radius: 155px;
    border: 1px solid var(--primary-color);
    background: var(--primary-ultralight-color)
}

@media (min-width: 992px) {
    .container .shop-btn a[data-v-b0620131] {
        font-size: 100%
    }
}

.container .shop-btn span[data-v-b0620131] {
    background-color: var(--background-dark-color);
    color: var(--primary-color);
    border-radius: 155px;
    font-size: 70%
}

@media (min-width: 992px) {
    .container .shop-btn span[data-v-b0620131] {
        font-size: 100%
    }
}

.container-wrapper[data-v-8c3094f8] {
    padding: 32px;
    border-radius: 64px;
    background-color: var(--primary-ultralight-color)
}

.container-wrapper .subtitle[data-v-8c3094f8] {
    color: var(--primary-color);
    width: fit-content;
    font-size: 100%
}

.container-wrapper .title[data-v-8c3094f8] {
    font-weight: 200;
    line-height: 2.2;
    font-size: 125%
}

.container-wrapper .title span[data-v-8c3094f8] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

@media (min-width: 992px) {
    .container-wrapper .title[data-v-8c3094f8] {
        font-size: 210%;
        line-height: 2
    }
}

.container-wrapper .description[data-v-8c3094f8] {
    color: var(--description-color);
    font-size: 100%;
    font-weight: 500;
    line-height: 32px;
    text-align: justify
}

.container-wrapper .see-all[data-v-8c3094f8] {
    font-size: 90%;
    position: relative;
    background-color: var(--primary-color);
    border-radius: 155px;
    font-weight: 600;
    color: #fff
}

@media (min-width: 992px) {
    .container-wrapper .see-all[data-v-8c3094f8] {
        font-size: 100%
    }
}

.container-wrapper .practice-opponent-image[data-v-8c3094f8] {
    position: relative
}

.container-wrapper .practice-opponent-image img[data-v-8c3094f8] {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (min-width: 992px) {
    .container-wrapper .practice-opponent-image img[data-v-8c3094f8] {
        margin-top: -90px
    }

    .container-wrapper .practice-opponent-image img img[data-v-8c3094f8] {
        width: auto;
        height: auto
    }
}

.container-wrapper .swiper-info[data-v-8c3094f8] {
    background-color: var(--background-color);
    border-radius: 64px;
    padding: 16px
}

@media (min-width: 992px) {
    .container-wrapper .swiper-info[data-v-8c3094f8] {
        padding: 32px
    }
}

.container-wrapper .mostselling-tabs button[data-v-8c3094f8] {
    font-size: 90%;
    font-weight: 600;
    color: var(--secondary-color);
    border-bottom: 1px solid transparent
}

.container-wrapper .mostselling-tabs .active[data-v-8c3094f8] {
    color: var(--primary-color);
    border-color: var(--primary-color)
}

.container-wrapper .swiper[data-v-8c3094f8] {
    padding-bottom: 50px
}

.container-wrapper .slider-box[data-v-8c3094f8] {
    cursor: pointer;
    height: 100%
}

.container-wrapper .slider-box[data-v-8c3094f8] {
    width: 100%;
    color: var(--secondary-color);
    text-decoration: none;
    border: 1px solid transparent;
    position: relative;
    border: 1px solid var(--stroke-color);
    background: var(--background-color);
    border-radius: 32px;
    cursor: pointer
}

.container-wrapper .slider-box .more-info[data-v-8c3094f8] {
    color: #a09f9f;
    font-weight: 400;
    font-size: 85%;
    position: absolute;
    bottom: 16px;
    left: 16px
}

.container-wrapper .slider-box .location-wrapper[data-v-8c3094f8] {
    font-size: 100%;
    font-weight: 600
}

.container-wrapper .slider-box .location-wrapper .value-location[data-v-8c3094f8] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: var(--text-primary-color);
    letter-spacing: -1px
}

.container-wrapper .slider-box .location-wrapper .box-title[data-v-8c3094f8] {
    color: var(--description-color);
    font-weight: 600
}

.container-wrapper .slider-box .location-wrapper .value-age[data-v-8c3094f8], .container-wrapper .slider-box .location-wrapper .value-sport[data-v-8c3094f8] {
    color: var(--text-color);
    font-weight: 600
}

.container-wrapper .slider-box .project-name[data-v-8c3094f8] {
    color: var(--secondary-color);
    font-size: 90%;
    font-weight: 600
}

.container-wrapper .slider-box .project-name .club-name[data-v-8c3094f8] {
    display: -webkit-box;
    width: 75%;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.container-wrapper .slider-box .project-name .phone[data-v-8c3094f8] {
    font-size: 81%
}

@media (min-width: 1200px) {
    .container-wrapper .slider-box .project-name[data-v-8c3094f8] {
        font-size: 100%
    }
}

.container-wrapper .slider-box .phone-wrapper[data-v-8c3094f8] {
    background: var(--box-color);
    border-radius: var(--border-radius-md)
}

.container-wrapper .slider-box .price-wrapper[data-v-8c3094f8] {
    font-size: 100%;
    color: var(--secondary-color)
}

.container-wrapper .slider-box .price-wrapper .main-price[data-v-8c3094f8] {
    color: var(--primary-color);
    font-weight: 400
}

.container-wrapper .slider-box .price-wrapper .price-title[data-v-8c3094f8] {
    font-weight: 600;
    color: var(--text-primary-color)
}

.container-wrapper .slider-box .project-info[data-v-8c3094f8] {
    border-bottom: 2px dashed var(--stroke-color)
}

.container-wrapper .slider-box[data-v-8c3094f8]:hover {
    box-shadow: 0 8px 12px #7ab2d33d;
    background-color: transparent;
    border-color: var(--primary-color)
}

.container-wrapper .slider-box:hover .shop-btn a[data-v-8c3094f8]:not(.disabled) {
    color: #fff;
    border: 1px solid var(--primary-color);
    background: var(--primary-color)
}

.container-wrapper .slider-box:hover .shop-btn a:not(.disabled) img[data-v-8c3094f8] {
    filter: brightness(0) invert(1)
}

@media (min-width: 992px) {
    .container-wrapper .slider-box[data-v-8c3094f8] {
        padding: 3px
    }
}

.container-wrapper .image-container[data-v-8c3094f8] {
    width: 100%;
    height: auto;
    border-radius: 24px;
    border: 1px solid transparent;
    position: relative;
    z-index: 1
}

.container-wrapper .image-container .ultra-wide[data-v-8c3094f8] {
    width: 64px;
    height: 61px;
    object-fit: cover
}

.container-wrapper .send-invite[data-v-8c3094f8] {
    background-color: var(--primary-color);
    border-radius: 155px;
    color: #fff;
    font-size: 70%
}

@media (min-width: 992px) {
    .container-wrapper .send-invite[data-v-8c3094f8] {
        font-size: 100%
    }
}

.container-wrapper .swiper-button-next[data-v-8c3094f8] {
    background-color: #fff;
    box-shadow: 0 1px 5px #bfbfbfbf;
    color: var(--text-primary-color);
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px
}

@media (min-width: 992px) {
    .container-wrapper .swiper-button-next[data-v-8c3094f8] {
        width: 40px;
        height: 40px
    }
}

.container-wrapper .swiper-button-next[data-v-8c3094f8]:after {
    content: "" !important;
    width: 30px
}

.container-wrapper .swiper-button-prev[data-v-8c3094f8] {
    background-color: #fff;
    box-shadow: 0 1px 5px #bfbfbfbf;
    color: var(--text-primary-color);
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px
}

@media (min-width: 992px) {
    .container-wrapper .swiper-button-prev[data-v-8c3094f8] {
        width: 40px;
        height: 40px
    }
}

.container-wrapper .swiper-button-prev[data-v-8c3094f8]:after {
    content: "" !important;
    width: 30px
}

.container-wrapper .timer span[data-v-8c3094f8] {
    color: var(--primary-color)
}

.container-wrapper .height-54[data-v-8c3094f8] {
    height: 54px
}

.container-wrapper .shop-btn[data-v-8c3094f8] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.container-wrapper .shop-btn a[data-v-8c3094f8] {
    color: var(--primary-color);
    font-size: 70%;
    font-style: normal;
    font-weight: 700;
    border-radius: 155px;
    border: 1px solid var(--primary-color);
    background: var(--primary-ultralight-color)
}

@media (min-width: 992px) {
    .container-wrapper .shop-btn a[data-v-8c3094f8] {
        font-size: 100%
    }
}

.container-wrapper .shop-btn a.disabled[data-v-8c3094f8] {
    color: #999;
    border-color: #ccc;
    background: #f5f5f5;
    cursor: not-allowed;
    opacity: .6
}

.container-wrapper .shop-btn a.disabled img[data-v-8c3094f8] {
    filter: grayscale(100%)
}

.modal-overlay[data-v-8c3094f8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000080;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999
}

.modal-content[data-v-8c3094f8] {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    direction: rtl
}

.modal-header[data-v-8c3094f8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee
}

.modal-header h5[data-v-8c3094f8] {
    margin: 0;
    color: var(--secondary-color);
    font-weight: 600
}

.modal-header .close-btn[data-v-8c3094f8] {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #999
}

.modal-header .close-btn[data-v-8c3094f8]:hover {
    color: #333
}

.modal-body[data-v-8c3094f8] {
    padding: 20px
}

.modal-body .teammate-info[data-v-8c3094f8] {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px
}

.modal-body .teammate-info p[data-v-8c3094f8] {
    margin: 5px 0;
    color: var(--text-color)
}

.modal-body .teammate-info p strong[data-v-8c3094f8] {
    color: var(--secondary-color)
}

.modal-body .form-group[data-v-8c3094f8] {
    margin-bottom: 20px
}

.modal-body .form-group label[data-v-8c3094f8] {
    display: block;
    margin-bottom: 8px;
    color: var(--secondary-color);
    font-weight: 600
}

.modal-body .form-group .form-control[data-v-8c3094f8] {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    resize: vertical
}

.modal-body .form-group .form-control[data-v-8c3094f8]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px #7ab2d333
}

.modal-footer[data-v-8c3094f8] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 20px;
    border-top: 1px solid #eee
}

.modal-footer .btn[data-v-8c3094f8] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all .3s ease
}

.modal-footer .btn.btn-secondary[data-v-8c3094f8] {
    background: #6c757d;
    color: #fff
}

.modal-footer .btn.btn-secondary[data-v-8c3094f8]:hover {
    background: #5a6268
}

.modal-footer .btn.btn-primary[data-v-8c3094f8] {
    background: var(--primary-color);
    color: #fff
}

.modal-footer .btn.btn-primary[data-v-8c3094f8]:hover {
    background: #4a90a4
}

.success-notification[data-v-8c3094f8] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    animation: slideIn-8c3094f8 .3s ease-out
}

.success-content[data-v-8c3094f8] {
    background: #28a745;
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px #00000026;
    font-weight: 600;
    direction: rtl
}

@keyframes slideIn-8c3094f8 {
    0% {
        transform: translate(100%);
        opacity: 0
    }
    to {
        transform: translate(0);
        opacity: 1
    }
}

.container[data-v-9850b34c] {
    margin-bottom: 140px
}

.container .subtitle[data-v-9850b34c] {
    color: var(--primary-color);
    width: fit-content;
    font-size: 100%
}

.container .title[data-v-9850b34c] {
    font-weight: 200;
    line-height: 2.2;
    font-size: 125%
}

.container .title span[data-v-9850b34c] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

@media (min-width: 992px) {
    .container .title[data-v-9850b34c] {
        font-size: 210%;
        line-height: 2
    }
}

.container .see-all[data-v-9850b34c] {
    font-size: 90%;
    position: relative;
    background-color: var(--primary-color);
    border-radius: 155px;
    font-weight: 600;
    color: #fff;
    box-shadow: 0 4px 12px #45a5d53d, 2px 2px 12px #fff3 inset, -2px -2px 4px #0000000a inset
}

.container .see-all[data-v-9850b34c]:after {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: 155px;
    top: 0;
    right: 0;
    transform: rotate(6deg);
    z-index: -1;
    background: #e4f0f6;
    box-shadow: 2px 2px 12px #fff3 inset, -1px -1px 4px #0000000a inset
}

@media (min-width: 992px) {
    .container .see-all[data-v-9850b34c] {
        font-size: 100%
    }
}

.container .mostselling-tabs button[data-v-9850b34c] {
    font-size: 90%;
    font-weight: 600;
    color: var(--secondary-color);
    border-bottom: 1px solid transparent
}

.container .mostselling-tabs .active[data-v-9850b34c] {
    color: var(--primary-color);
    border-color: var(--primary-color)
}

.container .swiper[data-v-9850b34c] {
    padding-bottom: 210px
}

.container .slider-box[data-v-9850b34c] {
    cursor: pointer;
    height: 100%
}

.container .slider-box[data-v-9850b34c] {
    width: 100%;
    color: var(--secondary-color);
    text-decoration: none;
    border: 1px solid transparent;
    position: relative;
    border-radius: var(--border-radius-xl);
    cursor: pointer
}

.container .slider-box .more-info[data-v-9850b34c] {
    color: #a09f9f;
    font-weight: 400;
    font-size: 85%;
    position: absolute;
    bottom: 16px;
    left: 16px
}

.container .slider-box .location-wrapper[data-v-9850b34c] {
    font-size: 100%
}

.container .slider-box .location-wrapper span[data-v-9850b34c] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    color: var(--text-primary-color);
    letter-spacing: -1px
}

.container .slider-box .project-name[data-v-9850b34c] {
    color: var(--secondary-color);
    font-size: 90%;
    font-weight: 600
}

.container .slider-box .project-name .club-name[data-v-9850b34c] {
    display: -webkit-box;
    width: 75%;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.container .slider-box .project-name .fav[data-v-9850b34c] {
    font-size: 81%;
    color: #fff
}

@media (min-width: 1200px) {
    .container .slider-box .project-name[data-v-9850b34c] {
        font-size: 100%
    }
}

.container .slider-box .rate-wrapper[data-v-9850b34c] {
    background: #fdca25;
    box-shadow: 0 4px 12px #fdca253d, 2px 2px 10px #fff3 inset;
    border-radius: var(--border-radius-md)
}

.container .slider-box .price-wrapper[data-v-9850b34c] {
    font-size: 100%;
    color: var(--secondary-color)
}

.container .slider-box .price-wrapper .main-price[data-v-9850b34c] {
    color: var(--primary-color);
    font-weight: 600
}

.container .slider-box .price-wrapper .price-title[data-v-9850b34c] {
    color: var(--text-primary-color)
}

.container .slider-box .project-info[data-v-9850b34c] {
    color: var(--text-secondary-color);
    font-weight: 700
}

@media (min-width: 992px) {
    .container .slider-box[data-v-9850b34c] {
        padding: 3px
    }
}

.container .image-container[data-v-9850b34c] {
    width: 100%;
    border-radius: 24px;
    border: 1px solid transparent
}

.container .image-container .ultra-wide[data-v-9850b34c] {
    width: 100px;
    height: 100px;
    object-fit: cover;
    max-height: 100%;
    border-radius: var(--border-radius-xl)
}

.container .swiper-button-next[data-v-9850b34c] {
    background-color: #fff;
    box-shadow: 0 1px 5px #bfbfbfbf;
    color: var(--text-primary-color);
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px
}

@media (min-width: 992px) {
    .container .swiper-button-next[data-v-9850b34c] {
        width: 40px;
        height: 40px
    }
}

.container .swiper-button-next[data-v-9850b34c]:after {
    content: "" !important;
    width: 30px
}

.container .swiper-button-prev[data-v-9850b34c] {
    background-color: #fff;
    box-shadow: 0 1px 5px #bfbfbfbf;
    color: var(--text-primary-color);
    border-radius: 50%;
    padding: 5px;
    width: 30px;
    height: 30px
}

@media (min-width: 992px) {
    .container .swiper-button-prev[data-v-9850b34c] {
        width: 40px;
        height: 40px
    }
}

.container .swiper-button-prev[data-v-9850b34c]:after {
    content: "" !important;
    width: 30px
}

.container .timer span[data-v-9850b34c] {
    color: var(--primary-color)
}

.container .height-54[data-v-9850b34c] {
    height: 54px
}

.container .shop-btn[data-v-9850b34c] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.container .shop-btn a[data-v-9850b34c] {
    color: var(--primary-color);
    font-size: 70%;
    font-style: normal;
    font-weight: 700;
    border-radius: 155px;
    border: 1px solid var(--primary-color);
    background: #fff
}

@media (min-width: 992px) {
    .container .shop-btn a[data-v-9850b34c] {
        font-size: 100%
    }
}

.container .shop-btn span[data-v-9850b34c] {
    background-color: var(--background-dark-color);
    color: var(--primary-color);
    border-radius: 155px;
    font-size: 70%
}

@media (min-width: 992px) {
    .container .shop-btn span[data-v-9850b34c] {
        font-size: 100%
    }
}

.container .satisfaction-swiper .swiper-slide[data-v-9850b34c] {
    transition: transform .3s ease, opacity .3s ease;
    opacity: .5
}

.container .satisfaction-swiper .swiper-slide-active[data-v-9850b34c] {
    transform: scale(1.2);
    opacity: 1
}

.container .active-slide-text[data-v-9850b34c] {
    margin-top: -190px
}

.container .active-slide-text h2[data-v-9850b34c] {
    text-align: center;
    font-size: 70%;
    font-weight: 700;
    margin-bottom: 30px
}

@media (min-width: 992px) {
    .container .active-slide-text h2[data-v-9850b34c] {
        font-size: 130%
    }
}

.container .active-slide-text p[data-v-9850b34c] {
    text-align: center;
    font-size: 70%
}

@media (min-width: 992px) {
    .container .active-slide-text p[data-v-9850b34c] {
        font-size: 100%;
        padding: 0 70px
    }
}

.container-fluid[data-v-a86adfd3] {
    margin-bottom: 60px
}

@media (min-width: 992px) {
    .container-fluid[data-v-a86adfd3] {
        margin-bottom: 110px
    }
}

@media (min-width: 992px) {
    .wrapper-top[data-v-a86adfd3] {
        margin: 32px
    }
}

.wrapper-top .container[data-v-a86adfd3] {
    padding: 20px;
    color: var(--white-text-color)
}

@media (min-width: 992px) {
    .wrapper-top .container[data-v-a86adfd3] {
        padding: 40px
    }
}

.wrapper-top .container .subtitle[data-v-a86adfd3] {
    color: var(--primary-color);
    width: fit-content;
    font-size: 100%
}

.wrapper-top .container .title[data-v-a86adfd3] {
    font-weight: 200;
    line-height: 2.2;
    font-size: 125%
}

.wrapper-top .container .title span[data-v-a86adfd3] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

@media (min-width: 992px) {
    .wrapper-top .container .title[data-v-a86adfd3] {
        font-size: 210%;
        line-height: 2
    }
}

.wrapper-top .container .description[data-v-a86adfd3] {
    color: var(--description-color);
    font-size: 100%;
    font-weight: 500;
    line-height: 32px;
    text-align: justify
}

.wrapper-top .container .bnr-btn[data-v-a86adfd3] {
    display: flex;
    text-align: center;
    cursor: pointer;
    border-radius: 16px;
    background: var(--primary-color);
    padding: 4px 9px;
    width: fit-content;
    align-content: center;
    align-items: center;
    gap: 12px
}

.wrapper-top .container .bnr-btn p[data-v-a86adfd3] {
    color: var(--white-color);
    font-size: 87%;
    font-weight: 600
}

@media (min-width: 992px) {
    .wrapper-top .container .bnr-btn p[data-v-a86adfd3] {
        font-size: 100%
    }
}

.wrapper-top .container .btn-about[data-v-a86adfd3] {
    border-radius: 40px;
    background: var(--primary-ultralight-color)
}

.wrapper-top .container .btn-about span[data-v-a86adfd3] {
    color: var(--primary-color);
    font-size: 100%;
    font-weight: 600
}

.wrapper-top .container .btn-contact[data-v-a86adfd3] {
    border-radius: 40px;
    border: 1px solid var(--stroke-color);
    background: var(--background-color)
}

.wrapper-top .container .btn-contact span[data-v-a86adfd3] {
    color: var(--text-color);
    font-size: 100%;
    font-weight: 600
}

.container .title-section .sub-title[data-v-6c22ee87] {
    color: var(--text-green);
    font-size: 100%;
    font-weight: 600;
    margin-bottom: 20px
}

.container .title-section .sub-title img[data-v-6c22ee87] {
    padding: 4px;
    gap: 10px;
    border-radius: 8px;
    border: 1.5px solid var(--btn-primary-border)
}

.container .title-section .subtitle[data-v-6c22ee87] {
    color: var(--primary-color);
    width: fit-content;
    font-size: 100%
}

.container .title-section h2[data-v-6c22ee87] {
    font-weight: 200;
    line-height: 2.2;
    font-size: 125%
}

.container .title-section h2 span[data-v-6c22ee87] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

@media (min-width: 992px) {
    .container .title-section h2[data-v-6c22ee87] {
        font-size: 210%;
        line-height: 2
    }
}

.container .title-section .see-all[data-v-6c22ee87] {
    font-size: 90%;
    position: relative;
    background-color: var(--primary-color);
    border-radius: 155px;
    font-weight: 600;
    color: #fff
}

@media (min-width: 992px) {
    .container .title-section .see-all[data-v-6c22ee87] {
        font-size: 100%
    }
}

.container .slider-box[data-v-6c22ee87] {
    color: var(--secondary-color);
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .2);
    position: relative;
    cursor: pointer
}

.container .slider-box .img-container[data-v-6c22ee87] {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    border-radius: var(--border-radius-md);
    position: relative;
    background-color: #f5f5f5
}

.container .slider-box .item-img[data-v-6c22ee87] {
    width: 100%;
    height: 188px;
    border-radius: var(--border-radius-md);
    object-fit: cover
}

.container .slider-box .blog-date[data-v-6c22ee87] {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary-color);
    background-color: #f5f5f5;
    border-radius: var(--border-radius-sm);
    padding: 2px 8px;
    margin: 10px;
    font-size: 100%;
    font-weight: 400
}

.container .slider-box .post-title[data-v-6c22ee87] {
    font-size: 100%;
    font-weight: 600;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden
}

@media (min-width: 992px) {
    .container .slider-box .post-title[data-v-6c22ee87] {
        font-size: 120%
    }
}

.container .slider-box .description[data-v-6c22ee87] {
    color: var(--text-light-black);
    font-size: 100%;
    font-weight: 400;
    line-height: 36px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden
}

.container .more-btn[data-v-6c22ee87] {
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-md);
    border-radius: 155px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color)
}

.container .more-btn a[data-v-6c22ee87] {
    color: var(--primary-color);
    font-size: 100%;
    font-style: normal;
    font-weight: 700
}

.container-fluid .sport-section[data-v-33b16e0e] {
    position: relative
}

.container-fluid .sport-section .sport-section-description[data-v-33b16e0e] {
    position: relative;
    z-index: 1;
    margin-bottom: 40px
}

.container-fluid .sport-section .sport-section-description .sport-section-title .subtitle[data-v-33b16e0e] {
    color: var(--primary-color);
    width: fit-content;
    font-size: 100%
}

.container-fluid .sport-section .sport-section-description .sport-section-title .title[data-v-33b16e0e] {
    font-weight: 200;
    line-height: 2;
    color: var(--text-color);
    font-size: 150%;
    text-align: center
}

@media (min-width: 992px) {
    .container-fluid .sport-section .sport-section-description .sport-section-title .title[data-v-33b16e0e] {
        font-size: 180%
    }
}

.container-fluid .sport-section .sport-section-description .sport-section-title .title span[data-v-33b16e0e] {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-radius: 0;
    padding-bottom: 5px
}

.container-fluid .sport-section .sport-section-description .sport-box[data-v-33b16e0e] {
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: var(--box-color)
}

.container-fluid .sport-section .sport-section-description .sport-box[data-v-33b16e0e]:hover {
    background-color: var(--card-hover-color);
    box-shadow: 0 4px 12px #5f6f5233;
    border: 1px solid var(--card-hover-border)
}

.container-fluid .sport-section .sport-section-description .sport-wrapper .sport-box .sport-image-container img[data-v-33b16e0e] {
    padding: 18px 19px
}

.container-fluid .sport-section .sport-section-description .sport-wrapper a[data-v-33b16e0e] {
    color: var(--text-light-black);
    text-align: center;
    font-size: 100%;
    font-weight: 400
}

.container-fluid .sport-section .sport-section-description .sport-wrapper a[data-v-33b16e0e]:hover {
    color: var(--text-black);
    font-weight: 700
}

.container-fluid .sport-section .sport-section-description .sport-context[data-v-33b16e0e] {
    color: var(--text-primary-color)
}

.container-fluid .sport-section .sport-section-description .sport-context p[data-v-33b16e0e] {
    font-size: 100%
}