/*=============================================
=            CSS Index            =
=============================================

    -> Default styles
    -> Spacing
    -> Header
    -> Footer
    -> Sidebar
    -> Container
    -> Search overlay
    -> Hero slider
    -> Button
    -> Category
    -> Section title
    -> Product
    -> Slider
    -> Banner
    -> Feature logo
    -> Newsletter
    -> Testimonial 
    -> Scroll to top
    -> Quick view
    -> Breadcrumb
    -> Pagination
    -> Shop 
    -> Single product
    -> Cart
    -> Checkout
    -> My account
    -> Login register
    -> FAQ
    -> Compare
    -> Contact
    -> About us
    -> Blog

/*=====  End of CSS Index  ======*/

/*=============================================
=            Theme default CSS            =
=============================================*/
@font-face {
    font-family: 'IranYekan';
    src: url('../fonts/Yekan.woff') format('woff'), url('../fonts/Yekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@media print {

    button,
    a,
    .navbar,
    footer {
        display: none !important;
    }

    body {
        background: white;
    }

    .card {
        border: none;
        box-shadow: none;
    }
}
@media only screen and (min-width: 768px) {

    .desktop-only {
        display: block;
    }
}
@media only screen and (max-width: 767px) {
    body {
        top:50px !important;
    }
    .desktop-only {
        display: none;
    }
}
/* Skeleton اتوماتیک برای همه عکس‌ها */
img:not(.no-skeleton) {
    background: linear-gradient(90deg, #1e1e1e 25%, #2a2a2a 50%, #1e1e1e 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite linear;
    border-radius: 8px;
    opacity: 0;
    transition: all 0.4s ease;
}

    img:not(.no-skeleton).loaded {
        animation: none;
        background: none;
        opacity: 1;
        border-radius: 0;
    }

/* انیمیشن شایمر */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}
.install-button {
    background: linear-gradient(135deg, #ff6f61, #ff9800);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease-in-out;
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}

    .install-button.show-install-button {
        opacity: 1;
        visibility: visible;
        animation: fadeInUp 0.5s ease-in-out;
    }

@keyframes fadeInUp {
    from {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* ریسپانسیو */
@media (max-width: 480px) {
    .install-button {
        font-size: 14px;
        padding: 12px 24px;
        bottom: 20px;
    }
}
:root {
    --ms-brand: #480680;
    --ms-brand-dark: #300455;
    --ms-brand-light: #f6effa;
    --ms-text: #25212a;
    --ms-muted: #817987;
    --ms-border: #eee8f1;
    --ms-background: #faf9fb;
    --ms-white: #ffffff;
    --ms-success: #16845a;
    --ms-success-bg: #eaf8f1;
    --ms-danger: #c53d4d;
    --ms-danger-bg: #fff0f2;
    --ms-warning: #b97912;
    --ms-warning-bg: #fff7e7;
    --ms-blue: #3269b5;
    --ms-blue-bg: #edf4ff;
    --ms-shadow: 0 12px 35px rgba(50, 25, 65, .07);
    --ms-radius: 20px;
}


/* =========================================
   PAGE
========================================= */

.ms-seller-details-page {
    margin-top: 80px !important;
    background: var(--ms-background);
    min-height: calc(100vh - 80px);
    direction: rtl;
}


.ms-sidebar-column {
    position: relative;
    z-index: 2;
}


.ms-seller-details-main {
    padding: 35px 42px 60px;
    min-height: calc(100vh - 80px);
}


/* =========================================
   HEADER
========================================= */

.ms-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 25px;
}


.ms-header-content {
    display: flex;
    align-items: center;
    gap: 17px;
}


.ms-header-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient( 145deg, var(--ms-brand), var(--ms-brand-dark) );
    box-shadow: 0 10px 25px rgba(72, 6, 128, .20);
    font-size: 23px;
}


.ms-header-text .ms-eyebrow {
    display: block;
    font-size: 12px;
    color: var(--ms-brand);
    font-weight: 800;
    margin-bottom: 4px;
}


.ms-header-text h1 {
    margin: 0;
    font-size: 27px;
    font-weight: 900;
    color: var(--ms-text);
}


.ms-header-text p {
    margin: 6px 0 0;
    color: var(--ms-muted);
    font-size: 13px;
}


.ms-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 17px;
    border: 1px solid var(--ms-border);
    border-radius: 13px;
    background: #fff;
    color: var(--ms-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: .2s ease;
}


    .ms-back-button:hover {
        color: var(--ms-brand);
        border-color: rgba(72, 6, 128, .20);
        background: var(--ms-brand-light);
        transform: translateY(-2px);
    }


/* =========================================
   STATUS MESSAGE
========================================= */

.ms-status-message {
    display: flex;
    align-items: center;
    gap: 13px;
    background: #f2f6ff;
    border: 1px solid #dce7fa;
    border-radius: 16px;
    padding: 14px 17px;
    margin-bottom: 22px;
}


.ms-status-message-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e0eaff;
    color: #416fbd;
}


.ms-status-message strong {
    display: block;
    font-size: 13px;
    color: #274878;
}


.ms-status-message p {
    margin: 3px 0 0;
    color: #62708a;
    font-size: 12px;
}


/* =========================================
   SELLER HERO
========================================= */

.ms-seller-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    background: radial-gradient( circle at 90% 20%, rgba(72, 6, 128, .07), transparent 35% ), #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}


    .ms-seller-hero::after {
        content: "";
        position: absolute;
        left: -70px;
        bottom: -80px;
        width: 190px;
        height: 190px;
        border-radius: 50%;
        background: rgba(72, 6, 128, .035);
    }


.ms-seller-avatar {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient( 145deg, var(--ms-brand), #6c1a9c );
    box-shadow: 0 10px 25px rgba(72, 6, 128, .22), inset 0 1px rgba(255,255,255,.25);
    font-size: 29px;
    font-weight: 900;
    position: relative;
    z-index: 1;
}


.ms-seller-main-info {
    position: relative;
    z-index: 1;
    flex: 1;
}


.ms-seller-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}


    .ms-seller-name-row h2 {
        margin: 0;
        color: #e4d2ff;
        font-size: 22px;
        font-weight: 900;
    }


.ms-seller-contact {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 13px;
}


.ms-contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
}


.ms-contact-icon {
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    font-size: 13px;
}


.ms-contact-item small {
    display: block;
    color: var(--ms-muted);
    font-size: 10px;
    margin-bottom: 2px;
}


.ms-contact-item strong {
    display: block;
    color: #e4d2ff;
    font-size: 12px;
}


.ms-seller-id-box {
    position: relative;
    z-index: 1;
    min-width: 105px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #faf7fc;
    border: 1px solid #eee3f3;
    text-align: center;
}


    .ms-seller-id-box span {
        display: block;
        font-size: 10px;
        color: var(--ms-muted);
        margin-bottom: 4px;
    }


    .ms-seller-id-box strong {
        font-size: 15px;
        color: var(--ms-brand);
    }


/* =========================================
   STATUS BADGE
========================================= */

.ms-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}


.ms-status-success {
    color: var(--ms-success);
    background: var(--ms-success-bg);
}


.ms-status-danger {
    color: var(--ms-danger);
    background: var(--ms-danger-bg);
}


.ms-status-warning {
    color: var(--ms-warning);
    background: var(--ms-warning-bg);
}


/* =========================================
   STATISTICS
========================================= */

.ms-statistics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}


.ms-stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 125px;
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--ms-border);
    box-shadow: 0 8px 28px rgba(50, 25, 65, .045);
    overflow: hidden;
}


    .ms-stat-card::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        left: -45px;
        bottom: -45px;
        opacity: .45;
    }


.ms-stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 19px;
}


.ms-stat-purple .ms-stat-icon {
    background: var(--ms-brand-light);
    color: var(--ms-brand);
}


.ms-stat-green .ms-stat-icon {
    background: var(--ms-success-bg);
    color: var(--ms-success);
}


.ms-stat-blue .ms-stat-icon {
    background: var(--ms-blue-bg);
    color: var(--ms-blue);
}


.ms-stat-content {
    position: relative;
    z-index: 1;
}


    .ms-stat-content span {
        display: block;
        color: var(--ms-muted);
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 4px;
    }


    .ms-stat-content strong {
        display: block;
        color: var(--ms-text);
        font-size: 21px;
        font-weight: 900;
        line-height: 1.3;
    }


    .ms-stat-content small {
        display: block;
        color: #a098a5;
        font-size: 10px;
        margin-top: 2px;
    }


/* =========================================
   SECTION CARD
========================================= */

.ms-section-card {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
    margin-bottom: 22px;
    overflow: hidden;
}


.ms-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #f1edf3;
}


.ms-section-title-DetilsSeller {
    display: flex;
    align-items: center;
    gap: 12px;
}


.ms-section-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    font-size: 17px;
}


.ms-section-title-DetilsSeller h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color: var(--ms-text);
}


.ms-section-title-DetilsSeller p {
    margin: 4px 0 0;
    color: var(--ms-muted);
    font-size: 11px;
}


.ms-record-count {
    display: flex;
    align-items: center;
    gap: 7px;
}


    .ms-record-count span {
        color: var(--ms-muted);
        font-size: 10px;
    }


    .ms-record-count strong {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        padding: 0 7px;
        border-radius: 9px;
        background: var(--ms-brand-light);
        color: var(--ms-brand);
        font-size: 11px;
    }


/* =========================================
   INFO GRID
========================================= */

.ms-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: #f0ebf2;
}


.ms-info-item {
    padding: 20px;
    background: #fff;
}


.ms-info-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ms-muted);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 8px;
}


    .ms-info-label i {
        color: var(--ms-brand);
    }


.ms-info-item > strong {
    display: block;
    color: var(--ms-text);
    font-size: 13px;
    font-weight: 800;
}


/* =========================================
   TABLE
========================================= */

.ms-table-wrapper {
    width: 100%;
    overflow-x: auto;
}


.ms-sales-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 700px;
}


    .ms-sales-table thead th {
        padding: 14px 18px;
        background: #fbf9fc;
        color: #817788;
        font-size: 10px;
        font-weight: 900;
        text-align: right;
        border-bottom: 1px solid #eee9f1;
    }


    .ms-sales-table tbody td {
        padding: 15px 18px;
        border-bottom: 1px solid #f1edf3;
        color: var(--ms-text);
        font-size: 11px;
        vertical-align: middle;
    }


    .ms-sales-table tbody tr {
        transition: .18s ease;
    }


        .ms-sales-table tbody tr:hover {
            background: #fcf9fe;
        }


        .ms-sales-table tbody tr:last-child td {
            border-bottom: none;
        }


/* =========================================
   AD TITLE
========================================= */

.ms-ad-title {
    display: flex;
    align-items: center;
    gap: 10px;
}


.ms-ad-icon {
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    font-size: 13px;
}


.ms-ad-title strong {
    display: block;
    color: var(--ms-text);
    font-size: 11px;
    font-weight: 800;
    max-width: 260px;
}


.ms-ad-title small {
    display: block;
    margin-top: 3px;
    color: #a39ba7;
    font-size: 9px;
}


/* =========================================
   AD CODE
========================================= */

.ms-ad-code {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 8px;
    background: #f8f5fa;
    color: var(--ms-brand);
    font-size: 10px;
    font-weight: 800;
}


/* =========================================
   SALE PRICE
========================================= */

.ms-sale-price strong {
    font-size: 12px;
    font-weight: 900;
    color: var(--ms-text);
}


.ms-sale-price span {
    margin-right: 3px;
    color: var(--ms-muted);
    font-size: 9px;
}


/* =========================================
   DATE
========================================= */

.ms-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ms-muted);
    font-size: 10px;
}


    .ms-date i {
        color: var(--ms-brand);
    }


/* =========================================
   EMPTY STATE
========================================= */

.ms-empty-state {
    padding: 55px 25px;
    text-align: center;
}


.ms-empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    font-size: 27px;
}


.ms-empty-state h4 {
    margin: 0;
    color: var(--ms-text);
    font-size: 16px;
    font-weight: 900;
}


.ms-empty-state p {
    margin: 8px 0 0;
    color: var(--ms-muted);
    font-size: 11px;
}


/* =========================================
   MOBILE LIST
========================================= */

.ms-mobile-sales-list {
    display: none;
}


/* =========================================
   BOTTOM ACTION
========================================= */

.ms-bottom-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
}


.ms-back-main-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 19px;
    border-radius: 13px;
    background: var(--ms-brand);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 8px 22px rgba(72, 6, 128, .18);
    transition: .2s ease;
}


    .ms-back-main-button:hover {
        color: #fff;
        background: var(--ms-brand-dark);
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(72, 6, 128, .23);
    }


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .ms-seller-details-main {
        padding-left: 25px;
        padding-right: 25px;
    }

    .ms-seller-id-box {
        display: none;
    }
}


@media (max-width: 991.98px) {

    .ms-seller-details-page {
        margin-top: 20px !important;
    }

    .ms-sidebar-column {
        display: none;
    }

    .ms-seller-details-main {
        width: 100%;
        padding: 18px 15px 40px;
    }

    .ms-page-header {
        align-items: flex-start;
    }

    .ms-header-icon {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        border-radius: 14px;
        font-size: 19px;
    }

    .ms-header-text h1 {
        font-size: 21px;
    }

    .ms-header-text p {
        font-size: 11px;
    }

    .ms-back-button span {
        display: none;
    }

    .ms-back-button {
        width: 42px;
        height: 42px;
        justify-content: center;
        padding: 0;
    }

    .ms-seller-hero {
        align-items: flex-start;
        padding: 18px;
        gap: 13px;
    }

    .ms-seller-avatar {
        width: 57px;
        height: 57px;
        flex: 0 0 57px;
        border-radius: 17px;
        font-size: 22px;
    }

    .ms-seller-name-row h2 {
        font-size: 17px;
    }

    .ms-seller-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 9px;
        margin-top: 10px;
    }

    .ms-statistics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ms-stat-card {
        min-height: 95px;
        padding: 15px;
    }

    .ms-section-header {
        padding: 16px;
    }

    .ms-info-grid {
        grid-template-columns: 1fr;
    }

    .ms-table-wrapper {
        display: none;
    }

    .ms-mobile-sales-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px;
    }

    .ms-mobile-sale-card {
        padding: 15px;
        border: 1px solid #eee8f1;
        border-radius: 15px;
        background: #fff;
    }

    .ms-mobile-sale-top {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ms-mobile-ad-icon {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: var(--ms-brand-light);
        color: var(--ms-brand);
        font-size: 14px;
    }

    .ms-mobile-ad-title {
        flex: 1;
        min-width: 0;
    }

        .ms-mobile-ad-title strong {
            display: block;
            color: var(--ms-text);
            font-size: 11px;
            font-weight: 900;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ms-mobile-ad-title span {
            display: block;
            margin-top: 4px;
            color: var(--ms-muted);
            font-size: 9px;
        }

    .ms-mobile-sale-top .ms-status-badge {
        font-size: 8px;
        padding: 5px 7px;
    }

    .ms-mobile-sale-divider {
        height: 1px;
        background: #f0ebf2;
        margin: 13px 0;
    }

    .ms-mobile-sale-details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

        .ms-mobile-sale-details > div {
            padding: 9px;
            border-radius: 10px;
            background: #faf8fb;
        }

        .ms-mobile-sale-details span {
            display: block;
            color: var(--ms-muted);
            font-size: 9px;
            margin-bottom: 5px;
        }

        .ms-mobile-sale-details strong {
            display: block;
            color: var(--ms-text);
            font-size: 11px;
            font-weight: 900;
        }

            .ms-mobile-sale-details strong small {
                color: var(--ms-muted);
                font-size: 8px;
                font-weight: 700;
            }

    .ms-mobile-date {
        display: flex !important;
        align-items: center;
        gap: 5px;
    }

    .ms-bottom-actions {
        justify-content: stretch;
    }

    .ms-back-main-button {
        width: 100%;
        justify-content: center;
    }
}


@media (max-width: 575.98px) {

    .ms-seller-details-main {
        padding-left: 10px;
        padding-right: 10px;
    }

    .ms-page-header {
        margin-bottom: 16px;
    }

    .ms-header-content {
        gap: 10px;
    }

    .ms-header-icon {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        border-radius: 12px;
    }

    .ms-header-text h1 {
        font-size: 18px;
    }

    .ms-header-text p {
        display: none;
    }

    .ms-seller-hero {
        border-radius: 16px;
    }

    .ms-seller-name-row {
        display: block;
    }

        .ms-seller-name-row h2 {
            margin-bottom: 8px;
        }

    .ms-contact-item strong {
        font-size: 11px;
    }

    .ms-section-card {
        border-radius: 16px;
    }

    .ms-section-title-DetilsSeller h3 {
        font-size: 14px;
    }

    .ms-section-title-DetilsSeller p {
        display: none;
    }

    .ms-record-count {
        display: none;
    }

    .ms-mobile-sales-list {
        padding: 10px;
    }

    .ms-mobile-sale-top .ms-status-badge {
        max-width: 95px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* =========================================================
   MIDA SHOW
   SELLERS MANAGEMENT
   ========================================================= */

:root {
    --ms-brand: #480680;
    --ms-brand-dark: #300455;
    --ms-brand-light: #f5eff9;
    --ms-success: #198754;
    --ms-success-light: #edf9f2;
    --ms-warning: #d99a00;
    --ms-warning-light: #fff8e5;
    --ms-danger: #dc3545;
    --ms-danger-light: #fff0f2;
    --ms-text: #25212a;
    --ms-text-soft: #746e79;
    --ms-border: #ebe7ef;
    --ms-bg: #f8f7fa;
    --ms-white: #ffffff;
    --ms-shadow: 0 10px 35px rgba(45, 20, 65, .07);
    --ms-shadow-hover: 0 18px 45px rgba(45, 20, 65, .12);
    --ms-radius: 18px;
}


/* =========================================================
   BASE
   ========================================================= */

.ms-sellers-page {
    direction: rtl;
    min-height: 100vh;
    margin-top: 80px;
    background: radial-gradient( circle at 90% 0%, rgba(72, 6, 128, .055), transparent 28% ), var(--ms-bg);
    color: var(--ms-text);
}


.ms-sellers-main {
    padding: 0 22px 60px;
}


.ms-sellers-wrapper {
    max-width: 1450px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.ms-sellers-header {
    padding: 32px 0 25px;
}


.ms-sellers-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}


.ms-sellers-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ms-brand);
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 7px;
}


    .ms-sellers-kicker::before {
        content: "";
        width: 26px;
        height: 3px;
        border-radius: 20px;
        background: var(--ms-brand);
    }


.ms-sellers-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.35;
    font-weight: 950;
    letter-spacing: -.7px;
    color: #201c24;
}


.ms-sellers-subtitle {
    margin: 9px 0 0;
    color: var(--ms-text-soft);
    font-size: 14px;
    line-height: 1.9;
}


.ms-sellers-header-badge {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 215px;
    padding: 14px 17px;
    background: rgba(255,255,255,.8);
    border: 1px solid var(--ms-border);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(45,20,65,.045);
}


.ms-sellers-header-badge-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    font-size: 22px;
    font-weight: 900;
}


.ms-sellers-header-badge-label {
    display: block;
    font-size: 11px;
    color: var(--ms-text-soft);
}


.ms-sellers-header-badge strong {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 900;
}


/* =========================================================
   MESSAGE
   ========================================================= */

.ms-sellers-message {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 17px;
    margin-bottom: 22px;
    border-radius: 15px;
    background: #f1f8ff;
    border: 1px solid #dceeff;
    color: #245274;
}


.ms-sellers-message-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #dceeff;
    font-weight: 900;
}


.ms-sellers-message-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}


    .ms-sellers-message-content strong {
        font-size: 12px;
    }


    .ms-sellers-message-content span {
        font-size: 13px;
    }


.ms-sellers-message-close {
    border: 0;
    background: transparent;
    font-size: 23px;
    color: #7791a5;
    cursor: pointer;
}


/* =========================================================
   FILTER CARD
   ========================================================= */

.ms-sellers-filter-card {
    background: var(--ms-white);
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    padding: 23px;
    box-shadow: var(--ms-shadow);
    margin-bottom: 22px;
}


.ms-filter-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 22px;
}


.ms-filter-heading-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    border-radius: 13px;
    font-size: 22px;
    font-weight: 900;
}


.ms-filter-heading h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 950;
}


.ms-filter-heading p {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--ms-text-soft);
}


.ms-sellers-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(190px, .8fr) 135px;
    gap: 14px;
    align-items: end;
}


.ms-filter-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 900;
    color: #4c4651;
}


.ms-input-wrapper,
.ms-select-wrapper {
    position: relative;
}


.ms-filter-input,
.ms-filter-select {
    width: 100%;
    height: 49px;
    border: 1px solid #ded9e3;
    border-radius: 12px;
    background: #fff;
    color: var(--ms-text);
    font-size: 13px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}


.ms-filter-input {
    padding: 0 43px 0 42px;
}


.ms-filter-select {
    appearance: none;
    padding: 0 15px 0 42px;
    cursor: pointer;
}


    .ms-filter-input:focus,
    .ms-filter-select:focus {
        border-color: var(--ms-brand);
        box-shadow: 0 0 0 4px rgba(72,6,128,.08);
    }


.ms-input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ms-brand);
    font-size: 20px;
    pointer-events: none;
}


.ms-clear-search {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 50%;
    background: #f0edf3;
    color: #6d6671;
    cursor: pointer;
    font-size: 18px;
}


.ms-select-arrow {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ms-brand);
    pointer-events: none;
    font-size: 17px;
}


.ms-search-button {
    width: 100%;
    height: 49px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient( 135deg, var(--ms-brand), var(--ms-brand-dark) );
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(72,6,128,.2);
    transition: transform .2s ease, box-shadow .2s ease;
}


    .ms-search-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 25px rgba(72,6,128,.27);
    }


.ms-search-button-icon {
    font-size: 18px;
}


/* =========================================================
   ACTIVE FILTERS
   ========================================================= */

.ms-active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #f0edf2;
}


.ms-active-filters-label {
    font-size: 11px;
    color: var(--ms-text-soft);
}


.ms-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: var(--ms-brand-light);
    border-radius: 8px;
    color: var(--ms-brand);
    font-size: 11px;
}


    .ms-filter-chip strong {
        font-weight: 900;
    }


    .ms-filter-chip a {
        margin-right: 4px;
        color: var(--ms-brand);
        text-decoration: none;
        font-size: 17px;
        line-height: 1;
    }


/* =========================================================
   RESULTS TOOLBAR
   ========================================================= */

.ms-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 26px 0 13px;
}


.ms-results-info {
    display: flex;
    align-items: center;
    gap: 11px;
}


.ms-results-icon {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 11px;
    color: var(--ms-brand);
}


.ms-results-info strong,
.ms-results-info span {
    display: block;
}


.ms-results-info strong {
    font-size: 14px;
    font-weight: 950;
}


.ms-results-info span {
    margin-top: 2px;
    font-size: 11px;
    color: var(--ms-text-soft);
}


.ms-results-count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 7px 12px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    border-radius: 9px;
}


    .ms-results-count strong {
        font-size: 16px;
        font-weight: 950;
    }


    .ms-results-count span {
        font-size: 11px;
    }


/* =========================================================
   TABLE CARD
   ========================================================= */

.ms-sellers-table-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
}


.ms-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #eeeaf0;
}


    .ms-table-header h2 {
        margin: 0;
        font-size: 15px;
        font-weight: 950;
    }


    .ms-table-header p {
        margin: 4px 0 0;
        font-size: 11px;
        color: var(--ms-text-soft);
    }


.ms-table-count {
    padding: 7px 11px;
    border-radius: 9px;
    background: #f6f4f7;
    color: #6d6672;
    font-size: 11px;
    font-weight: 800;
}


.ms-table-scroll {
    overflow-x: auto;
}


.ms-sellers-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 980px;
}


    .ms-sellers-table thead {
        background: #faf9fb;
    }


    .ms-sellers-table th {
        padding: 14px 17px;
        color: #827b87;
        font-size: 11px;
        font-weight: 900;
        white-space: nowrap;
        border-bottom: 1px solid #eeeaf0;
    }


    .ms-sellers-table td {
        padding: 16px 17px;
        border-bottom: 1px solid #f0edf2;
        vertical-align: middle;
    }


    .ms-sellers-table tbody tr {
        transition: background .18s ease;
    }


        .ms-sellers-table tbody tr:hover {
            background: #fcfbfd;
        }


.ms-seller-cell {
    display: flex;
    align-items: center;
    gap: 11px;
}


.ms-seller-avatar,
.ms-mobile-seller-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient( 135deg, var(--ms-brand), #7222a3 );
    color: #fff;
    font-weight: 950;
    box-shadow: 0 6px 15px rgba(72,6,128,.18);
}


.ms-seller-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    font-size: 15px;
}


.ms-seller-identity strong,
.ms-seller-identity span {
    display: block;
}


.ms-seller-identity strong {
    font-size: 13px;
    font-weight: 900;
}


.ms-seller-identity span {
    margin-top: 3px;
    font-size: 10px;
    color: #958e99;
}


.ms-mobile-cell span,
.ms-mobile-cell strong {
    display: block;
}


.ms-mobile-label {
    font-size: 10px;
    color: #a09aa4;
    margin-bottom: 4px;
}


.ms-mobile-cell strong {
    font-size: 12px;
    letter-spacing: .2px;
}


.ms-sales-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-width: 160px;
    margin-bottom: 4px;
}


    .ms-sales-row span {
        font-size: 10px;
        color: #958e99;
    }


    .ms-sales-row strong {
        font-size: 12px;
        font-weight: 900;
    }


.ms-sales-money {
    color: var(--ms-brand);
}


.ms-sales-row small {
    font-size: 9px;
    font-weight: 700;
}


.ms-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}


.ms-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}


.ms-status-badge.approved {
    background: var(--ms-success-light);
    color: var(--ms-success);
}


    .ms-status-badge.approved .ms-status-dot {
        background: var(--ms-success);
    }


.ms-status-badge.pending {
    background: var(--ms-warning-light);
    color: #a67500;
}


    .ms-status-badge.pending .ms-status-dot {
        background: var(--ms-warning);
    }


.ms-status-badge.rejected {
    background: var(--ms-danger-light);
    color: var(--ms-danger);
}


    .ms-status-badge.rejected .ms-status-dot {
        background: var(--ms-danger);
    }


.ms-date-cell {
    font-size: 11px;
    color: #716a75;
    white-space: nowrap;
}


.ms-seller-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}


.ms-inline-form {
    margin: 0;
}


.ms-action-details,
.ms-action-approve,
.ms-action-reject {
    min-height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}


.ms-action-details {
    gap: 6px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
}


.ms-action-approve {
    border: 0;
    background: var(--ms-success-light);
    color: var(--ms-success);
}


.ms-action-reject {
    border: 0;
    background: var(--ms-danger-light);
    color: var(--ms-danger);
}


    .ms-action-details:hover,
    .ms-action-approve:hover,
    .ms-action-reject:hover {
        transform: translateY(-1px);
    }


.ms-action-arrow {
    font-size: 13px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.ms-sellers-empty {
    padding: 70px 20px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
}


.ms-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: var(--ms-brand-light);
    color: var(--ms-brand);
    font-size: 37px;
}


.ms-sellers-empty h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 950;
}


.ms-sellers-empty p {
    margin: 9px 0 20px;
    color: var(--ms-text-soft);
    font-size: 12px;
}


.ms-empty-reset {
    border: 0;
    padding: 10px 17px;
    border-radius: 10px;
    background: var(--ms-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}


    .ms-empty-reset span {
        margin-right: 7px;
    }


/* =========================================================
   MOBILE
   ========================================================= */

.ms-mobile-sellers {
    display: none;
}


@media (max-width: 991.98px) {

    .ms-sellers-page {
        margin-top: 70px;
    }

    .ms-sellers-sidebar {
        display: none;
    }

    .ms-sellers-main {
        padding: 0 14px 35px;
    }

    .ms-sellers-header {
        padding: 22px 0 17px;
    }

    .ms-sellers-header-content {
        display: block;
    }

    .ms-sellers-title {
        font-size: 24px;
    }

    .ms-sellers-subtitle {
        font-size: 12px;
    }

    .ms-sellers-header-badge {
        display: none;
    }

    .ms-sellers-filter-card {
        padding: 17px;
        border-radius: 15px;
    }

    .ms-filter-heading {
        margin-bottom: 17px;
    }

        .ms-filter-heading p {
            display: none;
        }

    .ms-sellers-search-form {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ms-filter-action {
        width: 100%;
    }

    .ms-results-toolbar {
        margin-top: 21px;
    }

    .ms-results-info span {
        display: none;
    }

    .ms-sellers-table-card {
        display: none;
    }

    .ms-mobile-sellers {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .ms-mobile-seller-card {
        padding: 15px;
        background: #fff;
        border: 1px solid var(--ms-border);
        border-radius: 16px;
        box-shadow: 0 7px 22px rgba(45,20,65,.06);
    }

    .ms-mobile-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 14px;
        border-bottom: 1px solid #f0edf2;
    }

    .ms-mobile-seller-info {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .ms-mobile-seller-avatar {
        width: 43px;
        height: 43px;
        border-radius: 13px;
        font-size: 15px;
    }

    .ms-mobile-seller-info strong,
    .ms-mobile-seller-info span {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ms-mobile-seller-info strong {
        max-width: 145px;
        font-size: 13px;
        font-weight: 950;
    }

    .ms-mobile-seller-info span {
        margin-top: 3px;
        color: #98919c;
        font-size: 10px;
    }

    .ms-mobile-info-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    .ms-mobile-info-item {
        padding: 10px;
        background: #faf9fb;
        border-radius: 10px;
    }

        .ms-mobile-info-item span,
        .ms-mobile-info-item strong {
            display: block;
        }

        .ms-mobile-info-item span {
            font-size: 9px;
            color: #9b949f;
            margin-bottom: 4px;
        }

        .ms-mobile-info-item strong {
            font-size: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .ms-mobile-performance {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding: 12px;
        background: linear-gradient( 135deg, #fbf9fc, #f7f3fa );
        border-radius: 12px;
    }

        .ms-mobile-performance > div {
            text-align: center;
        }

        .ms-mobile-performance span,
        .ms-mobile-performance strong {
            display: block;
        }

        .ms-mobile-performance span {
            margin-bottom: 5px;
            color: #8e8792;
            font-size: 9px;
        }

        .ms-mobile-performance strong {
            color: var(--ms-brand);
            font-size: 13px;
            font-weight: 950;
        }

        .ms-mobile-performance small {
            font-size: 8px;
            font-weight: 700;
        }

    .ms-mobile-card-actions {
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 7px;
        margin-top: 13px;
    }

        .ms-mobile-card-actions form {
            margin: 0;
        }

    .ms-mobile-details-button,
    .ms-mobile-approve-button,
    .ms-mobile-reject-button {
        min-height: 40px;
        padding: 0 12px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 900;
        text-decoration: none;
        border: 0;
    }

    .ms-mobile-details-button {
        gap: 6px;
        background: var(--ms-brand-light);
        color: var(--ms-brand);
    }

    .ms-mobile-approve-button {
        background: var(--ms-success-light);
        color: var(--ms-success);
    }

    .ms-mobile-reject-button {
        background: var(--ms-danger-light);
        color: var(--ms-danger);
    }
}


@media (max-width: 575.98px) {

    .ms-sellers-page {
        margin-top: 60px;
    }

    .ms-sellers-main {
        padding: 0 10px 25px;
    }

    .ms-sellers-title {
        font-size: 21px;
    }

    .ms-sellers-subtitle {
        font-size: 11px;
    }

    .ms-sellers-message {
        padding: 12px;
    }

    .ms-sellers-filter-card {
        padding: 14px;
    }

    .ms-filter-heading-icon {
        width: 38px;
        height: 38px;
    }

    .ms-filter-heading h2 {
        font-size: 13px;
    }

    .ms-filter-input,
    .ms-filter-select,
    .ms-search-button {
        height: 46px;
    }

    .ms-mobile-seller-card {
        padding: 13px;
    }

    .ms-mobile-card-actions {
        grid-template-columns: 1fr 62px 62px;
    }

    .ms-status-badge {
        padding: 6px 7px;
        font-size: 8px;
    }

    .ms-mobile-info-item strong {
        font-size: 9px;
    }
}
/* =========================================================
   MEIDASHOW AGENT DASHBOARD
   ========================================================= */

:root {
    --agent-primary: #480680;
    --agent-primary-dark: #31045a;
    --agent-primary-light: #6d18a8;
    --agent-primary-soft: #f6effb;
    --agent-text: #1f1726;
    --agent-muted: #817689;
    --agent-border: #eee7f2;
    --agent-background: #faf9fb;
    --agent-white: #ffffff;
    --agent-success: #16865a;
    --agent-warning: #d38a16;
    --agent-radius-lg: 24px;
    --agent-radius-md: 18px;
    --agent-shadow: 0 14px 40px rgba(72, 6, 128, .08);
    --agent-shadow-hover: 0 22px 55px rgba(72, 6, 128, .15);
}


/* =========================================================
   PAGE
   ========================================================= */

.meida-agent-page {
    direction: rtl;
    min-height: 100vh;
    background: radial-gradient( circle at 90% 0%, rgba(72, 6, 128, .045), transparent 32% ), radial-gradient( circle at 0% 70%, rgba(72, 6, 128, .035), transparent 28% ), var(--agent-background);
    padding-top: 80px;
    padding-bottom: 50px;
}


.agent-dashboard-container {
    max-width: 1700px;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.agent-sidebar-wrapper {
    position: relative;
}

.agent-sidebar {
    position: sticky;
    top: 100px;
    z-index: 10;
}


/* =========================================================
   MAIN
   ========================================================= */

.agent-dashboard {
    width: 100%;
}


/* =========================================================
   HEADER
   ========================================================= */

.agent-welcome-header {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    border-radius: 30px;
    background: linear-gradient( 135deg, #25033f 0%, #480680 48%, #6b179b 100% );
    box-shadow: 0 25px 60px rgba(72, 6, 128, .20);
    margin-bottom: 24px;
}

.agent-header-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    top: -250px;
    left: -80px;
    filter: blur(3px);
}

.agent-header-content {
    position: relative;
    z-index: 2;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px 45px;
}

.agent-header-info {
    color: #fff;
}

.agent-brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 14px;
    border-radius: 50px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.82);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 18px;
    backdrop-filter: blur(10px);
}

.agent-brand-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255,255,255,.10);
}

.agent-main-title {
    margin: 0;
    font-size: 30px;
    line-height: 1.7;
    font-weight: 800;
    letter-spacing: -.5px;
}

.agent-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

.agent-location {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.78);
    font-size: 14px;
}

.agent-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 8px;
    background: rgba(255,255,255,.10);
}

.agent-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}

    .agent-status.approved {
        color: #d9ffe9;
        background: rgba(21, 178, 112, .15);
        border: 1px solid rgba(144,255,195,.18);
    }

    .agent-status.pending {
        color: #fff1cc;
        background: rgba(255,193,7,.13);
        border: 1px solid rgba(255,210,100,.15);
    }

.status-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}


/* =========================================================
   HEADER VISUAL
   ========================================================= */

.agent-header-visual {
    position: relative;
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}

.agent-dashboard-icon {
    position: absolute;
    width: 85px;
    height: 85px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 35px;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
}

.agent-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.orbit-one {
    width: 130px;
    height: 130px;
}

.orbit-two {
    width: 175px;
    height: 175px;
}


/* =========================================================
   STATUS MESSAGE
   ========================================================= */

.agent-status-message {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px 20px;
    border-radius: 18px;
    margin-bottom: 24px;
    border: 1px solid;
}

    .agent-status-message.success {
        background: #f0fbf6;
        border-color: #d6f2e4;
    }

    .agent-status-message.warning {
        background: #fff9ed;
        border-color: #f5e5bf;
    }

.status-message-icon {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 19px;
}

.success .status-message-icon {
    background: #dcf7e9;
    color: var(--agent-success);
}

.warning .status-message-icon {
    background: #fff0ca;
    color: var(--agent-warning);
}

.status-message-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .status-message-content strong {
        color: var(--agent-text);
        font-size: 14px;
    }

    .status-message-content span {
        color: var(--agent-muted);
        font-size: 13px;
        line-height: 1.8;
    }


/* =========================================================
   ACTION CARD
   ========================================================= */

.agent-action-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: var(--agent-radius-lg);
    background: #fff;
    border: 1px solid var(--agent-border);
    box-shadow: var(--agent-shadow);
    margin-bottom: 35px;
    transition: transform .3s ease, box-shadow .3s ease;
}

    .agent-action-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--agent-shadow-hover);
    }

.agent-action-icon {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--agent-primary-soft);
    color: var(--agent-primary);
    font-size: 25px;
}

.agent-action-content {
    flex: 1;
}

    .agent-action-content h2 {
        margin: 0 0 5px;
        color: var(--agent-text);
        font-size: 17px;
        font-weight: 800;
    }

    .agent-action-content p {
        margin: 0;
        color: var(--agent-muted);
        font-size: 13px;
        line-height: 1.8;
    }

.agent-action-button {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.agent-primary-button,
.agent-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 13px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.agent-primary-button {
    color: #fff;
    background: linear-gradient( 135deg, var(--agent-primary), var(--agent-primary-light) );
    box-shadow: 0 9px 22px rgba(72, 6, 128, .20);
}

    .agent-primary-button:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(72, 6, 128, .28);
    }

.agent-secondary-button {
    color: var(--agent-primary);
    background: var(--agent-primary-soft);
    border: 1px solid #eadcf1;
}

    .agent-secondary-button:hover {
        color: var(--agent-primary-dark);
        background: #eee1f5;
        transform: translateY(-2px);
    }


/* =========================================================
   SECTION HEADER
   ========================================================= */

.agent-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.section-eyebrow {
    display: block;
    color: var(--agent-primary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.agent-section-heading h2 {
    margin: 0;
    color: var(--agent-text);
    font-size: 21px;
    font-weight: 850;
}

.agent-section-heading p {
    margin: 6px 0 0;
    color: var(--agent-muted);
    font-size: 12px;
}

.section-decoration {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .section-decoration span {
        display: block;
        height: 4px;
        border-radius: 10px;
        background: var(--agent-primary);
    }

        .section-decoration span:nth-child(1) {
            width: 28px;
        }

        .section-decoration span:nth-child(2) {
            width: 12px;
            opacity: .5;
        }

        .section-decoration span:nth-child(3) {
            width: 6px;
            opacity: .25;
        }


/* =========================================================
   STATISTICS
   ========================================================= */

.agent-statistics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 40px;
}

.agent-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    padding: 23px;
    border-radius: var(--agent-radius-lg);
    background: #fff;
    border: 1px solid var(--agent-border);
    box-shadow: var(--agent-shadow);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .agent-stat-card::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        left: -80px;
        bottom: -80px;
        background: var(--agent-primary-soft);
        opacity: .7;
    }

    .agent-stat-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--agent-shadow-hover);
    }

.stat-card-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--agent-primary-soft);
    color: var(--agent-primary);
    font-size: 21px;
}

.stat-label {
    color: var(--agent-muted);
    font-size: 12px;
    font-weight: 700;
}

.stat-value {
    position: relative;
    z-index: 2;
    margin-top: 20px;
    color: var(--agent-text);
    font-size: 33px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -1px;
}

.sales-number {
    font-size: 25px;
}

.stat-value small {
    font-size: 12px;
    color: var(--agent-muted);
    font-weight: 700;
    letter-spacing: 0;
}

.stat-description {
    position: relative;
    z-index: 2;
    margin-top: 5px;
    min-height: 40px;
    color: var(--agent-muted);
    font-size: 11px;
    line-height: 1.8;
}

.stat-card-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--agent-border);
    color: var(--agent-primary);
    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   QUICK ACTIONS
   ========================================================= */

.actions-heading {
    margin-bottom: 18px;
}

.agent-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.agent-quick-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 105px;
    padding: 18px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--agent-border);
    text-decoration: none;
    box-shadow: 0 9px 28px rgba(72,6,128,.05);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

    .agent-quick-card:hover {
        transform: translateY(-4px);
        border-color: #ddc9e7;
        box-shadow: 0 18px 40px rgba(72,6,128,.12);
    }

.quick-card-icon {
    width: 47px;
    height: 47px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--agent-primary-soft);
    color: var(--agent-primary);
    font-size: 20px;
}

.quick-card-content {
    flex: 1;
}

    .quick-card-content h3 {
        margin: 0 0 5px;
        color: var(--agent-text);
        font-size: 14px;
        font-weight: 850;
    }

    .quick-card-content p {
        margin: 0;
        color: var(--agent-muted);
        font-size: 10px;
        line-height: 1.7;
    }

.quick-card-arrow {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #faf7fc;
    color: var(--agent-primary);
    font-size: 13px;
    transition: transform .25s ease, background .25s ease;
}

.agent-quick-card:hover .quick-card-arrow {
    transform: translateX(-4px);
    background: var(--agent-primary);
    color: #fff;
}


/* =========================================================
   FOOTER
   ========================================================= */

.agent-dashboard-footer {
    margin-top: 45px;
}

.footer-line {
    width: 100%;
    height: 1px;
    background: linear-gradient( to left, transparent, #e9e0ed, transparent );
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--agent-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.footer-brand strong,
.footer-brand span {
    display: block;
}

.footer-brand strong {
    color: var(--agent-text);
    font-size: 12px;
}

.footer-brand span {
    color: var(--agent-muted);
    font-size: 9px;
    margin-top: 2px;
}

.footer-caption {
    color: #aaa0af;
    font-size: 10px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .agent-dashboard-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .agent-header-content {
        padding: 35px;
    }

    .agent-statistics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .agent-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 991px) {

    .meida-agent-page {
        padding-top: 30px;
    }

    .agent-sidebar-wrapper {
        display: none;
    }

    .agent-header-visual {
        display: none;
    }

    .agent-statistics {
        grid-template-columns: 1fr;
    }

    .agent-stat-card {
        min-height: auto;
    }
}


@media (max-width: 767px) {

    .meida-agent-page {
        padding-top: 15px;
        padding-bottom: 30px;
    }

    .agent-dashboard-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .agent-welcome-header {
        border-radius: 22px;
        min-height: 220px;
    }

    .agent-header-content {
        min-height: 220px;
        padding: 28px 22px;
    }

    .agent-main-title {
        font-size: 23px;
        line-height: 1.8;
    }

    .agent-header-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .agent-status-message {
        align-items: flex-start;
        padding: 15px;
        border-radius: 16px;
    }

    .agent-action-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
        border-radius: 20px;
    }

    .agent-action-content {
        width: 100%;
    }

    .agent-action-button {
        width: 100%;
        flex-direction: column;
    }

    .agent-primary-button,
    .agent-secondary-button {
        width: 100%;
    }

    .agent-section-heading h2 {
        font-size: 18px;
    }

    .agent-section-heading p {
        font-size: 11px;
    }

    .section-decoration {
        display: none;
    }

    .agent-statistics {
        gap: 12px;
        margin-bottom: 30px;
    }

    .agent-stat-card {
        padding: 19px;
        border-radius: 20px;
    }

    .stat-value {
        font-size: 29px;
    }

    .sales-number {
        font-size: 23px;
    }

    .agent-quick-actions {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .agent-quick-card {
        min-height: 90px;
    }

    .footer-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }
}


@media (max-width: 420px) {

    .agent-main-title {
        font-size: 21px;
    }

    .agent-brand-badge {
        font-size: 10px;
    }

    .stat-value {
        font-size: 27px;
    }

    .sales-number {
        font-size: 21px;
    }
}
:root {
    --ms-purple: #480680;
    --ms-purple-dark: #25043f;
    --ms-purple-light: #7d28b2;
    --ms-bg: #f6f4f8;
    --ms-card: #ffffff;
    --ms-text: #25212a;
    --ms-muted: #77717f;
    --ms-border: #e9e4ee;
    --ms-success: #1e9e63;
    --ms-danger: #d93636;
    --ms-warning: #e69b00;
    --ms-shadow: 0 12px 40px rgba(72, 6, 128, .08);
}

body {
    background: radial-gradient(circle at top right, rgba(72,6,128,.07), transparent 28%), linear-gradient(180deg, #faf9fb 0%, #f5f3f7 100%);
}

/* =========================================================
                   MAIN
                ========================================================= */

.ms-edit-page {
    direction: rtl;
    padding: 95px 20px 120px;
}

.ms-edit-wrapper {
    max-width: 1250px;
    margin: auto;
}

/* =========================================================
                   HERO
                ========================================================= */

.ms-edit-hero {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    padding: 32px;
    margin-bottom: 22px;
    color: #fff;
    background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.14), transparent 25%), radial-gradient(circle at 10% 100%, rgba(255,255,255,.08), transparent 30%), linear-gradient(135deg, #25043f, #480680 55%, #68159a);
    box-shadow: 0 18px 50px rgba(72, 6, 128, .20);
}

    .ms-edit-hero::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 50%;
        left: -80px;
        bottom: -110px;
    }

.ms-edit-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.ms-edit-brand {
    display: flex;
    align-items: center;
    gap: 17px;
}

.ms-edit-brand-icon {
    width: 62px;
    height: 62px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 27px;
    backdrop-filter: blur(8px);
}

.ms-edit-hero h1 {
    color: whitesmoke;
    font-size: 27px;
    font-weight: 900;
    margin: 0 0 7px;
}

.ms-edit-hero p {
    margin: 0;
    opacity: .82;
    font-size: 14px;
}

.ms-edit-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border-radius: 50px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.15);
    white-space: nowrap;
    font-size: 13px;
}

.ms-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #56e49a;
    box-shadow: 0 0 0 5px rgba(86,228,154,.12);
}

/* =========================================================
                   MESSAGE
                ========================================================= */

.ms-edit-message {
    border: 0;
    border-radius: 17px;
    padding: 16px 20px;
    margin-bottom: 20px;
    background: #eef8f3;
    color: #176c46;
    box-shadow: 0 8px 25px rgba(30,158,99,.07);
}

/* =========================================================
                   WIZARD CARD
                ========================================================= */

.ms-wizard-card {
    background: var(--ms-card);
    border: 1px solid var(--ms-border);
    border-radius: 28px;
    box-shadow: var(--ms-shadow);
    overflow: hidden;
}

/* =========================================================
                   PROGRESS
                ========================================================= */

.ms-progress-area {
    padding: 27px 30px 20px;
    background: linear-gradient(180deg, #fff, #fcfbfd);
    border-bottom: 1px solid var(--ms-border);
}

.ms-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.ms-progress-title {
    font-weight: 900;
    color: var(--ms-text);
    font-size: 15px;
}

.ms-progress-counter {
    color: var(--ms-muted);
    font-size: 13px;
}

.progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 20px;
}

    .progressbar::before {
        content: "";
        position: absolute;
        top: 19px;
        right: 25px;
        left: 25px;
        height: 3px;
        background: #ebe7ef;
        z-index: 0;
        border-radius: 20px;
    }

.progress {
    position: absolute;
    top: 19px;
    right: 25px;
    height: 3px;
    background: linear-gradient(90deg, var(--ms-purple), #9a43ca);
    z-index: 1;
    border-radius: 20px;
    width: 0;
    transition: width .4s ease;
}

.progress-step {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ddd7e4;
    color: #9a94a0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 13px;
    transition: .3s;
    cursor: pointer;
}

    .progress-step::after {
        content: attr(data-title);
        position: absolute;
        top: 48px;
        white-space: nowrap;
        color: #817a88;
        font-size: 11px;
        font-weight: 600;
    }

    .progress-step.active {
        background: var(--ms-purple);
        border-color: var(--ms-purple);
        color: #fff;
        box-shadow: 0 7px 18px rgba(72,6,128,.23);
    }

        .progress-step.active::after {
            color: var(--ms-purple);
            font-weight: 800;
        }

/* =========================================================
                   STEP
                ========================================================= */

.ms-form-body {
    padding: 48px 45px 40px;
}

.step {
    display: none;
    animation: msStepIn .35s ease;
}

    .step.active {
        display: block;
    }

@keyframes msStepIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.ms-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 32px;
}

.ms-step-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(72,6,128,.08);
    color: var(--ms-purple);
    font-size: 20px;
}

.ms-step-heading h2 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 900;
    color: var(--ms-text);
}

.ms-step-heading p {
    margin: 0;
    color: var(--ms-muted);
    font-size: 13px;
}

/* =========================================================
                   FORM
                ========================================================= */

.ms-field {
    margin-bottom: 22px;
}

    .ms-field label {
        display: block;
        font-weight: 800;
        font-size: 13px;
        color: #39323e !important;
        margin-bottom: 9px;
    }

.ms-required {
    color: var(--ms-danger);
    margin-right: 4px;
}

.ms-required-text {
    color: var(--ms-danger);
    font-size: 10px;
    margin-right: 4px;
    font-weight: 600;
}

.ms-input,
.ms-select,
.ms-textarea {
    width: 100%;
    border: 1px solid #ded8e4;
    border-radius: 13px;
    min-height: 48px;
    padding: 11px 15px;
    background: #fff;
    color: #332d38;
    transition: .2s;
    box-shadow: 0 3px 10px rgba(30,20,40,.025);
}

    .ms-input:focus,
    .ms-select:focus,
    .ms-textarea:focus {
        outline: none;
        border-color: var(--ms-purple);
        box-shadow: 0 0 0 4px rgba(72,6,128,.08);
    }

    .ms-input[readonly] {
        background: #f7f5f9;
        color: #77717f;
        cursor: not-allowed;
    }

.ms-textarea {
    min-height: 105px;
    resize: vertical;
}

.ms-help-text {
    margin-top: 7px;
    color: #88818f;
    font-size: 11px;
}

.text-danger {
    display: block;
    margin-top: 6px;
    font-size: 11px;
}

/* =========================================================
                   INFO / GUIDE
                ========================================================= */

.ms-guide {
    margin-top: 28px;
    padding: 20px 22px;
    border-radius: 18px;
    background: #fff9ef;
    border: 1px solid #f3dfb8;
}

.ms-guide-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a76d00;
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 13px;
}

.ms-guide ul {
    margin: 0;
    padding-right: 20px;
}

.ms-guide li {
    margin-bottom: 8px;
    color: #6d5b38;
    font-size: 12px;
    line-height: 1.9;
}

    .ms-guide li:last-child {
        margin-bottom: 0;
    }

/* =========================================================
                   EDIT NOTICE
                ========================================================= */

.ms-edit-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 25px;
    padding: 15px 17px;
    border-radius: 15px;
    background: #f4f0fa;
    border: 1px solid #e4d8f0;
    color: #5d4270;
    font-size: 12px;
    line-height: 1.9;
}

.ms-edit-notice-icon {
    color: var(--ms-purple);
    font-size: 18px;
}

/* =========================================================
                   IMAGE UPLOAD
                ========================================================= */

.ms-upload-box {
    position: relative;
}

    .ms-upload-box input[type=file] {
        padding: 11px;
        border-radius: 13px;
    }

.ms-image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 13px;
}

.ms-preview-item {
    position: relative;
    width: 105px;
    height: 105px;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid var(--ms-border);
    background: #f7f5f9;
}

    .ms-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ms-upload-hint {
    margin-top: 8px;
    font-size: 10px;
    color: #8b8491;
    line-height: 1.8;
}

/* =========================================================
                   QUILL
                ========================================================= */

.ql-toolbar.ql-snow {
    border: 1px solid #ded8e4;
    border-radius: 13px 13px 0 0;
    background: #faf9fb;
}

.ql-container.ql-snow {
    border: 1px solid #ded8e4;
    border-top: 0;
    border-radius: 0 0 13px 13px;
    min-height: 150px;
}

.ql-editor {
    min-height: 150px;
    direction: rtl;
    text-align: right;
    font-family: Vazir, Tahoma, sans-serif;
    line-height: 2;
}

/* =========================================================
                   BUTTONS
                ========================================================= */

.ms-step-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 38px;
    padding-top: 25px;
    border-top: 1px solid var(--ms-border);
}

.ms-actions-left,
.ms-actions-right {
    display: flex;
    gap: 10px;
}

.ms-btn {
    min-height: 46px;
    border-radius: 13px;
    padding: 0 23px;
    font-weight: 800;
    font-size: 13px;
    border: 1px solid transparent;
    transition: .25s;
}

.ms-btn-prev {
    background: #fff;
    border-color: #ded8e4;
    color: #625b68;
}

    .ms-btn-prev:hover {
        background: #f7f4f9;
    }

.ms-btn-next {
    background: var(--ms-purple);
    color: #fff;
    box-shadow: 0 8px 20px rgba(72,6,128,.17);
}

    .ms-btn-next:hover {
        background: var(--ms-purple-dark);
        transform: translateY(-1px);
    }

.ms-btn-submit {
    background: linear-gradient(135deg, #b67800, #e1a622);
    color: #fff;
    box-shadow: 0 8px 20px rgba(190,130,0,.18);
}

    .ms-btn-submit:hover {
        transform: translateY(-1px);
    }

/* =========================================================
                   SOCIAL
                ========================================================= */

.ms-social-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
}

/* =========================================================
                   FOOTER NOTE
                ========================================================= */

.ms-edit-footer-note {
    text-align: center;
    margin-top: 20px;
    color: #918b96;
    font-size: 11px;
}

/* =========================================================
                   MOBILE
                ========================================================= */

@media (max-width: 768px) {

    .ms-edit-page {
        padding: 76px 10px 80px;
    }

    .ms-edit-hero {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .ms-edit-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .ms-edit-brand-icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
    }

    .ms-edit-hero h1 {
        font-size: 20px;
    }

    .ms-edit-status {
        font-size: 11px;
    }

    .ms-wizard-card {
        border-radius: 22px;
    }

    .ms-progress-area {
        padding: 22px 13px 45px;
        overflow-x: auto;
    }

    .progressbar {
        min-width: 620px;
        margin: 0 10px;
    }

    .ms-form-body {
        padding: 30px 17px;
    }

    .ms-step-heading h2 {
        font-size: 19px;
    }

    .ms-step-heading p {
        font-size: 11px;
        line-height: 1.8;
    }

    .ms-social-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ms-step-actions {
        position: sticky;
        bottom: 0;
        z-index: 10;
        margin-left: -17px;
        margin-right: -17px;
        margin-bottom: -30px;
        padding: 13px 17px;
        background: rgba(255,255,255,.96);
        backdrop-filter: blur(10px);
        box-shadow: 0 -8px 25px rgba(0,0,0,.07);
    }

    .ms-btn {
        padding: 0 15px;
        min-height: 44px;
        font-size: 12px;
    }

    .ms-guide {
        padding: 16px;
    }

        .ms-guide li {
            font-size: 11px;
        }
}

@media (max-width: 430px) {

    .ms-actions-left,
    .ms-actions-right {
        width: 100%;
    }

    .ms-step-actions {
        justify-content: stretch;
    }

    .ms-btn {
        flex: 1;
        padding: 0 8px;
    }

    .ms-step-actions .ms-actions-right {
        justify-content: flex-end;
    }
}

/* =========================================================
                   MEIDASHOW PREMIUM ADVERTISEMENT CREATOR
                   Namespace: msx-advcreate-
                   ========================================================= */

:root {
    --msx-advcreate-purple: #480680;
    --msx-advcreate-purple-dark: #25043f;
    --msx-advcreate-purple-deep: #170225;
    --msx-advcreate-purple-soft: #f4eafd;
    --msx-advcreate-purple-light: #faf7fd;
    --msx-advcreate-text: #211b27;
    --msx-advcreate-muted: #77717d;
    --msx-advcreate-border: #e9e2ee;
    --msx-advcreate-success: #159447;
    --msx-advcreate-danger: #d93045;
    --msx-advcreate-warning: #e29a18;
    --msx-advcreate-radius: 24px;
    --msx-advcreate-shadow: 0 18px 55px rgba(39, 7, 59, .10);
}


/* =========================================================
                   GLOBAL
                   ========================================================= */

.msx-advcreate-page {
    direction: rtl;
    min-height: 100vh;
    padding: 78px 22px 140px;
    background: radial-gradient(circle at 85% 8%, rgba(72, 6, 128, .09), transparent 28%), radial-gradient(circle at 8% 35%, rgba(113, 43, 160, .07), transparent 25%), #faf9fb;
    color: var(--msx-advcreate-text);
}


/* =========================================================
                   TOP HERO
                   ========================================================= */

.msx-advcreate-hero {
    position: relative;
    max-width: 1450px;
    margin: 0 auto 25px;
    padding: 32px 36px;
    border-radius: 30px;
    overflow: hidden;
    background: radial-gradient(circle at 90% 20%, rgba(255,255,255,.14), transparent 25%), linear-gradient(135deg, #190328 0%, #320655 42%, #480680 100%);
    box-shadow: 0 25px 70px rgba(38, 4, 61, .24);
}

    .msx-advcreate-hero::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        left: -90px;
        bottom: -150px;
        background: rgba(255,255,255,.05);
    }

    .msx-advcreate-hero::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        right: 25%;
        top: -100px;
        background: rgba(255,255,255,.035);
    }

.msx-advcreate-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.msx-advcreate-hero-title {
    margin: 0;
    color: #fff;
    font-size: 29px;
    font-weight: 900;
    letter-spacing: -.5px;
}

.msx-advcreate-hero-subtitle {
    margin: 9px 0 0;
    color: rgba(255,255,255,.76);
    font-size: 14px;
    line-height: 1.9;
    max-width: 700px;
}

.msx-advcreate-hero-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 100px;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.17);
    backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 700;
}

.msx-advcreate-hero-badge-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7ff2ad;
    box-shadow: 0 0 14px rgba(127,242,173,.8);
}


/* =========================================================
                   MAIN WRAPPER
                   ========================================================= */

.msx-advcreate-shell {
    max-width: 1450px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(72, 6, 128, .08);
    border-radius: 30px;
    box-shadow: var(--msx-advcreate-shadow);
    overflow: hidden;
}


/* =========================================================
                   STEPPER
                   ========================================================= */

.msx-advcreate-stepper-area {
    padding: 35px 45px 32px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf9fc 100%);
    border-bottom: 1px solid var(--msx-advcreate-border);
}

.msx-advcreate-stepper-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 38px;
}

    .msx-advcreate-stepper-title strong {
        font-size: 15px;
        color: var(--msx-advcreate-text);
    }

.msx-advcreate-step-counter {
    color: var(--msx-advcreate-purple);
    font-size: 13px;
    font-weight: 800;
    background: var(--msx-advcreate-purple-soft);
    padding: 8px 14px;
    border-radius: 100px;
}

.msx-advcreate-progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

    .msx-advcreate-progressbar::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 0;
        left: 0;
        height: 5px;
        transform: translateY(-50%);
        background: #e7e1ea;
        border-radius: 20px;
        z-index: 0;
    }

.msx-advcreate-progress {
    position: absolute;
    top: 50%;
    right: 0;
    height: 5px;
    transform: translateY(-50%);
    width: 0%;
    background: linear-gradient(90deg, #6d169e, var(--msx-advcreate-purple));
    border-radius: 20px;
    z-index: 1;
    transition: width .45s ease;
    box-shadow: 0 2px 12px rgba(72,6,128,.25);
}

.msx-advcreate-progress-step {
    position: relative;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ebe7ed;
    color: #77717d;
    border: 5px solid #fff;
    font-size: 12px;
    font-weight: 900;
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

    .msx-advcreate-progress-step::after {
        content: attr(data-title);
        position: absolute;
        top: 52px;
        right: 50%;
        transform: translateX(50%);
        white-space: nowrap;
        color: #77717d;
        font-size: 11px;
        font-weight: 700;
    }

    .msx-advcreate-progress-step.active {
        background: var(--msx-advcreate-purple);
        color: #fff;
        transform: scale(1.08);
        box-shadow: 0 8px 20px rgba(72, 6, 128, .28);
    }

        .msx-advcreate-progress-step.active::after {
            color: var(--msx-advcreate-purple);
        }


/* =========================================================
                   FORM AREA
                   ========================================================= */

.msx-advcreate-form-area {
    padding: 50px;
}

.msx-advcreate-step {
    display: none;
    animation: msxAdvCreateFadeIn .38s ease;
}

    .msx-advcreate-step.active {
        display: block;
    }

@keyframes msxAdvCreateFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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


/* =========================================================
                   STEP HEADER
                   ========================================================= */

.msx-advcreate-section-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 32px;
}

.msx-advcreate-section-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--msx-advcreate-purple), #7217a0);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 12px 25px rgba(72,6,128,.22);
}

.msx-advcreate-section-title {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: var(--msx-advcreate-text);
}

.msx-advcreate-section-description {
    margin: 4px 0 0;
    color: var(--msx-advcreate-muted);
    font-size: 13px;
}


/* =========================================================
                   FORM CARDS
                   ========================================================= */

.msx-advcreate-form-card {
    background: #fff;
    border: 1px solid var(--msx-advcreate-border);
    border-radius: 22px;
    padding: 25px;
    margin-bottom: 20px;
    transition: .25s ease;
}

    .msx-advcreate-form-card:hover {
        border-color: rgba(72,6,128,.20);
        box-shadow: 0 12px 35px rgba(45, 10, 63, .06);
    }

.msx-advcreate-card-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 800;
    color: #39313e;
}

.msx-advcreate-required {
    color: var(--msx-advcreate-danger);
    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
                   INPUTS
                   ========================================================= */

.msx-advcreate-page input.form-control,
.msx-advcreate-page textarea.form-control,
.msx-advcreate-page select.form-control,
.msx-advcreate-page select.form-select {
    min-height: 48px;
    border-radius: 13px !important;
    border: 1px solid #ddd5e3 !important;
    background: #fcfbfd !important;
    color: #2c2630;
    font-size: 13px;
    padding: 10px 14px;
    box-shadow: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.msx-advcreate-page textarea.form-control {
    min-height: 105px;
    line-height: 1.9;
}

    .msx-advcreate-page input.form-control:focus,
    .msx-advcreate-page textarea.form-control:focus,
    .msx-advcreate-page select.form-control:focus,
    .msx-advcreate-page select.form-select:focus {
        background: #fff !important;
        border-color: var(--msx-advcreate-purple) !important;
        box-shadow: 0 0 0 4px rgba(72,6,128,.08) !important;
    }

.msx-advcreate-page input[readonly] {
    background: #f5f1f7 !important;
    color: #77717d;
}


/* =========================================================
                   CODE GENERATOR
                   ========================================================= */

.msx-advcreate-code-wrapper {
    display: flex;
    gap: 8px;
}

    .msx-advcreate-code-wrapper input {
        flex: 1;
    }

#generateCode {
    min-width: 110px;
    border-radius: 12px !important;
    border: 1px solid rgba(72,6,128,.25) !important;
    color: var(--msx-advcreate-purple);
    background: var(--msx-advcreate-purple-soft);
    font-weight: 800;
}

    #generateCode:hover {
        background: var(--msx-advcreate-purple);
        color: #fff;
    }


/* =========================================================
                   INFO / GUIDE
                   ========================================================= */

.msx-advcreate-guide {
    position: relative;
    margin-top: 30px;
    padding: 22px 24px 22px 22px;
    border-radius: 19px;
    background: linear-gradient(135deg, #fff8f8, #fffafa);
    border: 1px solid rgba(217,48,69,.13);
    overflow: hidden;
}

    .msx-advcreate-guide::before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--msx-advcreate-danger);
    }

.msx-advcreate-guide-title {
    margin: 0 0 13px;
    color: var(--msx-advcreate-danger);
    font-size: 14px;
    font-weight: 900;
}

.msx-advcreate-guide ul {
    padding-right: 19px;
    margin: 0;
}

.msx-advcreate-guide li {
    color: #655d67;
    font-size: 12px;
    line-height: 2;
    margin-bottom: 4px;
}


/* =========================================================
                   IMAGE UPLOAD
                   ========================================================= */

.msx-advcreate-upload-card {
    border: 1.5px dashed #d8cde0;
    background: #fcfafd;
    border-radius: 18px;
    padding: 18px;
    transition: .25s ease;
}

    .msx-advcreate-upload-card:hover {
        border-color: var(--msx-advcreate-purple);
        background: #faf7fc;
    }

.msx-advcreate-upload-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--msx-advcreate-purple-soft);
    color: var(--msx-advcreate-purple);
    margin-bottom: 12px;
}

.msx-advcreate-upload-title {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 4px;
}

.msx-advcreate-upload-description {
    font-size: 11px;
    color: var(--msx-advcreate-muted);
    line-height: 1.8;
    margin-bottom: 14px;
}

.msx-advcreate-preview-area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

    .msx-advcreate-preview-area > div {
        border: 1px solid #ded5e4 !important;
        background: #fff;
        border-radius: 12px !important;
        padding: 4px !important;
        box-shadow: 0 7px 18px rgba(50,20,65,.08);
    }


/* =========================================================
                   LINKS GRID
                   ========================================================= */

.msx-advcreate-link-card {
    position: relative;
}

.msx-advcreate-link-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.msx-advcreate-link-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--msx-advcreate-purple-soft);
    color: var(--msx-advcreate-purple);
    font-size: 12px;
}


/* =========================================================
                   QUILL
                   ========================================================= */

.msx-advcreate-editor-shell {
    overflow: hidden;
    border: 1px solid #ddd5e3;
    border-radius: 15px;
    background: #fff;
}

    .msx-advcreate-editor-shell .ql-toolbar {
        border: 0 !important;
        border-bottom: 1px solid #eee8f1 !important;
        background: #faf8fb;
    }

    .msx-advcreate-editor-shell .ql-container {
        border: 0 !important;
        min-height: 170px;
        font-family: Vazir, Tahoma, sans-serif;
    }

    .msx-advcreate-editor-shell .ql-editor {
        direction: rtl;
        text-align: right;
        min-height: 170px;
        line-height: 2;
    }


/* =========================================================
                   NAVIGATION
                   ========================================================= */

.msx-advcreate-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--msx-advcreate-border);
}

.msx-advcreate-nav-right,
.msx-advcreate-nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.msx-advcreate-btn {
    min-width: 125px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px !important;
    font-size: 13px;
    font-weight: 900;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

    .msx-advcreate-btn:hover {
        transform: translateY(-2px);
    }

.msx-advcreate-btn-prev {
    background: #f4f1f5;
    color: #5d5661;
    border: 1px solid #e3dce7;
}

    .msx-advcreate-btn-prev:hover {
        background: #ebe5ef;
    }

.msx-advcreate-btn-next {
    background: linear-gradient(135deg, #5e0b91, var(--msx-advcreate-purple));
    color: #fff;
    border: 0;
    box-shadow: 0 10px 24px rgba(72,6,128,.22);
}

.msx-advcreate-btn-submit {
    min-width: 170px;
    background: linear-gradient(135deg, #0e8a43, #159447);
    color: #fff;
    border: 0;
    box-shadow: 0 10px 24px rgba(21,148,71,.22);
}


/* =========================================================
                   MOBILE HEADER
                   ========================================================= */

.msx-advcreate-mobile-header {
    display: none;
}


/* =========================================================
                   RESPONSIVE
                   ========================================================= */

@media (max-width: 991.98px) {

    .msx-advcreate-page {
        padding: 20px 12px 110px;
    }

    .msx-advcreate-hero {
        padding: 24px 20px;
        border-radius: 22px;
    }

    .msx-advcreate-hero-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .msx-advcreate-hero-title {
        font-size: 22px;
    }

    .msx-advcreate-shell {
        border-radius: 22px;
    }

    .msx-advcreate-stepper-area {
        padding: 28px 20px 30px;
        overflow-x: auto;
    }

    .msx-advcreate-progressbar {
        min-width: 690px;
    }

    .msx-advcreate-form-area {
        padding: 28px 18px;
    }

    .msx-advcreate-section-title {
        font-size: 19px;
    }
}


@media (max-width: 575.98px) {

    .msx-advcreate-page {
        padding: 12px 8px 100px;
    }

    .msx-advcreate-hero {
        display: none;
    }

    .msx-advcreate-mobile-header {
        display: block;
        margin-bottom: 12px;
        padding: 20px 18px;
        border-radius: 22px;
        background: linear-gradient(135deg, #210333, #480680);
        color: #fff;
        box-shadow: 0 16px 40px rgba(46, 5, 73, .22);
    }

    .msx-advcreate-mobile-header-title {
        margin: 0;
        font-size: 19px;
        font-weight: 900;
    }

    .msx-advcreate-mobile-header-subtitle {
        margin: 5px 0 0;
        color: rgba(255,255,255,.70);
        font-size: 11px;
        line-height: 1.8;
    }

    .msx-advcreate-stepper-area {
        padding: 25px 15px 29px;
        border-radius: 22px 22px 0 0;
    }

    .msx-advcreate-stepper-title {
        margin-bottom: 35px;
    }

    .msx-advcreate-progressbar {
        min-width: 660px;
    }

    .msx-advcreate-progress-step {
        width: 36px;
        height: 36px;
        font-size: 10px;
    }

        .msx-advcreate-progress-step::after {
            top: 47px;
            font-size: 9px;
        }

    .msx-advcreate-form-area {
        padding: 22px 13px;
    }

    .msx-advcreate-section-header {
        align-items: flex-start;
        margin-bottom: 24px;
    }

    .msx-advcreate-section-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 16px;
    }

    .msx-advcreate-section-title {
        font-size: 17px;
    }

    .msx-advcreate-section-description {
        font-size: 11px;
    }

    .msx-advcreate-form-card {
        padding: 16px;
        border-radius: 17px;
    }

    .msx-advcreate-navigation {
        flex-direction: column;
    }

    .msx-advcreate-nav-right,
    .msx-advcreate-nav-left {
        width: 100%;
    }

    .msx-advcreate-btn {
        flex: 1;
        width: 100%;
        min-width: 0;
    }

    .msx-advcreate-guide {
        padding: 18px;
    }

    .msx-advcreate-code-wrapper {
        flex-direction: column;
    }

    #generateCode {
        width: 100%;
    }
}


/* =========================================================
                   FILE INPUT
                   ========================================================= */

.msx-advcreate-page input[type="file"] {
    padding: 8px !important;
    cursor: pointer;
}

    .msx-advcreate-page input[type="file"]::file-selector-button {
        border: 0;
        border-radius: 9px;
        background: var(--msx-advcreate-purple-soft);
        color: var(--msx-advcreate-purple);
        padding: 8px 12px;
        margin-left: 10px;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
    }


/* =========================================================
                   VALIDATION
                   ========================================================= */

.msx-advcreate-page .text-danger,
.msx-advcreate-page .error {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
                   ACCESSIBILITY / MOTION
                   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .msx-advcreate-step,
    .msx-advcreate-progress,
    .msx-advcreate-progress-step,
    .msx-advcreate-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
                   MIDASHOW SELLER ADVERTISEMENTS
                   Unique namespace: ms-sellerads-
                   ========================================================= */

:root {
    --ms-sellerads-purple: #480680;
    --ms-sellerads-purple-dark: #25043f;
    --ms-sellerads-purple-deep: #160224;
    --ms-sellerads-purple-light: #f4eaff;
    --ms-sellerads-purple-soft: #faf7ff;
    --ms-sellerads-text: #211b27;
    --ms-sellerads-muted: #7d7485;
    --ms-sellerads-border: #ebe5f0;
    --ms-sellerads-green: #159447;
    --ms-sellerads-green-soft: #eaf8ef;
    --ms-sellerads-orange: #e69a00;
    --ms-sellerads-orange-soft: #fff6df;
    --ms-sellerads-red: #d83a3a;
    --ms-sellerads-red-soft: #fff0f0;
    --ms-sellerads-blue: #3478db;
    --ms-sellerads-blue-soft: #edf5ff;
    --ms-sellerads-shadow: 0 18px 50px rgba(45, 15, 67, 0.08);
    --ms-sellerads-radius: 20px;
}


/* =========================================================
                   MAIN
                   ========================================================= */

.ms-sellerads-page {
    direction: rtl;
    width: 100%;
    padding: 28px 24px 70px;
    color: var(--ms-sellerads-text);
}

.ms-sellerads-wrapper {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}


/* =========================================================
                   HERO
                   ========================================================= */

.ms-sellerads-hero {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: 30px 34px;
    margin-bottom: 24px;
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.16), transparent 28%), radial-gradient(circle at 15% 100%, rgba(173,91,255,.20), transparent 32%), linear-gradient(135deg, var(--ms-sellerads-purple-deep) 0%, var(--ms-sellerads-purple) 58%, #6910a5 100%);
    box-shadow: 0 24px 55px rgba(72, 6, 128, .20);
}

    .ms-sellerads-hero::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 50%;
        left: -100px;
        bottom: -150px;
    }

    .ms-sellerads-hero::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 50%;
        right: 25%;
        top: -120px;
    }

.ms-sellerads-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.ms-sellerads-hero-text {
    color: #fff;
}

.ms-sellerads-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    padding: 7px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.90);
    font-size: 12px;
    font-weight: 700;
}

.ms-sellerads-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8ff0b2;
    box-shadow: 0 0 0 4px rgba(143,240,178,.10);
}

.ms-sellerads-hero-title {
    margin: 0;
    color: #fff;
    font-size: 30px;
    line-height: 1.45;
    font-weight: 900;
}

.ms-sellerads-hero-description {
    margin: 8px 0 0;
    max-width: 700px;
    color: rgba(255,255,255,.72);
    font-size: 14px;
    line-height: 2;
}

.ms-sellerads-create-button {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 180px;
    padding: 13px 22px;
    border-radius: 14px;
    background: #fff;
    color: var(--ms-sellerads-purple);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    transition: all .25s ease;
}

    .ms-sellerads-create-button:hover {
        transform: translateY(-3px);
        color: var(--ms-sellerads-purple-dark);
        box-shadow: 0 17px 35px rgba(0,0,0,.25);
    }

.ms-sellerads-create-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--ms-sellerads-purple-light);
    font-size: 19px;
    line-height: 1;
}


/* =========================================================
                   STATISTICS
                   ========================================================= */

.ms-sellerads-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 24px;
}

.ms-sellerads-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 112px;
    padding: 20px;
    border: 1px solid var(--ms-sellerads-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(50, 30, 70, .055);
    transition: all .25s ease;
}

    .ms-sellerads-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--ms-sellerads-shadow);
    }

    .ms-sellerads-stat-card::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        right: -35px;
        bottom: -45px;
        background: var(--ms-sellerads-purple-soft);
    }

.ms-sellerads-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ms-sellerads-stat-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--ms-sellerads-purple-light);
    color: var(--ms-sellerads-purple);
    font-size: 20px;
    font-weight: 900;
}

.ms-sellerads-stat-label {
    margin: 0;
    color: var(--ms-sellerads-muted);
    font-size: 12px;
    font-weight: 700;
}

.ms-sellerads-stat-number {
    position: relative;
    z-index: 2;
    display: block;
    margin-top: 9px;
    color: var(--ms-sellerads-text);
    font-size: 25px;
    font-weight: 900;
}

.ms-sellerads-stat-approved .ms-sellerads-stat-icon {
    background: var(--ms-sellerads-green-soft);
    color: var(--ms-sellerads-green);
}

.ms-sellerads-stat-pending .ms-sellerads-stat-icon {
    background: var(--ms-sellerads-orange-soft);
    color: var(--ms-sellerads-orange);
}

.ms-sellerads-stat-rejected .ms-sellerads-stat-icon {
    background: var(--ms-sellerads-red-soft);
    color: var(--ms-sellerads-red);
}


/* =========================================================
                   ALERT
                   ========================================================= */

.ms-sellerads-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 14px 17px;
    border: 1px solid #dceaf8;
    border-radius: 15px;
    background: #f5faff;
    color: #31516f;
    font-size: 13px;
    line-height: 1.9;
}

.ms-sellerads-alert-icon {
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ms-sellerads-blue-soft);
    color: var(--ms-sellerads-blue);
    font-weight: 900;
}


/* =========================================================
                   CONTENT CARD
                   ========================================================= */

.ms-sellerads-content-card {
    overflow: hidden;
    border: 1px solid var(--ms-sellerads-border);
    border-radius: 23px;
    background: #fff;
    box-shadow: var(--ms-sellerads-shadow);
}

.ms-sellerads-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 25px;
    border-bottom: 1px solid var(--ms-sellerads-border);
    background: linear-gradient(180deg, #fff 0%, #fdfbff 100%);
}

.ms-sellerads-content-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ms-sellerads-content-title-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--ms-sellerads-purple-light);
    color: var(--ms-sellerads-purple);
    font-size: 19px;
    font-weight: 900;
}

.ms-sellerads-content-title h2 {
    margin: 0;
    color: var(--ms-sellerads-text);
    font-size: 17px;
    font-weight: 900;
}

.ms-sellerads-content-title span {
    display: block;
    margin-top: 3px;
    color: var(--ms-sellerads-muted);
    font-size: 11px;
}

.ms-sellerads-count-badge {
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--ms-sellerads-purple-soft);
    color: var(--ms-sellerads-purple);
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
                   TABLE
                   ========================================================= */

.ms-sellerads-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.ms-sellerads-table {
    width: 100%;
    min-width: 1050px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

    .ms-sellerads-table thead th {
        padding: 15px 18px;
        border-bottom: 1px solid var(--ms-sellerads-border);
        background: #faf8fc;
        color: #786d82;
        font-size: 11px;
        font-weight: 800;
        white-space: nowrap;
    }

        .ms-sellerads-table thead th:first-child {
            padding-right: 25px;
        }

    .ms-sellerads-table tbody td {
        padding: 17px 18px;
        border-bottom: 1px solid #f0ebf3;
        color: #403747;
        font-size: 12px;
        vertical-align: middle;
        background: #fff;
    }

    .ms-sellerads-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .ms-sellerads-table tbody tr {
        transition: background .2s ease;
    }

        .ms-sellerads-table tbody tr:hover td {
            background: #fcf9ff;
        }

    .ms-sellerads-table tbody td:first-child {
        padding-right: 25px;
    }


/* =========================================================
                   AD TITLE
                   ========================================================= */

.ms-sellerads-ad-title {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
}

.ms-sellerads-ad-icon {
    flex: 0 0 auto;
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--ms-sellerads-purple-light), #eee0fa);
    color: var(--ms-sellerads-purple);
    font-weight: 900;
}

.ms-sellerads-ad-name {
    max-width: 260px;
    overflow: hidden;
    color: var(--ms-sellerads-text);
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
                   CODE / CUSTOMER
                   ========================================================= */

.ms-sellerads-code {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 8px;
    background: #f7f4f9;
    color: #675b6f;
    direction: ltr;
    font-size: 11px;
    font-weight: 800;
}

.ms-sellerads-customer {
    font-weight: 700;
    color: #403747;
}

.ms-sellerads-mobile-number {
    direction: ltr;
    text-align: right;
    font-family: inherit;
    color: #685d70;
    white-space: nowrap;
}

.ms-sellerads-date {
    color: #817687;
    white-space: nowrap;
    font-size: 11px;
}


/* =========================================================
                   STATUS
                   ========================================================= */

.ms-sellerads-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: 800;
}

.ms-sellerads-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.ms-sellerads-status-approved {
    background: var(--ms-sellerads-green-soft);
    color: var(--ms-sellerads-green);
}

    .ms-sellerads-status-approved .ms-sellerads-status-dot {
        background: var(--ms-sellerads-green);
        box-shadow: 0 0 0 4px rgba(21,148,71,.09);
    }

.ms-sellerads-status-rejected {
    background: var(--ms-sellerads-red-soft);
    color: var(--ms-sellerads-red);
}

    .ms-sellerads-status-rejected .ms-sellerads-status-dot {
        background: var(--ms-sellerads-red);
    }

.ms-sellerads-status-pending {
    background: var(--ms-sellerads-orange-soft);
    color: #b47700;
}

    .ms-sellerads-status-pending .ms-sellerads-status-dot {
        background: var(--ms-sellerads-orange);
    }

.ms-sellerads-status-payment {
    background: var(--ms-sellerads-blue-soft);
    color: var(--ms-sellerads-blue);
}

    .ms-sellerads-status-payment .ms-sellerads-status-dot {
        background: var(--ms-sellerads-blue);
    }

.ms-sellerads-status-default {
    background: #f1eef3;
    color: #716778;
}

    .ms-sellerads-status-default .ms-sellerads-status-dot {
        background: #8b7f92;
    }


/* =========================================================
                   ACTIONS
                   ========================================================= */

.ms-sellerads-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 280px;
}

.ms-sellerads-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
    transition: all .2s ease;
    white-space: nowrap;
}

    .ms-sellerads-action:hover {
        transform: translateY(-2px);
    }

.ms-sellerads-action-preview {
    background: var(--ms-sellerads-blue-soft);
    color: #2866bd;
    border-color: #d9e9ff;
}

    .ms-sellerads-action-preview:hover {
        background: #dcecff;
        color: #20579f;
    }

.ms-sellerads-action-edit {
    background: #fff5df;
    color: #b37800;
    border-color: #f8e3ae;
}

    .ms-sellerads-action-edit:hover {
        background: #ffedc4;
        color: #966400;
    }

.ms-sellerads-action-renew {
    background: #f3edff;
    color: #7042a0;
    border-color: #e6d8fa;
}

    .ms-sellerads-action-renew:hover {
        background: #e9dcfb;
        color: #5c3487;
    }

.ms-sellerads-action-upgrade {
    background: #eeeaff;
    color: var(--ms-sellerads-purple);
    border-color: #ded3f8;
}

    .ms-sellerads-action-upgrade:hover {
        background: #e3dafa;
        color: var(--ms-sellerads-purple-dark);
    }

.ms-sellerads-action-cancel {
    background: var(--ms-sellerads-red-soft);
    color: var(--ms-sellerads-red);
    border-color: #f4d4d4;
}

    .ms-sellerads-action-cancel:hover {
        background: #ffe2e2;
        color: #b72828;
    }

.ms-sellerads-cancel-form {
    display: inline;
    margin: 0;
    padding: 0;
}

    .ms-sellerads-cancel-form button {
        cursor: pointer;
    }


/* =========================================================
                   EMPTY STATE
                   ========================================================= */

.ms-sellerads-empty {
    padding: 70px 25px;
    text-align: center;
}

.ms-sellerads-empty-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: var(--ms-sellerads-purple-light);
    color: var(--ms-sellerads-purple);
    font-size: 34px;
    font-weight: 900;
}

.ms-sellerads-empty h3 {
    margin: 0 0 8px;
    color: var(--ms-sellerads-text);
    font-size: 18px;
    font-weight: 900;
}

.ms-sellerads-empty p {
    max-width: 500px;
    margin: 0 auto 22px;
    color: var(--ms-sellerads-muted);
    font-size: 13px;
    line-height: 2;
}

.ms-sellerads-empty-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 19px;
    border-radius: 11px;
    background: var(--ms-sellerads-purple);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: all .2s ease;
}

    .ms-sellerads-empty-button:hover {
        background: var(--ms-sellerads-purple-dark);
        color: #fff;
        transform: translateY(-2px);
    }


/* =========================================================
                   MOBILE
                   ========================================================= */

.ms-sellerads-mobile-page {
    direction: rtl;
    padding: 16px 12px 110px;
}

.ms-sellerads-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.ms-sellerads-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    border: 1px solid var(--ms-sellerads-border);
    border-radius: 11px;
    background: #fff;
    color: var(--ms-sellerads-text);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 5px 18px rgba(50,30,70,.05);
}

.ms-sellerads-mobile-mini-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ms-sellerads-purple);
    font-size: 12px;
    font-weight: 900;
}

.ms-sellerads-mobile-brand-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ms-sellerads-purple);
}

.ms-sellerads-mobile-hero {
    position: relative;
    overflow: hidden;
    padding: 23px 19px;
    margin-bottom: 14px;
    border-radius: 21px;
    background: radial-gradient(circle at 90% 10%, rgba(255,255,255,.17), transparent 32%), linear-gradient(145deg, var(--ms-sellerads-purple-deep), var(--ms-sellerads-purple));
    box-shadow: 0 17px 38px rgba(72,6,128,.18);
}

    .ms-sellerads-mobile-hero h1 {
        position: relative;
        z-index: 2;
        margin: 0;
        color: #fff;
        font-size: 21px;
        line-height: 1.5;
        font-weight: 900;
    }

    .ms-sellerads-mobile-hero p {
        position: relative;
        z-index: 2;
        margin: 6px 0 18px;
        color: rgba(255,255,255,.70);
        font-size: 11px;
        line-height: 1.9;
    }

.ms-sellerads-mobile-create {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px;
    border-radius: 11px;
    background: #fff;
    color: var(--ms-sellerads-purple);
    text-decoration: none;
    font-size: 12px;
    font-weight: 900;
}

.ms-sellerads-mobile-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
    margin-bottom: 14px;
}

.ms-sellerads-mobile-stat {
    padding: 14px;
    border: 1px solid var(--ms-sellerads-border);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(50,30,70,.05);
}

.ms-sellerads-mobile-stat-label {
    display: block;
    margin-bottom: 6px;
    color: var(--ms-sellerads-muted);
    font-size: 9px;
    font-weight: 700;
}

.ms-sellerads-mobile-stat-value {
    color: var(--ms-sellerads-text);
    font-size: 20px;
    font-weight: 900;
}


/* =========================================================
                   MOBILE AD CARDS
                   ========================================================= */

.ms-sellerads-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.ms-sellerads-mobile-card {
    overflow: hidden;
    border: 1px solid var(--ms-sellerads-border);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 9px 28px rgba(50,30,70,.06);
}

.ms-sellerads-mobile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 15px;
    border-bottom: 1px solid #f0ebf3;
}

.ms-sellerads-mobile-ad-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ms-sellerads-mobile-ad-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--ms-sellerads-purple-light);
    color: var(--ms-sellerads-purple);
    font-weight: 900;
}

.ms-sellerads-mobile-ad-title {
    overflow: hidden;
    color: var(--ms-sellerads-text);
    font-size: 12px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-sellerads-mobile-code {
    margin-top: 4px;
    color: var(--ms-sellerads-muted);
    direction: ltr;
    text-align: right;
    font-size: 9px;
}

.ms-sellerads-mobile-card-body {
    padding: 13px 15px;
}

.ms-sellerads-mobile-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 0;
}

.ms-sellerads-mobile-info-label {
    color: #968c9c;
    font-size: 9px;
}

.ms-sellerads-mobile-info-value {
    color: #4b4152;
    font-size: 10px;
    font-weight: 700;
    text-align: left;
}

.ms-sellerads-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
    padding: 12px 15px 15px;
    border-top: 1px solid #f0ebf3;
}

    .ms-sellerads-mobile-actions .ms-sellerads-action {
        min-height: 36px;
        width: 100%;
        font-size: 9px;
    }

    .ms-sellerads-mobile-actions .ms-sellerads-cancel-form {
        width: 100%;
    }

        .ms-sellerads-mobile-actions .ms-sellerads-cancel-form button {
            width: 100%;
        }


/* =========================================================
                   RESPONSIVE
                   ========================================================= */

@media (max-width: 1200px) {

    .ms-sellerads-stat-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .ms-sellerads-page {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 991px) {

    .ms-sellerads-hero {
        padding: 25px;
    }

    .ms-sellerads-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .ms-sellerads-create-button {
        width: 100%;
    }
}

@media (max-width: 767px) {

    .ms-sellerads-desktop-only {
        display: none !important;
    }

    .ms-sellerads-stat-grid {
        display: none;
    }
}

@media (min-width: 768px) {

    .ms-sellerads-mobile-only {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ms-sellerads-stat-card,
    .ms-sellerads-create-button,
    .ms-sellerads-action,
    .ms-sellerads-empty-button {
        transition: none;
    }
}

/* =========================================================
      MIDASHOW SELLER DASHBOARD
   ========================================================= */

:root {
    --ms-purple: #480680;
    --ms-purple-dark: #26003f;
    --ms-purple-deep: #170025;
    --ms-purple-light: #f5edfb;
    --ms-purple-soft: #faf7fd;
    --ms-text: #211b25;
    --ms-muted: #81778a;
    --ms-border: #eee8f2;
    --ms-success: #16835b;
    --ms-success-soft: #eaf8f2;
    --ms-warning: #c88719;
    --ms-warning-soft: #fff7e8;
    --ms-danger: #c53a48;
    --ms-danger-soft: #fff0f2;
    --ms-blue: #3768c9;
    --ms-blue-soft: #edf3ff;
    --ms-shadow: 0 20px 60px rgba(40, 0, 65, .08);
    --ms-shadow-hover: 0 25px 70px rgba(72, 6, 128, .15);
    --ms-radius: 22px;
}


/* =========================================================
                   PAGE
                   ========================================================= */

.ms-seller-page {
    direction: rtl;
    width: 100%;
    padding-bottom: 70px;
}

.ms-seller-main {
    position: relative;
    z-index: 1;
}


/* =========================================================
                   DESKTOP HERO
                   ========================================================= */

.ms-seller-hero {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    border-radius: 28px;
    padding: 32px;
    margin-bottom: 24px;
    background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 30%), radial-gradient(circle at 10% 100%, rgba(255,255,255,.08), transparent 30%), linear-gradient( 135deg, #170025 0%, #2b0349 45%, #480680 100% );
    box-shadow: var(--ms-shadow);
    color: #fff;
}

    .ms-seller-hero::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border: 1px solid rgba(255,255,255,.08);
        border-radius: 50%;
        left: -100px;
        bottom: -160px;
    }

    .ms-seller-hero::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border: 1px solid rgba(255,255,255,.07);
        border-radius: 50%;
        right: 12%;
        top: -120px;
    }

.ms-seller-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.ms-seller-identity {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1;
    min-width: 0;
}

.ms-seller-avatar {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, rgba(255,255,255,.18), rgba(255,255,255,.05) );
    border: 1px solid rgba(255,255,255,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 15px 35px rgba(0,0,0,.18);
    font-size: 34px;
    font-weight: 800;
}

.ms-seller-kicker {
    font-size: 13px;
    color: rgba(255,255,255,.65);
    margin-bottom: 7px;
    font-weight: 500;
}

.ms-seller-name {
    color: whitesmoke;
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .ms-seller-name span {
        color: rgba(255,255,255,.7);
        font-weight: 500;
    }

.ms-seller-welcome {
    margin: 10px 0 0;
    color: rgba(255,255,255,.75);
    font-size: 14px;
}

.ms-seller-status {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: hidden;
}

.ms-seller-status-label {
    display: block;
    margin: 0 0 9px 0;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.ms-seller-status-value {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    white-space: nowrap;
}

.ms-status-dot {
    width: 8px;
    height: 8px;
    min-width: 8px;
    display: inline-block;
    border-radius: 50%;
}

    .ms-status-dot.success {
        background: #62e3a9;
        box-shadow: 0 0 0 4px rgba(98,227,169,.12);
    }

    .ms-status-dot.warning {
        background: #ffd166;
        box-shadow: 0 0 0 4px rgba(255,209,102,.12);
    }


/* =========================================================
                   ALERT / STATUS MESSAGE
                   ========================================================= */

.ms-seller-message {
    border-radius: 18px;
    padding: 17px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}

    .ms-seller-message.success {
        background: var(--ms-success-soft);
        color: var(--ms-success);
        border-color: #d2f0e2;
    }

    .ms-seller-message.warning {
        background: var(--ms-warning-soft);
        color: #96640d;
        border-color: #f6e2b6;
    }

.ms-message-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.7);
    font-size: 17px;
}


/* =========================================================
                   SECTION HEADER
                   ========================================================= */

.ms-dashboard-section {
    margin-bottom: 25px;
}

.ms-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
}

.ms-section-title {
    margin: 0;
    color: var(--ms-text);
    font-size: 19px;
    font-weight: 800;
}

.ms-section-subtitle {
    margin: 5px 0 0;
    color: var(--ms-muted);
    font-size: 12px;
}


/* =========================================================
                   QUICK ACTIONS
                   ========================================================= */

.ms-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ms-action-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 92px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    text-decoration: none !important;
    color: var(--ms-text) !important;
    box-shadow: 0 8px 30px rgba(38,0,63,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .ms-action-card::after {
        content: "";
        position: absolute;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        left: -40px;
        bottom: -55px;
        background: rgba(72,6,128,.04);
    }

    .ms-action-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ms-shadow-hover);
        border-color: rgba(72,6,128,.18);
    }

.ms-action-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    font-size: 23px;
    font-weight: 800;
}

.ms-action-card.primary .ms-action-icon {
    background: var(--ms-purple);
    color: #fff;
}

.ms-action-card.success .ms-action-icon {
    background: var(--ms-success-soft);
    color: var(--ms-success);
}

.ms-action-content {
    min-width: 0;
}

.ms-action-title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 5px;
}

.ms-action-description {
    display: block;
    font-size: 11px;
    line-height: 1.8;
    color: var(--ms-muted);
}

.ms-action-arrow {
    margin-right: auto;
    color: #b7adbE;
    font-size: 18px;
    transition: transform .2s ease;
}

.ms-action-card:hover .ms-action-arrow {
    transform: translateX(-4px);
    color: var(--ms-purple);
}


/* =========================================================
                   STATS
                   ========================================================= */

.ms-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ms-stat-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    padding: 22px;
    box-shadow: 0 8px 30px rgba(38,0,63,.045);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .ms-stat-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ms-shadow-hover);
    }

    .ms-stat-card::before {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        left: -65px;
        bottom: -70px;
        background: rgba(72,6,128,.035);
    }

.ms-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.ms-stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    font-size: 20px;
}

.ms-stat-card.sales .ms-stat-icon {
    background: var(--ms-blue-soft);
    color: var(--ms-blue);
}

.ms-stat-card.total .ms-stat-icon {
    background: var(--ms-success-soft);
    color: var(--ms-success);
}

.ms-stat-card.month .ms-stat-icon {
    background: var(--ms-warning-soft);
    color: var(--ms-warning);
}

.ms-stat-label {
    margin-top: 18px;
    color: var(--ms-muted);
    font-size: 12px;
    font-weight: 600;
}

.ms-stat-value {
    margin-top: 7px;
    color: var(--ms-text);
    font-size: 23px;
    font-weight: 900;
    letter-spacing: -.4px;
}

.ms-stat-unit {
    font-size: 11px;
    color: var(--ms-muted);
    font-weight: 500;
    margin-right: 4px;
}


/* =========================================================
                   REGISTER / PENDING STATE
                   ========================================================= */

.ms-seller-onboarding {
    position: relative;
    overflow: hidden;
    background: radial-gradient( circle at 90% 20%, rgba(72,6,128,.08), transparent 30% ), #fff;
    border: 1px solid var(--ms-border);
    border-radius: 26px;
    padding: 35px;
    box-shadow: var(--ms-shadow);
}

.ms-onboarding-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.ms-onboarding-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    font-size: 30px;
}

.ms-onboarding-title {
    margin: 0 0 8px;
    color: var(--ms-text);
    font-size: 21px;
    font-weight: 900;
}

.ms-onboarding-description {
    margin: 0;
    max-width: 650px;
    color: var(--ms-muted);
    font-size: 13px;
    line-height: 2;
}

.ms-register-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 25px;
    border-radius: 15px;
    background: linear-gradient( 135deg, #480680, #6f19a4 );
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 12px 25px rgba(72,6,128,.2);
    transition: transform .2s ease, box-shadow .2s ease;
}

    .ms-register-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(72,6,128,.28);
    }


/* =========================================================
                   DESKTOP CONTAINER
                   ========================================================= */

.ms-seller-desktop {
    padding-top: 25px;
}

.ms-seller-desktop-content {
    padding-left: 18px;
}


/* =========================================================
                   MOBILE
                   ========================================================= */

.ms-seller-mobile {
    direction: rtl;
    padding: 15px 13px 80px;
}

.ms-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.ms-mobile-back {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--ms-border);
    color: var(--ms-purple) !important;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(38,0,63,.05);
    font-size: 20px;
}

.ms-mobile-page-title {
    flex: 1;
    margin: 0;
    color: var(--ms-text);
    font-size: 19px;
    font-weight: 900;
}

.ms-mobile-hero {
    position: relative;
    overflow: hidden;
    border-radius: 25px;
    padding: 23px 19px;
    background: radial-gradient( circle at 100% 0, rgba(255,255,255,.15), transparent 35% ), linear-gradient( 145deg, #170025, #480680 );
    color: #fff;
    box-shadow: 0 18px 45px rgba(38,0,63,.16);
    margin-bottom: 15px;
}

.ms-mobile-identity {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ms-mobile-avatar {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    font-size: 24px;
    font-weight: 800;
}

.ms-mobile-kicker {
    font-size: 10px;
    color: rgba(255,255,255,.62);
    margin-bottom: 4px;
}

.ms-mobile-name {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
}

.ms-mobile-welcome {
    margin: 7px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 10px;
}

.ms-mobile-status {
    margin-top: 18px;
    padding: 11px 13px;
    border-radius: 13px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    font-size: 11px;
}

.ms-mobile-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ms-mobile-status-value {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
}


/* =========================================================
                   MOBILE MESSAGE
                   ========================================================= */

.ms-mobile-message {
    margin-bottom: 15px;
    padding: 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border-radius: 17px;
    font-size: 11px;
    line-height: 1.9;
    font-weight: 600;
}

    .ms-mobile-message.success {
        background: var(--ms-success-soft);
        color: var(--ms-success);
    }

    .ms-mobile-message.warning {
        background: var(--ms-warning-soft);
        color: #94630d;
    }


/* =========================================================
                   MOBILE QUICK ACTIONS
                   ========================================================= */

.ms-mobile-section-title {
    margin: 21px 2px 11px;
    color: var(--ms-text);
    font-size: 15px;
    font-weight: 900;
}

.ms-mobile-section-subtitle {
    display: block;
    margin-top: -5px;
    margin-bottom: 12px;
    color: var(--ms-muted);
    font-size: 9px;
}

.ms-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ms-mobile-action {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px;
    border-radius: 19px;
    background: #fff;
    border: 1px solid var(--ms-border);
    color: var(--ms-text) !important;
    text-decoration: none !important;
    box-shadow: 0 7px 24px rgba(38,0,63,.045);
    transition: transform .2s ease;
}

    .ms-mobile-action:active {
        transform: scale(.98);
    }

.ms-mobile-action-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    font-size: 18px;
    font-weight: 800;
}

.ms-mobile-action.primary .ms-mobile-action-icon {
    background: var(--ms-purple);
    color: #fff;
}

.ms-mobile-action.success .ms-mobile-action-icon {
    background: var(--ms-success-soft);
    color: var(--ms-success);
}

.ms-mobile-action-title {
    display: block;
    margin-top: 11px;
    font-size: 11px;
    font-weight: 900;
}

.ms-mobile-action-description {
    display: block;
    margin-top: 4px;
    color: var(--ms-muted);
    font-size: 8px;
    line-height: 1.7;
}


/* =========================================================
                   MOBILE STATS
                   ========================================================= */

.ms-mobile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ms-mobile-stat {
    position: relative;
    overflow: hidden;
    min-height: 126px;
    padding: 15px;
    border-radius: 19px;
    background: #fff;
    border: 1px solid var(--ms-border);
    box-shadow: 0 7px 24px rgba(38,0,63,.045);
}

.ms-mobile-stat-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
}

.ms-mobile-stat.sales .ms-mobile-stat-icon {
    background: var(--ms-blue-soft);
    color: var(--ms-blue);
}

.ms-mobile-stat.total .ms-mobile-stat-icon {
    background: var(--ms-success-soft);
    color: var(--ms-success);
}

.ms-mobile-stat.month .ms-mobile-stat-icon {
    background: var(--ms-warning-soft);
    color: var(--ms-warning);
}

.ms-mobile-stat-label {
    margin-top: 12px;
    color: var(--ms-muted);
    font-size: 9px;
    font-weight: 600;
}

.ms-mobile-stat-value {
    margin-top: 5px;
    color: var(--ms-text);
    font-size: 16px;
    font-weight: 900;
    word-break: break-word;
}

.ms-mobile-stat-unit {
    font-size: 8px;
    color: var(--ms-muted);
}


/* =========================================================
                   MOBILE ONBOARDING
                   ========================================================= */

.ms-mobile-onboarding {
    margin-top: 18px;
    padding: 19px;
    border-radius: 21px;
    background: linear-gradient( 145deg, #fff, #faf7fd );
    border: 1px solid var(--ms-border);
    box-shadow: 0 8px 25px rgba(38,0,63,.05);
}

.ms-mobile-onboarding-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    font-size: 21px;
}

.ms-mobile-onboarding-title {
    margin: 13px 0 6px;
    font-size: 16px;
    font-weight: 900;
    color: var(--ms-text);
}

.ms-mobile-onboarding-description {
    margin: 0;
    color: var(--ms-muted);
    font-size: 10px;
    line-height: 2;
}

.ms-mobile-register-button {
    width: 100%;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 14px;
    background: linear-gradient( 135deg, #480680, #7019a7 );
    color: #fff !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(72,6,128,.18);
}


/* =========================================================
                   TABLET
                   ========================================================= */

@media (max-width: 1100px) {

    .ms-quick-actions {
        grid-template-columns: 1fr;
    }

    .ms-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-seller-hero-content {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 35px;
        width: 100%;
        min-width: 0;
    }

    .ms-seller-status {
        width: 100%;
    }
}


/* =========================================================
                   MOBILE BREAKPOINT
                   ========================================================= */

@media (max-width: 767px) {

    .desktop-only {
        display: none !important;
    }

    .ms-seller-desktop {
        display: none;
    }

    .ms-seller-mobile {
        display: block;
    }
}


@media (min-width: 768px) {

    .ms-seller-mobile {
        display: none;
    }
}


/* =========================================================
                   SMALL MOBILE
                   ========================================================= */

@media (max-width: 380px) {

    .ms-mobile-actions {
        grid-template-columns: 1fr;
    }

    .ms-mobile-action {
        min-height: 90px;
    }

    .ms-mobile-stat-value {
        font-size: 14px;
    }

    .ms-mobile-name {
        font-size: 17px;
    }
}


/* =========================================================
                   REDUCED MOTION
                   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ms-action-card,
    .ms-stat-card,
    .ms-register-button,
    .ms-action-arrow {
        transition: none !important;
    }
}

:root {
    --ms-purple: #480680;
    --ms-purple-dark: #28003f;
    --ms-purple-deep: #1c002d;
    --ms-purple-light: #f5eff9;
    --ms-purple-soft: #faf7fc;
    --ms-text: #202027;
    --ms-muted: #77747f;
    --ms-border: #ebe8ef;
    --ms-success: #14845a;
    --ms-success-bg: #effaf5;
    --ms-warning: #b77908;
    --ms-warning-bg: #fff8e8;
    --ms-danger: #c92e42;
    --ms-danger-bg: #fff1f3;
    --ms-bg: #f7f7fa;
    --ms-shadow: 0 18px 50px rgba(38, 10, 54, .08);
    --ms-radius: 24px;
}


/* =====================================================
                   BASE
                ===================================================== */

.ms-verification-page {
    direction: rtl;
    background: var(--ms-bg);
    min-height: calc(100vh - 80px);
    padding: 105px 28px 55px;
}

.ms-verification-layout {
    max-width: 1550px;
    margin: 0 auto;
}

.ms-verification-main {
    min-width: 0;
}


/* =====================================================
                   HERO
                ===================================================== */

.ms-verification-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 40px;
    border-radius: var(--ms-radius);
    background: radial-gradient( circle at 10% 20%, rgba(255,255,255,.13), transparent 30% ), radial-gradient( circle at 90% 90%, rgba(255,255,255,.08), transparent 30% ), linear-gradient( 135deg, #220036 0%, #480680 50%, #68149e 100% );
    color: #fff;
    box-shadow: 0 18px 45px rgba(72,6,128,.20);
    margin-bottom: 22px;
}

    .ms-verification-hero::before {
        content: "";
        position: absolute;
        width: 310px;
        height: 310px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
        left: -150px;
        top: -180px;
    }

    .ms-verification-hero::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.06);
        right: -180px;
        bottom: -240px;
    }

.ms-verification-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.ms-verification-hero-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ms-verification-main-icon {
    width: 72px;
    height: 72px;
    border-radius: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.16);
    font-size: 31px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.ms-verification-eyebrow {
    font-size: 12px;
    opacity: .68;
    margin-bottom: 7px;
}

.ms-verification-hero h1 {
    color: whitesmoke;
    margin: 0;
    font-size: 27px;
    font-weight: 850;
    letter-spacing: -.5px;
}

.ms-verification-hero-description {
    margin: 9px 0 0;
    max-width: 650px;
    color: rgba(255,255,255,.73);
    font-size: 13px;
    line-height: 2;
}

.ms-security-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    border-radius: 50px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.13);
    font-size: 12px;
    white-space: nowrap;
}

.ms-security-pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55dda0;
    box-shadow: 0 0 0 4px rgba(85,221,160,.12);
}


/* =====================================================
                   ALERTS
                ===================================================== */

.ms-verification-alert {
    border: 0;
    border-radius: 17px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    box-shadow: 0 7px 22px rgba(30,20,40,.04);
}

.ms-verification-alert-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.ms-alert-success {
    background: var(--ms-success-bg);
    color: var(--ms-success);
    border: 1px solid #d8f0e5;
}

    .ms-alert-success .ms-verification-alert-icon {
        background: #dff5e9;
    }

.ms-alert-danger {
    background: var(--ms-danger-bg);
    color: var(--ms-danger);
    border: 1px solid #f4d7dc;
}

    .ms-alert-danger .ms-verification-alert-icon {
        background: #ffe1e5;
    }


/* =====================================================
                   CURRENT STATUS CARD
                ===================================================== */

.ms-status-card {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    overflow: hidden;
    box-shadow: var(--ms-shadow);
    margin-bottom: 22px;
}

.ms-status-header {
    padding: 21px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background: linear-gradient( 180deg, #fff, #fcfbfd );
    border-bottom: 1px solid var(--ms-border);
}

.ms-status-title {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ms-status-title-icon {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ms-status-title h2 {
    margin: 0;
    color: var(--ms-text);
    font-size: 16px;
    font-weight: 850;
}

.ms-status-title p {
    margin: 4px 0 0;
    color: var(--ms-muted);
    font-size: 11px;
}


/* STATUS BADGES */

.ms-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.ms-status-approved {
    color: var(--ms-success);
    background: var(--ms-success-bg);
    border: 1px solid #d5efe2;
}

.ms-status-pending {
    color: var(--ms-warning);
    background: var(--ms-warning-bg);
    border: 1px solid #f4e4b9;
}

.ms-status-rejected {
    color: var(--ms-danger);
    background: var(--ms-danger-bg);
    border: 1px solid #f2d6da;
}

.ms-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}


/* =====================================================
                   DOCUMENTS
                ===================================================== */

.ms-status-body {
    padding: 28px;
}

.ms-documents-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .ms-documents-heading h3 {
        margin: 0;
        color: var(--ms-text);
        font-size: 15px;
        font-weight: 850;
    }

    .ms-documents-heading span {
        color: var(--ms-muted);
        font-size: 11px;
    }

.ms-document-card {
    height: 100%;
    background: #fbfafc;
    border: 1px solid var(--ms-border);
    border-radius: 19px;
    padding: 13px;
    transition: .22s ease;
}

    .ms-document-card:hover {
        transform: translateY(-3px);
        border-color: rgba(72,6,128,.22);
        box-shadow: 0 13px 30px rgba(50,15,65,.08);
    }

.ms-document-image {
    position: relative;
    height: 210px;
    border-radius: 14px;
    overflow: hidden;
    background: #f0edf3;
}

    .ms-document-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: .3s ease;
    }

.ms-document-card:hover .ms-document-image img {
    transform: scale(1.025);
}

.ms-document-zoom {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(25,10,35,.75);
    color: #fff;
    font-size: 14px;
}

.ms-document-info {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 4px 2px;
}

.ms-document-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ms-document-info strong {
    display: block;
    color: var(--ms-text);
    font-size: 12px;
    font-weight: 800;
}

.ms-document-info span {
    display: block;
    color: var(--ms-muted);
    font-size: 10px;
    margin-top: 4px;
}


/* =====================================================
                   REQUEST INFO
                ===================================================== */

.ms-request-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 23px;
    padding-top: 20px;
    border-top: 1px solid var(--ms-border);
}

.ms-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    background: #faf9fb;
    border: 1px solid var(--ms-border);
    border-radius: 11px;
    color: var(--ms-muted);
    font-size: 11px;
}

    .ms-meta-item strong {
        color: var(--ms-text);
    }


/* =====================================================
                   REJECTION
                ===================================================== */

.ms-rejection-box {
    margin-top: 20px;
    padding: 17px 18px;
    border-radius: 15px;
    background: var(--ms-danger-bg);
    border: 1px solid #f3d6db;
}

    .ms-rejection-box strong {
        display: block;
        color: var(--ms-danger);
        font-size: 12px;
        margin-bottom: 7px;
    }

    .ms-rejection-box p {
        margin: 0;
        color: #795961;
        font-size: 12px;
        line-height: 1.9;
    }


/* =====================================================
                   STATUS MESSAGE
                ===================================================== */

.ms-final-status {
    margin-top: 20px;
    padding: 17px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 750;
}

.ms-final-status-approved {
    color: var(--ms-success);
    background: var(--ms-success-bg);
    border: 1px solid #d6efe2;
}

.ms-final-status-pending {
    color: var(--ms-warning);
    background: var(--ms-warning-bg);
    border: 1px solid #f2e2b9;
}


/* =====================================================
                   SUBMIT SECTION
                ===================================================== */

.ms-submit-card {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    overflow: hidden;
    box-shadow: var(--ms-shadow);
    margin-bottom: 22px;
}

.ms-submit-header {
    padding: 23px 27px;
    color: #fff;
    background: linear-gradient( 135deg, #33004f, #480680, #63129a );
}

.ms-submit-header-inner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ms-submit-header-icon {
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ms-submit-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 850;
}

.ms-submit-header p {
    margin: 4px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 11px;
}

.ms-submit-body {
    padding: 28px;
}


/* =====================================================
                   FILE UPLOAD
                ===================================================== */

.ms-upload-card {
    position: relative;
    height: 100%;
    padding: 18px;
    border: 1.5px dashed #dcd7e2;
    border-radius: 18px;
    background: #fcfbfd;
    transition: .22s ease;
}

    .ms-upload-card:hover {
        border-color: rgba(72,6,128,.45);
        background: #faf7fc;
    }

.ms-upload-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.ms-upload-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
}

.ms-upload-label strong {
    display: block;
    color: var(--ms-text);
    font-size: 12px;
    font-weight: 850;
}

.ms-upload-label span {
    display: block;
    color: var(--ms-muted);
    font-size: 10px;
    margin-top: 3px;
}

.ms-upload-input {
    width: 100%;
    padding: 9px;
    min-height: 47px;
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    background: #fff;
    font-size: 11px;
}

    .ms-upload-input::file-selector-button {
        border: 0;
        padding: 8px 12px;
        border-radius: 9px;
        background: var(--ms-purple-light);
        color: var(--ms-purple);
        font-size: 11px;
        font-weight: 750;
        cursor: pointer;
        margin-left: 8px;
    }

.ms-upload-preview {
    display: none;
    margin-top: 13px;
    height: 130px;
    border-radius: 12px;
    overflow: hidden;
    background: #f2eff4;
    border: 1px solid var(--ms-border);
}

    .ms-upload-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ms-upload-selected {
    display: none;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--ms-success);
    font-size: 10px;
    font-weight: 700;
}


/* =====================================================
                   SECURITY NOTES
                ===================================================== */

.ms-security-box {
    margin-top: 24px;
    padding: 18px;
    border-radius: 17px;
    background: linear-gradient( 135deg, #faf7fc, #fff );
    border: 1px solid #e7dff0;
}

.ms-security-box-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

.ms-security-box-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms-security-box-title strong {
    font-size: 12px;
    color: var(--ms-text);
}

.ms-security-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .ms-security-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 10px;
        border-radius: 11px;
        background: #fff;
        border: 1px solid #eeeaf1;
        color: var(--ms-muted);
        font-size: 10px;
        line-height: 1.8;
    }

        .ms-security-list li::before {
            content: "✓";
            color: var(--ms-success);
            font-weight: 900;
            flex-shrink: 0;
        }


/* =====================================================
                   SUBMIT BUTTON
                ===================================================== */

.ms-submit-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 25px;
    padding-top: 23px;
    border-top: 1px solid var(--ms-border);
}

.ms-submit-hint {
    color: var(--ms-muted);
    font-size: 11px;
    line-height: 1.9;
}

.ms-submit-button {
    min-width: 220px;
    min-height: 54px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient( 135deg, #480680, #68129b );
    font-size: 13px;
    font-weight: 850;
    box-shadow: 0 10px 25px rgba(72,6,128,.22);
    cursor: pointer;
    transition: .2s ease;
}

    .ms-submit-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(72,6,128,.28);
    }


/* =====================================================
                   MOBILE
                ===================================================== */

.ms-mobile-verification {
    direction: rtl;
    background: var(--ms-bg);
    min-height: 100vh;
    padding: 14px 10px 40px;
}

.ms-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.ms-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--ms-border);
    color: var(--ms-purple);
    text-decoration: none;
    font-size: 11px;
    font-weight: 750;
}

.ms-mobile-page-title {
    margin: 0;
    color: var(--ms-text);
    font-size: 15px;
    font-weight: 850;
}

.ms-mobile-hero {
    position: relative;
    overflow: hidden;
    padding: 22px 17px;
    border-radius: 22px;
    color: #fff;
    background: radial-gradient( circle at 90% 10%, rgba(255,255,255,.12), transparent 30% ), linear-gradient( 145deg, #26003e, #480680, #68129a );
    box-shadow: 0 12px 30px rgba(55,5,75,.18);
    margin-bottom: 13px;
}

.ms-mobile-hero-main {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ms-mobile-hero-icon {
    width: 53px;
    height: 53px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.11);
    font-size: 23px;
    flex-shrink: 0;
}

.ms-mobile-hero h1 {
    color: whitesmoke;
    margin: 0;
    font-size: 18px;
    font-weight: 850;
}

.ms-mobile-hero p {
    margin: 5px 0 0;
    color: rgba(255,255,255,.67);
    font-size: 10px;
    line-height: 1.8;
}

.ms-mobile-card {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(35,20,45,.05);
    margin-bottom: 13px;
}

.ms-mobile-card-header {
    padding: 17px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ms-border);
}

.ms-mobile-card-title {
    display: flex;
    align-items: center;
    gap: 9px;
}

.ms-mobile-card-title-icon {
    width: 35px;
    height: 35px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    font-size: 14px;
}

.ms-mobile-card-title h2 {
    margin: 0;
    color: var(--ms-text);
    font-size: 13px;
    font-weight: 850;
}

.ms-mobile-card-title p {
    margin: 3px 0 0;
    color: var(--ms-muted);
    font-size: 9px;
}

.ms-mobile-card-body {
    padding: 15px;
}

.ms-mobile-doc {
    padding: 9px;
    border: 1px solid var(--ms-border);
    border-radius: 15px;
    background: #fbfafc;
    margin-bottom: 10px;
}

    .ms-mobile-doc:last-child {
        margin-bottom: 0;
    }

.ms-mobile-doc-image {
    height: 175px;
    border-radius: 11px;
    overflow: hidden;
    background: #f1eef3;
}

    .ms-mobile-doc-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ms-mobile-doc-title {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 3px 2px;
}

    .ms-mobile-doc-title strong {
        font-size: 11px;
        color: var(--ms-text);
    }

    .ms-mobile-doc-title span {
        display: block;
        color: var(--ms-muted);
        font-size: 9px;
        margin-top: 3px;
    }

.ms-mobile-meta {
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--ms-border);
}

.ms-mobile-meta-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    font-size: 10px;
    color: var(--ms-muted);
}

    .ms-mobile-meta-item strong {
        color: var(--ms-text);
    }

.ms-mobile-rejection {
    margin-top: 12px;
    padding: 13px;
    border-radius: 13px;
    background: var(--ms-danger-bg);
    border: 1px solid #f2d6db;
    color: #7b5960;
    font-size: 10px;
    line-height: 1.9;
}

    .ms-mobile-rejection strong {
        color: var(--ms-danger);
    }

.ms-mobile-upload {
    padding: 14px;
    border: 1.5px dashed #dcd7e2;
    border-radius: 16px;
    margin-bottom: 10px;
}

    .ms-mobile-upload:last-child {
        margin-bottom: 0;
    }

.ms-mobile-upload-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.ms-mobile-upload-icon {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.ms-mobile-upload-title strong {
    font-size: 11px;
}

.ms-mobile-upload-title span {
    display: block;
    color: var(--ms-muted);
    font-size: 9px;
    margin-top: 3px;
}

.ms-mobile-file {
    width: 100%;
    min-height: 44px;
    padding: 7px;
    border: 1px solid var(--ms-border);
    border-radius: 11px;
    background: #fff;
    font-size: 10px;
}

.ms-mobile-preview {
    display: none;
    height: 125px;
    margin-top: 9px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1eef3;
}

    .ms-mobile-preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.ms-mobile-security-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ms-mobile-security-list li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 8px 0;
        border-bottom: 1px solid #f0edf2;
        color: var(--ms-muted);
        font-size: 10px;
        line-height: 1.8;
    }

        .ms-mobile-security-list li:last-child {
            border-bottom: 0;
        }

        .ms-mobile-security-list li::before {
            content: "✓";
            color: var(--ms-success);
            font-weight: 900;
        }

.ms-mobile-submit {
    width: 100%;
    min-height: 55px;
    border: 0;
    border-radius: 15px;
    background: linear-gradient( 135deg, #480680, #68129a );
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    box-shadow: 0 10px 25px rgba(72,6,128,.22);
}


/* =====================================================
                   RESPONSIVE
                ===================================================== */

@media (max-width: 1199px) {

    .ms-verification-hero-content {
        align-items: flex-start;
        flex-direction: column;
    }

    .ms-security-pill {
        align-self: flex-start;
    }
}

@media (max-width: 991px) {

    .ms-verification-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ms-security-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {

    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {

    .ms-mobile-verification {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ms-document-card,
    .ms-document-card:hover,
    .ms-submit-button,
    .ms-submit-button:hover {
        transition: none;
        transform: none;
    }
}

:root {
    --ms-purple: #480680;
    --ms-purple-dark: #2b034d;
    --ms-purple-light: #f5eff9;
    --ms-bg: #f7f7fa;
    --ms-card: #ffffff;
    --ms-text: #22222a;
    --ms-muted: #777783;
    --ms-border: #e9e7ee;
    --ms-success: #16855b;
    --ms-danger: #d93045;
    --ms-shadow: 0 12px 35px rgba(32, 14, 48, .08);
    --ms-radius: 22px;
}

/* =========================
                   PAGE
                ========================= */

.ms-profile-page {
    direction: rtl;
    background: var(--ms-bg);
    min-height: calc(100vh - 80px);
    padding: 110px 28px 45px;
}

.ms-profile-layout {
    max-width: 1550px;
    margin: 0 auto;
}

/* =========================
                   MAIN CARD
                ========================= */

.ms-profile-card {
    background: var(--ms-card);
    border: 1px solid rgba(72, 6, 128, .08);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
    overflow: hidden;
}

/* =========================
                   PROFILE HERO
                ========================= */

.ms-profile-hero {
    position: relative;
    padding: 34px 38px;
    background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.13), transparent 30%), radial-gradient(circle at 85% 80%, rgba(255,255,255,.08), transparent 28%), linear-gradient(135deg, #26023f 0%, #480680 48%, #64119a 100%);
    color: #fff;
    overflow: hidden;
}

    .ms-profile-hero::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
        left: -100px;
        top: -140px;
    }

    .ms-profile-hero::after {
        content: "";
        position: absolute;
        width: 330px;
        height: 330px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.06);
        right: -150px;
        bottom: -210px;
    }

.ms-profile-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.ms-profile-identity {
    display: flex;
    align-items: center;
    gap: 22px;
}

.ms-profile-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 4px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
}

    .ms-profile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ms-avatar-placeholder {
    font-size: 34px;
    font-weight: 700;
    color: #fff;
}

.ms-profile-eyebrow {
    font-size: 13px;
    opacity: .72;
    margin-bottom: 7px;
}

.ms-profile-name {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.ms-profile-mobile {
    margin-top: 7px;
    font-size: 14px;
    opacity: .78;
    direction: ltr;
    text-align: right;
}

.ms-profile-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    border-radius: 50px;
    font-size: 13px;
    white-space: nowrap;
}

.ms-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #54df9e;
    box-shadow: 0 0 0 4px rgba(84,223,158,.13);
}

/* =========================
                   CONTENT
                ========================= */

.ms-profile-content {
    padding: 35px 38px 40px;
}

.ms-section-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 23px;
}

.ms-section-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
}

.ms-section-title h3 {
    color: whitesmoke !important;
    margin: 0;
    color: var(--ms-text);
    font-size: 18px;
    font-weight: 800;
}

.ms-section-title p {
    margin: 4px 0 0;
    color: #d5d2d9;
    font-size: 12px;
}

.ms-form-section {
    margin-bottom: 38px;
}

    .ms-form-section:last-child {
        margin-bottom: 0;
    }

/* =========================
                   INPUT
                ========================= */

.ms-field {
    margin-bottom: 22px;
}

    .ms-field label {
        display: block;
        margin-bottom: 9px;
        color: #3d3b45;
        font-size: 13px;
        font-weight: 700;
        color: whitesmoke;
    }

.ms-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ms-required {
    color: var(--ms-danger);
    font-size: 11px;
}

.ms-input-wrap {
    position: relative;
}

.ms-input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #a4a1ad;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

.ms-input {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--ms-border);
    border-radius: 14px;
    background: #fbfbfc;
    color: var(--ms-text);
    padding: 12px 44px 12px 15px;
    font-size: 14px;
    outline: none;
    transition: .2s ease;
}

    .ms-input:focus {
        background: #fff;
        border-color: rgba(72,6,128,.48);
        box-shadow: 0 0 0 4px rgba(72,6,128,.08);
    }

    .ms-input::placeholder {
        color: #aaa7b0;
    }

textarea.ms-input {
    min-height: 105px;
    resize: vertical;
    line-height: 1.9;
}

.ms-file-input {
    padding: 9px 12px;
}

    .ms-file-input::file-selector-button {
        border: 0;
        background: var(--ms-purple-light);
        color: var(--ms-purple);
        padding: 8px 13px;
        border-radius: 9px;
        font-size: 12px;
        font-weight: 700;
        margin-left: 10px;
        cursor: pointer;
    }

/* =========================
                   PROFILE IMAGE
                ========================= */

.ms-photo-box {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 15px;
    border: 1px dashed #dcd8e4;
    border-radius: 17px;
    background: #fcfbfd;
}

.ms-photo-preview {
    width: 65px;
    height: 65px;
    border-radius: 15px;
    object-fit: cover;
    background: var(--ms-purple-light);
    border: 1px solid #e7dfed;
    flex-shrink: 0;
}

.ms-photo-info {
    flex: 1;
}

    .ms-photo-info strong {
        display: block;
        font-size: 13px;
        color: var(--ms-text);
        margin-bottom: 5px;
    }

    .ms-photo-info span {
        color: var(--ms-muted);
        font-size: 11px;
        line-height: 1.8;
    }

/* =========================
                   SECURITY NOTICE
                ========================= */

.ms-security-notice {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 20px;
    background: #fff8f8;
    border: 1px solid #f5d9dd;
    border-radius: 16px;
    margin-top: 5px;
    margin-bottom: 24px;
}

.ms-security-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff0f2;
    color: var(--ms-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 17px;
}

.ms-security-text strong {
    display: block;
    color: #9d2535;
    font-size: 13px;
    margin-bottom: 6px;
}

.ms-security-text p {
    margin: 0;
    color: #7d6267;
    font-size: 12px;
    line-height: 2;
}

/* =========================
                   SUBMIT
                ========================= */

.ms-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 28px;
    border-top: 1px solid var(--ms-border);
}

.ms-save-hint {
    color: var(--ms-muted);
    font-size: 12px;
    line-height: 1.8;
}

.ms-save-button {
    min-width: 190px;
    min-height: 53px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #480680, #65129a);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 9px 22px rgba(72,6,128,.22);
    transition: .2s ease;
}

    .ms-save-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 13px 28px rgba(72,6,128,.28);
    }

/* =========================
                   MOBILE
                ========================= */

.ms-mobile-profile {
    direction: rtl;
    padding: 15px 12px 35px;
    background: var(--ms-bg);
    min-height: 100vh;
}

.ms-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ms-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--ms-purple);
    background: #fff;
    border: 1px solid #e8e2ed;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.ms-mobile-page-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ms-text);
    margin: 0;
}

.ms-mobile-hero {
    background: radial-gradient(circle at 20% 10%, rgba(255,255,255,.12), transparent 30%), linear-gradient(145deg, #2c0446, #480680 55%, #67139c);
    border-radius: 23px;
    color: #fff;
    padding: 23px 18px;
    margin-bottom: 14px;
    box-shadow: 0 12px 28px rgba(50,5,70,.18);
}

.ms-mobile-profile-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ms-mobile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 19px;
    background: rgba(255,255,255,.12);
    border: 2px solid rgba(255,255,255,.2);
    overflow: hidden;
    flex-shrink: 0;
}

    .ms-mobile-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ms-mobile-name {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 800;
}

.ms-mobile-mobile {
    font-size: 11px;
    opacity: .72;
    direction: ltr;
    text-align: right;
}

.ms-mobile-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 7px 10px;
    border-radius: 30px;
    background: rgba(255,255,255,.09);
    font-size: 10px;
}

.ms-mobile-card {
    background: #fff;
    border: 1px solid #ece9f0;
    border-radius: 20px;
    padding: 20px 15px;
    box-shadow: 0 8px 24px rgba(35,20,45,.05);
    margin-bottom: 13px;
}

.ms-mobile-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.ms-mobile-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--ms-purple-light);
    color: var(--ms-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.ms-mobile-section-title h3 {
    font-size: 15px;
    font-weight: 800;
    margin: 0;
}

.ms-mobile-section-title p {
    margin: 3px 0 0;
    font-size: 10px;
    color: var(--ms-muted);
}

.ms-mobile-input {
    min-height: 49px;
    border-radius: 13px;
    font-size: 13px;
}

.ms-mobile-file {
    padding: 8px;
}

.ms-mobile-security {
    padding: 15px;
    border-radius: 15px;
}

    .ms-mobile-security .ms-security-icon {
        width: 37px;
        height: 37px;
    }

    .ms-mobile-security .ms-security-text p {
        font-size: 11px;
    }

.ms-mobile-save {
    width: 100%;
    min-height: 56px;
    border-radius: 15px;
    font-size: 15px;
}

.ms-mobile-save-wrap {
    position: sticky;
    bottom: 10px;
    z-index: 20;
    padding-top: 7px;
}

.error {
    display: block;
    margin-top: 5px;
    color: var(--ms-danger);
    font-size: 11px;
}

@media (max-width: 991px) {
    .ms-profile-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .ms-profile-hero,
    .ms-profile-content {
        padding-left: 25px;
        padding-right: 25px;
    }
}

@media (max-width: 767px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .ms-mobile-profile {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .ms-mobile-profile {
        padding-left: 9px;
        padding-right: 9px;
    }

    .ms-mobile-card {
        padding: 18px 13px;
    }

    .ms-mobile-hero {
        padding: 20px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ms-save-button {
        transition: none;
    }

        .ms-save-button:hover {
            transform: none;
        }
}
/* =========================================================
                   MIDASHOW NOTIFICATION CENTER
                   Premium Profile Panel
                   ========================================================= */

:root {
    --ms-purple: #480680;
    --ms-purple-dark: #25033f;
    --ms-purple-soft: #f6f0fa;
    --ms-purple-border: rgba(72, 6, 128, .10);
    --ms-text: #27222d;
    --ms-muted: #827a89;
    --ms-border: #eee9f1;
    --ms-green: #15966c;
    --ms-green-soft: #eaf8f2;
    --ms-orange: #d58a19;
    --ms-orange-soft: #fff6e5;
    --ms-red: #c73854;
    --ms-red-soft: #fff0f3;
    --ms-shadow: 0 12px 35px rgba(41, 12, 58, .07);
    --ms-radius: 20px;
}


/* =========================================================
                   DESKTOP PAGE
                   ========================================================= */

.ms-notification-page {
    direction: rtl;
    padding: 25px 0 50px;
    width: 100%;
}


/* =========================================================
                   PAGE HEADER
                   ========================================================= */

.ms-notification-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 27px;
    margin-bottom: 18px;
    border-radius: 21px;
    background: linear-gradient( 135deg, #480680 0%, #35104e 55%, #25033f 100% );
    color: white;
    box-shadow: 0 16px 40px rgba(72, 6, 128, .17);
}


    .ms-notification-header::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        left: -75px;
        top: -95px;
        background: rgba(255,255,255,.045);
    }


    .ms-notification-header::after {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        border-radius: 50%;
        right: -60px;
        bottom: -75px;
        background: rgba(255,255,255,.035);
    }


.ms-notification-title-area {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
}


.ms-notification-main-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.10);
    color: white;
    font-size: 22px;
    box-shadow: 0 7px 20px rgba(0,0,0,.12);
}


.ms-notification-title {
    margin: 0;
    color: white;
    font-size: 19px;
    font-weight: 850;
}


.ms-notification-subtitle {
    margin: 4px 0 0;
    color: rgba(255,255,255,.68);
    font-size: 11px;
}


.ms-notification-header-badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 35px;
    padding: 0 12px;
    border-radius: 30px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
                   NOTIFICATION CONTENT
                   ========================================================= */

.ms-notification-container {
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
    overflow: hidden;
}


/* =========================================================
                   TOOLBAR
                   ========================================================= */

.ms-notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 19px;
    border-bottom: 1px solid var(--ms-border);
    background: #fff;
    direction: rtl;
}


.ms-notification-toolbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ms-text);
    font-size: 12px;
    font-weight: 800;
}


    .ms-notification-toolbar-title i {
        color: var(--ms-purple);
    }


.ms-notification-toolbar-info {
    color: var(--ms-muted);
    font-size: 10px;
}


/* =========================================================
                   NOTIFICATION LIST AREA
                   ========================================================= */

.ms-notification-list {
    max-height: calc(100vh - 290px);
    min-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(72,6,128,.25) transparent;
}


    .ms-notification-list::-webkit-scrollbar {
        width: 6px;
    }


    .ms-notification-list::-webkit-scrollbar-track {
        background: transparent;
    }


    .ms-notification-list::-webkit-scrollbar-thumb {
        background: rgba(72,6,128,.20);
        border-radius: 20px;
    }


        .ms-notification-list::-webkit-scrollbar-thumb:hover {
            background: rgba(72,6,128,.35);
        }


/* =========================================================
                   COMPONENT WRAPPER
                   ========================================================= */

.ms-notification-component {
    width: 100%;
    direction: rtl;
}


    /* =========================================================
                   TRY TO STYLE COMMON NOTIFICATION MARKUP
                   WITHOUT TOUCHING COMPONENT LOGIC
                   ========================================================= */

    .ms-notification-component > div {
        max-width: 100%;
    }


/* =========================================================
                   MOBILE
                   ========================================================= */

.ms-mobile-notification-page {
    direction: rtl;
    padding: 13px 12px 35px;
}


.ms-mobile-notification-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px;
    margin-bottom: 13px;
    border-radius: 18px;
    color: white;
    background: linear-gradient( 140deg, #480680, #281038 );
    box-shadow: 0 13px 30px rgba(72,6,128,.15);
}


.ms-mobile-notification-title {
    display: flex;
    align-items: center;
    gap: 10px;
}


.ms-mobile-notification-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,.10);
    font-size: 17px;
}


.ms-mobile-notification-title h1 {
    margin: 0;
    font-size: 14px;
    font-weight: 850;
}


.ms-mobile-notification-title span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.65);
    font-size: 9px;
}


.ms-mobile-notification-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255,255,255,.09);
    color: white;
    text-decoration: none;
    font-size: 13px;
    transition: all .2s ease;
}


    .ms-mobile-notification-back:hover {
        color: white;
        background: rgba(255,255,255,.16);
        transform: translateX(2px);
    }


.ms-mobile-notification-card {
    background: white;
    border: 1px solid var(--ms-border);
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(41,12,58,.045);
}


.ms-mobile-notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    border-bottom: 1px solid var(--ms-border);
}


.ms-mobile-notification-toolbar-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ms-text);
    font-size: 11px;
    font-weight: 800;
}


    .ms-mobile-notification-toolbar-title i {
        color: var(--ms-purple);
    }


.ms-mobile-notification-list {
    padding: 7px;
}


/* =========================================================
                   BACK BUTTON - DESKTOP HIDDEN
                   ========================================================= */

.ms-mobile-only {
    display: none;
}


/* =========================================================
                   RESPONSIVE
                   ========================================================= */

@media (max-width: 991px) {

    .ms-notification-header {
        padding: 20px;
    }

    .ms-notification-list {
        max-height: 600px;
    }
}


@media (max-width: 767px) {

    .desktop-only {
        display: none !important;
    }

    .ms-mobile-only {
        display: block;
    }
}


@media (max-width: 575px) {

    .ms-mobile-notification-page {
        padding: 10px 10px 30px;
    }

    .ms-mobile-notification-header {
        padding: 15px;
    }
}


/* =========================================================
                   REDUCED MOTION
                   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ms-mobile-notification-back {
        transition: none !important;
    }
}

/* =========================================================
                   MIDASHOW PROFILE DASHBOARD
                   Premium / RTL / Responsive
                   ========================================================= */

:root {
    --ms-purple: #480680;
    --ms-purple-dark: #25033f;
    --ms-purple-soft: #f6f0fa;
    --ms-purple-border: rgba(72, 6, 128, .10);
    --ms-text: #25212a;
    --ms-muted: #7b7482;
    --ms-green: #15966c;
    --ms-green-soft: #eaf8f2;
    --ms-orange: #d58a19;
    --ms-orange-soft: #fff6e5;
    --ms-red: #c73854;
    --ms-red-soft: #fff0f3;
    --ms-border: #eee9f1;
    --ms-shadow: 0 12px 35px rgba(41, 12, 58, .07);
    --ms-radius: 20px;
}


/* =========================================================
                   MAIN
                   ========================================================= */

.ms-dashboard {
    direction: rtl;
    padding: 25px 0 60px;
}


/* =========================================================
                   DESKTOP HEADER
                   ========================================================= */

.ms-dashboard-hero {
    position: relative;
    overflow: hidden;
    padding: 30px 32px;
    border-radius: 24px;
    background: radial-gradient( circle at 8% 20%, rgba(255,255,255,.12), transparent 28% ), linear-gradient( 135deg, #480680 0%, #371052 55%, #25033f 100% );
    color: white;
    box-shadow: 0 18px 45px rgba(72,6,128,.18);
    margin-bottom: 24px;
}

    .ms-dashboard-hero::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        left: -90px;
        top: -100px;
        background: rgba(255,255,255,.045);
    }

    .ms-dashboard-hero::after {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        right: -70px;
        bottom: -90px;
        background: rgba(255,255,255,.04);
    }


.ms-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}


.ms-hero-info {
    display: flex;
    align-items: center;
    gap: 18px;
    direction: rtl;
}


.ms-hero-avatar {
    width: 82px;
    height: 82px;
    border-radius: 23px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.85);
    box-shadow: 0 10px 28px rgba(0,0,0,.23);
    background: rgba(255,255,255,.1);
}


.ms-hero-title {
    margin: 0 0 6px;
    font-size: 23px;
    font-weight: 850;
    color: #fff;
}


.ms-hero-subtitle {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,.72);
}


.ms-hero-mobile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.84);
    font-size: 11px;
}


.ms-hero-action {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
}


    .ms-hero-action a {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 46px;
        padding: 0 18px;
        border-radius: 13px;
        background: #fff;
        color: var(--ms-purple);
        text-decoration: none;
        font-size: 12px;
        font-weight: 800;
        box-shadow: 0 8px 22px rgba(0,0,0,.12);
        transition: all .22s ease;
    }


        .ms-hero-action a:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(0,0,0,.18);
            color: var(--ms-purple-dark);
        }


/* =========================================================
                   QUICK STATS
                   ========================================================= */

.ms-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: var(--ms-text);
    font-size: 15px;
    font-weight: 850;
}


    .ms-section-title::before {
        content: "";
        width: 4px;
        height: 20px;
        border-radius: 5px;
        background: var(--ms-purple);
    }


.ms-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}


.ms-stat-card {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 94px;
    padding: 17px;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
    transition: transform .22s ease, box-shadow .22s ease;
}


    .ms-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(41,12,58,.11);
    }


.ms-stat-icon {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--ms-purple-soft);
    color: var(--ms-purple);
    font-size: 20px;
}


.ms-stat-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.ms-stat-label {
    color: var(--ms-muted);
    font-size: 10px;
}


.ms-stat-value {
    color: var(--ms-text);
    font-size: 14px;
    font-weight: 800;
}


/* =========================================================
                   MAIN MODULES
                   ========================================================= */

.ms-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}


.ms-module-card {
    position: relative;
    overflow: hidden;
    padding: 21px;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: var(--ms-radius);
    box-shadow: var(--ms-shadow);
}


    .ms-module-card::before {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        left: -55px;
        bottom: -60px;
        background: rgba(72,6,128,.025);
    }


.ms-module-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}


.ms-module-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ms-text);
    font-size: 15px;
    font-weight: 850;
}


.ms-module-title-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--ms-purple-soft);
    color: var(--ms-purple);
}


.ms-module-label {
    padding: 5px 9px;
    border-radius: 30px;
    font-size: 9px;
    font-weight: 700;
}


.ms-label-active {
    color: var(--ms-green);
    background: var(--ms-green-soft);
}


.ms-label-locked {
    color: var(--ms-orange);
    background: var(--ms-orange-soft);
}


/* =========================================================
                   MODULE ITEMS
                   ========================================================= */

.ms-module-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
}


.ms-module-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 59px;
    padding: 0 13px;
    border: 1px solid #f0edf2;
    border-radius: 13px;
    color: var(--ms-text);
    text-decoration: none;
    background: #fff;
    transition: all .22s ease;
}


    .ms-module-item:hover {
        color: var(--ms-purple);
        border-color: rgba(72,6,128,.16);
        background: var(--ms-purple-soft);
        transform: translateY(-2px);
    }


.ms-module-item-info {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11px;
    font-weight: 700;
}


.ms-module-item-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f7f5f8;
    color: #77717e;
}


.ms-module-item:hover
.ms-module-item-icon {
    color: var(--ms-purple);
    background: rgba(72,6,128,.08);
}


.ms-module-arrow {
    color: #b6b0b9;
    font-size: 9px;
}


/* =========================================================
                   LOCKED AREA
                   ========================================================= */

.ms-locked-area {
    margin-top: 16px;
    padding: 14px;
    border-radius: 14px;
    background: var(--ms-orange-soft);
    border: 1px solid rgba(213,138,25,.12);
    display: flex;
    align-items: center;
    gap: 11px;
}


.ms-locked-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(213,138,25,.10);
    color: var(--ms-orange);
}


.ms-locked-text {
    color: #806323;
    font-size: 10px;
    line-height: 1.9;
}


/* =========================================================
                   VERIFICATION STATUS
                   ========================================================= */

.ms-verification-card {
    margin-top: 18px;
    padding: 17px;
    border-radius: 16px;
    background: linear-gradient( 135deg, #f9f5fc, #fff );
    border: 1px solid var(--ms-purple-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}


.ms-verification-info {
    display: flex;
    align-items: center;
    gap: 11px;
}


.ms-verification-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--ms-purple);
    background: var(--ms-purple-soft);
}


.ms-verification-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--ms-text);
}


.ms-verification-desc {
    margin-top: 3px;
    color: var(--ms-muted);
    font-size: 9px;
}


.ms-verification-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: 10px;
    background: var(--ms-purple);
    color: white;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
    transition: all .2s ease;
}


    .ms-verification-button:hover {
        color: white;
        background: var(--ms-purple-dark);
        transform: translateY(-1px);
    }


/* =========================================================
                   MOBILE
                   ========================================================= */

.ms-mobile-dashboard {
    direction: rtl;
    padding: 18px 13px 40px;
}


.ms-mobile-welcome {
    position: relative;
    overflow: hidden;
    padding: 20px 17px;
    border-radius: 20px;
    color: white;
    background: linear-gradient( 140deg, #480680, #291039 );
    box-shadow: 0 15px 35px rgba(72,6,128,.17);
    margin-bottom: 16px;
}


.ms-mobile-welcome-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}


.ms-mobile-avatar {
    width: 57px;
    height: 57px;
    border-radius: 17px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.85);
}


.ms-mobile-name {
    font-size: 16px;
    font-weight: 850;
}


.ms-mobile-phone {
    margin-top: 4px;
    color: rgba(255,255,255,.7);
    font-size: 10px;
}


.ms-mobile-section {
    margin-bottom: 14px;
    padding: 16px;
    border-radius: 17px;
    background: white;
    border: 1px solid var(--ms-border);
    box-shadow: 0 8px 25px rgba(41,12,58,.045);
}


.ms-mobile-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: var(--ms-text);
    font-size: 13px;
    font-weight: 850;
}


    .ms-mobile-section-title i {
        color: var(--ms-purple);
    }


.ms-mobile-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 51px;
    padding: 0 11px;
    margin-top: 7px;
    border-radius: 12px;
    background: #faf9fb;
    color: var(--ms-text);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    transition: all .2s ease;
}


    .ms-mobile-item:hover {
        color: var(--ms-purple);
        background: var(--ms-purple-soft);
    }


.ms-mobile-item-right {
    display: flex;
    align-items: center;
    gap: 9px;
}


.ms-mobile-item-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f1edf4;
    color: var(--ms-purple);
}


.ms-mobile-logout {
    color: var(--ms-red);
}


.ms-mobile-lock {
    padding: 12px;
    margin-top: 8px;
    border-radius: 12px;
    color: #806323;
    background: var(--ms-orange-soft);
    font-size: 10px;
    line-height: 1.8;
}


/* =========================================================
                   RESPONSIVE BREAKPOINTS
                   ========================================================= */

@media (max-width: 1199px) {

    .ms-stat-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 991px) {

    .ms-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ms-module-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 575px) {

    .ms-stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .ms-stat-card {
        min-height: 76px;
        padding: 11px;
        border-radius: 14px;
    }

    .ms-stat-icon {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 15px;
        border-radius: 11px;
    }

    .ms-stat-label {
        font-size: 8px;
    }

    .ms-stat-value {
        font-size: 11px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ms-stat-card,
    .ms-module-item,
    .ms-profile-nav-link,
    .ms-hero-action a {
        transition: none !important;
    }
}

/* =========================================================
           MIDASHOW ADMIN / PROFILE NAVBAR
           Premium Purple Dashboard
           ========================================================= */

:root {
    --ms-purple: #480680;
    --ms-purple-dark: #25033f;
    --ms-purple-soft: #f5eff9;
    --ms-purple-light: #8d4ab4;
    --ms-text: #24202a;
    --ms-muted: #77717e;
    --ms-border: rgba(72, 6, 128, .09);
    --ms-white: #ffffff;
    --ms-danger: #d9304f;
    --ms-shadow: 0 14px 40px rgba(35, 10, 52, .08);
    --ms-radius: 18px;
}

/* =========================================================
           TOP BRAND BAR
           ========================================================= */

.ms-topbar {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid var(--ms-border);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .025);
    position: relative;
    z-index: 100;
}

.ms-topbar-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 26px;
}

.ms-brand-links {
    display: flex;
    align-items: center;
    gap: 7px;
    direction: rtl;
}

.ms-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 17px;
    border-radius: 12px;
    color: #514b57;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: all .22s ease;
}

    .ms-brand-link:hover {
        color: var(--ms-purple);
        background: var(--ms-purple-soft);
        transform: translateY(-1px);
    }

    .ms-brand-link.ms-active-brand {
        color: var(--ms-purple);
        background: rgba(72, 6, 128, .08);
    }

.ms-brand-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ms-purple);
    opacity: .65;
}

/* User identity */

.ms-user-summary {
    display: flex;
    align-items: center;
    gap: 13px;
    direction: rtl;
}

.ms-user-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.5;
}

.ms-user-name {
    font-size: 15px;
    font-weight: 800;
    color: var(--ms-text);
}

.ms-user-label {
    font-size: 11px;
    color: var(--ms-muted);
    margin-top: 1px;
}

.ms-user-avatar-small {
    width: 43px;
    height: 43px;
    border-radius: 13px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 5px 15px rgba(72, 6, 128, .18);
}

/* =========================================================
           PROFILE SIDEBAR
           ========================================================= */

.ms-profile-sidebar {
    width: 100%;
    padding: 24px 18px;
    background: #fff;
    border-left: 1px solid var(--ms-border);
    box-shadow: 8px 0 35px rgba(30, 8, 45, .025);
    direction: rtl;
}

/* Profile Card */

.ms-profile-card {
    position: relative;
    overflow: hidden;
    padding: 24px 18px 21px;
    margin-bottom: 20px;
    border-radius: 20px;
    background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, .14), transparent 28%), linear-gradient(123deg, #ffffff 0%, #ad5eeb 55%, #21082f 100%);
    box-shadow: 0 16px 35px rgba(72, 6, 128, .20);
    color: white;
}

    .ms-profile-card::before {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        top: -70px;
        left: -50px;
        background: rgba(255,255,255,.055);
    }

    .ms-profile-card::after {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        bottom: -60px;
        right: -30px;
        background: rgba(255,255,255,.045);
    }

.ms-profile-avatar-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin-bottom: 13px;
}

.ms-profile-avatar {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,.85);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    background: rgba(255,255,255,.12);
}

.ms-profile-name {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 5px;
    color: #fff;
}

.ms-profile-mobile {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    direction: rtl;
}

.ms-profile-status {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin: 13px auto 0;
    padding: 5px 10px;
    border-radius: 30px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.10);
    color: rgba(255,255,255,.88);
    font-size: 10px;
    font-weight: 600;
}

/* =========================================================
           NAVIGATION
           ========================================================= */

.ms-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 10px;
    color: #a19aa7;
    font-size: 11px;
    font-weight: 700;
}

.ms-nav-title-line {
    flex: 1;
    height: 1px;
    background: #eeeaf0;
}

.ms-profile-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ms-profile-nav-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 13px;
    min-height: 52px;
    padding: 0 14px !important;
    border-radius: 14px !important;
    border: 0 !important;
    color: #625b68 !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    transition: color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
}

    .ms-profile-nav-link:hover {
        color: var(--ms-purple) !important;
        background: var(--ms-purple-soft) !important;
        transform: translateX(-3px);
    }

    .ms-profile-nav-link.ms-current {
        color: var(--ms-purple) !important;
        background: linear-gradient( 90deg, rgba(72,6,128,.11), rgba(72,6,128,.045) ) !important;
        box-shadow: inset -3px 0 0 var(--ms-purple);
    }

.ms-nav-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f7f5f8;
    color: #77717d;
    font-size: 15px;
    transition: all .22s ease;
}

.ms-profile-nav-link:hover .ms-nav-icon,
.ms-profile-nav-link.ms-current .ms-nav-icon {
    color: var(--ms-purple);
    background: rgba(72, 6, 128, .10);
}

.ms-nav-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.ms-nav-main-text {
    font-size: 13px;
    line-height: 1.4;
}

.ms-nav-description {
    margin-top: 2px;
    color: #a09aa5;
    font-size: 9px;
    font-weight: 400;
}

.ms-nav-arrow {
    color: #b3adb7;
    font-size: 10px;
    transition: transform .22s ease;
}

.ms-profile-nav-link:hover .ms-nav-arrow,
.ms-profile-nav-link.ms-current .ms-nav-arrow {
    color: var(--ms-purple);
    transform: translateX(-3px);
}

/* Notification badge */

.ms-notification-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #f1e7f6;
    color: var(--ms-purple);
    font-size: 9px;
    font-weight: 800;
}

/* Logout */

.ms-logout {
    margin-top: 12px;
    color: #a43c53 !important;
}

    .ms-logout .ms-nav-icon {
        color: #b9435a;
        background: rgba(217,48,79,.07);
    }

    .ms-logout:hover {
        color: #b4233f !important;
        background: rgba(217,48,79,.06) !important;
    }

        .ms-logout:hover .ms-nav-icon {
            background: rgba(217,48,79,.10);
            color: #b4233f;
        }

/* =========================================================
           RESPONSIVE
           ========================================================= */

@media (max-width: 991px) {

    .ms-topbar-inner {
        padding: 0 16px;
    }

    .ms-brand-links {
        gap: 2px;
    }

    .ms-brand-link {
        padding: 0 10px;
        font-size: 12px;
    }

    .ms-user-text {
        display: none;
    }

    .ms-profile-sidebar {
        border-left: 0;
        box-shadow: none;
    }
}

@media (max-width: 575px) {

    .ms-topbar-inner {
        min-height: 62px;
    }

    .ms-brand-link {
        height: 36px;
        padding: 0 8px;
        font-size: 10px;
    }

    .ms-brand-dot {
        display: none;
    }

    .ms-user-avatar-small {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .ms-profile-sidebar {
        padding: 15px 12px;
    }

    .ms-profile-card {
        padding: 20px 15px;
    }
}
/* ========================================================= */
/* MEIDASHOW - MY ADVERTISEMENTS */
/* ========================================================= */

.meida-profile-page {
    direction: rtl;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 80px;
    background: radial-gradient(circle at 85% 5%, rgba(72, 6, 128, .055), transparent 28%), linear-gradient(180deg, #faf9fc 0%, #ffffff 55%, #faf9fc 100%);
}


/* ========================================================= */
/* SIDEBAR */
/* ========================================================= */

.meida-profile-sidebar {
    position: sticky;
    top: 95px;
}


/* ========================================================= */
/* PAGE HEADER */
/* ========================================================= */

.meida-page-header {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 30px 35px;
    margin-bottom: 25px;
    border-radius: 24px;
    color: #fff;
    background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.12), transparent 30%), linear-gradient(135deg, #21033d 0%, #480680 55%, #26033f 100%);
    box-shadow: 0 18px 45px rgba(72, 6, 128, .16);
}

    .meida-page-header::before {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        left: -100px;
        bottom: -190px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.08);
    }

    .meida-page-header::after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        right: 42%;
        top: -130px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,.06);
    }

.meida-page-header-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
}

.meida-page-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #fff;
    font-size: 29px;
    background: rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.meida-page-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.meida-page-header h1 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

.meida-page-header p {
    margin: 0;
    color: rgba(255,255,255,.75);
    font-size: 14px;
}

.meida-page-header-decoration {
    position: absolute;
    left: 35px;
    top: 28px;
    color: rgba(255,255,255,.12);
    font-size: 65px;
}


/* ========================================================= */
/* CONTACT BOX */
/* ========================================================= */

.meida-contact-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 25px;
    margin-bottom: 35px;
    border: 1px solid #eee8f3;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 8px 30px rgba(34, 14, 48, .055);
}

.meida-contact-content {
    display: flex;
    align-items: center;
    gap: 17px;
    min-width: 300px;
}

.meida-contact-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
    color: #480680;
    font-size: 23px;
    background: rgba(72, 6, 128, .07);
}

.meida-contact-label {
    display: block;
    margin-bottom: 4px;
    color: #777;
    font-size: 12px;
}

.meida-contact-text h3 {
    margin: 0 0 7px;
    color: #28212d;
    font-size: 17px;
    font-weight: 800;
}

.meida-contact-text p {
    max-width: 560px;
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.9;
}

.meida-contact-numbers {
    display: grid;
    grid-template-columns: repeat(2, minmax(170px, 1fr));
    gap: 9px;
    min-width: 390px;
}

.meida-phone-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    border: 1px solid #eee8f3;
    border-radius: 13px;
    background: #fff;
    transition: all .25s ease;
}

    .meida-phone-card > span {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: #480680;
        background: rgba(72, 6, 128, .07);
    }

    .meida-phone-card small {
        display: block;
        margin-bottom: 2px;
        color: #999;
        font-size: 9px;
    }

    .meida-phone-card strong {
        display: block;
        direction: ltr;
        color: #3d3443;
        font-size: 13px;
    }

    .meida-phone-card:hover {
        transform: translateY(-2px);
        border-color: rgba(72,6,128,.25);
        box-shadow: 0 7px 20px rgba(72,6,128,.09);
    }


/* ========================================================= */
/* LIST HEADER */
/* ========================================================= */

.meida-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .meida-list-header > div:first-child span {
        color: #9a91a2;
        font-size: 11px;
    }

    .meida-list-header h2 {
        margin: 4px 0 0;
        color: #27202d;
        font-size: 21px;
        font-weight: 800;
    }

.meida-total-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    color: #480680;
    font-size: 12px;
    font-weight: 700;
    background: rgba(72,6,128,.07);
}


/* ========================================================= */
/* AD CARD */
/* ========================================================= */

.meida-ad-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.meida-ad-card {
    overflow: hidden;
    border: 1px solid #eee9f2;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 7px 25px rgba(34,14,48,.045);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .meida-ad-card:hover {
        transform: translateY(-3px);
        border-color: rgba(72,6,128,.16);
        box-shadow: 0 17px 40px rgba(72,6,128,.09);
    }


/* ========================================================= */
/* CARD TOP */
/* ========================================================= */

.meida-ad-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
}

.meida-ad-title-area {
    display: flex;
    align-items: center;
    gap: 15px;
}

.meida-ad-symbol {
    width: 53px;
    height: 53px;
    flex: 0 0 53px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: #480680;
    font-size: 21px;
    background: linear-gradient(145deg, rgba(72,6,128,.11), rgba(72,6,128,.035));
}

.meida-ad-code {
    display: block;
    margin-bottom: 4px;
    color: #aaa1b0;
    font-size: 10px;
}

.meida-ad-title-area h3 {
    margin: 0 0 7px;
    color: #29222f;
    font-size: 17px;
    font-weight: 800;
}

.meida-ad-category {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8a828f;
    font-size: 11px;
}

    .meida-ad-category i {
        color: #480680;
    }

    .meida-ad-category b {
        color: #c7c0cb;
    }


/* ========================================================= */
/* STATUS */
/* ========================================================= */

.meida-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    white-space: nowrap;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
}

    .meida-status.pending {
        color: #9a6500;
        background: #fff7df;
    }

    .meida-status.payment {
        color: #08768a;
        background: #e9faff;
    }

    .meida-status.paid {
        color: #3555a0;
        background: #edf1ff;
    }

    .meida-status.approved {
        color: #14743a;
        background: #e9f8ef;
    }

    .meida-status.rejected {
        color: #b32929;
        background: #fff0f0;
    }

    .meida-status.canceled {
        color: #777;
        background: #f1f1f1;
    }

    .meida-status.expired {
        color: #69626d;
        background: #f2eff3;
    }

    .meida-status.unknown {
        color: #555;
        background: #eee;
    }


/* ========================================================= */
/* INFO GRID */
/* ========================================================= */

.meida-ad-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #f0edf2;
    border-bottom: 1px solid #f0edf2;
    background: #fcfbfd;
}

.meida-info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 22px;
    border-left: 1px solid #f0edf2;
}

    .meida-info-item:last-child {
        border-left: 0;
    }

    .meida-info-item span {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #aaa1ad;
        font-size: 10px;
    }

        .meida-info-item span i {
            color: #480680;
        }

    .meida-info-item strong {
        color: #453c4b;
        font-size: 12px;
    }

        .meida-info-item strong.approved {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #168042;
            background: transparent;
        }

            .meida-info-item strong.approved i {
                font-size: 6px;
            }

        .meida-info-item strong:not(.approved) i {
            font-size: 6px;
        }


/* ========================================================= */
/* ACTIONS */
/* ========================================================= */

.meida-ad-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 20px;
}

.meida-action-title {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #aaa2ad;
    font-size: 11px;
    white-space: nowrap;
}

    .meida-action-title i {
        color: #480680;
    }

.meida-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.meida-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all .22s ease;
}

    .meida-action-btn:hover {
        transform: translateY(-2px);
    }


    /* ACTION COLORS */

    .meida-action-btn.warning {
        color: #9a6800;
        border-color: #ead8a9;
    }

        .meida-action-btn.warning:hover {
            color: #fff;
            background: #b98513;
        }

    .meida-action-btn.dark {
        color: #4c4650;
        border-color: #ddd9df;
    }

        .meida-action-btn.dark:hover {
            color: #fff;
            background: #403943;
        }

    .meida-action-btn.success {
        color: #157440;
        border-color: #b9dfc7;
    }

        .meida-action-btn.success:hover {
            color: #fff;
            background: #198754;
        }

    .meida-action-btn.primary {
        color: #480680;
        border-color: rgba(72,6,128,.23);
    }

        .meida-action-btn.primary:hover {
            color: #fff;
            background: #480680;
        }

    .meida-action-btn.event {
        color: #4165b5;
        border-color: #c9d3ef;
    }

        .meida-action-btn.event:hover {
            color: #fff;
            background: #4165b5;
        }

    .meida-action-btn.video {
        color: #9b285b;
        border-color: #e8c1d2;
    }

        .meida-action-btn.video:hover {
            color: #fff;
            background: #9b285b;
        }

    .meida-action-btn.upgrade {
        color: #480680;
        border-color: rgba(72,6,128,.23);
        background: rgba(72,6,128,.035);
    }

        .meida-action-btn.upgrade:hover {
            color: #fff;
            background: #480680;
        }

    .meida-action-btn.danger {
        color: #b83232;
        border-color: #ebc8c8;
    }

        .meida-action-btn.danger:hover {
            color: #fff;
            background: #c53c3c;
        }


/* ========================================================= */
/* EMPTY STATE */
/* ========================================================= */

.meida-empty-state {
    padding: 70px 30px;
    text-align: center;
    border: 1px dashed #dcd4e2;
    border-radius: 24px;
    background: rgba(255,255,255,.7);
}

.meida-empty-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    color: #480680;
    font-size: 30px;
    background: rgba(72,6,128,.07);
}

.meida-empty-state h3 {
    margin-bottom: 10px;
    color: #322a38;
    font-size: 19px;
    font-weight: 800;
}

.meida-empty-state p {
    max-width: 480px;
    margin: 0 auto 20px;
    color: #88808d;
    font-size: 13px;
    line-height: 2;
}

.meida-empty-decoration {
    color: #480680;
    font-size: 12px;
    font-weight: 700;
}


/* ========================================================= */
/* MOBILE */
/* ========================================================= */

.meida-mobile-page {
    direction: rtl;
    min-height: 100vh;
    padding: 22px 10px 0;
    background: radial-gradient(circle at 80% 0%, rgba(72,6,128,.07), transparent 28%), #faf9fc;
}


/* MOBILE HEADER */

.meida-mobile-header {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 21px 18px;
    margin-bottom: 14px;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, #25043f, #480680);
    box-shadow: 0 12px 30px rgba(72,6,128,.17);
}

    .meida-mobile-header::after {
        content: "";
        position: absolute;
        width: 130px;
        height: 130px;
        left: -65px;
        top: -75px;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 50%;
    }

.meida-mobile-header-icon {
    width: 51px;
    height: 51px;
    flex: 0 0 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 20px;
    background: rgba(255,255,255,.12);
}

.meida-mobile-header span {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.6);
    font-size: 8px;
    letter-spacing: 2px;
}

.meida-mobile-header h1 {
    margin: 0 0 3px;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
}

.meida-mobile-header p {
    margin: 0;
    color: rgba(255,255,255,.7);
    font-size: 10px;
}


/* MOBILE CONTACT */

.meida-mobile-contact {
    margin-bottom: 24px;
    padding: 15px;
    border: 1px solid #ebe5f0;
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(40,20,55,.045);
}

.meida-mobile-contact-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.meida-mobile-contact-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #480680;
    background: rgba(72,6,128,.07);
}

.meida-mobile-contact-head strong {
    display: block;
    color: #332a39;
    font-size: 13px;
}

.meida-mobile-contact-head span {
    display: block;
    margin-top: 2px;
    color: #99919e;
    font-size: 9px;
}

.meida-mobile-phone-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

    .meida-mobile-phone-list a {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 9px;
        border: 1px solid #eee9f2;
        border-radius: 11px;
        color: #480680;
        text-decoration: none;
        background: #fcfbfd;
    }

        .meida-mobile-phone-list a span {
            flex: 1;
            direction: ltr;
            color: #4b4350;
            font-size: 10px;
            font-weight: 700;
        }

        .meida-mobile-phone-list a > i:last-child {
            font-size: 10px;
            color: #aaa2ad;
        }


/* MOBILE TITLE */

.meida-mobile-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

    .meida-mobile-list-title span {
        color: #9b929f;
        font-size: 9px;
    }

    .meida-mobile-list-title h2 {
        margin: 3px 0 0;
        color: #302834;
        font-size: 17px;
        font-weight: 800;
    }

.meida-mobile-count {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #480680;
    font-size: 13px;
    font-weight: 800;
    background: rgba(72,6,128,.08);
}


/* MOBILE ADS */

.meida-mobile-ads {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.meida-mobile-ad-card {
    overflow: hidden;
    padding: 15px;
    border: 1px solid #ece7ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(38,20,48,.045);
}


/* MOBILE CARD HEAD */

.meida-mobile-ad-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meida-mobile-ad-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #480680;
    font-size: 18px;
    background: rgba(72,6,128,.07);
}

.meida-mobile-ad-title {
    min-width: 0;
}

    .meida-mobile-ad-title > span {
        display: block;
        margin-bottom: 3px;
        color: #aaa1ae;
        font-size: 8px;
    }

    .meida-mobile-ad-title h3 {
        overflow: hidden;
        margin: 0;
        color: #302934;
        font-size: 14px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* MOBILE CATEGORY */

.meida-mobile-category {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 12px 0;
    padding: 9px 10px;
    border-radius: 10px;
    color: #77707d;
    font-size: 9px;
    background: #faf9fb;
}

    .meida-mobile-category i {
        color: #480680;
    }

    .meida-mobile-category b {
        color: #c5bec9;
    }


/* MOBILE STATUS */

.meida-mobile-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0edf2;
}

.meida-mobile-status-label {
    color: #99919d;
    font-size: 9px;
}


/* MOBILE INFO */

.meida-mobile-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 0;
}

    .meida-mobile-info > div {
        padding: 9px;
        border-radius: 10px;
        background: #faf9fb;
    }

    .meida-mobile-info span {
        display: block;
        margin-bottom: 4px;
        color: #aaa2ad;
        font-size: 8px;
    }

        .meida-mobile-info span i {
            color: #480680;
        }

    .meida-mobile-info strong {
        display: block;
        color: #49414e;
        font-size: 9px;
    }


/* MOBILE ACTIONS */

.meida-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding-top: 3px;
}

    .meida-mobile-actions form {
        margin: 0;
    }

.meida-mobile-action {
    width: 100%;
    min-height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 5px;
    border: 1px solid;
    border-radius: 9px;
    background: #fff;
    text-decoration: none;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s ease;
}

    .meida-mobile-action:hover {
        color: #fff;
    }


    /* MOBILE ACTION COLORS */

    .meida-mobile-action.warning {
        color: #9a6800;
        border-color: #e8d6a7;
    }

        .meida-mobile-action.warning:hover {
            background: #b98513;
        }

    .meida-mobile-action.dark {
        color: #4b454e;
        border-color: #ddd9df;
    }

        .meida-mobile-action.dark:hover {
            background: #403943;
        }

    .meida-mobile-action.success {
        color: #14753f;
        border-color: #b8dec6;
    }

        .meida-mobile-action.success:hover {
            background: #198754;
        }

    .meida-mobile-action.primary {
        color: #480680;
        border-color: rgba(72,6,128,.25);
    }

        .meida-mobile-action.primary:hover {
            background: #480680;
        }

    .meida-mobile-action.event {
        color: #4165b5;
        border-color: #cbd4ed;
    }

        .meida-mobile-action.event:hover {
            background: #4165b5;
        }

    .meida-mobile-action.video {
        color: #9b285b;
        border-color: #e6c1d2;
    }

        .meida-mobile-action.video:hover {
            background: #9b285b;
        }

    .meida-mobile-action.upgrade {
        color: #480680;
        border-color: rgba(72,6,128,.23);
        background: rgba(72,6,128,.035);
    }

        .meida-mobile-action.upgrade:hover {
            background: #480680;
        }

    .meida-mobile-action.danger {
        color: #b83232;
        border-color: #ebc8c8;
    }

        .meida-mobile-action.danger:hover {
            background: #c53c3c;
        }

    .meida-mobile-action.renewal {
        grid-column: 1 / -1;
    }


/* ========================================================= */
/* MOBILE EMPTY */
/* ========================================================= */

.meida-mobile-empty {
    padding: 55px 20px;
    text-align: center;
    border: 1px dashed #d9d1df;
    border-radius: 20px;
    background: #fff;
}

    .meida-mobile-empty > div {
        width: 62px;
        height: 62px;
        margin: 0 auto 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        color: #480680;
        font-size: 25px;
        background: rgba(72,6,128,.07);
    }

    .meida-mobile-empty h3 {
        margin-bottom: 8px;
        color: #352d39;
        font-size: 15px;
        font-weight: 800;
    }

    .meida-mobile-empty p {
        margin-bottom: 15px;
        color: #8d858f;
        font-size: 10px;
        line-height: 2;
    }

    .meida-mobile-empty > span {
        color: #480680;
        font-size: 10px;
        font-weight: 800;
    }

.meida-mobile-bottom-space {
    height: 100px;
}


/* ========================================================= */
/* TABLET / SMALL DESKTOP */
/* ========================================================= */

@media (max-width: 1199px) {

    .meida-contact-box {
        align-items: stretch;
        flex-direction: column;
    }

    .meida-contact-numbers {
        width: 100%;
        min-width: 0;
    }
}


/* ========================================================= */
/* MOBILE BREAKPOINT */
/* ========================================================= */

@media (max-width: 767px) {

    .desktop-only {
        display: none !important;
    }
}


/* ========================================================= */
/* VERY SMALL MOBILE */
/* ========================================================= */

@media (max-width: 390px) {

    .meida-mobile-phone-list {
        grid-template-columns: 1fr;
    }

    .meida-mobile-actions {
        grid-template-columns: 1fr 1fr;
    }

    .meida-status {
        font-size: 8px;
        padding: 7px 8px;
    }
}
/* =========================================================
   ADVERTISEMENT VIDEOS
   GLOBAL
   ========================================================= */

.advertisement-videos-desktop {
    width: 100%;
    margin: 55px 0;
    direction: rtl;
}

.advertisement-videos-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 25px;
}


/* =========================================================
   HEADER
   ========================================================= */

.advertisement-videos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.advertisement-videos-heading {
    text-align: right;
}

.advertisement-videos-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    padding: 6px 14px;
    border-radius: 30px;
    background: rgba(72, 6, 128, .08);
    color: #480680;
    font-size: 12px;
    font-weight: 700;
}

.advertisement-videos-heading h2 {
    margin: 0 0 8px;
    color: #1b1b1b;
    font-size: 30px;
    font-weight: 900;
}

.advertisement-videos-heading p {
    margin: 0;
    color: #777;
    font-size: 14px;
}

.advertisement-videos-count {
    min-width: 100px;
    padding: 15px 20px;
    border: 1px solid rgba(72, 6, 128, .12);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .06);
    text-align: center;
}

    .advertisement-videos-count span {
        display: block;
        margin-bottom: 5px;
        color: #480680;
        font-size: 22px;
    }

    .advertisement-videos-count strong {
        display: block;
        color: #222;
        font-size: 20px;
    }

    .advertisement-videos-count small {
        color: #777;
        font-size: 11px;
    }


/* =========================================================
   FEATURED VIDEO
   ========================================================= */

.advertisement-video-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    overflow: hidden;
    min-height: 390px;
    border-radius: 28px;
    background: linear-gradient( 135deg, #12051b, #2b0646 );
    box-shadow: 0 25px 65px rgba(40, 0, 70, .18);
}

.advertisement-video-featured-media {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    background: #0b0b0b;
}

    .advertisement-video-featured-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .advertisement-video-featured-media::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, transparent 40%, rgba(0, 0, 0, .35) );
        pointer-events: none;
    }

.advertisement-video-placeholder {
    width: 100%;
    height: 100%;
    min-height: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: radial-gradient( circle at center, #480680, #100514 );
    color: #fff;
}

    .advertisement-video-placeholder i {
        font-size: 75px;
    }

    .advertisement-video-placeholder span {
        font-size: 14px;
        opacity: .8;
    }


/* Play */

.advertisement-video-play {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 82px;
    height: 82px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    color: #fff;
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition: .3s ease;
}

    .advertisement-video-play i {
        font-size: 38px;
        margin-right: 3px;
    }

    .advertisement-video-play:hover {
        transform: translate(-50%, -50%) scale(1.1);
        background: #480680;
    }

.advertisement-video-featured-badge {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 6;
    padding: 8px 14px;
    border-radius: 30px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    font-size: 12px;
    backdrop-filter: blur(10px);
}


/* Featured content */

.advertisement-video-featured-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 45px;
    color: #fff;
}

.advertisement-video-number {
    margin-bottom: 15px;
    color: rgba(255,255,255,.35);
    font-size: 50px;
    font-weight: 900;
    line-height: 1;
}

.advertisement-video-featured-content h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 27px;
    line-height: 1.7;
    font-weight: 800;
}

.advertisement-video-featured-content p {
    margin: 0 0 28px;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    line-height: 2;
}

.advertisement-video-watch-button {
    width: fit-content;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    color: #fff;
    cursor: pointer;
    transition: .3s ease;
}

    .advertisement-video-watch-button:hover {
        background: #fff;
        color: #480680;
    }


/* =========================================================
   VIDEO GRID
   ========================================================= */

.advertisement-video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 25px;
}

.advertisement-video-card {
    overflow: hidden;
    border: 1px solid rgba(72, 6, 128, .08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0,0,0,.07);
    transition: .3s ease;
}

    .advertisement-video-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 45px rgba(72, 6, 128, .14);
    }

.advertisement-video-card-media {
    position: relative;
    display: block;
    width: 100%;
    height: 215px;
    padding: 0;
    border: 0;
    background: #111;
    overflow: hidden;
    cursor: pointer;
}

    .advertisement-video-card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .4s ease;
    }

.advertisement-video-card:hover
.advertisement-video-card-media img {
    transform: scale(1.05);
}

.advertisement-video-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #21052f, #480680 );
    color: #fff;
}

    .advertisement-video-card-placeholder i {
        font-size: 55px;
    }

.advertisement-video-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(72,6,128,.9);
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.25);
}

    .advertisement-video-card-play i {
        font-size: 25px;
    }

.advertisement-video-card-content {
    padding: 20px;
}

.advertisement-video-card-label {
    color: #480680;
    font-size: 11px;
    font-weight: 700;
}

.advertisement-video-card-content h3 {
    margin: 7px 0;
    color: #222;
    font-size: 17px;
    font-weight: 800;
}

.advertisement-video-card-content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0 0 15px;
    color: #777;
    font-size: 12px;
    line-height: 1.9;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.advertisement-video-card-link {
    padding: 0;
    border: 0;
    background: none;
    color: #480680;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .advertisement-video-card-link i {
        margin-right: 5px;
    }


/* =========================================================
   VIDEO MODAL
   ========================================================= */

.advertisement-video-modal {
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: #100514;
    color: #fff;
}

.advertisement-video-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    direction: rtl;
}

    .advertisement-video-modal-header span {
        display: block;
        margin-bottom: 4px;
        color: rgba(255,255,255,.5);
        font-size: 11px;
    }

    .advertisement-video-modal-header h2 {
        margin: 0;
        color: #fff;
        font-size: 18px;
        font-weight: 800;
    }

.advertisement-video-modal-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    color: #fff;
    cursor: pointer;
}

.advertisement-video-modal-body {
    padding: 0;
}

.advertisement-video-player-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

    .advertisement-video-player-wrapper iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

.advertisement-video-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 25px;
    direction: rtl;
}

    .advertisement-video-modal-footer span {
        color: rgba(255,255,255,.55);
        font-size: 11px;
    }

    .advertisement-video-modal-footer a {
        color: #fff;
        font-size: 12px;
        text-decoration: none;
    }

        .advertisement-video-modal-footer a:hover {
            color: #c78aff;
        }


/* =========================================================
   MOBILE
   ========================================================= */

.advertisement-videos-mobile {
    direction: rtl;
}

.mobile-videos-card {
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(72, 6, 128, .08);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(0,0,0,.06);
}

.mobile-videos-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}

.mobile-video-item {
    overflow: hidden;
    border: 1px solid rgba(72, 6, 128, .08);
    border-radius: 17px;
    background: #fafafa;
}

.mobile-video-thumbnail {
    position: relative;
    display: block;
    width: 100%;
    height: 205px;
    padding: 0;
    border: 0;
    background: #111;
    overflow: hidden;
    cursor: pointer;
}

    .mobile-video-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.mobile-video-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #21052f, #480680 );
    color: #fff;
}

    .mobile-video-placeholder i {
        font-size: 65px;
    }

.mobile-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(72,6,128,.92);
    color: #fff;
    box-shadow: 0 8px 25px rgba(0,0,0,.3);
}

    .mobile-video-play i {
        font-size: 28px;
    }

.mobile-video-content {
    padding: 17px;
}

.mobile-video-label {
    color: #480680;
    font-size: 10px;
    font-weight: 800;
}

.mobile-video-content h3 {
    margin: 6px 0 8px;
    color: #222;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 800;
}

.mobile-video-content p {
    margin: 0 0 13px;
    color: #777;
    font-size: 12px;
    line-height: 1.9;
}

.mobile-video-watch {
    width: 100%;
    padding: 10px;
    border: 1px solid #480680;
    border-radius: 11px;
    background: rgba(72,6,128,.05);
    color: #480680;
    font-size: 12px;
    font-weight: 700;
}

    .mobile-video-watch i {
        margin-left: 4px;
    }


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    .advertisement-video-featured {
        grid-template-columns: 1fr;
    }

    .advertisement-video-featured-content {
        padding: 30px;
    }

    .advertisement-video-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .advertisement-videos-desktop {
        display: none !important;
    }

    .advertisement-videos-mobile {
        display: block;
    }

    .advertisement-video-modal {
        margin: 10px;
        border-radius: 18px;
    }

    .advertisement-video-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

        .advertisement-video-modal-footer a {
            text-align: center;
            padding: 10px;
            border-radius: 10px;
            background: #480680;
        }
}
/* =========================================================
   Advertisement Videos Management
   ========================================================= */

.video-management-page {
    max-width: 1400px;
    margin: 80px auto 60px;
    padding: 0 25px;
    direction: rtl;
}


/* =========================================================
   Header
   ========================================================= */

.video-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 35px;
    margin-bottom: 25px;
    border-radius: 24px;
    background: linear-gradient(135deg, #480680 0%, #21002f 100%);
    color: #fff;
    box-shadow: 0 18px 45px rgba(72, 6, 128, .18);
}

.video-header-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.video-header-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    font-size: 30px;
    backdrop-filter: blur(10px);
}

.video-header-overline {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    opacity: .75;
}

.video-page-header h1 {
    color: whitesmoke;
    margin: 0;
    font-size: 30px;
    font-weight: 800;
}

.video-page-header p {
    margin: 8px 0 0;
    opacity: .8;
}

.video-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 12px;
    transition: .25s;
}

    .video-back-button:hover {
        color: #fff;
        background: rgba(255,255,255,.1);
    }


/* =========================================================
   Advertisement Info
   ========================================================= */

.advertisement-info-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 25px;
    margin-bottom: 25px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 8px 30px rgba(0,0,0,.04);
}

.advertisement-info-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.advertisement-mini-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(72,6,128,.08);
    color: #480680;
    font-size: 22px;
}

.advertisement-info-main span,
.advertisement-code span {
    display: block;
    color: #888;
    font-size: 12px;
    margin-bottom: 4px;
}

.advertisement-info-main strong,
.advertisement-code strong {
    color: #222;
}

.advertisement-code {
    text-align: left;
}


/* =========================================================
   Statistics
   ========================================================= */

.video-statistics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 35px;
}

.video-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 8px 25px rgba(0,0,0,.035);
}

.video-stat-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(72,6,128,.08);
    color: #480680;
    font-size: 21px;
}

    .video-stat-icon.active {
        color: #198754;
        background: rgba(25,135,84,.1);
    }

    .video-stat-icon.inactive {
        color: #777;
        background: rgba(0,0,0,.06);
    }

.video-stat-card span {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 4px;
}

.video-stat-card strong {
    font-size: 24px;
    color: #222;
}


/* =========================================================
   Toolbar
   ========================================================= */

.video-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.toolbar-label {
    color: #480680;
    font-size: 13px;
    font-weight: 700;
}

.video-toolbar h2 {
    margin: 4px 0;
    font-size: 24px;
    font-weight: 800;
}

.video-toolbar p {
    margin: 0;
    color: #888;
    font-size: 14px;
}

.add-video-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 22px;
    border: 0;
    border-radius: 13px;
    background: #480680;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(72,6,128,.2);
    transition: .25s;
}

    .add-video-button:hover {
        transform: translateY(-2px);
        background: #5d0a9f;
        color: #fff;
    }


/* =========================================================
   Video List
   ========================================================= */

.video-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.video-card {
    display: flex;
    min-height: 245px;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,.045);
    transition: .25s;
}

    .video-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(0,0,0,.08);
    }


/* =========================================================
   Thumbnail
   ========================================================= */

.video-thumbnail {
    position: relative;
    flex: 0 0 38%;
    min-height: 245px;
    overflow: hidden;
    background: #180021;
}

    .video-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.video-thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(145deg, #480680, #180021);
}

    .video-thumbnail-placeholder i {
        font-size: 50px;
        margin-bottom: 10px;
    }

.video-order {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 9px;
    border-radius: 8px;
    color: #fff;
    background: rgba(0,0,0,.6);
    font-size: 12px;
}


/* =========================================================
   Video Content
   ========================================================= */

.video-content {
    flex: 1;
    padding: 20px;
}

.video-card-top {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.video-platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #777;
    font-size: 12px;
}

    .video-platform i {
        color: #480680;
    }

.video-card h3 {
    margin: 7px 0 10px;
    font-size: 19px;
    font-weight: 800;
    color: #222;
}

.video-status {
    height: fit-content;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

    .video-status.active {
        color: #087443;
        background: #e8f7ef;
    }

    .video-status.inactive {
        color: #777;
        background: #f1f1f1;
    }

.video-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
    margin: 0 0 15px;
    color: #777;
    font-size: 13px;
    line-height: 1.8;
}

.video-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 17px;
    color: #999;
    font-size: 11px;
}

    .video-meta span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

.video-actions {
    display: flex;
    gap: 8px;
}

.video-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .2s;
}

    .video-action.watch {
        color: #fff;
        background: #480680;
    }

        .video-action.watch:hover {
            color: #fff;
            background: #5d0a9f;
        }

    .video-action.secondary {
        color: #555;
        border: 1px solid #ddd;
    }

        .video-action.secondary:hover {
            color: #480680;
            border-color: #480680;
        }


/* =========================================================
   Empty State
   ========================================================= */

.video-empty-state {
    padding: 70px 25px;
    text-align: center;
    border-radius: 22px;
    background: #fff;
    border: 1px dashed #d9d9d9;
}

.empty-icon {
    width: 85px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 25px;
    background: rgba(72,6,128,.08);
    color: #480680;
    font-size: 36px;
}

.video-empty-state h3 {
    margin-bottom: 10px;
    font-weight: 800;
}

.video-empty-state p {
    max-width: 550px;
    margin: 0 auto 25px;
    color: #888;
    line-height: 1.9;
}


/* =========================================================
   Modal
   ========================================================= */

.video-modal {
    overflow: hidden;
    border: 0;
    border-radius: 22px;
}

    .video-modal .modal-header {
        padding: 22px 25px;
        border-bottom: 1px solid #eee;
    }

.modal-title-wrapper {
    display: flex;
    align-items: center;
    gap: 13px;
}

.modal-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    background: #480680;
    font-size: 20px;
}

.modal-title-wrapper span {
    display: block;
    color: #999;
    font-size: 11px;
}

.modal-title-wrapper h2 {
    margin: 2px 0 0;
    font-size: 21px;
    font-weight: 800;
}

.video-modal .modal-body {
    padding: 25px;
}

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-size: 13px;
        font-weight: 700;
    }

        .form-group label span {
            color: #dc3545;
        }

.video-input {
    min-height: 48px;
    border: 1px solid #ddd;
    border-radius: 11px;
    box-shadow: none !important;
}

    .video-input:focus {
        border-color: #480680;
    }

textarea.video-input {
    min-height: 110px;
}

.form-group small {
    display: block;
    margin-top: 6px;
    color: #999;
    font-size: 11px;
}

.url-input-wrapper {
    position: relative;
}

    .url-input-wrapper i {
        position: absolute;
        top: 50%;
        right: 15px;
        z-index: 2;
        transform: translateY(-50%);
        color: #480680;
        font-size: 18px;
    }

    .url-input-wrapper input {
        padding-right: 45px;
    }

.video-modal .modal-footer {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 25px;
    border-top: 1px solid #eee;
}

.modal-cancel,
.modal-submit {
    padding: 11px 20px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.modal-cancel {
    border: 1px solid #ddd;
    background: #fff;
    color: #666;
}

.modal-submit {
    border: 0;
    background: #480680;
    color: #fff;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 992px) {

    .video-list {
        grid-template-columns: 1fr;
    }

    .video-statistics {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 768px) {

    .video-management-page {
        margin-top: 25px;
        padding: 0 14px;
    }

    .video-page-header {
        flex-direction: column;
        align-items: stretch;
        padding: 22px;
        border-radius: 18px;
    }

    .video-header-content {
        align-items: flex-start;
    }

    .video-header-icon {
        width: 55px;
        height: 55px;
        font-size: 24px;
    }

    .video-page-header h1 {
        font-size: 23px;
    }

    .video-back-button {
        justify-content: center;
    }

    .advertisement-info-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .advertisement-code {
        width: 100%;
        padding-top: 12px;
        border-top: 1px solid #eee;
        text-align: right;
    }

    .video-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .add-video-button {
        width: 100%;
    }

    .video-card {
        flex-direction: column;
    }

    .video-thumbnail {
        flex: none;
        width: 100%;
        height: 210px;
        min-height: 210px;
    }

    .video-content {
        padding: 18px;
    }

    .video-card-top {
        align-items: flex-start;
    }

    .video-actions {
        flex-direction: column;
    }

    .video-action {
        width: 100%;
    }
}


@media (max-width: 480px) {

    .video-page-header {
        padding: 18px;
    }

    .video-header-content {
        gap: 12px;
    }

    .video-header-icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
    }

    .video-page-header h1 {
        font-size: 20px;
    }

    .advertisement-info-card {
        padding: 17px;
    }

    .video-stat-card {
        padding: 17px;
    }

        .video-stat-card strong {
            font-size: 21px;
        }

    .video-modal .modal-body {
        padding: 18px;
    }
}
.video-action.edit {
    border: 1px solid #480680;
    background: rgba(72, 6, 128, .06);
    color: #480680;
    cursor: pointer;
}

    .video-action.edit:hover {
        background: #480680;
        color: #fff;
    }
/* =========================================================
   MEIDASHOW — ADVERTISEMENT ADDONS
========================================================= */

.addon-page {
    min-height: 100vh;
    background: radial-gradient(circle at 85% 8%, rgba(104, 43, 153, .07), transparent 28%), radial-gradient(circle at 10% 35%, rgba(104, 43, 153, .035), transparent 25%), #faf9fb;
    color: #28152f;
}


/* =========================================================
   HERO
========================================================= */

.addon-hero {
    padding: 58px 0 42px;
    background: linear-gradient(135deg, #fff 0%, #faf7fc 100%);
    border-bottom: 1px solid #eee8f1;
}

.addon-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
}

.addon-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    margin-bottom: 12px;
    border-radius: 100px;
    background: #f1e9f6;
    color: #63317f;
    font-size: 11px;
    font-weight: 800;
}

.addon-hero h1 {
    margin: 0;
    color: #291631;
    font-size: 34px;
    line-height: 1.5;
    font-weight: 900;
}

    .addon-hero h1 strong {
        color: #59247b;
    }

.addon-hero p {
    max-width: 700px;
    margin: 12px 0 0;
    color: #817487;
    font-size: 14px;
    line-height: 2;
}

    .addon-hero p span {
        color: #3f234c;
        font-weight: 800;
    }

.addon-hero-badge {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 210px;
    padding: 16px 18px;
    border: 1px solid #ebe2f0;
    border-radius: 18px;
    background: rgba(255,255,255,.8);
    box-shadow: 0 15px 40px rgba(54, 25, 69, .07);
}

.addon-hero-badge-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #3d0d62;
    color: #fff;
    font-size: 19px;
}

.addon-hero-badge strong {
    display: block;
    color: #35203d;
    font-size: 13px;
    font-weight: 900;
}

.addon-hero-badge span {
    display: block;
    margin-top: 4px;
    color: #95889a;
    font-size: 10px;
}


/* =========================================================
   CONTENT
========================================================= */

.addon-content {
    padding: 45px 0 80px;
}

.addon-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 25px;
}

    .addon-section-heading > div:first-child > span {
        color: #988b9d;
        font-size: 11px;
        font-weight: 800;
    }

    .addon-section-heading h2 {
        margin: 5px 0 0;
        color: #32183e;
        font-size: 21px;
        font-weight: 900;
    }

.addon-section-count {
    min-width: 105px;
    padding: 11px 15px;
    border: 1px solid #ebe3ef;
    border-radius: 14px;
    background: #fff;
    text-align: center;
}

    .addon-section-count strong {
        display: block;
        color: #4b1769;
        font-size: 21px;
        line-height: 1;
    }

    .addon-section-count span {
        display: block;
        margin-top: 5px;
        color: #95889b;
        font-size: 10px;
    }


/* =========================================================
   SERVICE CARD
========================================================= */

.addon-services {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.addon-service-card {
    overflow: hidden;
    border: 1px solid #ebe5ee;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 10px 35px rgba(52, 27, 65, .055);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

    .addon-service-card:hover {
        border-color: #ded0e5;
        box-shadow: 0 18px 50px rgba(52, 27, 65, .09);
    }

    .addon-service-card.is-open {
        border-color: #d9c5e3;
        box-shadow: 0 20px 55px rgba(52, 27, 65, .11);
    }


/* =========================================================
   SERVICE HEADER
========================================================= */

.addon-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 20px 22px;
}

.addon-service-identity {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.addon-service-icon {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: #f4eff7;
    border: 1px solid #ebe1ef;
}

    .addon-service-icon img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.addon-service-title {
    min-width: 0;
}

.addon-service-label {
    margin-bottom: 4px;
    color: #9a8ba0;
    font-size: 10px;
    font-weight: 700;
}

.addon-service-title h3 {
    margin: 0;
    color: #32193d;
    font-size: 18px;
    font-weight: 900;
}

.addon-service-title p {
    max-width: 750px;
    margin: 5px 0 0;
    color: #827486;
    font-size: 12px;
    line-height: 1.9;
}


/* =========================================================
   TOGGLE
========================================================= */

.addon-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 145px;
    padding: 12px 17px;
    border: 1px solid #e6dce9;
    border-radius: 12px;
    background: #faf8fb;
    color: #4b2560;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: all .25s ease;
}

    .addon-toggle i {
        font-size: 10px;
        transition: transform .3s ease;
    }

.addon-service-card.is-open .addon-toggle {
    background: #3c0d61;
    border-color: #3c0d61;
    color: #fff;
}

    .addon-service-card.is-open .addon-toggle i {
        transform: rotate(180deg);
    }


/* =========================================================
   OPTIONS WRAPPER
========================================================= */

.addon-options-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4,0,.2,1);
}

.addon-options-inner {
    padding: 25px;
    background: linear-gradient(180deg, #fbf9fc 0%, #fff 100%);
    border-top: 1px solid #eee8f1;
}

.addon-options-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .addon-options-heading span:first-child {
        color: #97899c;
        font-size: 10px;
        font-weight: 700;
    }

    .addon-options-heading h4 {
        margin: 4px 0 0;
        color: #382040;
        font-size: 14px;
        font-weight: 900;
    }

.addon-options-help {
    padding: 6px 10px;
    border-radius: 8px;
    background: #f1ebf4;
    color: #816a8d;
    font-size: 10px;
}


/* =========================================================
   OPTION
========================================================= */

.addon-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.addon-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 92px;
    padding: 15px;
    border: 1px solid #e9e3eb;
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

    .addon-option:hover {
        border-color: #d6c5df;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(54, 25, 69, .07);
    }

    .addon-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .addon-option.selected {
        border-color: #67328a;
        background: #fcf9fe;
        box-shadow: 0 10px 30px rgba(83, 39, 111, .11);
    }


/* RADIO */

.addon-option-radio {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #cfc4d3;
    border-radius: 50%;
    transition: all .2s ease;
}

    .addon-option-radio span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: transparent;
        transition: all .2s ease;
    }

.addon-option.selected .addon-option-radio {
    border-color: #5b247c;
}

    .addon-option.selected .addon-option-radio span {
        background: #5b247c;
    }


/* OPTION CONTENT */

.addon-option-content {
    flex: 1;
    min-width: 0;
}

.addon-option-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .addon-option-top strong {
        color: #342039;
        font-size: 13px;
        font-weight: 900;
    }

.addon-discount {
    padding: 3px 7px;
    border-radius: 6px;
    background: #fceef3;
    color: #b64269;
    font-size: 9px;
    font-weight: 800;
}

.addon-option-description {
    display: block;
    margin-top: 5px;
    color: #918594;
    font-size: 10px;
    line-height: 1.8;
}

.addon-option-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.addon-old-price {
    color: #aaa0ad;
    font-size: 9px;
    text-decoration: line-through;
}

.addon-final-price {
    color: #4d1c68;
    font-size: 15px;
    font-weight: 900;
}

    .addon-final-price small {
        font-size: 9px;
        font-weight: 700;
    }

.addon-option-arrow {
    color: #b7acba;
    font-size: 9px;
    transition: transform .2s ease;
}

.addon-option:hover .addon-option-arrow {
    transform: translateX(-3px);
    color: #63307e;
}


/* =========================================================
   FOOTER
========================================================= */

.addon-service-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eee8f1;
}

.addon-selection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #96899b;
    font-size: 10px;
}

.addon-status-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1edf3;
    color: #89798f;
}

.addon-selection-status.selected {
    color: #5b3470;
}

    .addon-selection-status.selected .addon-status-icon {
        background: #eee4f3;
        color: #5a247b;
    }


/* =========================================================
   BUY BUTTON
========================================================= */

.addon-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 185px;
    padding: 13px 18px;
    border: 0;
    border-radius: 12px;
    background: #3c0d61;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    transition: all .25s ease;
}

    .addon-buy-btn:hover:not(:disabled) {
        background: #2d084b;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(60, 13, 97, .2);
    }

    .addon-buy-btn:disabled {
        background: #d8d1db;
        color: #958b98;
        cursor: not-allowed;
    }

    .addon-buy-btn i {
        font-size: 11px;
    }

    .addon-buy-btn.loading {
        opacity: .75;
    }


/* =========================================================
   TRUST
========================================================= */

.addon-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 28px;
    border: 1px solid #ebe5ee;
    border-radius: 18px;
    background: #fff;
}

.addon-trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px 20px;
}

    .addon-trust-item + .addon-trust-item {
        border-right: 1px solid #eee8f1;
    }

    .addon-trust-item > span {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #f2edf5;
        color: #5c287a;
    }

    .addon-trust-item strong {
        display: block;
        color: #47334d;
        font-size: 11px;
        font-weight: 900;
    }

    .addon-trust-item small {
        display: block;
        margin-top: 3px;
        color: #998e9d;
        font-size: 9px;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .addon-hero h1 {
        font-size: 29px;
    }

    .addon-options {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767px) {

    .addon-hero {
        padding: 35px 0 30px;
    }

    .addon-hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .addon-hero-badge {
        width: 100%;
    }

    .addon-hero h1 {
        font-size: 25px;
    }

    .addon-hero p {
        font-size: 12px;
    }

    .addon-section-heading {
        align-items: flex-start;
        gap: 15px;
    }

        .addon-section-heading h2 {
            font-size: 17px;
            line-height: 1.7;
        }

    .addon-section-count {
        min-width: 75px;
    }

    .addon-service-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .addon-service-identity {
        width: 100%;
    }

    .addon-toggle {
        width: 100%;
    }

    .addon-options-inner {
        padding: 18px;
    }

    .addon-options-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .addon-service-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .addon-buy-btn {
        width: 100%;
    }

    .addon-trust {
        grid-template-columns: 1fr;
    }

    .addon-trust-item + .addon-trust-item {
        border-right: 0;
        border-top: 1px solid #eee8f1;
    }
}


@media (max-width: 480px) {

    .addon-service-header {
        padding: 16px;
    }

    .addon-service-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        border-radius: 15px;
    }

    .addon-service-title h3 {
        font-size: 15px;
    }

    .addon-service-title p {
        font-size: 10px;
    }

    .addon-option {
        padding: 12px;
    }

    .addon-option-top strong {
        font-size: 12px;
    }
}
/* =========================================================
   MEIDASHOW PREMIUM MEGA MENU
========================================================= */

.nav-mega-item {
    position: static !important;
}

.nav-mega-trigger {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    color: #3c0e64;
    font-size: 15px;
    transition: all .25s ease;
    box-shadow: 0 0 0;
    background-color: inherit;
}

    .nav-mega-trigger:hover {
        color: #3b0d63;
    }

.nav-mega-trigger-icon {
    width: 31px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f3eef8;
    color: #3b0d63;
    transition: all .25s ease;
}

.nav-mega-trigger:hover .nav-mega-trigger-icon {
    background: #3b0d63;
    color: #fff;
}

.nav-mega-arrow {
    font-size: 11px;
    transition: transform .25s ease;
}

.nav-mega-item.is-open .nav-mega-arrow {
    transform: rotate(180deg);
}


/* =========================================================
   MENU
========================================================= */

.mega-menu {
    position: absolute;
    top: 70%;
    right: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
    pointer-events: none;
}

.nav-mega-item:hover .mega-menu,
.nav-mega-item.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}


/* =========================================================
   INNER
========================================================= */

.mega-menu-inner {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    background: rgba(255,255,255,.98);
    border: 1px solid #ece7f1;
    border-radius: 22px;
    box-shadow: 0 25px 70px rgba(42, 18, 60, .16), 0 8px 25px rgba(42, 18, 60, .08);
    backdrop-filter: blur(18px);
    max-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* =========================================================
   HEADER
========================================================= */

.mega-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    background: linear-gradient( 135deg, #faf7fc 0%, #fff 65% );
    border-bottom: 1px solid #eee9f2;
}

.mega-menu-eyebrow {
    display: block;
    color: #8b7798;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
}

.mega-menu-header h3 {
    margin: 0 0 5px;
    color: #2f163f;
    font-size: 21px;
    font-weight: 900;
}

.mega-menu-header p {
    margin: 0;
    color: #817487;
    font-size: 13px;
}

.mega-menu-count {
    min-width: 90px;
    text-align: center;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f3eef8;
}

    .mega-menu-count strong {
        display: block;
        color: #3b0d63;
        font-size: 23px;
        line-height: 1;
    }

    .mega-menu-count span {
        display: block;
        margin-top: 5px;
        color: #806c8c;
        font-size: 11px;
    }


/* =========================================================
   CONTENT
========================================================= */

.mega-menu-content {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    min-height: 0;
    flex: 1;
    overflow: hidden;
}


/* =========================================================
   CATEGORIES
========================================================= */

.mega-categories {
    padding: 20px;
    background: #fbf9fc;
    border-left: 1px solid #eee9f2;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d8c9df transparent;
}

.mega-section-title {
    padding: 0 10px 12px;
    color: #847489;
    font-size: 12px;
    font-weight: 800;
}

.mega-category-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mega-category-item {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 10px;
    border-radius: 13px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    transition: all .22s ease;
}

    .mega-category-item:hover {
        background: #f0e9f5;
    }

    .mega-category-item.active {
        background: #fff;
        box-shadow: 0 7px 20px rgba(59,13,99,.08);
    }

.mega-category-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: color-mix( in srgb, var(--category-color, #3b0d63) 12%, white );
    color: var(--category-color, #3b0d63);
}

.mega-category-info {
    flex: 1;
    min-width: 0;
}

    .mega-category-info strong {
        display: block;
        color: #302437;
        font-size: 13px;
        font-weight: 800;
    }

    .mega-category-info small {
        display: block;
        margin-top: 3px;
        color: #9a8ea0;
        font-size: 10px;
    }

.mega-category-arrow {
    color: #aaa0af;
    font-size: 10px;
}


/* =========================================================
   JOB CATEGORIES
========================================================= */

.mega-jobs {
    height: 300px;
    padding: 28px 30px;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d8c9df transparent;
}

.mega-jobs-panel {
    display: none;
    animation: megaFade .25s ease;
}

    .mega-jobs-panel.active {
        display: block;
    }

@keyframes megaFade {

    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mega-jobs-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .mega-jobs-header span:first-child {
        color: #95899a;
        font-size: 11px;
    }

    .mega-jobs-header h4 {
        margin: 4px 0 0;
        color: #2f163f;
        font-size: 20px;
        font-weight: 900;
    }

.mega-jobs-count {
    padding: 6px 10px;
    background: #f6f2f8;
    color: #765c85;
    border-radius: 8px;
    font-size: 11px;
}


/* =========================================================
   JOB GRID
========================================================= */

.mega-job-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
}

.mega-job-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid #eeeaf1;
    border-radius: 12px;
    color: #44374a;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

    .mega-job-item:hover {
        background: #faf7fc;
        border-color: #d9cbe2;
        transform: translateY(-2px);
    }

.mega-job-icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f3eef8;
    color: #3b0d63;
    flex: 0 0 30px;
}

.mega-job-item span:nth-child(2) {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
}

.mega-job-item > i {
    color: #b3a9b7;
    font-size: 9px;
}


/* =========================================================
   VIEW ALL
========================================================= */

.mega-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding: 13px 15px;
    border-radius: 11px;
    background: #3b0d63;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all .2s ease;
}

    .mega-view-all:hover {
        background: #2d084c;
        color: #fff;
    }

    .mega-view-all i {
        font-size: 11px;
    }
.mega-categories::-webkit-scrollbar {
    width: 6px;
}

.mega-categories::-webkit-scrollbar-track {
    background: transparent;
}

.mega-categories::-webkit-scrollbar-thumb {
    background: #d8c9df;
    border-radius: 20px;
}

    .mega-categories::-webkit-scrollbar-thumb:hover {
        background: #bba5c8;
    }

.mega-jobs::-webkit-scrollbar {
    width: 6px;
}

.mega-jobs::-webkit-scrollbar-track {
    background: transparent;
}

.mega-jobs::-webkit-scrollbar-thumb {
    background: #d8c9df;
    border-radius: 20px;
}

    .mega-jobs::-webkit-scrollbar-thumb:hover {
        background: #bba5c8;
    }
@media (max-width: 1100px) {

    .mega-menu-inner {
        width: min(1000px, calc(100% - 30px));
    }

    .mega-menu-content {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .mega-job-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-height: 800px) {

    .mega-menu-inner {
        max-height: calc(100vh - 95px);
    }

    .mega-menu-header {
        padding: 18px 25px;
    }

    .mega-jobs {
        padding: 22px 25px;
    }

    .mega-categories {
        padding: 15px;
    }

    .mega-jobs-header {
        margin-bottom: 16px;
    }
}
/* =========================================================
           SEARCH RESULT PAGE
           ========================================================= */

.ms-search-page {
    --ms-primary: #6d28d9;
    --ms-primary-dark: #4c1d95;
    --ms-primary-soft: #f5f3ff;
    --ms-text: #18181b;
    --ms-muted: #71717a;
    --ms-border: #e4e4e7;
    --ms-surface: #ffffff;
    --ms-background: #fafafa;
    direction: rtl;
    background: radial-gradient( circle at 85% 0%, rgba(109, 40, 217, .08), transparent 30% ), radial-gradient( circle at 10% 20%, rgba(124, 58, 237, .05), transparent 25% ), var(--ms-background);
    min-height: 70vh;
    padding: 48px 0 80px;
}


/* =========================================================
           HERO
           ========================================================= */

.ms-search-hero {
    position: relative;
    overflow: hidden;
    max-width: 1180px;
    margin: 0 auto 42px;
    padding: 42px 46px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(228,228,231,.9);
    border-radius: 28px;
    box-shadow: 0 18px 50px rgba(24,24,27,.06), 0 2px 8px rgba(24,24,27,.03);
    backdrop-filter: blur(14px);
}


    .ms-search-hero::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        top: -150px;
        left: -80px;
        background: rgba(109,40,217,.08);
        border-radius: 50%;
        filter: blur(2px);
    }


.ms-search-hero-content {
    position: relative;
    z-index: 2;
}


.ms-search-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ms-primary);
    background: var(--ms-primary-soft);
    border: 1px solid rgba(109,40,217,.12);
    padding: 7px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}


.ms-search-eyebrow-icon {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ms-primary);
    box-shadow: 0 0 0 4px rgba(109,40,217,.10);
}


.ms-search-title {
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--ms-text);
}


    .ms-search-title span {
        color: var(--ms-primary);
    }


.ms-search-description {
    margin: 14px 0 0;
    color: var(--ms-muted);
    font-size: 15px;
    line-height: 2;
}


.ms-search-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}


.ms-search-query {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 12px;
    padding: 10px 14px;
    color: var(--ms-text);
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,.03);
}


.ms-search-query-label {
    color: var(--ms-muted);
    font-size: 12px;
}


.ms-search-query-value {
    font-weight: 800;
    color: var(--ms-primary);
}


.ms-result-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #18181b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
           RESULTS HEADER
           ========================================================= */

.ms-results-wrapper {
    max-width: 1180px;
    margin: 0 auto;
}


.ms-results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 22px;
}


.ms-results-heading {
    margin: 0;
    color: var(--ms-text);
    font-size: 21px;
    font-weight: 900;
}


.ms-results-subheading {
    margin: 6px 0 0;
    color: var(--ms-muted);
    font-size: 13px;
}


/* =========================================================
           RESULT GRID
           ========================================================= */

.ms-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
           RESULT CARD
           ========================================================= */

.ms-result-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--ms-surface);
    border: 1px solid var(--ms-border);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(24,24,27,.045);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}


    .ms-result-card:hover {
        transform: translateY(-6px);
        border-color: rgba(109,40,217,.22);
        box-shadow: 0 20px 50px rgba(24,24,27,.10), 0 5px 15px rgba(109,40,217,.06);
    }


/* =========================================================
           CARD TOP
           ========================================================= */

.ms-result-card-top {
    position: relative;
    padding: 22px 22px 0;
}


.ms-result-index {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(228,228,231,.9);
    color: var(--ms-muted);
    font-size: 12px;
    font-weight: 900;
    z-index: 3;
}


.ms-result-logo-box {
    position: relative;
    width: 100%;
    height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, #fafafa, #f4f4f5 );
    border-radius: 17px;
    overflow: hidden;
    border: 1px solid #eeeeef;
}


    .ms-result-logo-box::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent 30%, rgba(255,255,255,.55), transparent 70% );
        transform: translateX(100%);
        transition: transform .7s ease;
    }


.ms-result-card:hover
.ms-result-logo-box::after {
    transform: translateX(-100%);
}


.ms-result-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 28px;
    transition: transform .35s ease;
}


.ms-result-card:hover
.ms-result-logo {
    transform: scale(1.04);
}


.ms-result-category {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 3;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(24,24,27,.84);
    color: #fff;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}


/* =========================================================
           CARD BODY
           ========================================================= */

.ms-result-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}


.ms-result-title {
    margin: 0;
    color: var(--ms-text);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.6;
    transition: color .2s ease;
}


.ms-result-card:hover
.ms-result-title {
    color: var(--ms-primary);
}


.ms-result-description {
    margin: 10px 0 0;
    color: var(--ms-muted);
    font-size: 13px;
    line-height: 2;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 78px;
}


/* =========================================================
           CARD FOOTER
           ========================================================= */

.ms-result-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 20px;
}


.ms-view-label {
    color: #a1a1aa;
    font-size: 11px;
    font-weight: 700;
}


.ms-view-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 43px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--ms-primary);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(109,40,217,.20);
    transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}


    .ms-view-button:hover {
        background: var(--ms-primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(109,40,217,.28);
    }


.ms-view-arrow {
    transition: transform .2s ease;
}


.ms-view-button:hover .ms-view-arrow {
    transform: translateX(-4px);
}


/* =========================================================
           EMPTY STATE
           ========================================================= */

.ms-empty-state {
    max-width: 720px;
    margin: 50px auto 0;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 28px;
    padding: 60px 35px;
    box-shadow: 0 15px 45px rgba(24,24,27,.06);
}


.ms-empty-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: var(--ms-primary-soft);
    color: var(--ms-primary);
    font-size: 30px;
    border: 1px solid rgba(109,40,217,.10);
}


.ms-empty-title {
    margin: 0;
    color: var(--ms-text);
    font-size: 25px;
    font-weight: 900;
}


.ms-empty-description {
    max-width: 480px;
    margin: 12px auto 0;
    color: var(--ms-muted);
    font-size: 14px;
    line-height: 2;
}


.ms-empty-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 13px;
    background: #18181b;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 800;
    transition: transform .2s ease, background .2s ease;
}


    .ms-empty-button:hover {
        background: var(--ms-primary);
        transform: translateY(-2px);
    }


/* =========================================================
           RESPONSIVE
           ========================================================= */

@media (max-width: 991px) {

    .ms-search-page {
        padding: 32px 0 60px;
    }

    .ms-search-hero {
        margin: 0 20px 32px;
        padding: 32px 28px;
        border-radius: 24px;
    }

    .ms-results-wrapper {
        margin: 0 20px;
    }

    .ms-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .ms-search-page {
        padding-top: 24px;
    }


    .ms-search-hero {
        margin: 0 14px 28px;
        padding: 27px 21px;
        border-radius: 21px;
    }


    .ms-search-eyebrow {
        font-size: 11px;
    }


    .ms-search-title {
        font-size: 28px;
        letter-spacing: -.5px;
    }


    .ms-search-description {
        font-size: 13px;
    }


    .ms-search-meta {
        align-items: stretch;
        flex-direction: column;
    }


    .ms-search-query,
    .ms-result-count {
        width: 100%;
        justify-content: space-between;
    }


    .ms-results-wrapper {
        margin: 0 14px;
    }


    .ms-results-header {
        display: block;
        margin-bottom: 18px;
    }


    .ms-results-heading {
        font-size: 19px;
    }


    .ms-results-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }


    .ms-result-card {
        border-radius: 19px;
    }


    .ms-result-card-top {
        padding: 14px 14px 0;
    }


    .ms-result-logo-box {
        height: 205px;
        border-radius: 15px;
    }


    .ms-result-card-body {
        padding: 18px;
    }


    .ms-result-title {
        font-size: 18px;
    }


    .ms-result-description {
        min-height: auto;
        -webkit-line-clamp: 3;
    }


    .ms-result-card-footer {
        margin-top: 16px;
    }


    .ms-view-button {
        min-height: 44px;
        flex: 1;
    }


    .ms-empty-state {
        margin: 30px 14px 0;
        padding: 45px 22px;
        border-radius: 22px;
    }
}


@media (prefers-reduced-motion: reduce) {

    .ms-result-card,
    .ms-result-logo,
    .ms-view-button,
    .ms-view-arrow {
        transition: none !important;
    }
}

/* =========================================================
   MEIDASHOW ABOUT US
========================================================= */

.meida-about-page {
    --brand: #5e2d94;
    --brand-dark: #482171;
    --brand-light: #f3eef8;
    --brand-soft: #faf7fc;
    --text-main: #24202a;
    --text-secondary: #716a78;
    --border: #ebe6ef;
    direction: rtl;
    color: var(--text-main);
    overflow: hidden;
    background: #fff;
}


    /* =========================================================
   COMMON
========================================================= */

    .meida-about-page .container {
        position: relative;
    }

.meida-about-section-heading {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

.meida-about-section-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 13px;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(94,45,148,.08);
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
}

.meida-about-section-heading h2 {
    margin: 0 0 14px;
    font-size: clamp(25px, 3vw, 36px);
    line-height: 1.55;
    font-weight: 850;
}

.meida-about-section-heading p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 2;
}

.meida-about-section-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 42px;
}


/* =========================================================
   BUTTONS
========================================================= */

.meida-about-primary-btn,
.meida-about-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.meida-about-primary-btn {
    background: var(--brand);
    color: #fff;
    box-shadow: 0 10px 25px rgba(94,45,148,.20);
}

    .meida-about-primary-btn:hover {
        background: var(--brand-dark);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(94,45,148,.25);
    }

.meida-about-secondary-btn {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-main);
}

    .meida-about-secondary-btn:hover {
        border-color: var(--brand);
        background: var(--brand-soft);
        color: var(--brand);
        transform: translateY(-2px);
    }


/* =========================================================
   HERO
========================================================= */

.meida-about-hero {
    position: relative;
    padding: 75px 0 90px;
    background: radial-gradient( circle at 10% 20%, rgba(94,45,148,.08), transparent 35% ), linear-gradient( 180deg, #faf8fc 0%, #fff 100% );
}

.meida-about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 70px;
    direction: rtl;
}

.meida-about-hero-content {
    position: relative;
    z-index: 2;
}

.meida-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(94,45,148,.08);
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
}

.meida-about-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
}

.meida-about-hero h1 {
    max-width: 650px;
    margin: 0 0 20px;
    font-size: clamp(35px, 5vw, 58px);
    line-height: 1.45;
    font-weight: 900;
    letter-spacing: -1px;
}

    .meida-about-hero h1 span {
        color: var(--brand);
        display: inline-block;
    }

.meida-about-hero-text {
    max-width: 600px;
    margin-bottom: 25px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 2.2;
}

.meida-about-hero-stat {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(255,255,255,.8);
    box-shadow: 0 10px 35px rgba(40,20,60,.05);
}

.meida-about-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 13px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 19px;
}

.meida-about-hero-stat strong {
    display: block;
    color: var(--brand);
    font-size: 20px;
    font-weight: 900;
}

.meida-about-hero-stat span {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 10px;
}

.meida-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.meida-about-hero-visual {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.meida-about-hero-glow {
    position: absolute;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(94,45,148,.18), rgba(94,45,148,.02) 65%, transparent 70% );
    filter: blur(2px);
}

.meida-about-hero-image-card {
    position: relative;
    z-index: 2;
    width: min(100%, 600px);
    padding: 18px;
    border: 1px solid rgba(94,45,148,.10);
    border-radius: 28px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 30px 80px rgba(52,30,70,.13);
    backdrop-filter: blur(10px);
}

    .meida-about-hero-image-card img {
        display: block;
        width: 100%;
        border-radius: 18px;
    }

.meida-about-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(94,45,148,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 15px 40px rgba(40,20,60,.10);
    backdrop-filter: blur(10px);
}

.meida-about-floating-card-one {
    right: -15px;
    top: 95px;
}

.meida-about-floating-card-two {
    left: -15px;
    bottom: 75px;
}

.meida-about-floating-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--brand-light);
    color: var(--brand);
}

.meida-about-floating-card strong {
    display: block;
    font-size: 11px;
    font-weight: 800;
}

.meida-about-floating-card small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 9px;
}


/* =========================================================
   VALUE
========================================================= */

.meida-about-value-section {
    padding: 90px 0;
    background: #fff;
}

.meida-about-value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
}

.meida-about-value-card {
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .meida-about-value-card:hover {
        transform: translateY(-5px);
        border-color: rgba(94,45,148,.20);
        box-shadow: 0 18px 45px rgba(40,20,60,.08);
    }

.meida-about-value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 17px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 22px;
}

.meida-about-value-card h3 {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 850;
}

.meida-about-value-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 2;
}


/* =========================================================
   FEATURES
========================================================= */

.meida-about-features-section {
    padding: 95px 0;
    background: linear-gradient( 180deg, #f9f6fb 0%, #fff 100% );
}

.meida-about-features-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 18px;
}

.meida-about-feature-card {
    position: relative;
    min-height: 310px;
    padding: 27px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .meida-about-feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 45px rgba(40,20,60,.08);
    }

.meida-about-feature-number {
    position: absolute;
    top: 18px;
    left: 18px;
    color: rgba(94,45,148,.10);
    font-size: 40px;
    font-weight: 900;
}

.meida-about-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    border-radius: 14px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 19px;
}

.meida-about-feature-card h3 {
    margin-bottom: 13px;
    font-size: 16px;
    font-weight: 850;
}

.meida-about-feature-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 2.05;
}


/* =========================================================
   STEPS
========================================================= */

.meida-about-steps-section {
    padding: 95px 0;
    background: #fff;
}

.meida-about-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 25px;
}

.meida-about-step {
    position: relative;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--brand-soft);
    text-align: center;
}

.meida-about-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    margin: 0 auto 20px;
    border-radius: 20px;
    background: var(--brand);
    color: #fff;
    font-size: 25px;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(94,45,148,.20);
}

.meida-about-step-line {
    position: absolute;
    top: 62px;
    right: calc(100% + 0px);
    width: 50px;
    height: 1px;
    background: rgba(94,45,148,.20);
}

.meida-about-step h3 {
    margin-bottom: 12px;
    font-size: 17px;
    font-weight: 850;
}

.meida-about-step p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 2;
}


/* =========================================================
   LOTTIE
========================================================= */

.meida-about-lottie-section {
    padding: 80px 0;
    background: linear-gradient( 180deg, #faf8fc, #fff );
}

.meida-about-lottie-row {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    align-items: center;
    gap: 70px;
    min-height: 430px;
    padding: 50px 0;
    border-bottom: 1px solid var(--border);
}

    .meida-about-lottie-row:last-child {
        border-bottom: none;
    }

    .meida-about-lottie-row.reverse {
        direction: ltr;
    }

        .meida-about-lottie-row.reverse
        .meida-about-lottie-content {
            direction: rtl;
        }

.meida-about-lottie-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 330px;
}

    .meida-about-lottie-visual > div {
        width: 100%;
        max-width: 400px;
        height: 330px;
    }

.meida-about-lottie-content {
    max-width: 520px;
}

    .meida-about-lottie-content h2 {
        margin: 0 0 18px;
        font-size: 30px;
        font-weight: 900;
    }

    .meida-about-lottie-content p {
        margin-bottom: 20px;
        color: var(--text-secondary);
        font-size: 14px;
        line-height: 2.2;
    }

.meida-about-highlight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    border-radius: 14px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.9;
}

    .meida-about-highlight i {
        margin-top: 3px;
        font-size: 16px;
    }


/* =========================================================
   SEO CONTENT
========================================================= */

.meida-about-seo-section {
    padding: 80px 0;
    background: #fff;
}

.meida-about-seo-card {
    max-width: 1000px;
    margin: auto;
    padding: 45px;
    border: 1px solid var(--border);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 15px 50px rgba(40,20,60,.05);
}

.meida-about-seo-heading {
    margin-bottom: 25px;
}

    .meida-about-seo-heading h2 {
        margin: 0;
        font-size: 26px;
        font-weight: 900;
    }

.text-container {
    position: relative;
    max-height: 115px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 2.2;
    transition: max-height .4s ease;
}

    .text-container p {
        margin: 0;
    }

    .text-container.fade::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 75px;
        background: linear-gradient( to bottom, rgba(255,255,255,0), #fff );
        pointer-events: none;
    }

    .text-container.expanded {
        max-height: none;
    }

        .text-container.expanded::after {
            display: none;
        }

.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--brand);
    cursor: pointer;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   EDUCATION
========================================================= */

.meida-about-education-section {
    padding: 90px 0;
    background: linear-gradient( 180deg, #f9f6fb, #fff );
}

.meida-about-education-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 1000px;
    margin: auto;
}

.meida-about-education-card {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: start;
    gap: 20px;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: #fff;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .meida-about-education-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 35px rgba(40,20,60,.06);
    }

.meida-about-education-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 21px;
}

.meida-about-education-card h3 {
    margin: 2px 0 10px;
    font-size: 17px;
    font-weight: 850;
}

.meida-about-education-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 2.1;
}


/* =========================================================
   FAQ
========================================================= */

.meida-about-faq-section {
    padding: 90px 0;
    background: #fff;
}

.meida-about-faq {
    max-width: 900px;
    margin: auto;
    border-top: 1px solid var(--border);
}

.meida-about-faq-item {
    border-bottom: 1px solid var(--border);
}

.meida-about-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 22px 5px;
    border: none;
    background: transparent;
    color: var(--text-main);
    text-align: right;
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
}

    .meida-about-faq-question i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        flex-shrink: 0;
        border-radius: 9px;
        background: var(--brand-light);
        color: var(--brand);
        font-size: 15px;
        transition: transform .3s ease;
    }

.meida-about-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

    .meida-about-faq-answer p {
        overflow: hidden;
        margin: 0;
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 2.15;
    }

.meida-about-faq-item.active
.meida-about-faq-answer {
    grid-template-rows: 1fr;
}

    .meida-about-faq-item.active
    .meida-about-faq-answer p {
        padding-bottom: 22px;
    }

.meida-about-faq-item.active
.meida-about-faq-question i {
    transform: rotate(45deg);
    background: var(--brand);
    color: #fff;
}


/* =========================================================
   FINAL CTA
========================================================= */

.meida-about-final-cta {
    padding: 0 0 90px;
    background: #fff;
}

.meida-about-final-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 45px;
    border-radius: 25px;
    background: linear-gradient( 120deg, var(--brand-dark), var(--brand) );
    color: #fff;
    box-shadow: 0 25px 60px rgba(94,45,148,.22);
}

.meida-about-final-content span {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    opacity: .7;
}

.meida-about-final-content h2 {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 900;
    line-height: 1.6;
}

.meida-about-final-content p {
    margin: 0;
    font-size: 12px;
    opacity: .8;
}

.meida-about-final-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex-shrink: 0;
}

.meida-about-final-primary,
.meida-about-final-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .25s ease;
}

.meida-about-final-primary {
    background: #fff;
    color: var(--brand);
}

    .meida-about-final-primary:hover {
        color: var(--brand-dark);
        transform: translateY(-2px);
    }

.meida-about-final-secondary {
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    background: rgba(255,255,255,.08);
}

    .meida-about-final-secondary:hover {
        color: #fff;
        background: rgba(255,255,255,.16);
    }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .meida-about-hero-grid {
        gap: 35px;
    }

    .meida-about-features-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991px) {

    .meida-about-hero {
        padding: 45px 0 65px;
    }

    .meida-about-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
        text-align: center;
    }

    .meida-about-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .meida-about-hero-text {
        max-width: 650px;
    }

    .meida-about-hero-visual {
        min-height: 390px;
    }

    .meida-about-value-grid,
    .meida-about-steps {
        grid-template-columns: 1fr;
    }

    .meida-about-step-line {
        display: none;
    }

    .meida-about-lottie-row {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 45px 0;
        text-align: center;
    }

        .meida-about-lottie-row.reverse {
            direction: rtl;
        }

    .meida-about-lottie-content {
        max-width: 700px;
        margin: auto;
    }

    .meida-about-highlight {
        text-align: right;
    }

    .meida-about-final-card {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   MOBILE SMALL
========================================================= */

@media (max-width: 767px) {

    .meida-about-section-heading {
        margin-bottom: 30px;
    }

        .meida-about-section-heading h2 {
            font-size: 25px;
        }

        .meida-about-section-heading p {
            font-size: 12px;
        }

    .meida-about-hero h1 {
        font-size: 34px;
        line-height: 1.55;
    }

    .meida-about-hero-text {
        font-size: 13px;
        line-height: 2.1;
    }

    .meida-about-hero-stat {
        width: 100%;
        justify-content: center;
    }

    .meida-about-hero-actions {
        width: 100%;
        flex-direction: column;
    }

    .meida-about-primary-btn,
    .meida-about-secondary-btn {
        width: 100%;
    }

    .meida-about-hero-visual {
        min-height: 290px;
    }

    .meida-about-hero-glow {
        width: 280px;
        height: 280px;
    }

    .meida-about-floating-card {
        padding: 8px 10px;
    }

    .meida-about-floating-card-one {
        right: -5px;
        top: 25px;
    }

    .meida-about-floating-card-two {
        left: -5px;
        bottom: 25px;
    }

    .meida-about-floating-card strong {
        font-size: 9px;
    }

    .meida-about-floating-card small {
        font-size: 7px;
    }

    .meida-about-value-section,
    .meida-about-features-section,
    .meida-about-steps-section,
    .meida-about-lottie-section,
    .meida-about-seo-section,
    .meida-about-education-section,
    .meida-about-faq-section {
        padding: 60px 0;
    }

    .meida-about-features-grid {
        grid-template-columns: 1fr;
    }

    .meida-about-feature-card {
        min-height: auto;
        padding: 23px;
    }

    .meida-about-lottie-visual {
        min-height: 250px;
    }

        .meida-about-lottie-visual > div {
            height: 250px;
        }

    .meida-about-lottie-content h2 {
        font-size: 25px;
    }

    .meida-about-seo-card {
        padding: 25px 20px;
        border-radius: 18px;
    }

    .meida-about-education-card {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .meida-about-education-icon {
        width: 48px;
        height: 48px;
    }

    .meida-about-final-card {
        padding: 30px 22px;
        border-radius: 20px;
    }

    .meida-about-final-content h2 {
        font-size: 22px;
    }

    .meida-about-final-actions {
        width: 100%;
        flex-direction: column;
    }

    .meida-about-final-primary,
    .meida-about-final-secondary {
        width: 100%;
    }
}


/* =========================================================
   VERY SMALL
========================================================= */

@media (max-width: 390px) {

    .meida-about-hero h1 {
        font-size: 30px;
    }

    .meida-about-hero-stat strong {
        font-size: 17px;
    }

    .meida-about-floating-card {
        display: none;
    }

    .meida-about-lottie-visual > div {
        height: 220px;
    }
}
/* =========================================================
   Advertisement Event
   MeidaShow Public Design System
   ========================================================= */

.event-page {
    --brand: #5e2d94;
    --brand-dark: #482171;
    --brand-light: #f3eef8;
    --brand-soft: #f8f5fb;
    --text-main: #24202a;
    --text-secondary: #716a78;
    --border: #ebe7ef;
    direction: rtl;
    padding: 25px 0 80px;
    background: linear-gradient( 180deg, #faf9fc 0, #ffffff 420px );
    color: var(--text-main);
}


/* =========================================================
   Breadcrumb
   ========================================================= */

.event-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    color: var(--text-secondary);
    font-size: 12px;
}

    .event-breadcrumb a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--text-secondary);
        text-decoration: none;
        transition: .2s ease;
    }

        .event-breadcrumb a:hover {
            color: var(--brand);
        }

    .event-breadcrumb > span:first-of-type {
        color: #aaa3af;
        font-size: 9px;
    }

    .event-breadcrumb .active {
        max-width: 400px;
        overflow: hidden;
        color: var(--brand);
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   Hero
   ========================================================= */

.event-hero {
    margin-bottom: 42px;
}

.event-hero-header {
    max-width: 900px;
    margin: 0 auto 28px;
    text-align: center;
}

.event-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(94,45,148,.08);
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}

.event-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
}

.event-hero h1 {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(28px, 4vw, 45px);
    font-weight: 850;
    line-height: 1.5;
}


/* =========================================================
   Banner
   ========================================================= */

.event-banner-card {
    position: relative;
    max-width: 1080px;
    margin: auto;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(45,25,65,.10);
}

.event-banner-wrapper {
    position: relative;
    overflow: hidden;
    background: var(--brand-light);
}

.event-banner {
    display: block;
    width: 100%;
    max-height: 570px;
    min-height: 280px;
    object-fit: cover;
}


/* =========================================================
   Countdown
   ========================================================= */

.event-countdown-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 20px 25px;
    background: linear-gradient( 120deg, var(--brand-dark), var(--brand) );
    color: #fff;
}

.event-countdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
}

.event-countdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 14px;
    background: rgba(255,255,255,.12);
    font-size: 20px;
}

.event-countdown-header > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-countdown-label {
    font-size: 11px;
    opacity: .72;
}

.event-countdown-header strong {
    font-size: 14px;
    font-weight: 800;
}


/* Countdown Units */

.event-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 65px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 13px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(7px);
}

    .countdown-item span {
        font-size: 24px;
        font-weight: 850;
        line-height: 1.1;
    }

    .countdown-item small {
        margin-top: 5px;
        font-size: 9px;
        opacity: .7;
    }

.countdown-separator {
    font-size: 20px;
    font-weight: 700;
    opacity: .5;
}


/* Expired */

.event-expired {
    padding: 8px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}


/* =========================================================
   Main Content Layout
   ========================================================= */

.event-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 25px;
    max-width: 1080px;
    margin: auto;
    align-items: start;
}


/* =========================================================
   Cards
   ========================================================= */

.event-description-card,
.event-organizer-card,
.event-social-card {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(40,25,55,.055);
}


/* =========================================================
   Card Header
   ========================================================= */

.event-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 24px 25px;
    border-bottom: 1px solid var(--border);
}

.event-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 18px;
}

.event-card-header > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-card-header span {
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
}

.event-card-header h2 {
    margin: 0;
    color: var(--text-main);
    font-size: 17px;
    font-weight: 800;
}


/* =========================================================
   Description
   ========================================================= */

.event-description {
    padding: 30px;
    color: #403a45;
    font-size: 15px;
    line-height: 2.2;
}

    .event-description p {
        margin-bottom: 18px;
    }

    .event-description h2,
    .event-description h3,
    .event-description h4 {
        margin-top: 25px;
        margin-bottom: 12px;
        color: var(--text-main);
        font-weight: 800;
    }

    .event-description img {
        max-width: 100%;
        height: auto;
        border-radius: 14px;
    }

    .event-description a {
        color: var(--brand);
        font-weight: 700;
    }


/* =========================================================
   Sidebar
   ========================================================= */

.event-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 20px;
}


/* =========================================================
   Organizer
   ========================================================= */

.event-organizer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 22px;
}

.event-organizer-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 15px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 21px;
}

.event-organizer-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .event-organizer-info strong {
        overflow: hidden;
        color: var(--text-main);
        font-size: 14px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .event-organizer-info span {
        color: var(--text-secondary);
        font-size: 10px;
    }

.event-organizer-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 22px 22px;
    padding: 12px 14px;
    border-radius: 11px;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

    .event-organizer-button:hover {
        background: var(--brand-dark);
        color: #fff;
        transform: translateY(-2px);
    }

    .event-organizer-button i {
        font-size: 14px;
    }


/* =========================================================
   Social
   ========================================================= */

.event-social-list {
    display: flex;
    flex-direction: column;
    padding: 10px 15px 16px;
}

.event-social-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    border-bottom: 1px solid #f0edf2;
    color: var(--text-main);
    font-size: 12px;
    text-decoration: none;
    transition: .2s ease;
}

    .event-social-item:last-child {
        border-bottom: none;
    }

    .event-social-item:hover {
        padding-right: 13px;
        color: var(--brand);
    }

.event-social-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 15px;
}

.event-social-item > span:nth-child(2) {
    flex: 1;
    font-weight: 700;
}

.event-social-item > i {
    color: #a29aa8;
    font-size: 11px;
    transition: .2s ease;
}

.event-social-item:hover > i {
    color: var(--brand);
    transform: translate(-2px,-2px);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 991px) {

    .event-content-layout {
        grid-template-columns: 1fr;
    }

    .event-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}


@media (max-width: 767px) {

    .event-page {
        padding-top: 15px;
        padding-bottom: 50px;
    }

    .event-breadcrumb {
        margin-bottom: 20px;
        font-size: 10px;
    }

        .event-breadcrumb .active {
            max-width: 180px;
        }

    .event-hero-header {
        margin-bottom: 20px;
    }

    .event-eyebrow {
        font-size: 10px;
    }

    .event-hero h1 {
        font-size: 22px;
        line-height: 1.55;
    }

    .event-banner-card {
        border-radius: 18px;
    }

    .event-banner {
        min-height: 160px;
        max-height: 380px;
    }

    .event-countdown-card {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        padding: 17px 13px;
    }

    .event-countdown-header {
        justify-content: center;
        min-width: 0;
    }

    .event-countdown {
        gap: 4px;
    }

    .countdown-item {
        width: 58px;
        height: 59px;
        border-radius: 11px;
    }

        .countdown-item span {
            font-size: 19px;
        }

        .countdown-item small {
            font-size: 8px;
        }

    .countdown-separator {
        font-size: 15px;
    }

    .event-content-layout {
        gap: 15px;
    }

    .event-sidebar {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .event-card-header {
        padding: 18px;
    }

    .event-card-icon {
        width: 39px;
        height: 39px;
        border-radius: 11px;
        font-size: 16px;
    }

    .event-card-header h2 {
        font-size: 15px;
    }

    .event-description {
        padding: 20px;
        font-size: 14px;
        line-height: 2.05;
    }

    .event-organizer {
        padding: 17px;
    }

    .event-organizer-button {
        margin: 0 17px 17px;
    }
}


@media (max-width: 390px) {

    .countdown-item {
        width: 52px;
        height: 56px;
    }

        .countdown-item span {
            font-size: 17px;
        }

    .countdown-separator {
        font-size: 13px;
    }
}
/* =========================================================
   Best Job Category Advertisements
   MeidaShow Public Design System
   ========================================================= */

.best-category-page {
    --brand: #5e2d94;
    --brand-dark: #482171;
    --brand-light: #f3eef8;
    --brand-soft: #f8f5fb;
    --text-main: #24202a;
    --text-secondary: #706978;
    --border: #ebe7ef;
    direction: rtl;
    background: #fff;
    color: var(--text-main);
}


/* =========================================================
   Breadcrumb
   ========================================================= */

.best-category-breadcrumb {
    padding: 16px 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
}

.best-category-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

    .best-category-breadcrumb-list a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--text-secondary);
        text-decoration: none;
        transition: .2s ease;
    }

        .best-category-breadcrumb-list a:hover {
            color: var(--brand);
        }

    .best-category-breadcrumb-list .active {
        color: var(--brand);
        font-weight: 700;
    }

.best-category-breadcrumb-separator {
    color: #aaa2af;
    font-size: 10px;
}


/* =========================================================
   Hero
   ========================================================= */

.best-category-hero {
    position: relative;
    overflow: hidden;
    padding: 70px 0 75px;
    background: radial-gradient( circle at 85% 50%, rgba(94, 45, 148, .12), transparent 30% ), linear-gradient( 135deg, #faf8fc 0%, #f3edf8 100% );
}

.best-category-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 300px;
}

.best-category-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.best-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(94, 45, 148, .09);
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}

.best-category-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 11px;
}

.best-category-hero h1 {
    margin: 0 0 18px;
    color: var(--text-main);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 850;
    line-height: 1.5;
}

    .best-category-hero h1 strong {
        color: var(--brand);
    }

.best-category-hero p {
    max-width: 650px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 2.1;
}


/* Hero Meta */

.best-category-hero-meta {
    display: inline-flex;
    align-items: center;
    margin-top: 28px;
    padding: 12px 17px;
    border: 1px solid rgba(94, 45, 148, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .65);
    backdrop-filter: blur(8px);
}

.best-category-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.best-category-meta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--brand-light);
    color: var(--brand);
}

.best-category-meta-item div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.best-category-meta-item strong {
    color: var(--text-main);
    font-size: 14px;
    font-weight: 800;
}

.best-category-meta-item span {
    color: var(--text-secondary);
    font-size: 10px;
}

.best-category-meta-divider {
    width: 1px;
    height: 35px;
    margin: 0 18px;
    background: var(--border);
}


/* =========================================================
   Hero Visual
   ========================================================= */

.best-category-hero-visual {
    position: relative;
    width: 330px;
    height: 280px;
    flex-shrink: 0;
}

.best-category-orbit {
    position: absolute;
    border: 1px solid rgba(94, 45, 148, .13);
    border-radius: 50%;
}

    .best-category-orbit.orbit-one {
        width: 270px;
        height: 270px;
        top: 5px;
        right: 20px;
    }

    .best-category-orbit.orbit-two {
        width: 190px;
        height: 190px;
        top: 45px;
        right: 60px;
        background: rgba(255,255,255,.35);
    }

.best-category-trophy {
    position: absolute;
    top: 88px;
    right: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    border-radius: 25px;
    background: var(--brand);
    color: #fff;
    font-size: 35px;
    box-shadow: 0 20px 50px rgba(94, 45, 148, .27);
    transform: rotate(-6deg);
}

.best-category-rank {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(50, 30, 70, .15);
}

    .best-category-rank.rank-one {
        top: 45px;
        right: 58px;
    }

    .best-category-rank.rank-two {
        bottom: 40px;
        right: 65px;
        opacity: .8;
    }

    .best-category-rank.rank-three {
        top: 105px;
        left: 25px;
        opacity: .65;
    }


/* =========================================================
   Back Link
   ========================================================= */

.best-category-back-wrapper {
    padding-top: 25px;
}

.best-category-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

    .best-category-back:hover {
        color: var(--brand-dark);
    }

    .best-category-back i {
        font-size: 16px;
    }


/* =========================================================
   List Section
   ========================================================= */

.best-category-list-section {
    padding: 48px 0 85px;
}

.best-category-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
}

.best-category-section-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}

.best-category-section-header h2 {
    margin: 0 0 7px;
    color: var(--text-main);
    font-size: 27px;
    font-weight: 850;
}

.best-category-section-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.best-category-section-count {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

    .best-category-section-count strong {
        color: var(--brand);
        font-size: 18px;
        font-weight: 900;
    }

    .best-category-section-count span {
        color: var(--text-secondary);
        font-size: 11px;
    }


/* =========================================================
   Grid
   ========================================================= */

.best-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}


/* =========================================================
   Card
   ========================================================= */

.best-category-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: #fff;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

    .best-category-card:hover {
        transform: translateY(-7px);
        border-color: rgba(94, 45, 148, .2);
        box-shadow: 0 20px 45px rgba(40, 25, 55, .11);
    }

.best-category-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}


/* Rank Badge */

.best-category-rank-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 3px solid rgba(255,255,255,.9);
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(40, 20, 60, .22);
}


/* Featured */

.best-category-featured-label {
    position: absolute;
    top: 17px;
    left: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.93);
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0,0,0,.1);
}


/* Cover */

.best-category-card-cover {
    position: relative;
    height: 205px;
    overflow: hidden;
    background: var(--brand-light);
}

    .best-category-card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

.best-category-card:hover
.best-category-card-cover img {
    transform: scale(1.06);
}

.best-category-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0,0,0,.02), rgba(0,0,0,.22) );
}

.best-category-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(94,45,148,.35);
    font-size: 55px;
}


/* Logo */

.best-category-logo-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    height: 0;
    z-index: 4;
}

    .best-category-logo-wrapper img,
    .best-category-logo-placeholder {
        position: absolute;
        top: -63px;
        width: 126px;
        height: 126px;
        border: 5px solid #fff;
        border-radius: 50%;
        background: #fff;
        object-fit: cover;
        box-shadow: 0 9px 28px rgba(30,20,40,.17);
    }

.best-category-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 36px;
}


/* Content */

.best-category-card-content {
    padding: 75px 22px 21px;
    text-align: center;
}

    .best-category-card-content h3 {
        margin: 0 0 10px;
        color: var(--text-main);
        font-size: 18px;
        font-weight: 850;
        line-height: 1.6;
    }

    .best-category-card-content p {
        display: -webkit-box;
        min-height: 44px;
        margin: 0 auto 20px;
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 1.9;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


/* Footer */

.best-category-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
}

.best-category-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: var(--brand-light);
    transition: .25s ease;
}

.best-category-card:hover
.best-category-card-arrow {
    background: var(--brand);
    color: #fff;
}


/* =========================================================
   Empty State
   ========================================================= */

.best-category-empty {
    max-width: 650px;
    margin: 10px auto 0;
    padding: 65px 30px;
    border: 1px dashed #dcd5e2;
    border-radius: 24px;
    background: var(--brand-soft);
    text-align: center;
}

.best-category-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: #fff;
    color: var(--brand);
    font-size: 31px;
    box-shadow: 0 8px 25px rgba(50,30,70,.08);
}

.best-category-empty h3 {
    margin: 0 0 10px;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 800;
}

.best-category-empty p {
    max-width: 500px;
    margin: 0 auto 25px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   Buttons
   ========================================================= */

.best-category-empty-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 11px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

    .best-category-empty-button:hover {
        background: var(--brand-dark);
        color: #fff;
        transform: translateY(-2px);
    }


/* =========================================================
   Not Found
   ========================================================= */

.best-category-not-found {
    padding: 80px 0;
}

.best-category-not-found-box {
    max-width: 620px;
    margin: auto;
    padding: 60px 30px;
    border: 1px solid var(--border);
    border-radius: 24px;
    text-align: center;
}

.best-category-not-found-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin: 0 auto 22px;
    border-radius: 22px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 30px;
}

.best-category-not-found-box h1 {
    margin: 0 0 12px;
    font-size: 23px;
    font-weight: 800;
}

.best-category-not-found-box p {
    margin: 0 auto 25px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {

    .best-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 991px) {

    .best-category-hero {
        padding: 55px 0;
    }

    .best-category-hero-visual {
        width: 240px;
        transform: scale(.82);
        transform-origin: center;
    }

    .best-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .best-category-hero {
        padding: 42px 0 45px;
    }

    .best-category-hero-inner {
        min-height: auto;
    }

    .best-category-hero-content {
        max-width: 100%;
    }

    .best-category-hero h1 {
        font-size: 30px;
        line-height: 1.55;
    }

    .best-category-hero p {
        font-size: 14px;
    }

    .best-category-hero-visual {
        display: none;
    }

    .best-category-hero-meta {
        width: 100%;
        justify-content: center;
    }

    .best-category-meta-divider {
        margin: 0 12px;
    }

    .best-category-list-section {
        padding: 40px 0 55px;
    }

    .best-category-section-header {
        align-items: flex-start;
    }

        .best-category-section-header h2 {
            font-size: 22px;
        }

    .best-category-section-count {
        display: none;
    }

    .best-category-grid {
        gap: 13px;
    }

    .best-category-card {
        border-radius: 16px;
    }

    .best-category-card-cover {
        height: 145px;
    }

    .best-category-rank-badge {
        width: 35px;
        height: 35px;
        top: 9px;
        right: 9px;
        font-size: 12px;
    }

    .best-category-featured-label {
        top: 11px;
        left: 9px;
        padding: 5px 7px;
        font-size: 9px;
    }

    .best-category-logo-wrapper img,
    .best-category-logo-placeholder {
        width: 92px;
        height: 92px;
        top: -46px;
        border-width: 4px;
    }

    .best-category-card-content {
        padding: 55px 10px 15px;
    }

        .best-category-card-content h3 {
            font-size: 14px;
        }

        .best-category-card-content p {
            min-height: 37px;
            margin-bottom: 13px;
            font-size: 10px;
        }

    .best-category-card-footer {
        font-size: 10px;
    }

    .best-category-card-arrow {
        width: 23px;
        height: 23px;
        font-size: 9px;
    }
}


@media (max-width: 420px) {

    .best-category-grid {
        gap: 10px;
    }

    .best-category-card-cover {
        height: 125px;
    }

    .best-category-logo-wrapper img,
    .best-category-logo-placeholder {
        width: 80px;
        height: 80px;
        top: -40px;
    }

    .best-category-card-content {
        padding-top: 49px;
    }

        .best-category-card-content h3 {
            font-size: 13px;
        }

        .best-category-card-content p {
            font-size: 9.5px;
        }
}
/* =========================================================
   Job Category Advertisements
   MeidaShow Public Design System
   ========================================================= */

.job-category-page {
    --brand: #5e2d94;
    --brand-dark: #482171;
    --brand-light: #f3eef8;
    --brand-soft: #f8f5fb;
    --text-main: #24202a;
    --text-secondary: #6f6877;
    --border: #ebe7ef;
    --white: #ffffff;
    direction: rtl;
    background: #ffffff;
    color: var(--text-main);
}


/* =========================================================
   Breadcrumb
   ========================================================= */

.job-category-breadcrumb {
    padding: 16px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border);
}

.job-category-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}

    .job-category-breadcrumb-list a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: var(--text-secondary);
        text-decoration: none;
        transition: .2s ease;
    }

        .job-category-breadcrumb-list a:hover {
            color: var(--brand);
        }

    .job-category-breadcrumb-list .active {
        color: var(--brand);
        font-weight: 700;
    }

.breadcrumb-separator {
    color: #aaa2af;
    font-size: 11px;
}


/* =========================================================
   Hero
   ========================================================= */

.job-category-hero {
    position: relative;
    overflow: hidden;
    padding: 65px 0 70px;
    background: linear-gradient( 135deg, #faf8fc 0%, #f5eff9 100% );
}

.job-category-hero-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 270px;
}

.job-category-hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.job-category-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(94, 45, 148, .08);
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.job-category-eyebrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 12px;
}

.job-category-hero h1 {
    margin: 0 0 18px;
    color: var(--text-main);
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.5;
}

    .job-category-hero h1 strong {
        color: var(--brand);
    }

.job-category-hero p {
    max-width: 650px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 2.1;
}

    .job-category-hero p strong {
        color: var(--brand);
    }

.job-category-result-count {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 25px;
    padding: 10px 16px;
    border: 1px solid rgba(94, 45, 148, .12);
    border-radius: 12px;
    background: rgba(255, 255, 255, .75);
}

.job-category-count-number {
    color: var(--brand);
    font-size: 19px;
    font-weight: 800;
}

.job-category-count-text {
    color: var(--text-secondary);
    font-size: 13px;
}


/* Hero decoration */

.job-category-hero-decoration {
    position: relative;
    width: 310px;
    height: 260px;
    flex-shrink: 0;
}

.job-category-hero-circle {
    position: absolute;
    border-radius: 50%;
}

    .job-category-hero-circle.circle-one {
        width: 240px;
        height: 240px;
        top: 5px;
        right: 20px;
        background: rgba(94, 45, 148, .07);
    }

    .job-category-hero-circle.circle-two {
        width: 155px;
        height: 155px;
        top: 48px;
        right: 62px;
        border: 1px solid rgba(94, 45, 148, .13);
        background: rgba(255, 255, 255, .4);
    }

.job-category-hero-icon {
    position: absolute;
    top: 80px;
    right: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 85px;
    height: 85px;
    border-radius: 24px;
    background: var(--brand);
    color: #fff;
    font-size: 36px;
    box-shadow: 0 20px 45px rgba(94, 45, 148, .25);
    transform: rotate(-7deg);
}


/* =========================================================
   Featured
   ========================================================= */

.job-category-featured {
    padding: 35px 0 20px;
}

.job-category-featured-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.job-category-featured-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    border: 1px solid rgba(94, 45, 148, .14);
    border-radius: 20px;
    background: linear-gradient( 120deg, #f7f2fa, #ffffff );
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .job-category-featured-content:hover {
        transform: translateY(-3px);
        border-color: rgba(94, 45, 148, .3);
        box-shadow: 0 15px 40px rgba(60, 30, 90, .09);
    }

.job-category-featured-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 17px;
    background: var(--brand);
    color: #fff;
    font-size: 24px;
}

.job-category-featured-text {
    flex: 1;
}

.job-category-featured-label {
    display: block;
    margin-bottom: 4px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 700;
}

.job-category-featured-text h2 {
    margin: 0 0 4px;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 800;
}

.job-category-featured-text p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.job-category-featured-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--brand);
    font-size: 18px;
    transition: .25s ease;
}

.job-category-featured-content:hover .job-category-featured-arrow {
    background: var(--brand);
    color: #fff;
}


/* =========================================================
   Section Header
   ========================================================= */

.job-category-list-section {
    padding: 55px 0 80px;
}

.job-category-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
}

.job-category-section-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.job-category-section-header h2 {
    margin: 0 0 7px;
    color: var(--text-main);
    font-size: 27px;
    font-weight: 800;
}

.job-category-section-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}


/* =========================================================
   Advertisement Grid
   ========================================================= */

.job-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}


/* =========================================================
   Advertisement Card
   ========================================================= */

.job-category-card {
    position: relative;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

    .job-category-card:hover {
        transform: translateY(-7px);
        border-color: rgba(94, 45, 148, .2);
        box-shadow: 0 18px 45px rgba(35, 20, 50, .11);
    }

.job-category-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}


/* Cover */

.job-category-card-cover {
    position: relative;
    height: 190px;
    overflow: hidden;
    background: var(--brand-light);
}

    .job-category-card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

.job-category-card:hover
.job-category-card-cover img {
    transform: scale(1.06);
}

.job-category-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to bottom, rgba(0,0,0,.03), rgba(0,0,0,.18) );
}

.job-category-card-cover-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(94, 45, 148, .35);
    font-size: 50px;
}


/* Logo */

.job-category-card-logo-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    height: 0;
    z-index: 3;
}

    .job-category-card-logo-wrapper img,
    .job-category-card-logo-placeholder {
        position: absolute;
        top: -58px;
        width: 116px;
        height: 116px;
        border: 5px solid #fff;
        border-radius: 50%;
        background: #fff;
        object-fit: cover;
        box-shadow: 0 8px 25px rgba(30, 20, 40, .13);
    }

.job-category-card-logo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    font-size: 35px;
}


/* Content */

.job-category-card-content {
    padding: 70px 20px 20px;
    text-align: center;
}

    .job-category-card-content h3 {
        min-height: 26px;
        margin: 0 0 10px;
        color: var(--text-main);
        font-size: 17px;
        font-weight: 800;
        line-height: 1.6;
    }

    .job-category-card-content p {
        display: -webkit-box;
        min-height: 42px;
        margin: 0 auto 18px;
        color: var(--text-secondary);
        font-size: 12px;
        line-height: 1.8;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


/* Card Footer */

.job-category-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
}

.job-category-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--brand-light);
    transition: .25s ease;
}

.job-category-card:hover
.job-category-card-arrow {
    background: var(--brand);
    color: #fff;
}


/* =========================================================
   Empty State
   ========================================================= */

.job-category-empty {
    max-width: 650px;
    margin: 20px auto 0;
    padding: 65px 30px;
    border: 1px dashed #dcd5e2;
    border-radius: 24px;
    background: var(--brand-soft);
    text-align: center;
}

.job-category-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: #fff;
    color: var(--brand);
    font-size: 31px;
    box-shadow: 0 8px 25px rgba(50, 30, 70, .08);
}

.job-category-empty h3 {
    margin: 0 0 10px;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 800;
}

.job-category-empty p {
    margin: 0 auto 25px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   Buttons
   ========================================================= */

.job-category-empty-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 11px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

    .job-category-empty-button:hover {
        background: var(--brand-dark);
        color: #fff;
        transform: translateY(-2px);
    }


/* =========================================================
   Not Found
   ========================================================= */

.job-category-not-found {
    padding: 80px 0;
}

.job-category-not-found-box {
    max-width: 620px;
    margin: auto;
    padding: 60px 30px;
    border: 1px solid var(--border);
    border-radius: 24px;
    text-align: center;
}

.job-category-not-found-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px;
    height: 75px;
    margin: 0 auto 22px;
    border-radius: 22px;
    background: var(--brand-light);
    color: var(--brand);
    font-size: 30px;
}

.job-category-not-found-box h1 {
    margin: 0 0 12px;
    font-size: 23px;
    font-weight: 800;
}

.job-category-not-found-box p {
    margin: 0 auto 25px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.9;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {

    .job-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 991px) {

    .job-category-hero {
        padding: 50px 0;
    }

    .job-category-hero-decoration {
        width: 230px;
        transform: scale(.85);
    }

    .job-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .job-category-hero {
        padding: 40px 0 45px;
    }

    .job-category-hero-inner {
        min-height: auto;
    }

    .job-category-hero-content {
        max-width: 100%;
    }

    .job-category-hero h1 {
        font-size: 30px;
        line-height: 1.55;
    }

    .job-category-hero p {
        font-size: 14px;
    }

    .job-category-hero-decoration {
        display: none;
    }

    .job-category-featured {
        padding-top: 25px;
    }

    .job-category-featured-content {
        gap: 14px;
        padding: 18px;
    }

    .job-category-featured-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
        border-radius: 14px;
    }

    .job-category-featured-text h2 {
        font-size: 16px;
    }

    .job-category-featured-text p {
        font-size: 11px;
    }

    .job-category-featured-arrow {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .job-category-list-section {
        padding: 40px 0 55px;
    }

    .job-category-section-header h2 {
        font-size: 22px;
    }

    .job-category-grid {
        gap: 13px;
    }

    .job-category-card {
        border-radius: 15px;
    }

    .job-category-card-cover {
        height: 135px;
    }

    .job-category-card-logo-wrapper img,
    .job-category-card-logo-placeholder {
        width: 88px;
        height: 88px;
        top: -44px;
        border-width: 4px;
    }

    .job-category-card-content {
        padding: 53px 10px 15px;
    }

        .job-category-card-content h3 {
            font-size: 14px;
            line-height: 1.5;
        }

        .job-category-card-content p {
            font-size: 10px;
            min-height: 36px;
            margin-bottom: 12px;
        }

    .job-category-card-footer {
        font-size: 11px;
    }

    .job-category-card-arrow {
        width: 23px;
        height: 23px;
        font-size: 10px;
    }
}


@media (max-width: 420px) {

    .job-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .job-category-card-cover {
        height: 120px;
    }

    .job-category-card-logo-wrapper img,
    .job-category-card-logo-placeholder {
        width: 78px;
        height: 78px;
        top: -39px;
    }

    .job-category-card-content {
        padding-top: 48px;
    }

        .job-category-card-content h3 {
            font-size: 13px;
        }

        .job-category-card-content p {
            font-size: 9.5px;
        }

    .job-category-card-footer {
        font-size: 10px;
    }
}
/* =========================================================
   City Advertisements
   Brand Color: #5e2d94
   ========================================================= */

.city-page {
    --brand: #5e2d94;
    --brand-dark: #482171;
    --brand-light: #f3eef8;
    --brand-soft: #f8f5fb;
    background: #f7f8fa;
    color: #17191c;
}


/* =========================================================
   Breadcrumb
   ========================================================= */

.city-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #eceef1;
}

.city-breadcrumb-list {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

    .city-breadcrumb-list a {
        color: #777c83;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: .2s ease;
    }

        .city-breadcrumb-list a:hover {
            color: var(--brand);
        }

    .city-breadcrumb-list .separator {
        color: #b8bbc0;
        font-size: 10px;
    }

    .city-breadcrumb-list .active {
        color: var(--brand);
        font-weight: 700;
    }


/* =========================================================
   Hero
   ========================================================= */

.city-hero {
    background: #fff;
    border-bottom: 1px solid #eceef1;
}

.city-hero-inner {
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 65px 0;
}

.city-hero-content {
    max-width: 720px;
}

.city-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--brand-light);
    color: var(--brand);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}

    .city-eyebrow i {
        font-size: 13px;
    }

.city-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -1px;
}

    .city-hero h1 strong {
        color: var(--brand);
        font-weight: 800;
    }

.city-hero-content > p {
    max-width: 680px;
    margin: 0;
    color: #73777d;
    font-size: 16px;
    line-height: 2;
}


/* =========================================================
   Stats
   ========================================================= */

.city-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 32px;
}

.city-stat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    background: var(--brand-soft);
    border: 1px solid #eadff1;
    border-radius: 14px;
}

.city-stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand);
    color: #fff;
    border-radius: 11px;
    font-size: 14px;
}

.city-stat strong {
    display: block;
    color: #26212a;
    font-size: 15px;
    line-height: 1.3;
}

.city-stat span {
    display: block;
    margin-top: 3px;
    color: #85818a;
    font-size: 11px;
}


/* =========================================================
   Hero Visual
   ========================================================= */

.city-hero-visual {
    flex: 0 0 260px;
    display: flex;
    justify-content: center;
}

.city-location-card {
    position: relative;
    width: 230px;
    height: 230px;
    overflow: hidden;
    border-radius: 40px;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(94, 45, 148, .25);
}

    .city-location-card > i {
        position: relative;
        z-index: 2;
        font-size: 62px;
        margin-bottom: 12px;
    }

    .city-location-card strong {
        position: relative;
        z-index: 2;
        font-size: 20px;
        font-weight: 800;
    }

    .city-location-card span {
        position: relative;
        z-index: 2;
        margin-top: 5px;
        color: rgba(255,255,255,.7);
        font-size: 12px;
    }

.city-location-glow {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    filter: blur(5px);
}


/* =========================================================
   Sections
   ========================================================= */

.city-section {
    padding: 75px 0;
}

.city-top-section {
    background: #fff;
}

.city-all-section {
    background: #f7f8fa;
}


/* =========================================================
   Section Heading
   ========================================================= */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.section-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--brand);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
}

.section-heading h2 {
    margin: 0;
    color: #202126;
    font-size: 26px;
    line-height: 1.5;
    font-weight: 800;
}

.section-heading p {
    margin: 7px 0 0;
    color: #7d8289;
    font-size: 13px;
}

.section-counter {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
}

    .section-counter strong {
        color: var(--brand);
        font-size: 25px;
    }

    .section-counter span {
        color: #858a91;
        font-size: 12px;
    }


/* =========================================================
   Advertisement Grid
   ========================================================= */

.advertisements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}


/* =========================================================
   Advertisement Card
   ========================================================= */

.advertisement-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #e7e9ec;
    border-radius: 18px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .advertisement-card:hover {
        transform: translateY(-6px);
        border-color: #d9c9e5;
        box-shadow: 0 20px 45px rgba(94,45,148,.11);
    }


/* =========================================================
   Image
   ========================================================= */

.advertisement-image {
    position: relative;
    display: block;
    height: 205px;
    overflow: hidden;
    background: #f1f3f5;
}

    .advertisement-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .5s ease;
    }

.advertisement-card:hover
.advertisement-image img {
    transform: scale(1.045);
}

.advertisement-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b5a7bd;
    font-size: 45px;
    background: var(--brand-soft);
}


/* =========================================================
   Featured Badge
   ========================================================= */

.featured-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
    backdrop-filter: blur(8px);
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}


/* =========================================================
   Content
   ========================================================= */

.advertisement-content {
    padding: 19px;
}

.advertisement-category {
    margin-bottom: 8px;
    color: var(--brand);
    font-size: 10px;
    font-weight: 700;
}

.advertisement-content h3 {
    min-height: 48px;
    margin: 0;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.6;
}

    .advertisement-content h3 a {
        color: #17191c;
        text-decoration: none;
        transition: .2s ease;
    }

        .advertisement-content h3 a:hover {
            color: var(--brand);
        }


/* =========================================================
   Rating
   ========================================================= */

.advertisement-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    font-size: 10px;
}

.rating-star {
    color: #e3a900;
    font-size: 15px;
}

.advertisement-rating strong {
    color: #292b30;
    font-size: 12px;
}

.advertisement-rating span:last-child {
    color: #999ea4;
}


/* =========================================================
   Footer
   ========================================================= */

.advertisement-footer {
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #eef0f2;
}

.advertisement-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--brand);
    text-decoration: none;
    font-size: 11px;
    font-weight: 800;
}

    .advertisement-link i {
        transition: transform .25s ease;
    }

    .advertisement-link:hover {
        color: var(--brand-dark);
    }

        .advertisement-link:hover i {
            transform: translateX(-4px);
        }


/* =========================================================
   Empty State
   ========================================================= */

.city-empty-state {
    padding: 75px 30px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dcd3e3;
    border-radius: 20px;
}

.empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-light);
    color: var(--brand);
    border-radius: 20px;
    font-size: 27px;
}

.city-empty-state h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 750;
}

.city-empty-state p {
    margin: 0;
    color: #858a91;
    font-size: 13px;
}


/* =========================================================
   Not Found
   ========================================================= */

.city-not-found {
    max-width: 550px;
    margin: 80px auto;
    padding: 60px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 22px;
}

.not-found-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-light);
    color: var(--brand);
    border-radius: 24px;
    font-size: 32px;
}

.city-not-found h2 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
}

.city-not-found p {
    margin: 0 0 25px;
    color: #858a91;
    font-size: 13px;
    line-height: 1.9;
}

.city-back-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: var(--brand);
    color: #fff;
    border-radius: 11px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    transition: .2s ease;
}

    .city-back-button:hover {
        background: var(--brand-dark);
        color: #fff;
        transform: translateY(-1px);
    }


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {

    .advertisements-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media (max-width: 991px) {

    .city-hero-inner {
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
        padding: 55px 0;
    }

    .city-hero-visual {
        display: none;
    }

    .advertisements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .city-section {
        padding: 55px 0;
    }
}


@media (max-width: 575px) {

    .city-breadcrumb-list {
        padding: 13px 0;
        font-size: 10px;
        gap: 7px;
    }

    .city-hero-inner {
        padding: 40px 0;
    }

    .city-hero h1 {
        font-size: 30px;
        letter-spacing: -.5px;
    }

    .city-hero-content > p {
        font-size: 13px;
    }

    .city-stats {
        width: 100%;
        gap: 8px;
    }

    .city-stat {
        flex: 1;
        padding: 9px;
    }

    .city-stat-icon {
        width: 35px;
        height: 35px;
        flex: 0 0 35px;
        font-size: 12px;
    }

    .city-stat strong {
        font-size: 13px;
    }

    .city-stat span {
        font-size: 9px;
    }

    .city-section {
        padding: 45px 0;
    }

    .section-heading {
        align-items: flex-start;
        margin-bottom: 24px;
    }

        .section-heading h2 {
            font-size: 21px;
        }

        .section-heading p {
            font-size: 11px;
            line-height: 1.8;
        }

    .section-counter {
        display: none;
    }

    .advertisements-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .advertisement-card {
        border-radius: 14px;
    }

    .advertisement-image {
        height: 145px;
    }

    .advertisement-content {
        padding: 13px;
    }

    .advertisement-category {
        font-size: 8px;
    }

    .advertisement-content h3 {
        min-height: 43px;
        font-size: 12px;
        line-height: 1.55;
    }

    .advertisement-rating {
        font-size: 9px;
    }

    .advertisement-footer {
        margin-top: 11px;
        padding-top: 10px;
    }

    .advertisement-link {
        font-size: 9px;
    }

    .featured-badge {
        top: 8px;
        right: 8px;
        padding: 5px 7px;
        font-size: 8px;
    }

    .city-empty-state {
        padding: 55px 20px;
    }
}
/* =========================================================
   Province Advertisements
   ========================================================= */

.province-page {
    background: #f7f8fa;
    color: #17191c;
}


/* =========================================================
   Breadcrumb
   ========================================================= */

.province-breadcrumb {
    background: #fff;
    border-bottom: 1px solid #eceef1;
}

.province-breadcrumb-list {
    list-style: none;
    padding: 16px 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

    .province-breadcrumb-list a {
        color: #73777d;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 7px;
        transition: .2s ease;
    }

        .province-breadcrumb-list a:hover {
            color: #111;
        }

    .province-breadcrumb-list .separator {
        color: #b5b8bd;
        font-size: 11px;
    }

    .province-breadcrumb-list .active {
        color: #17191c;
        font-weight: 600;
    }


/* =========================================================
   Hero
   ========================================================= */

.province-hero {
    background: #fff;
    border-bottom: 1px solid #eceef1;
}

.province-hero-inner {
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 65px 0;
}

.province-hero-content {
    max-width: 700px;
}

.province-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 30px;
    background: #d2b8ff;
    color: #3b0d63;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

    .province-eyebrow i {
        font-size: 14px;
    }

.province-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -1px;
    color: #3b0d63;
}

    .province-hero h1 strong {
        font-weight: 800;
    }

.province-hero-content > p {
    max-width: 650px;
    margin: 0;
    color: #73777d;
    font-size: 16px;
    line-height: 2;
}


/* =========================================================
   Stats
   ========================================================= */

.province-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

.province-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fafbfc;
    border: 1px solid #e9ebee;
    border-radius: 14px;
}

.province-stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #3b0d63;
    color: #fff;
}

.province-stat strong {
    display: block;
    font-size: 17px;
    line-height: 1.2;
}

.province-stat span {
    display: block;
    margin-top: 3px;
    color: #858a91;
    font-size: 12px;
}


/* =========================================================
   Hero Visual
   ========================================================= */

.province-hero-visual {
    flex: 0 0 260px;
    display: flex;
    justify-content: center;
}

.province-map-card {
    position: relative;
    width: 230px;
    height: 230px;
    border-radius: 40px;
    background: #3b0d63;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .13);
}

    .province-map-card > i {
        position: relative;
        z-index: 2;
        font-size: 65px;
        margin-bottom: 12px;
    }

    .province-map-card span {
        position: relative;
        z-index: 2;
        font-size: 19px;
        font-weight: 700;
    }

    .province-map-card small {
        position: relative;
        z-index: 2;
        color: rgba(255,255,255,.55);
        margin-top: 5px;
    }

.province-map-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    filter: blur(5px);
}


/* =========================================================
   Sections
   ========================================================= */

.province-section {
    padding: 75px 0;
}

.cities-section {
    background: #f3ecff;
}

.top-advertisements-section {
    background: #fff;
}

.all-advertisements-section {
    background: #f3ecff;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.section-kicker {
    display: block;
    margin-bottom: 8px;
    color: #858a91;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
}

.section-heading h2 {
    color: #3b0d63;
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.5;
}

.section-heading p {
    margin: 7px 0 0;
    color: #7d8289;
    font-size: 14px;
}

.section-counter {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: #858a91;
}

    .section-counter strong {
        color: #17191c;
        font-size: 24px;
    }

    .section-counter span {
        font-size: 13px;
    }


/* =========================================================
   Cities
   ========================================================= */

.cities-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.city-card {
    min-height: 105px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 16px;
    color: inherit;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .city-card:hover {
        color: inherit;
        transform: translateY(-4px);
        border-color: #d5d8dc;
        box-shadow: 0 15px 35px rgba(0,0,0,.07);
    }

.city-card-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f1f3f5;
    color: #292c30;
    font-size: 21px;
    transition: .25s ease;
}

.city-card:hover .city-card-icon {
    background: #17191c;
    color: #fff;
}

.city-card-content {
    min-width: 0;
}

    .city-card-content h3 {
        margin: 0 0 6px;
        font-size: 15px;
        font-weight: 700;
    }

    .city-card-content span {
        display: flex;
        align-items: center;
        gap: 7px;
        color: #888d94;
        font-size: 11px;
    }

        .city-card-content span i {
            transition: transform .25s ease;
        }

.city-card:hover .city-card-content span i {
    transform: translateX(-4px);
}


/* =========================================================
   Advertisements
   ========================================================= */

.advertisements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.advertisement-card {
    background: #fff;
    border: 1px solid #e7e9ec;
    border-radius: 18px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .advertisement-card:hover {
        transform: translateY(-6px);
        border-color: #d9dce0;
        box-shadow: 0 20px 45px rgba(0,0,0,.09);
    }


/* =========================================================
   Advertisement Image
   ========================================================= */

.advertisement-image {
    position: relative;
    display: block;
    height: 205px;
    background: #f1f3f5;
    overflow: hidden;
}

    .advertisement-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .5s ease;
    }

.advertisement-card:hover .advertisement-image img {
    transform: scale(1.045);
}

.advertisement-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b2b6bc;
    font-size: 45px;
}

.featured-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 30px;
    background: rgba(255,255,255,.94);
    color: #303338;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}


/* =========================================================
   Advertisement Content
   ========================================================= */

.advertisement-content {
    padding: 19px;
}

.advertisement-category {
    margin-bottom: 8px;
    color: #858a91;
    font-size: 11px;
}

.advertisement-content h3 {
    min-height: 48px;
    margin: 0;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.6;
}

    .advertisement-content h3 a {
        color: #3b0d63;
        text-decoration: none;
        transition: .2s ease;
    }

        .advertisement-content h3 a:hover {
            color: #555b62;
        }


/* =========================================================
   Rating
   ========================================================= */

.advertisement-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    font-size: 11px;
}

.rating-star {
    color: #e0a500;
    font-size: 15px;
}

.advertisement-rating strong {
    font-size: 12px;
}

.advertisement-rating span:last-child {
    color: #999ea4;
}


/* =========================================================
   Footer
   ========================================================= */

.advertisement-footer {
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #eef0f2;
}

.advertisement-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #3b0d63;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

    .advertisement-link i {
        transition: transform .25s ease;
    }

    .advertisement-link:hover {
        color: #111;
    }

        .advertisement-link:hover i {
            transform: translateX(-4px);
        }


/* =========================================================
   Empty State
   ========================================================= */

.province-empty-state {
    padding: 75px 30px;
    text-align: center;
    background: #fff;
    border: 1px dashed #dfe2e6;
    border-radius: 20px;
}

.empty-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #f1f3f5;
    color: #858a91;
    font-size: 27px;
}

.province-empty-state h3 {
    margin: 0 0 8px;
    font-size: 18px;
}

.province-empty-state p {
    margin: 0;
    color: #858a91;
    font-size: 13px;
}


/* =========================================================
   Province Not Found
   ========================================================= */

.province-not-found {
    margin: 80px auto;
    max-width: 550px;
    padding: 60px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 22px;
}

.not-found-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: #f1f3f5;
    color: #777c82;
    font-size: 32px;
}

.province-not-found h2 {
    margin: 0 0 10px;
    font-size: 22px;
}

.province-not-found p {
    margin: 0 0 25px;
    color: #858a91;
    line-height: 1.9;
    font-size: 13px;
}

.province-back-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    background: #17191c;
    color: #fff;
    border-radius: 11px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .2s ease;
}

    .province-back-button:hover {
        background: #303338;
        color: #fff;
    }


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1199px) {

    .advertisements-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cities-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .province-hero-inner {
        padding: 55px 0;
    }
}


@media (max-width: 991px) {

    .province-hero-inner {
        min-height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    .province-hero-visual {
        display: none;
    }

    .advertisements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .province-section {
        padding: 55px 0;
    }
}


@media (max-width: 575px) {

    .province-breadcrumb-list {
        padding: 13px 0;
        font-size: 11px;
    }

    .province-hero-inner {
        padding: 40px 0;
    }

    .province-hero h1 {
        font-size: 30px;
        letter-spacing: -.5px;
    }

    .province-hero-content > p {
        font-size: 13px;
    }

    .province-stats {
        width: 100%;
        gap: 8px;
    }

    .province-stat {
        flex: 1;
        padding: 10px;
    }

    .province-stat-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        font-size: 13px;
    }

    .province-stat strong {
        font-size: 15px;
    }

    .province-stat span {
        font-size: 10px;
    }

    .province-section {
        padding: 45px 0;
    }

    .section-heading {
        align-items: flex-start;
        margin-bottom: 24px;
    }

        .section-heading h2 {
            font-size: 21px;
        }

        .section-heading p {
            font-size: 12px;
            line-height: 1.8;
        }

    .section-counter {
        display: none;
    }

    .cities-grid {
        grid-template-columns: 1fr 1fr;
        gap: 9px;
    }

    .city-card {
        min-height: 90px;
        padding: 12px;
        gap: 10px;
        border-radius: 13px;
    }

    .city-card-icon {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 10px;
        font-size: 16px;
    }

    .city-card-content h3 {
        font-size: 13px;
    }

    .city-card-content span {
        font-size: 9px;
    }

    .advertisements-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .advertisement-card {
        border-radius: 14px;
    }

    .advertisement-image {
        height: 145px;
    }

    .advertisement-content {
        padding: 13px;
    }

    .advertisement-category {
        font-size: 9px;
    }

    .advertisement-content h3 {
        min-height: 43px;
        font-size: 13px;
        line-height: 1.55;
    }

    .advertisement-rating {
        font-size: 9px;
    }

    .advertisement-footer {
        margin-top: 12px;
        padding-top: 11px;
    }

    .advertisement-link {
        font-size: 10px;
    }

    .featured-badge {
        top: 8px;
        right: 8px;
        padding: 5px 7px;
        font-size: 9px;
    }

    .province-empty-state {
        padding: 55px 20px;
    }
}
/* =========================================================
   MEIDASHOW AGENCIES
========================================================= */

.ms-agencies-page {
    background: radial-gradient( circle at 10% 10%, rgba(108, 76, 255, .05), transparent 30% ), #f7f8fc;
    min-height: 100vh;
}


/* =========================================================
   HERO
========================================================= */

.ms-agencies-hero {
    position: relative;
    overflow: hidden;
    padding: 95px 0 85px;
    background: linear-gradient( 135deg, #17122f 0%, #251b52 50%, #35216c 100% );
    color: #fff;
}

.ms-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: auto;
    text-align: center;
}

.ms-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 100px;
    background: rgba(255,255,255,.08);
    font-size: 13px;
    color: rgba(255,255,255,.9);
}

.ms-agencies-hero h1 {
    color: whitesmoke;
    margin: 25px 0 18px;
    font-size: clamp(32px, 5vw, 54px);
    font-weight: 900;
    line-height: 1.35;
}

    .ms-agencies-hero h1 span {
        color: #bda7ff;
    }

.ms-agencies-hero p {
    max-width: 680px;
    margin: auto;
    color: rgba(255,255,255,.72);
    font-size: 17px;
    line-height: 2;
}

.ms-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    margin-top: 38px;
    padding: 13px 22px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
}

.ms-hero-stat {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .ms-hero-stat strong {
        font-size: 25px;
    }

    .ms-hero-stat span {
        color: rgba(255,255,255,.75);
        font-size: 13px;
    }

    .ms-hero-stat i {
        font-size: 21px;
    }

.ms-stat-divider {
    width: 1px;
    height: 28px;
    background: rgba(255,255,255,.15);
}


/* ORBS */

.ms-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .25;
}

.ms-hero-orb-one {
    width: 350px;
    height: 350px;
    right: -100px;
    top: -130px;
    background: #7955ff;
}

.ms-hero-orb-two {
    width: 280px;
    height: 280px;
    left: -100px;
    bottom: -150px;
    background: #a87cff;
}


/* =========================================================
   INTRO
========================================================= */

.ms-agencies-intro {
    position: relative;
    margin-top: -35px;
    z-index: 5;
}

.ms-intro-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px 30px;
    border: 1px solid #ecebf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(31, 25, 61, .08);
}

.ms-intro-icon {
    flex: 0 0 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #f0ebff;
    color: #6845dc;
    font-size: 24px;
}

.ms-intro-card h2 {
    margin: 0 0 7px;
    font-size: 19px;
    font-weight: 800;
    color: #25213a;
}

.ms-intro-card p {
    margin: 0;
    color: #777487;
    line-height: 1.9;
    font-size: 14px;
}


/* =========================================================
   SECTION
========================================================= */

.ms-agencies-section {
    padding: 70px 0 100px;
}

.ms-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 30px;
}

.ms-section-eyebrow {
    color: #7654e9;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ms-section-heading h2 {
    margin: 8px 0 0;
    font-size: 30px;
    font-weight: 900;
    color: #27233c;
}

.ms-agency-count {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eceaf3;
    color: #625d72;
    font-size: 13px;
}

    .ms-agency-count i {
        color: #7251e6;
    }


/* =========================================================
   AGENCY CARD
========================================================= */

.ms-agency-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #ebe9f2;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(30, 25, 60, .05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .ms-agency-card:hover {
        transform: translateY(-7px);
        border-color: #dcd3ff;
        box-shadow: 0 20px 45px rgba(74, 52, 150, .12);
    }


/* IMAGE */

.ms-agency-image {
    position: relative;
    height: 245px;
    overflow: hidden;
}

    .ms-agency-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .5s ease;
    }

.ms-agency-card:hover .ms-agency-image img {
    transform: scale(1.06);
}

.ms-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(16, 12, 31, .65), transparent 55% );
}

.ms-agency-badge {
    position: absolute;
    right: 16px;
    bottom: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    color: #473277;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

    .ms-agency-badge i {
        color: #7252e5;
    }


/* CONTENT */

.ms-agency-content {
    padding: 23px;
}

.ms-agency-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.ms-small-label {
    color: #958fa4;
    font-size: 11px;
}

.ms-agency-title-row h3 {
    margin: 5px 0 0;
    font-size: 20px;
    font-weight: 850;
    color: #29253b;
}

.ms-agency-arrow {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f2efff;
    color: #6544d6;
    transition: .3s;
}

.ms-agency-card:hover .ms-agency-arrow {
    background: #6845dc;
    color: #fff;
}


/* INFO */

.ms-agency-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
}

.ms-info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border-radius: 13px;
    background: #f8f7fb;
}

.ms-info-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #eeeaff;
    color: #6747d7;
}

.ms-info-item small {
    display: block;
    color: #9993a7;
    font-size: 9px;
    margin-bottom: 2px;
}

.ms-info-item strong {
    display: block;
    color: #403b50;
    font-size: 12px;
}


/* ADDRESS */

.ms-address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    min-height: 48px;
    color: #7d788a;
    font-size: 12px;
    line-height: 1.8;
}

    .ms-address i {
        color: #7251df;
        margin-top: 4px;
    }


/* ACTION */

.ms-agency-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #f0eef4;
    color: #6242d2;
    font-size: 13px;
    font-weight: 750;
}

    .ms-agency-action i {
        transition: transform .3s;
    }

.ms-agency-card:hover .ms-agency-action i {
    transform: translateX(-5px);
}


/* =========================================================
   SELLERS MODAL
========================================================= */

.ms-sellers-modal .modal-dialog {
    max-width: 1100px;
}

.ms-sellers-modal .modal-content {
    overflow: hidden;
    border: none;
    border-radius: 28px;
    background: #f8f8fc;
    box-shadow: 0 30px 90px rgba(24, 18, 55, .25);
}

.ms-sellers-modal .modal-header {
    position: relative;
    padding: 25px 30px;
    border: none;
    background: #fff;
}

.ms-modal-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ms-modal-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #eeeaff;
    color: #6745d7;
    font-size: 22px;
}

.ms-modal-heading span {
    display: block;
    color: #918b9e;
    font-size: 11px;
}

.ms-modal-heading h2 {
    margin: 4px 0 0;
    font-size: 21px;
    font-weight: 850;
    color: #28243a;
}

.ms-modal-close {
    position: absolute;
    left: 22px;
    top: 22px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: #f4f3f7;
    color: #625c70;
    transition: .25s;
}

    .ms-modal-close:hover {
        background: #ebe8f4;
        color: #3c354e;
    }

.ms-sellers-modal .modal-body {
    padding: 30px;
}


/* =========================================================
   SELLER CARD
========================================================= */

.ms-seller-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e9e7f0;
    border-radius: 21px;
    background: #fff;
    box-shadow: 0 7px 25px rgba(40, 30, 80, .05);
}

.ms-seller-photo {
    position: relative;
    height: 250px;
    overflow: hidden;
}

    .ms-seller-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }


    .ms-seller-status i {
        color: #35a56a;
    }

.ms-seller-content {
    padding: 19px;
}

    .ms-seller-content h3 {
        margin: 0 0 15px;
        font-size: 18px;
        font-weight: 800;
        color: #29253a;
    }

.ms-seller-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px;
    border-radius: 13px;
    background: #f8f7fb;
}

    .ms-seller-phone > span {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #eeeaff;
        color: #6847d7;
    }

    .ms-seller-phone small {
        display: block;
        color: #9690a3;
        font-size: 9px;
    }

    .ms-seller-phone strong {
        display: block;
        margin-top: 2px;
        color: #403b50;
        direction: ltr;
        font-size: 12px;
    }


/* =========================================================
   LOADING
========================================================= */

.ms-sellers-loading {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: #817b8e;
    font-size: 13px;
}

.ms-loading-spinner {
    width: 43px;
    height: 43px;
    border: 3px solid #e6e2f2;
    border-top-color: #6948dc;
    border-radius: 50%;
    animation: msSpin .8s linear infinite;
}

@keyframes msSpin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   EMPTY / ERROR
========================================================= */

.ms-sellers-empty,
.ms-sellers-error {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.ms-empty-icon,
.ms-error-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 20px;
    background: #efedf5;
    color: #756d82;
    font-size: 26px;
}

.ms-error-icon {
    background: #fff0f0;
    color: #dc6262;
}

.ms-sellers-empty h3,
.ms-sellers-error h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: #383245;
}

.ms-sellers-empty p,
.ms-sellers-error p {
    margin: 0;
    color: #918b9d;
    font-size: 13px;
}

.ms-retry-btn {
    margin-top: 18px;
    padding: 10px 18px;
    border: none;
    border-radius: 11px;
    background: #6846da;
    color: #fff;
    font-size: 12px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .ms-agencies-hero {
        padding: 65px 0 70px;
    }

        .ms-agencies-hero h1 {
            font-size: 31px;
        }

        .ms-agencies-hero p {
            font-size: 14px;
            line-height: 2;
        }

    .ms-hero-stats {
        gap: 18px;
        padding: 11px 15px;
    }

    .ms-intro-card {
        align-items: flex-start;
        padding: 20px;
    }

        .ms-intro-card h2 {
            font-size: 17px;
        }

        .ms-intro-card p {
            font-size: 12px;
        }

    .ms-agencies-section {
        padding-top: 50px;
    }

    .ms-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

        .ms-section-heading h2 {
            font-size: 24px;
        }

    .ms-agency-image {
        height: 220px;
    }

    .ms-agency-content {
        padding: 19px;
    }

    .ms-agency-info {
        grid-template-columns: 1fr;
    }

    .ms-sellers-modal .modal-dialog {
        margin: 10px;
    }

    .ms-sellers-modal .modal-content {
        border-radius: 22px;
    }

    .ms-sellers-modal .modal-header {
        padding: 20px;
    }

    .ms-sellers-modal .modal-body {
        padding: 20px;
    }

    .ms-seller-photo {
        height: 230px;
    }

    .ms-modal-heading h2 {
        font-size: 18px;
    }

    .ms-modal-icon {
        width: 45px;
        height: 45px;
    }
}


@media (max-width: 575px) {

    .ms-agencies-hero h1 {
        font-size: 27px;
    }

    .ms-hero-stats {
        width: 100%;
        justify-content: center;
    }

    .ms-agency-card {
        border-radius: 20px;
    }

    .ms-agency-image {
        height: 205px;
    }

    .ms-seller-photo {
        height: 210px;
    }
}
/* =========================================================
   MEIDASHOW - CONDITIONS PAGE
========================================================= */

.ms-conditions-page {
    --ms-primary: var(--colorOriginal-dark-Level1, #6d28d9);
    --ms-primary-light: #f5efff;
    --ms-text: #202124;
    --ms-muted: #70757d;
    --ms-border: #ececf1;
    --ms-card: #ffffff;
    --ms-bg: #f8f8fb;
    --ms-danger: #dc3545;
    color: var(--ms-text);
    background: var(--ms-bg);
    padding-bottom: 80px;
}


/* =========================================================
   HERO
========================================================= */

.ms-conditions-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 10% 20%, rgba(255,255,255,.12), transparent 30%), linear-gradient(135deg, #24103f, var(--ms-primary));
    color: #fff;
    padding: 80px 20px 100px;
    margin-bottom: 55px;
}

.ms-conditions-hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    margin: auto;
    text-align: center;
}

.ms-conditions-icon {
    width: 82px;
    height: 82px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

    .ms-conditions-icon i {
        font-size: 38px;
    }

.ms-conditions-eyebrow {
    display: block;
    font-size: 14px;
    font-weight: 700;
    opacity: .8;
    margin-bottom: 14px;
}

.ms-conditions-hero h1 {
    color: whitesmoke;
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 18px;
}

.ms-conditions-hero p {
    max-width: 720px;
    margin: auto;
    color: rgba(255,255,255,.82);
    font-size: 17px;
    line-height: 2;
}

.ms-conditions-hero-meta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

    .ms-conditions-hero-meta span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 15px;
        border-radius: 50px;
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.16);
        font-size: 13px;
    }

    .ms-conditions-hero-meta i {
        color: #fff;
    }


/* Glow */

.ms-conditions-hero-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    filter: blur(3px);
}

.ms-glow-one {
    top: -180px;
    right: -100px;
}

.ms-glow-two {
    bottom: -220px;
    left: -100px;
}


/* =========================================================
   MAIN
========================================================= */

.ms-conditions-container {
    position: relative;
}


/* =========================================================
   SIDEBAR
========================================================= */

.ms-conditions-sidebar {
    position: sticky;
    top: 25px;
    background: var(--ms-card);
    border: 1px solid var(--ms-border);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 12px 40px rgba(30,20,50,.06);
}

.ms-sidebar-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 17px;
    font-weight: 900;
    padding-bottom: 16px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--ms-border);
}

    .ms-sidebar-title i {
        color: var(--ms-primary);
    }

.ms-conditions-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .ms-conditions-nav a {
        position: relative;
        display: block;
        padding: 10px 12px;
        border-radius: 10px;
        color: #555;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        transition: .2s ease;
    }

        .ms-conditions-nav a:hover {
            color: var(--ms-primary);
            background: var(--ms-primary-light);
            transform: translateX(-3px);
        }


/* =========================================================
   CONTENT
========================================================= */

.ms-conditions-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* =========================================================
   INTRO
========================================================= */

.ms-condition-intro {
    display: flex;
    gap: 20px;
    padding: 30px;
    background: #fff;
    border: 1px solid var(--ms-border);
    border-radius: 24px;
    box-shadow: 0 12px 35px rgba(30,20,50,.05);
}

.ms-condition-intro-icon {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--ms-primary);
    background: var(--ms-primary-light);
    font-size: 24px;
}

.ms-section-label {
    display: block;
    color: var(--ms-primary);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 5px;
}

.ms-condition-intro h2 {
    margin: 0 0 14px;
    font-size: 24px;
    font-weight: 900;
}

.ms-condition-intro p {
    color: #65666b;
    line-height: 2;
    margin-bottom: 9px;
}


/* =========================================================
   RULE CARD
========================================================= */

.ms-condition-card {
    display: flex;
    gap: 24px;
    padding: 30px;
    background: var(--ms-card);
    border: 1px solid var(--ms-border);
    border-radius: 22px;
    box-shadow: 0 10px 35px rgba(30,20,50,.045);
    scroll-margin-top: 25px;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .ms-condition-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 45px rgba(30,20,50,.08);
    }

.ms-condition-number {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--ms-primary);
    background: var(--ms-primary-light);
    font-size: 17px;
    font-weight: 900;
}

.ms-condition-body {
    flex: 1;
}

    .ms-condition-body h2 {
        margin: 2px 0 18px;
        font-size: 21px;
        font-weight: 900;
    }

    .ms-condition-body p {
        color: #666;
        line-height: 2;
        margin-bottom: 12px;
    }


/* =========================================================
   RULE LIST
========================================================= */

.ms-rule-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

    .ms-rule-list > div {
        position: relative;
        padding: 12px 17px 12px 15px;
        border-radius: 11px;
        background: #fafafd;
        color: #555;
        line-height: 1.9;
        font-size: 14px;
    }

        .ms-rule-list > div::before {
            content: "";
            position: absolute;
            right: 0;
            top: 10px;
            bottom: 10px;
            width: 3px;
            border-radius: 4px;
            background: var(--ms-primary);
        }


/* =========================================================
   DANGER
========================================================= */

.ms-danger-card {
    border-color: rgba(220,53,69,.15);
}

    .ms-danger-card .ms-condition-number {
        color: var(--ms-danger);
        background: #fff0f1;
    }

.ms-danger-list > div {
    background: #fff8f8;
}

    .ms-danger-list > div::before {
        background: var(--ms-danger);
    }

.ms-condition-lead {
    font-weight: 700;
    color: #444 !important;
}


/* =========================================================
   TAGS
========================================================= */

.ms-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

    .ms-tag-list span {
        padding: 9px 13px;
        border-radius: 50px;
        background: var(--ms-primary-light);
        color: var(--ms-primary);
        font-size: 13px;
        font-weight: 700;
    }


/* =========================================================
   FINAL STATEMENT
========================================================= */

.ms-final-statement {
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    padding: 45px 35px;
    border-radius: 28px;
    text-align: center;
    color: #fff;
    background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.12), transparent 30%), linear-gradient(135deg, #25113f, var(--ms-primary));
    box-shadow: 0 20px 60px rgba(65,30,100,.18);
}

.ms-final-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 17px;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    font-size: 28px;
}

.ms-final-statement > span {
    display: block;
    font-size: 13px;
    opacity: .7;
    margin-bottom: 8px;
}

.ms-final-statement h2 {
    color: whitesmoke;
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 17px;
}

.ms-final-statement p {
    max-width: 760px;
    margin: 0 auto 20px;
    color: rgba(255,255,255,.84);
    line-height: 2;
}

.ms-final-statement strong {
    font-size: 14px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {

    .ms-conditions-hero {
        padding: 60px 18px 80px;
        margin-bottom: 30px;
    }

    .ms-conditions-sidebar {
        position: relative;
        top: auto;
    }

    .ms-conditions-nav {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .ms-condition-card,
    .ms-condition-intro {
        padding: 24px;
    }
}


@media (max-width: 575px) {

    .ms-conditions-page {
        padding-bottom: 45px;
    }

    .ms-conditions-hero {
        padding: 45px 15px 60px;
    }

    .ms-conditions-icon {
        width: 68px;
        height: 68px;
        border-radius: 20px;
    }

        .ms-conditions-icon i {
            font-size: 30px;
        }

    .ms-conditions-hero h1 {
        font-size: 26px;
        line-height: 1.65;
    }

    .ms-conditions-hero p {
        font-size: 14px;
        line-height: 2;
    }

    .ms-conditions-hero-meta {
        gap: 7px;
    }

        .ms-conditions-hero-meta span {
            font-size: 11px;
            padding: 7px 10px;
        }


    .ms-conditions-sidebar {
        padding: 15px;
        border-radius: 18px;
    }

    .ms-sidebar-title {
        font-size: 15px;
    }

    .ms-conditions-nav {
        grid-template-columns: 1fr 1fr;
    }

        .ms-conditions-nav a {
            font-size: 11px;
            padding: 9px 7px;
        }


    .ms-condition-intro {
        flex-direction: column;
        padding: 20px;
        border-radius: 18px;
    }

    .ms-condition-intro-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
    }

    .ms-condition-intro h2 {
        font-size: 20px;
    }


    .ms-condition-card {
        gap: 14px;
        padding: 20px;
        border-radius: 18px;
    }

    .ms-condition-number {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 13px;
    }

    .ms-condition-body h2 {
        font-size: 17px;
        line-height: 1.7;
        margin-bottom: 13px;
    }

    .ms-rule-list > div {
        padding: 10px 13px 10px 10px;
        font-size: 13px;
        line-height: 1.9;
    }

    .ms-tag-list span {
        font-size: 11px;
        padding: 8px 10px;
    }


    .ms-final-statement {
        padding: 35px 20px;
        border-radius: 22px;
    }

        .ms-final-statement h2 {
            font-size: 22px;
        }

        .ms-final-statement p {
            font-size: 13px;
        }

        .ms-final-statement strong {
            font-size: 12px;
            line-height: 2;
        }
}
/* =========================================================
   MEIDAAPPS - BUG REPORT PAGE
   ========================================================= */

.bug-report-page {
    direction: rtl;
    background: #faf9fc;
    color: #242029;
    overflow: hidden;
}


/* =========================================================
   HERO
   ========================================================= */

.bug-report-hero {
    position: relative;
    min-height: 430px;
    padding: 70px 0 75px;
    background: radial-gradient(circle at 80% 20%, rgba(125, 48, 180, .13), transparent 30%), radial-gradient(circle at 15% 80%, rgba(125, 48, 180, .08), transparent 30%), linear-gradient(135deg, #ffffff 0%, #faf7fd 100%);
    border-bottom: 1px solid rgba(90, 30, 120, .08);
}


.bug-report-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}


.bug-report-hero-content {
    flex: 1;
    max-width: 680px;
}


.bug-report-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 100px;
    background: rgba(125, 48, 180, .08);
    border: 1px solid rgba(125, 48, 180, .12);
    color: var(--colorOriginal-dark-Level1);
    font-size: 13px;
    font-weight: 700;
}


    .bug-report-eyebrow i {
        font-size: 15px;
    }


.bug-report-hero h1 {
    margin: 22px 0 18px;
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -1.5px;
}


    .bug-report-hero h1 span {
        color: var(--colorOriginal-dark-Level1);
    }


.bug-report-hero-content > p {
    max-width: 620px;
    margin: 0;
    color: #716b78;
    font-size: 16px;
    line-height: 2.1;
}


.bug-report-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}


    .bug-report-hero-badges span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 13px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #eee8f2;
        color: #625c69;
        font-size: 12px;
        font-weight: 600;
        box-shadow: 0 5px 20px rgba(50, 20, 70, .04);
    }


    .bug-report-hero-badges i {
        color: var(--colorOriginal-dark-Level1);
    }


/* Hero image */

.bug-report-hero-image {
    position: relative;
    width: 390px;
    min-width: 390px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.bug-report-image-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(125, 48, 180, .12);
    filter: blur(50px);
}


.bug-report-image-card {
    position: relative;
    width: 330px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 35px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(125, 48, 180, .12);
    box-shadow: 0 25px 70px rgba(50, 20, 70, .12), inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(15px);
}


    .bug-report-image-card img {
        width: 85%;
        max-height: 250px;
        object-fit: contain;
        filter: drop-shadow(0 20px 30px rgba(60,20,80,.12));
    }


/* Decorative glows */

.bug-report-hero-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}


.glow-one {
    width: 180px;
    height: 180px;
    right: -100px;
    top: 50px;
    background: rgba(125, 48, 180, .05);
}


.glow-two {
    width: 250px;
    height: 250px;
    left: -150px;
    bottom: -100px;
    background: rgba(125, 48, 180, .04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.bug-report-content {
    padding: 70px 0;
}


.bug-report-info {
    padding: 10px 10px 10px 30px;
}


.bug-report-section-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--colorOriginal-dark-Level1);
    font-size: 13px;
    font-weight: 800;
}


.bug-report-info h2 {
    margin: 0 0 18px;
    font-size: 31px;
    font-weight: 900;
    line-height: 1.5;
}


    .bug-report-info h2 strong {
        color: var(--colorOriginal-dark-Level1);
    }


.bug-report-info-description {
    margin-bottom: 32px;
    color: #77717d;
    font-size: 14px;
    line-height: 2;
}


/* =========================================================
   STEPS
   ========================================================= */

.bug-report-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid #eeeaf0;
}


    .bug-report-step:last-of-type {
        border-bottom: none;
    }


.bug-report-step-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(125, 48, 180, .08);
    color: var(--colorOriginal-dark-Level1);
    font-size: 11px;
    font-weight: 900;
}


.bug-report-step h3 {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 800;
}


.bug-report-step p {
    margin: 0;
    color: #88818e;
    font-size: 12px;
    line-height: 1.9;
}


/* =========================================================
   NOTICE
   ========================================================= */

.bug-report-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 25px;
    padding: 17px;
    border-radius: 15px;
    background: linear-gradient( 135deg, rgba(125,48,180,.07), rgba(125,48,180,.025) );
    border: 1px solid rgba(125,48,180,.09);
}


.bug-report-notice-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--colorOriginal-dark-Level1);
}


.bug-report-notice strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}


.bug-report-notice p {
    margin: 0;
    color: #7d7684;
    font-size: 11px;
    line-height: 1.9;
}


/* =========================================================
   FORM CARD
   ========================================================= */

.bug-report-form-card {
    padding: 32px;
    border-radius: 25px;
    background: #fff;
    border: 1px solid #eee8f2;
    box-shadow: 0 25px 70px rgba(40, 15, 60, .09), 0 5px 20px rgba(40, 15, 60, .04);
}


.bug-report-form-header {
    display: flex;
    align-items: center;
    gap: 15px;
}


.bug-report-form-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--colorOriginal-dark-Level1);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 25px rgba(125, 48, 180, .22);
}


.bug-report-form-header span {
    display: block;
    margin-bottom: 4px;
    color: #918997;
    font-size: 11px;
}


.bug-report-form-header h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 900;
}


.bug-report-form-divider {
    height: 1px;
    margin: 25px 0;
    background: #eeeaf0;
}


/* =========================================================
   FORM ELEMENTS
   ========================================================= */

.bug-form-group {
    margin-bottom: 22px;
}


    .bug-form-group label {
        display: block;
        margin-bottom: 9px;
        color: #403a46;
        font-size: 13px;
        font-weight: 800;
    }


        .bug-form-group label span {
            color: #d63384;
        }


.bug-input-wrapper,
.bug-textarea-wrapper {
    position: relative;
}


    .bug-input-wrapper i,
    .bug-textarea-wrapper i {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #aaa2b1;
        font-size: 17px;
        pointer-events: none;
    }


    .bug-textarea-wrapper i {
        top: 20px;
        transform: none;
    }


    .bug-input-wrapper input,
    .bug-textarea-wrapper textarea {
        width: 100%;
        border: 1px solid #e8e2eb;
        background: #fcfbfd;
        border-radius: 13px;
        color: #2d2732;
        outline: none;
        transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }


    .bug-input-wrapper input {
        height: 52px;
        padding: 0 46px 0 15px;
    }


    .bug-textarea-wrapper textarea {
        min-height: 180px;
        resize: vertical;
        padding: 15px 46px 15px 15px;
        line-height: 2;
    }


        .bug-input-wrapper input::placeholder,
        .bug-textarea-wrapper textarea::placeholder {
            color: #b2acb6;
        }


        .bug-input-wrapper input:focus,
        .bug-textarea-wrapper textarea:focus {
            border-color: var(--colorOriginal-dark-Level1);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(125,48,180,.07);
        }


    .bug-input-wrapper:focus-within i,
    .bug-textarea-wrapper:focus-within i {
        color: var(--colorOriginal-dark-Level1);
    }


/* =========================================================
   FORM HELPER
   ========================================================= */

.bug-form-helper {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 9px;
    color: #96909b;
    font-size: 10px;
    line-height: 1.8;
}


    .bug-form-helper i {
        color: var(--colorOriginal-dark-Level1);
        font-size: 13px;
        margin-top: 2px;
    }


/* =========================================================
   SUBMIT
   ========================================================= */

.bug-submit-button {
    width: 100%;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: none;
    border-radius: 13px;
    background: var(--colorOriginal-dark-Level1);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(125,48,180,.20);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}


    .bug-submit-button i {
        transition: transform .2s ease;
    }


    .bug-submit-button:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
        box-shadow: 0 17px 35px rgba(125,48,180,.25);
    }


        .bug-submit-button:hover i {
            transform: translateX(-4px);
        }


    .bug-submit-button:active {
        transform: translateY(0);
    }


/* =========================================================
   FORM FOOTER
   ========================================================= */

.bug-form-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 18px;
    color: #aaa3ae;
    font-size: 10px;
}


    .bug-form-footer i {
        color: var(--colorOriginal-dark-Level1);
    }


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.bug-report-bottom {
    padding: 0 0 70px;
}


.bug-report-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    border-radius: 20px;
    background: linear-gradient( 135deg, var(--colorOriginal-dark-Level1), #672b88 );
    color: #fff;
    box-shadow: 0 20px 50px rgba(90, 30, 120, .16);
}


    .bug-report-bottom-inner span {
        font-size: 11px;
        opacity: .75;
    }


    .bug-report-bottom-inner h2 {
        color: whitesmoke;
        margin: 6px 0 0;
        font-size: 17px;
        font-weight: 800;
    }


.bug-report-bottom-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255,255,255,.13);
    font-size: 24px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .bug-report-hero {
        min-height: auto;
        padding: 45px 0 40px;
    }


    .bug-report-hero-inner {
        flex-direction: column-reverse;
        gap: 30px;
        text-align: center;
    }


    .bug-report-hero-content {
        max-width: 100%;
    }


        .bug-report-hero-content > p {
            margin: auto;
        }


    .bug-report-hero-badges {
        justify-content: center;
    }


    .bug-report-hero-image {
        width: 100%;
        min-width: 0;
    }


    .bug-report-image-card {
        width: 260px;
        height: 220px;
        border-radius: 28px;
    }


        .bug-report-image-card img {
            max-height: 185px;
        }


    .bug-report-content {
        padding: 45px 0;
    }


    .bug-report-info {
        padding: 0;
    }


        .bug-report-info h2 {
            font-size: 27px;
        }


    .bug-report-form-card {
        padding: 25px 20px;
    }
}


@media (max-width: 575px) {

    .bug-report-hero {
        padding: 30px 0 35px;
    }


    .bug-report-eyebrow {
        font-size: 11px;
    }


    .bug-report-hero h1 {
        margin-top: 16px;
        font-size: 29px;
        line-height: 1.55;
    }


    .bug-report-hero-content > p {
        font-size: 12px;
        line-height: 2;
    }


    .bug-report-hero-badges {
        gap: 6px;
        margin-top: 20px;
    }


        .bug-report-hero-badges span {
            padding: 7px 9px;
            font-size: 9px;
        }


    .bug-report-image-card {
        width: 220px;
        height: 185px;
    }


        .bug-report-image-card img {
            max-height: 155px;
        }


    .bug-report-content {
        padding: 30px 0;
    }


    .bug-report-info h2 {
        font-size: 23px;
    }


    .bug-report-info-description {
        font-size: 12px;
        line-height: 2;
    }


    .bug-report-step {
        padding: 14px 0;
    }


    .bug-report-step-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 10px;
        font-size: 9px;
    }


    .bug-report-step h3 {
        font-size: 12px;
    }


    .bug-report-step p {
        font-size: 10px;
    }


    .bug-report-notice {
        padding: 13px;
    }


    .bug-report-form-card {
        padding: 20px 15px;
        border-radius: 18px;
    }


    .bug-report-form-header {
        gap: 11px;
    }


    .bug-report-form-icon {
        width: 43px;
        height: 43px;
        min-width: 43px;
        border-radius: 12px;
        font-size: 17px;
    }


    .bug-report-form-header span {
        font-size: 9px;
    }


    .bug-report-form-header h2 {
        font-size: 15px;
    }


    .bug-report-form-divider {
        margin: 20px 0;
    }


    .bug-form-group {
        margin-bottom: 17px;
    }


        .bug-form-group label {
            font-size: 11px;
        }


    .bug-input-wrapper input {
        height: 48px;
        padding-right: 42px;
        font-size: 12px;
    }


    .bug-textarea-wrapper textarea {
        min-height: 150px;
        padding-right: 42px;
        font-size: 12px;
    }


    .bug-form-helper {
        font-size: 9px;
    }


    .bug-submit-button {
        height: 50px;
        font-size: 12px;
    }


    .bug-form-footer {
        font-size: 8px;
    }


    .bug-report-bottom {
        padding-bottom: 30px;
    }


    .bug-report-bottom-inner {
        padding: 20px;
        border-radius: 16px;
    }


        .bug-report-bottom-inner h2 {
            font-size: 13px;
            line-height: 1.8;
        }


    .bug-report-bottom-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        font-size: 18px;
    }
}
/* =========================================================
   PRIVACY PAGE
========================================================= */

.privacy-page {
    --privacy-primary: var(--colorOriginal-dark-Level1, #6f1bb1);
    --privacy-primary-dark: #4c087d;
    --privacy-primary-light: #f5edff;
    --privacy-text: #202124;
    --privacy-muted: #737373;
    --privacy-border: #eee7f4;
    --privacy-bg: #faf8fc;
    color: var(--privacy-text);
    background: var(--privacy-bg);
    min-height: 100vh;
    padding-bottom: 70px;
}


/* =========================================================
   HERO
========================================================= */

.privacy-hero {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    display: flex;
    align-items: center;
    background: radial-gradient( circle at 85% 20%, rgba(255,255,255,.13), transparent 28% ), linear-gradient( 135deg, #35085a, var(--privacy-primary), #8c35c7 );
    color: white;
}


.privacy-hero-bg {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    left: -130px;
    top: -180px;
    border: 1px solid rgba(255,255,255,.12);
}


    .privacy-hero-bg::after {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        top: 60px;
        left: 60px;
        border: 1px solid rgba(255,255,255,.08);
    }


.privacy-hero-content {
    position: relative;
    text-align: center;
    max-width: 700px;
    margin: auto;
    padding: 45px 15px;
}


.privacy-hero-icon {
    width: 62px;
    height: 62px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(10px);
    font-size: 28px;
}


.privacy-hero-label {
    display: inline-block;
    font-size: 13px;
    opacity: .85;
    margin-bottom: 8px;
}


.privacy-hero h1 {
    color: whitesmoke;
    margin: 0;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -.5px;
}


.privacy-hero p {
    margin: 14px 0 0;
    color: rgba(255,255,255,.84);
    font-size: 15px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.privacy-breadcrumb-wrapper {
    margin-top: -22px;
    position: relative;
    z-index: 5;
}


.privacy-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 11px 17px;
    list-style: none;
    background: white;
    border: 1px solid var(--privacy-border);
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(50,20,70,.08);
    font-size: 13px;
}


    .privacy-breadcrumb a {
        text-decoration: none;
        color: var(--privacy-primary);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }


    .privacy-breadcrumb .active {
        color: var(--privacy-muted);
    }


.privacy-breadcrumb-separator {
    color: #c8bfd0;
    font-size: 11px;
}


/* =========================================================
   MAIN
========================================================= */

.privacy-main {
    margin-top: 35px;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.privacy-content-card {
    background: #fff;
    border: 1px solid var(--privacy-border);
    border-radius: 24px;
    padding: 34px;
    box-shadow: 0 15px 45px rgba(55,20,80,.07);
}


/* Header */

.privacy-content-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 25px;
    border-bottom: 1px solid #f0ebf3;
}


.privacy-content-header-icon {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--privacy-primary);
    background: var(--privacy-primary-light);
    font-size: 25px;
}


.privacy-content-header span {
    display: block;
    color: var(--privacy-primary);
    font-size: 12px;
    margin-bottom: 5px;
}


.privacy-content-header h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
}


/* =========================================================
   INTRO
========================================================= */

.privacy-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 25px 0;
    padding: 17px 18px;
    border-radius: 14px;
    background: #faf7fd;
    border-right: 4px solid var(--privacy-primary);
}


    .privacy-intro i {
        color: var(--privacy-primary);
        font-size: 20px;
        margin-top: 2px;
    }


    .privacy-intro p {
        margin: 0;
        line-height: 2;
        color: #555;
        font-size: 14px;
    }


/* =========================================================
   PRIVACY ITEM
========================================================= */

.privacy-item {
    display: flex;
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid #f1edf3;
    scroll-margin-top: 30px;
}


.privacy-item-number {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: var(--privacy-primary);
    color: white;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(111,27,177,.20);
}


.privacy-item-content {
    flex: 1;
}


.privacy-item-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}


.privacy-item-icon {
    color: var(--privacy-primary);
    font-size: 19px;
}


.privacy-item h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}


.privacy-item p {
    margin: 0;
    color: #666;
    line-height: 2.15;
    font-size: 14px;
}


/* =========================================================
   WARNING
========================================================= */

.privacy-warning {
    display: flex;
    gap: 17px;
    margin-top: 30px;
    padding: 22px;
    border-radius: 17px;
    background: #fff4f4;
    border: 1px solid #ffdada;
    scroll-margin-top: 30px;
}


.privacy-warning-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #ffe1e1;
    color: #d72c2c;
    font-size: 23px;
}


.privacy-warning-content h3 {
    margin: 0 0 8px;
    color: #c52222;
    font-size: 17px;
    font-weight: 800;
}


.privacy-warning-content p {
    margin: 0;
    color: #7a3b3b;
    font-size: 13px;
    line-height: 2;
}


/* =========================================================
   SIDEBAR
========================================================= */

.privacy-sidebar {
    position: sticky;
    top: 25px;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.privacy-image-card {
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient( 145deg, #f5edff, #ffffff );
    border: 1px solid var(--privacy-border);
    box-shadow: 0 15px 40px rgba(55,20,80,.07);
}


.privacy-image {
    position: relative;
    z-index: 2;
    width: 75%;
    max-width: 280px;
    object-fit: contain;
    transition: transform .35s ease;
}


.privacy-image-card:hover .privacy-image {
    transform: scale(1.04);
}


.privacy-image-decoration {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(111,27,177,.10);
}


.decoration-one {
    width: 260px;
    height: 260px;
    top: -90px;
    right: -80px;
}


.decoration-two {
    width: 180px;
    height: 180px;
    bottom: -70px;
    left: -50px;
}


/* =========================================================
   SECURITY CARD
========================================================= */

.privacy-security-card {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 15px;
    padding: 17px;
    border-radius: 17px;
    background: white;
    border: 1px solid var(--privacy-border);
    box-shadow: 0 10px 30px rgba(55,20,80,.05);
}


.privacy-security-icon {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #edf9f1;
    color: #299653;
    font-size: 21px;
}


.privacy-security-card span {
    display: block;
    color: #888;
    font-size: 11px;
    margin-bottom: 3px;
}


.privacy-security-card strong {
    display: block;
    font-size: 13px;
}


/* =========================================================
   NAVIGATION
========================================================= */

.privacy-navigation {
    margin-top: 15px;
    padding: 20px;
    border-radius: 20px;
    background: white;
    border: 1px solid var(--privacy-border);
}


.privacy-navigation-label {
    display: block;
    color: #888;
    font-size: 12px;
    margin-bottom: 12px;
}


.privacy-navigation a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 8px;
    border-radius: 10px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}


    .privacy-navigation a:hover {
        background: var(--privacy-primary-light);
        color: var(--privacy-primary);
        transform: translateX(-3px);
    }


    .privacy-navigation a span {
        width: 29px;
        height: 29px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: #f6f2f8;
        color: var(--privacy-primary);
        font-size: 10px;
        font-weight: 700;
    }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {

    .privacy-page {
        padding-bottom: 35px;
    }


    .privacy-hero {
        min-height: 230px;
    }


    .privacy-hero-content {
        padding: 35px 15px;
    }


    .privacy-hero-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        font-size: 23px;
    }


    .privacy-hero h1 {
        font-size: 27px;
    }


    .privacy-hero p {
        font-size: 13px;
    }


    .privacy-breadcrumb-wrapper {
        margin-top: -18px;
    }


    .privacy-main {
        margin-top: 25px;
    }


    .privacy-sidebar {
        position: static;
    }


    .privacy-image-card {
        min-height: 220px;
    }


    .privacy-image {
        width: 55%;
        max-width: 210px;
    }
}


@media (max-width: 575.98px) {

    .privacy-content-card {
        padding: 20px 16px;
        border-radius: 18px;
    }


    .privacy-content-header {
        gap: 11px;
        padding-bottom: 20px;
    }


    .privacy-content-header-icon {
        width: 45px;
        height: 45px;
        flex-basis: 45px;
        border-radius: 13px;
        font-size: 20px;
    }


    .privacy-content-header span {
        font-size: 10px;
    }


    .privacy-content-header h2 {
        font-size: 20px;
    }


    .privacy-intro {
        padding: 13px;
        margin: 20px 0;
    }


        .privacy-intro p {
            font-size: 12px;
            line-height: 1.9;
        }


    .privacy-item {
        gap: 12px;
        padding: 20px 0;
    }


    .privacy-item-number {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        border-radius: 11px;
        font-size: 14px;
    }


    .privacy-item-title {
        gap: 7px;
        margin-bottom: 7px;
    }


    .privacy-item-icon {
        font-size: 16px;
    }


    .privacy-item h3 {
        font-size: 14px;
        line-height: 1.7;
    }


    .privacy-item p {
        font-size: 12px;
        line-height: 2;
    }


    .privacy-warning {
        gap: 11px;
        padding: 15px;
        margin-top: 22px;
        border-radius: 14px;
    }


    .privacy-warning-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 11px;
        font-size: 18px;
    }


    .privacy-warning-content h3 {
        font-size: 14px;
    }


    .privacy-warning-content p {
        font-size: 11px;
        line-height: 2;
    }


    .privacy-navigation {
        padding: 15px;
    }


    .privacy-breadcrumb {
        width: 100%;
        justify-content: center;
        font-size: 11px;
        padding: 10px;
    }


    .privacy-image-card {
        min-height: 190px;
        border-radius: 18px;
    }
}
/* =========================================================
   MEIDAAPS CONTACT PAGE
   ========================================================= */

.contact-breadcrumb {
    padding: 18px 0;
    background: #faf8fd;
    border-bottom: 1px solid #eee7f5;
}

.contact-breadcrumb-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

    .contact-breadcrumb-inner a {
        color: #777;
        text-decoration: none;
        transition: .25s;
    }

        .contact-breadcrumb-inner a:hover {
            color: var(--colorOriginal-dark-Level1);
        }

    .contact-breadcrumb-inner span:last-child {
        color: var(--colorOriginal-dark-Level1);
        font-weight: 700;
    }

.contact-breadcrumb-separator {
    color: #b9aec3;
}


/* =========================================================
   HERO
   ========================================================= */

.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 95px;
    background: radial-gradient(circle at 80% 20%, #f0ddff 0, transparent 30%), linear-gradient(135deg, #fbf9ff 0%, #ffffff 55%, #f7f0fc 100%);
}

.contact-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.contact-hero-glow-one {
    width: 300px;
    height: 300px;
    background: rgba(126, 53, 170, .08);
    right: -100px;
    top: -100px;
}

.contact-hero-glow-two {
    width: 220px;
    height: 220px;
    background: rgba(126, 53, 170, .06);
    left: -100px;
    bottom: -80px;
}

.contact-hero-content {
    position: relative;
    z-index: 2;
}

.contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border-radius: 50px;
    background: #fff;
    color: var(--colorOriginal-dark-Level1);
    border: 1px solid #eadcf3;
    box-shadow: 0 8px 25px rgba(80, 30, 100, .06);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 22px;
}

    .contact-hero-badge i {
        font-size: 16px;
    }

.contact-hero h1 {
    margin: 0;
    font-size: clamp(35px, 4vw, 58px);
    line-height: 1.25;
    font-weight: 900;
    color: #21172a;
}

    .contact-hero h1 span {
        display: block;
        color: var(--colorOriginal-dark-Level1);
        margin-top: 5px;
    }

.contact-hero-content > p {
    max-width: 650px;
    margin: 25px 0 0;
    color: #77717c;
    line-height: 2.1;
    font-size: 16px;
}

.contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.contact-primary-action,
.contact-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 700;
    transition: .3s;
}

.contact-primary-action {
    color: #fff;
    background: var(--colorOriginal-dark-Level1);
    box-shadow: 0 12px 30px rgba(80, 30, 100, .2);
}

    .contact-primary-action span {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }

    .contact-primary-action:hover {
        color: #fff;
        transform: translateY(-3px);
        box-shadow: 0 17px 35px rgba(80, 30, 100, .28);
    }

.contact-secondary-action {
    color: #3d3344;
    background: #fff;
    border: 1px solid #e7ddec;
}

    .contact-secondary-action:hover {
        color: var(--colorOriginal-dark-Level1);
        border-color: var(--colorOriginal-dark-Level1);
        transform: translateY(-3px);
    }


/* =========================================================
   HERO VISUAL
   ========================================================= */

.contact-visual {
    position: relative;
    min-height: 410px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-visual-ring {
    position: absolute;
    border: 1px solid rgba(107, 41, 145, .12);
    border-radius: 50%;
}

.ring-one {
    width: 360px;
    height: 360px;
}

.ring-two {
    width: 270px;
    height: 270px;
}

.contact-logo-card {
    position: relative;
    width: 230px;
    height: 230px;
    border-radius: 55px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(15px);
    border: 1px solid #eee3f4;
    box-shadow: 0 30px 70px rgba(62, 26, 78, .16), inset 0 0 0 8px rgba(255,255,255,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

    .contact-logo-card img {
        width: 165px;
        max-height: 165px;
        object-fit: contain;
        position: relative;
        z-index: 2;
    }

.contact-logo-glow {
    position: absolute;
    width: 130px;
    height: 130px;
    background: rgba(125, 51, 168, .12);
    filter: blur(30px);
    border-radius: 50%;
}

.contact-floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(15px);
    border: 1px solid #eee5f3;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(65, 30, 80, .12);
}

    .contact-floating-card i {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f3e8f9;
        color: var(--colorOriginal-dark-Level1);
        font-size: 20px;
    }

    .contact-floating-card div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .contact-floating-card strong {
        font-size: 12px;
        color: #302734;
    }

    .contact-floating-card span {
        font-size: 10px;
        color: #888;
    }

.contact-floating-card-top {
    right: -15px;
    top: 45px;
}

.contact-floating-card-bottom {
    left: -10px;
    bottom: 45px;
}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.contact-information {
    padding: 85px 0;
    background: #fff;
}

.contact-section-heading {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 45px;
}

    .contact-section-heading > span {
        display: inline-block;
        color: var(--colorOriginal-dark-Level1);
        font-size: 13px;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .contact-section-heading h2 {
        margin: 0;
        font-size: 31px;
        font-weight: 900;
        color: #261c2d;
    }

    .contact-section-heading p {
        margin: 14px 0 0;
        color: #858087;
        font-size: 14px;
    }


/* =========================================================
   INFO CARDS
   ========================================================= */

.contact-info-card {
    height: 100%;
    display: flex;
    gap: 20px;
    padding: 28px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #eee8f2;
    box-shadow: 0 12px 40px rgba(60, 30, 75, .055);
    transition: .3s;
}

    .contact-info-card:hover {
        transform: translateY(-5px);
        border-color: #dfcde9;
        box-shadow: 0 20px 50px rgba(60, 30, 75, .1);
    }

.contact-info-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.phone-icon {
    background: #f2e8f8;
    color: #7a3d99;
}

.email-icon {
    background: #eeeaff;
    color: #6850a5;
}

.address-icon {
    background: #f9e9ed;
    color: #a14861;
}

.postal-icon {
    background: #eaf4f0;
    color: #367e68;
}

.contact-info-content {
    flex: 1;
    min-width: 0;
}

.contact-info-label {
    display: block;
    font-size: 11px;
    color: #99929c;
    margin-bottom: 5px;
}

.contact-info-content h3 {
    margin: 0 0 14px;
    color: #28202d;
    font-size: 20px;
    font-weight: 800;
}

.contact-phone-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-phone-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 14px;
    border-radius: 11px;
    background: #faf8fb;
    color: #443849;
    text-decoration: none;
    font-size: 14px;
    transition: .25s;
}

    .contact-phone-item i {
        color: var(--colorOriginal-dark-Level1);
        transition: .25s;
    }

    .contact-phone-item:hover {
        background: #f4eafa;
        color: var(--colorOriginal-dark-Level1);
    }

        .contact-phone-item:hover i {
            transform: translateX(-4px);
        }

.contact-working-time {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #777;
    font-size: 12px;
}

    .contact-working-time i {
        color: var(--colorOriginal-dark-Level1);
    }

.contact-main-value {
    display: inline-block;
    color: var(--colorOriginal-dark-Level1);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    word-break: break-word;
}

.contact-email-value:hover {
    text-decoration: underline;
}

.contact-info-content p {
    margin: 14px 0 0;
    color: #7e7881;
    font-size: 13px;
    line-height: 2;
}

.contact-address-text {
    line-height: 2.2 !important;
}

.contact-location-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 15px;
    padding: 7px 11px;
    border-radius: 8px;
    background: #faf7fc;
    color: #7b667f;
    font-size: 11px;
}

.contact-postal-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: #faf8fb;
    border-radius: 12px;
    color: #3b3040;
    font-weight: 800;
    letter-spacing: 1px;
    direction: ltr;
}

    .contact-postal-code button {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 9px;
        background: #eee4f4;
        color: var(--colorOriginal-dark-Level1);
        cursor: pointer;
        transition: .25s;
    }

        .contact-postal-code button:hover {
            background: var(--colorOriginal-dark-Level1);
            color: #fff;
        }

.contact-copy-message {
    display: block;
    margin-top: 10px;
    color: #999;
    font-size: 11px;
}

    .contact-copy-message.copied {
        color: #29936d;
        font-weight: 700;
    }


/* =========================================================
   SOCIAL
   ========================================================= */

.contact-social-section {
    padding: 0 0 85px;
    background: #fff;
}

.contact-social-box {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 38px 42px;
    border-radius: 26px;
    background: radial-gradient(circle at 90% 0%, rgba(255,255,255,.15), transparent 30%), linear-gradient(135deg, #351a40, #692e83);
    box-shadow: 0 25px 60px rgba(55, 20, 70, .18);
}

.contact-social-content {
    position: relative;
    z-index: 2;
}

.contact-social-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #dbc5e5;
    font-size: 12px;
}

.contact-social-content h2 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.contact-social-content p {
    max-width: 600px;
    margin: 10px 0 0;
    color: #dbcfe0;
    line-height: 1.9;
    font-size: 13px;
}

.contact-social-links {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.contact-social-link {
    min-width: 90px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 14px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: .3s;
}

    .contact-social-link i {
        font-size: 23px;
    }

    .contact-social-link span {
        font-size: 10px;
    }

    .contact-social-link:hover {
        background: #fff;
        color: #43204f;
        transform: translateY(-5px);
    }

.contact-social-box::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    left: -100px;
    bottom: -170px;
}


/* =========================================================
   BOTTOM CTA
   ========================================================= */

.contact-bottom {
    padding: 0 0 60px;
    background: #fff;
}

.contact-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 30px;
    border: 1px solid #eee7f2;
    border-radius: 18px;
    background: #fcfbfd;
}

    .contact-bottom-inner span {
        font-size: 11px;
        color: var(--colorOriginal-dark-Level1);
        font-weight: 700;
    }

    .contact-bottom-inner h2 {
        margin: 7px 0 0;
        font-size: 16px;
        color: #3b3040;
    }

    .contact-bottom-inner > i {
        color: var(--colorOriginal-dark-Level1);
        font-size: 34px;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .contact-breadcrumb {
        padding: 13px 0;
    }

    .contact-breadcrumb-inner {
        padding: 0 8px;
        font-size: 11px;
    }

    .contact-hero {
        padding: 45px 15px 55px;
    }

        .contact-hero h1 {
            font-size: 31px;
            text-align: center;
        }

            .contact-hero h1 span {
                margin-top: 3px;
            }

    .contact-hero-content {
        text-align: center;
    }

    .contact-hero-badge {
        margin-bottom: 17px;
        font-size: 11px;
    }

    .contact-hero-content > p {
        font-size: 13px;
        line-height: 2;
        margin-top: 18px;
    }

    .contact-hero-actions {
        justify-content: center;
        margin-top: 24px;
    }

    .contact-primary-action,
    .contact-secondary-action {
        width: 100%;
        min-height: 48px;
        font-size: 13px;
    }

    .contact-visual {
        min-height: 310px;
        margin-top: 30px;
    }

    .contact-logo-card {
        width: 175px;
        height: 175px;
        border-radius: 42px;
    }

        .contact-logo-card img {
            width: 125px;
            max-height: 125px;
        }

    .ring-one {
        width: 285px;
        height: 285px;
    }

    .ring-two {
        width: 220px;
        height: 220px;
    }

    .contact-floating-card {
        padding: 9px 11px;
        border-radius: 13px;
    }

        .contact-floating-card i {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            font-size: 15px;
        }

        .contact-floating-card strong {
            font-size: 9px;
        }

        .contact-floating-card span {
            font-size: 8px;
        }

    .contact-floating-card-top {
        right: 0;
        top: 18px;
    }

    .contact-floating-card-bottom {
        left: 0;
        bottom: 20px;
    }

    .contact-information {
        padding: 55px 15px;
    }

    .contact-section-heading {
        margin-bottom: 28px;
    }

        .contact-section-heading h2 {
            font-size: 23px;
        }

        .contact-section-heading p {
            font-size: 12px;
            line-height: 1.9;
        }

    .contact-info-card {
        padding: 20px;
        border-radius: 18px;
        gap: 14px;
    }

    .contact-info-icon {
        flex: 0 0 47px;
        width: 47px;
        height: 47px;
        border-radius: 14px;
        font-size: 19px;
    }

    .contact-info-content h3 {
        font-size: 17px;
        margin-bottom: 12px;
    }

    .contact-info-label {
        font-size: 9px;
    }

    .contact-phone-item {
        padding: 10px 11px;
        font-size: 12px;
    }

    .contact-info-content p {
        font-size: 11px;
        line-height: 2;
    }

    .contact-social-section {
        padding: 0 15px 55px;
    }

    .contact-social-box {
        flex-direction: column;
        align-items: stretch;
        padding: 28px 20px;
        border-radius: 21px;
        text-align: center;
    }

    .contact-social-content h2 {
        font-size: 19px;
    }

    .contact-social-content p {
        font-size: 11px;
    }

    .contact-social-links {
        justify-content: center;
    }

    .contact-social-link {
        flex: 1;
        min-width: 0;
        padding: 10px;
    }

        .contact-social-link i {
            font-size: 20px;
        }

    .contact-bottom {
        padding: 0 15px 35px;
    }

    .contact-bottom-inner {
        padding: 20px;
    }

        .contact-bottom-inner h2 {
            font-size: 13px;
            line-height: 1.8;
        }

        .contact-bottom-inner > i {
            font-size: 27px;
        }
}
.meida-mobile-menu-button {
    width: 44px;
    height: 44px;
    position: fixed;
    left: 5%;
    top: 0.5%;
    border: none;
    border-radius: 13px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    box-shadow: 0 5px 18px rgba(72,6,128,.10);
    transition: all .25s ease;
}


    .meida-mobile-menu-button span {
        width: 20px;
        height: 2px;
        border-radius: 5px;
        background: var(--colorOriginal-dark-Level1);
        transition: all .25s ease;
    }


    .meida-mobile-menu-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(72,6,128,.16);
    }


        .meida-mobile-menu-button:hover span:nth-child(2) {
            width: 14px;
        }
/* =========================================================
   MIDA SHOW MOBILE MENU
   ========================================================= */

.meida-mobile-menu {
    width: min(88vw, 390px) !important;
    background: linear-gradient( 180deg, #ffffff 0%, #fdfbff 55%, #faf7ff 100% );
    border: none !important;
    box-shadow: -15px 0 45px rgba(48, 20, 75, 0.14);
    direction: rtl;
    overflow: hidden;
}


/* =========================================================
   HEADER
   ========================================================= */

.meida-menu-header {
    padding: 20px 18px 18px 18px;
    border-bottom: 1px solid rgba(72, 6, 128, 0.08);
    background: linear-gradient( 135deg, rgba(255,255,255,1), rgba(250,245,255,1) );
}


/* Brand */

.meida-menu-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}


.meida-menu-brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 135deg, var(--colorOriginal-dark-Level1), #7b19c5 );
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(72, 6, 128, 0.20);
}


.meida-menu-brand-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


    .meida-menu-brand-text strong {
        font-size: 18px;
        color: var(--colorOriginal-dark-Level1);
        font-weight: 800;
    }


    .meida-menu-brand-text span {
        font-size: 10px;
        color: #8a8192;
    }


/* Close */

.meida-menu-close {
    width: 38px;
    height: 38px;
    position: relative;
    right: 40%;
    border: none;
    border-radius: 12px;
    background: #f3edf8;
    color: var(--colorOriginal-dark-Level1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: all .25s ease;
}


    .meida-menu-close:hover {
        background: var(--colorOriginal-dark-Level1);
        color: #ffffff;
        transform: rotate(90deg);
    }


/* =========================================================
   BODY
   ========================================================= */

.meida-menu-body {
    padding: 18px 15px 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(72,6,128,.25) transparent;
}


/* =========================================================
   WELCOME
   ========================================================= */

.meida-menu-welcome {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 14px;
    margin-bottom: 22px;
    border-radius: 16px;
    background: linear-gradient( 135deg, #faf4ff, #ffffff );
    border: 1px solid rgba(72,6,128,.08);
}


.meida-menu-welcome-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(72,6,128,.09);
    color: var(--colorOriginal-dark-Level1);
}


.meida-menu-welcome div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.meida-menu-welcome strong {
    font-size: 12px;
    color: #38263f;
}


.meida-menu-welcome span {
    font-size: 10px;
    color: #918898;
}


/* =========================================================
   SECTION
   ========================================================= */

.meida-menu-section {
    margin-bottom: 23px;
}


.meida-menu-section-title {
    padding: 0 5px 9px;
}


    .meida-menu-section-title span {
        position: relative;
        font-size: 11px;
        color: #988ca0;
        font-weight: 700;
    }


        .meida-menu-section-title span::before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--colorOriginal-dark-Level1);
            margin-left: 6px;
            vertical-align: middle;
        }


/* =========================================================
   MENU LIST
   ========================================================= */

.meida-menu-list {
    gap: 7px;
}


/* =========================================================
   MENU ITEM
   ========================================================= */

.meida-menu-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 11px;
    min-height: 65px;
    padding: 9px 10px !important;
    border-radius: 16px;
    color: #403647 !important;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(72,6,128,.045);
    transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}


    .meida-menu-link:hover {
        color: var(--colorOriginal-dark-Level1) !important;
        background: #ffffff;
        border-color: rgba(72,6,128,.12);
        transform: translateX(-3px);
        box-shadow: 0 7px 22px rgba(72,6,128,.08);
    }


/* =========================================================
   ICON
   ========================================================= */

.meida-menu-link-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f4edfa;
    color: var(--colorOriginal-dark-Level1);
    font-size: 17px;
    transition: all .22s ease;
}


.meida-menu-link:hover
.meida-menu-link-icon {
    color: #ffffff;
    background: var(--colorOriginal-dark-Level1);
    transform: scale(1.04);
}


/* =========================================================
   TEXT
   ========================================================= */

.meida-menu-link-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


    .meida-menu-link-content strong {
        font-size: 12px;
        line-height: 1.4;
        font-weight: 800;
    }


    .meida-menu-link-content small {
        font-size: 9px;
        color: #9a909f;
        line-height: 1.4;
    }


/* =========================================================
   ARROW
   ========================================================= */

.meida-menu-arrow {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #faf7fc;
    color: #a79dac;
    font-size: 10px;
    transition: all .22s ease;
}


.meida-menu-link:hover
.meida-menu-arrow {
    color: var(--colorOriginal-dark-Level1);
    background: #f2e8fa;
    transform: translateX(-2px);
}


/* =========================================================
   SECONDARY SECTION
   ========================================================= */

.meida-menu-section-secondary {
    padding-top: 2px;
    border-top: 1px dashed rgba(72,6,128,.10);
}


/* =========================================================
   FOOTER CARD
   ========================================================= */

.meida-menu-footer-card {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 5px;
    padding: 15px;
    border-radius: 18px;
    background: linear-gradient( 135deg, var(--colorOriginal-dark-Level1), #7d20c5 );
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(72,6,128,.18);
}


.meida-menu-footer-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.16);
    font-size: 17px;
}


.meida-menu-footer-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


    .meida-menu-footer-content strong {
        font-size: 11px;
        font-weight: 800;
    }


    .meida-menu-footer-content span {
        font-size: 9px;
        color: rgba(255,255,255,.78);
    }


/* =========================================================
   VERSION
   ========================================================= */

.meida-menu-version {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 17px;
    padding-bottom: 4px;
    color: #aaa0b1;
    font-size: 8px;
}


/* =========================================================
   BACKDROP
   ========================================================= */

.offcanvas-backdrop.show {
    opacity: .48;
}


/* =========================================================
   MOBILE SMALL SCREEN
   ========================================================= */

@media (max-width: 380px) {

    .meida-mobile-menu {
        width: 92vw !important;
    }

    .meida-menu-link {
        min-height: 61px;
    }

    .meida-menu-link-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .meida-menu-brand-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }
}
/* =========================================================
   MOBILE ADVERTISEMENT
   ========================================================= */

.mobile-ad-page {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 8px 40px;
    direction: rtl;
    background: #fff;
}


/* =========================================================
   HEADER
   ========================================================= */

.mobile-ad-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 55px;
    padding: 8px 42px 8px 42px;
}

.mobile-ad-header-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

    .mobile-ad-header-title h1 {
        margin: 0;
        font-size: 17px;
        font-weight: 800;
        line-height: 1.5;
        color: #29212f;
    }

.mobile-ad-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    background: #faf7fd;
    border: 1px solid #eee5f5;
    color: #85639c;
    font-size: 9px;
}

.mobile-share-top {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #744394;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 9px;
    padding: 4px;
}

    .mobile-share-top i {
        font-size: 15px;
    }


/* =========================================================
   COMMON SECTION
   ========================================================= */

.mobile-ad-section {
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
}


/* =========================================================
   HERO
   ========================================================= */

.mobile-ad-hero {
    width: 100%;
}

.mobile-ad-hero-image {
    position: relative;
    width: 100%;
    height: 195px;
    overflow: visible;
    border-radius: 10px;
    background: #f6f3f8;
}

    .mobile-ad-hero-image > img {
        display: block;
        width: 100%;
        height: 195px;
        object-fit: cover;
        border-radius: 10px;
    }

.mobile-ad-logo {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: -48px;
    transform: translateX(-50%);
    width: 105px;
    height: 105px;
    padding: 5px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid var(--colorOriginal-dark-Level1);
    box-shadow: 0 5px 20px rgba(61, 29, 79, .25);
}

    .mobile-ad-logo img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50% !important;
        object-fit: cover;
    }


/* =========================================================
   ACCORDION
   ========================================================= */

.mobile-ad-accordion {
    margin-top: 52px;
    border: 1px solid #e8dff0;
    border-radius: 9px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(70, 31, 90, .06);
}

.mobile-ad-accordion-item {
    border-bottom: 1px solid #eee7f3;
}

    .mobile-ad-accordion-item:last-child {
        border-bottom: 0;
    }

.mobile-ad-accordion-button {
    position: relative;
    width: 100%;
    min-height: 38px;
    padding: 8px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    background: #fff;
    color: #392844;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

    .mobile-ad-accordion-button:focus {
        box-shadow: none;
    }

    .mobile-ad-accordion-button:not(.collapsed) {
        color: var(--colorOriginal-dark-Level1);
        background: #fcf9ff;
    }

    .mobile-ad-accordion-button i {
        font-size: 11px;
        transition: transform .2s ease;
    }

    .mobile-ad-accordion-button:not(.collapsed) i {
        transform: rotate(180deg);
    }

.mobile-ad-accordion-body {
    max-height: 180px;
    overflow-y: auto;
    padding: 10px 13px;
    font-size: 10px;
    line-height: 2;
    color: #68616d;
}

    .mobile-ad-accordion-body::-webkit-scrollbar {
        width: 3px;
    }

    .mobile-ad-accordion-body::-webkit-scrollbar-thumb {
        background: #d9c6e5;
        border-radius: 10px;
    }


/* =========================================================
   SECTION TITLE
   ========================================================= */

.mobile-ad-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.mobile-ad-section-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f5eaff;
    color: var(--colorOriginal-dark-Level1);
    font-size: 14px;
}

.mobile-ad-section-title strong {
    display: block;
    color: #34263d;
    font-size: 12px;
}

.mobile-ad-section-title small {
    display: block;
    margin-top: 2px;
    color: #8d8492;
    font-size: 8px;
}


/* =========================================================
   SHARE
   ========================================================= */

.mobile-ad-share-box {
    padding: 11px;
    border: 1px solid #e8dff0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 9px rgba(70, 31, 90, .05);
}

.mobile-ad-share-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

    .mobile-ad-share-actions button {
        width: 34px;
        height: 34px;
        border: 1px solid #e8dff0;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--colorOriginal-dark-Level1);
        font-size: 17px;
        transition: .2s;
    }

        .mobile-ad-share-actions button:hover {
            background: #f7edff;
            transform: translateY(-2px);
        }

        .mobile-ad-share-actions button:nth-child(2) {
            color: #27b95a;
        }

        .mobile-ad-share-actions button:nth-child(3) {
            color: #269bd3;
        }


/* =========================================================
   CONTACT
   ========================================================= */

.mobile-contact-card {
    padding: 11px;
    border: 1px solid #e7dced;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(70, 31, 90, .06);
}

.mobile-contact-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mobile-contact-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 43px;
    padding: 7px 9px;
    border: 1px solid #eee7f3;
    border-radius: 8px;
    text-decoration: none;
    background: #fff;
    color: inherit;
}

    .mobile-contact-item:active {
        background: #faf5ff;
    }

.mobile-contact-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f4eaff;
    color: var(--colorOriginal-dark-Level1);
    font-size: 12px;
}

.mobile-contact-info {
    flex: 1;
    min-width: 0;
}

    .mobile-contact-info small {
        display: block;
        color: #8e8594;
        font-size: 8px;
    }

    .mobile-contact-info strong {
        display: block;
        direction: ltr;
        text-align: right;
        color: #39313e;
        font-size: 11px;
        margin-top: 2px;
    }

.mobile-contact-arrow {
    color: #b2a5ba;
    font-size: 10px;
}


/* =========================================================
   ADDRESS
   ========================================================= */

.mobile-address-box {
    margin-top: 8px;
    padding: 10px;
    border-radius: 8px;
    background: #faf7fc;
    border: 1px solid #eee6f3;
}

.mobile-address-header {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .mobile-address-header .mobile-contact-icon {
        width: 25px;
        height: 25px;
        flex-basis: 25px;
    }

    .mobile-address-header strong {
        font-size: 10px;
        color: #44364d;
    }

.mobile-address-box p {
    margin: 8px 0 0;
    font-size: 9px;
    line-height: 1.9;
    color: #716875;
}


/* =========================================================
   MAP
   ========================================================= */

.mobile-map-box {
    margin-top: 8px;
    overflow: hidden;
    border: 1px solid #e8dff0;
    border-radius: 9px;
    background: #fff;
}

.mobile-map-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    font-size: 9px;
    color: #5c4a65;
}

    .mobile-map-header span:first-child {
        font-weight: 700;
    }

    .mobile-map-header i {
        margin-left: 4px;
        color: var(--colorOriginal-dark-Level1);
    }

    .mobile-map-header span:last-child {
        color: #9a8ea0;
        font-size: 8px;
    }

.mobile-map-box iframe {
    display: block;
    width: 100%;
    height: 145px;
    border: 0;
}


/* =========================================================
   VISITS
   ========================================================= */

.mobile-visit-card {
    padding: 11px;
    border: 1px solid #e7dced;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(70, 31, 90, .06);
}

.mobile-visit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-visit-label {
    display: block;
    color: #9a8ea0;
    font-size: 8px;
}

.mobile-visit-header h3 {
    margin: 3px 0 0;
    color: #3e3047;
    font-size: 12px;
}

.mobile-visit-total {
    min-width: 55px;
    padding: 5px 7px;
    border-radius: 8px;
    background: #faf5ff;
    text-align: center;
}

    .mobile-visit-total strong {
        display: block;
        color: var(--colorOriginal-dark-Level1);
        font-size: 13px;
    }

    .mobile-visit-total small {
        color: #968b9e;
        font-size: 7px;
    }

.mobile-visit-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 9px;
}

    .mobile-visit-filter label {
        font-size: 9px;
        color: #77707d;
    }

    .mobile-visit-filter select {
        min-width: 100px;
        height: 29px;
        padding: 2px 7px;
        border: 1px solid #e4d9ea;
        border-radius: 7px;
        background: #fff;
        font-size: 9px;
        color: #5b4c63;
    }

.mobile-chart-wrapper {
    width: 100%;
    height: 205px;
    margin-top: 9px;
    padding: 7px;
    border-radius: 8px;
    background: #faf5ff;
}

    .mobile-chart-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
    }


/* =========================================================
   WARNING
   متن دست نخورده
   ========================================================= */

.mobile-ad-warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 10px;
    border-radius: 9px;
    font-size: 9px;
    line-height: 1.9;
}

.mobile-ad-warning-icon {
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .6);
    font-size: 11px;
}


/* =========================================================
   RATING
   ========================================================= */

.mobile-rating-card {
    padding: 12px;
    border: 1px solid #e7dced;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(70, 31, 90, .05);
}

.mobile-rating-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .mobile-rating-title > span {
        width: 31px;
        height: 31px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: #fff4cf;
        color: #e3aa00;
    }

    .mobile-rating-title strong {
        display: block;
        font-size: 11px;
        color: #403345;
    }

    .mobile-rating-title small {
        display: block;
        margin-top: 2px;
        font-size: 8px;
        color: #99909e;
    }

.mobile-rating-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 9px;
}

.mobile-rating-number {
    color: #403346;
    font-size: 21px;
}

.mobile-rating-stars {
    display: flex;
    gap: 1px;
    direction: ltr;
}

    .mobile-rating-stars span {
        font-size: 18px;
    }

    .mobile-rating-stars .full {
        color: #f1bd23;
    }

    .mobile-rating-stars .half {
        color: #f1bd23;
    }

    .mobile-rating-stars .empty {
        color: #d9d4da;
    }

.mobile-rating-main small {
    color: #8f8793;
    font-size: 8px;
}


/* =========================================================
   RELATED
   ========================================================= */

.mobile-related-section {
    overflow: hidden;
}

.mobile-related-header {
    padding: 3px 4px 8px;
}

    .mobile-related-header > span {
        color: var(--colorOriginal-dark-Level1);
        font-size: 8px;
        font-weight: 700;
    }

    .mobile-related-header h2 {
        margin: 3px 0;
        font-size: 15px;
        color: #35283d;
    }

    .mobile-related-header p {
        margin: 0;
        color: #8a818f;
        font-size: 9px;
    }

.mobile-related-group {
    margin-top: 7px;
}

.mobile-related-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

    .mobile-related-group-header span {
        color: #9a8f9f;
        font-size: 7px;
    }

    .mobile-related-group-header h3 {
        margin: 2px 0 0;
        color: #4b3a53;
        font-size: 10px;
    }

    .mobile-related-group-header a {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--colorOriginal-dark-Level1);
        font-size: 8px;
        text-decoration: none;
    }

.mobile-related-slider {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
}

    .mobile-related-slider::-webkit-scrollbar {
        display: none;
    }

.mobile-related-card {
    flex: 0 0 125px;
    overflow: hidden;
    border: 1px solid #e7dced;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(70, 31, 90, .05);
}

    .mobile-related-card > a {
        display: block;
        text-decoration: none;
        color: inherit;
    }

.mobile-related-logo {
    width: 100%;
    height: 82px;
    background: #faf8fb;
}

    .mobile-related-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .mobile-related-logo span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 8px;
        text-align: center;
        font-size: 9px;
        color: #6d6372;
    }

.mobile-related-content {
    padding: 7px;
}

    .mobile-related-content h4 {
        margin: 0;
        color: #3d3044;
        font-size: 9px;
        font-weight: 700;
    }

    .mobile-related-content p {
        height: 27px;
        overflow: hidden;
        margin: 4px 0;
        color: #8d8492;
        font-size: 7px;
        line-height: 1.8;
    }

.mobile-related-more {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--colorOriginal-dark-Level1);
    font-size: 7px;
}


/* =========================================================
   REVIEWS
   ========================================================= */

.mobile-review-card {
    padding: 11px;
    border: 1px solid #e7dced;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(70, 31, 90, .05);
}

.mobile-review-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 9px;
    border-bottom: 1px solid #eee7f2;
}

    .mobile-review-header > div:first-child span {
        color: var(--colorOriginal-dark-Level1);
        font-size: 8px;
    }

    .mobile-review-header h2 {
        margin: 3px 0 0;
        color: #3b2e42;
        font-size: 13px;
    }

.mobile-review-count {
    padding: 5px 8px;
    border-radius: 20px;
    background: #f7effc;
    color: var(--colorOriginal-dark-Level1);
    font-size: 8px;
}

.mobile-review-form {
    margin-top: 12px;
}

    .mobile-review-form > h3 {
        margin: 0 0 10px;
        color: #4a3b51;
        font-size: 11px;
    }

.mobile-form-group {
    margin-bottom: 9px;
}

    .mobile-form-group label {
        display: block;
        margin-bottom: 4px;
        color: #625768;
        font-size: 9px;
        font-weight: 600;
    }

        .mobile-form-group label span {
            color: #dc3545;
        }

    .mobile-form-group input,
    .mobile-form-group textarea {
        width: 100%;
        border: 1px solid #e3d9e8;
        border-radius: 7px;
        outline: none;
        background: #fff;
        color: #433747;
        font-size: 9px;
        transition: .2s;
    }

    .mobile-form-group input {
        height: 36px;
        padding: 7px 9px;
    }

    .mobile-form-group textarea {
        min-height: 95px;
        padding: 9px;
        resize: vertical;
    }

        .mobile-form-group input:focus,
        .mobile-form-group textarea:focus {
            border-color: var(--colorOriginal-dark-Level1);
            box-shadow: 0 0 0 2px rgba(116, 67, 148, .08);
        }


/* =========================================================
   RATING INPUT
   ========================================================= */

.mobile-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 2px;
}

    .mobile-rating-input input {
        display: none;
    }

    .mobile-rating-input label {
        margin: 0;
        color: #d7d1da;
        font-size: 25px;
        cursor: pointer;
        transition: .15s;
    }

        .mobile-rating-input label:hover,
        .mobile-rating-input label:hover ~ label,
        .mobile-rating-input input:checked ~ label {
            color: #f2bb21;
        }


/* =========================================================
   REVIEW SUBMIT
   ========================================================= */

.mobile-review-submit {
    width: 100%;
    min-height: 39px;
    margin-top: 5px;
    border: 0;
    border-radius: 8px;
    background: var(--colorOriginal-dark-Level1);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(70, 31, 90, .18);
}

    .mobile-review-submit i {
        margin-left: 5px;
    }


/* =========================================================
   COMMENTS
   ========================================================= */

.mobile-comments-list {
    margin-top: 15px;
}

.mobile-comment {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #eee7f2;
    border-radius: 9px;
    background: #fff;
}

.mobile-comment-header {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mobile-comment-avatar {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5eaff;
    color: var(--colorOriginal-dark-Level1);
    font-size: 12px;
}

.mobile-comment-header strong {
    display: block;
    color: #4b3c52;
    font-size: 9px;
}

.mobile-comment-header small {
    display: block;
    margin-top: 2px;
    color: #a198a5;
    font-size: 7px;
}

.mobile-comment-text {
    margin: 9px 0;
    color: #665c6b;
    font-size: 9px;
    line-height: 1.9;
}

.mobile-comment-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-top: 6px;
    border-top: 1px solid #f1ebf4;
    color: #817786;
    font-size: 8px;
}

    .mobile-comment-rating i {
        color: #f2bb21;
        font-size: 10px;
    }


/* =========================================================
   SOCIAL
   ========================================================= */

.mobile-social-card {
    padding: 11px;
    border: 1px solid #e7dced;
    border-radius: 10px;
    background: #fff;
}

.mobile-social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

    .mobile-social-grid a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-height: 65px;
        border: 1px solid #eee7f2;
        border-radius: 8px;
        background: #fff;
        text-decoration: none;
    }

    .mobile-social-grid img {
        width: 27px;
        height: 27px;
        object-fit: contain;
    }

    .mobile-social-grid span {
        color: #6e6473;
        font-size: 7px;
    }


/* =========================================================
   SAMPLE WORKS
   ========================================================= */

.mobile-samples-card {
    padding: 11px;
    border: 1px solid #e7dced;
    border-radius: 10px;
    background: #fff;
}

.mobile-samples-slider {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

    .mobile-samples-slider::-webkit-scrollbar {
        display: none;
    }

.mobile-sample-item {
    flex: 0 0 125px;
    height: 125px;
    overflow: hidden;
    border-radius: 8px;
    background: #f7f4f8;
}

    .mobile-sample-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


/* =========================================================
   VERY SMALL DEVICES
   ========================================================= */

@media (max-width: 360px) {

    .mobile-ad-page {
        padding-left: 6px;
        padding-right: 6px;
    }

    .mobile-ad-hero-image,
    .mobile-ad-hero-image > img {
        height: 175px;
    }

    .mobile-ad-logo {
        width: 95px;
        height: 95px;
        bottom: -44px;
    }

    .mobile-ad-accordion {
        margin-top: 48px;
    }

    .mobile-related-card {
        flex-basis: 115px;
    }

    .mobile-social-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* =========================================================
   ADVERTISEMENT DESKTOP
   ========================================================= */

.advertisement-desktop {
    direction: rtl;
    width: 100%;
    padding: 25px 30px 60px;
}


/* =========================================================
   HEADER
   ========================================================= */

.advertisement-page-header {
    width: 100%;
    text-align: center;
    margin-bottom: 22px;
}

.advertisement-page-title {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.6;
    color: #27232d;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.advertisement-main-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}


/* =========================================================
   TOP GRID
   ========================================================= */

.advertisement-top-grid {
    display: grid;
    grid-template-columns: minmax(0, 3.15fr) minmax(300px, 1fr);
    gap: 18px;
    align-items: stretch;
}


/* =========================================================
   HERO
   ========================================================= */

.advertisement-hero {
    min-width: 0;
}

.advertisement-hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 405px;
    overflow: hidden;
    border-radius: 14px;
    background: #f8f7fa;
    border: 1px solid #ebe8f0;
}


.advertisement-hero-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* =========================================================
   LOGO
   ========================================================= */

.advertisement-hero-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 185px;
    height: 185px;
    border-radius: 50%;
    background: #fff;
    padding: 6px;
    border: 4px solid #5b188e;
    box-shadow: 0 5px 25px rgba(56, 8, 93, .28);
    z-index: 5;
}


    .advertisement-hero-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50% !important;
    }


/* =========================================================
   IMAGE INDICATOR
   ========================================================= */

.advertisement-image-indicator {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    direction: ltr;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(4px);
}


    .advertisement-image-indicator span {
        font-size: 9px;
        color: #d5cfe0;
    }


        .advertisement-image-indicator span.active {
            color: #6823a2;
        }


/* =========================================================
   SIDEBAR
   ========================================================= */

.advertisement-sidebar {
    min-width: 0;
    background: #fff;
    border: 1px solid #ebe7ef;
    border-radius: 14px;
    padding: 10px 13px;
    box-shadow: 0 5px 24px rgba(66, 38, 87, .07);
}


/* =========================================================
   SHARE
   ========================================================= */

.advertisement-share-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}


.advertisement-share-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #d8cde3;
    color: #65259a;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all .2s ease;
}


    .advertisement-share-button:hover {
        background: #f7f0fc;
        border-color: #9b6fc0;
    }


/* =========================================================
   INFO ITEMS
   ========================================================= */

.advertisement-info-item {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 4px;
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #eeeaf2;
    text-align: right;
    color: #29252d;
    cursor: default;
    box-shadow: 0 0 0;
}


button.advertisement-info-item {
    cursor: pointer;
}


.advertisement-info-item:last-child {
    border-bottom: none;
}


.advertisement-info-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f4ecfa;
    color: #7027a2;
    font-size: 13px;
}


.advertisement-info-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}


    .advertisement-info-content span {
        font-size: 10px;
        color: #89828e;
    }


    .advertisement-info-content strong {
        font-size: 11px;
        font-weight: 600;
        color: #37313b;
        line-height: 1.7;
    }


/* =========================================================
   BOTTOM GRID
   ========================================================= */

.advertisement-bottom-grid {
    display: grid;
    grid-template-columns: minmax(0, 3.15fr) minmax(300px, 1fr);
    gap: 18px;
    margin-top: 18px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.advertisement-content-card {
    background: #fff;
    border: 1px solid #e8e3ec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 22px rgba(66, 38, 87, .05);
}


.advertisement-accordion {
    width: 100%;
}


    .advertisement-accordion .accordion-item {
        border: 0;
        border-bottom: 1px solid #eeeaf2;
    }


        .advertisement-accordion .accordion-item:last-child {
            border-bottom: none;
        }


    .advertisement-accordion .accordion-button {
        min-height: 52px;
        background: #fff;
        color: #332d38;
        font-size: 14px;
        font-weight: 700;
        padding: 12px 18px;
        box-shadow: none !important;
    }


        .advertisement-accordion .accordion-button:not(.collapsed) {
            color: #64249a;
            background: #fbf8fd;
        }


        .advertisement-accordion .accordion-button::after {
            width: 12px;
            height: 12px;
            background-size: 12px;
            margin-left: 0;
        }


    .advertisement-accordion .accordion-body {
        height: 305px;
        overflow-y: auto;
        scrollbar-width: thin;
        padding: 15px 20px;
        color: #5c5661;
        font-size: 12px;
        line-height: 2.2;
        text-align: right;
    }


/* =========================================================
   CHART
   ========================================================= */

.advertisement-chart-card {
    background: #fff;
    border: 1px solid #e8e3ec;
    border-radius: 14px;
    padding: 15px;
    box-shadow: 0 5px 22px rgba(66, 38, 87, .05);
}


.advertisement-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}


    .advertisement-chart-header h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: #332d38;
    }


    .advertisement-chart-header span {
        font-size: 10px;
        color: #9a919f;
    }


.advertisement-chart-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}


    .advertisement-chart-filter label {
        font-size: 10px;
        color: #77717b;
    }


    .advertisement-chart-filter select {
        border: 1px solid #ded6e5;
        background: #fff;
        border-radius: 7px;
        padding: 5px 9px;
        font-size: 10px;
        color: #4b4350;
        outline: none;
    }


.advertisement-chart-wrapper {
    position: relative;
    height: 235px;
    padding: 5px;
    border-radius: 10px;
    background: #fcf9ff;
}


    .advertisement-chart-wrapper canvas {
        width: 100% !important;
        height: 100% !important;
    }


.advertisement-chart-footer {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #eeeaf2;
    font-size: 10px;
    color: #8b838f;
}


    .advertisement-chart-footer strong {
        color: #66269b;
        font-size: 13px;
    }


/* =========================================================
   SHARE TOAST
   ========================================================= */

.advertisement-share-toast {
    min-width: 250px;
    border: 1px solid #e2d7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(48, 20, 66, .15);
}


    .advertisement-share-toast .toast-header {
        background: #faf7fc;
        color: #552083;
        padding: 10px 13px;
        font-size: 12px;
    }


    .advertisement-share-toast .toast-body {
        display: flex;
        justify-content: center;
        gap: 18px;
        padding: 15px;
    }


    .advertisement-share-toast button {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 10px;
        background: #f7f3fa;
        cursor: pointer;
        transition: .2s;
    }


        .advertisement-share-toast button:hover {
            transform: translateY(-2px);
            background: #eee4f5;
        }


    .advertisement-share-toast i {
        font-size: 22px;
        color: #67249c;
    }


/* =========================================================
   RESPONSIVE DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    .advertisement-desktop {
        padding: 20px;
    }

    .advertisement-top-grid,
    .advertisement-bottom-grid {
        grid-template-columns: minmax(0, 2.7fr) minmax(270px, 1fr);
    }

    .advertisement-hero-image-wrapper {
        height: 360px;
    }

    .advertisement-hero-logo {
        width: 160px;
        height: 160px;
    }
}
/* =========================================================
   MidaShow Pricing
========================================================= */

.mida-pricing-section {
    position: relative;
    padding: 90px 20px;
    background: radial-gradient(circle at top right, rgba(255, 193, 7, .08), transparent 30%), radial-gradient(circle at bottom left, rgba(13, 110, 253, .06), transparent 30%), #f7f8fc;
    overflow: hidden;
}

.mida-pricing-container {
    width: 100%;
    max-width: 1450px;
    margin: auto;
}


/* Header */

.mida-pricing-header {
    text-align: center;
    max-width: 750px;
    margin: 0 auto 55px;
}

.mida-pricing-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    border-radius: 50px;
    background: #ffffff;
    box-shadow: 0 8px 25px rgba(0,0,0,.06);
    font-size: 14px;
    font-weight: 700;
    color: #777;
    margin-bottom: 18px;
}

.mida-pricing-title {
    margin: 0;
    font-size: 38px;
    font-weight: 900;
    color: #171717;
}

.mida-pricing-description {
    margin: 18px auto 0;
    color: #777;
    font-size: 17px;
    line-height: 2;
}


/* Grid */

.mida-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
}


/* Card */

.mida-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 30px 25px 25px;
    border-radius: 25px;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 15px 45px rgba(0,0,0,.07);
    transition: transform .3s ease, box-shadow .3s ease;
    overflow: hidden;
}

    .mida-plan-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 25px 65px rgba(0,0,0,.13);
    }


/* Top */

.mida-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.mida-plan-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    background: #f3f3f3;
}

.mida-plan-level {
    font-size: 13px;
    font-weight: 800;
    color: #777;
}


/* Name */

.mida-plan-name {
    margin: 22px 0 5px;
    font-size: 30px;
    font-weight: 900;
}

.mida-plan-subtitle {
    margin: 0;
    min-height: 50px;
    color: #888;
    font-size: 14px;
    line-height: 1.9;
}

.mida-plan-divider {
    width: 100%;
    height: 1px;
    margin: 22px 0;
    background: #eeeeee;
}


/* Features */

.mida-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

    .mida-plan-features li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 9px 0;
        color: #4c4c4c;
        font-size: 14px;
        line-height: 1.8;
    }

        .mida-plan-features li i {
            flex-shrink: 0;
            margin-top: 5px;
            font-size: 14px;
        }


/* =========================================================
   Steel
========================================================= */

.mida-plan-steel {
    border-top: 4px solid #9b9b9b;
}

    .mida-plan-steel .mida-plan-icon {
        color: #666;
        background: #eeeeee;
    }

    .mida-plan-steel .mida-plan-features li i {
        color: #777;
    }


/* =========================================================
   Bronze
========================================================= */

.mida-plan-bronze {
    border-top: 4px solid #b7794b;
}

    .mida-plan-bronze .mida-plan-icon {
        color: #9b5e32;
        background: #f7e7dc;
    }

    .mida-plan-bronze .mida-plan-features li i {
        color: #b7794b;
    }


/* =========================================================
   Silver
========================================================= */

.mida-plan-silver {
    border-top: 4px solid #8c96a3;
}

    .mida-plan-silver .mida-plan-icon {
        color: #657080;
        background: #edf0f4;
    }

    .mida-plan-silver .mida-plan-features li i {
        color: #758090;
    }


/* =========================================================
   Gold
========================================================= */

.mida-plan-gold {
    border-top: 4px solid #d5a928;
}

    .mida-plan-gold .mida-plan-icon {
        color: #b88900;
        background: #fff5ce;
    }

    .mida-plan-gold .mida-plan-features li i {
        color: #d5a928;
    }


/* Featured */

.mida-plan-featured {
    transform: translateY(-10px);
    box-shadow: 0 25px 70px rgba(207,164,50,.20);
}

    .mida-plan-featured:hover {
        transform: translateY(-18px);
    }


/* Badge */

.mida-plan-popular {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 12px;
    border-radius: 30px;
    background: #171717;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   Platinum
========================================================= */

.mida-plan-platinum {
    border-top: 4px solid #8c7cff;
}

    .mida-plan-platinum .mida-plan-icon {
        color: #6354db;
        background: #eeecff;
    }

    .mida-plan-platinum .mida-plan-features li i {
        color: #7465ee;
    }


/* =========================================================
   Diamond
========================================================= */

.mida-plan-diamond {
    border-top: 4px solid #222;
    background: radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 35%), linear-gradient(145deg, #171717, #292929);
    color: #ffffff;
}

    .mida-plan-diamond .mida-plan-level,
    .mida-plan-diamond .mida-plan-subtitle {
        color: #bdbdbd;
    }

    .mida-plan-diamond .mida-plan-name {
        color: #ffffff;
    }

    .mida-plan-diamond .mida-plan-divider {
        background: rgba(255,255,255,.13);
    }

    .mida-plan-diamond .mida-plan-icon {
        color: #ffffff;
        background: rgba(255,255,255,.12);
    }

    .mida-plan-diamond .mida-plan-features li {
        color: #e5e5e5;
    }

        .mida-plan-diamond .mida-plan-features li i {
            color: #ffffff;
        }

.mida-plan-featured-diamond {
    box-shadow: 0 25px 80px rgba(0,0,0,.22);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1200px) {

    .mida-pricing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mida-plan-featured {
        transform: none;
    }

        .mida-plan-featured:hover {
            transform: translateY(-8px);
        }
}


@media (max-width: 767px) {

    .mida-pricing-section {
        padding: 55px 12px;
        margin-top: 45px;
    }

    .mida-pricing-header {
        margin-bottom: 35px;
    }

    .mida-pricing-title {
        font-size: 27px;
        line-height: 1.6;
    }

    .mida-pricing-description {
        font-size: 14px;
        line-height: 2;
    }

    .mida-pricing-eyebrow {
        font-size: 12px;
    }

    .mida-pricing-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .mida-plan-card {
        padding: 24px 20px 22px;
        border-radius: 21px;
    }

        .mida-plan-card:hover {
            transform: none;
        }

    .mida-plan-name {
        font-size: 27px;
    }

    .mida-plan-subtitle {
        font-size: 13px;
        min-height: auto;
    }

    .mida-plan-features li {
        font-size: 13px;
        padding: 8px 0;
    }

    .mida-plan-popular {
        top: 14px;
        left: 14px;
        font-size: 10px;
    }
}
/* =========================================================
       MidaShow - Related List Landing Page
       ========================================================= */

.relatedList-list-page {
    direction: rtl;
    background: #f7f7f9;
    min-height: 100vh;
    color: #25212a;
}


/* =========================================================
       HERO
       ========================================================= */

.relatedList-list-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient( 135deg, #31045a 0%, #480680 48%, #7112a7 100% );
    color: #fff;
    padding: 24px 0 80px;
}


    .relatedList-list-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 70px;
        background: #f7f7f9;
        clip-path: ellipse(70% 70% at 50% 100%);
    }


    .relatedList-list-hero .container {
        position: relative;
        z-index: 2;
    }


/* Glow */

.relatedList-list-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}


.relatedList-list-hero-glow-one {
    width: 420px;
    height: 420px;
    top: -240px;
    right: -120px;
    background: rgba(255,255,255,.10);
}


.relatedList-list-hero-glow-two {
    width: 300px;
    height: 300px;
    bottom: -180px;
    left: -100px;
    background: rgba(255,255,255,.07);
}


/* Breadcrumb */

.relatedList-list-breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 12px;
    margin-bottom: 60px;
}


    .relatedList-list-breadcrumb a {
        color: rgba(255,255,255,.72);
        text-decoration: none;
        transition: .2s ease;
    }


        .relatedList-list-breadcrumb a:hover {
            color: #fff;
        }


    .relatedList-list-breadcrumb span {
        color: rgba(255,255,255,.40);
        font-size: 16px;
    }


    .relatedList-list-breadcrumb strong {
        color: #fff;
        font-weight: 700;
    }


/* Hero content */

.relatedList-list-hero-content {
    max-width: 880px;
    padding-right: 20px;
}


.relatedList-list-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}


.relatedList-list-hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 12px rgba(255,255,255,.8);
}


.relatedList-list-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.35;
    font-weight: 900;
    letter-spacing: -1px;
}


.relatedList-list-hero-description {
    max-width: 760px;
    margin: 0;
    color: rgba(255,255,255,.80);
    font-size: 16px;
    line-height: 2.1;
}


/* Stats */

.relatedList-list-hero-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 35px;
}


.relatedList-list-stat {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}


.relatedList-list-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.12);
    font-size: 18px;
}


.relatedList-list-stat strong {
    display: block;
    font-size: 15px;
    font-weight: 900;
}


.relatedList-list-stat span:last-child {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.65);
    font-size: 11px;
}


/* =========================================================
       MAIN
       ========================================================= */

.relatedList-list-main {
    padding: 25px 0 80px;
}


/* Section header */

.relatedList-list-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}


.relatedList-list-section-kicker {
    display: inline-block;
    margin-bottom: 6px;
    color: #480680;
    font-size: 12px;
    font-weight: 800;
}


.relatedList-list-section-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
}


.relatedList-list-section-header p {
    margin: 8px 0 0;
    color: #777;
    font-size: 13px;
}


.relatedList-list-total {
    flex-shrink: 0;
    padding: 11px 17px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #ece8ef;
    color: #777;
    font-size: 12px;
}


    .relatedList-list-total span {
        color: #480680;
        font-size: 19px;
        font-weight: 900;
        margin-left: 4px;
    }


/* =========================================================
       GRID
       ========================================================= */

.relatedList-list-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
       BUSINESS CARD
       ========================================================= */

.relatedList-business-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #ece9ef;
    box-shadow: 0 8px 30px rgba(41, 17, 54, .055);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}


    .relatedList-business-card:hover {
        transform: translateY(-7px);
        border-color: rgba(72,6,128,.20);
        box-shadow: 0 22px 50px rgba(72,6,128,.14);
    }


.relatedList-business-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}


/* Image */

.relatedList-business-card-image {
    position: relative;
    height: 235px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient( circle at center, #fff, #f6f1f9 );
}


    .relatedList-business-card-image::before {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        background: rgba(72,6,128,.045);
    }


.relatedList-business-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 180deg, transparent 50%, rgba(0,0,0,.04) );
}


.relatedList-business-card-logo {
    position: relative;
    z-index: 2;
    width: 145px;
    height: 145px;
    object-fit: contain;
    transition: transform .35s ease;
}


.relatedList-business-card:hover
.relatedList-business-card-logo {
    transform: scale(1.08);
}


.relatedList-business-card-fallback {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    padding: 15px;
    border-radius: 50%;
    background: linear-gradient( 135deg, #480680, #7a19ae );
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(72,6,128,.25);
}


/* Badge */

.relatedList-business-card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 4;
    padding: 6px 11px;
    border-radius: 50px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    color: #480680;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
}


/* Content */

.relatedList-business-card-content {
    padding: 20px;
}


    .relatedList-business-card-content h3 {
        margin: 0 0 9px;
        color: #241d29;
        font-size: 18px;
        font-weight: 900;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


.relatedList-business-card-description {
    min-height: 43px;
    margin: 0 0 15px;
    color: #777;
    font-size: 12px;
    line-height: 1.9;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}


/* Meta */

.relatedList-business-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 43px;
    margin-bottom: 17px;
}


    .relatedList-business-card-meta span {
        color: #777;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .relatedList-business-card-meta i {
        color: #480680;
        margin-left: 4px;
    }


/* Footer */

.relatedList-business-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    border-top: 1px solid #eee;
    color: #480680;
    font-size: 12px;
    font-weight: 800;
}


.relatedList-business-card-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(72,6,128,.07);
    font-size: 18px;
    transition: transform .25s ease, background .25s ease;
}


.relatedList-business-card:hover
.relatedList-business-card-arrow {
    transform: translateX(-5px);
    background: #480680;
    color: #fff;
}


/* =========================================================
       EMPTY
       ========================================================= */

.relatedList-list-empty {
    padding: 70px 25px;
    text-align: center;
    border-radius: 22px;
    background: #fff;
    border: 1px dashed #d8cfdd;
}


.relatedList-list-empty-icon {
    margin-bottom: 16px;
    font-size: 52px;
}


.relatedList-list-empty h3 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 900;
}


.relatedList-list-empty p {
    margin: 0 0 20px;
    color: #777;
    font-size: 13px;
}


.relatedList-list-empty a {
    display: inline-flex;
    padding: 11px 18px;
    border-radius: 11px;
    background: #480680;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
       PAGINATION
       ========================================================= */

.relatedList-list-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 45px;
}


.relatedList-list-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 7px;
}


.relatedList-list-pagination-number,
.relatedList-list-pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 11px;
    background: #fff;
    border: 1px solid #e6e1e9;
    color: #4b4350;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: .2s ease;
}


    .relatedList-list-pagination-number:hover,
    .relatedList-list-pagination-btn:hover {
        color: #480680;
        border-color: #480680;
    }


    .relatedList-list-pagination-number.active {
        color: #fff;
        background: #480680;
        border-color: #480680;
        box-shadow: 0 7px 18px rgba(72,6,128,.20);
    }


.relatedList-list-pagination-btn {
    gap: 8px;
}


/* =========================================================
       BOTTOM CTA
       ========================================================= */

.relatedList-list-bottom {
    padding: 0 0 70px;
}


.relatedList-list-bottom-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 35px 40px;
    border-radius: 24px;
    background: linear-gradient( 135deg, #f1e8f6, #fff );
    border: 1px solid #e5dbea;
}


.relatedList-list-bottom-kicker {
    color: #480680;
    font-size: 12px;
    font-weight: 900;
}


.relatedList-list-bottom-box h2 {
    margin: 7px 0 8px;
    font-size: 22px;
    font-weight: 900;
}


.relatedList-list-bottom-box p {
    max-width: 750px;
    margin: 0;
    color: #777;
    font-size: 13px;
    line-height: 2;
}


.relatedList-list-bottom-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: 12px;
    background: #480680;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(72,6,128,.18);
    transition: .2s ease;
}


    .relatedList-list-bottom-btn:hover {
        transform: translateY(-2px);
        background: #390568;
        color: #fff;
    }


    .relatedList-list-bottom-btn span {
        font-size: 18px;
    }


/* =========================================================
       RESPONSIVE
       ========================================================= */

@media (max-width: 1199px) {

    .relatedList-list-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (max-width: 991px) {

    .relatedList-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 767px) {

    .relatedList-list-hero {
        padding: 18px 0 65px;
    }


    .relatedList-list-breadcrumb {
        margin-bottom: 35px;
        font-size: 11px;
    }


    .relatedList-list-hero-content {
        padding-right: 0;
    }


    .relatedList-list-hero h1 {
        font-size: 29px;
        letter-spacing: 0;
    }


    .relatedList-list-hero-description {
        font-size: 13px;
        line-height: 2;
    }


    .relatedList-list-hero-stats {
        flex-direction: column;
        align-items: stretch;
    }


    .relatedList-list-stat {
        width: 100%;
    }


    .relatedList-list-section-header {
        align-items: flex-start;
        flex-direction: column;
    }


        .relatedList-list-section-header h2 {
            font-size: 23px;
        }


    .relatedList-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }


    .relatedList-business-card {
        border-radius: 16px;
    }


    .relatedList-business-card-image {
        height: 165px;
    }


    .relatedList-business-card-logo {
        width: 105px;
        height: 105px;
    }


    .relatedList-business-card-content {
        padding: 14px;
    }


        .relatedList-business-card-content h3 {
            font-size: 14px;
        }


    .relatedList-business-card-description {
        font-size: 11px;
        min-height: 40px;
    }


    .relatedList-business-card-meta span {
        font-size: 10px;
    }


    .relatedList-business-card-footer {
        font-size: 10px;
    }


    .relatedList-business-card-arrow {
        width: 28px;
        height: 28px;
    }


    .relatedList-list-pagination {
        gap: 6px;
        flex-wrap: wrap;
    }


    .relatedList-list-pagination-number,
    .relatedList-list-pagination-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 9px;
        font-size: 10px;
    }


    .relatedList-list-bottom-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
    }


    .relatedList-list-bottom-btn {
        width: 100%;
        justify-content: center;
    }
}


@media (max-width: 480px) {

    .relatedList-list-grid {
        grid-template-columns: 1fr;
    }


    .relatedList-business-card-image {
        height: 200px;
    }


    .relatedList-business-card-logo {
        width: 125px;
        height: 125px;
    }


    .relatedList-business-card-content h3 {
        font-size: 16px;
    }
}
/* =========================================================
   RELATED BUSINESSES
   ========================================================= */

.related-businesses-section {
    margin-top: -40px;

}


/* =========================================================
   Main Heading
   ========================================================= */

.related-businesses-heading {
    text-align: center;
    margin-bottom: 40px;
}


.related-businesses-eyebrow {
    display: inline-block;
    padding: 7px 16px;
    margin-bottom: 10px;
    border-radius: 50px;
    background: rgba(72, 6, 128, .08);
    color: var(--colorOriginal-dark-Level1);
    font-size: 13px;
    font-weight: 700;
}


.related-businesses-heading h2 {
    margin: 5px 0 10px;
    font-size: 30px;
    font-weight: 900;
}


.related-businesses-heading p {
    color: #777;
    font-size: 15px;
    margin: 0;
}


/* =========================================================
   Related Group
   ========================================================= */

.related-business-group {
    margin-bottom: 45px;
}


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


.related-business-group-label {
    display: block;
    color: var(--colorOriginal-dark-Level1);
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
}


.related-business-group-header h3 {
    margin: 0 0 5px;
    font-size: 21px;
    font-weight: 800;
}


.related-business-group-header p {
    margin: 0;
    color: #777;
    font-size: 13px;
}


.related-business-view-all {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 10px;
    background: rgba(72, 6, 128, .07);
    color: var(--colorOriginal-dark-Level1);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .2s ease;
}


    .related-business-view-all:hover {
        background: var(--colorOriginal-dark-Level1);
        color: #fff;
    }


    .related-business-view-all span {
        font-size: 17px;
    }


/* =========================================================
   Cards
   ========================================================= */

.related-business-slider {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}


.related-business-card {
    min-width: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 5px 22px rgba(0, 0, 0, .055);
    transition: transform .25s ease, box-shadow .25s ease;
}


    .related-business-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(72, 6, 128, .15);
    }


.related-business-card-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}


/* =========================================================
   Logo
   ========================================================= */

.related-business-logo-wrapper {
    height: 190px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: linear-gradient( 135deg, #faf7fc, #fff );
}


.related-business-logo {
    width: 100%;
    height: 100%;
    padding: 22px;
    object-fit: contain;
    transition: transform .3s ease;
}


.related-business-card:hover
.related-business-logo {
    transform: scale(1.06);
}


.related-business-logo-placeholder {
    width: 95px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 50%;
    background: rgba(72, 6, 128, .08);
    color: var(--colorOriginal-dark-Level1);
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   Card Content
   ========================================================= */

.related-business-content {
    padding: 18px;
}


    .related-business-content h4 {
        margin: 0 0 9px;
        color: #222;
        font-size: 17px;
        font-weight: 800;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    .related-business-content p {
        height: 42px;
        margin: 0 0 15px;
        overflow: hidden;
        color: #777;
        font-size: 12px;
        line-height: 1.8;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }


/* =========================================================
   Card Footer
   ========================================================= */

.related-business-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px solid #eee;
    color: var(--colorOriginal-dark-Level1);
    font-size: 12px;
    font-weight: 700;
}


.related-business-arrow {
    font-size: 18px;
    transition: transform .2s ease;
}


.related-business-card:hover
.related-business-arrow {
    transform: translateX(-5px);
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1199px) {

    .related-business-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .related-businesses-section {
        margin-top: 45px;
        margin-bottom: 45px;
        padding: 25px 0;
    }


    .related-businesses-heading {
        margin-bottom: 30px;
    }


        .related-businesses-heading h2 {
            font-size: 23px;
        }


        .related-businesses-heading p {
            font-size: 13px;
            line-height: 1.9;
        }


    .related-business-group {
        margin-bottom: 35px;
    }


    .related-business-group-header {
        align-items: flex-end;
    }


        .related-business-group-header h3 {
            font-size: 18px;
        }


    .related-business-view-all {
        font-size: 11px;
        padding: 8px 11px;
    }


    /*
       Mobile:
       Horizontal Scroll
    */

    .related-business-slider {
        display: flex;
        overflow-x: auto;
        gap: 14px;
        padding: 5px 3px 18px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }


        .related-business-slider::-webkit-scrollbar {
            display: none;
        }


    .related-business-card {
        flex: 0 0 76%;
        scroll-snap-align: start;
    }


    .related-business-logo-wrapper {
        height: 175px;
    }
}
/* ========================================================= MAIN ========================================================= */ .mida-vip-page {
    direction: rtl;
    width: 100%;
    background: #ffffff;
    padding: 45px 0 70px;
}

.mida-vip-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 25px;
}
/* ========================================================= HEADER ========================================================= */

.mida-vip-header {
    text-align: center;
    margin-bottom: 40px;
}

.mida-vip-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    margin-bottom: 13px;
    border-radius: 30px;
    background: rgba(72, 6, 128, .07);
    color: #480680;
    font-size: 12px;
    font-weight: 800;
}

    .mida-vip-header-badge i {
        font-size: 15px;
    }

.mida-vip-title {
    margin: 0;
    color: #28083f;
    font-size: 34px;
    font-weight: 900;
    line-height: 1.5;
}

    .mida-vip-title span {
        color: #480680;
    }

.mida-vip-description {
    max-width: 720px;
    margin: 10px auto 0;
    color: #81768a;
    font-size: 14px;
    line-height: 2;
}

.mida-vip-title-line {
    width: 75px;
    height: 4px;
    margin: 15px auto 0;
    border-radius: 20px;
    background: linear-gradient( 90deg, #480680, #b82a9e );
}
/* ========================================================= GRID ========================================================= */

.mida-vip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
/* ========================================================= CARD ========================================================= */

.mida-vip-card {
    position: relative;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(72, 6, 128, .08);
    box-shadow: 0 10px 35px rgba(38, 14, 53, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .mida-vip-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(72, 6, 128, .17);
    }
/* ========================================================= IMAGE ========================================================= */

.mida-vip-image {
    position: relative;
    width: 100%;
    height: 36%;
    overflow: hidden;
    background: #f5f2f7;
}

.mida-vip-background {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .5s ease;
}

.mida-vip-card:hover .mida-vip-background {
    transform: scale(1.06);
}
/* Overlay */

.mida-vip-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(24, 5, 34, .45), transparent 55% );
    pointer-events: none;
}
/* ========================================================= VIP BADGE ========================================================= */

.mida-vip-badge {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 20px;
    background: rgba(72, 6, 128, .92);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(8px);
}

    .mida-vip-badge i {
        font-size: 12px;
    }
/* ========================================================= LOGO ========================================================= */

.mida-vip-logo {
    position: absolute;
    right: 17px;
    bottom: -27px;
    width: 68px;
    height: 68px;
    padding: 4px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 7px 20px rgba(0, 0, 0, .18);
    overflow: hidden;
}

    .mida-vip-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }
/* ========================================================= CONTENT ========================================================= */

.mida-vip-content {
    position: relative;
    padding: 39px 18px 20px;
}

.mida-vip-name {
    margin: 0 0 8px;
    padding-right: 0;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.7;
}

    .mida-vip-name a {
        color: #2c153b;
        text-decoration: none;
        transition: color .25s ease;
    }

        .mida-vip-name a:hover {
            color: #480680;
        }
/* Description */

.mida-vip-short-description {
    min-height: 42px;
    margin-bottom: 13px;
    color: #81768a;
    font-size: 12px;
    line-height: 1.9;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Meta */

.mida-vip-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.mida-vip-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 8px;
    background: #f7f4f9;
    color: #665a6e;
    font-size: 10px;
    font-weight: 700;
}

    .mida-vip-meta-item i {
        color: #480680;
        font-size: 12px;
    }
/* ========================================================= EMPTY ========================================================= */

.mida-vip-empty {
    padding: 70px 20px;
    text-align: center;
    border-radius: 20px;
    background: #faf8fb;
    color: #81768a;
}

    .mida-vip-empty i {
        display: block;
        margin-bottom: 15px;
        color: #480680;
        font-size: 42px;
    }

    .mida-vip-empty h3 {
        margin: 0 0 7px;
        color: #35105f;
        font-size: 20px;
        font-weight: 900;
    }

    .mida-vip-empty p {
        margin: 0;
        font-size: 13px;
    }
/* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) {
    .mida-vip-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .mida-vip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) {
    .mida-vip-page {
        padding: 25px 0 45px;
    }

    .mida-vip-container {
        padding: 0 11px;
    }

    .mida-vip-header {
        margin-bottom: 25px;
    }

    .mida-vip-header-badge {
        padding: 6px 12px;
        font-size: 10px;
    }

    .mida-vip-title {
        font-size: 23px;
    }

    .mida-vip-description {
        padding: 0 15px;
        font-size: 11px;
        line-height: 2;
    }

    .mida-vip-title-line {
        width: 50px;
        height: 3px;
        margin-top: 10px;
    }

    .mida-vip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 11px;
    }
    /* Mobile Card */

    .mida-vip-card {
        border-radius: 16px;
        box-shadow: 0 5px 20px rgba(38, 14, 53, .08);
    }

        .mida-vip-card:hover {
            transform: none;
        }
    /* Image */

    .mida-vip-image {
        height: 145px;
    }
    /* Badge */

    .mida-vip-badge {
        top: 8px;
        right: 8px;
        padding: 5px 7px;
        font-size: 8px;
    }

        .mida-vip-badge i {
            font-size: 9px;
        }
    /* Logo */

    .mida-vip-logo {
        right: 10px;
        bottom: -21px;
        width: 52px;
        height: 52px;
        padding: 3px;
    }
    /* Content */

    .mida-vip-content {
        padding: 31px 11px 13px;
    }

    .mida-vip-name {
        margin-bottom: 5px;
        font-size: 12px;
        line-height: 1.7;
    }

    .mida-vip-short-description {
        min-height: 35px;
        margin-bottom: 8px;
        font-size: 9px;
        line-height: 1.8;
    }

    .mida-vip-meta {
        gap: 4px;
    }

    .mida-vip-meta-item {
        padding: 4px 6px;
        border-radius: 6px;
        font-size: 8px;
    }

        .mida-vip-meta-item i {
            font-size: 9px;
        }
}
/* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) {
    .mida-vip-grid {
        gap: 8px;
    }

    .mida-vip-image {
        height: 135px;
    }

    .mida-vip-content {
        padding-left: 9px;
        padding-right: 9px;
    }

    .mida-vip-name {
        font-size: 11px;
    }

    .mida-vip-short-description {
        font-size: 8px;
    }
}
/* ========== DESKTOP PAGE GROUP provinces ============ */
/* =========================================================
       MIDA PROVINCES - MOBILE
       ========================================================= */

.mida-provinces-mobile {
    width: 100%;
    padding: 0 14px 8px;
    direction: rtl;
    background: #fff;
}


/* =========================================================
       HEADER
       ========================================================= */

.mida-provinces-header {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}


.mida-provinces-title {
    margin: 0;
    color: #3b1b87;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    display: flex;
    align-items: center;
    white-space: nowrap;
}


    .mida-provinces-title i {
        color: #7437b7;
        font-size: 14px;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }


.mida-provinces-view-all {
    color: #7741b5;
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all .25s ease;
}


    .mida-provinces-view-all:hover {
        color: #480680;
    }


/* =========================================================
       SLIDER
       ========================================================= */

.mida-provinces-slider {
    width: 100%;
    padding: 4px 0 8px;
    direction: rtl;
}


    .mida-provinces-slider .slick-list {
        margin: 0 -4px;
        padding: 2px 0 5px;
    }


    .mida-provinces-slider .slick-slide {
        padding: 0 4px;
        box-sizing: border-box;
    }


/* =========================================================
       SLIDE
       ========================================================= */

.mida-province-slide {
    width: 100%;
    box-sizing: border-box;
}


/* =========================================================
       CARD
       ========================================================= */

.mida-province-card {
    width: 100%;
    height: 126px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #ffffff;
    border-radius: 13px;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(72, 6, 128, 0.07);
    border: 1px solid rgba(72, 6, 128, 0.035);
    transition: transform .25s ease, box-shadow .25s ease;
}


    .mida-province-card:active {
        transform: scale(.97);
    }


/* =========================================================
       ICON AREA
       ========================================================= */

.mida-province-icon {
    width: 100%;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 180deg, #ffffff 0%, #fcfaff 100% );
    position: relative;
}


    /* نور بسیار ظریف پشت آیکون */

    .mida-province-icon::before {
        content: "";
        position: absolute;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(116, 55, 183, .10) 0%, rgba(116, 55, 183, .035) 45%, transparent 72% );
    }


    /* خود آیکون */

    .mida-province-icon img {
        position: relative;
        z-index: 2;
        transition: transform .3s ease, color .3s ease;
    }


/* =========================================================
       PROVINCE NAME
       ========================================================= */

.mida-province-name {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    color: #30243c;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
       HOVER
       ========================================================= */

.mida-province-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 18px rgba(72, 6, 128, .13);
}


    .mida-province-card:hover .mida-province-icon i {
        transform: scale(1.08);
        color: #480680;
    }

.midaa-provinces-section {
    width: 100%;
    padding: 35px 0 60px;
    direction: rtl;
    background: #fff;
}

.midaa-provinces-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 25px;
}
/* Header */

.midaa-provinces-header {
    text-align: center;
    margin-bottom: 35px;
}

.midaa-provinces-title {
    margin: 0;
    color: #480680;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.6;
}

.midaa-provinces-subtitle {
    margin: 8px 0 0;
    color: #8b8194;
    font-size: 14px;
    font-weight: 500;
}

.midaa-provinces-title-line {
    width: 70px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 20px;
    background: linear-gradient(90deg, #480680, #c62ca5);
}
/* Grid */

.midaa-provinces-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
/* Card */

.midaa-province-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 145px;
    padding: 18px 10px;
    background: #ffffff;
    border: 1px solid rgba(72, 6, 128, 0.07);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(72, 6, 128, 0.07);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

    .midaa-province-card::before {
        content: "";
        position: absolute;
        top: -45px;
        left: -45px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: rgba(198, 44, 165, 0.06);
        transition: transform .3s ease;
    }

    .midaa-province-card:hover {
        transform: translateY(-7px);
        border-color: rgba(72, 6, 128, 0.15);
        box-shadow: 0 18px 38px rgba(72, 6, 128, 0.14);
    }

        .midaa-province-card:hover::before {
            transform: scale(2);
        }

.midaa-province-link {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}
/* Icon */

.midaa-province-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 18px;
    background: linear-gradient( 135deg, #480680, #7d2bbd );
    color: #fff;
    box-shadow: 0 8px 20px rgba(72, 6, 128, 0.22);
    transition: transform .3s ease;
}

    .midaa-province-icon img {
        border-radius: 20px !important;
    }

.midaa-province-card:hover .mida-province-icon {
    transform: scale(1.08) rotate(-3deg);
}
/* Name */

.midaa-province-name {
    margin: 0;
    color: #35105f;
    font-size: 15px;
    font-weight: 800;
    text-align: center;
    line-height: 1.7;
}
/* ========================================================= TABLET ========================================================= */ @media (max-width: 1199px) {
    .midaa-provinces-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 991px) {
    .midaa-provinces-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* ========================================================= MOBILE ========================================================= */

.midaa-provinces-mobile {
    direction: rtl;
    width: 100%;
    padding: 20px 12px 35px;
    background: #fff;
}

.midaa-provinces-mobile-header {
    text-align: center;
    margin-bottom: 22px;
}

.midaa-provinces-mobile-title {
    margin: 0;
    color: #480680;
    font-size: 22px;
    font-weight: 900;
}

.midaa-provinces-mobile-subtitle {
    margin: 6px 0 0;
    color: #918697;
    font-size: 11px;
}

.midaa-provinces-mobile-line {
    width: 45px;
    height: 3px;
    margin: 9px auto 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #480680, #c62ca5);
}
/* Mobile Grid */

.midaa-provinces-mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
/* Mobile Card */

.midaa-province-mobile-card {
    position: relative;
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(72, 6, 128, 0.07);
    box-shadow: 0 5px 18px rgba(72, 6, 128, 0.07);
    overflow: hidden;
    transition: transform .25s ease;
}

    .midaa-province-mobile-card:active {
        transform: scale(.96);
    }

.midaa-province-mobile-link {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}
/* Mobile Icon */

.midaa-province-mobile-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 7px;
    border-radius: 13px;
    background: linear-gradient( 135deg, #480680, #7d2bbd );
    color: #fff;
    box-shadow: 0 5px 14px rgba(72, 6, 128, 0.20);
}

    .midaa-province-mobile-icon i {
        font-size: 21px;
    }
/* Mobile Name */

.midaa-province-mobile-name {
    margin: 0;
    color: #35105f;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.7;
    text-align: center;
}
/* Very Small Devices */ @media (max-width: 380px) {
    .midaa-provinces-mobile {
        padding-left: 9px;
        padding-right: 9px;
    }

    .midaa-provinces-mobile-grid {
        gap: 8px;
    }

    .midaa-province-mobile-card {
        min-height: 100px;
    }

    .midaa-province-mobile-name {
        font-size: 10px;
    }
}
/* =========================================================
           MIDA SHOW - JOB CATEGORIES
           ========================================================= */

.job-categories-page {
    width: 100%;
    direction: rtl;
    background: #fbf9ff;
}


/* =========================================================
           DESKTOP
           ========================================================= */

.job-categories-desktop {
    width: 100%;
    padding: 35px 25px 70px;
}


.job-categories-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}


/* =========================================================
           HEADER
           ========================================================= */

.job-categories-header {
    text-align: center;
    margin-bottom: 35px;
}


    .job-categories-header h1 {
        margin: 0 0 8px;
        color: #35105f;
        font-size: 30px;
        font-weight: 900;
    }


    .job-categories-header p {
        margin: 0;
        color: #8b7c99;
        font-size: 14px;
        font-weight: 500;
    }


/* =========================================================
           DESKTOP GRID
           ========================================================= */

.job-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: start;
}


/* =========================================================
           JOB GROUP CARD
           ========================================================= */

.job-group {
    position: relative;
    background: #ffffff;
    border: 1px solid #eee6f7;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 8px 30px rgba(72, 6, 128, 0.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
}


    .job-group::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient( 90deg, #480680, #7b2cbf, #c62ca5 );
    }


    .job-group:hover {
        transform: translateY(-5px);
        border-color: #dfc9f1;
        box-shadow: 0 15px 40px rgba(72, 6, 128, 0.12);
    }


/* =========================================================
           GROUP HEADER
           ========================================================= */

.job-group-header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 16px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f0eaf6;
}


.job-group-icon {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient( 145deg, #f5edff, #eee1ff );
    border: 1px solid #e7d6f7;
    box-shadow: 0 5px 15px rgba(72, 6, 128, .08);
}


    .job-group-icon img {
        width: 38px;
        height: 38px;
        object-fit: contain;
    }


    .job-group-icon i {
        font-size: 29px;
        color: #480680;
    }


.job-group-header h2 {
    margin: 0;
    color: #35105f;
    font-size: 18px;
    font-weight: 850;
    line-height: 1.6;
}


/* =========================================================
           JOB TITLES
           ========================================================= */

.job-titles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}


.job-title-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 8px 12px;
    background: #faf7fd;
    border: 1px solid #f0e7f6;
    border-radius: 11px;
    color: #5a4967;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}


    .job-title-link::before {
        content: "";
        width: 6px;
        height: 6px;
        min-width: 6px;
        margin-left: 8px;
        border-radius: 50%;
        background: #9b5dcc;
        transition: transform .25s ease;
    }


    .job-title-link:hover {
        color: #480680;
        background: #f3eaff;
        border-color: #d9bcef;
        transform: translateX(-3px);
    }


        .job-title-link:hover::before {
            transform: scale(1.5);
            background: #c62ca5;
        }


.job-empty {
    width: 100%;
    padding: 12px;
    text-align: center;
    border-radius: 12px;
    background: #faf8fc;
    color: #a69bad;
    font-size: 12px;
}



/* =========================================================
           TABLET
           ========================================================= */

@media (max-width: 1199px) {

    .job-categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



/* =========================================================
           MOBILE
           ========================================================= */

.job-categories-mobile {
    width: 100%;
    direction: rtl;
    padding: 20px 12px 45px;
}


.job-categories-mobile-header {
    text-align: center;
    margin-bottom: 22px;
}


    .job-categories-mobile-header h1 {
        margin: 0 0 5px;
        color: #35105f;
        font-size: 21px;
        font-weight: 900;
        line-height: 1.7;
    }


    .job-categories-mobile-header p {
        margin: 0;
        color: #968aa1;
        font-size: 11px;
    }


/* =========================================================
           MOBILE GRID
           ========================================================= */

.job-categories-mobile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}


    .job-categories-mobile-grid .job-group {
        padding: 12px;
        border-radius: 17px;
        box-shadow: 0 5px 20px rgba(72, 6, 128, 0.055);
    }


        .job-categories-mobile-grid .job-group:hover {
            transform: none;
        }


    /* =========================================================
           MOBILE GROUP HEADER
           ========================================================= */

    .job-categories-mobile-grid .job-group-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 7px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }


    .job-categories-mobile-grid .job-group-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 15px;
        margin: 0 auto;
    }


        .job-categories-mobile-grid .job-group-icon img {
            width: 32px;
            height: 32px;
        }


        .job-categories-mobile-grid .job-group-icon i {
            font-size: 25px;
        }


    .job-categories-mobile-grid .job-group-header h2 {
        font-size: 14px;
        line-height: 1.6;
        width: 100%;
    }


    /* =========================================================
           MOBILE JOB TITLES
           ========================================================= */

    .job-categories-mobile-grid .job-titles {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }


    .job-categories-mobile-grid .job-title-link {
        min-height: 36px;
        padding: 6px 8px;
        border-radius: 9px;
        font-size: 10px;
        line-height: 1.65;
    }


        .job-categories-mobile-grid .job-title-link::before {
            width: 5px;
            height: 5px;
            min-width: 5px;
            margin-left: 6px;
        }


    .job-categories-mobile-grid .job-empty {
        font-size: 10px;
        padding: 9px 5px;
    }



/* =========================================================
           VERY SMALL MOBILE
           ========================================================= */

@media (max-width: 360px) {

    .job-categories-mobile {
        padding-left: 8px;
        padding-right: 8px;
    }


    .job-categories-mobile-grid {
        gap: 8px;
    }


        .job-categories-mobile-grid .job-group {
            padding: 10px;
        }


        .job-categories-mobile-grid .job-group-header h2 {
            font-size: 13px;
        }


        .job-categories-mobile-grid .job-title-link {
            font-size: 9px;
            padding: 5px 6px;
        }
}

/* =========================================================
           MOBILE
           ========================================================= */
.mida-show-services {
    position: relative;
    text-align: center;
    padding: 20px 25px 30px;
}


/* =========================
       عنوان
    ========================= */

.services-section-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 45px;
}

    .services-section-title hr {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        margin: 0;
        border: 0;
        border-top: 1px solid var(--colorOriginal-light-Level1);
        z-index: 0;
    }

.services-title-bg {
    position: absolute;
    width: 35%;
    height: 35px;
    background: #fff;
    z-index: 1;
    box-shadow: 0 -18px 20px 40px #fdfbff;
}

.services-section-title h3 {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 25px;
    color: #5e2d94;
    font-size: 22px;
}


/* =========================
       سرویس ها
    ========================= */

.services-row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}


/* هر سرویس */

.service-item {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 10px 5px;
}


    /* تصویر */

    .service-item img {
        width: 85px;
        height: 85px;
        object-fit: contain;
        display: block;
        margin: 0 auto 12px;
        transition: all .3s ease;
    }


    /* متن */

    .service-item p {
        margin: 0;
        color: #3b0d63;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.8;
    }


/* هاور */

.service-item {
    transition: transform .3s ease;
}

    .service-item:hover {
        transform: translateY(-8px);
    }

        .service-item:hover img {
            transform: scale(1.08);
        }
.mida-best-mobile {
    width: 100%;
    direction: rtl;
    background: linear-gradient( 180deg, #fff, #fdfaff );
    padding: 12px 0 25px;
    overflow: hidden;
}


.mida-best-mobile-container {
    width: 100%;
    padding: 0 12px;
}


/* Header */

.mida-best-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 4px;
}


.mida-best-mobile-title {
    margin: 0;
    color: #3a176b;
    font-size: 17px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 5px;
}


    .mida-best-mobile-title::before {
        content: "✦";
        color: var(--mida-pink);
        font-size: 15px;
    }


.mida-best-mobile-all {
    color: #7a4fb3;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}


    .mida-best-mobile-all i {
        font-size: 10px;
    }


/* Slider */

.mida-best-mobile-slider {
    width: 100%;
}


    .mida-best-mobile-slider .slick-list {
        overflow: visible;
        padding: 5px 0 14px;
    }


    .mida-best-mobile-slider .slick-slide {
        padding: 0 5px;
    }


.mida-best-mobile-slide {
    outline: none;
}


/* Card */

.mida-best-mobile-card {
    position: relative;
    width: 100%;
    min-height: 205px;
    background: #fff;
    border-radius: 15px;
    overflow: visible;
    box-shadow: 0 4px 15px rgba(72, 6, 128, .08);
    border: 1px solid rgba(72, 6, 128, .04);
}


/* Image */

.mida-best-mobile-image {
    position: relative;
    height: 102px;
    width: 100%;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    background: #eee;
}


    .mida-best-mobile-image > a {
        display: block;
        width: 100%;
        height: 100%;
    }


.mida-best-mobile-background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Badge */

.mida-best-mobile-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    z-index: 5;
    padding: 3px 7px;
    border-radius: 7px;
    background: linear-gradient( 135deg, #7e3bb5, #a34fd4 );
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}


/* Logo */

.mida-best-mobile-logo {
    position: absolute;
    left: 50%;
    bottom: -21px;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    padding: 3px;
    background: #fff;
    border-radius: 50%;
    z-index: 8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}


    .mida-best-mobile-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50% !important;
    }


/* Content */

.mida-best-mobile-content {
    padding: 30px 7px 10px;
    text-align: center;
}


.mida-best-mobile-name {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 800;
    color: var(--mida-text);
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


    .mida-best-mobile-name a {
        color: inherit;
        text-decoration: none;
    }


.mida-best-mobile-description {
    font-size: 8.5px;
    color: #93899d;
    line-height: 1.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.mida-best-mobile-category {
    font-size: 8px;
    color: #a39aa9;
    line-height: 1.6;
}


.mida-best-mobile-job {
    font-size: 8px;
    color: #665b72;
    line-height: 1.6;
}


/* Mobile dots */

.mida-best-mobile-slider .slick-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
}


    .mida-best-mobile-slider .slick-dots li {
        margin: 0;
        padding: 0;
        width: 6px;
        height: 6px;
    }


    .mida-best-mobile-slider .slick-dots button {
        width: 6px;
        height: 6px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #d8c9e6;
        font-size: 0;
    }


        .mida-best-mobile-slider .slick-dots button::before {
            display: none;
        }


    .mida-best-mobile-slider .slick-dots .slick-active button {
        width: 8px;
        height: 8px;
        background: var(--mida-pink);
    }


.savedProduct{
    color: red !important;
}
.row {
    margin: 0 !important;
}
/*-- Google Font --*/
.colorLinkTitle {
    color: orange;
}
/*LOADING*/
.loaderLoading {
    display: block !important;
}

.loaderLoaded {
    display: none !important;
    visibility: hidden;
}

#wifi-loaderPage {
    --background: #a4a4a4;
    --front-color: #5b43d0;
    --back-color: #c4c4ff;
    --text-color: #282828;
    z-index: 10000;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: ease all 0.6s;
    transform: rotate(0);
}

    #wifi-loaderPage svg {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #wifi-loaderPage svg circle {
            position: absolute;
            fill: none;
            stroke-width: 6px;
            stroke-linecap: round;
            stroke-linejoin: round;
            transform: rotate(-100deg);
            transform-origin: center;
        }

            #wifi-loaderPage svg circle.back {
                stroke: var(--back-color);
            }

            #wifi-loaderPage svg circle.front {
                stroke: var(--front-color);
            }

        #wifi-loaderPage svg.circle-outer {
            height: 86px;
            width: 86px;
        }

            #wifi-loaderPage svg.circle-outer circle {
                stroke-dasharray: 62.75 188.25;
            }

                #wifi-loaderPage svg.circle-outer circle.back {
                    animation: circle-outer 1.8s ease infinite 0.3s;
                }

                #wifi-loaderPage svg.circle-outer circle.front {
                    animation: circle-outer 1.8s ease infinite 0.15s;
                }

        #wifi-loaderPage svg.circle-middle {
            height: 60px;
            width: 60px;
        }

            #wifi-loaderPage svg.circle-middle circle {
                stroke-dasharray: 42.5 127.5;
            }

                #wifi-loaderPage svg.circle-middle circle.back {
                    animation: circle-middle 1.8s ease infinite 0.25s;
                }

                #wifi-loaderPage svg.circle-middle circle.front {
                    animation: circle-middle 1.8s ease infinite 0.1s;
                }

        #wifi-loaderPage svg.circle-inner {
            height: 34px;
            width: 34px;
        }

            #wifi-loaderPage svg.circle-inner circle {
                stroke-dasharray: 22 66;
            }

                #wifi-loaderPage svg.circle-inner circle.back {
                    animation: circle-inner 1.8s ease infinite 0.2s;
                }

                #wifi-loaderPage svg.circle-inner circle.front {
                    animation: circle-inner 1.8s ease infinite 0.05s;
                }

    #wifi-loaderPage .text {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: lowercase;
        font-weight: 500;
        font-size: 25px;
        letter-spacing: 0.2px;
    }

        #wifi-loaderPage .text::before, #wifi-loaderPage .text::after {
            content: attr(data-text);
        }

        #wifi-loaderPage .text::before {
            color: var(--text-color);
        }

        #wifi-loaderPage .text::after {
            color: var(--front-color);
            animation: text-animation 3.6s ease infinite;
            position: absolute;
            left: 0;
        }

@keyframes circle-outer {
    0% {
        stroke-dashoffset: 25;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 301;
    }

    80% {
        stroke-dashoffset: 276;
    }

    100% {
        stroke-dashoffset: 276;
    }
}

@keyframes circle-middle {
    0% {
        stroke-dashoffset: 17;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 204;
    }

    80% {
        stroke-dashoffset: 187;
    }

    100% {
        stroke-dashoffset: 187;
    }
}

@keyframes circle-inner {
    0% {
        stroke-dashoffset: 9;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 106;
    }

    80% {
        stroke-dashoffset: 97;
    }

    100% {
        stroke-dashoffset: 97;
    }
}

@keyframes text-animation {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    50% {
        clip-path: inset(0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}

:root {
    --colorOriginal-light-Level1: #7f05e6;
    --colorOriginal-light-Level2: rgb(127, 5, 230);
    --colorOriginal-light-Level3: #000;
    --colorOriginal-dark-Level1: #480680;
    --colorOriginal-dark-Level2: #fff;
    --colorOriginal-dark-Level3: #f5e3ff;
}

*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: 'IranYekan', sans-serif !important;
    font-size: 16px;
    font-weight: 200;
    font-style: normal;
    line-height: 2.4;
    position: relative;
    visibility: visible;
    color: var(--colorOriginal-light-Level3);
    background-color: #fbfafd;
}
a {
    color: #480680;
}
.body-IMG {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: -moz-available;
    width: -webkit-fill-available;
}

    body.grey-bg {
        background-color: #f4f4f4;
    }

    body.active-overlay:before {
        position: fixed;
        z-index: 99;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: '';
        background: rgba(41, 41, 41, .3);
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500;
    margin-top: 0;
    color: #202223;
}

h1 {
    font-size: 36px;
    line-height: 42px;
}

h2 {
    font-size: 30px;
    line-height: 36px;
}

h3 {
    font-size: 24px;
    line-height: 30px;
}

h4 {
    font-size: 18px;
    line-height: 24px;
}

h5 {
    font-size: 14px;
    line-height: 18px;
}

h6 {
    font-size: 12px;
    line-height: 14px;
}

p:last-child {
    margin-bottom: 0;
}

a,
button {
    line-height: inherit;
    display: inline-block;
    cursor: pointer;
    text-decoration: none !important;
    color: var(--colorOriginal-light-Level3);
}
a,
button,
img,
input,
span {
    -webkit-transition: all .1s ease 0s;
    transition: all .1s ease 0s;
}

*:focus {
    outline: none !important;
}

a:focus {
    text-decoration: none !important;
    color: inherit;
    outline: none;
}

a:hover {
    text-decoration: none !important;
}

button,
input[type='submit'] {
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style: outside none none;
}

.colorLight {
    background-color: var(--white);
}
.colorNotice {
    color: red;
}

.menuBarFrofile {
    width: 96%;
    font-size: 18px;
    padding: 8px;
    position: fixed;
    top: 5px;
    z-index: 9999;
    background-color: #efddfff0 !important;
    border-radius: 15px;
}
.Button-navbarH {
    color: gray !important;
}

    .Button-navbarH:hover {
        background-color: #f1e2ff !important;
    }

.buttonNavbarProfile {
    color: black !important;
}

.information input {
    width: 100%;
    border: 1px solid var(--colorOriginal-light-Level1);
    border-radius: 8px;
}

.information label {
    position: relative;
    right: 85%;
    color: green;
}

.informationBtn {
    width: 25%;
    border: none;
    border-radius: 8px;
    background-color: var(--colorOriginal-light-Level1);
    color: var(--colorOriginal-dark-Level3);
}

.divOneNav {
    top: 15% !important;
    position: sticky !important;
    z-index: 2 !important;
}

.divStyleNav {
    border: 1px solid #8080804a;
    background: white;
    border-radius: 12px;
    padding: 8px;
}

.divSectionOneNav {
    border-bottom: 1px solid #8080804a;
}

    .divSectionOneNav img {
        width: 135px;
        border-radius: 15%;
    }

    .divSectionOneNav p, .divSectionOneNav i {
        color: var(--colorOriginal-dark-Level2);
    }

        .divSectionOneNav i:hover {
            color: var(--colorOriginal-light-Level1);
        }
/*added New Class MeidaShow*/
.div-download-pdf {
    border: 2px solid red;
    border-radius: 15px;
    width: 23%;
    padding: 25px;
    margin: 15px;
    background-color: #ffdada;
    position: absolute;
    top: 65%;
    right: 0;
    z-index: 99;
}
.download-pdf-btn {
    padding: 8px 30px;
    background: var(--colorOriginal-dark-Level1);
    color: white;
    border-radius: 8px;
}

    .download-pdf-btn:hover {
        background: rgb(230 5 107);
        color: whitesmoke;
    }
.box-FilterMain-mobile {
    width: 100%;
    padding: 20px;
    box-shadow: 0 0 10px #808080c2;
    border-radius: 15px;
    background-color: #d7cae3db;
}

    .box-FilterMain-mobile h3 {
        color: #361067 !important;
        margin-bottom: 15px;
        text-align: center;
        font-size: 18px;
    }
    .box-FilterMain-mobile input {
        border: none;
        border-radius: 8px;
    }

    .box-FilterMain-mobile div {
        width: 100%;
        position: relative;
        display: inline-grid;
    }

    .box-FilterMain-mobile select,button {
        border: none;
        box-shadow: 0 0 6px #8080804d;
        border-radius: 8px;
        background-position: 5% 50%;
        margin: 6px 0;
    }

.box-FilterMain-desktop {
    position: relative;
    z-index: 99;
    width: 100%;
    padding: 25px;
    box-shadow: 0 0 10px #808080c2;
    border-radius: 15px;
    background-color: #f1e1fe;
}
    .box-FilterMain-desktop h3 {
        color: #2b0f6b !important;
        margin-bottom: 10px;
    }
    .box-FilterMain-desktop div {
        width: 100%;
        position: relative;
        display: inline-flex;
        justify-content: center;
    }
    .box-FilterMain-desktop select {
        width: 90%;
        border: none;
        box-shadow: 0 0 6px #8080804d;
        border-radius: 8px;
        background-position: 5% 50%;
    }
    .box-FilterMain-desktop input {
        width: 95%;
        border: none;
        box-shadow: 0 0 6px #8080804d;
        border-radius: 8px;
        padding: 0 12px;
    }
    .box-FilterMain-desktop button {
        width: 50%;
        border: none;
        box-shadow: 0 0 6px #8080804d;
        border-radius: 8px;
        background-color: #582990;
        height: 37px;
        top: 40px;
        position: relative;
        color: whitesmoke;
    }
.btn-MeidaShow-Seller-Agent {
    width: 22%;
    background-color: #d6aaff;
    padding: 14px;
    border-radius: 12px;
    margin: 0 2px;
    box-shadow: 0 0 7px #80808094;
    transition: all ease-in 0.35s;
    text-align: center;
}
    .btn-MeidaShow-Seller-Agent:hover {
        background-color: #9351d1;
        color: var(--colorOriginal-dark-Level3);
    }
/*added New Class*/
.boxAdvOrderBG {
    /* background: linear-gradient(rgb(0 0 0 / 9%), rgba(0, 0, 0, 0.5)), url(../img/BGADVBOX.jpg);*/
    background: url(../img/BGADVBOX.jpg);
    background-size: cover;
    background-position: center;
    padding: 25px;
}
.boxAdvOrder {
    border-radius: 15px;
    padding: 15px;
    background-color: white;
    box-shadow: 0px 1px 10px #0000001f;
    margin: 8px;
}
.boxAdvOrder1 {
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0px 1px 10px #0000001f;
    margin: 8px;
    text-align: justify;
}
    .boxAdvOrder1 p {
        color: gray;
        font-size: 18px;
        font-weight: 400;
    }
.btnAdvOrder {
    padding: 3px 60px;
    width: 260px;
    text-align: center;
    background-color: var(--colorOriginal-light-Level1);
    font-size: 18px;
    font-weight: 400;
    border-radius: 8px;
    border: 1px solid;
    margin: 20px;
    color: white;
    transition: all ease-in-out 0.5s;
}
    .btnAdvOrder:hover {
        background-color: white;
        color: var(--colorOriginal-light-Level1);
    }
.install-btn {
    display: none;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

    .install-btn.show-install-btn {
        display: inline-block;
    }

    .install-btn:hover {
        background-color: #0056b3;
        transform: scale(1.05);
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn-ADV {
    font-size: 14px;
    padding: 10px 10px;
}
.btn-btnNextADV {
    margin-top: 50px;
}
    .btn-btnNextADV button {
        width: 20%;
    }
.mobileMenuADV {
    display: flex;
    justify-content: center;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 15px -9px #808080a1;
}
    .mobileMenuADV ul li {
        width: 20%;
    }
        .mobileMenuADV ul li a {
            width: 100%;
        }
        .mobileMenuADV ul li i {
            text-align: center;
            color: #7f7f7f;
            font-size: 16px;
        }
        .mobileMenuADV ul li p {
            font-size: 14px;
            color: #7f7f7f;
        }
.div-col-navADV {
    width: 100%;
    font-size: 18px;
    padding: 8px;
    position: fixed;
    top: 0;
    z-index: 9999;
}
.div-back-navADV {
    background-color: #fff;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 0 13px 1px #dddddd;
}
    .div-back-navADV ul {
        display: inline-flex;
        width: 100%;
        padding: 8px 0;
        margin: 0;
        margin-right: 25px;
    }
/*    .div-back-navADV li {
        margin: 0 10px;
    }*/
.div-Item-navADV {
    font-size: 16px;
    position: relative;
    padding: 6px 2px;
    margin: 0 18px;
    display: inline-flex;
    align-items: center;
    color: #3b0d63;
    transition: color 0.35s ease, transform 0.35s ease, text-shadow 0.35s ease;
}


    /* خط زیر منو */
    .div-Item-navADV::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -3px;
        width: 0;
        height: 2px;
        background: var(--colorOriginal-light-Level1);
        border-radius: 10px;
        transform: translateX(-50%);
        transition: width 0.4s cubic-bezier(.4, 0, .2, 1), box-shadow 0.4s ease;
    }


    /* Hover */
    .div-Item-navADV:hover {
        color: var(--colorOriginal-light-Level1);
        transform: translateY(-3px);
        text-shadow: 0 4px 12px rgba(72, 6, 128, 0.18);
    }


        /* انیمیشن خط */
        .div-Item-navADV:hover::after {
            width: 100%;
            box-shadow: 0 2px 8px rgba(72, 6, 128, 0.35);
        }
.average-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    color: #626262;
    justify-content: center;
}
.rating-display {
    font-size: 22px;
    display: flex;
    gap: 2px;
    justify-content: center;
    position: relative;
    bottom: 10px;
}

.star {
    display: inline-block;
    color: gray; /* رنگ پیش‌فرض طوسی */
}
.starMobile {
    display: inline-block;
    color: gray; /* رنگ پیش‌فرض طوسی */
}

.full {
    color: gold; /* ستاره‌های کاملاً طلایی */
}

.empty {
    color: gray; /* ستاره‌های خالی */
}

.half {
    position: relative;
    color: gray; /* نیمه طوسی */
}

    .half::before {
        content: "★";
        position: absolute;
        width: 50%;
        overflow: hidden;
        color: gold; /* نیمه طلایی */
    }


.rating {
    display: inline-flex;
    flex-direction: row-reverse; /* ترتیب معکوس برای نمایش صحیح */
    justify-content: center;
    gap: 5px;
}
    .rating .star {
        font-size: 50px;
        cursor: pointer;
        color: gray;
        transition: color 0.3s;
        height: 50px;
        position: relative;
        bottom: 8px;
    }
    .rating .starMobile {
        font-size: 50px;
        cursor: pointer;
        color: gray;
        transition: color 0.3s;
        height: 50px;
        position: relative;
        bottom: 15px;
    }

    /* مخفی کردن دایره‌های ورودی فقط برای امتیازدهی */
    .rating input {
        display: none;
    }

        /* تغییر رنگ ستاره‌های انتخاب‌شده و قبلی فقط در بخش امتیازدهی */
        .rating input:checked ~ label,
        .rating label:hover,
        .rating label:hover ~ label {
            color: gold;
        }

/*.rating label {
    font-size: 24px;
    color: gray;
    cursor: pointer;
}

.rating input:checked ~ label {
    color: gold;
}*/
.BoxAdvertisementGroup {
    height: 330px;
    box-shadow: 0px 0px 69px #808080bf;
    border-radius: 15px;
    padding: 12px;
    background-color: white;
    transition: 0.6s;
}
.BoxAdvertisementGroup:hover {
    box-shadow: 0px 0px 0px;
}
.divOrderAdv {
    position: fixed;
    width: 175px;
    font-size: 15px;
    text-align: justify;
    left: 0;
    margin: 25px;
    background-color: white;
    padding: 12px;
    border-radius: 15px;
    color: var(--colorOriginal-light-Level3);
    box-shadow: 0 0 15px;
}
.divOrderAdvMobile {
    font-size: 13px;
    text-align: justify;
    margin: 25px;
    background-color: white;
    padding: 12px;
    border-radius: 15px;
    color: var(--colorOriginal-light-Level3);
    box-shadow: 0 0 6px -2px gray;
}

.classVIPGoldContainer {
    border-radius: 15px;
    padding: 50px;
}
.classVIPSilverContainer {
    border-radius: 15px;
    padding: 25px;
}
.classVIPGoldContainerMobile {
    border-radius: 15px;
    padding: 5px;
}

.classVIPSilverContainerMobile {
    background-color: silver;
    border-radius: 15px;
}

.classNameButtonMenu {
    width: 100%;
    text-align: center;
    border: 1px solid var(--colorOriginal-light-Level1);
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 0 15px gray;
    margin-top: 15px;
    margin-bottom: 15px;
    color: var(--colorOriginal-light-Level2);
}
.styleMobileIconeOnePage {
    background: -webkit-linear-gradient(90deg, hsla(272, 91%, 26%, 1) 0%, hsla(273, 37%, 57%, 1) 50%, hsla(273, 100%, 96%, 1) 100%);
    border-radius: 15px;
    box-shadow: 1px 1px 4px #cdcdcd;
    font-size: 55px;
}
.cla-btn-landingpage {
    padding: 12px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 0 3px #cdcdcd;
    background-color: white;
    color: var(--colorOriginal-dark-Level1);
    font-size: 25px;
    text-align: center;
    transition: 0.6s;
}
    .cla-btn-landingpage:hover {
        /* border: 1px solid var(--colorOriginal-dark-Level1);*/
        background-color: var(--colorOriginal-dark-Level1);
        color: white !important;
    }

.cla-btnOff-landingpage {
    padding: 12px;
    border-radius: 15px;
    border: none;
    box-shadow: 0 0 3px #000;
    /*background-color: #d2d2d2;*/
    color: #000;
    font-size: 12px;
    text-align: center;
}

.lineButtonCardMobile {
    background-color: white;
    margin: 0;
    padding: 0;
    position: fixed;
    bottom: 58px;
    z-index: 999;
}
.styleMobileLeft {
    position: absolute;
    left: -20px;
    height: 100%;
    border: none;
    background-color: inherit;
    font-size: 30px;
}
.styleMobileRight {
    position: absolute;
    height: 100%;
    border: none;
    background-color: inherit;
    font-size: 30px;
    top: 0%;
}
.buttonShowVideoProduct {
    box-shadow: inset 0 0 34px rgba(255, 255, 255, .5);
    background-color: var(--colorOriginal-dark-Level1);
    width: 100%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    backdrop-filter: blur(65px);
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
}
.inputColor {
    width: 30px !important;
    height: 30px !important;
    position: relative !important;
    margin-right: 15px !important;
}
.btnAddAddressMobile {
    border: 1px solid var(--colorOriginal-light-Level1);
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 6px;
    height: fit-content;
    margin-top: 15px !important;
}
.buttonBackMobile {
    margin-top: .5rem !important;
    border-bottom: 1px solid black;
    width: 100%;
}
.Titrepost {
    text-align: right !important;
    font-size: 16px !important;
    color: var(--colorOriginal-light-Level3);
}
.progress-container {
    width: 100% !important;
    background-color: #ddd !important;
}

.progress-bar {
    width: 100%;
    height: 10px !important;
    background-color: #4CAF50 !important;
    text-align: center !important;
    line-height: 30px !important;
    color: white !important;
    animation-name: progress !important;
    animation-duration: 6s !important;
}

@keyframes progress {
    from {
        width: 100% ;
    }

    to {
        width: 1%;
    }
}

.badge {
    font-size: 25px;
    font-weight: 200;
}

    .badge i {
        font-size: 20px;
        font-weight: 200;
    }

.about-rating {
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
}

.total-ratings {
    font-size: 12px;
}

.bg-custom {
    background-color: #777 !important;
}
.bg-warning {
    background-color: #777 !important;
}

.progress {
    margin-bottom: 10px;
    height: 6px !important;
}

.modal-content {
    background-color: #0000005e !important;
    border-radius: 12px !important;
}
.h_iframe-aparat_embed_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.boxvideo {
    border: 1px solid var(--colorOriginal-light-Level1);
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 8px;
    padding: 15px;
}
.buttonProductCategory {
    width: 12%;
    border: none;
    border-radius: 5px;
    background-color: whitesmoke;
    color: var(--colorOriginal-dark-Level1);
    transition: 0.6s;
}


    .buttonProductCategory:hover {
        background-color: inherit;
        border-bottom: 1px solid var(--colorOriginal-light-Level1);
        color: var(--colorOriginal-light-Level1);
        /*transform:rotate();*/
    }



.liNavTimeOnline {
    position: absolute !important;
    left: 9%;
}
.boxPrivacyPage {
    padding: 25px;
    background-color: aliceblue;
    border-radius: 15px;
}
.boxSendReportBug {
    padding: 12px;
    margin-bottom: 50px;
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 15px;
    margin-top: 50px;
}
.imgReportBug {
    width: auto;
    height: 550px;
}

.boxSendCommandQustion {
    padding: 12px;
    margin-bottom: 25px;
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 15px;
}

.accordion .accordion-item {
    border-bottom: 1px solid var(--colorOriginal-dark-Level1);
}

   /* .accordion .accordion-item button[aria-expanded='true'] {
        border-bottom: 1px solid var(--colorOriginal-light-Level1);
    }
*/
.accordion button {
    position: relative;
    display: inline-flex;
    text-align: right;
    width: 100%;
    padding: 1em;
    color: var(--colorOriginal-dark-Level1);
    font-size: 18px;
    font-weight: 200;
    border: none;
    outline: none;
}
.accordion-button::after {
    margin-right: 3%;
}
    /*.accordion button:hover, .accordion button:focus {*/
       /* cursor: pointer;*/
        /*color: var(--colorOriginal-light-Level1);
    }

        .accordion button:hover::after, .accordion button:focus::after {*/
            /*cursor: pointer;*/
            /*color: var(--colorOriginal-light-Level1);
            border: 1px solid var(--colorOriginal-light-Level1);
        }*/

    .accordion button .accordion-title {
        padding: 1em 1.5em 1em 0;
    }

    .accordion button .icon {
        display: inline-block;
        position: absolute;
        top: 30px;
        left: 20px;
        width: 22px;
        height: 22px;
        border: 1px solid;
        border-radius: 22px;
    }

        .accordion button .icon::before {
            display: block;
            position: absolute;
            content: '';
            top: 9px;
            left: 5px;
            width: 10px;
            height: 2px;
            background: currentColor;
        }

        .accordion button .icon::after {
            display: block;
            position: absolute;
            content: '';
            top: 5px;
            left: 9px;
            width: 2px;
            height: 10px;
            background: currentColor;
        }

    .accordion button[aria-expanded='true'] {
        color: var(--colorOriginal-light-Level1);
    }

        .accordion button[aria-expanded='true'] .icon::after {
            width: 0;
        }

        .accordion button[aria-expanded='true'] + .accordion-content {
            opacity: 1;
            max-height: 25em;
            transition: all 200ms linear;
            will-change: opacity, max-height;
            
        }

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
}

    .accordion .accordion-content p {
        font-size: 15px;
        font-weight: 200;
        text-align: justify;
        padding: 20px;
    }
 
.textBottomFooter{
text-align: center;
font-size: 11px;
}
.ProductCategoryesPageMobile {
    text-align: center;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 15px;
    box-shadow: 0 0px 38px -15px #80808061;
    height: 140px;
}
    .ProductCategoryesPageMobile img {
        width: 85px !important;
        height: 85px;
        border-radius: 50%;
    }
.footerMobile {
    position: fixed;
    width: 100%;
    bottom: 0;
}
.imgCategoryProduct {
    width: 95px;
    border: none;
    height: 95px;
    border-radius: 50%;
    transition: all 350ms ease-in-out;
    animation-delay: 2s;
}
.imgCategoryProduct:hover {
    transform:scale();
    box-shadow: 0 0 20px 150px var(--colorOriginal-light-Level1) inset, 0 0 0 0 var(--colorOriginal-light-Level1);

}
#contentsubmenu {
    position: fixed;
    top: 13%;
    width: 100%;
    height: 350px;
    background-color: white;
    z-index: 99;
    padding: 25px;
    display: inline-flex;
    transition: 0.6s;
}
.is-hiddenSumMenu {
    /*display: none;*/
    position: relative;
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
}

.imgAboutUs {
    width: 100%;
    height: 495px;
}
.textregasterpage {
    text-align: center;
    display: inline-flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    margin-bottom: 3%;
}
.divSectionHottest {
    background-color: #f5f5f542;
    border-radius: 15px;
    padding-top: 20px;
    padding-bottom: 15px;
    display: inline-flex;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}
.divSectionHottestMobile {
    background-color: var(--colorOriginal-dark-Level3);
    padding-top: 20px;
    padding-bottom: 15px;
    display: inline-flex;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
    .divSectionHottestMobile h2 {
        text-align: center;
        justify-content: center;
        display: inline-flex;
        width: 100%;
        border-bottom: 1px solid var(--colorOriginal-light-Level2);
        padding-bottom: 10px;
        color: var(--colorOriginal-light-Level1);
        font-size: 20px;
    }
    .divSectionHottest h2 {
        text-align: center;
        justify-content: center;
        display: inline-flex;
        width: 100%;
        border-bottom: 1px solid whitesmoke;
        padding-bottom: 10px;
        color: whitesmoke;
    }
.divKoskesh {
    width: 100% !important;
    display: inline-block !important;
    border: 1px solid black !important;
    border-radius: 15px !important;
    padding: 8px !important;
}
.paddingParts {
    padding-top: 20px;
    padding-bottom: 20px;
}
/*S Template2 Nav*/
.ulNavbar {
    margin: 0 !important;
    display: inline-flex;
    width: 100%;
    height: 35px;
    font-size: 16px;
}
    .ulNavbar li {
        text-align: center;
        margin-right: 0px !important;
    }
        .ulNavbar li a:hover{
            color: var(--colorOriginal-light-Level1) !important;
        }
        .ulNavbar li span {
            color: #0000006e;
            margin-right: 20px;
            margin-left: 0 !important;
        }
        .ulNavbar li a i {
            font-size: 20px;
            color: #00000087;
            transition: all .1s ease 0s;
        }
        .ulNavbar li a {
            line-height: 0 !important;
            display: contents !important;
            padding: 0 !important;
            transition: all .1s ease 0s;
        }

/*E Template2 Nav*/
.mediaSiteGuide {
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
}
.divSiteGuide {
    width: 85%;
    height: 85%;
}
.search1 {
    height: 50px;
    display: flex;
    align-items: center;
    padding-right: 14px;
    border-radius: 15px;
    background: #482e5f;
}
    .search1 i {
        font-size: 35px;
        color: #ffffff;
    }
    .search1 input {
        font-size: 16px;
        color: #ffffff;
        margin-right: 14px;
        width: 100%;
        border: none;
        background: inherit;
        box-shadow: 0 0 0;
    }

.Reigester {
    background: inherit;
    border: 1px solid var(--colorOriginal-dark-Level3);
    font-size: 22px;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    display: inline-flex;
}
    .Reigester:hover {
        border: 1px solid var(--colorOriginal-dark-Level1);
    }
    .Reigester p {
        margin-top: -2%;
        margin-right: 5px;
    }
.parentFind div {
    width: 100% !important;
}
.parentFind p {
    font-size: 16px !important;
    font-weight: 200 !important;
    line-height: 35px;
/*    color: var(--colorOriginal-dark-Level2) !important;
    background-color: var(--colorOriginal-light-Level3) !important;*/
}
.parentFind em {
    font-size: 16px !important;
    font-weight: 200 !important;
    line-height: 35px;
    color: var(--colorOriginal-dark-Level2) !important;
    background-color: var(--colorOriginal-light-Level3) !important;
}
.parentFind span {
    font-size: 16px !important;
    font-weight: 200 !important;
    line-height: 35px;
    color: var(--colorOriginal-dark-Level2) !important;
    background-color: var(--colorOriginal-light-Level3) !important;
}
.dottedText {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 150px;
}
.dottedH {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}
.dottedHMobile {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 76px;
}
.buttonNavAccount {
    color: var(--colorOriginal-dark-Level2);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: var(--colorOriginal-dark-Level1);
    border-color: var(--colorOriginal-dark-Level1) !important;
}
    .active, .buttonNavAccount:focus, .buttonNavAccount:hover {
        color: rgb(198, 130, 255);
      
    }

.ulNavAccount {
    border-bottom: 1px solid var(--colorOriginal-light-Level1) ;
}
    .ulNavAccount li {
        width: 25%;
        margin-left:2.5px;
        margin-right:2.5px;
    }


.blogPostTitle {
    font-size: 25px;
    padding: 8px;
    border-bottom: 1px solid var(--colorOriginal-light-Level2);
}
.telegramLink {
    color: deepskyblue !important;
}
    .telegramLink:hover {
        color: white !important;
        border: none !important;
        background-color: deepskyblue !important;
    }
.colorTextTable {
    color: var(--colorOriginal-light-Level3);
}
.jw-modal {
    /* modals are hidden by default */
    display: none;
    /* modal container fixed across whole screen */
    position: fixed;
    inset: 0;
    /* z-index must be higher than everything else on the page */
    z-index: 10000;
    /* semi-transparent black background exposed by padding */
    background-color: rgba(0, 0, 0, 0.601);
    padding: 40px;
    /* enables scrolling for tall modals */
    overflow: auto;
}

    .jw-modal.open {
        display: block;
        text-align: -webkit-center;
        text-align: -moz-center;
    }

.jw-modal-body {
    padding: 20px;
    background: #fff;
    width: 50%;
    text-align: center;
}

body.jw-modal-open {
    /* body overflow is hidden to hide main scrollbar when modal window is open */
    overflow: hidden;
}
.jw-modal-button {
    background-color: var(--colorOriginal-dark-Level2);
    padding: 1%;
    margin-top: 2%;
    width: 35%;
    color: var(--colorOriginal-light-Level3);
    border-radius: 7px;
    border: 1px solid var(--colorOriginal-light-Level1);
}
.jw-modal-img {
    width: 100%;
}

.selected-button {
    background-color: var(--colorOriginal-dark-Level2);
    width: 85px;
}

.Ordering-outOfBox {
    z-index: 1;
    position: relative;
    margin-bottom: 8px;
    background-color: var(--colorOriginal-dark-Level3);
    padding: 12.5px;
    border-radius: 12px;
    box-shadow: 0 0 4px var(--colorOriginal-dark-Level3);
    text-align: start;
}
.Ordering-insideBox {
    display: inline-flex;
    color: var(--colorOriginal-dark-Level2);
    position: relative;
    width: 100%;
}
.Ordering-button {
    border: dashed var(--colorOriginal-light-Level3);
    color: var(--colorOriginal-light-Level3);
    margin-right: 10px;
    background-color: var(--colorOriginal-dark-Level2);
    width: 12%;
}
    .Ordering-button:hover {
        border: dashed var(--colorOriginal-light-Level2);
        border-radius: 9px;
    }
.Ordering-title {
    font-size: 16px;
    color: var(--colorOriginal-light-Level1);
    text-align: center;
    margin-top: 12px;
}
.outOfBox-item_carousel {
    background-color: var(--colorOriginal-light-Level3);
}
.insideBox-item_carousel {
    border: 0.5px solid var(--colorOriginal-dark-Level1);
    color: var(--colorOriginal-dark-Level2);
    font-size: 40px;
}
    .insideBox-item_carousel h5 {
        color: var(--colorOriginal-dark-Level2);
        font-size: 16px;
        margin-top: -15%;
    }
    .insideBox-item_carousel p {
        font-size: 10px;
        font-weight: 200;
        color: var(--colorOriginal-dark-Level2);
    }
    .insideBox-item_carousel:hover {
        border: 0.5px solid var(--colorOriginal-light-Level1);
        color: var(--colorOriginal-light-Level1);
    }
    .insideBox-item_carousel h5:hover {
        color: var(--colorOriginal-light-Level1);
    }
    .insideBox-item_carousel p:hover {
        color: var(--colorOriginal-light-Level1);
    }
/*.text-item_carousel:hover {
    color: var(--colorOriginal-light-Level1) !important;
}
.insideBox-item_carousel:hover {
    color: var(--colorOriginal-light-Level1) !important;
}
.title-item_carousel:hover {
    color: var(--colorOriginal-light-Level1) !important;
}*/



.carousel-inner_B {
    padding: 1em;
}
.card-H_B {
    text-align: center;
    font-size: 12px;
    padding-top: 8px;
}
.card_B {
    margin-top: -15px;
    border: none;
    border-top-color: currentcolor;
    border-right-color: currentcolor;
    border-bottom-color: currentcolor;
    border-left-color: currentcolor;
    border-radius: 50%;
    border-color: var(--colorOriginal-light-Level1);
    transition: all 350ms ease-in-out;
    animation-delay: 2s;
}
.titleCategory {
    text-align: center;
    font-weight: 200;
    margin: 0;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0;
    margin-top: 3%;
    margin-bottom: -1%;
}
.card_B:hover {
    border-radius: 50%;
    box-shadow: 0 0 10px 0 var(--colorOriginal-light-Level1) inset, 0 0 10px 4px var(--colorOriginal-light-Level1);
}

.carousel-control-prev,
.carousel-control-next {
    background-color: #e1e1e1;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

@media (min-width: 768px) {
    .carousel-item_B {
        margin-right: 0;
        /*flex: 0 0 33.333333%;*/
        display: block;
        padding-top: 15px;
    }

    .carousel-inner_B {
        display: flex;
    }
}

.card_B .img-wrapper_B {
    max-width: 100%;
/*    height: 13em;*/
    display: flex;
    justify-content: center;
    align-items: center;
}


@media (max-width: 767px) {
    .card_B .img-wrapper_B {
       /* height: 17em;*/
    }
}
.backgrundSlice {
    background: linear-gradient(350deg,#fff, #6f19b7,#282828);
}
.backgrundFooter {
    background: linear-gradient(350deg, #fff, #6f19b770, #e1caff);
}

.Button-IBS-LA {
    position: absolute;
    left: 0;
    background-color: var(--colorOriginal-dark-Level2);
    border: double;
    border-radius: 9px;
    transition: all 200ms ease-in-out;
    margin-top: -1%;
}
    .Button-IBS-LA:hover {
        background-color: var(--colorOriginal-light-Level1);
        color: var(--colorOriginal-dark-Level2);
        border: double;
        border-radius: 6px;
    }



.padding-banner {
    padding-right: 3.75px;
    padding-left: 3.75px;
}
.Backgrund-Incredibles {
    /*background-color: var(--colorOriginal-light-Level3);*/
    background-color: #ae0021;
    border-radius: 8px;
    box-shadow: 0 0 5px var(--colorOriginal-dark-Level3);
}
.Backgrund-Incredibles-padding {
    padding-bottom: 30px;
}
.colorText-Incredibles {
    /*color: red;*/
}

.Backgrund-BS-LA {
    background-color: #482e5f;
    border-radius: 8px;
    box-shadow: 0 0 5px var(--colorOriginal-dark-Level3);
}

/*.BS-LA-padding {
    padding-bottom: 15px;
}*/

.Slick-card-products {
    position: relative;
    width: 100%;
    /*padding-right: 5px;*/
    padding-left: 5px;
}

.image-blog1 {
    width: auto;
    height: auto;
}
.image-blog {
    border-radius: 15px;
}
.Alert-colorS {
    font-size: 18px;
    font-weight: 200;
    text-align: center;
    color: #197300 !important;
    background-color: var(--colorOriginal-dark-Level3) !important;
    border-color: var(--colorOriginal-light-Level2) !important;
}
.Alert-colorD {
    font-size: 18px;
    font-weight: 200;
    text-align: justify;
    color: red !important;
    background-color: var(--colorOriginal-dark-Level3) !important;
    border-color: var(--colorOriginal-light-Level2) !important;
}
.AB-Div1-Titr {
    padding-bottom: 25px;
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
}
.AB-Div2-Titr {
    margin-right: 25%;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 1px 2px 12px var(--colorOriginal-light-Level1);
    width: 50%;
    text-align: center;
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 8px;
}
.AB-Titr {
    color: var(--colorOriginal-light-Level2);
}
.CU-Div1-Titr {
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
}

.CU-Div2-Titr {
    margin-right: 25%;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 1px 2px 12px var(--colorOriginal-light-Level1);
    width: 50%;
    text-align: center;
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 8px;
}

.CU-Titr {
    color: var(--colorOriginal-light-Level2);
}
.CU-div1-BoxR {
    display: inline-flex;
    margin-bottom: 25px;
    margin-top: 25px;
}
.CU-div2-BoxR {
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 0 40px 40px 0;
    box-shadow: 2px 0 20px var(--colorOriginal-light-Level1);
    padding-top: 30px;
}
.CU-div-a-Box {
    margin-top: 10px;
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 10px;
    box-shadow: 2px 0 10px gray;
}
.CU-div-i-Box {
    padding: 3px;
    color: var(--colorOriginal-light-Level2);
}
.CU-H-Box {
    padding: 7px;
    display: inline-flex;
    color: var(--colorOriginal-light-Level3);
}
.CU-H1-Box {
    padding: 7px;
    color: var(--colorOriginal-light-Level3);
}
.CU-Span-Box {
    color: var(--colorOriginal-light-Level1);
    font-size: 14px;
}
.CU-div1-H-Box {
    color: var(--colorOriginal-dark-Level1);
    font-size: 22px;
}

.CU-div1-a-Box {
    margin-right: 20px;
}
.CU-div1-a1-Box {
    margin-right: 35px;
}
.CU-div1-i-Box {
    font-size: 35px;
    color: var(--colorOriginal-light-Level3);
}
.CU-div1-i-Box:hover {
    font-size: 35px;
    color: var(--colorOriginal-light-Level1);
}
.CU-div-img {
    background-color: var(--colorOriginal-light-Level1);
    border-radius: 40px 0 0 40px;
    box-shadow: 2px 0 20px var(--colorOriginal-light-Level1);
}
.CU-img {
    width: inherit;
    margin-top: 5%;
    border-radius: 25%;
    margin-bottom: 5%;
}
.RU-div {
    padding-bottom: 25px;
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
}
.RU-div1 {
    margin-right: 25%;
    padding: 15px;
    box-sizing: border-box;
    box-shadow: 1px 2px 12px var(--colorOriginal-light-Level1);
    width: 50%;
    text-align: center;
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 8px;
}
.titleRules {
    color: var(--colorOriginal-light-Level1);
    font-weight: bold;
    font-size: 20px;
}
.titleImportRules {
    color: var(--colorOriginal-light-Level2);
    font-weight: bold;
    font-size: 20px;
}
.RU-H {
    color: var(--colorOriginal-dark-Level1);
}
.RU-div2 {
    background-color: var(--colorOriginal-dark-Level3);
    border: 2px solid var(--colorOriginal-light-Level1);
    border-width: 2px;
    border-radius: 12px;
    padding: 15px;
    margin: 10px;
}
.RU-P {
    font-size: 18px;
    text-align: justify;
    color: var(--colorOriginal-dark-Level1);
}
.SG-div {
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
}
.SG-div1 {
    margin-right: 25%;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: 1px 2px 12px var(--colorOriginal-light-Level1);
    width: 50%;
    text-align: center;
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 8px;
}
.SG-H {
    color: var(--colorOriginal-dark-Level1);
}
.PG-div {
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
}

.PG-div1 {
    margin-right: 25%;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: 1px 2px 12px var(--colorOriginal-light-Level1);
    width: 50%;
    text-align: center;
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 8px;
}
.PG-div2 {
    background-color: var(--colorOriginal-dark-Level2);
    padding: 12px;
    border: solid var(--colorOriginal-light-Level1);
    border-radius: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
}

.PG-H {
    color: var(--colorOriginal-dark-Level1);
}
.PG-P {
    color: var(--colorOriginal-dark-Level1);
}
.titlePurchaseGuide{
    color:var(--colorOriginal-light-Level1);
}
.titleTitlePurchaseGuide {
    color: var(--colorOriginal-light-Level3);
    margin-right: 30px;
}
.G-div {
    text-align: center;
    position: relative;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
}

.G-div1 {
    margin-right: 25%;
    box-sizing: border-box;
    padding: 15px;
    box-shadow: 1px 2px 12px var(--colorOriginal-light-Level1);
    width: 50%;
    text-align: center;
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 8px;
}

.G-div2 {
    background-color: var(--colorOriginal-dark-Level2);
    padding: 12px;
    border: 2px solid var(--colorOriginal-light-Level1);
    border-radius: 25px;
    margin-top: 25px;
    margin-bottom: 25px;
}
.titleOneGuarantee {
    font-size: 22px;
    font-weight: bold;
    color:var(--colorOriginal-light-Level1);
}
.titleTwoGuarantee {
    font-size: 20px;
    font-weight: bold;
    color: var(--colorOriginal-light-Level3);
}
.textimportGuarantee {
    color: var(--colorOriginal-light-Level2);
    font-size: 25px;
}
.G-H {
    color: var(--colorOriginal-dark-Level1);
}
.G-P {
    font-size: 18px;
    text-align: justify;
    padding: 10px;
    color: var(--colorOriginal-dark-Level1);
}

#wifi-loader {
    --background: #62ABFF;
    --front-color: #4F29F0;
    --back-color: #C3C8DE;
    --text-color: #414856;
/*    right: -50%;
    top: 300px;
    width: 64px;
    height: 64px;*/
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

    #wifi-loader svg {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        #wifi-loader svg circle {
            position: absolute;
            fill: none;
            stroke-width: 6px;
            stroke-linecap: round;
            stroke-linejoin: round;
            transform: rotate(-100deg);
            transform-origin: center;
        }

            #wifi-loader svg circle.back {
                stroke: var(--back-color);
            }

            #wifi-loader svg circle.front {
                stroke: var(--front-color);
            }

        #wifi-loader svg.circle-outer {
            height: 86px;
            width: 86px;
        }

            #wifi-loader svg.circle-outer circle {
                stroke-dasharray: 62.75 188.25;
            }

                #wifi-loader svg.circle-outer circle.back {
                    animation: circle-outer 1.8s ease infinite 0.3s;
                }

                #wifi-loader svg.circle-outer circle.front {
                    animation: circle-outer 1.8s ease infinite 0.15s;
                }

        #wifi-loader svg.circle-middle {
            height: 60px;
            width: 60px;
        }

            #wifi-loader svg.circle-middle circle {
                stroke-dasharray: 42.5 127.5;
            }

                #wifi-loader svg.circle-middle circle.back {
                    animation: circle-middle 1.8s ease infinite 0.25s;
                }

                #wifi-loader svg.circle-middle circle.front {
                    animation: circle-middle 1.8s ease infinite 0.1s;
                }

        #wifi-loader svg.circle-inner {
            height: 34px;
            width: 34px;
        }

            #wifi-loader svg.circle-inner circle {
                stroke-dasharray: 22 66;
            }

                #wifi-loader svg.circle-inner circle.back {
                    animation: circle-inner 1.8s ease infinite 0.2s;
                }

                #wifi-loader svg.circle-inner circle.front {
                    animation: circle-inner 1.8s ease infinite 0.05s;
                }

    #wifi-loader .text {
        position: absolute;
        bottom: -40px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: lowercase;
        font-weight: 500;
        font-size: 25px;
        letter-spacing: 0.2px;
    }

        #wifi-loader .text::before, #wifi-loader .text::after {
            content: attr(data-text);
        }

        #wifi-loader .text::before {
            color: var(--text-color);
        }

        #wifi-loader .text::after {
            color: var(--front-color);
            animation: text-animation 3.6s ease infinite;
            position: absolute;
            left: 0;
        }

@keyframes circle-outer {
    0% {
        stroke-dashoffset: 25;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 301;
    }

    80% {
        stroke-dashoffset: 276;
    }

    100% {
        stroke-dashoffset: 276;
    }
}

@keyframes circle-middle {
    0% {
        stroke-dashoffset: 17;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 204;
    }

    80% {
        stroke-dashoffset: 187;
    }

    100% {
        stroke-dashoffset: 187;
    }
}

@keyframes circle-inner {
    0% {
        stroke-dashoffset: 9;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 106;
    }

    80% {
        stroke-dashoffset: 97;
    }

    100% {
        stroke-dashoffset: 97;
    }
}

@keyframes text-animation {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    50% {
        clip-path: inset(0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}







.Box-bg {
    background-color: var(--colorOriginal-dark-Level1);
}
.Border-card-product {
    width: 220px;
    border: 1px solid #d5d1a4;
    border-radius: 15px;
}
.RegisterBackground {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    width: -moz-available;
}
.pageProduct {
    background-color: var(--colorOriginal-dark-Level2);
    box-shadow: 0px 0px 8px;
    border-radius: 15px;
    padding: 15px;
}
.descriptionTitle {
    text-align: start;
    font-size: 18px;
    font-weight: 200;
    font-style: oblique;
    font-family: iransans;
    color: var(--colorOriginal-light-Level3);
    /*background-color: var(--colorOriginal-dark-Level3);*/
    padding: 15px;
    border-radius: 15px;
}

ul-Footer1 {
    margin: 0px;
    padding: 0px;
}
.Footer-H {
    color: var(--colorOriginal-light-Level1);
    display: inline-flex;
    font-size: 25px;
    font-weight: 600;
}

.footer-section1 {
    position: relative;
    border-top: 2px solid var(--colorOriginal-light-Level1);
    top: 0;
    z-index: 999;
}

.footer-cta {
    border-bottom: 1px solid #373636;
}

.single-cta i {
    color: var(--colorOriginal-light-Level1);
    font-size: 25px;
    float: right;
}

.cta-text {
    padding-right: 15px;
    display: flow-root;
}

    .cta-text h4 {
        color: #ce0000;
        font-size: 35px;
        font-weight: 200;
        margin-bottom: 10px;
    }

    .cta-text span {
        color: var(--colorOriginal-light-Level3);
        font-size: 15px;
        margin-right: 5px;
    }

.footer-content {
    position: relative;
    z-index: 2;
}

.footer-pattern img {
    position: absolute;
    top: 0;
    left: 0;
    height: 330px;
    background-size: cover;
    background-position: 100% 100%;
}

.footer-logo {
    margin-bottom: 30px;
}

    .footer-logo img {
        width: 200px;
        height: 150px;

    }

.footer-text p {
    margin-bottom: 10px;
    margin-top: 15px;
    font-weight: 200;
    font-size: 14px;
    line-height: 24px;
    color: var(--colorOriginal-light-Level3);
}

.footer-social-icon span {
    color: var(--colorOriginal-light-Level3);
    display: block;
    font-size: 20px;
    font-weight: 200;
}

.footer-social-icon a {
    color: var(--colorOriginal-light-Level1);
    font-size: 24px;
    margin-right: 35px;
}
    .footer-social-icon a:hover {
        color: var(--colorOriginal-light-Level3);
    }

.footer-social-icon i {
    height: 40px;
    width: 40px;
    text-align: center;
    line-height: 38px;
    border-radius: 50%;
    color: #e4d4fc;
}

.facebook-bg {
    background: #3B5998;
}

.twitter-bg {
    background: #55ACEE;
}

.google-bg {
    background: #DD4B39;
}

.footer-widget-heading h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
}

    .footer-widget-heading h3::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: -15px;
        height: 2px;
        width: 70px;
        background: #ff5e14;
    }

.footer-widget ul li {
    display: inline-block;
    float: left;
    width: 48%;
    text-align: start;
    font-size: 13px;
    width: 100%;
}

    .footer-widget ul li a:hover {
        color: var(--colorOriginal-light-Level1);
    }

    .footer-widget ul li a {
        color: #5e5e5e;
        text-transform: capitalize;
    }

.subscribe-form {
    position: relative;
    overflow: hidden;
}

    .subscribe-form input {
        width: 100%;
        padding: 14px 28px;
        background: #2E2E2E;
        border: 1px solid #2E2E2E;
        color: #fff;
    }

    .subscribe-form button {
        position: absolute;
        right: 0;
        background: #ff5e14;
        padding: 13px 20px;
        border: 1px solid #ff5e14;
        top: 0;
    }

        .subscribe-form button i {
            color: #fff;
            font-size: 22px;
            transform: rotate(-6deg);
        }

.copyright-area {
    background: #fff;
    padding: 10px 0;
}
.copyright-area1 {
    background: var(--colorOriginal-dark-Level2);
    padding: 10px 0;
}

.copyright-text p {
    margin: 0;
    font-size: 11px;
    color: #000;
    font-weight: 200;
}

    .copyright-text p a {
        color: #ff5e14;
    }

.footer-menu li {
    display: inline-block;
    margin-left: 20px;
}

    .footer-menu li:hover a {
        color: #ff5e14;
    }

    .footer-menu li a {
        font-size: 14px;
        color: #878787;
    }

.Container-AU {
    background-color: var(--colorOriginal-dark-Level3);
    margin-top: 5%;
    margin-bottom: 5%;
    border-radius: 8px;
    box-shadow: 1px 0 4px var(--colorOriginal-light-Level1);
    position: relative;
    text-align: center;
    padding: 30px;
}

.Title-AU {
    font-size: 18px;
    font-weight: 200;
    border-top: 1px solid var(--colorOriginal-light-Level2);
    padding: 15px;
    color: var(--colorOriginal-light-Level3);
    text-align: justify;
}
.colorTitleAboutUs {
    color: var(--colorOriginal-light-Level1);
}

.Carouselpages {
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 8px;
    border: 1px solid var(--colorOriginal-light-Level1);
    box-shadow: 1px 5px 12px var(--colorOriginal-light-Level1);
}
.carousel-caption {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    font-size: 18px;
    color: var(--colorOriginal-light-Level3);
    text-align: center;
}


    .carousel-caption h3 {
        font-size: 30px;
        /*        font-family: "Lato", sans-serif;*/
        color: var(--colorOriginal-light-Level2);
    }

.carousel,
.carousel-inner,
.carousel-inner .item-AU {
    height: 100%;
}

.item-AU:nth-child(1) {
    /*background: url("../img/AU1.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;*/
}
.IMG-Footer {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
/*    position: absolute;*/
}
.messageAlert {
    position: fixed;
    padding: 15px;
    font: bold 16px/1.4 sans-serif;
    color: hsl(272, 28.8%, 20.4%);
    background: hsl(277.5, 50%, 96.9%);
    border: 1px solid hsl(272.6, 71.6%, 37.3%);
    border-radius: 8px;
    top: 15%;
    left: 2%;
    height: 115px;
    width: 450px;
    z-index: 9999;
}

    .messageAlert .close {
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 9%;
        border: 0;
        cursor: pointer;
        background: none;
        padding-left: 5%;
    }
    .messageAlert p {
        width: 390px;
    }

        .messageAlert .close:after {
            content: '\2716';
            font-style: normal;
        }
/*-- Tab Content & Pane Fix --*/

.tab-content {
    width: 100%;
    text-align: center;
}

    .tab-content .tab-pane {
        display: block;
        visibility: hidden;
        overflow: hidden;
        max-width: 100%;
        height: 0;
        opacity: 0;
    }

        .tab-content .tab-pane.active {
            visibility: visible;
            overflow: visible;
            height: auto;
            opacity: 1;
            /*margin-bottom: 30px;*/
        }

select {
    padding-right: 15px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' version=\'1.1\' height=\'10px\' width=\'15px\'%3E%3Ctext x=\'0\' y=\'10\' fill=\'black\'%3E%E2%96%BE%3C/text%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: 95% 50%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.slick-slide > div > div {
    vertical-align: middle;
}

/*----------  Sharp border tippyjs theme  ----------*/

/* If `animateFill: true` (default) */

.tippy-tooltip.roundborder-theme .tippy-backdrop {
    font-weight: 400;
    color: #fff;
    background-color: #e33;
}

/* If `animateFill: false` */

.tippy-tooltip.roundborder-theme {
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    padding: 8px 10px;
    white-space: nowrap;
    color: #fff;
    background-color: #e33;
}

.tippy-popper[x-placement^='top'] .tippy-tooltip.roundborder-theme .tippy-arrow {
    border-top-color: #e33;
}

/*=============================================
=            spacing            =
=============================================*/

.section-space {
    margin-bottom: 15px !important;
}

.section-space--half {
    margin-bottom: 50px !important;
}

.section-space--30 {
    margin-bottom: 30px !important;
}

.section-space--inner {
   /* padding-top: 10px !important;
    padding-bottom: 30px !important;*/
}

.section-space--inner-top {
    padding-top: 100px !important;
}

.section-space--inner-bottom {
    padding-bottom: 100px !important;
}

/*=====  End of spacing  ======*/

/*=============================================
=            Header            =
=============================================*/

.header-area {
    background-color: #fff;
    border-bottom: 2px solid var(--colorOriginal-light-Level1);
}

.header-area--transparent-color {
    background-color: transparent;
}

.header-area--middle-logo .header-wrapper {
    padding-top: 15px;
}

    .header-area--middle-logo .header-wrapper .navigation-menu-wrapper {
        -webkit-flex-basis: 40%;
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
    }

    .header-area--middle-logo .header-wrapper .logo {
        -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
    }

    .header-area--middle-logo .header-wrapper .header-icon-wrapper {
        -webkit-flex-basis: 40%;
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
    }

.header-area--middle-logo.is-sticky .header-wrapper {
    padding-top: 0;
}

.header-area--left-logo .header-wrapper {
    padding-top: 15px;
}

    .header-area--left-logo .header-wrapper .navigation-menu-wrapper {
        -webkit-flex-basis: 40%;
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
    }

    .header-area--left-logo .header-wrapper .logo {
        -webkit-flex-basis: 20%;
        -ms-flex-preferred-size: 20%;
        flex-basis: 20%;
    }

    .header-area--left-logo .header-wrapper .header-icon-wrapper {
        -webkit-flex-basis: 40%;
        -ms-flex-preferred-size: 40%;
        flex-basis: 40%;
    }

.header-area--left-logo.is-sticky .header-wrapper {
    padding-top: 0;
}

.header-area--transparent {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
}

.header-area--multi-row.is-sticky .header-wrapper {
    padding-top: 0;
}

.header-area--multi-row.is-sticky .settings-dropdown-wrapper {
    display: none;
}

.header-area--multi-row.is-sticky .logo {
    display: none;
}

.header-area--multi-row.is-sticky .header-icon-wrapper {
    display: none;
}

.header-area--multi-row.is-sticky .header-top-wrapper {
    padding-bottom: 0;
}

.header-area--multi-row .header-wrapper {
    padding-top: 50px;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .header-area--multi-row .header-wrapper .settings-dropdown-wrapper {
        -webkit-flex-basis: 33.33%;
        -ms-flex-preferred-size: 33.33%;
        flex-basis: 33.33%;
    }

    .header-area--multi-row .header-wrapper .logo {
        -webkit-flex-basis: 33.33%;
        -ms-flex-preferred-size: 33.33%;
        flex-basis: 33.33%;
    }

    .header-area--multi-row .header-wrapper .header-icon-wrapper {
        -webkit-flex-basis: 33.33%;
        -ms-flex-preferred-size: 33.33%;
        flex-basis: 33.33%;
    }

    .header-area--multi-row .header-wrapper .navigation-menu-wrapper {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

        .header-area--multi-row .header-wrapper .navigation-menu-wrapper nav > ul {
            text-align: center;
        }

            .header-area--multi-row .header-wrapper .navigation-menu-wrapper nav > ul > li > a {
                padding-bottom: 0;
            }

            .header-area--multi-row .header-wrapper .navigation-menu-wrapper nav > ul > li .sub-menu {
                text-align: left;
            }

            .header-area--multi-row .header-wrapper .navigation-menu-wrapper nav > ul > li .mega-menu {
                left: -300px;
                text-align: left;
            }

.header-area--multi-row--extra-padding .header-wrapper {
    padding-top: 100px;
}

.header-area--multi-row--separate-navigation .header-top-wrapper {
    background-color: #f6f6f6;
}

.header-area--multi-row--separate-navigation .header-top-wrapper {
    padding-bottom: 50px;
}

.header-area--multi-row--separate-navigation .navigation-menu-area {
    background-color: #fff;
}

    .header-area--multi-row--separate-navigation .navigation-menu-area .navigation-menu-wrapper nav > ul {
        text-align: center;
    }

        .header-area--multi-row--separate-navigation .navigation-menu-area .navigation-menu-wrapper nav > ul > li > a {
            padding: 0;
        }

        .header-area--multi-row--separate-navigation .navigation-menu-area .navigation-menu-wrapper nav > ul > li .sub-menu {
            text-align: left;
        }

        .header-area--multi-row--separate-navigation .navigation-menu-area .navigation-menu-wrapper nav > ul > li .mega-menu {
            left: -300px;
            text-align: left;
        }

.header-area.is-sticky {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-animation: 700ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 900ms ease-in-out 0s normal none 1 running fadeInDown;
    background: var(--colorOriginal-dark-Level2);
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .1);
    box-shadow: 0 0 2px rgba(0, 0, 0, .1);
}

    .header-area.is-sticky:hover {
        background-color: var(--colorOriginal-dark-Level2);
    }

    .header-area.is-sticky .navigation-menu-wrapper nav > ul > li > a {
        padding: 0;
    }

    .header-area.is-sticky .mini-cart {
        margin-top: 12px;
        /*border-radius: 18px;*/
    }

    .header-area.is-sticky .settings-menu-wrapper {
        /*margin-top: 12px;*/
    }

.header-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 35px;
    margin-left: 35px;
}

.logo {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 4%;
}

/* navigation menu */

.navigation-menu-wrapper {
    -webkit-flex-basis: 60%;
    -ms-flex-preferred-size: 60%;
    flex-basis: 80%; /* separate menu style */ /*----------  submenu  ----------*/
}

    .navigation-menu-wrapper nav > ul > li {
        position: relative;
        display: inline-block;
        margin-right: 30px;
    }

        .navigation-menu-wrapper nav > ul > li:last-child {
            margin-right: 0;
        }

        .navigation-menu-wrapper nav > ul > li.active > a,
        .navigation-menu-wrapper nav > ul > li:hover > a {
            position: relative;
            color: var(--colorOriginal-light-Level1);
        }

/*        .navigation-menu-wrapper nav > ul > li.menu-item-has-children > a::after {
            font-family: Ionicons;
            font-size: 11px;
            font-weight: 300;
            float: right;
            margin-left: 5px;
            content: '\f3d0';
            -webkit-transition: .3s;
            transition: .3s;
            color: var(--colorOriginal-light-Level1);
        }*/

        .navigation-menu-wrapper nav > ul > li > a {
            font-weight: 200;
            line-height: 26px;
            line-height: 55px;
            display: block;
            padding: 6px 0;
            color: var(--colorOriginal-light-Level3);
        }

        .navigation-menu-wrapper nav > ul > li:hover > .sub-menu,
        .navigation-menu-wrapper nav > ul > li:hover > .mega-menu {
            z-index: 999;
            visibility: visible;
            margin-top: 0;
            opacity: 1;
        }

.navigation-menu-wrapper--separate nav > ul {
    text-align: center;
}

    .navigation-menu-wrapper--separate nav > ul > li > a {
        line-height: 100px;
    }

.navigation-menu-wrapper--separate .sub-menu {
    text-align: left;
}

.navigation-menu-wrapper--separate .mega-menu {
    text-align: left;
}

    .navigation-menu-wrapper--separate .mega-menu.four-column {
        left: -300px;
    }

.navigation-menu-wrapper .sub-menu {
    position: absolute;
    top: 85%;
    visibility: hidden;
    width: 450px;
    padding: 10px 0;
    opacity: 0;
    background-color: var(--colorOriginal-dark-Level2);
    box-shadow: 3px 5px 12px var(--colorOriginal-light-Level1);
    border-radius: 15px;
    /*    border-bottom: 2px solid var(--colorOriginal-light-Level1);
    border-left: 2px solid var(--colorOriginal-light-Level1);
    border-right: 2px solid var(--colorOriginal-light-Level1);*/
    border: 2px solid var(--colorOriginal-light-Level1);
}

    .navigation-menu-wrapper .sub-menu li {
        position: relative;
        float: right;
        width: 50%;
    }

        .navigation-menu-wrapper .sub-menu li a {
            font-size: 18px;
            font-weight: 200;
            line-height: 25px;
            display: inline-block;
            padding: 10px 15px;
            text-transform: uppercase;
            color: var(--colorOriginal-light-Level3);
        }

          /*  .navigation-menu-wrapper .sub-menu li a:hover {
                color: var(--colorOriginal-light-Level1);
            }*/

        .navigation-menu-wrapper .sub-menu li.menu-item-has-children > a::after {
            font-family: Ionicons;
            font-size: 11px;
            font-weight: 300;
            float: right;
            margin-left: 5px;
            content: '\f3d1';
        }

        .navigation-menu-wrapper .sub-menu li:hover > .sub-menu {
            z-index: 999;
            visibility: visible;
            margin-top: 0;
            opacity: 1;
        }

    .navigation-menu-wrapper .sub-menu .sub-menu {
        position: absolute;
        top: 0;
        right: auto;
        left: 100%;
        visibility: hidden;
        opacity: 0;
    }

        .navigation-menu-wrapper .sub-menu .sub-menu li a {
            padding: 7px 15px;
            text-transform: capitalize;
        }

            .navigation-menu-wrapper .sub-menu .sub-menu li a:hover {
                color: #19a664;
            }

        .navigation-menu-wrapper .sub-menu .sub-menu .sub-menu {
            right: 100%;
            left: auto;
        }

            .navigation-menu-wrapper .sub-menu .sub-menu .sub-menu .sub-menu {
                right: auto;
                left: 100%;
            }

            .navigation-menu-wrapper .sub-menu .sub-menu .sub-menu .sub-menu {
                right: 100%;
                left: auto;
            }

/*----------  mega menu  ----------*/

/*.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    width: 100%;
    opacity: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
}*/

    .mega-menu.four-column {
        left: -150px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 1020px;
        padding: 45px 50px 50px 50px;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

        .mega-menu.four-column > li {
            width: 25%;
            padding-left: 20px;
            border-left: 1px solid #ebebeb;
        }

            .mega-menu.four-column > li:first-child {
                padding-left: 0;
                border-left: 0;
            }

    .mega-menu > li > a {
        font-weight: 600;
        margin-bottom: 25px;
        text-transform: uppercase;
        color: #292929;
    }

        .mega-menu > li > a:hover {
            color: #e33;
        }

    .mega-menu > li ul li a {
        line-height: 26px;
        padding: 5px 0;
    }

        .mega-menu > li ul li a:hover {
            color: #e33;
        }

.megamenu-banner {
    margin-top: 30px;
    padding-left: 0 !important;
    border-left: 0 !important;
}

    .megamenu-banner a img {
        -webkit-transition: .3s;
        transition: .3s;
    }

    .megamenu-banner a:hover img {
        opacity: .7;
    }

/* header icon */

.header-icon-wrapper {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
}

    .header-icon-wrapper > ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: end;
        -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }

        .header-icon-wrapper > ul > li {
            margin-left: 30px;
        }

            .header-icon-wrapper > ul > li:first-child {
                margin-left: 0;
            }

            .header-icon-wrapper > ul > li a {
                font-size: 35px;
                font-weight: 400;
                line-height: 28px;
                color: var(--colorOriginal-light-Level3);
            }

                .header-icon-wrapper > ul > li a:hover {
                    color: var(--colorOriginal-dark-Level1);
                }

/* cart icon */

.header-cart-icon {
    position: relative;
    display: inline-block;
}

    .header-cart-icon .counter {
        font-size: 12px;
        line-height: 18px;
        position: absolute;
        top: -5px;
        left: 100%;
        width: 18px;
        height: 18px;
        color: var(--colorOriginal-light-Level3);
        border-radius: 100%;
    }
        .header-cart-icon .counter:hover {
            color: var(--colorOriginal-dark-Level1);
        }

    .header-cart-icon .mini-cart {
        position: absolute;
        top: 100%;
        right: 0;
        margin-top: 236%;
        margin-right: -1063%;
    }

/* minicart */

.mini-cart {
    position: relative;
    z-index: 9999;
    display: none;
    width: 400px;
    padding: 30px;
    background-color: var(--colorOriginal-dark-Level2);
    border: 1px solid var(--colorOriginal-light-Level1);
    border-radius: 18px;
}

    .mini-cart.active {
        display: block;
    }

    .mini-cart .cart-items-wrapper {
        position: relative;
        overflow: hidden;
        /*max-height: 280px;*/
        margin: 0 -30px;
        padding: 0 30px;
    }

    .mini-cart .single-cart-item {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        padding-top: 9px !important;
        padding-bottom: 18px;
        margin-bottom: 7px;
        margin-left: -15px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 12px;
        border: 2px solid var(--colorOriginal-light-Level1);
        z-index: 999;
    }

        .mini-cart .single-cart-item .remove-icon {
            position: absolute;
            top: 10px;
            right: 0;
        }

            .mini-cart .single-cart-item .remove-icon i {
                font-size: 27px;
                color: var(--colorOriginal-light-Level3);
                margin: 7px;
            }

            .mini-cart .single-cart-item .remove-icon:hover i {
                color: #e33;
            }

        .mini-cart .single-cart-item:first-child {
            padding-top: 0;
        }

        .mini-cart .single-cart-item:last-child {
           /* border-bottom: 0;*/
        }

        .mini-cart .single-cart-item .image {
            -webkit-flex-basis: 80px;
            -ms-flex-preferred-size: 80px;
            flex-basis: 80px;
        }

        .mini-cart .single-cart-item .content {
            padding-left: 10px;
            -webkit-flex-basis: calc(100% - 80px);
            -ms-flex-preferred-size: calc(100% - 80px);
            flex-basis: calc(100% - 80px);
        }

            .mini-cart .single-cart-item .content .product-title {
                margin-bottom: 8px;
            }

                .mini-cart .single-cart-item .content .product-title a {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 18px;
                    color: var(--colorOriginal-light-Level3);
                }

                    .mini-cart .single-cart-item .content .product-title a:hover {
                        color: var(--colorOriginal-light-Level2);
                    }

            .mini-cart .single-cart-item .content .count {
                font-size: 13px;
                font-weight: 500;
                line-height: 18px;
                color: var(--colorOriginal-light-Level3);
                margin-bottom: 8px;
            }

                .mini-cart .single-cart-item .content .count span {
                    font-weight: 400;
                    line-height: 18px;
                    color: var(--colorOriginal-light-Level3);
                }

    .mini-cart .cart-calculation {
        margin-bottom: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid #f0f0f0;
        border-bottom: 1px solid #f0f0f0;
    }

        .mini-cart .cart-calculation table {
            margin-bottom: 0;
            border-spacing: 0;
            border-collapse: collapse;
        }

            .mini-cart .cart-calculation table tbody tr td {
                font-size: 14px;
                padding: 5px 0;
                vertical-align: middle;
                text-transform: capitalize;
                color: #242424;
                border: none;
            }

                .mini-cart .cart-calculation table tbody tr td:last-child {
                    font-family: 'IranSans', sans-serif;
                    font-weight: 700;
                }

    .mini-cart .cart-buttons a {
        font-size: 16px;
        font-weight: 400;
        line-height: 50px;
        display: block;
        margin: 20px;
        margin-bottom: 20px;
        padding: 0 5px;
        -webkit-transition: .3s;
        transition: .3s;
        text-align: center;
        text-transform: uppercase;
        color: var(--colorOriginal-dark-Level2);
        border: 2px solid var(--colorOriginal-light-Level3);
        border-radius: 15px;
        background: var(--colorOriginal-dark-Level1);
    }

        .mini-cart .cart-buttons a:last-child {
            margin-bottom: 0;
        }

        .mini-cart .cart-buttons a:hover {
            font-size: 17px;
            font-weight: 500;
            color: var(--colorOriginal-light-Level3);
            border: 2px solid var(--colorOriginal-light-Level2);
            background: var(--colorOriginal-dark-Level2);
        }

/* settings icon */

.setting-button {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    width: 30px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    border: 2px solid #e1e1e1;
    background: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

    .setting-button:hover span {
        background: #e33;
    }

    .setting-button span {
        display: block;
        width: 16px;
        height: 1px;
        margin-bottom: 3px;
        background: #292929;
    }

        .setting-button span:last-child {
            margin-bottom: 0;
        }

.header-settings-trigger {
    position: relative;
    display: inline-block;
}

.header-settings-icon {
    position: relative;
}

/* settings menu */

/* Template menu1 */
/*.settings-menu-wrapper {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 329px;
    margin-top: 120%;
    padding: 40px 43px 32px 40px;
    background-color: var(--colorOriginal-dark-Level2);
    right: -1000%;
    border-radius: 25px;
    border: 2px solid var(--colorOriginal-light-Level1);
}*/
/* Template menu2 */
.settings-menu-wrapper {
    position: absolute;
    z-index: 9999;
    display: none;
    width: 329px;
    padding: 40px 43px 32px 40px;
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 25px;
    border: 2px solid var(--colorOriginal-light-Level1);
    left: 0;
    top: 60px;
}

    .settings-menu-wrapper.active {
        display: block;
    }

    .settings-menu-wrapper .single-settings-block {
        margin-bottom: 15px;
    }

        .settings-menu-wrapper .single-settings-block:last-child {
            margin-bottom: 0;
        }

        .settings-menu-wrapper .single-settings-block .title {
            font-size: 24px;
            font-weight: 200;
            line-height: 41px;
            padding-bottom: 5px;
            color: var(--colorOriginal-light-Level3);
            border-bottom: 1px solid var(--colorOriginal-light-Level2);
        }

        .settings-menu-wrapper .single-settings-block ul {
            padding-left: 20px;
        }

            .settings-menu-wrapper .single-settings-block ul li {
                display: block;
            }

                .settings-menu-wrapper .single-settings-block ul li a {
                    font-size: 18px;
                    font-weight: 200;
                    line-height: 45px;
                    color: var(--colorOriginal-light-Level3);
                }

                    .settings-menu-wrapper .single-settings-block ul li a:hover,
                    .settings-menu-wrapper .single-settings-block ul li a.active {
                        color: var(--colorOriginal-light-Level2);
                    }

/* settings wrapper */

.settings-dropdown-list > li {
    position: relative;
    display: inline-block;
    margin-right: 30px;
}

    .settings-dropdown-list > li:last-child {
        margin-right: 0;
    }

    .settings-dropdown-list > li > a {
        font-weight: 500;
        line-height: 28px;
        color: #292929;
    }

        .settings-dropdown-list > li > a:hover {
            color: #e33;
        }

            .settings-dropdown-list > li > a:hover i {
                color: #e33;
            }

        .settings-dropdown-list > li > a i {
            font-size: 9px;
            font-weight: normal;
            display: inline-block;
            margin-left: 3px;
            color: #a6a6a6;
        }

    .settings-dropdown-list > li .sub-menu {
        position: absolute;
        z-index: 9999;
        display: none;
        min-width: 160px;
        margin-top: 34px;
        padding: 0 20px;
        background: #fff;
    }

        .settings-dropdown-list > li .sub-menu.active {
            display: block;
        }

        .settings-dropdown-list > li .sub-menu > li {
            border-bottom: 1px solid #eee;
        }

            .settings-dropdown-list > li .sub-menu > li:last-child {
                border-bottom: 0;
            }

            .settings-dropdown-list > li .sub-menu > li > a {
                font-weight: 300;
                line-height: 28px;
                padding: 5px 0;
                color: #666;
            }

                .settings-dropdown-list > li .sub-menu > li > a:hover {
                    color: #e33;
                }

/* offcanvas mobile menu */

.header-mobile-navigation {
    padding: 20px 0;
}

    .header-mobile-navigation .mobile-navigation .header-cart-icon a span {
        left: 50%;
    }

.offcanvas-widget-area {
    margin-top: auto;
    margin-bottom: 35px;
}

.off-canvas-contact-widget {
    margin-bottom: 20px;
}

    .off-canvas-contact-widget .header-contact-info {
        -webkit-flex-basis: 33.33%;
        -ms-flex-preferred-size: 33.33%;
        flex-basis: 33.33%;
    }

    .off-canvas-contact-widget .header-contact-info__list li {
        display: inline-block;
        margin-right: 25px;
    }

        .off-canvas-contact-widget .header-contact-info__list li i {
            font-size: 14px;
            margin-right: 5px;
        }

        .off-canvas-contact-widget .header-contact-info__list li a {
            font-weight: 400;
            line-height: 22px;
            color: #666;
        }

            .off-canvas-contact-widget .header-contact-info__list li a:hover {
                color: #e33;
            }

        .off-canvas-contact-widget .header-contact-info__list li:last-child {
            margin-right: 0;
        }

.offcanvas-mobile-menu {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100%;
    height: 100vh;
    padding-left: 60px;
    -webkit-transition: .6s;
    transition: .6s;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
}

    .offcanvas-mobile-menu.active {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    .offcanvas-mobile-menu.inactive {
        -webkit-transform: translateX(calc(100% + 60px));
        -ms-transform: translateX(calc(100% + 60px));
        transform: translateX(calc(100% + 60px));
    }

.offcanvas-menu-close {
    font-size: 30px;
    line-height: 60px;
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    text-align: center;
    color: #fff;
    background: #343538;
}

    .offcanvas-menu-close:hover,
    .offcanvas-menu-close:focus {
        color: #fff;
    }

    .offcanvas-menu-close i {
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
    }

    .offcanvas-menu-close:hover i {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

.offcanvas-wrapper {
    overflow: auto;
    height: 100%;
    background-color: #fff;
    -webkit-box-shadow: 0 0 87px 0 rgba(0, 0, 0, .09);
    box-shadow: 0 0 87px 0 rgba(0, 0, 0, .09);
}

.offcanvas-mobile-search-area {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: calc(100% - 60px);
    margin-left: 60px;
    padding: 10px;
    background-color: #e6e6e6;
}

    .offcanvas-mobile-search-area input {
        font-size: 16px;
        display: block;
        width: 100%;
        padding: 9px 25px;
        color: #222;
        border: none;
        background: #e6e6e6;
    }

    .offcanvas-mobile-search-area button {
        position: absolute;
        top: 50%;
        right: 20px;
        padding: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #aaa;
        border: none;
        background: none;
    }

        .offcanvas-mobile-search-area button i {
            font-size: 18px;
            line-height: 40px;
        }

.offcanvas-inner-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 90px 35px 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

.offcanvas-navigation {
    margin-bottom: 50px;
}

    .offcanvas-navigation > ul > li > a {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        padding: 10px 0;
        color: #111;
    }

        .offcanvas-navigation > ul > li > a:hover {
            color: #e33;
        }

    .offcanvas-navigation ul.sub-menu {
        margin-left: 25px;
    }

        .offcanvas-navigation ul.sub-menu > li > a {
            font-size: 13px;
            font-weight: 400;
            line-height: 20px;
            padding: 10px 0;
            color: #111;
        }

            .offcanvas-navigation ul.sub-menu > li > a:hover {
                color: #e33;
            }

    .offcanvas-navigation ul li.menu-item-has-children {
        position: relative;
        display: block;
    }

        .offcanvas-navigation ul li.menu-item-has-children a {
            display: block;
        }

        .offcanvas-navigation ul li.menu-item-has-children.active > .menu-expand i:before {
            -webkit-transform: rotate(0);
            -ms-transform: rotate(0);
            transform: rotate(0);
        }

        .offcanvas-navigation ul li.menu-item-has-children .menu-expand {
            line-height: 50px;
            position: absolute;
            top: -5px;
            right: auto;
            left: 95%;
            width: 30px;
            height: 50px;
            cursor: pointer;
            text-align: center;
        }

            .offcanvas-navigation ul li.menu-item-has-children .menu-expand i {
                position: relative;
                display: block;
                width: 10px;
                margin-top: 25px;
                -webkit-transition: all 250ms ease-out;
                transition: all 250ms ease-out;
                border-bottom: 1px solid;
            }

                .offcanvas-navigation ul li.menu-item-has-children .menu-expand i:before {
                    position: absolute;
                    top: 0;
                    display: block;
                    width: 100%;
                    content: '';
                    -webkit-transform: rotate(90deg);
                    -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
                    border-bottom: 1px solid;
                }

.off-canvas-widget-social a {
    font-size: 14px;
    margin: 0 10px;
}

    .off-canvas-widget-social a:first-child {
        margin-left: 0;
    }

    .off-canvas-widget-social a:hover {
        color: #e33;
    }

/* offcanvas settings */

.offcanvas-settings .offcanvas-navigation > ul > li > a {
    font-size: 12px;
    font-weight: 400;
    padding: 5px 0;
}

.offcanvas-settings .offcanvas-navigation > ul > li.menu-item-has-children .menu-expand {
    top: -15px;
    height: 30px;
    margin-top: 0;
}

.offcanvas-settings .offcanvas-navigation ul.sub-menu > li > a {
    padding: 5px 0;
}

/*=====  End of Header  ======*/

/*=============================================
=            footer            =
=============================================*/

.footer-area--light-bg {
    background-color: #f4f4f4;
}

.footer-area--dark-bg {
    background-color: #292929;
}

    .footer-area--dark-bg .footer-social-section .social-title {
        color: #fff;
    }

    .footer-area--dark-bg .footer-social-section .social-link li a {
        color: #aaa;
        background: #363636;
    }

        .footer-area--dark-bg .footer-social-section .social-link li a:hover {
            color: #fff;
            background: #e33;
        }

    .footer-area--dark-bg .single-footer-widget__title {
        color: #fff;
    }

    .footer-area--dark-bg .single-footer-widget__content .time--extra-margin {
        color: #aaa;
    }

    .footer-area--dark-bg .footer-copyright-wrapper {
        border-top: 1px solid #363636;
    }

.footer-short-desc .image {
    margin-bottom: 35px;
}

.footer-short-desc .message {
    margin-bottom: 35px;
}

.footer-social-section .social-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 15px;
    color: #292929;
}

.footer-social-section .social-link li {
    display: inline-block;
    margin-right: 8px;
}

    .footer-social-section .social-link li a {
        line-height: 40px;
        z-index: 1;
        display: inline-block;
        width: 40px;
        -webkit-transition: .3s;
        transition: .3s;
        text-align: center;
        text-transform: capitalize;
        color: #aaa;
        border-radius: 100%;
        background: #ebebeb;
    }

        .footer-social-section .social-link li a:hover {
            color: #fff;
            background: #292929;
        }

.single-footer-widget__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-top: -3px;
    margin-bottom: 20px;
    color: #292929;
}

.single-footer-widget__content .time {
    line-height: 26px;
    padding: 5px 0;
}

.single-footer-widget__content .time--extra-margin {
    line-height: 1.2;
    margin-top: 35px;
    padding-bottom: 0;
    color: #292929;
}

.single-footer-widget__content .footer-navigation li a {
    line-height: 26px;
    padding: 5px 0;
    -webkit-transition: .3s;
    transition: .3s;
}

    .single-footer-widget__content .footer-navigation li a:hover {
        color: #e33;
    }

.single-footer-widget__content .footer-navigation li:last-child a {
    line-height: 1;
    padding-top: 10px;
    padding-bottom: 0;
}

.footer-copyright-wrapper {
    padding: 40px 0;
    border-top: 1px solid #ebebeb;
}

    .footer-copyright-wrapper .copyright-text {
        font-weight: 400;
        line-height: 30px;
        color: #929292;
    }

        .footer-copyright-wrapper .copyright-text a {
            -webkit-transition: .3s;
            transition: .3s;
            color: #e33;
        }

            .footer-copyright-wrapper .copyright-text a:hover {
                text-decoration: underline;
            }

    .footer-copyright-wrapper .copyright-navigation-wrapper .copyright-nav {
        text-align: right;
    }

        .footer-copyright-wrapper .copyright-navigation-wrapper .copyright-nav li {
            display: inline-block;
            margin-right: 35px;
        }

            .footer-copyright-wrapper .copyright-navigation-wrapper .copyright-nav li:last-child {
                margin-right: 0;
            }

            .footer-copyright-wrapper .copyright-navigation-wrapper .copyright-nav li a {
                font-weight: 400;
                line-height: 30px;
                -webkit-transition: .3s;
                transition: .3s;
                color: #929292;
            }

                .footer-copyright-wrapper .copyright-navigation-wrapper .copyright-nav li a:hover {
                    color: #e33;
                }

.copyright-social-wrapper .copyright-social {
    text-align: right;
}

    .copyright-social-wrapper .copyright-social li {
        display: inline-block;
        margin-right: 40px;
    }

        .copyright-social-wrapper .copyright-social li:last-child {
            margin-right: 0;
        }

        .copyright-social-wrapper .copyright-social li a {
            font-size: 18px;
            display: block;
            -webkit-transition: .3s;
            transition: .3s;
            color: #929292;
        }

            .copyright-social-wrapper .copyright-social li a:hover {
                color: #e33;
            }

/*=====  End of footer  ======*/

/*=============================================
=            Sidebar            =
=============================================*/

/*=====  End of Sidebar  ======*/

/*=============================================
=            container            =
=============================================*/

.custom-layout-area {
    max-width: 1270px;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    background: #fff;
}

.page-wrapper {
    /*background-color: var(--colorOriginal-light-Level3);*/
    /*padding: 12.5px;
    border-radius: 25px;
    box-shadow: 0 0 8px var(--colorOriginal-dark-Level3);
    text-align: center;*/
}
.page-Shop-conter {
    box-shadow: 0 0 3px var(--colorOriginal-dark-Level1);
    padding: 12.5px;
    box-sizing: border-box;
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 25px;
}

.page-content-wrapper {
   /* padding-bottom: 100px;*/
    /*border-bottom: 1px solid #ebebeb;*/
}

/*=====  End of container  ======*/

/*=============================================
=            search overlay            =
=============================================*/

.search-overlay {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .75);
}

.search-form {
    position: absolute;
    top: 47%;
    left: 50%;
    width: 1110px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

    .search-form form input {
        font-size: 24px;
        font-weight: 400;
        position: relative;
        width: 100%;
        height: 70px;
        padding: 0 50px 0 15px;
        color: #fff;
        border: 0;
        border-bottom: 1px solid #e33;
        border-radius: 0;
        background: transparent;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .search-form form ::-webkit-input-placeholder {
        opacity: 1; /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff; /* Firefox */
    }

    .search-form form ::-moz-placeholder {
        opacity: 1; /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff; /* Firefox */
    }

    .search-form form :-ms-input-placeholder {
        opacity: 1; /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff; /* Firefox */
    }

    .search-form form ::-ms-input-placeholder {
        opacity: 1; /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff; /* Firefox */
    }

    .search-form form ::placeholder {
        opacity: 1; /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff; /* Firefox */
    }

    .search-form form :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #fff;
    }

    .search-form form ::-ms-input-placeholder { /* Microsoft Edge */
        color: #fff;
    }

    .search-form form button {
        font-size: 34px;
        line-height: 50px;
        position: absolute;
        top: 50%;
        right: 0;
        width: 50px;
        height: 50px;
        margin: 0;
        padding: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #fff;
        border: 0;
        background: transparent;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

        .search-form form button:hover {
            color: #e33;
        }

.close-search-overlay {
    font-size: 72px;
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
}

    .close-search-overlay:hover {
        color: #e33;
    }

/*=====  End of search overlay  ======*/

/*=============================================
=            hero slider            =
=============================================*/

.hero-slider-bg-1 {
    background-image: url('../img/hero-slider/slider1-eposi1-1820x785.jpg');
}

.hero-slider-bg-2 {
    background-image: url('../img/hero-slider/slider2-eposi1-1820x785.jpg');
}

.hero-slider-bg-3 {
    background-image: url('../img/hero-slider/slider3-eposi1-1820x785.jpg');
}

.hero-slider-bg-4 {
    background-image: url('../img/hero-slider/slider1-eposi2-1920x933.jpg');
}

.hero-slider-bg-5 {
    background-image: url('../img/hero-slider/slider2-eposi2-1920x933.jpg');
}

.hero-slider-bg-6 {
    background-image: url('../img/hero-slider/slider3-eposi2-1920x933.jpg');
}

.hero-slider-bg-7 {
    background-image: url('../img/hero-slider/slider1-eposi3-1920x934.jpg');
}

.hero-slider-bg-8 {
    background-image: url('../img/hero-slider/slider2-eposi3-1920x934.jpg');
}

.hero-slider-bg-9 {
    background-image: url('../img/hero-slider/slider3-eposi3-1920x934.jpg');
}

.hero-slider-bg-10 {
    background-image: url('../img/hero-slider/slider1-eposi4-1920x934.jpg');
}

.hero-slider-bg-11 {
    background-image: url('../img/hero-slider/slider2-eposi4-1920x934.jpg');
}

.hero-slider-bg-12 {
    background-image: url('../img/hero-slider/slider3-eposi4-1920x934.jpg');
}

.hero-slider-bg-13 {
    background-image: url('../img/hero-slider/slider1-eposi5-1170x566.jpg');
}

.hero-slider-bg-14 {
    background-image: url('../img/hero-slider/slider2-eposi5-1170x566.jpg');
}

.hero-slider-bg-15 {
    background-image: url('../img/hero-slider/slider3-eposi5-1170x566.jpg');
}

.hero-slider-bg-16 {
    background-image: url('../img/hero-slider/slider1-eposi6-1920x933.jpg');
}

.hero-slider-bg-17 {
    background-image: url('../img/hero-slider/slider2-eposi6-1920x933.jpg');
}

.hero-slider-bg-18 {
    background-image: url('../img/hero-slider/slider3-eposi6-1920x933.jpg');
}

/*----------  hero slider  ----------*/

.hero-slider-wrapper .slick-active { /*-- Hero Content --*/
}

    .hero-slider-wrapper .slick-active .hero-slider-content {
        overflow: hidden;
    }

        .hero-slider-wrapper .slick-active .hero-slider-content > *:nth-child(1) {
            -webkit-animation-name: fadeInDown;
            animation-name: fadeInDown;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-delay: .5s;
            animation-delay: .5s;
        }

        .hero-slider-wrapper .slick-active .hero-slider-content > *:nth-child(2) {
            -webkit-animation-name: rollIn;
            animation-name: rollIn;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-delay: 1s;
            animation-delay: 1s;
        }

        .hero-slider-wrapper .slick-active .hero-slider-content > *:nth-child(3) {
            -webkit-animation-name: fadeInLeft;
            animation-name: fadeInLeft;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
        }

        .hero-slider-wrapper .slick-active .hero-slider-content > *:nth-child(4) {
            -webkit-animation-name: fadeInDown;
            animation-name: fadeInDown;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-delay: 2.5s;
            animation-delay: 2.5s;
        }

.hero-slider-wrapper .slick-dots {
    position: absolute;
    bottom: 50px;
    left: 50%;
    padding: 0 10px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

    .hero-slider-wrapper .slick-dots li {
        line-height: 1;
        display: inline-block;
    }

        .hero-slider-wrapper .slick-dots li button {
            font-size: 0;
            border: 1px solid gray;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            padding: 0;
            background: none;
            background-color: rgba(0, 0, 0, 0);
            background-color: #fff;
            border-radius: 50%;
            transition:all ease-in-out 0.2s;
        }

            .hero-slider-wrapper .slick-dots li button:hover {
                background-color: var(--colorOriginal-dark-Level1);
            }

        .hero-slider-wrapper .slick-dots li.slick-active button {
            background-color: var(--colorOriginal-dark-Level1);
            width: 25px;
            height: 10px;
            border:none;
        }

        .hero-slider-wrapper .slick-dots li:last-child button {
            margin-right: 0;
        }

.hero-slider-wrapper .slick-arrow {
    line-height: 54px;
    position: absolute;
    z-index: 9;
    top: 90%;
    visibility: hidden;
    width: 45px;
    height: 45px;
    transform: translateY(-50%);
    text-align: center;
    opacity: 0;
    color: var(--colorOriginal-light-Level2);
    border-radius: 50%;
    background: #ffffff91;
    box-shadow: 0px 0px 18px #8080809e;
    border: none;
    display: inline-block;
}

    .hero-slider-wrapper .slick-arrow:hover {
        color: #0404045e;
        background: #ffffffd9;
    }

    .hero-slider-wrapper .slick-arrow.slick-prev {
        left: 120px;
    }

    .hero-slider-wrapper .slick-arrow.slick-next {
        right: 120px;
    }

.hero-slider-wrapper:hover .slick-arrow {
    visibility: visible;
    opacity: 1;
}

.hero-slider-wrapper--alt-style .slick-arrow.slick-prev {
    left: 20px;
}

.hero-slider-wrapper--alt-style .slick-arrow.slick-next {
    right: 20px;
}

.hero-slider-item-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 550px;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.hero-slider-item-wrapper--fullwidth {
    height: 550px;
}

.hero-slider-item-wrapper--fullwidth--fixed-height {
    height: 550px;
}

    .hero-slider-item-wrapper--fullwidth--fixed-height .hero-slider-content p.slider-title--big-light {
        font-size: 48px;
        font-weight: 500;
        line-height: 48px;
        color: #292929;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height .hero-slider-content p.slider-title--small {
        margin-top: 20px;
    }

.hero-slider-item-wrapper--fullwidth .hero-slider-content p.slider-title--big-light {
    font-size: 48px;
    font-weight: 500;
    line-height: 48px;
    color: #292929;
}

.hero-slider-item-wrapper--fullwidth .hero-slider-content p.slider-title--small {
    margin-top: 20px;
}

.hero-slider-item-wrapper--minimal-height {
    height: 550px;
}

    .hero-slider-item-wrapper--minimal-height .hero-slider-content {
        padding-left: 85px;
    }

        .hero-slider-item-wrapper--minimal-height .hero-slider-content p.slider-title--big-light {
            font-size: 48px;
            font-weight: 500;
            line-height: 48px;
            color: #292929;
        }

        .hero-slider-item-wrapper--minimal-height .hero-slider-content p.slider-title--small {
            margin-top: 20px;
        }

.hero-slider-content > * {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.hero-slider-content p.slider-title--small {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    width: 550px;
    max-width: 100%;
    margin-bottom: 60px;
    color: #292929;
}

.hero-slider-content p.slider-title--big-bold {
    font-size: 80px;
    font-weight: 700;
    line-height: 80px;
    margin-bottom: 20px;
    color: #292929;
}

.hero-slider-content p.slider-title--big-light {
    font-size: 40px;
    font-weight: 300;
    line-height: 40px;
    margin-bottom: 0;
    color: #292929;
}

/*=====  End of hero slider  ======*/

/*=============================================
=            button            =
=============================================*/

.hero-slider-button {
    font-weight: 600;
    line-height: 20px;
    padding: 20px 35px;
    -webkit-transition: .3s;
    transition: .3s;
    color: #292929;
    border: 2px solid #292929;
}

    .hero-slider-button i {
        font-size: 14px;
        margin-right: 5px;
    }

    .hero-slider-button:hover {
        color: #fff;
        background-color: #292929;
    }

/*=====  End of button  ======*/

/*=============================================
=            category            =
=============================================*/

.category-wrapper {
    margin-bottom: -20px;
}

.category-wrapper--style2 {
    margin-bottom: -30px;
}

.single-category-item {
    position: relative;
    margin-bottom: 16px;
    background-color: var(--colorOriginal-dark-Level1);
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 9px 17px 25px var(--colorOriginal-dark-Level2);
    padding: 5px;
    z-index: 999;
    width: 125px;
}
    .single-category-item h3 {
        font-size: 18px;
        padding-top: 17%;
        padding-right: 9%;
        position: absolute;
        color: var(--colorOriginal-dark-Level2);
    }

    .single-category-item:hover {
        background: var(--colorOriginal-light-Level1);
        position: relative;
        box-shadow: 1px 6px 10px var(--colorOriginal-dark-Level2);
        transition: box-shadow 0.5s;
    }

    .single-category-item--style2 {
        margin-bottom: 30px;
    }

.single-category-item__image a {
    display: block;
    width: 100%;
}

    .single-category-item__image a img {
        width: 125px;
/*        margin-right: 50%;
        border-radius: 22%;*/
    }

    .single-category-item__image a:hover img {
        opacity: .85;
    }

.single-category-item__content {
    position: absolute;
    top: 16px;
    left: 30px;
}

.single-category-item__content--style2 {
    top: 50px;
    left: 50px;
}

    .single-category-item__content--style2 .title-light {
        font-size: 18px;
        font-weight: 300;
        line-height: 23px;
        color: #292929;
    }

    .single-category-item__content--style2 .title {
        margin-bottom: 20px;
    }

.single-category-item__content .title {
    font-size: 18px;
    line-height: 18px;
}

.single-category-item__content a {
    font-size: 12px;
    line-height: 1;
    display: inline-block;
    color: #707070;
}

    .single-category-item__content a:hover {
        color: #e33;
    }

    .single-category-item__content a i {
        font-size: 14px;
        display: inline-block;
        margin-left: 5px;
        color: #e33;
    }

.masonry-category-layout--style2 .grid-item2 {
    max-width: 20%;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 20% !important;
    -ms-flex: 0 0 20% !important;
    flex: 0 0 20% !important;
}

.masonry-category-layout--style2 .grid-item2--width2 {
    max-width: 40%;
    -webkit-box-flex: 0 !important;
    -webkit-flex: 0 0 40% !important;
    -ms-flex: 0 0 40% !important;
    flex: 0 0 40% !important;
}

/*=====  End of category  ======*/

/*=============================================
=            section title            =
=============================================*/

.section-title-wrapper .section-title {
    font-size: 25px;
    line-height: 30px;
    padding: 8px;
    margin-bottom: -45px;
    margin-top: 35px;
    border-bottom: 1px solid var(--colorOriginal-light-Level2);
}

.widget-product-title-wrapper {
    position: relative;
    margin-top: -5px;
    margin-bottom: 40px;
}

    .widget-product-title-wrapper .widget-product-title {
        font-size: 20px;
        line-height: 30px;
        display: inline-block;
        margin-bottom: 0;
        padding-right: 20px;
        background: #fff;
    }

        .widget-product-title-wrapper .widget-product-title:before {
            position: absolute;
            z-index: -1;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            content: '';
            background: #f0f0f0;
        }

/*=====  End of section title  ======*/

/*=============================================
=            product            =
=============================================*/


.single-grid-product {
    -webkit-transition: .6s;
    transition: .6s;
    border-radius: 16px;
    border: 1px solid var(--colorOriginal-dark-Level3);
}

.single-grid-product__label span {
    position: absolute;
    z-index: 9;
    top: 0px;
    left: 0px;
    display: inline-block;
    width: 85px;
    text-align: center;
    color: #fff;
    border-radius: 15px;
    font-weight: 200;
}

    .single-grid-product__label span.new {
        background-color: #e33;
    }

    .single-grid-product__label span.sale {
        right: 20px;
        left: auto;
        background-color: #292929;
    }

.single-grid-product__image {
    position: relative;
    /*margin-bottom: 20px;*/
}
.single-grid-product1 {
    z-index: 9;
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 0 0 15px 15px;
    position: relative;
    height: auto;
    text-align: center;
}
.single-grid-product__image > a {
    display: block;
    width: 100%;
}

        .single-grid-product__image > a img {
            width: 100%;
            -webkit-transition: .6s;
            transition: .6s;
        }

            .single-grid-product__image > a img:nth-child(1) {
                /*width: 180px;*/
                height: 176px;
                visibility: visible;
                opacity: 1;
                border-radius: 16px 16px 0 0;
            }

            .single-grid-product__image > a img:nth-child(2) {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                opacity: 0;
            }

    .single-grid-product__image .hover-icons {
        position: absolute;
        bottom: 0;
        left: 50%;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        visibility: hidden;
        width: 200px;
        max-width: 100%;
        padding: 15px 0;
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;
        background: #fff;
        -webkit-box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
        box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, .1);
    }

        .single-grid-product__image .hover-icons a {
            display: inline-block;
            text-align: center;
            color: #292929;
            border-right: 1px solid #ebebeb;
            -webkit-flex-basis: 25%;
            -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
        }

            .single-grid-product__image .hover-icons a:hover,
            .single-grid-product__image .hover-icons a.active {
                color: #e33;
            }

            .single-grid-product__image .hover-icons a:last-child {
                margin-right: 0;
                border-right: 0;
            }

            .single-grid-product__image .hover-icons a:last-child {
                margin-right: 0;
            }

            .single-grid-product__image .hover-icons a i {
                font-size: 20px;
            }

.single-grid-product__category-rating .category a {
    font-weight: 200;
    line-height: 10px;
    color: var(--colorOriginal-light-Level3);
    margin-right: 6px;
}

    .single-grid-product__category-rating .category a:hover {
        color: rgb(255 209 0);
    }

.single-grid-product__category-rating .rating {
    float: right;
    margin-top: 20px;
    margin-left: 16px;
}

    .single-grid-product__category-rating .rating i {
        font-size: 15px;
    }

        .single-grid-product__category-rating .rating i.active {
            color: #f5c60d;
        }

.single-grid-product__title {
    font-size: 14px;
    text-align: center;
    color: var(--colorOriginal-light-Level3);
}

    .single-grid-product__title a:hover {
        color: var(--colorOriginal-light-Level2);
    }

.single-grid-product__price .main-price {
    font-size: 24px;
    font-weight: 200;
    color: var(--colorOriginal-light-Level2);
    padding-right: 5px;
}


    .single-grid-product__price .main-price.discounted {
        text-decoration: line-through;
    }

.single-grid-product__price .discounted-price {
    font-size: 18px;
    font-weight: 200;
    line-height: 22px;
    color: var(--colorOriginal-light-Level2);
}
.price-Offer {
    font-size: 16px;
    font-weight: 200;
    color: var(--colorOriginal-light-Level2);
}
.price-OfferTitle {
    text-decoration: line-through;
    font-size: 13px;
    font-weight: 200;
    color: var(--colorOriginal-light-Level1);
    margin-top: -25px;
}
.priceOriginal {
    font-size: 16px;
    font-weight: 200;
    color: var(--colorOriginal-light-Level1);
    padding-right: 5px;
    margin-top: 30.3px;
}

.single-grid-product--widget-mode {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 20px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.single-grid-product--widget-mode__image {
    -webkit-flex-basis: 100px;
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
}

.single-grid-product--widget-mode__content {
    padding-left: 20px;
    -webkit-flex-basis: calc(100% - 100px);
    -ms-flex-preferred-size: calc(100% - 100px);
    flex-basis: calc(100% - 100px);
}

.single-grid-product--list-view {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.single-grid-product--list-view__image {
    margin-bottom: 0;
    -webkit-flex-basis: 270px;
    -ms-flex-preferred-size: 270px;
    flex-basis: 270px;
}

.single-grid-product--list-view__content {
    margin-left: 30px;
    -webkit-flex-basis: calc(100% - 270px);
    -ms-flex-preferred-size: calc(100% - 270px);
    flex-basis: calc(100% - 270px);
}

    .single-grid-product--list-view__content .category {
        margin-bottom: 15px;
    }

        .single-grid-product--list-view__content .category a:hover {
            color: #292929;
        }

    .single-grid-product--list-view__content .rating {
        margin-bottom: 20px;
    }

        .single-grid-product--list-view__content .rating i {
            font-size: 15px;
        }

            .single-grid-product--list-view__content .rating i.active {
                color: #f5c60d;
            }

.single-grid-product--list-view__title {
    margin-bottom: 20px;
}

.single-grid-product--list-view__price {
    margin-bottom: 40px;
}

.single-grid-product--list-view__product-short-desc {
    line-height: 24px;
    padding-top: 40px;
    color: #707070;
    border-top: 1px solid #e0e0e0;
}

.single-grid-product:hover .single-grid-product__image > a img:nth-child(2) {
    visibility: visible;
    opacity: 1;
}

.single-grid-product:hover .hover-icons {
    bottom: 20px;
    visibility: visible;
    opacity: 1;
}

.single-grid-product .product-countdown {
    width: 350px;
    max-width: 100%;
}

    .single-grid-product .product-countdown .single-countdown {
        width: 25%;
    }

/* product countdown */

.product-countdown .single-countdown {
    font-weight: 400;
    width: 75px;
    height: 75px;
    display: inline-block;
    /*padding: 15px;*/
    text-align: center;
    text-transform: uppercase;
    color: var(--colorOriginal-light-Level2);
    border-right: 1px solid var(--colorOriginal-light-Level2);
    background-color: #fff;
}

    .product-countdown .single-countdown .single-countdown-time {
        font-size: 14px;
        display: block;
    }

    .product-countdown .single-countdown .single-countdown-text {
        font-size: 10px;
    }

/* product widget */

.widget-product-list-wrapper {
    margin-bottom: -20px;
}

/*=====  End of product  ======*/

/*=============================================
=            slider            =
=============================================*/

/*----------  default style  ----------*/

.single-row-slider-wrapper,
.double-row-slider-wrapper {
    position: relative;
}

    .single-row-slider-wrapper .slick-arrow,
    .double-row-slider-wrapper .slick-arrow {
        font-size: 32px;
        text-align: center;
        justify-content: center;
        color: #464646;
        display: inline;
        margin-left: -24px;
        box-shadow: 0 0 25px #ffdcb8;
        visibility: visible;
        opacity: 1;
        line-height: 46px;
        position: absolute;
        z-index: 9;
        top: 50%;
        width: 50px;
        height: 50px;
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border: none;
        border-radius: 50%;
        background: #f7f7f9;
    }



        .single-row-slider-wrapper .slick-arrow:hover,
        .double-row-slider-wrapper .slick-arrow:hover {
            color: var(--colorOriginal-dark-Level1);
            border: 1px solid var(--colorOriginal-dark-Level1);
            background-color: var(--colorOriginal-dark-Level2);
        }

        .single-row-slider-wrapper .slick-arrow.slick-prev,
        .double-row-slider-wrapper .slick-arrow.slick-prev {
            left: -20px;
        }

        .single-row-slider-wrapper .slick-arrow.slick-next,
        .double-row-slider-wrapper .slick-arrow.slick-next {
            /*right: -20px;*/
            visibility: hidden;
        }

/*    .single-row-slider-wrapper:hover .slick-arrow,
    .double-row-slider-wrapper:hover .slick-arrow {
        visibility: visible;
        opacity: 1;
    }*/

        .single-row-slider-wrapper:hover .slick-arrow.slick-prev,
        .double-row-slider-wrapper:hover .slick-arrow.slick-prev {
            left: -25px;
        }

        .single-row-slider-wrapper:hover .slick-arrow.slick-next,
        .double-row-slider-wrapper:hover .slick-arrow.slick-next {
            right: -25px;
        }

    .single-row-slider-wrapper .slick-list,
    .double-row-slider-wrapper .slick-list {
        /*margin-right: -30px !important;
        margin-left: -4px !important;*/
        border-radius: 0;
    }

        .single-row-slider-wrapper .slick-list .slick-active .single-grid-product,
        .double-row-slider-wrapper .slick-list .slick-active .single-grid-product {
/*            -webkit-animation: customZoomIn 500ms ease-in-out;
            animation: customZoomIn 500ms ease-in-out;*/
        }

.double-row-slider-wrapper {
    margin-bottom: -55px;
}

    .double-row-slider-wrapper .single-grid-product {
        min-height: 450px;
        margin-bottom: 50px;
    }

.tab-slider-wrapper .tab-product-navigation {
    margin-bottom: 15px;
}

    .tab-slider-wrapper .tab-product-navigation .nav {
        border-bottom: 0;
    }

        .tab-slider-wrapper .tab-product-navigation .nav .nav-item {
            font-weight: 200;
            line-height: 36px;
            position: relative;
            display: block;
            padding: 0 15px;
            cursor: pointer;
            text-transform: capitalize;
            color: var(--colorOriginal-dark-Level1);
            border-radius: 8px;
            background: inherit;
            border: 1px solid var(--colorOriginal-light-Level1) !important;
        }

            .tab-slider-wrapper .tab-product-navigation .nav .nav-item.nav-link {
                border: none;
            }

            .tab-slider-wrapper .tab-product-navigation .nav .nav-item:last-child {
                margin-right: 0;
            }

            .tab-slider-wrapper .tab-product-navigation .nav .nav-item.active {
                position: relative;
                color: var(--colorOriginal-light-Level2);
                border: none;
                background: var(--colorOriginal-dark-Level2);
            }

                .tab-slider-wrapper .tab-product-navigation .nav .nav-item.active:after {
                    position: absolute;
                    top: 100%;
                    right: 0;
                    left: 0;
                    /*width: 103px;*/
                    margin: auto;
                    content: '';
                    color: var(--colorOriginal-light-Level3);
                    border-top: 5px solid var(--colorOriginal-dark-Level1);
                    border-right: 7px solid transparent;
                    border-bottom: 5px solid transparent;
                    border-left: 7px solid transparent;
                }

/* blog post slider */

.blog-post-slider-border-wrapper {
/*    border: 2px solid var(--colorOriginal-light-Level1);*/
    border-radius: 15px;
}

.blog-post-slider-border-wrapper--bottom {
    border-bottom: 1px solid #ebebeb;
}

.blog-post-slider-wrapper .slick-list {
 /*   margin-right: -15px !important;
    margin-left: -15px !important;*/
}

.single-slider-post__image {
    position: relative;
}

    .single-slider-post__image a {
        display: block;
        width: 100%;
    }

        .single-slider-post__image a img {
            width: 100%;
        }

        .single-slider-post__image a:hover img {
            opacity: .85;
        }

.single-slider-post__date-sticker {
    position: absolute;
    display: flex;
    padding: 5px;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    margin-right: 110px;
}

    .single-slider-post__date-sticker span {
        display: block;
    }

        .single-slider-post__date-sticker span.month {
            font-weight: 500;
            line-height: 12px;
            margin-bottom: 10px;
            color: var(--colorOriginal-light-Level2);
        }

        .single-slider-post__date-sticker span.day {
            font-size: 20px;
            font-weight: 700;
            line-height: 20px;
            color: var(--colorOriginal-light-Level2);
        }

.single-slider-post__content .title {
    font-size: 16px;
    line-height: 1;
    line-height: 18px;
    margin-top: 20px;
    margin-bottom: 15px;
    color: var(--colorOriginal-light-Level3);
}

    .single-slider-post__content .title a:hover {
        color: var(--colorOriginal-light-Level1);
    }

.single-slider-post__content .post-meta {
    font-weight: 400;
    line-height: 17px;
    margin-bottom: 10px;
    color: #9d9d9d;
}

    .single-slider-post__content .post-meta a {
        padding-left: 5px;
        color: #292929;
    }

.single-slider-post__content .short-desc {
    line-height: 24px;
    margin-bottom: 0;
    color: var(--colorOriginal-light-Level3);
}

.single-slider-post__content .blog-post-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    margin-top: 30px;
    color: var(--colorOriginal-light-Level3);
    border-bottom: 2px solid #e8e8e8;
}

    .single-slider-post__content .blog-post-link:hover {
        color: var(--colorOriginal-light-Level1);
    }

/*----------  custom zoom in animation  ----------*/

/*=====  End of slider  ======*/

/*=============================================
=            banner            =
=============================================*/

.banner-hover-area--no-gutter {
    overflow: hidden;
}

.banner-hover-wrapper {
    margin-bottom: -30px;
}

.single-hover-banner {
    margin-bottom: 30px;
}

.single-hover-banner__image {
    position: relative;
}

    .single-hover-banner__image a {
        display: block;
        width: 100%;
    }

        .single-hover-banner__image a:hover img {
            opacity: .85;
        }

        .single-hover-banner__image a img {
            width: 100%;
            border-radius: 12px;
            /*box-shadow: 4px 8px 60px gray;*/
        }

.single-hover-banner__content {
    position: absolute;
    top: 50%;
    left: 8%;
    max-width: 200px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .single-hover-banner__content .small-text {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        margin-bottom: 14px;
        color: #292929;
    }

    .single-hover-banner__content .big-text {
        font-size: 28px;
        font-weight: 400;
        line-height: 30px;
        margin-bottom: 0;
        color: #292929;
    }

    .single-hover-banner__content .banner-link {
        font-weight: 600;
        line-height: 23px;
        display: inline-block;
        width: auto;
        margin-top: 70px;
        color: #292929;
        border-bottom: 2px solid #292929;
    }

        .single-hover-banner__content .banner-link:hover {
            color: #e33;
            border-color: #e33;
        }

.single-hover-banner--middlesize-text__content {
    position: absolute;
    top: 50%;
    left: 8%;
    max-width: 280px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

    .single-hover-banner--middlesize-text__content .small-text {
        font-size: 20px;
        font-weight: 600;
        line-height: 26px;
        color: #292929;
    }

    .single-hover-banner--middlesize-text__content .big-text {
        font-size: 40px;
        font-weight: 400;
        line-height: 45px;
        margin-bottom: 0;
        color: #292929;
    }

    .single-hover-banner--middlesize-text__content .banner-link {
        font-size: 17px;
        font-weight: 600;
        line-height: 23px;
        display: inline-block;
        width: auto;
        margin-top: 105px;
        color: #292929;
        border-bottom: 2px solid #292929;
    }

        .single-hover-banner--middlesize-text__content .banner-link:hover {
            color: #e33;
            border-color: #e33;
        }

/*=====  End of banner  ======*/

/*=============================================
=            feature logo            =
=============================================*/

.feature-logo-wrapper--bottom-border {
    border-bottom: 1px solid #ebebeb;
}

.single-feature-logo {
    text-align: center;
}

.single-feature-logo__image {
    margin-bottom: 30px;
}

.single-feature-logo__content .title {
    font-size: 12px;
    font-weight: 600;
    line-height: 15px;
    margin-bottom: 24px;
    color: #292929;
}

.single-feature-logo__content .short-desc {
    font-weight: 400;
    line-height: 19px;
    color: #929292;
}

/*=====  End of feature logo  ======*/

/*=============================================
=            newsletter            =
=============================================*/

.newsletter-wrapper {
    text-align: center;
}

    .newsletter-wrapper .small-text {
        line-height: 17px;
        margin-top: -5px;
        margin-bottom: 0;
    }

    .newsletter-wrapper .title {
        font-size: 30px;
        line-height: 35px;
        margin-bottom: 20px;
    }

    .newsletter-wrapper .short-desc {
        line-height: 24px;
        margin-bottom: 50px;
    }

.newsletter-form {
    position: relative;
    width: 620px;
    max-width: 100%;
    margin: 0 auto;
    border: 2px solid #ebebeb;
}

    .newsletter-form input {
        font-size: 12px;
        line-height: 30px;
        width: 100%;
        height: 55px;
        padding: 10px 20px;
        padding-right: 210px;
        color: #9d9d9d;
        border: none;
    }

    .newsletter-form button {
        font-weight: 600;
        line-height: 28px;
        position: absolute;
        top: 50%;
        right: 0;
        width: 200px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #292929;
        border: none;
        border-left: 2px solid #ebebeb;
        background: none;
    }

        .newsletter-form button:hover {
            color: #e33;
        }

/*----------  newsletter popup  ----------*/

.newsletter-popup-area:after {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    visibility: visible;
    width: 100%;
    height: 100%;
    content: '';
    opacity: .8;
    background-color: #333;
}

.newsletter-popup-content {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    width: 50%;
    padding: 50px 20px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background: #fff;
}

    .newsletter-popup-content .close-newsletter-popup {
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px 15px;
        color: #fff;
        background-color: #333;
    }

        .newsletter-popup-content .close-newsletter-popup:hover {
            background-color: #e33;
        }

    .newsletter-popup-content h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 31px;
        margin: 0 0 15px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #000;
    }

    .newsletter-popup-content p {
        font-size: 13px;
        font-weight: 400;
        line-height: 19px;
        color: var(--colorOriginal-light-Level3);
    }

    .newsletter-popup-content .subscription-form form input {
        font-size: 12px;
        display: block;
        width: 65%;
        height: 40px;
        margin: 20px auto;
        padding: 0 15px;
        border: medium none;
        background: #ebebeb none repeat scroll 0 0;
    }

    .newsletter-popup-content .subscription-form form button {
        font-size: 14px;
        font-weight: 500;
        line-height: 48px;
        display: inline-block;
        margin-bottom: 20px;
        padding: 0 30px;
        text-transform: uppercase;
        color: #fff;
        border: none;
        background: #222;
    }

        .newsletter-popup-content .subscription-form form button:hover {
            color: #fff;
            background-color: #e33;
        }

.mailchimp-alerts {
    margin-top: 3px;
}

/*=====  End of newsletter  ======*/

/*=====  End of newsletter  ======*/

/*=============================================
=            testimonial            =
=============================================*/

.testimonial-bg {
    background-image: url('../img/backgrounds/bkg_testimonials.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.single-testimonial-item {
    text-align: center;
}

.single-testimonial-item__image {
    margin-bottom: 40px;
}

    .single-testimonial-item__image img {
        margin: 0 auto;
    }

.single-testimonial-item__content .testimonial-text {
    line-height: 30px;
}

.single-testimonial-item__content img {
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 25px;
}

.single-testimonial-item__content .testimonial-author {
    font-weight: 600;
    line-height: 17px;
    letter-spacing: 6px;
    color: #292929;
}

.full-testimonial-wrapper .testimonial-wrapper .slick-arrow {
    font-size: 36px;
    position: absolute;
    z-index: 9;
    top: 50%;
    visibility: hidden;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    border: none;
    background: none;
}

    .full-testimonial-wrapper .testimonial-wrapper .slick-arrow:hover {
        color: #292929;
    }

    .full-testimonial-wrapper .testimonial-wrapper .slick-arrow.slick-prev {
        left: 0;
    }

    .full-testimonial-wrapper .testimonial-wrapper .slick-arrow.slick-next {
        right: 0;
    }

.full-testimonial-wrapper:hover .testimonial-wrapper .slick-arrow {
    visibility: visible;
    opacity: 1;
}

/*=====  End of testimonial  ======*/

/*=============================================
=            scroll top            =
=============================================*/

#scroll-top {
    font-weight: 600;
    font-size: 24px;
    position: fixed;
    z-index: 9999;
    right: 2%;
    bottom: 111px;
    display: none;
    padding: 0px 25px;
    cursor: pointer;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    text-align: center;
    text-transform: uppercase;
    color: var(--colorOriginal-light-Level1);
    border: 3px solid var(--colorOriginal-light-Level1);
    background: var(--colorOriginal-dark-Level2);
    border-radius: 50%;
    transition: all 0.5s;
    width: 60px;
    height: 60px;
}
    #scroll-top i {
        margin-right: -12px;
        margin-left: -7.5px;
    }

    #scroll-top:hover {
        color: var(--colorOriginal-dark-Level2);
        background: var(--colorOriginal-light-Level1);
        border-color: var(--colorOriginal-dark-Level2);
    }

/*=====  End of scroll top  ======*/

/*=============================================
=            quick view            =
=============================================*/

.quick-view-modal-container {
    z-index: -1;
    display: block !important;
    visibility: hidden;
    opacity: 0;
}

    .quick-view-modal-container.show {
        z-index: 99999;
        visibility: visible;
        opacity: 1;
    }

    .quick-view-modal-container .modal-dialog {
        max-width: 65%;
    }

    .quick-view-modal-container .modal-header {
        padding-bottom: 0;
        border: none;
    }

        .quick-view-modal-container .modal-header button {
            z-index: 999;
        }

    .quick-view-modal-container .modal-body {
        padding: 30px 50px 70px 50px;
    }

    .quick-view-modal-container .modal-content {
        overflow: auto;
        max-height: 750px;
        border-radius: 0;
    }

/*=====  End of quick view  ======*/

/*=============================================
=            breadcrumb            =
=============================================*/

.breadcrumb-content {
    font-size: 12px;
}

.breadcrumb-content__title {
    font-size: 36px;
    line-height: 36px;
    margin-bottom: 15px;
    color: var(--colorOriginal-light-Level3);
}

.breadcrumb-content__page-map li {
    line-height: 25px;
    display: inline-block;
    color: var(--colorOriginal-light-Level3);
}

    .breadcrumb-content__page-map li:after {
        margin: 0 5px;
        content: '>';
    }

    .breadcrumb-content__page-map li:last-child:after {
        display: none;
    }

    .breadcrumb-content__page-map li a:hover {
        color: var(--colorOriginal-light-Level2);
    }

    .breadcrumb-content__page-map li.active {
        color: var(--colorOriginal-light-Level2);
    }

.breadcrumb-wrapper {
    padding-top: 50px;
    padding-bottom: 50px;
}

.breadcrumb-bg {
    border-radius: 25%;
    box-shadow: 0px 0px 20px var(--colorOriginal-light-Level3);
}
.breadcrumb-bg2 {
    box-shadow: 0px 0px 3px var(--colorOriginal-light-Level3);
    padding: 10px;
    width: 100%;
    text-align: start;
}

/*=====  End of breadcrumb  ======*/

/*=============================================
=            pagination            =
=============================================*/

.pagination-area {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 0;
    padding-right: 0px;
    padding-left: 0px;
    border-top: 1px solid #f00;
    border-bottom: 1px solid #f00;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: white;
    padding-right: 50px;
    padding-left: 50px;
    border-radius: 15px;
}

.pagination-area__left {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}

.pagination-area__right {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
}

    .pagination-area__right .pagination-section {
        text-align: right;
    }

        .pagination-area__right .pagination-section li {
            display: inline-block;
            margin-right: 30px;
        }

            .pagination-area__right .pagination-section li:last-child {
                margin-right: 0;
            }

            .pagination-area__right .pagination-section li a:hover,
            .pagination-area__right .pagination-section li a.active {
                color: #f00;
                padding-left: 22px;
            }

/*=====  End of pagination  ======*/

/*=============================================
=            shop            =
=============================================*/

.shop-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 50px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: white;
    border-radius: 8px;
}

.shop-header__left__message {
    font-weight: 300;
    line-height: 46px;
    float: left;
    color: #707070;
}

.shop-header__right .single-select-block {
    margin-right: 30px;
}

    .shop-header__right .single-select-block:last-child {
        margin-right: 0;
    }

    .shop-header__right .single-select-block .select-title {
        line-height: 30px;
        margin-right: 10px;
        color: #707070;
    }

    .shop-header__right .single-select-block select {
        line-height: 30px;
        padding-left: 10px;
        color: #707070;
        border: none;
    }

.grid-icons {
    float: left;
    margin-right: 30px;
}

    .grid-icons button {
        float: left;
        height: 46px;
        padding: 0;
        border: none;
        background: none;
        background-repeat: no-repeat;
        background-position: center;
    }

        .grid-icons button.three-column {
            width: 20px;
            margin-right: 4px;
            background-image: url('../img/icons/grid-3-column.png');
        }

            .grid-icons button.three-column:hover,
            .grid-icons button.three-column.active {
                background-image: url('../img/icons/grid-3-column-hover.png');
            }

        .grid-icons button.four-column {
            width: 35px;
            margin-right: 4px;
            background-image: url('../img/icons/grid-4-column.png');
        }

            .grid-icons button.four-column:hover,
            .grid-icons button.four-column.active {
                background-image: url('../img/icons/grid-4-column-hover.png');
            }

        .grid-icons button.five-column {
            width: 35px;
            margin-right: 4px;
            background-image: url('../img/icons/grid-5-column.png');
        }

            .grid-icons button.five-column:hover,
            .grid-icons button.five-column.active {
                background-image: url('../img/icons/grid-5-column-hover.png');
            }

        .grid-icons button.list-view {
            width: 20px;
            margin-left: 6px;
            background-image: url('../img/icons/list.png');
        }

            .grid-icons button.list-view:hover,
            .grid-icons button.list-view.active {
                background-image: url('../img/icons/list-hover.png');
            }

.sidebar-sub-widget-wrapper {
    margin-bottom: -35px;
}

.sidebar-sub-widget {
    margin-bottom: 35px;
}

.sidebar-sub-widget__title {
    margin-top: -5px;
    margin-bottom: 15px;
}

.sidebar-sub-widget__title--price-title {
    margin-bottom: 25px;
}

.sidebar-sub-widget__title--abs-icon {
    margin-bottom: 5px;
}

.single-sidebar-widget {
    margin-bottom: 45px;
    padding-bottom: 35px;
    border-bottom: 1px solid #ebebeb;
}

    .single-sidebar-widget:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

.single-sidebar-widget__title {
    margin-top: -5px;
    margin-bottom: 15px;
}

.single-sidebar-widget__category-list li a {
    line-height: 26px;
    position: relative;
    display: block;
    padding: 5px 0;
    color: #777;
}

    .single-sidebar-widget__category-list li a:hover,
    .single-sidebar-widget__category-list li a.active {
        color: var(--colorOriginal-light-Level2);
    }

        .single-sidebar-widget__category-list li a:hover span,
        .single-sidebar-widget__category-list li a.active span {
            color: var(--colorOriginal-dark-Level2);
            background: var(--colorOriginal-light-Level2);
        }

    .single-sidebar-widget__category-list li a span {
        line-height: 30px;
        position: absolute;
        top: 50%;
        right: 0;
        width: 30px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        color: #c3c3c3;
        border-radius: 50%;
        background: #ebebeb;
    }

.single-sidebar-widget__category-list li.has-children > ul {
    margin-left: 15px;
}

.single-sidebar-widget__category-list--abs-icon li a {
    padding-left: 30px;
}

    .single-sidebar-widget__category-list--abs-icon li a:hover:before {
        border-color: #e33;
    }

    .single-sidebar-widget__category-list--abs-icon li a:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 15px;
        height: 15px;
        content: '';
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border: 1px solid #dfdfdf;
        border-radius: 2px;
    }

.single-sidebar-widget__category-list--abs-icon li:last-child a {
    line-height: 15px;
    padding-bottom: 0;
}

.single-sidebar-widget__tag-list {
    margin-bottom: -10px;
}

    .single-sidebar-widget__tag-list li {
        display: inline-block;
    }

        .single-sidebar-widget__tag-list li a {
            font-weight: 400;
            line-height: 38px;
            display: block;
            margin-right: 7px;
            margin-bottom: 10px;
            padding: 0 18px;
            color: var(--colorOriginal-light-Level1);
            border: 1px solid var(--colorOriginal-light-Level3);
        }

            .single-sidebar-widget__tag-list li a:hover {
                color: #fff;
                border-color: #333;
                background: #333;
            }

/*-- Sidebar Price --*/

.sidebar-price #price-range {
    position: relative;
    width: 100%;
    height: 5px;
    margin: 7px 0;
    border-radius: 50px;
    background-color: #ccc;
}

    .sidebar-price #price-range .ui-slider-range {
        position: absolute;
        top: 0;
        height: 100%;
        background-color: #e33;
    }

    .sidebar-price #price-range .ui-slider-handle {
        position: absolute;
        top: 50%;
        display: block;
        width: 15px;
        height: 15px;
        cursor: pointer;
        -webkit-transition: none;
        transition: none;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border-radius: 50px;
        background-color: #fff;
        -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2);
    }

.sidebar-price .price-amount {
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    margin-top: 12px;
    padding: 0;
    color: #292929;
    border: none;
    background-color: transparent;
}

.shop-product-wrap.grid .list-view-product {
    display: none;
}

.shop-product-wrap.grid .col-lg-3 {
    -webkit-transition: .8s;
    transition: .8s;
}

.shop-product-wrap.grid .col-lg-4 {
    -webkit-transition: .8s;
    transition: .8s;
}

.shop-product-wrap.grid .col-lg-is-5 {
    max-width: 20%;
    -webkit-transition: .8s;
    transition: .8s;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 20%;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
}

.shop-product-wrap.list [class*='col'],
.shop-product-wrap.list [class*='col-'] {
    width: 100%;
    max-width: 100%;
    -webkit-transition: .8s;
    transition: .8s;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%;
}

.shop-product-wrap.list .grid-view-product {
    display: none;
}

.shop-product-wrap .single-grid-product {
    margin-bottom: 50px;
}

/*=====  End of shop  ======*/

/*=============================================
=            single product            =
=============================================*/

.big-image-slider-wrapper {
    position: relative;
    cursor: pointer;
}

.big-image-slider-wrapper--change-cursor {
    cursor: crosshair !important;
}

.big-image-slider-wrapper--gallery-mode {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .big-image-slider-wrapper--gallery-mode .big-image-slider-single-item {
        border: 1px solid #ddd;
        -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    }

.big-image-slider-wrapper--sticky-mode {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .big-image-slider-wrapper--sticky-mode .big-image-slider-single-item {
        border: 1px solid #ddd;
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

.big-image-slider-wrapper--slider-mode {
    margin-bottom: 50px;
}

    .big-image-slider-wrapper--slider-mode .big-image-box-slider:hover .slick-arrow {
        visibility: visible;
        opacity: 1;
    }

        .big-image-slider-wrapper--slider-mode .big-image-box-slider:hover .slick-arrow.slick-prev {
            left: -25px;
        }

        .big-image-slider-wrapper--slider-mode .big-image-box-slider:hover .slick-arrow.slick-next {
            right: -25px;
        }

    .big-image-slider-wrapper--slider-mode .slick-arrow {
        line-height: 46px;
        position: absolute;
        z-index: 9;
        top: 50%;
        visibility: hidden;
        width: 50px;
        height: 50px;
        -webkit-transition: .3s;
        transition: .3s;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center;
        opacity: 0;
        color: #9e9e9e;
        border: 2px solid #e1e1e1;
        border-radius: 100%;
        background: #f7f7f9;
    }

        .big-image-slider-wrapper--slider-mode .slick-arrow:hover {
            color: #fff;
            border-color: #292929;
            background-color: #292929;
        }

        .big-image-slider-wrapper--slider-mode .slick-arrow.slick-prev {
            left: -20px;
        }

        .big-image-slider-wrapper--slider-mode .slick-arrow.slick-next {
            right: -20px;
        }

    .big-image-slider-wrapper--slider-mode .slick-list {
        margin-right: -10px;
        margin-left: -10px;
    }

    .big-image-slider-wrapper--slider-mode .slick-slide > div {
        margin: 0 10px;
    }

/* product details slider */

.product-details-slider-area {
    position: relative;
}

    .product-details-slider-area .product-badge-wrapper {
        right: -10px;
        left: auto;
        display: inline-block;
    }

        .product-details-slider-area .product-badge-wrapper span {
            font-size: 15px;
            padding: 3px 15px;
        }

    .product-details-slider-area .big-image-wrapper {
        position: relative;
    }

        .product-details-slider-area .big-image-wrapper .enlarge-icon {
            position: absolute;
            z-index: 5;
            right: 10px;
            bottom: 20px;
        }

            .product-details-slider-area .big-image-wrapper .enlarge-icon a {
                font-size: 30px;
            }

                .product-details-slider-area .big-image-wrapper .enlarge-icon a:hover {
                    color: #e33;
                }

/* product big image slider */

.product-details-big-image-slider-wrapper {
    cursor: crosshair;
}

    .product-details-big-image-slider-wrapper .single-image img {
        width: 100%;
        border-radius: 25px;
    }

.product-details-big-image-slider-wrapper--bottom-space {
    margin-bottom: 15px;
}

.product-details-big-image-slider-wrapper--sticky .single-image {
    position: relative;
    margin-bottom: 15px;
}

    .product-details-big-image-slider-wrapper--sticky .single-image .product-badge-wrapper {
        right: 10px;
    }

/* product small image slider */

.product-details-small-image-slider-wrapper--horizontal-space .single-image {
    padding: 0 5px;
}

.product-details-small-image-slider-wrapper--horizontal-space .slick-arrow {
    position: absolute;
    z-index: 9;
    top: 50%;
    visibility: hidden;
    -webkit-transition: .3s;
    transition: .3s;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 0;
    background-color: #808080b2;
    height: 80px;
    border-radius: 5px !important;
    margin-right: -15px;
    margin-left: -15px;
    text-align: center;
}
    .product-details-small-image-slider-wrapper--horizontal-space .slick-arrow i {
        font-size: 25px;
        line-height: 20px;
        color: #292929;
    }

    .product-details-small-image-slider-wrapper--horizontal-space .slick-arrow.slick-next {
        right: 0;
    }

.product-details-small-image-slider-wrapper--horizontal-space:hover .slick-arrow {
    visibility: visible;
    opacity: 1;
    border-radius: 25px;
}

.product-details-small-image-slider-wrapper--vertical-space {
    position: relative;
}

    .product-details-small-image-slider-wrapper--vertical-space .single-image {
        padding: 5px 0;
    }

    .product-details-small-image-slider-wrapper--vertical-space .slick-arrow {
        position: absolute;
        z-index: 9;
        visibility: hidden;
        width: 100%;
        height: 30px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 0;
        border: none;
        background: none;
        border-radius: 25px;
    }

        .product-details-small-image-slider-wrapper--vertical-space .slick-arrow i {
            font-size: 20px;
            line-height: 20px;
            color: #292929;
        }

        .product-details-small-image-slider-wrapper--vertical-space .slick-arrow.slick-prev {
            top: 0;
            /* left: 0; */
        }

        .product-details-small-image-slider-wrapper--vertical-space .slick-arrow.slick-next {
            top: auto;
            right: auto;
            bottom: 0 !important;
        }

    .product-details-small-image-slider-wrapper--vertical-space:hover .slick-arrow {
        visibility: visible;
        opacity: 1;
    }

.product-details-small-image-slider-wrapper .slick-list .slick-active.slick-current .single-image img {
    border: 1px solid var(--colorOriginal-light-Level2);
    border-radius: 12px;
}

.product-details-small-image-slider-wrapper .single-image {
    cursor: pointer;
}

/*----------  product description  ----------*/

.single-product-content-description .product-countdown {
    margin-bottom: 25px;
}

    .single-product-content-description .product-countdown .single-countdown {
        padding: 15px 25px;
    }

        .single-product-content-description .product-countdown .single-countdown .single-countdown-time {
            font-size: 18px;
        }

        .single-product-content-description .product-countdown .single-countdown .single-countdown-text {
            font-size: 10px;
        }

.single-product-content-description .single-info {
    line-height: 17px;
    margin-bottom: 10px;
    color: var(--colorOriginal-light-Level3);
}

    .single-product-content-description .single-info .value {
        color: var(--colorOriginal-light-Level1);
    }

    .single-product-content-description .single-info a {
        color: var(--colorOriginal-light-Level1);
    }

        .single-product-content-description .single-info a:hover {
            color: var(--colorOriginal-light-Level2);
        }

.single-product-content-description .product-title {
    margin-bottom: 20px;
}

.single-product-content-description .product-rating {
    margin-bottom: 20px;
}

.single-product-content-description .rating i {
    font-size: 15px;
}

    .single-product-content-description .rating i.active {
        color: #f5c60d;
    }

.single-product-content-description .review-count a {
    padding: 0 5px;
    color: var(--colorOriginal-light-Level3);
}

    .single-product-content-description .review-count a:hover {
        color: var(--colorOriginal-light-Level2);
    }

.single-product-content-description .product-description {
    line-height: 30px;
    margin-top: 35px;
    margin-bottom: 0;
    padding-top: 35px;
    padding-bottom: 35px;
    color: var(--colorOriginal-light-Level3);
    border-top: 1px solid;
}

.size {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 20px;
    color: #222;
}

    .size span.title {
        font-weight: 500;
    }

    .size .nice-select {
        float: none;
        width: 100px;
        margin-top: 5px;
        border: 1px solid #ddd;
        border-radius: 0;
    }

.color {
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 20px;
    color: #222;
}

    .color span.title {
        font-weight: 500;
    }

    .color span.color-block {
        display: inline-block;
        width: 30px;
        height: 30px;
        margin-top: 10px;
        margin-right: 5px;
        border: 2px solid transparent;
    }

    .color span.color-choice-1 {
        background-color: #b09603;
    }

    .color span.color-choice-2 {
        background-color: #c8bdbb;
    }

    .color span.color-choice-3 {
        background-color: #225170;
    }

    .color span.active {
        width: 32px;
        height: 32px;
        border-color: #e33;
    }

.group-product-form {
    margin-bottom: 20px;
}

    .group-product-form .table-content table {
        width: 100%;
        text-align: center;
        border-width: 1px 0 0 1px;
        border-style: solid;
        border-color: #e5e5e5;
        border-radius: 0;
        background: #fff none repeat scroll 0 0;
    }

        .group-product-form .table-content table td {
            width: 33.33%;
            padding: 12px 10px;
            border-right: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
        }

            .group-product-form .table-content table td.product-name {
                font-weight: 500;
            }

                .group-product-form .table-content table td.product-name a {
                    font-size: 14px;
                    color: #292929;
                }

                    .group-product-form .table-content table td.product-name a:hover {
                        color: #e33;
                    }

            .group-product-form .table-content table td p span {
                display: block;
                margin-top: 10px;
            }

/* quantity selection */

.quantity-selection label {
    font-weight: 400;
    line-height: 54px;
    margin-right: 20px;
    margin-bottom: 0;
    color: var(--colorOriginal-light-Level3);
}

.quantity-selection input {
    font-size: 20px;
    font-weight: 200;
    line-height: 22px;
    width: 181px;
    height: 39px;
    padding: 0 20px;
    text-align: center;
    color: rgb(0, 0, 0);
    border: 1px solid #000;
    background: var(--colorOriginal-dark-Level2);
}
.toman {
    font-size: 12px;
    transform: rotate(57deg);
    position: absolute;
}

    .quantity-selection input[type=number]::-webkit-inner-spin-button,
    .quantity-selection input[type=number]::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

.product-actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
}

.product-actions--slider-box {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.product-actions .product-buttons {
    /*line-height: 1;
    margin-left: 15px;*/
}

    .product-actions .product-buttons .cart-btn {
        margin-top: -5px;
    }

.cart-btn {
    width: 100%;
    text-align: center;
    font-weight: 200;
    line-height: 50px;
    border-radius: 8px;
    padding: 0 35px;
    -webkit-transition: .3s;
    transition: .3s;
    vertical-align: middle;
    color: #fff;
    border: 2px solid #f00;
    background-color: #f00;
}

    .cart-btn i {
        font-size: 20px;
        line-height: 50px;
        margin-right: 5px;
        vertical-align: middle;
    }

    .cart-btn:hover {
        background-color: var(--colorOriginal-dark-Level2);
        border: 2px solid #16ae00;
        color: #16ae00 !important;
    }

.wishlist-compare-btn {
    display: inline-block;
    margin-left: 15px;
    border: 2px solid #ebebeb;
}

    .wishlist-compare-btn a {
        line-height: 50px;
        position: relative;
        width: 60px;
        -webkit-transition: .3s;
        transition: .3s;
        text-align: center;
    }

        .wishlist-compare-btn a:last-child:after {
            display: none;
        }

        .wishlist-compare-btn a:after {
            position: absolute;
            top: 50%;
            right: 0;
            width: 1px;
            height: 28px;
            content: '';
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            background: #ebebeb;
        }

        .wishlist-compare-btn a:hover i {
            color: #e33;
        }

        .wishlist-compare-btn a i {
            font-size: 20px;
            color: #323232;
        }

.social-share-buttons {
    margin-top: 20px;
}

    .social-share-buttons h5 {
        line-height: 30px;
        text-transform: uppercase;
    }

    .social-share-buttons ul {
        margin-bottom: 15px;
    }

        .social-share-buttons ul li {
            display: inline-block;
            margin-right: 5px;
        }

            .social-share-buttons ul li a {
                line-height: 40px;
                display: block;
                width: 40px;
                height: 40px;
                text-align: center;
                border: 1px solid #ddd;
            }

                .social-share-buttons ul li a i.fa-instagram {
                    background-image: linear-gradient(-45deg,#1d2671,#cc2b5e,#753a88 );
                    border-radius: 50%;
                }

                .social-share-buttons ul li a i.fa-telegram {
                    color: #1da1f2;
                }

                .social-share-buttons ul li a i.fa-google-plus {
                    color: #dd5144;
                }

                .social-share-buttons ul li a i.fa-pinterest {
                    color: #bd081b;
                }

            .social-share-buttons ul li:hover a {
                color: #fff;
                border-color: transparent;
            }

                .social-share-buttons ul li:hover a i.fa {
                    color: #fff;
                }

                .social-share-buttons ul li:hover a.telegramLink {
                    border-color: #1da1f2;
                    background-color: #1da1f2;
                }

                .social-share-buttons ul li:hover a.instagram {
                    border-color: #4867aa;
                    background-image: linear-gradient(-45deg,#1d2671,#cc2b5e,#753a88 );
                }

                .social-share-buttons ul li:hover a.google-plus {
                    border-color: #dd5144;
                    background-color: #dd5144;
                }

                .social-share-buttons ul li:hover a.pinterest {
                    border-color: #bd081b;
                    background-color: #bd081b;
                }

/*----------  product description tab  ----------*/

.product-description-review-container {
    border-top: 1px solid;
    /*border-bottom: 1px solid #ebebeb;*/
}

    .product-description-review-container nav .nav-tabs {
        margin-bottom: 30px;
        border-bottom: 0;
    }

        .product-description-review-container nav .nav-tabs .nav-link {
            margin-top: -5px;
        }

        .product-description-review-container nav .nav-tabs a.nav-link {
            font-size: 20px;
            font-weight: 500;
            line-height: 30px;
            position: relative;
            margin: 0;
            margin-right: 50px;
            padding: 13px 0;
            padding-top: 0;
            text-transform: capitalize;
            color: var(--colorOriginal-light-Level1);
            border: none !important;
            border-radius: 0;
            background: transparent;
        }

            .product-description-review-container nav .nav-tabs a.nav-link.active {
                color: var(--colorOriginal-light-Level3);
                border-bottom: 0;
            }

        .product-description-review-container nav .nav-tabs a:hover {
            color: var(--colorOriginal-light-Level2);
        }

        .product-description-review-container nav .nav-tabs a:last-child {
            margin-right: 0;
        }

    .product-description-review-container .tab-content .tab-pane.active {
        padding: 0;
    }

    .product-description-review-container .tab-content .tab-pane .product-description p {
        font-weight: 400;
        line-height: 30px;
        color: #707070;
    }

/*-- Single Product Rating --*/

.product-rating-wrap {
    overflow: hidden;
}

.pro-avg-rating {
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

    .pro-avg-rating h4 {
        font-size: 18px;
        font-weight: 500;
        line-height: 28px;
        margin: 0 0 7px;
    }

        .pro-avg-rating h4 span {
            font-size: 12px;
            font-weight: 400;
            line-height: 10px;
            color: #707070;
        }

    .pro-avg-rating > span {
        font-size: 12px;
        line-height: 10px;
        display: block;
    }

.rating-list {
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

    .rating-list .sin-list {
        margin-right: 30px;
    }

        .rating-list .sin-list:last-child {
            margin-right: 0;
        }

        .rating-list .sin-list i {
            font-size: 12px;
            color: #707070;
        }

        .rating-list .sin-list span {
            color: #666;
        }

.ratings-wrapper {
    float: right;
    width: 100%;
    height: 95px;
    margin-bottom: 15px;
    padding: 15px;
    background-color: #f8efff;
    border-radius: 15px;
    text-align: right;
}

.sin-ratings {
    margin-bottom: 40px;
}

    .sin-ratings:last-child {
        margin-bottom: 0;
    }

    .sin-ratings .rating-author {
        float: left;
        width: 100%;
        margin-bottom: 10px;
    }

        .sin-ratings .rating-author h3 {
            font-size: 18px;
            font-weight: 500;
            line-height: 18px;
            float: left;
            margin: 0;
            margin-right: 0px;
            margin-right: 15px;
            color: var(--colorOriginal-light-Level1);
        }

        .sin-ratings .rating-author .rating-star i,
        .sin-ratings .rating-author .rating-star span {
            font-size: 12px;
            line-height: 18px;
            float: left;
            color: #707070;
        }

        .sin-ratings .rating-author .rating-star span {
            margin-left: 5px;
        }

    .sin-ratings p {
        font-size: 14px;
        font-weight: 500;
        text-align: justify;
        line-height: 24px;
        color: var(--colorOriginal-light-Level3);
    }

/*-- rating Form Wrap --*/

.rating-form-wrapper {
    float: left;
    width: 100%;
}

    .rating-form-wrapper h3 {
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
        margin: 0 0 30px;
        text-transform: uppercase;
    }

/*-- rating Form --*/

.rating-form h5 {
    font-size: 14px;
    line-height: 18px;
    float: left;
    margin-right: 10px;
}

.rating-form .rating-star i {
    font-size: 14px;
    line-height: 18px;
    display: block;
    float: left;
    margin-right: 3px;
}

    .rating-form .rating-star i:last-child {
        margin: 0;
    }

.rating-form label {
    font-size: 14px;
    display: block;
    margin-bottom: 3px;
}

.rating-form input {
    font-size: 13px;
    line-height: 24px;
    width: 100%;
    padding: 8px 15px;
    color: var(--colorOriginal-light-Level1);
    border-radius: 12px;
    border: 1px solid var(--colorOriginal-light-Level2);
    background-color: #f8efff;
}

    .rating-form input[type='submit'] {
        font-weight: 200;
        padding: 8px 30px;
        text-transform: uppercase;
        color: var(--colorOriginal-light-Level3);
        border-color: var(--colorOriginal-light-Level2);
        background-color: var(--colorOriginal-dark-Level2);
        font-size: 18px;
        border-radius: 12px;
    }

        .rating-form input[type='submit']:hover {
            color: var(--colorOriginal-light-Level2);
            border-color: var(--colorOriginal-light-Level3);
            background-color: var(--colorOriginal-dark-Level2);
        }

.rating-form textarea {
    font-size: 13px;
    line-height: 24px;
    width: 100%;
    height: 80px;
    padding: 8px 15px;
    resize: none;
    color: var(--colorOriginal-light-Level1);
    border-radius: 12px;
    border: 1px solid var(--colorOriginal-light-Level2);
    background-color: #f8efff;
}

/*=====  End of single product  ======*/

/*=============================================
=           Cart            =
=============================================*/

.cart-table {
    background-color: var(--colorOriginal-dark-Level2);
    -webkit-box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .1);
    box-shadow: -10px -8px 51px -1px rgba(0, 0, 0, 0.26);
    border-radius: 15px;
}

    .cart-table .table {
        margin: 0;
    }

        .cart-table .table thead {
            background-color: var(--colorOriginal-light-Level1);
        }

            .cart-table .table thead tr th {
                font-size: 16px;
                font-weight: 700;
                padding: 12px 20px;
                text-align: center;
                text-transform: uppercase;
                color: var(--colorOriginal-dark-Level1);
                border: none;
            }

        .cart-table .table tbody tr td {
            padding: 10px 24px;
            text-align: center;
            vertical-align: middle;
            border: none;
            border-bottom-color: currentcolor;
            border-bottom-style: none;
            border-bottom-width: medium;
            border-bottom: 1px solid var(--colorOriginal-light-Level2);
        }

.cart-table {
    margin-bottom: 40px;
}

    .cart-table th.pro-thumbnail,
    .cart-table td.pro-thumbnail {
        width: 160px;
        min-width: 120px;
        max-width: 160px;
    }

    .cart-table th.pro-title,
    .cart-table td.pro-title {
        min-width: 200px;
    }

    .cart-table td.pro-thumbnail a {
        display: block;
    }

        .cart-table td.pro-thumbnail a img {
            width: 100%;
            background-color: var(--colorOriginal-dark-Level2);
        }

    .cart-table td.pro-title a {
        font-size: 16px;
        font-weight: 200;
        color: var(--colorOriginal-light-Level3);
    }

        .cart-table td.pro-title a:hover {
            color: var(--colorOriginal-light-Level2);
        }

    .cart-table td.pro-price span {
        font-size: 18px;
        font-weight: 200;
        display: block;
        color: var(--colorOriginal-light-Level3);
    }

    .cart-table td.pro-quantity { /*----------  Additional cart quantity style will be placed here  ----------*/
    }

    .cart-table td.pro-subtotal span {
        font-size: 18px;
        font-weight: 200;
        display: block;
        color: var(--colorOriginal-light-Level3);
    }

    .cart-table td.pro-addtocart button {
        font-weight: 700;
        line-height: 24px;
        width: 140px;
        height: 36px;
        padding: 5px 20px;
        text-transform: capitalize;
        color: #292929;
        border: 1px solid #e33;
        border-radius: 0;
        background-color: #e33;
    }

    .cart-table td.pro-remove a {
        font-weight: 500;
        display: block;
        color: #707070;
    }

        .cart-table td.pro-remove a i {
            font-size: 40px;
            color: var(--colorOriginal-light-Level1);
        }

        .cart-table td.pro-remove a:hover {
            color: #f00;
        }
.Section-div-Card {
    background-color: var(--colorOriginal-dark-Level2);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0px 0px 3px var(--colorOriginal-dark-Level1);
}
/*-- Calculate Shipping --*/

.calculate-shipping {
    margin-bottom: 23px;
}

    .calculate-shipping h4 {
        font-size: 20px;
        font-weight: 700;
        line-height: 23px;
        margin-bottom: 30px;
        text-decoration: underline;
        text-transform: capitalize;
    }

    .calculate-shipping form .nice-select {
        line-height: 24px;
        width: 100%;
        height: 36px;
        margin-bottom: 25px;
        padding: 5px 20px;
        border: 1px solid #999;
        border-radius: 0;
        background-color: transparent;
    }

        .calculate-shipping form .nice-select::after {
            border-color: #707070;
        }

        .calculate-shipping form .nice-select .current {
            font-size: 14px;
            line-height: 24px;
            display: block;
            color: #707070;
        }

        .calculate-shipping form .nice-select .list {
            width: 100%;
        }

    .calculate-shipping form input {
        line-height: 24px;
        width: 100%;
        height: 36px;
        margin-bottom: 25px;
        padding: 5px 20px;
        color: #707070;
        border: 1px solid #999;
        border-radius: 0;
        background-color: transparent;
    }

        .calculate-shipping form input[type='submit'] {
            font-weight: 400;
            width: 140px;
            text-transform: uppercase;
            color: #fff;
            border-color: #292929;
            background-color: #292929;
        }

            .calculate-shipping form input[type='submit']:hover {
                border-color: #e33;
                background-color: #e33;
            }

/*-- Discount Coupon --*/

.discount-coupon h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    margin-bottom: 30px;
    text-decoration: underline;
    text-transform: capitalize;
}

.discount-coupon form input {
    line-height: 24px;
    width: 100%;
    height: 36px;
    margin-bottom: 25px;
    padding: 5px 20px;
    color: #707070;
    border: 1px solid #999;
    border-radius: 0;
    background-color: transparent;
}

    .discount-coupon form input[type='submit'] {
        font-weight: 400;
        width: 140px;
        text-transform: uppercase;
        color: #fff;
        border-color: #292929;
        background-color: #292929;
    }

        .discount-coupon form input[type='submit']:hover {
            border-color: #e33;
            background-color: #e33;
        }

/*-- Cart Summary --*/

.cart-summary {
    float: left;
    width: 100%;
    /*max-width: 410px;*/
    margin-right: auto;
}

    .cart-summary .cart-summary-wrap {
        margin-bottom: 20px;
        padding: 45px 50px;
        background-color: #fff;
        border: 2px solid black;
        border-radius: 15px;
    }

        .cart-summary .cart-summary-wrap h4 {
            font-size: 20px;
            font-weight: 700;
            line-height: 23px;
            margin-bottom: 30px;
            text-decoration: underline;
            text-transform: capitalize;
            color: var(--colorOriginal-light-Level1);
        }

.checkout-payment-method h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    margin-bottom: 30px;
    text-decoration: underline;
    text-transform: capitalize;
    color: var(--colorOriginal-light-Level3);
}
.colorTextLabel {
    color: var(--colorOriginal-dark-Level1);
}
.cart-summary .cart-summary-wrap p {
    font-size: 18px;
    font-weight: 500;
    line-height: 23px;
    color: #000;
}

    .cart-summary .cart-summary-wrap p span {
        float: right;
    }

.cart-summary .cart-summary-wrap h2 {
    font-size: 24px;
    font-weight: 200;
    line-height: 23px;
    margin: 0;
    padding-top: 40px;
    color: #008815;
    border-top: 1px solid #828282;
}

    .cart-summary .cart-summary-wrap h2 span {
        float: right;
    }

.cart-summary .cart-summary-button {
    overflow: hidden;
    width: 100%;
    text-align: end;
}

    .cart-summary .cart-summary-button a {
        line-height: 24px;
        float: left;
        width: 250px;
        height: 36px;
        margin-top: 0px;
        margin-left: 20px;
        padding: 5px 20px;
        color: #707070;
        border: 1px solid #999;
        border-top-color: rgb(153, 153, 153);
        border-right-color: rgb(153, 153, 153);
        border-bottom-color: rgb(153, 153, 153);
        border-left-color: rgb(153, 153, 153);
        border-radius: 0;
        background-color: transparent;
    }

        .cart-summary .cart-summary-button a:last-child {
            margin-left: 0;
        }

        .cart-summary .cart-summary-button a:hover {
            color: var(--colorOriginal-light-Level3);
            border-color: var(--colorOriginal-light-Level1);
            background-color: var(--colorOriginal-dark-Level2);
        }

        .cart-summary .cart-summary-button a.checkout-btn {
            font-weight: 200;
            text-transform: uppercase;
            color: var(--colorOriginal-dark-Level2);
            border-color: var(--colorOriginal-light-Level2);
            background-color: var(--colorOriginal-dark-Level1);
            text-align: center;
            border-radius: 6px;
        }

.checkout-btn {
    font-weight: 200;
    text-transform: uppercase;
    color: var(--colorOriginal-dark-Level2);
    border-color: var(--colorOriginal-light-Level1);
    background-color: var(--colorOriginal-light-Level2);
    text-align: center;
    width: 30%;
    font-size: 18px;
}
    .checkout-btn:hover {
        color: var(--colorOriginal-light-Level2);
        border-color: var(--colorOriginal-light-Level1);
        background-color: var(--colorOriginal-dark-Level2);
    }

.cart-summary .cart-summary-button a.checkout-btn:hover {
    color: var(--colorOriginal-light-Level3);
    border-color: var(--colorOriginal-light-Level1);
    background-color: var(--colorOriginal-dark-Level2);
}

/*=====  End of Cart  ======*/

/*=============================================
=            Checkout            =
=============================================*/

/*-- Checkout Title --*/

.checkout-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 23px;
    margin-bottom: 30px;
    text-decoration: underline;
    text-transform: capitalize;
}

/*-- Checkout Form --*/

.checkout-form label {
    font-size: 14px;
    font-weight: 500;
    display: block;
    margin-bottom: 12px;
    text-transform: capitalize;
}

.checkout-form .nice-select {
    font-size: 14px;
    line-height: 23px;
    width: 100%;
    height: 45px;
    margin-bottom: 15px;
    padding: 10px 20px;
    color: #707070;
    border: 1px solid #999;
    border-radius: 0;
    background-color: #fff;
}

    .checkout-form .nice-select::after {
        right: 20px;
        width: 6px;
        height: 6px;
        border-width: 1px;
        border-color: #707070;
    }

    .checkout-form .nice-select .current {
        line-height: 23px;
        display: block;
        color: #707070;
    }

    .checkout-form .nice-select .list {
        width: 100%;
    }

.checkout-form input {
    font-size: 14px;
    line-height: 23px;
    width: 100%;
    margin-bottom: 15px;
    padding: 10px 20px;
    color: #707070;
    border: 1px solid #999;
    border-radius: 0;
    background-color: #fff;
}

    .checkout-form input[type='checkbox'] {
        width: auto;
    }

.checkout-form .check-box {
    float: left;
    margin-right: 70px;
}

    .checkout-form .check-box:last-child {
        margin-right: 0;
    }

    .checkout-form .check-box input[type='checkbox'] {
        display: none;
    }

        .checkout-form .check-box input[type='checkbox'] + label {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            position: relative;
            margin: 0;
            padding-left: 30px;
            color: #292929;
        }

            .checkout-form .check-box input[type='checkbox'] + label::before {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 20px;
                height: 20px;
                content: '';
                -webkit-transition: all .3s ease 0s;
                transition: all .3s ease 0s;
                border: 2px solid #999;
            }

            .checkout-form .check-box input[type='checkbox'] + label::after {
                font-family: Fontawesome;
                font-size: 12px;
                line-height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 20px;
                content: '\f00c';
                -webkit-transition: all .3s ease 0s;
                transition: all .3s ease 0s;
                text-align: center;
                opacity: 0;
                color: #292929;
            }

        .checkout-form .check-box input[type='checkbox']:checked + label::before {
            border: 2px solid #292929;
        }

        .checkout-form .check-box input[type='checkbox']:checked + label::after {
            opacity: 1;
        }

/*-- Shipping Form --*/

#shipping-form {
    display: none;
    margin-bottom: 40px;
}

#billing-form {
    margin-bottom: 40px;
}

/*-- Checkout Cart Total --*/

.checkout-cart-total {
    margin-bottom: 40px;
    padding: 45px;
    background-color: #f2f2f2;
}

    .checkout-cart-total h4 {
        font-weight: 700;
        line-height: 23px;
        -webkit-flex-basis: 18px;
        -ms-flex-preferred-size: 18px;
        flex-basis: 18px;
    }

        .checkout-cart-total h4:first-child {
            margin-top: 0;
            margin-bottom: 25px;
        }

        .checkout-cart-total h4:last-child {
            margin-top: 15px;
            margin-bottom: 0;
        }

        .checkout-cart-total h4 span {
            display: block;
            float: right;
        }

    .checkout-cart-total ul {
        border-bottom: 1px solid #999;
    }

        .checkout-cart-total ul li {
            font-size: 14px;
            font-weight: 500;
            line-height: 23px;
            display: block;
            margin-bottom: 16px;
            color: #707070;
        }

            .checkout-cart-total ul li span {
                float: right;
                color: #292929;
            }

    .checkout-cart-total p {
        font-size: 14px;
        font-weight: 600;
        line-height: 30px;
        margin: 0;
        padding: 10px 0;
        color: #505050;
        border-bottom: 1px solid #999;
    }

        .checkout-cart-total p span {
            float: right;
        }

/*-- Checkout Payment Method --*/

.checkout-payment-method {
    padding: 45px;
    background-color: #fff;
    border: 1px solid black;
    border-radius: 15px;
}

/*-- Single Payment Method --*/

.single-method {
    margin-bottom: 20px;
}

    .single-method:last-child {
        margin-bottom: 0;
    }

    .single-method input[type='radio'] {
        display: none;
    }

        .single-method input[type='radio'] + label {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            position: relative;
            margin: 0;
            padding-left: 30px;
            color: #292929;
        }

            .single-method input[type='radio'] + label::before {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 20px;
                height: 20px;
                content: '';
                -webkit-transition: all .3s ease 0s;
                transition: all .3s ease 0s;
                border: 2px solid #999;
            }

            .single-method input[type='radio'] + label::after {
                position: absolute;
                top: 5px;
                left: 5px;
                display: block;
                width: 10px;
                height: 10px;
                content: '';
                -webkit-transition: all .3s ease 0s;
                transition: all .3s ease 0s;
                text-align: center;
                opacity: 0;
                background-color: #292929;
            }

        .single-method input[type='radio']:checked + label::before {
            border: 2px solid #292929;
        }

        .single-method input[type='radio']:checked + label::after {
            opacity: 1;
        }

    .single-method input[type='checkbox'] {
        display: none;
    }

        .single-method input[type='checkbox'] + label {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            position: relative;
            margin: 0;
            padding-left: 30px;
            color: #707070;
        }

            .single-method input[type='checkbox'] + label::before {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 16px;
                height: 16px;
                content: '';
                -webkit-transition: all .3s ease 0s;
                transition: all .3s ease 0s;
                border: 2px solid #999;
            }

            .single-method input[type='checkbox'] + label::after {
                position: absolute;
                top: 4px;
                left: 4px;
                display: block;
                width: 8px;
                height: 8px;
                content: '';
                -webkit-transition: all .3s ease 0s;
                transition: all .3s ease 0s;
                text-align: center;
                opacity: 0;
                background-color: #292929;
            }

        .single-method input[type='checkbox']:checked + label::before {
            border: 2px solid #292929;
        }

        .single-method input[type='checkbox']:checked + label::after {
            opacity: 1;
        }

    .single-method p {
        font-size: 14px;
        line-height: 23px;
        display: none;
        margin-top: 8px;
        color: #707070;
    }

/*-- Place Order --*/

.place-order {
    font-weight: 400;
    line-height: 24px;
    float: left;
    width: 140px;
    height: 36px;
    margin-top: 40px;
    padding: 6px 20px;
    text-transform: uppercase;
    color: #fff;
    border: none;
    background-color: #292929;
}

    .place-order:hover {
        background-color: #e33;
    }

/*=====  End of Checkout  ======*/

/*=============================================
=           My Account            =
=============================================*/

.myaccount-tab-menu {
    flex-direction: column;
    background-color: #fff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
}

    .myaccount-tab-menu a {
        font-size: 12px;
        font-weight: 500;
        display: block;
        padding: 15px 15px 13px;
        text-transform: uppercase;
        color: #707070;
        border: 1px solid #eee;
        border-bottom: none;
    }

        .myaccount-tab-menu a:last-child {
            border-bottom: 1px solid #eee;
        }

        .myaccount-tab-menu a:hover,
        .myaccount-tab-menu a.active {
            color: #fff;
            background-color: #e33;
        }

        .myaccount-tab-menu a i {
            font-size: 14px;
            width: 25px;
            text-align: center;
        }

/*-- My Account Content -*/

.myaccount-content {
    font-size: 14px;
    padding: 30px;
    border: 1px solid #eee;
    background-color: #fff;
}

    .myaccount-content h3 {
        margin-bottom: 25px;
        padding-bottom: 10px;
        border-bottom: 1px dashed #eee;
    }

    .myaccount-content .welcome a {
        color: #000;
    }

        .myaccount-content .welcome a:hover {
            color: #e33;
        }

    .myaccount-content .welcome strong {
        font-weight: 600;
    }

    .myaccount-content a.edit-address-btn {
        font-size: 14px;
        font-weight: 400;
        padding: 10px 20px;
        text-transform: uppercase;
        color: #fff;
        border: none;
        border-color: #292929;
        border-radius: 3px;
        background: none;
        background-color: #292929;
    }

        .myaccount-content a.edit-address-btn i {
            padding-right: 5px;
        }

        .myaccount-content a.edit-address-btn:hover {
            background-color: #e33;
        }

    .myaccount-content button.save-change-btn {
        font-weight: 400;
        width: 140px;
        padding: 10px 0;
        text-transform: uppercase;
        color: #fff;
        border: none;
        border-color: #292929;
        border-radius: 3px;
        background: none;
        background-color: #292929;
    }

        .myaccount-content button.save-change-btn:hover {
            background-color: #e33;
        }

/*-- My Account Table -*/

.myaccount-table {
    font-size: 15px;
    white-space: nowrap;
}

    .myaccount-table table th,
    .myaccount-table .table th {
        padding: 10px;
    }

    .myaccount-table table td,
    .myaccount-table .table td {
        padding: 20px 10px;
        vertical-align: middle;
    }

        .myaccount-table table td a:hover,
        .myaccount-table .table td a:hover {
            color: #e33;
        }

.saved-message {
    font-size: 13px;
    font-weight: 600;
    padding: 20px;
    border-top: 3px solid #e33;
    border-radius: 5px 5px 0 0;
}

/*-- My Account Details Form -*/

.account-details-form h4 {
    margin: 0;
}

.account-details-form input {
    line-height: 24px;
    display: block;
    width: 100%;
    margin-bottom: 30px;
    padding: 11px 25px;
    color: #656565;
    border: 1px solid #ebebeb;
    border-radius: 0;
}

/*=====  End of My Account  ======*/

/*=============================================
=            Login Register            =
=============================================*/

/*-- Login Title --*/

.login-title {
    font-size: 36px;
    font-weight: 200;
    line-height: 20px;
    margin-bottom: 18px;
    /*text-decoration: underline;*/
    text-transform: capitalize;
    text-align: center;
    color: var(--colorOriginal-dark-Level1);
}

/*-- Login Form --*/

.login-form {
   /* background-color: var(--colorOriginal-light-Level1);*/
}

    .login-form label {
        font-size: 14px;
        font-weight: 500;
        display: block;
        margin-bottom: 12px;
        text-transform: capitalize;
        color: var(--colorOriginal-dark-Level1);
    }

    .login-form .nice-select {
        font-size: 14px;
        line-height: 23px;
        width: 100%;
        height: 45px;
        margin-bottom: 20px;
        margin-bottom: 15px;
        padding: 10px 20px;
        color: #707070;
        border: 1px solid #999;
        border-radius: 0;
        background-color: transparent;
    }

        .login-form .nice-select::after {
            right: 20px;
            width: 6px;
            height: 6px;
            border-width: 1px;
            border-color: #707070;
        }

        .login-form .nice-select .current {
            line-height: 23px;
            display: block;
            color: #707070;
        }

        .login-form .nice-select .list {
            width: 100%;
        }

    .login-form input {
        font-size: 18px;
        line-height: 23px;
        width: 70%;
        margin-bottom: 15px;
        padding: 10px 20px;
        color: var(--colorOriginal-light-Level3);
        border: 1px solid var(--colorOriginal-dark-Level1);
        border-radius: 8px;
        background-color: var(--colorOriginal-dark-Level2);
    }
/*        .login-form input[class |= "Placeholderlogint"]::placeholder {
            color: white;
            font-weight: 700;
            font-style: italic;
            text-align: center;
        }*/
.Placeholderlogint::-webkit-input-placeholder {
    color: black !important;
}

.Placeholderlogint:-moz-placeholder {
    color: black !important;
}

.Placeholderlogint::-moz-placeholder {
    color: black !important;
}

.Placeholderlogint:-ms-input-placeholder {
    color: black !important;
}
.login-form input::-moz-placeholder {
    color: black !important;
}
        .login-form input[type='checkbox'] {
            width: auto;
        }

    .login-form .check-box {
        float: left;
        margin-right: 70px;
    }

        .login-form .check-box:last-child {
            margin-right: 0;
        }

        .login-form .check-box input[type='checkbox'] {
            display: none;
        }

            .login-form .check-box input[type='checkbox'] + label {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
                position: relative;
                margin: 0;
                padding-left: 30px;
                color: #292929;
            }

                .login-form .check-box input[type='checkbox'] + label::before {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 20px;
                    height: 20px;
                    content: '';
                    -webkit-transition: all .3s ease 0s;
                    transition: all .3s ease 0s;
                    border: 2px solid #999;
                }

                .login-form .check-box input[type='checkbox'] + label::after {
                    font-family: Fontawesome;
                    font-size: 12px;
                    line-height: 20px;
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 20px;
                    content: '\f00c';
                    -webkit-transition: all .3s ease 0s;
                    transition: all .3s ease 0s;
                    text-align: center;
                    opacity: 0;
                    color: #292929;
                }

            .login-form .check-box input[type='checkbox']:checked + label::before {
                border: 2px solid #292929;
            }

            .login-form .check-box input[type='checkbox']:checked + label::after {
                opacity: 1;
            }

/*-- Place Order --*/

.register-button {
    font-weight: 200;
    line-height: 0px;
    width: 55%;
    height: 40px;
    margin-top: 15px;
    text-transform: uppercase;
    color: var(--colorOriginal-dark-Level2);
    border: 1px solid;
    border-color: var(--colorOriginal-dark-Level1);
    background-color: var(--colorOriginal-light-Level1);
    border-radius: 8px;
    font-size: 22px;
}
.registertextLast {
    width: 40%;
    color: var(--colorOriginal-light-Level3);
    font-size: 14px;
}
.registertextLast a{ 
    color: royalblue;
}

    .register-button:hover {
        background-color: var(--colorOriginal-dark-Level2);
        border-color: var(--colorOriginal-light-Level2);
        color: var(--colorOriginal-light-Level2);
    }

.forget-pass-link:hover {
    color: var(--colorOriginal-light-Level2);
}

/*=====  End of Login Register  ======*/

/*=============================================
=           FAQ            =
=============================================*/

.faq-wrapper .panel.panel-default {
    margin-bottom: 20px;
    border: 1px solid #ebebeb;
}

.faq-wrapper .card,
.faq-wrapper .card-header {
    border-radius: 0;
}

.faq-wrapper .card {
    margin-bottom: 15px;
}

    .faq-wrapper .card:last-child {
        margin-bottom: 0;
    }

.faq-wrapper .card-header {
    padding: 0;
    border-bottom: 0;
    background-color: #e9e9e9;
}

    .faq-wrapper .card-header h5 button {
        font-weight: 500;
        position: relative;
        width: 100%;
        padding: 10px 20px;
        text-align: left;
        white-space: normal;
        color: #333;
        overflow-wrap: break-word;
    }

        .faq-wrapper .card-header h5 button span {
            position: absolute;
            top: 50%;
            right: 10px;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }

            .faq-wrapper .card-header h5 button span i.fa {
                font-size: 12px;
                display: none;
                visibility: hidden;
                opacity: 0;
            }

        .faq-wrapper .card-header h5 button:hover,
        .faq-wrapper .card-header h5 button:focus {
            text-decoration: none;
        }

        .faq-wrapper .card-header h5 button[aria-expanded='true'] {
            color: #fff;
            border-radius: 0;
            background-color: #e33;
        }

            .faq-wrapper .card-header h5 button[aria-expanded='true'] span i.fa.fa-chevron-down {
                display: inline;
                visibility: visible;
                opacity: 1;
            }

        .faq-wrapper .card-header h5 button[aria-expanded='false'] span i.fa.fa-chevron-up {
            display: inline;
            visibility: visible;
            opacity: 1;
        }

.faq-wrapper .card-body p {
    font-size: 14px;
    line-height: 24px;
}

/*=====  End of FAQ  ======*/

/*=============================================
=           Compare            =
=============================================*/

/*-- Compare Table --*/

.compare-table {
    background-color: #fff;
    -webkit-box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .1);
}

    .compare-table .table tbody tr:first-child {
        border-top: 1px solid #eee;
    }

    .compare-table .table tbody tr td {
        padding: 25px 30px;
        text-align: center;
        vertical-align: middle;
        border: none;
        border-bottom: 1px solid #eee;
        border-left: 1px solid #eee;
    }

        .compare-table .table tbody tr td:last-child {
            border-right: 1px solid #eee;
        }

        .compare-table .table tbody tr td.first-column {
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
            min-width: 180px;
            margin: 0;
            color: #292929;
        }

        .compare-table .table tbody tr td.product-image-title {
            padding-top: 50px;
        }

            .compare-table .table tbody tr td.product-image-title .image {
                clear: both;
                width: 100%;
                margin-bottom: 40px;
            }

                .compare-table .table tbody tr td.product-image-title .image img {
                    max-width: 100%;
                }

            .compare-table .table tbody tr td.product-image-title .category {
                font-size: 13px;
                line-height: 15px;
                display: block;
                margin-bottom: 10px;
                letter-spacing: .5px;
                text-transform: capitalize;
                color: #707070;
            }

                .compare-table .table tbody tr td.product-image-title .category:hover {
                    color: #e33;
                }

            .compare-table .table tbody tr td.product-image-title .title {
                font-size: 15px;
                font-weight: 500;
                line-height: 20px;
                margin-bottom: 10px;
                color: #292929;
            }

                .compare-table .table tbody tr td.product-image-title .title:hover {
                    color: #e33;
                }

        .compare-table .table tbody tr td.pro-desc p {
            margin: 0;
            text-align: left;
        }

        .compare-table .table tbody tr td.pro-price {
            font-size: 16px;
            font-weight: 500;
            color: #707070;
        }

        .compare-table .table tbody tr td.pro-color {
            font-size: 16px;
            font-weight: 500;
            color: #707070;
        }

        .compare-table .table tbody tr td.pro-stock {
            font-size: 16px;
            font-weight: 500;
            color: #707070;
        }

        .compare-table .table tbody tr td.pro-addtocart .add-to-cart {
            position: relative;
            display: inline-block;
            width: 170px;
            padding: 10px 25px 10px 25px;
            color: #fff;
            background-color: #292929;
        }

            .compare-table .table tbody tr td.pro-addtocart .add-to-cart i.fa {
                padding-right: 10px;
            }

            .compare-table .table tbody tr td.pro-addtocart .add-to-cart span {
                font-size: 13px;
                font-weight: 500;
                line-height: 21px;
                overflow: hidden;
                text-align: center;
                text-transform: uppercase;
            }

            .compare-table .table tbody tr td.pro-addtocart .add-to-cart:hover {
                background-color: #e33;
            }

        .compare-table .table tbody tr td.pro-remove button {
            padding: 0;
            border: none;
            background-color: transparent;
        }

            .compare-table .table tbody tr td.pro-remove button i {
                font-size: 20px;
            }

            .compare-table .table tbody tr td.pro-remove button:hover {
                color: red;
            }

        .compare-table .table tbody tr td.pro-ratting i {
            font-size: 14px;
            color: #707070;
        }

/*=====  End of Compare  ======*/

/*=============================================
=           Contact             =
=============================================*/

#google-map {
    height: 400px;
    margin-bottom: 40px;
}

h3.contact-page-title {
    font-size: 25px;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 25px;
    color: #292929;
}

.single-contact-block {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

    .single-contact-block:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0;
    }

    .single-contact-block h4 {
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
        color: #222;
    }

        .single-contact-block h4 img {
            margin: 5px 20px 20px 0;
        }

    .single-contact-block p {
        font-size: 14px;
        line-height: 29px;
        margin-bottom: 0;
        color: #666;
    }

span.required {
    color: red;
}

/*----------  contact form  ----------*/

.contact-form-content .form-messege {
    display: none;
}

    .contact-form-content .form-messege.success,
    .contact-form-content .form-messege.error {
        display: block;
        margin-top: 15px;
    }

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    font-size: 12px;
    font-weight: 400;
    line-height: 29px;
    display: block;
    margin-bottom: 0;
    color: #888;
}

.contact-form input {
    line-height: 50px;
    width: 100%;
    height: 50px;
    padding-left: 20px;
    border: 1px solid #e0e0e0;
    outline: none;
    background-color: #fff;
}

.contact-form textarea {
    line-height: 50px;
    width: 100%;
    height: 200px;
    padding-left: 20px;
    border: 1px solid #e0e0e0;
    outline: none;
    background-color: #fff;
}

/*----------  contact page side content  ----------*/

.contact-page-side-content {
    padding: 30px;
    background-color: #f2f2f2;
}

.contact-page-message {
    line-height: 20px;
}

.contact-button {
    font-weight: 400;
    width: 140px;
    padding: 10px 20px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #292929;
    border-color: #292929;
    background-color: #292929;
}

    .contact-button:hover {
        border-color: #e33;
        background-color: #e33;
    }

/*=====  End of Contact   ======*/

/*=============================================
=            About            =
=============================================*/

.about-top-content-wrapper {
    margin-bottom: 50px;
}

.single-banner {
    margin-bottom: 15px;
}

/*-- About Image --*/

.about-image img {
    width: 100%;
}

/*-- About Content --*/

.about-content h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 23px;
    text-transform: uppercase;
}

    .about-content h1 span {
        color: #e33;
    }

.about-content h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 14px;
}

.about-content p {
    font-size: 12px;
    line-height: 20px;
}

/*-- About Mission Vission Goal --*/

.about-mission-vission-goal {
    margin-bottom: 30px;
}

    .about-mission-vission-goal h3 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .about-mission-vission-goal p {
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 20px;
    }

/*-- About Section Title --*/

.about-section-title {
    margin-bottom: 30px;
}

    .about-section-title h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 23px;
    }

    .about-section-title p {
        font-size: 12px;
        line-height: 20px;
        max-width: 600px;
    }

/*-- About Feature --*/

.about-feature h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.about-feature p {
    font-size: 12px;
    line-height: 20px;
    max-width: 265px;
}

/*-- About Feature Banner --*/

.about-feature-banner .banner {
    margin-left: 70px;
}

/*-- Feature Content --*/

.feature-content h2 {
    font-size: 30px;
    max-width: 470px;
    margin-bottom: 0;
}

    .feature-content h2 span {
        font-weight: 700;
    }

.feature-content h1 {
    font-size: 36px;
    max-width: 470px;
}

    .feature-content h1 span {
        font-weight: 700;
    }

.feature-content p {
    line-height: 23px;
    max-width: 520px;
    margin-top: 30px;
    margin-bottom: 0;
}

/*-- Feature Image --*/

.feature-image {
    position: relative;
    z-index: 2;
}

    .feature-image::before {
        position: absolute;
        z-index: -1;
        right: 0;
        bottom: -40px;
        width: 380px;
        height: 360px;
        content: '';
        background-color: #fff;
    }

    .feature-image img {
        width: 100%;
        margin-left: -40px;
    }

.about-feature p {
    margin-bottom: 15px;
}

/*=====  End of About  ======*/

/*=============================================
=            Blog            =
=============================================*/

.single-blog-post {
    margin-bottom: 50px;
}

.single-blog-post__image {
    position: relative;
}

    .single-blog-post__image a {
        display: block;
        width: 100%;
    }

        .single-blog-post__image a img {
            width: 100%;
            height: 310px;
        }

        .single-blog-post__image a:hover img {
            opacity: .85;
        }

    .single-blog-post__image .slick-arrow {
        line-height: 40px;
        position: absolute;
        z-index: 9;
        top: 50%;
        visibility: hidden;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        text-align: center;
        opacity: 0;
        color: #fff;
        border: none;
        border-radius: 50%;
        background: none;
        background-color: #323232;
    }

    .single-blog-post__image .slick-next {
        right: 30px;
        left: auto;
    }

    .single-blog-post__image .slick-prev {
        right: auto;
        left: 30px;
    }

.single-blog-post:hover .slick-arrow {
    visibility: visible;
    opacity: .6;
}

    .single-blog-post:hover .slick-arrow:hover {
        opacity: 1;
    }

.single-blog-post:hover .slick-next {
    right: 10px;
}

.single-blog-post:hover .slick-prev {
    left: 10px;
}

.single-blog-post__date-sticker {
    position: absolute;
    top: 20px;
    right: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    width: 62px;
    height: 70px;
    text-align: center;
    background: #fff;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

    .single-blog-post__date-sticker span {
        display: block;
    }

        .single-blog-post__date-sticker span.month {
            font-weight: 500;
            line-height: 12px;
            margin-bottom: 10px;
            color: #929292;
        }

        .single-blog-post__date-sticker span.day {
            font-size: 20px;
            font-weight: 700;
            line-height: 20px;
            color: #292929;
        }

.single-blog-post__content .title {
    color: var(--colorOriginal-light-Level1);
    font-size: 14px;
    line-height: 1;
    line-height: 18px;
    margin-top: 20px;
    margin-bottom: 15px;
}

    .single-blog-post__content .title a:hover {
        color: var(--colorOriginal-light-Level3);
    }

.single-blog-post__content .post-meta {
    font-weight: 400;
    line-height: 17px;
    margin-bottom: 10px;
    color: #9d9d9d;
}

    .single-blog-post__content .post-meta a {
        padding-left: 5px;
        color: var(--colorOriginal-light-Level3);
    }

    .single-blog-post__content .post-meta .date {
        color: var(--colorOriginal-light-Level3);
    }

    .single-blog-post__content .post-meta .separator {
        padding: 0 5px;
    }

.single-blog-post__content .short-desc {
    line-height: 24px;
    margin-bottom: 0;
}

.single-blog-post__content .blog-post-link {
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    margin-top: 10px;
    color: var(--colorOriginal-light-Level1);
    border-bottom: 2px solid #e8e8e8;
}

    .single-blog-post__content .blog-post-link:hover {
        color: var(--colorOriginal-light-Level2);
    }

/*----------  single block  ----------*/

.block-container {
    margin-top: -5px;
    margin-bottom: -15px;
}

.single-block {
    margin-bottom: 15px;
}

    .single-block:first-child {
        padding-top: 0;
    }

    .single-block:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .single-block .image {
        margin-right: 5px;
        -webkit-flex-basis: 100px;
        -ms-flex-preferred-size: 100px;
        flex-basis: 100px;
    }

        .single-block .image a {
            display: block;
            border: 2px solid transparent;
        }

            .single-block .image a img {
                width: 100%;
            }

            .single-block .image a:hover {
                border: 2px solid var(--colorOriginal-light-Level1);
            }

    .single-block .content {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

        .single-block .content p {
            font-size: 12px;
            font-weight: 500;
            line-height: 15px;
            margin-bottom: 0;
            color: #292929;
        }

            .single-block .content p a:hover {
                color: #e33;
            }

            .single-block .content p span {
                font-size: 10px;
                font-weight: 400;
                line-height: 16px;
                display: block;
                margin-top: 5px;
                color: var(--colorOriginal-light-Level1);
            }

    .single-block.comment-block .image {
        border: 1px solid #eee;
        -webkit-flex-basis: 80px;
        -ms-flex-preferred-size: 80px;
        flex-basis: 80px;
    }

    .single-block.comment-block .content p span {
        font-size: 12px;
        line-height: 15px;
        margin-bottom: 5px;
        color: #666;
    }

    .single-block.comment-block .content p a {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #808080;
    }

        .single-block.comment-block .content p a:hover {
            color: #e33;
        }

/*----------  single blog post  ----------*/

.blog-single-post-container {
    margin-bottom: 30px;
    padding: 35px 25px;
    border: 3px solid var(--colorOriginal-light-Level1);
    background-color: var(--colorOriginal-dark-Level2);
    border-radius: 30px;
}

    .blog-single-post-container h3.post-title {
        font-size: 30px;
        font-weight: 500;
        line-height: 40px;
        margin-bottom: 20px;
        text-align: center;
        color: var(--colorOriginal-light-Level1);
    }

    .blog-single-post-container .post-meta {
        margin-bottom: 20px;
        padding-bottom: 15px;
        text-align: center;
    }

        .blog-single-post-container .post-meta p span {
            color: #999;
        }

        .blog-single-post-container .post-meta p a {
            font-weight: 400;
            color: #323232;
        }

            .blog-single-post-container .post-meta p a:hover {
                color: #e33;
            }

        .blog-single-post-container .post-meta p span.separator {
            padding: 0 5px;
        }

    .blog-single-post-container .single-blog-post-media {
        position: relative;
        margin-bottom: 50px;
    }

        .blog-single-post-container .single-blog-post-media .image img {
            width: 100%;
        }

        .blog-single-post-container .single-blog-post-media .blog-image-gallery .single-image img {
            width: 100%;
        }

        .blog-single-post-container .single-blog-post-media .blog-categories {
            position: absolute;
            bottom: 20px;
            left: 10px;
        }

            .blog-single-post-container .single-blog-post-media .blog-categories ul li {
                display: inline-block;
            }

                .blog-single-post-container .single-blog-post-media .blog-categories ul li a {
                    display: block;
                    margin-right: 5px;
                    padding: 5px 10px;
                    text-transform: capitalize;
                    border-radius: 3px;
                    background-color: #fff;
                }

                    .blog-single-post-container .single-blog-post-media .blog-categories ul li a:hover {
                        color: #fff;
                        background-color: #e33;
                    }

        .blog-single-post-container .single-blog-post-media .video {
            overflow: hidden;
        }

            .blog-single-post-container .single-blog-post-media .video iframe {
                width: 100%;
                height: 500px;
            }

    .blog-single-post-container .post-audio {
        overflow: hidden;
        margin-bottom: 50px;
    }

        .blog-single-post-container .post-audio iframe {
            width: 100%;
            height: 100px;
        }

    .blog-single-post-container .post-content {
        margin-bottom: 30px;
        color: var(--colorOriginal-light-Level3);
    }

        .blog-single-post-container .post-content p {
            line-height: 20px;
        }
        .blog-single-post-container .post-content img {
            width: -moz-available !important;
            width: -webkit-fill-available !important;
        }

        .blog-single-post-container .post-content blockquote {
            font-size: 12px;
            font-style: italic;
            line-height: 26px;
            margin: 40px 0 40px 40px;
            padding: 30px 45px;
            border: 1px solid #e0e0e0;
            border-left: 5px solid #e33;
            background: #f6f6f6;
        }

    .blog-single-post-container .tag-area {
        margin-bottom: 30px;
        padding: 10px 0;
        border-top: 1px solid var(--colorOriginal-light-Level2);
        border-bottom: 1px solid var(--colorOriginal-light-Level2);
    }

        .blog-single-post-container .tag-area span {
            color: #999;
        }

        .blog-single-post-container .tag-area ul {
            display: inline-block;
        }

            .blog-single-post-container .tag-area ul li {
                display: inline-block;
            }

                .blog-single-post-container .tag-area ul li a {
                    font-size: 12px;
                    font-weight: 500;
                    font-style: italic;
                    color: var(--colorOriginal-light-Level1);
                }

                    .blog-single-post-container .tag-area ul li a:hover {
                        color: var(--colorOriginal-light-Level3);
                    }

    .blog-single-post-container .social-share-buttons {
        margin-bottom: 30px;
        text-align: center;
    }

        .blog-single-post-container .social-share-buttons h3 {
            font-size: 12px;
            font-weight: 500;
            line-height: 26px;
            width: auto;
            margin: 0 20px;
            margin-bottom: 15px;
            text-transform: uppercase;
            color: #8c8c8c;
            background: none;
        }

        .blog-single-post-container .social-share-buttons ul li {
            display: inline-block;
        }

            .blog-single-post-container .social-share-buttons ul li a {
                font-size: 12px;
                line-height: 32px;
                display: inline-block;
                width: 32px;
                height: 32px;
                margin-right: 10px;
                text-align: center;
                color: #353535;
                border-radius: 100%;
                background: #f7f7f7;
            }

                .blog-single-post-container .social-share-buttons ul li a:hover {
                    border-color: transparent;
                }

    .blog-single-post-container .related-post-container {
        margin-bottom: -30px;
    }

        .blog-single-post-container .related-post-container h3.related-post-title {
            font-size: 18px;
            font-weight: 500;
            line-height: 24px;
            margin-bottom: 15px;
            color: #292929;
        }

        .blog-single-post-container .related-post-container .single-related-post .image {
            margin-bottom: 15px;
        }

            .blog-single-post-container .related-post-container .single-related-post .image a {
                display: block;
                width: 100%;
            }

                .blog-single-post-container .related-post-container .single-related-post .image a img {
                    width: 100%;
                }

        .blog-single-post-container .related-post-container .single-related-post .content h3.related-post-title {
            font-size: 14px;
            font-weight: 500;
            line-height: 23px;
        }

            .blog-single-post-container .related-post-container .single-related-post .content h3.related-post-title a:hover {
                color: #e33;
            }

            .blog-single-post-container .related-post-container .single-related-post .content h3.related-post-title span {
                font-size: 12px;
                font-weight: 400;
                line-height: 15px;
                display: block;
                margin-top: 5px;
                color: #999;
            }

/*----------  single blog post media  ----------*/

.single-blog-post-media {
    position: relative;
}

    .single-blog-post-media:hover .slick-arrow {
        visibility: visible;
        opacity: .6;
    }

        .single-blog-post-media:hover .slick-arrow:hover {
            opacity: 1;
        }

    .single-blog-post-media:hover .slick-next {
        right: 10px;
    }

    .single-blog-post-media:hover .slick-prev {
        left: 10px;
    }

    .single-blog-post-media .slick-arrow {
        line-height: 40px;
        position: absolute;
        z-index: 9;
        top: 50%;
        visibility: hidden;
        width: 40px;
        height: 40px;
        margin-top: -20px;
        opacity: 0;
        color: #fff;
        border: none;
        border-radius: 50%;
        background: none;
        background-color: #323232;
    }

    .single-blog-post-media .slick-next {
        right: 30px;
        left: auto;
    }

    .single-blog-post-media .slick-prev {
        right: auto;
        left: 30px;
    }

/*----------  comment container  ----------*/

h3.comment-counter {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}

.comment-container {
    margin-bottom: 30px;
}

    .comment-container .single-comment {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        margin: 0 0 30px;
        padding: 30px;
        border: 1px solid #e0e0e0;
        background-color: #fff;
        -webkit-box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .1);
    }

        .comment-container .single-comment.reply-comment {
            width: 90%;
            margin-left: 10%;
        }

        .comment-container .single-comment:last-child {
            margin-bottom: 0;
        }

        .comment-container .single-comment span.reply-btn {
            position: absolute;
            top: 30px;
            right: 30px;
        }

            .comment-container .single-comment span.reply-btn a {
                font-size: 12px;
                font-weight: 500;
                display: inline-block;
                padding: 5px 15px;
                color: #e33;
                border: 1px solid #e33;
                border-radius: 50px;
            }

                .comment-container .single-comment span.reply-btn a:hover {
                    color: #fff;
                    background-color: #e33;
                }

        .comment-container .single-comment .image {
            -webkit-flex-basis: 50px;
            -ms-flex-preferred-size: 50px;
            flex-basis: 50px;
        }

        .comment-container .single-comment .content {
            margin-left: 20px;
            -webkit-flex-basis: 100%;
            -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        }

            .comment-container .single-comment .content h3 {
                font-size: 14px;
                font-weight: 700;
                font-style: italic;
                line-height: 29px;
                color: #292929;
            }

                .comment-container .single-comment .content h3 span.comment-time {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 29px;
                    display: block;
                    color: #999;
                }

            .comment-container .single-comment .content p.comment-text {
                font-size: 12px;
                line-height: 20px;
                color: #999;
            }

/*----------  comment form  ----------*/

.comment-form-container h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 25px;
    color: var(--colorOriginal-light-Level3);
}

.comment-form-container p {
    font-size: 12px;
    line-height: 23px;
    color: var(--colorOriginal-light-Level1);
}

/*----------  comment form  ----------*/

.comment-form label {
    font-size: 16px;
    font-weight: 200;
    line-height: 20px;
    display: block;
    margin-bottom: 10px;
    color: var(--colorOriginal-light-Level3);
}

.comment-form textarea {
    width: 100%;
    height: 130px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    -webkit-box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 5px 4px 0 rgba(0, 0, 0, .1);
}

.comment-form input {
    line-height: 48px;
    width: 100%;
    height: 50px;
    padding: 0 15px;
    vertical-align: middle;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    background: #fff;
}

.comment-btn {
    font-weight: 400;
    width: 140px;
    padding: 10px 20px;
    text-transform: uppercase;
    color: var(--colorOriginal-light-Level1);
    border: 1px solid var(--colorOriginal-light-Level1);
    background-color: var(--colorOriginal-dark-Level3);
    border-radius: 8px;
}

    .comment-btn:hover {
        border-color: var(--colorOriginal-light-Level1);
        color: var(--colorOriginal-light-Level3);
        background-color: Var(--colorOriginal-dark-Level2);
    }

/*=====  End of Blog  ======*/

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-space {
        margin-bottom: 80px !important;
    }

    .section-space--inner {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    .section-space--inner-top {
        padding-top: 80px !important;
    }

    .section-space--inner-bottom {
        padding-bottom: 80px !important;
    }

    .header-area--multi-row.is-sticky .header-icon-wrapper {
        display: block;
    }

    .footer-copyright-wrapper--default-footer > .container {
        padding-right: 0;
        padding-left: 0;
    }

    .page-content-wrapper {
        padding-bottom: 80px;
    }

    .search-form {
        width: 650px;
    }

        .search-form form input {
            font-size: 20px;
        }

        .search-form form button {
            font-size: 26px;
        }

    .hero-slider-item-wrapper--fullwidth--fixed-height .hero-slider-content p.slider-title--big-light {
        font-size: 35px;
        line-height: 35px;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height {
        height: 550px;
        background-position-x: 50%;
    }

    .hero-slider-item-wrapper--fullwidth .hero-slider-content p.slider-title--big-light {
        font-size: 35px;
        line-height: 35px;
    }

    .hero-slider-item-wrapper {
        height: 550px;
        background-position-x: 50%;
    }

    .hero-slider-item-wrapper--minimal-height .hero-slider-content {
        padding-left: 30px;
    }

        .hero-slider-item-wrapper--minimal-height .hero-slider-content p.slider-title--big-light {
            font-size: 35px;
            line-height: 35px;
        }

    .hero-slider-content p.slider-title--small {
        margin-bottom: 40px;
    }

    .hero-slider-content p.slider-title--big-bold {
        font-size: 50px;
        line-height: 50px;
    }

    .hero-slider-content p.slider-title--big-light {
        font-size: 35px;
        line-height: 35px;
    }

    .hero-slider-button {
        padding: 10px 25px;
    }

    .single-category-item__content--style2 {
        top: 50%;
        left: 30px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .masonry-category-layout--style2 .grid-item2 {
        max-width: 50%;
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 50% !important;
        -ms-flex: 0 0 50% !important;
        flex: 0 0 50% !important;
    }

    .masonry-category-layout--style2 .grid-item2--width2 {
        max-width: 50%;
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 50% !important;
        -ms-flex: 0 0 50% !important;
        flex: 0 0 50% !important;
    }

    .single-grid-product__image .hover-icons {
        width: 180px;
        padding: 10px 0;
    }

    .single-grid-product .product-countdown .single-countdown {
        padding: 10px;
    }

    .double-row-slider-wrapper .single-grid-product {
        min-height: 390px;
    }

    .single-hover-banner__content .big-text {
        font-size: 22px;
        line-height: 25px;
    }

    .single-hover-banner__content .banner-link {
        margin-top: 20px;
    }

    .single-hover-banner--middlesize-text__content {
        width: 200px;
    }

        .single-hover-banner--middlesize-text__content .small-text {
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            margin-bottom: 14px;
            color: #292929;
        }

        .single-hover-banner--middlesize-text__content .big-text {
            font-size: 22px;
            line-height: 25px;
        }

        .single-hover-banner--middlesize-text__content .banner-link {
            font-size: 12px;
            font-weight: 600;
            line-height: 23px;
            margin-top: 20px;
            color: #292929;
        }

    #scroll-top {
        bottom: 130px;
    }

    .quick-view-modal-container .modal-dialog {
        max-width: 90%;
    }

    .quick-view-modal-container .modal-body {
        padding: 30px 30px 70px 30px;
    }

    .quick-view-modal-container .modal-content {
        overflow: auto;
        max-height: 500px;
    }

    .breadcrumb-wrapper {
        padding: 80px 0;
    }

    .page-sidebar-wrapper {
        margin-top: 80px;
    }

    .shop-product-wrap.grid .col-lg-is-5 {
        max-width: 33.33%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 33.33%;
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
    }

    .product-actions--sticky-mode {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

        .product-actions--sticky-mode .quantity-selection {
            margin-bottom: 20px;
        }

        .product-actions--sticky-mode .product-buttons {
            margin-left: 0;
        }

    .product-actions--quick-view {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

        .product-actions--quick-view .quantity-selection {
            margin-bottom: 20px;
        }

        .product-actions--quick-view .product-buttons {
            margin-left: 0;
        }

    .social-share-buttons ul li a {
        margin-bottom: 5px;
    }

    .cart-summary {
        margin-left: 0;
    }

        .cart-summary .cart-summary-button {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

            .cart-summary .cart-summary-button button {
                margin-right: 20px;
                margin-left: 0;
            }

                .cart-summary .cart-summary-button button:last-child {
                    margin-right: 0;
                }

    .login-form {
        margin-bottom: 30px;
    }

    .login-form {
        padding: 15px;
    }

    .about-image {
        margin-bottom: 15px;
    }

    .about-feature-banner .banner {
        margin-left: 0;
    }

    .feature-image::before {
        display: none;
    }

    .feature-image img {
        margin-left: 0;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
    .header-area--transparent {
        position: static;
        background-color: #fff;
    }

    .header-area--multi-row--separate-navigation .header-top-wrapper {
        padding-bottom: 0;
        background-color: #fff;
    }

    .footer-navigation-wrapper {
        margin-bottom: -50px;
    }

    .footer-short-desc {
        margin-bottom: 50px;
    }

    .single-footer-widget {
        margin-bottom: 50px;
    }

    .product-widget-wrapper {
        margin-bottom: -60px;
    }

    .product-widget-chunk-wrapper {
        margin-bottom: 80px;
    }

    .newsletter-popup-area {
        display: none;
    }

    .big-image-slider-wrapper--slider-mode {
        margin-bottom: 0;
    }

    .single-product-content-description {
        margin-top: 50px;
    }

    .contact-page-side-content {
        margin-bottom: 50px;
    }

    .blog-single-post-container .single-blog-post-media {
        margin-bottom: 30px;
    }

    .blog-single-post-container .post-audio {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area--middle-logo .header-wrapper .navigation-menu-wrapper nav > ul > li {
        margin-right: 20px;
    }

        .header-area--middle-logo .header-wrapper .navigation-menu-wrapper nav > ul > li .mega-menu.four-column {
            left: -120px;
        }

    .header-area--left-logo .header-wrapper .navigation-menu-wrapper nav > ul > li {
        margin-right: 20px;
    }

        .header-area--left-logo .header-wrapper .navigation-menu-wrapper nav > ul > li .mega-menu.four-column {
            left: -300px;
        }

    .header-area--multi-row .header-wrapper .navigation-menu-wrapper nav > ul > li .mega-menu {
        left: -420px;
    }

    .header-area--multi-row--extra-padding .header-wrapper {
        padding-top: 50px;
    }

    .header-area--multi-row--separate-navigation .navigation-menu-area .navigation-menu-wrapper nav > ul > li .mega-menu {
        left: -420px;
    }

    .navigation-menu-wrapper--separate nav > ul {
        text-align: left;
    }

    .navigation-menu-wrapper--separate .mega-menu.four-column {
        left: -450px;
    }

    .mega-menu.four-column {
        left: -350px;
        width: 900px;
    }

    .search-form {
        width: 700px;
    }

        .search-form form input {
            font-size: 20px;
        }

        .search-form form button {
            font-size: 26px;
        }

    .hero-slider-wrapper .slick-active .hero-slider-content--left-space {
        padding-left: 50px;
    }

    .hero-slider-item-wrapper--fullwidth {
        background-position-x: 50%;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height {
        height: 550px !important;
        background-position-x: 50%;
    }

    .hero-slider-item-wrapper--fullwidth .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-item-wrapper {
        height: 550px;
        background-position-x: 50%;
    }

    .hero-slider-item-wrapper--minimal-height {
        height: 550px;
    }

        .hero-slider-item-wrapper--minimal-height .hero-slider-content p.slider-title--big-light {
            font-size: 30px;
            line-height: 30px;
        }

    .hero-slider-content p.slider-title--big-bold {
        font-size: 60px;
        line-height: 60px;
    }

    .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .single-category-item__content--style2 {
        top: 50%;
        left: 15px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .single-grid-product__image .hover-icons {
        width: 180px;
        padding: 10px 0;
    }

    .single-grid-product .product-countdown .single-countdown {
        padding: 10px;
    }

    .double-row-slider-wrapper .single-grid-product {
        min-height: 275px;
    }

    .single-hover-banner__content .banner-link {
        margin-top: 50px;
    }

    .single-hover-banner--middlesize-text__content {
        width: 200px;
    }

        .single-hover-banner--middlesize-text__content .small-text {
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            margin-bottom: 14px;
            color: #292929;
        }

        .single-hover-banner--middlesize-text__content .big-text {
            font-size: 28px;
            font-weight: 400;
            line-height: 30px;
            color: #292929;
        }

        .single-hover-banner--middlesize-text__content .banner-link {
            font-size: 12px;
            font-weight: 600;
            line-height: 23px;
            margin-top: 30px;
            color: #292929;
        }

    .newsletter-popup-content {
        width: 80%;
    }

    #scroll-top {
        bottom: 130px;
    }

    .quick-view-modal-container .modal-dialog {
        max-width: 90%;
    }

    .quick-view-modal-container .modal-content {
        overflow: auto;
        max-height: 500px;
    }

    .breadcrumb-wrapper {
        padding: 100px 0;
    }

    .quantity-selection {
        margin-bottom: 20px;
    }

    .product-actions {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

    .product-actions--quick-view {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

        .product-actions--quick-view .quantity-selection {
            margin-bottom: 20px;
        }

        .product-actions--quick-view .product-buttons {
            margin-left: 0;
        }

            .product-actions--quick-view .product-buttons .cart-btn {
                padding: 0 20px;
            }

            .product-actions--quick-view .product-buttons .wishlist-compare-btn a {
                width: 40px;
            }

    .product-actions .product-buttons {
        margin-left: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .header-area--middle-logo .header-wrapper .navigation-menu-wrapper nav > ul > li {
        margin-right: 30px;
    }

        .header-area--middle-logo .header-wrapper .navigation-menu-wrapper nav > ul > li .mega-menu.four-column {
            left: -50px;
        }

    .header-area--left-logo .header-wrapper .navigation-menu-wrapper nav > ul > li {
        margin-right: 30px;
    }

        .header-area--left-logo .header-wrapper .navigation-menu-wrapper nav > ul > li .mega-menu.four-column {
            left: -200px;
        }

    .header-area--multi-row--extra-padding .header-wrapper {
        padding-top: 50px;
    }

    .navigation-menu-wrapper--separate .mega-menu.four-column {
        left: -300px;
    }

    .mega-menu.four-column {
        left: -200px;
        width: 900px;
    }

    .hero-slider-wrapper .slick-active .hero-slider-content--left-space {
        padding-left: 50px;
    }

    .hero-slider-wrapper .slick-arrow.slick-prev {
        left: 20px;
        border: 0;
    }

    .hero-slider-wrapper .slick-arrow.slick-next {
        right: 20px;
        border: 0;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height {
        height: 550px !important;
        background-position-x: 50% !important;
    }

    .hero-slider-item-wrapper--fullwidth .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-item-wrapper {
        height: 550px;
        background-position-x: 50%;
    }

    .hero-slider-item-wrapper--minimal-height {
        height: 550px;
    }

        .hero-slider-item-wrapper--minimal-height .hero-slider-content p.slider-title--big-light {
            font-size: 30px;
            line-height: 30px;
        }

    .hero-slider-content p.slider-title--big-bold {
        font-size: 60px;
        line-height: 60px;
    }

    .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .single-hover-banner--middlesize-text__content {
        width: 200px;
    }

        .single-hover-banner--middlesize-text__content .small-text {
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            margin-bottom: 14px;
            color: #292929;
        }

        .single-hover-banner--middlesize-text__content .big-text {
            font-size: 28px;
            font-weight: 400;
            line-height: 30px;
            color: #292929;
        }

        .single-hover-banner--middlesize-text__content .banner-link {
            font-size: 12px;
            font-weight: 600;
            line-height: 23px;
            margin-top: 70px;
            color: #292929;
        }

    .newsletter-popup-content {
        width: 70%;
    }

    #scroll-top {
        bottom: 130px;
    }

    .quick-view-modal-container .modal-dialog {
        max-width: 90%;
    }

    .quick-view-modal-container .modal-content {
        overflow: auto;
        max-height: 600px;
    }

    .breadcrumb-wrapper {
        padding: 100px 0;
    }

    .product-actions--quick-view {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

        .product-actions--quick-view .quantity-selection {
            margin-bottom: 20px;
        }

        .product-actions--quick-view .product-buttons {
            margin-left: 0;
        }
}

@media only screen and (min-width: 1200px) and (max-width: 1499px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area--middle-logo .header-wrapper .navigation-menu-wrapper nav > ul > li > .sub-menu {
        left: -10px;
    }

    .header-area--left-logo .header-wrapper .navigation-menu-wrapper nav > ul > li > .sub-menu {
        left: -10px;
    }

    .footer-copyright-wrapper > .container {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 1200px) {
    .container.wide {
        width: 100%;
        max-width: 100%;
        padding: 0 30px;
    }
}

@media only screen and (min-width: 1200px) and (min-width: 1200px) and (max-width: 1499px) {
    .container.wide {
        max-width: 1140px;
        margin-right: auto;
        margin-left: auto;
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1499px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 767px) {
    .page-wrapper {
        margin-top: 0;
        margin-right: 0;
        margin-left: 0;
        padding: 0;
    }
}

@media (min-width: 1500px) {
    .container.wide {
        width: 100%;
        max-width: 100%;
        padding: 0 50px;
    }
}

@media only screen and (max-width: 767px) {
    .section-space {
        margin-bottom: 70px !important;
    }

    .section-space--inner {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }

    .section-space--inner-top {
        padding-top: 70px !important;
    }

    .section-space--inner-bottom {
        padding-bottom: 70px !important;
    }

    .header-area--multi-row.is-sticky .header-icon-wrapper {
        display: block;
    }

    .footer-copyright-wrapper--default-footer {
        text-align: center;
    }

        .footer-copyright-wrapper--default-footer .footer-logo {
            margin-bottom: 15px;
        }

        .footer-copyright-wrapper--default-footer .copyright-text {
            margin-bottom: 15px;
        }

    .footer-copyright-wrapper .copyright-text {
        text-align: center;
    }

    .footer-copyright-wrapper .copyright-navigation-wrapper .copyright-nav {
        text-align: center;
    }

    .copyright-social-wrapper .copyright-social {
        text-align: center;
    }

    .page-content-wrapper {
        padding-bottom: 70px;
    }

    .search-form {
        width: 500px;
    }

    .search-form {
        width: 400px;
    }

        .search-form form input {
            font-size: 20px;
        }

        .search-form form button {
            font-size: 26px;
        }

    .hero-slider-item-wrapper--fullwidth {
        background-position-x: 25%;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height {
        height: 550px;
        background-position-x: 15%;
    }

    .hero-slider-item-wrapper--fullwidth .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-item-wrapper {
        height: 200px;
        background-position-x: 15%;
    }

    .hero-slider-item-wrapper--minimal-height .hero-slider-content {
        padding-left: 30px;
    }

        .hero-slider-item-wrapper--minimal-height .hero-slider-content p.slider-title--big-light {
            font-size: 30px;
            line-height: 30px;
        }

    .hero-slider-content p.slider-title--small {
        margin-bottom: 40px;
    }

    .hero-slider-content p.slider-title--big-bold {
        font-size: 40px;
        line-height: 40px;
    }

    .hero-slider-content p.slider-title--big-light {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-button {
        padding: 10px 25px;
    }

    .single-category-item__content--style2 {
        top: 50%;
        left: 30px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .masonry-category-layout--style2 .grid-item2 {
        max-width: 100%;
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 100% !important;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
    }

    .masonry-category-layout--style2 .grid-item2--width2 {
        max-width: 100%;
        -webkit-box-flex: 0 !important;
        -webkit-flex: 0 0 100% !important;
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
    }

    .single-grid-product--list-view__content .category {
        margin-bottom: 10px;
    }

    .single-grid-product--list-view__content .rating {
        margin-bottom: 10px;
    }

    .single-grid-product--list-view__title {
        margin-bottom: 10px;
    }

    .single-grid-product--list-view__price {
        margin-bottom: 20px;
    }

    .single-grid-product--list-view__product-short-desc {
        padding-top: 20px;
    }

    .single-grid-product .product-countdown .single-countdown {
        padding: 10px;
    }

    .double-row-slider-wrapper .single-grid-product {
        min-height: 430px;
    }

    .single-hover-banner__content .big-text {
        font-size: 22px;
        line-height: 30px;
    }

    .single-hover-banner__content .banner-link {
        margin-top: 30px;
    }

    .single-hover-banner--middlesize-text__content {
        width: 200px;
    }

        .single-hover-banner--middlesize-text__content .small-text {
            font-size: 14px;
            font-weight: 600;
            line-height: 18px;
            margin-bottom: 14px;
            color: #292929;
        }

        .single-hover-banner--middlesize-text__content .big-text {
            font-size: 22px;
            line-height: 30px;
        }

        .single-hover-banner--middlesize-text__content .banner-link {
            font-size: 12px;
            font-weight: 600;
            line-height: 23px;
            margin-top: 20px;
            color: #292929;
        }

    .feature-logo-wrapper {
        padding-bottom: 10px !important;
    }

    .single-feature-logo {
        margin-bottom: 60px;
    }

    .newsletter-wrapper .title {
        font-size: 20px;
        line-height: 25px;
    }

    .newsletter-form input {
        height: 40px;
        padding-right: 150px;
    }

    .newsletter-form button {
        width: 150px;
    }

    #scroll-top {
        bottom: 50px;
    }

        #scroll-top span {
            display: none;
        }

    .quick-view-modal-container .modal-dialog {
        max-width: 90%;
    }

    .quick-view-modal-container .modal-body {
        padding: 30px 30px 70px 30px;
    }

    .quick-view-modal-container .modal-content {
        overflow: auto;
        max-height: 500px;
    }

    .breadcrumb-content__title {
        font-size: 30px;
        line-height: 30px;
    }

    .breadcrumb-wrapper {
        padding: 70px 0;
    }

    .shop-header {
        padding: 5px 0;
    }

    .shop-header {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        -webkit-box-align: start;
        -webkit-align-items: flex-start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .grid-icons button {
        height: 40px;
    }

    .page-sidebar-wrapper {
        margin-top: 70px;
    }

    .shop-product-wrap.grid .col-lg-is-5 {
        max-width: 50%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .big-image-slider-wrapper--sticky-mode {
        margin-bottom: 50px;
    }

    .product-details-big-image-slider-wrapper--side-space {
        margin-bottom: 15px;
    }

    .product-details-small-image-slider-wrapper--vertical-space .single-image {
        padding: 0 5px;
    }

    .product-actions--quick-view {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

        .product-actions--quick-view .quantity-selection {
            margin-bottom: 20px;
        }

        .product-actions--quick-view .product-buttons {
            margin-left: 0;
        }

    .social-share-buttons ul li {
        margin-bottom: 5px;
    }

        .social-share-buttons ul li a {
            margin-bottom: 5px;
        }

    .cart-table .table {
        border-top: 8px solid #f2f2f2;
    }

        .cart-table .table thead {
            display: none;
        }

        .cart-table .table tbody tr td {
            display: block;
            width: 100%;
            max-width: none;
            padding: 15px;
            text-align: left;
        }

    .cart-table th.pro-thumbnail a,
    .cart-table td.pro-thumbnail a {
        width: 160px;
    }

    .cart-table td.pro-remove a {
        width: 60px;
        text-align: center;
    }

    .cart-summary {
        margin-left: 0;
    }

        .cart-summary .cart-summary-button {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
        }

            .cart-summary .cart-summary-button button {
                margin-right: 10px;
                margin-left: 0;
            }

                .cart-summary .cart-summary-button button:last-child {
                    margin-right: 0;
                }

    #google-map {
        height: 300px;
    }

    .about-image {
        margin-bottom: 15px;
    }

    .about-content h1 {
        font-size: 24px;
        line-height: 30px;
    }

    .about-section-title h3 {
        font-size: 18px;
        line-height: 24px;
    }

    .about-feature p {
        max-width: 350px;
    }

    .about-feature-banner .banner {
        margin-left: 0;
    }

    .about-feature-banner .single-banner a {
        display: block;
        width: 100%;
    }

        .about-feature-banner .single-banner a img {
            width: 100%;
        }

    .feature-image::before {
        display: none;
    }

    .feature-image img {
        margin-left: 0;
    }

    .blog-single-post-container .single-blog-post-media .video iframe {
        height: 400px;
    }

    .blog-single-post-container .related-post-container .single-related-post {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 575px) {
    .section-title-wrapper .section-title {
        font-size: 25px;
        line-height: 25px;
    }

    .single-grid-product__image .hover-icons {
        width: 180px;
        padding: 10px 0;
    }

    .single-grid-product--list-view__image {
        -webkit-flex-basis: 200px;
        -ms-flex-preferred-size: 200px;
        flex-basis: 200px;
    }

    .single-grid-product--list-view__content {
        -webkit-flex-basis: calc(100% - 200px);
        -ms-flex-preferred-size: calc(100% - 200px);
        flex-basis: calc(100% - 200px);
    }

    .single-grid-product--list-view__product-short-desc {
        line-height: 1.6;
    }

    .double-row-slider-wrapper .single-grid-product {
        min-height: 390px;
    }

    .tab-slider-wrapper .tab-product-navigation .nav {
        margin-bottom: -15px;
    }

        .tab-slider-wrapper .tab-product-navigation .nav .nav-item.nav-link {
            margin-bottom: 15px;
        }

    .single-testimonial-item__content .testimonial-text {
        line-height: 25px;
    }

    .quick-view-modal-container .modal-dialog {
        max-width: 100%;
    }

    .pagination-area {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

    .pagination-area__left {
        margin-bottom: 15px;
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .pagination-area__right {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

        .pagination-area__right .pagination-section {
            text-align: center;
        }

    .shop-product-wrap.grid .col-12 {
        max-width: 50%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 50%;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }

    .single-product-content-description .product-countdown .single-countdown {
        padding: 15px;
    }

        .single-product-content-description .product-countdown .single-countdown .single-countdown-time {
            font-size: 14px;
        }

    .quantity-selection {
        margin-bottom: 20px;
    }

    .product-actions {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

        .product-actions .product-buttons {
            margin-left: 0;
        }

    .sin-ratings .rating-author .rating-star {
        float: left;
        width: 100%;
        margin-top: 5px;
    }

    .cart-summary .cart-summary-wrap {
        padding: 25px 30px;
    }

    .cart-summary .cart-summary-button button {
        width: 130px;
    }

    .checkout-cart-total {
        padding: 30px;
    }

    .checkout-payment-method {
        padding: 30px;
    }

    .myaccount-content {
        padding: 20px 15px;
    }

    .forget-pass-link {
        margin-top: 15px;
    }

    #google-map {
        height: 250px;
    }

    h3.contact-page-title {
        font-size: 20px;
    }

    .single-contact-block {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
}

@media only screen and (max-width: 479px) {
    .offcanvas-widget-area {
        margin-bottom: 30px;
    }

    .offcanvas-menu-close {
        font-size: 25px;
        line-height: 55px;
        left: 10px;
        width: 50px;
        height: 50px;
    }

    .offcanvas-mobile-search-area input {
        font-size: 14px;
        padding: 5px 15px;
    }

    .offcanvas-inner-content {
        padding: 70px 25px 0;
    }

    .offcanvas-navigation > ul > li > a {
        font-size: 14px;
        line-height: 20px;
    }

    .offcanvas-navigation ul.sub-menu > li > a {
        font-size: 13px;
        line-height: 18px;
    }

    .off-canvas-widget-social a {
        margin: 0 10px;
    }

    .footer-copyright-wrapper .copyright-navigation-wrapper .copyright-nav li {
        margin-right: 10px;
    }

    .search-form {
        width: 300px;
    }

        .search-form form input {
            font-size: 15px;
            height: 50px;
        }

        .search-form form button {
            font-size: 20px;
        }

    .close-search-overlay {
        font-size: 50px;
    }

    .hero-slider-wrapper .slick-dots {
        bottom: 20px;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height .hero-slider-content p.slider-title--big-light {
        font-size: 20px;
        line-height: 20px;
    }

    .hero-slider-item-wrapper--fullwidth--fixed-height {
        height: 350px;
        background-position-x: 30%;
    }

    .hero-slider-item-wrapper--fullwidth .hero-slider-content p.slider-title--big-light {
        font-size: 20px;
        line-height: 20px;
    }

    .hero-slider-item-wrapper {
        height: 200px;
        background-position-x: 30%;
    }

    .hero-slider-item-wrapper--minimal-height .hero-slider-content {
        padding-left: 15px;
    }

        .hero-slider-item-wrapper--minimal-height .hero-slider-content p.slider-title--big-light {
            font-size: 20px;
            line-height: 20px;
        }

    .hero-slider-content p.slider-title--small {
        font-size: 12px;
        line-height: 20px;
    }

    .hero-slider-content p.slider-title--big-bold {
        font-size: 30px;
        line-height: 30px;
    }

    .hero-slider-content p.slider-title--big-light {
        font-size: 20px;
        line-height: 20px;
    }

    .single-category-item__content--style2 {
        top: 50%;
        left: 30px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .single-grid-product--list-view {
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
    }

    .single-grid-product--list-view__image {
        margin-bottom: 15px;
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    }

    .single-grid-product--list-view__content {
        margin-left: 0;
    }

    .single-slider-post__date-sticker {
        width: 50px;
        height: 60px;
    }

        .single-slider-post__date-sticker span.month {
            margin-bottom: 5px;
        }

        .single-slider-post__date-sticker span.day {
            font-size: 15px;
            line-height: 15px;
        }

    .single-hover-banner__content .big-text {
        font-size: 15px;
        line-height: 20px;
    }

    .single-hover-banner__content .banner-link {
        font-size: 10px;
        margin-top: 10px;
    }

    .single-hover-banner--middlesize-text__content {
        max-width: 130px;
    }

        .single-hover-banner--middlesize-text__content .big-text {
            font-size: 15px;
            line-height: 20px;
        }

        .single-hover-banner--middlesize-text__content .banner-link {
            font-size: 10px;
            margin-top: 10px;
        }

    .newsletter-wrapper .small-text {
        margin-bottom: 10px;
    }

    .newsletter-wrapper .title {
        font-size: 19px;
        margin-bottom: 10px;
    }

    .newsletter-wrapper .short-desc {
        margin-bottom: 30px;
    }

    .newsletter-form input {
        font-size: 11px;
        padding-right: 128px;
    }

    .newsletter-form button {
        font-size: 11px;
        width: 100px;
    }

    #scroll-top {
        padding: 10px 15px;
    }

    .quick-view-modal-container .modal-body {
        padding: 30px 15px 70px 15px;
    }

    .breadcrumb-content__title {
        font-size: 25px;
        line-height: 25px;
    }

    .shop-header__left__message {
        padding-left: 10px;
    }

    .shop-product-wrap.grid .col-12 {
        max-width: 100%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    .shop-product-wrap.grid .col-lg-is-5 {
        max-width: 100%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
    }

    .product-actions--quick-view .product-buttons .cart-btn {
        margin-bottom: 20px;
    }

    .product-actions--quick-view .product-buttons .wishlist-compare-btn {
        margin-left: 0;
    }

    .product-actions .product-buttons .cart-btn {
        margin-top: 0;
    }

    .cart-btn {
        padding: 0 30px;
    }

    .wishlist-compare-btn a {
        width: 40px;
    }

        .wishlist-compare-btn a i {
            font-size: 15px;
        }

    .product-description-review-container nav .nav-tabs {
        flex-direction: row;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
    }

        .product-description-review-container nav .nav-tabs .nav-link {
            border-right: 1px solid #ebebeb !important;
        }

            .product-description-review-container nav .nav-tabs .nav-link:last-child {
                border-right: none !important;
            }

    .forget-pass-link {
        margin-top: 15px;
    }

    #google-map {
        height: 200px;
    }

    .blog-single-post-container {
        padding: 30px 15px;
    }

        .blog-single-post-container h3.post-title {
            font-size: 25px;
            line-height: 35px;
        }

        .blog-single-post-container .single-blog-post-media .video iframe {
            height: 250px;
        }

        .blog-single-post-container .post-content blockquote {
            margin-left: 10px;
            padding: 15px 20px;
        }
}

@-webkit-keyframes customZoomIn {
    from {
        -webkit-transform: scale3d(.8, .8, .8);
        transform: scale3d(.8, .8, .8);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes customZoomIn {
    from {
        -webkit-transform: scale3d(.8, .8, .8);
        transform: scale3d(.8, .8, .8);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}