@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Cairo:wght@200..1000&display=swap);
.main-button {
    background-color: #f05271;
    opacity: 1;
    color: #fff;
    transition:
        background-color 1.5s ease,
        color 1.5s ease,
        border-color 1.5s ease,
        transform 1.5s ease;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
}

.main-button:hover {
    background-color: #8379b8;
}

.breadcrumb {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.0509803922) !important;
    padding: 12px 0 !important;
    margin-bottom: 0 !important;
}

.breadcrumb-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

@media (max-width: 1440px) {
    .breadcrumb-container {
        max-width: 1220px;
    }
}

@media (max-width: 1200px) {
    .breadcrumb-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .breadcrumb-container {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .breadcrumb-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .breadcrumb-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .breadcrumb-container {
        padding: 0 15px;
        gap: 0.8rem;
    }
}

.breadcrumb-path {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 576px) {
    .breadcrumb-path {
        font-size: 14px;
    }
}

.breadcrumb-path-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotate(270deg);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

.breadcrumb-path-current {
    color: #f05271;
}

.breadcrumb-path a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.breadcrumb-path a:hover {
    color: #f05271;
}

.breadcrumb-account {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

@media (max-width: 576px) {
    .breadcrumb-account {
        display: none;
    }
}

.breadcrumb-account-name {
    color: #f05271;
}

.breadcrumb-account-divider {
    width: 1px;
    height: 16px;
    background-color: rgba(0, 0, 0, 0.2);
}

.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background: 0 0;
    box-shadow: 0 10px 20px 0 rgba(58, 58, 58, 0.0588235294);
    z-index: 99999;
    height: 113px;
    transition: all 0.3s ease;
}

@media (max-width: 992px) {
    .navbar {
        height: 103px;
    }
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 85px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1019607843);
}

@media (max-width: 992px) {
    .navbar.scrolled {
        height: 75px;
    }
}

.navbar.scrolled .navbar-logo img {
    width: clamp(150px, 14vw, 180px);
}

@media (max-width: 380px) {
    .navbar.scrolled .navbar-logo img {
        width: clamp(100px, 15vw, 110px);
    }
}

.navbar.navbar-hidden {
    transform: translateY(-100%);
}

.navbar-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
}

@media (max-width: 1440px) {
    .navbar-container {
        max-width: 1220px;
    }
}

@media (max-width: 1200px) {
    .navbar-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .navbar-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .navbar-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .navbar-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .navbar-container {
        padding: 0 15px;
        gap: 0.8rem;
    }
}

.navbar-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar-logo img {
    height: auto;
    width: clamp(150px, 14vw, 234px);
    transition: 0.5s ease;
}

@media (max-width: 380px) {
    .navbar-logo img {
        width: clamp(120px, 15vw, 150px);
    }
}

.navbar-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.8rem;
}

@media (max-width: 1200px) {
    .navbar-menu {
        gap: 1.5rem;
    }
}

@media (max-width: 1100px) {
    .navbar-menu {
        gap: 1.2rem;
    }
}

@media (max-width: 991px) {
    .navbar-menu {
        display: none;
    }
}

.navbar-link {
    color: #333;
    text-decoration: none;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 600;
    transition: color 0.3s ease;
    white-space: nowrap;
    position: relative;
    padding-bottom: 5px;
}

.navbar-link:after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #e63946;
    transition: width 0.3s ease;
}

html[dir="rtl"] .navbar-link:after {
    left: auto;
    right: 0;
}

.navbar-link:hover {
    color: #e63946;
}

.navbar-link:hover:after {
    width: 100%;
}

.navbar-link.active {
    color: #e63946;
}

.navbar-link.active:after {
    width: 100%;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 1200px) {
    .navbar-actions {
        gap: 0.8rem;
    }
}

@media (max-width: 1100px) {
    .navbar-actions {
        gap: 0.6rem;
    }
}

@media (max-width: 991px) {
    .navbar-actions {
        display: none;
    }
}

.navbar-user-menu {
    display: flex;
    align-items: center;
    gap: 13.38px;
    position: relative;
    height: 50px;
}

@media (max-width: 1200px) {
    .navbar-user-menu {
        gap: 12px;
    }
}

@media (max-width: 1100px) {
    .navbar-user-menu {
        gap: 10px;
    }
}

.navbar-user-menu-icon {
    position: relative;
    width: 45px;
    height: 45px;
    border-radius: 61px;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.3s ease;
    overflow: visible;
}

@media (max-width: 1200px) {
    .navbar-user-menu-icon {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 1100px) {
    .navbar-user-menu-icon {
        width: 40px;
        height: 40px;
    }
}

.navbar-user-menu-icon:hover {
    background: rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

.navbar-user-menu-icon-img {
    width: 17px;
    height: 17px;
    -o-object-fit: contain;
    object-fit: contain;
}

@media (max-width: 1200px) {
    .navbar-user-menu-icon-img {
        width: 13px;
        height: 13px;
    }
}

@media (max-width: 1100px) {
    .navbar-user-menu-icon-img {
        width: 13px;
        height: 13px;
    }
}

.navbar-user-menu-badge {
    position: absolute;
    top: -2px;
    right: 0;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: #f05271;
    color: #fff;
    font-family: "Gotham Rounded", "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    padding: 0;
    box-shadow: 0 2px 4px rgba(240, 82, 113, 0.3);
}

@media (max-width: 1200px) {
    .navbar-user-menu-badge {
        width: 20px;
        height: 20px;
        font-size: 11px;
        line-height: 22px;
        top: 3px;
    }
}

@media (max-width: 1100px) {
    .navbar-user-menu-badge {
        width: 18px;
        height: 18px;
        font-size: 10px;
        line-height: 20px;
        top: 2px;
    }
}

.navbar-user-menu-profile-wrapper {
    position: relative;
}

.navbar-user-menu-profile {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 61px;
    border: none;
    cursor: pointer;
    padding: 0;
    overflow: visible;
    background: 0 0;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none;
}

@media (max-width: 1200px) {
    .navbar-user-menu-profile {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 1100px) {
    .navbar-user-menu-profile {
        width: 40px;
        height: 40px;
    }
}

.navbar-user-menu-profile:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.navbar-user-menu-profile-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 61px;
}

.navbar-user-menu-profile-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    overflow: hidden;
}

.navbar-user-menu-profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

@media (max-width: 992px) {
    .navbar-user-menu-profile-dropdown {
        right: auto;
        left: 0;
    }
}

[dir="rtl"] .navbar-user-menu-profile-dropdown {
    right: auto;
    left: 0;
}

.navbar-user-menu-profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #000;
    text-decoration: none;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.navbar-user-menu-profile-dropdown-item:last-child {
    border-bottom: none;
}

.navbar-user-menu-profile-dropdown-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}
.navbar-user-menu-profile-dropdown-item span {
    white-space: nowrap;
}

.navbar-auth-buttons {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

@media (max-width: 1200px) {
    .navbar-auth-buttons {
        gap: 0.6rem;
    }
}

@media (max-width: 1100px) {
    .navbar-auth-buttons {
        gap: 0.5rem;
    }
}

.navbar-language {
    position: relative;
}

.navbar-language-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.2rem;
    background: rgba(131, 121, 184, 0.1019607843);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: clamp(14px, 1vw, 16px);
    color: #8379b8;
    transition: all 0.3s ease;
}

@media (max-width: 576px) {
    .navbar-language-btn {
        width: auto;
        margin: 0 auto;
        padding: 0.4rem 1rem;
        font-size: 14px;
    }
}

@media (max-width: 380px) {
    .navbar-language-btn {
        padding: 0.3rem 0.8rem;
        gap: 0.3rem;
    }
}

.navbar-language-btn i {
    font-size: clamp(14px, 1vw, 16px);
    color: #8379b8;
}

.navbar-language-btn .dropdown-icon {
    transition: transform 0.3s ease;
}

.navbar-language-btn:hover {
    background: rgba(88, 79, 129, 0.1019607843);
}

.navbar-language-btn.active .dropdown-icon {
    transform: rotate(180deg);
}

.navbar-language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.1rem;
    background: rgba(131, 121, 184, 0.1019607843);
    border-radius: 12px;
    padding: 0.2rem;
    min-width: 130px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
}

.navbar-language-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.navbar-language-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    padding: 0.3rem 1rem;
    color: #8379b8 !important;
    font-weight: 600;
    font-size: clamp(14px, 1vw, 16px);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.navbar-language-dropdown-item:hover {
    background: rgba(88, 79, 129, 0.1019607843);
}

.navbar-language-dropdown-item.active {
    background: rgba(88, 79, 129, 0.1019607843);
}

.navbar-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    font-size: clamp(14px, 1vw, 17px);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    white-space: nowrap;
    border: 2px solid transparent;
}

@media (max-width: 576px) {
    .navbar-btn {
        width: -moz-fit-content !important;
        width: fit-content !important;
        margin: 0 auto;
        padding: 0.4rem 1.2rem;
    }
}

@media (max-width: 380px) {
    .navbar-btn {
        width: -moz-fit-content !important;
        width: fit-content !important;
        margin: 0 auto;
        padding: 0.3rem 1rem;
        font-size: 13px;
    }
}

.navbar-btn--login {
    background: 0 0;
    color: #333;
    border-color: transparent;
}

.navbar-btn--login:hover {
    color: #f05271;
}

.navbar-btn--join {
    color: #f05271 !important;
    border-color: #f05271;
}

.navbar-btn--join:hover {
    background: #ff6b6b;
    color: #fff !important;
}

.navbar-toggle {
    display: none;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

@media (max-width: 991px) {
    .navbar-toggle {
        display: block;
    }
}

@media (max-width: 576px) {
    .navbar-toggle {
        padding: 0.4rem;
    }
}

.navbar-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #333;
    margin: 5px 0;
    transition: all 0.3s ease;
    border-radius: 3px;
}

@media (max-width: 576px) {
    .navbar-toggle span {
        width: 22px;
        height: 2px;
        margin: 4px 0;
    }
}

.navbar-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-8px, 0);
}

.navbar-toggle.active span:nth-child(2) {
    opacity: 0;
}

.navbar-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-8px, 0);
}

.navbar-sidebar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (max-width: 576px) {
    .navbar-sidebar {
        width: 100%;
    }
}

@media (min-width: 992px) {
    .navbar-sidebar {
        display: none;
    }
}

.navbar-sidebar.active {
    right: 0;
}

.navbar-sidebar .navbar-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-menu {
        gap: 1.2rem;
        margin-bottom: 1.5rem;
    }
}

.navbar-sidebar .navbar-menu .navbar-link {
    font-size: 18px;
}

.navbar-sidebar .navbar-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
    width: 100%;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-actions {
        gap: 0.8rem;
        padding-top: 1.2rem;
    }
}

.navbar-sidebar .navbar-actions .navbar-btn {
    text-align: center;
    display: block;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-actions .navbar-btn {
        font-size: 16px;
        padding: 0.5rem 1.2rem;
    }
}

.navbar-sidebar .navbar-actions .navbar-language {
    margin-bottom: 0.5rem;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-actions .navbar-language {
        margin-bottom: 0.3rem;
    }
}

.navbar-sidebar .navbar-actions .navbar-user-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    padding: 0.5rem 0;
    position: relative;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-actions .navbar-user-menu {
        gap: 10px;
    }
}

.navbar-sidebar
    .navbar-actions
    .navbar-user-menu
    .navbar-user-menu-profile-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}

.navbar-sidebar
    .navbar-actions
    .navbar-user-menu
    .navbar-user-menu-profile-wrapper
    .navbar-user-menu-profile {
    margin: 0 auto;
}

.navbar-sidebar
    .navbar-actions
    .navbar-user-menu
    .navbar-user-menu-profile-wrapper
    .navbar-user-menu-profile-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    min-width: 200px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1001;
}

.navbar-sidebar
    .navbar-actions
    .navbar-user-menu
    .navbar-user-menu-profile-wrapper
    .navbar-user-menu-profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

[dir="rtl"]
    .navbar-sidebar
    .navbar-actions
    .navbar-user-menu
    .navbar-user-menu-profile-wrapper
    .navbar-user-menu-profile-dropdown {
    left: auto;
    right: 50%;
    transform: translateX(50%) translateY(-10px);
}

[dir="rtl"]
    .navbar-sidebar
    .navbar-actions
    .navbar-user-menu
    .navbar-user-menu-profile-wrapper
    .navbar-user-menu-profile-dropdown.show {
    transform: translateX(50%) translateY(0);
}

@media (max-width: 576px) {
    .navbar-sidebar
        .navbar-actions
        .navbar-user-menu
        .navbar-user-menu-profile-wrapper
        .navbar-user-menu-profile-dropdown {
        min-width: 180px;
    }
}

.navbar-sidebar .navbar-actions .navbar-auth-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-actions .navbar-auth-buttons {
        gap: 0.6rem;
    }
}

.navbar-sidebar .navbar-language {
    width: 100%;
    margin-bottom: 0.5rem;
}

.navbar-sidebar .navbar-language-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.2rem;
    background: rgba(131, 121, 184, 0.1019607843);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    color: #8379b8;
    transition: all 0.3s ease;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-language-btn {
        width: -moz-fit-content !important;
        width: fit-content !important;
        margin: 0 auto;
        padding: 0.4rem 1rem;
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .navbar-sidebar .navbar-language-btn {
        padding: 0.3rem 0.8rem;
        gap: 0.3rem;
    }
}

.navbar-sidebar .navbar-language-btn i {
    font-size: clamp(14px, 2vw, 17px);
    color: #8379b8;
}

.navbar-sidebar .navbar-language-btn:hover {
    background: rgba(88, 79, 129, 0.1019607843);
}

.navbar-sidebar .navbar-language-dropdown {
    width: 100%;
    margin-top: 0.5rem;
    background: #ececec;
    border-radius: 12px;
    padding: 0.2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.navbar-sidebar .navbar-language-dropdown.show {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 576px) {
    .navbar-sidebar .navbar-language-dropdown {
        width: -moz-fit-content !important;
        width: fit-content !important;
        margin: 0 auto;
    }

    .navbar-sidebar .navbar-language-dropdown.show {
        right: 47%;
        transform: translateX(50px);
        top: 120%;
    }
}

.navbar-sidebar .navbar-language-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    padding: 0.3rem 1rem;
    color: #8379b8 !important;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.navbar-sidebar .navbar-language-dropdown-item:hover {
    background: rgba(88, 79, 129, 0.1019607843);
}

.navbar-sidebar .navbar-language-dropdown-item.active {
    background: rgba(88, 79, 129, 0.1019607843);
}

.navbar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 998;
}

.navbar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.search-modal.active .search-modal-overlay {
    opacity: 1;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-modal-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    .search-modal-container {
        max-width: 95%;
        border-radius: 20px;
        max-height: 90vh;
    }
}

@media (max-width: 480px) {
    .search-modal-container {
        max-width: 100%;
        border-radius: 0;
        max-height: 100vh;
        transform: scale(1) translateY(0);
    }
}

.search-modal.active .search-modal-container {
    opacity: 1;
    transform: scale(1) translateY(0);
}

@media (max-width: 480px) {
    .search-modal.active .search-modal-container {
        transform: scale(1) translateY(0);
    }
}

.search-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px 24px;
    border-bottom: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
    .search-modal-header {
        padding: 24px 24px 20px;
    }
}

.search-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 0;
    font-family: "Baloo 2", sans-serif;
}

@media (max-width: 768px) {
    .search-modal-title {
        font-size: 20px;
    }
}

.search-modal-close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f5f5f5;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.search-modal-close:hover {
    background: #e0e0e0;
    color: #333;
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .search-modal-close {
        width: 36px;
        height: 36px;
    }
}

.search-modal-body {
    padding: 32px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .search-modal-body {
        padding: 24px 20px;
    }
}

.search-input-wrapper {
    position: relative;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .search-input-wrapper {
        margin-bottom: 24px;
    }
}

.search-input {
    width: 100%;
    padding: 18px 50px 18px 50px;
    font-size: 16px;
    border: 2px solid #f05271;
    border-radius: 12px;
    outline: 0;
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    background: #fff;
}

.search-input:focus {
    border-color: #f05271;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(240, 82, 113, 0.15);
}

.search-input::-moz-placeholder {
    color: #999;
}

.search-input::placeholder {
    color: #999;
}

@media (max-width: 768px) {
    .search-input {
        padding: 16px 45px 16px 45px;
        font-size: 15px;
    }
}

.search-input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #f05271;
    pointer-events: none;
}

@media (max-width: 768px) {
    .search-input-icon {
        left: 16px;
        width: 20px;
        height: 20px;
    }
}

.search-input-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f0f0f0;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    padding: 0;
}

.search-input-clear:hover {
    background: #e0e0e0;
    color: #333;
}

@media (max-width: 768px) {
    .search-input-clear {
        width: 28px;
        height: 28px;
        right: 10px;
    }
}

.search-suggestions-section {
    margin-bottom: 32px;
}

.search-suggestions-section:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .search-suggestions-section {
        margin-bottom: 24px;
    }
}

.search-suggestions-title {
    font-size: 12px;
    font-weight: 700;
    color: #999;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Baloo 2", sans-serif;
}

.search-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid #f0f0f0;
    background: #fff;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
    font-family: "Baloo 2", sans-serif;
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.search-suggestion-item svg {
    color: #999;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.search-suggestion-item span {
    flex: 1;
}

.search-suggestion-item:hover {
    background: #f9f9f9;
    border-color: #f05271;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(240, 82, 113, 0.1);
}

.search-suggestion-item:hover svg {
    color: #f05271;
}

@media (max-width: 768px) {
    .search-suggestion-item {
        padding: 12px 16px;
        font-size: 14px;
    }
}

.search-results-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}

.search-results-count {
    font-size: 14px;
    color: #666;
    margin: 0;
    font-family: "Baloo 2", sans-serif;
}

.search-results-count span {
    font-weight: 700;
    color: #f05271;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-result-item {
    padding: 16px;
    background: #f9f9f9;
    border-radius: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.search-result-item:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-result-content .search-result-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
    font-family: "Baloo 2", sans-serif;
}

.search-result-content .search-result-description {
    font-size: 14px;
    color: #666;
    margin: 0;
    font-family: "Baloo 2", sans-serif;
}

html[dir="rtl"] .search-input-wrapper .search-input-icon {
    left: auto;
    right: 18px;
}

@media (max-width: 768px) {
    html[dir="rtl"] .search-input-wrapper .search-input-icon {
        right: 16px;
    }
}

html[dir="rtl"] .search-input-wrapper .search-input-clear {
    right: auto;
    left: 12px;
}

@media (max-width: 768px) {
    html[dir="rtl"] .search-input-wrapper .search-input-clear {
        left: 10px;
    }
}

html[dir="rtl"] .search-input {
    padding: 18px 50px 18px 50px;
    text-align: right;
}

@media (max-width: 768px) {
    html[dir="rtl"] .search-input {
        padding: 16px 45px 16px 45px;
    }
}

html[dir="rtl"] .search-suggestion-item {
    text-align: right;
}

html[dir="rtl"] .search-suggestion-item:hover {
    transform: translateX(-4px);
}

html[dir="rtl"] .search-suggestion-item svg {
    order: 2;
}

html[dir="rtl"] .search-suggestion-item span {
    order: 1;
}

.footer {
    background-color: #000;
    box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.2509803922);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-bottom: 30px;
}

.footer-film-strip {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    overflow: hidden;
    padding: 8px 5%;
}

.footer-film-strip img {
    width: 100%;
    display: block;
}

.footer-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 60px 15px 30px;
}

@media (max-width: 1440px) {
    .footer-container {
        max-width: 1220px;
    }
}

@media (max-width: 1400px) {
    .footer-container {
        max-width: 1140px;
    }
}

@media (max-width: 1200px) {
    .footer-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .footer-container {
        max-width: 720px;
        padding: 50px 20px 30px;
    }
}

@media (max-width: 768px) {
    .footer-container {
        max-width: 540px;
        padding: 40px 15px 20px;
    }
}

@media (max-width: 576px) {
    .footer-container {
        max-width: 100%;
        padding: 40px 20px 20px;
    }
}

@media (max-width: 380px) {
    .footer-container {
        padding: 30px 15px 15px;
    }
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 40px;
    }
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer-logo img {
    height: auto;
    width: clamp(150px, 14vw, 310px);
}

@media (max-width: 380px) {
    .footer-logo img {
        width: clamp(120px, 15vw, 150px);
    }
}

.footer-about {
    flex: 1;
    max-width: 380px;
}

.footer-about p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    max-width: 90%;
}

@media (max-width: 992px) {
    .footer-about {
        max-width: 100%;
    }
}

.footer-links {
    display: flex;
    flex-direction: column;
}

.footer-links h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    position: relative;
    padding-bottom: 10px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 16px;
    display: inline-block;
    position: relative;
    padding-left: 0;
}

.footer-links ul li a:hover {
    color: #fff;
}

.footer-links ul li a:after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -2px;
    left: 0;
    background-color: #e63946;
    transition: width 0.3s ease;
}

.footer-links ul li a:hover {
    color: #e63946;
}

.footer-links ul li a:hover:after {
    width: 100%;
}

.footer-links ul li a.active {
    color: #e63946;
}

.footer-links ul li a.active:after {
    width: 100%;
}

.footer-discover h3 {
    color: #f8992c;
}

.footer-support h3 {
    color: #44bda4;
}

.footer-contact {
    flex: 1;
    max-width: 380px;
}

.footer-contact h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #8379b8;
    position: relative;
    padding-bottom: 10px;
}

.footer-contact p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    max-width: 90%;
}

.footer-contact .footer-form {
    display: flex;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 50px;
    padding: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.footer-contact .footer-form input {
    flex: 1;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 50px;
    outline: 0;
    font-size: 14px;
    background-color: transparent;
}

.footer-contact .footer-form input::-moz-placeholder {
    color: #999;
    font-size: 14px;
}

.footer-contact .footer-form input::placeholder {
    color: #999;
    font-size: 14px;
}

.footer-contact .footer-form button {
    min-width: 100px;
    height: 42px;
    padding: 0 25px;
    border: none;
    border-radius: 50px;
    background-color: #f05271;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.footer-contact .footer-form button:hover {
    background-color: rgb(237.9654255319, 58.5345744681, 93.7393617021);
}

@media (max-width: 576px) {
    .footer-contact .footer-form {
        gap: 10px;
    }

    .footer-contact .footer-form input {
        border-radius: 22px;
        width: 100%;
    }

    .footer-contact .footer-form button {
        border-radius: 22px;
    }
}

@media (max-width: 992px) {
    .footer-contact {
        max-width: 100%;
    }
}

.footer-colored-bar {
    height: 8px;
    width: 100%;
    margin: 10px 0 0;
    background: linear-gradient(
        to right,
        #44bda4 33%,
        #f8992c 33%,
        #f8992c 67%,
        #8379b8 67%
    );
}

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

.footer-bottom .footer-copyright {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.footer-bottom .footer-links-bottom {
    display: flex;
    gap: 30px;
}

.footer-bottom .footer-links-bottom a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.footer-bottom .footer-links-bottom a:hover {
    color: #fff;
}

.footer-bottom .footer-links-bottom a:not(:last-child):after {
    content: "";
    position: absolute;
    right: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.3);
}

html[dir="rtl"] .footer-bottom .footer-links-bottom a:not(:last-child):after {
    right: auto;
    left: -15px;
}

@media (max-width: 576px) {
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .footer-bottom .footer-links-bottom {
        justify-content: center;
    }
}

[dir="rtl"] .footer-links h3:after {
    left: auto;
    right: 0;
}

[dir="rtl"] .footer-links ul li a {
    padding-left: 0;
    padding-right: 0;
}

[dir="rtl"] .footer-links ul li a:hover {
    padding-left: 0;
}

[dir="rtl"] .footer-links ul li a:after {
    left: auto;
    right: 0;
}

[dir="rtl"] .footer-contact h3:after {
    left: auto;
    right: 0;
}

[dir="rtl"] .footer-form input {
    border-radius: 50px;
}

[dir="rtl"] .footer-form button {
    border-radius: 50px;
}

.hero {
    position: relative;
    /* min-height: 100vh; */
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    /* padding: 190px 0 60px; */
    padding: 150px 0 60px;

    background-size: cover;
    background-position: center;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: radial-gradient(circle at 20% 20%, #f8992c 0, transparent 50%),
        radial-gradient(circle at 20% 80%, #8379b8 0, transparent 50%),
        radial-gradient(circle at 80% 20%, #44bda4 0, transparent 50%),
        radial-gradient(circle at 80% 80%, #fe2c55 0, transparent 50%);
    mix-blend-mode: multiply; */
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(
        45deg,
        rgba(248, 153, 44, 0.1) 0,
        rgba(131, 121, 184, 0.1) 25%,
        rgba(68, 189, 164, 0.1) 50%,
        rgba(254, 44, 85, 0.1) 75%,
        rgba(248, 153, 44, 0.1) 100%
    ); */
    z-index: 0;
    animation: gradientMove 8s ease-in-out infinite alternate;
}

@media (max-width: 992px) {
    .hero {
        padding: 150px 0 40px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 120px 0 30px;
    }
}

.hero-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

.hero-content-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 982px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .hero-content-center {
        max-width: 900px;
    }
}

@media (max-width: 992px) {
    .hero-content-center {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .hero-content-center {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .hero-content-center {
        max-width: 100%;
        padding: 0 15px;
    }
}

.hero-label {
    margin-bottom: 15px;
}

.hero-label span {
    font-size: calmp(14px, 1.5vw, 18px);
    font-weight: 400;
    letter-spacing: 2px;
    color: #8379b8;
    text-transform: uppercase;
    position: relative;
}

.hero-title {
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 700;
    color: #231f20;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-title .text-accent {
    color: #f05271;
    position: relative;
    display: inline-block;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 32px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 28px;
    }
}

.hero-subtitle {
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.6;
    font-weight: 500;
    color: #666;
    margin-bottom: 40px;
}

.hero-search {
    margin-bottom: 30px;
    width: 100%;
}

.hero-search .search-form {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 5px;
}

@media (max-width: 576px) {
    .hero-search .search-form {
        border-radius: 10px;
        align-items: stretch;
    }
}

.hero-search .search-form .form-group {
    position: relative;
}

.hero-search .search-form .form-group label {
    position: absolute;
    top: 5px;
    left: 20px;
    font-size: 12px;
    color: #8379b8;
}

[dir="rtl"] .hero-search .search-form .form-group label {
    left: auto;
    right: 20px;
}

.hero-search .search-form .form-group.category-group {
    flex: 0 0 30%;
    border-right: 1px solid #eee;
}

[dir="rtl"] .hero-search .search-form .form-group.category-group {
    border-right: none;
    border-left: 1px solid #eee;
}

@media (max-width: 768px) {
    .hero-search .search-form .form-group.category-group {
        flex: 0 0 40%;
    }
}

@media (max-width: 576px) {
    .hero-search .search-form .form-group.category-group {
        flex: 1;
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    [dir="rtl"] .hero-search .search-form .form-group.category-group {
        border-left: none;
    }
}

.hero-search .search-form .form-group.service-group {
    flex: 1;
}

.hero-search .search-form .form-control {
    width: 100%;
    height: 50px;
    border: none;
    background: 0 0;
    padding: 25px 20px 10px;
    font-size: 14px;
    color: #333;
    outline: 0;
}

.hero-search .search-form .form-control:focus {
    outline: 0;
    box-shadow: none;
}

.hero-search .search-form .form-control::-moz-placeholder {
    color: #aaa;
    font-size: 14px;
}

.hero-search .search-form .form-control::placeholder {
    color: #aaa;
    font-size: 14px;
}

.hero-search .search-form select.form-control {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.hero-search .search-form .dropdown.bootstrap-select {
    position: relative;
    width: 100%;
}

.hero-search .search-form .dropdown.bootstrap-select .btn.dropdown-toggle {
    width: 100%;
    height: 50px;
    background-color: transparent;
    border: none;
    padding: 25px 20px 10px;
    text-align: left;
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .btn.dropdown-toggle:active,
.hero-search
    .search-form
    .dropdown.bootstrap-select
    .btn.dropdown-toggle:focus {
    outline: 0 !important;
    box-shadow: none !important;
    background-color: transparent;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .btn.dropdown-toggle
    .filter-option {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0.3607843137);
    font-size: 13px;
    font-weight: 600;
}

[dir="rtl"]
    .hero-search
    .search-form
    .dropdown.bootstrap-select
    .btn.dropdown-toggle {
    text-align: right;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .btn.dropdown-toggle::after {
    display: none;
}

.hero-search .search-form .dropdown.bootstrap-select .select-arrow {
    position: relative;
    width: 8px;
    height: 8px;
    border-right: 2px solid #8379b8;
    border-bottom: 2px solid #8379b8;
    transform: rotate(45deg);
    transition: all 0.3s ease;
    margin-left: 10px;
    margin-top: -5px;
}

[dir="rtl"] .hero-search .search-form .dropdown.bootstrap-select .select-arrow {
    margin-left: 0;
    margin-right: 67px;
    transform: rotate(45deg);
}

.hero-search .search-form .dropdown.bootstrap-select:hover .select-arrow {
    border-color: #f05271;
}

.hero-search .search-form .dropdown.bootstrap-select .dropdown-menu {
    width: 100%;
    padding: 10px 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    display: block;
    position: absolute;
    top: 100% !important;
    left: 0;
    z-index: 1000;
}

.hero-search .search-form .dropdown.bootstrap-select .dropdown-menu .inner {
    max-height: 280px;
    overflow-y: auto;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .inner::-webkit-scrollbar {
    width: 5px;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .inner::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .inner::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .inner
    .dropdown-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .dropdown-item {
    padding: 8px 20px;
    font-size: 14px;
    color: #666;
    transition: all 0.2s ease;
    text-align: start;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .dropdown-item:focus,
.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .dropdown-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.hero-search
    .search-form
    .dropdown.bootstrap-select
    .dropdown-menu
    .dropdown-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.hero-search .search-form .dropdown.bootstrap-select.show .dropdown-toggle {
    background-color: transparent;
}

.hero-search .search-form .dropdown.bootstrap-select.show .select-arrow {
    transform: rotate(-135deg);
    border-color: #f05271;
}

[dir="rtl"]
    .hero-search
    .search-form
    .dropdown.bootstrap-select.show
    .select-arrow {
    transform: rotate(135deg);
}

.hero-search .search-form .dropdown.bootstrap-select.show .dropdown-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
}

.hero-search .search-form .search-btn {
    min-width: 100px;
    height: 40px;
    background: #f05271;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-search .search-form .search-btn:hover {
    background: #8379b8;
    box-shadow: 0 5px 15px rgba(240, 82, 113, 0.3);
}

.hero-search .search-form .search-btn:active {
    transform: translateY(0);
}

@media (max-width: 576px) {
    .hero-search .search-form {
        flex-direction: column;
        padding: 10px;
    }

    .hero-search .search-form .form-group {
        margin-bottom: 10px;
    }

    .hero-search .search-form .search-btn {
        width: 100%;
        margin-top: 10px;
    }
}

.hero-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-filters .filter-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    border-radius: 50px;
    padding: 8px 15px;
    box-shadow: 0 2px 31px 0 rgba(0, 0, 0, 0.1490196078);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-filters .filter-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.hero-filters .filter-tag svg {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-filters .filter-tag span {
    font-size: 13px;
    color: rgba(0, 0, 0, 0.4);
    font-weight: 700;
}

.hero-bottom-text {
    text-align: center;
    margin-bottom: 10px;
}

.hero-bottom-text p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    font-weight: 500;
}

.hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}

.hero-cta .play-btn-wrapper {
    position: relative;
}

.hero-cta .play-btn-wrapper:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background-color: rgba(240, 82, 113, 0.1);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.hero-cta .play-btn {
    width: 57px;
    height: 57px;
    padding: 0;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.hero-cta .play-btn:hover {
    transform: scale(1.05);
}

.hero-cta .play-btn svg {
    width: 57px;
    height: 57px;
}

.hero-cta .get-started-btn {
    height: 50px;
    padding: 0 30px;
    background: #f05271;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, 0.1490196078);
}

.hero-cta .get-started-btn:hover {
    transform: translateY(-2px);
    background: #8379b8;
}

.hero-cta .get-started-btn:active {
    transform: translateY(0);
}

.hero-cta .app-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.hero-cta .app-download .app-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.hero-cta .app-download .app-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.hero-cta .app-download .app-link:hover {
    transform: translateY(-2px);
}

.hero-cta .app-download .app-link svg {
    width: 100%;
    height: 100%;
}

.hero-cta .app-download .download-text {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

@media (max-width: 576px) {
    .hero-cta {
        flex-direction: column;
        gap: 15px;
    }

    .hero-cta .get-started-btn {
        width: 100%;
        text-align: center;
    }

    .hero-cta .app-download {
        width: 100%;
        justify-content: center;
    }
}

.hero-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.hero-images .director-chair {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 150px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
}

@media (max-width: 992px) {
    .hero-images .director-chair {
        width: 120px;
        height: 200px;
    }
}

@media (max-width: 768px) {
    .hero-images .director-chair {
        display: none;
    }
}

.hero-images .camera-left {
    position: absolute;
    bottom: 10%;
    left: 20%;
    width: 180px;
    height: 180px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 992px) {
    .hero-images .camera-left {
        width: 140px;
        height: 140px;
        left: 10%;
    }
}

@media (max-width: 768px) {
    .hero-images .camera-left {
        display: none;
    }
}

.hero-images .camera-right {
    position: absolute;
    bottom: 5%;
    right: 10%;
    width: 220px;
    height: 220px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 992px) {
    .hero-images .camera-right {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 768px) {
    .hero-images .camera-right {
        display: none;
    }
}

.hero-images .spotlight-left {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 100px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 992px) {
    .hero-images .spotlight-left {
        width: 80px;
        height: 120px;
    }
}

@media (max-width: 768px) {
    .hero-images .spotlight-left {
        display: none;
    }
}

.hero-images .spotlight-right {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 120px;
    height: 180px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 992px) {
    .hero-images .spotlight-right {
        width: 100px;
        height: 150px;
    }
}

@media (max-width: 768px) {
    .hero-images .spotlight-right {
        display: none;
    }
}

.hero-images .clapperboard {
    position: absolute;
    bottom: 15%;
    right: 25%;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (max-width: 992px) {
    .hero-images .clapperboard {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 768px) {
    .hero-images .clapperboard {
        display: none;
    }
}

.hero-images .sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    animation: twinkle 3s infinite;
}

.hero-images .sparkle.sparkle-1 {
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.hero-images .sparkle.sparkle-2 {
    top: 15%;
    right: 20%;
    animation-delay: 0.5s;
}

.hero-images .sparkle.sparkle-3 {
    top: 40%;
    left: 30%;
    animation-delay: 1s;
}

.hero-images .sparkle.sparkle-4 {
    top: 60%;
    right: 15%;
    animation-delay: 1.5s;
}

.hero-images .sparkle.sparkle-5 {
    top: 70%;
    left: 40%;
    animation-delay: 2s;
}

[dir="rtl"] .hero-title .text-accent:after {
    transform: skewX(10deg);
}

@keyframes heroGradientShift {
    0% {
        opacity: 0.3;
        transform: scale(1.3);
    }

    25% {
        opacity: 0.2;
        transform: scale(1.2);
    }

    50% {
        opacity: 0.1;
        transform: scale(1.3);
    }

    75% {
        opacity: 0.2;
        transform: scale(1.3);
    }

    100% {
        opacity: 0.4;
        transform: scale(1.4);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0 0;
        transform: rotate(0);
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0 0;
    }
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
}

.brands-section {
    width: 100%;
    position: relative;
    background-color: #000;
    padding: 12px 20px;
    overflow: hidden;
    box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.2509803922);
}

.brands-section .brands-film-strip {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    overflow: hidden;
}

.brands-section .brands-film-strip img {
    width: 100%;
    display: block;
}

.brands-section .container {
    max-width: 1675px;
    margin: 0 auto;
    padding: 0 15px;
}

.brands-section .brands-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 40px 0;
    gap: 20px;
}

@media (max-width: 992px) {
    .brands-section .brands-container {
        justify-content: center;
        gap: 30px;
    }
}

.brands-section .brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.brands-section .brand-item:hover {
    transform: translateY(-5px);
}

.brands-section .brand-item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.brands-section .brand-item img {
    width: clamp(112px, 10vw, 162px);
    opacity: 0.8;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .brands-section .brand-item {
        width: calc(33.33% - 20px);
    }

    .brands-section .brand-item img {
        max-height: 50px;
    }
}

@media (max-width: 576px) {
    .brands-section .brand-item {
        width: calc(50% - 20px);
    }

    .brands-section .brand-item img {
        max-height: 50px;
    }
}

@media (max-width: 992px) {
    .about-section {
        min-height: 700px;
        padding: 60px 0;
    }
}

@media (max-width: 768px) {
    .about-section {
        min-height: 600px;
        padding: 40px 0;
    }
}

.about-section .about-container {
    width: 100%;
    max-width: 995px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1200px) {
    .about-section .about-container {
        max-width: 900px;
    }
}

@media (max-width: 992px) {
    .about-section .about-container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .about-section .about-container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .about-section .about-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

.about-section .about-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.about-section .about-logo {
    margin-bottom: 10px;
}

.about-section .about-logo img {
    max-width: 160px;
    height: auto;
}

@media (max-width: 768px) {
    .about-section .about-logo img {
        max-width: 100px;
    }
}

@media (max-width: 576px) {
    .about-section .about-logo img {
        max-width: 80px;
    }
}

.about-section .about-title {
    font-size: clamp(32px, 5vw, 45px);
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.2;
}

.about-section .about-title .text-accent {
    color: #f05271;
}

@media (max-width: 768px) {
    .about-section .about-title {
        font-size: 36px;
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .about-section .about-title {
        font-size: 28px;
    }
}

.about-section .about-subtitle {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5019607843);
    margin-bottom: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .about-section .about-subtitle {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .about-section .about-subtitle {
        font-size: 18px;
    }
}

.about-section .about-description {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5019607843);
    margin-bottom: 10px;
    line-height: 1.6;
    margin-top: -10px;
}

@media (max-width: 768px) {
    .about-section .about-description {
        font-size: 18px;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .about-section .about-description {
        font-size: 16px;
        margin-bottom: 20px;
    }
}

.about-section .about-highlight {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 600;
    color: #f8992c;
    margin-bottom: 10px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .about-section .about-highlight {
        font-size: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .about-section .about-highlight {
        font-size: 18px;
    }
}

.about-section .about-final-description {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5019607843);
    line-height: 1.6;
}

.about-section .about-final-description .text-bold {
    font-weight: 700;
}

@media (max-width: 768px) {
    .about-section .about-final-description {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .about-section .about-final-description {
        font-size: 16px;
    }
}

[dir="rtl"] .about-section .about-content {
    text-align: center;
}

[dir="rtl"] .about-section .about-description,
[dir="rtl"] .about-section .about-final-description,
[dir="rtl"] .about-section .about-highlight,
[dir="rtl"] .about-section .about-subtitle,
[dir="rtl"] .about-section .about-title {
    text-align: center;
}

@media (max-width: 992px) {
    .for-producer-section {
        min-height: auto;
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .for-producer-section {
        min-height: auto;
        padding: 60px 0;
    }
}

.for-producer-section .for-producer-container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1200px) {
    .for-producer-section .for-producer-container {
        max-width: 900px;
    }
}

@media (max-width: 992px) {
    .for-producer-section .for-producer-container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .for-producer-section .for-producer-container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .for-producer-section .for-producer-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

.for-producer-section .for-producer-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.for-producer-section .for-producer-label {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    color: #f8992c;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .for-producer-section .for-producer-label {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .for-producer-section .for-producer-label {
        font-size: 24px;
    }
}

.for-producer-section .for-producer-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .for-producer-section .for-producer-title {
        font-size: 36px;
        margin-bottom: 12px;
    }
}

@media (max-width: 576px) {
    .for-producer-section .for-producer-title {
        font-size: 30px;
    }
}

.for-producer-section .for-producer-subtitle {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5019607843);
    margin-bottom: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .for-producer-section .for-producer-subtitle {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .for-producer-section .for-producer-subtitle {
        font-size: 18px;
    }
}

.for-producer-section .for-producer-description {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5019607843);
    margin-bottom: 40px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .for-producer-section .for-producer-description {
        font-size: 18px;
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .for-producer-section .for-producer-description {
        font-size: 16px;
        margin-bottom: 25px;
    }
}

.for-producer-section .for-producer-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .for-producer-section .for-producer-cards {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .for-producer-section .for-producer-cards {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 400px;
        margin: 20px auto 0;
    }
}

.for-producer-section .producer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 310px;
    margin: auto;
    transition: all 0.3s ease;
}

.for-producer-section .producer-card:hover {
    transform: translateY(-10px);
}

.for-producer-section .producer-card:hover .card-image img {
    transform: scale(1.05);
}

.for-producer-section .producer-card:hover .card-title {
    transform: scale(1.02);
}

.for-producer-section .producer-card .card-image {
    margin-bottom: 20px;
}

.for-producer-section .producer-card .card-image img {
    width: 173.21px;
    height: auto;
    max-width: 100%;
    transition: transform 0.3s ease;
}

@media (max-width: 992px) {
    .for-producer-section .producer-card .card-image img {
        width: 150px;
    }
}

@media (max-width: 768px) {
    .for-producer-section .producer-card .card-image img {
        width: 183.21px;
        max-width: auto;
    }
}

@media (max-width: 576px) {
    .for-producer-section .producer-card .card-image img {
        width: 140px;
    }
}

.for-producer-section .producer-card .card-title {
    font-size: clamp(28px, 3.5vw, 34px);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    transition: transform 0.3s ease;
}

.for-producer-section .producer-card .card-title.discover {
    color: #44bda4;
}

.for-producer-section .producer-card .card-title.build {
    color: #f8992c;
}

.for-producer-section .producer-card .card-title.collaboration {
    color: #8379b8;
}

@media (max-width: 768px) {
    .for-producer-section .producer-card .card-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .for-producer-section .producer-card .card-title {
        font-size: 28px;
    }
}

.for-producer-section .producer-card .card-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.for-producer-section .producer-card .card-description p {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5019607843);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .for-producer-section .producer-card .card-description p {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .for-producer-section .producer-card .card-description p {
        font-size: 16px;
    }
}

[dir="rtl"] .for-producer-section .for-producer-content {
    text-align: center;
}

[dir="rtl"] .for-producer-section .for-producer-description,
[dir="rtl"] .for-producer-section .for-producer-label,
[dir="rtl"] .for-producer-section .for-producer-subtitle,
[dir="rtl"] .for-producer-section .for-producer-title {
    text-align: center;
}

[dir="rtl"] .for-producer-section .producer-card {
    text-align: center;
}

[dir="rtl"] .for-producer-section .producer-card .card-description p {
    text-align: center;
}

@keyframes heroGradientShift {
    0% {
        opacity: 0.12;
    }

    25% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.12;
    }

    75% {
        opacity: 0.1;
    }

    100% {
        opacity: 0.1;
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0 0;
        transform: rotate(0);
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0 0;
    }
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    70% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }

    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
}

.for-talent-section {
    position: relative;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0;
}

@media (max-width: 992px) {
    .for-talent-section {
        min-height: 900px;
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .for-talent-section {
        min-height: 800px;
        padding: 60px 0;
    }
}

.for-talent-section .for-talent-container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1200px) {
    .for-talent-section .for-talent-container {
        max-width: 900px;
    }
}

@media (max-width: 992px) {
    .for-talent-section .for-talent-container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .for-talent-section .for-talent-container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .for-talent-section .for-talent-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

.for-talent-section .for-talent-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.for-talent-section .for-talent-label {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    color: #f8992c;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .for-talent-section .for-talent-label {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .for-talent-section .for-talent-label {
        font-size: 24px;
    }
}

.for-talent-section .for-talent-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: #000;
    margin-bottom: 40px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .for-talent-section .for-talent-title {
        font-size: 36px;
        margin-bottom: 30px;
    }
}

@media (max-width: 576px) {
    .for-talent-section .for-talent-title {
        font-size: 30px;
    }
}

.for-talent-section .for-talent-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    width: 100%;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .for-talent-section .for-talent-cards {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .for-talent-section .for-talent-cards {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 400px;
        margin: 20px auto 0;
    }
}

.for-talent-section .talent-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 310px;
    margin: auto;
    transition: all 0.3s ease;
}

.for-talent-section .talent-card:hover {
    transform: translateY(-10px);
}

.for-talent-section .talent-card:hover .card-image img {
    transform: scale(1.05);
}

.for-talent-section .talent-card:hover .card-title {
    transform: scale(1.02);
}

.for-talent-section .talent-card .card-image {
    margin-bottom: 20px;
    min-height: 180px;
}

.for-talent-section .talent-card .card-image img {
    width: 173.21px;
    height: auto;
    max-width: 100%;
    transition: transform 0.3s ease;
}

@media (max-width: 992px) {
    .for-talent-section .talent-card .card-image img {
        width: 150px;
    }
}

@media (max-width: 768px) {
    .for-talent-section .talent-card .card-image img {
        width: 183.21px;
        max-width: auto;
    }
}

@media (max-width: 576px) {
    .for-talent-section .talent-card .card-image img {
        width: 140px;
    }
}

.for-talent-section .talent-card .card-title {
    font-size: clamp(28px, 3.5vw, 34px);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
    transition: transform 0.3s ease;
}

.for-talent-section .talent-card .card-title.create {
    color: #44bda4;
}

.for-talent-section .talent-card .card-title.discover {
    color: #f8992c;
}

.for-talent-section .talent-card .card-title.connections {
    color: #8379b8;
}

@media (max-width: 768px) {
    .for-talent-section .talent-card .card-title {
        font-size: 32px;
    }
}

@media (max-width: 576px) {
    .for-talent-section .talent-card .card-title {
        font-size: 28px;
    }
}

.for-talent-section .talent-card .card-description {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.for-talent-section .talent-card .card-description p {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5019607843);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .for-talent-section .talent-card .card-description p {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    .for-talent-section .talent-card .card-description p {
        font-size: 16px;
    }
}

[dir="rtl"] .for-talent-section .for-talent-content {
    text-align: center;
}

[dir="rtl"] .for-talent-section .for-talent-label,
[dir="rtl"] .for-talent-section .for-talent-title {
    text-align: center;
}

[dir="rtl"] .for-talent-section .talent-card {
    text-align: center;
}

[dir="rtl"] .for-talent-section .talent-card .card-description p {
    text-align: center;
}

@media (max-width: 992px) {
    .how-it-works-section {
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .how-it-works-section {
        padding: 60px 0;
    }
}

.how-it-works-section .how-it-works-container {
    width: 100%;
    max-width: 1344px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1400px) {
    .how-it-works-section .how-it-works-container {
        max-width: 1200px;
    }
}

@media (max-width: 1200px) {
    .how-it-works-section .how-it-works-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .how-it-works-section .how-it-works-container {
        max-width: 720px;
    }
}

@media (max-width: 768px) {
    .how-it-works-section .how-it-works-container {
        max-width: 540px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section .how-it-works-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

.how-it-works-section .how-it-works-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.how-it-works-section .how-it-works-label {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    color: #f8992c;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .how-it-works-section .how-it-works-label {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section .how-it-works-label {
        font-size: 24px;
    }
}

.how-it-works-section .how-it-works-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .how-it-works-section .how-it-works-title {
        font-size: 36px;
        margin-bottom: 12px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section .how-it-works-title {
        font-size: 30px;
    }
}

.how-it-works-section .how-it-works-subtitle {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5019607843);
    margin-bottom: 0;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .how-it-works-section .how-it-works-subtitle {
        font-size: 20px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section .how-it-works-subtitle {
        font-size: 18px;
    }
}

.how-it-works-section .how-it-works-description {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5019607843);
    margin-bottom: 50px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .how-it-works-section .how-it-works-description {
        font-size: 18px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section .how-it-works-description {
        font-size: 16px;
        margin-bottom: 30px;
    }
}

.how-it-works-section .steps-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

@media (max-width: 768px) {
    .how-it-works-section .steps-container {
        gap: 30px;
    }
}

.how-it-works-section .steps-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

@media (max-width: 992px) {
    .how-it-works-section .steps-row {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .how-it-works-section .steps-row {
        flex-direction: column;
        gap: 30px;
    }
}

.how-it-works-section .step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 312px;
    transition: all 0.3s ease;
}

.how-it-works-section .step-item:hover {
    transform: translateY(-10px);
}

.how-it-works-section .step-item:hover .step-image {
    box-shadow: 0 0 50px 12px rgba(0, 0, 0, 0.1647058824);
}

.how-it-works-section .step-item:hover .step-image img {
    transform: scale(1.02);
}

@media (max-width: 992px) {
    .how-it-works-section .step-item {
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .how-it-works-section .step-item {
        max-width: 312px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section .step-item {
        max-width: 100%;
    }
}

.how-it-works-section .step-image {
    width: 312px;
    height: 245px;
    background: #fff;
    box-shadow: 0 0 40px 8px rgba(0, 0, 0, 0.1019607843);
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.how-it-works-section .step-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

@media (max-width: 992px) {
    .how-it-works-section .step-image {
        width: 280px;
        height: 220px;
    }
}

@media (max-width: 768px) {
    .how-it-works-section .step-image {
        width: 312px;
        height: 245px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section .step-image {
        width: 100%;
        height: 200px;
    }
}

.how-it-works-section .step-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.how-it-works-section .step-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    gap: 22px;
}

.how-it-works-section .step-text {
    color: #647082;
    font-weight: 500;
    font-size: 18px;
}

@media (max-width: 576px) {
    .how-it-works-section .step-text {
        font-size: 16px;
    }
}

.how-it-works-section .step-number {
    width: 24px;
    height: 24px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.how-it-works-section .step-number.step-1 {
    background: #f8992c;
}

.how-it-works-section .step-number.step-2 {
    background: #44bda4;
}

.how-it-works-section .step-number.step-3 {
    background: #8379b8;
}

.how-it-works-section .step-number.step-4 {
    background: #fe2c55;
}

.how-it-works-section .step-title {
    color: #333;
    font-size: clamp(22px, 2.5vw, 26px);
    font-weight: 700;
    margin-bottom: 8px;
}

@media (max-width: 576px) {
    .how-it-works-section .step-title {
        font-size: 20px;
    }
}

.how-it-works-section .step-description {
    font-size: clamp(13px, 1.5vw, 15px);
    color: #647082;
    font-weight: 500;
    line-height: 1.5;
}

@media (max-width: 576px) {
    .how-it-works-section .step-description {
        font-size: 14px;
    }
}

.how-it-works-section .step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    .how-it-works-section .step-arrow svg {
        width: 40px;
        height: 16px;
    }
}

@media (max-width: 768px) {
    .how-it-works-section .step-arrow {
        display: none;
    }
}

[dir="rtl"] .how-it-works-section .how-it-works-content {
    text-align: center;
}

[dir="rtl"] .how-it-works-section .how-it-works-description,
[dir="rtl"] .how-it-works-section .how-it-works-label,
[dir="rtl"] .how-it-works-section .how-it-works-subtitle,
[dir="rtl"] .how-it-works-section .how-it-works-title {
    text-align: center;
}

[dir="rtl"] .how-it-works-section .step-item {
    text-align: center;
}

[dir="rtl"] .how-it-works-section .step-item .step-content {
    text-align: center;
}

[dir="rtl"] .how-it-works-section .step-item .step-description {
    text-align: center;
}

[dir="rtl"] .how-it-works-section .step-arrow {
    transform: scaleX(-1);
}

.verify-container {
    display: flex;
    justify-content: center;
    background-size: cover;
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 5;
}

.verify-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: radial-gradient(circle at 20% 20%, #f8992c 0, transparent 50%),
        radial-gradient(circle at 20% 80%, #8379b8 0, transparent 50%),
        radial-gradient(circle at 80% 20%, #44bda4 0, transparent 50%),
        radial-gradient(circle at 80% 80%, #fe2c55 0, transparent 50%);
    mix-blend-mode: multiply; */
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.verify-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(
        45deg,
        rgba(248, 153, 44, 0.1) 0,
        rgba(131, 121, 184, 0.1) 25%,
        rgba(68, 189, 164, 0.1) 50%,
        rgba(254, 44, 85, 0.1) 75%,
        rgba(248, 153, 44, 0.1) 100%
    ); */
    z-index: -1;
}

.verify-container .center-col {
    width: 40%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 10%;
    padding-bottom: 300px;
}

.verify-container .center-col .title {
    color: #f05271;
    font-size: clamp(24px, 2vw, 48px);
    font-weight: 700;
    margin-bottom: 20px;
}

.verify-container .center-col .sub-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 30px;
}

@media (max-width: 309px) {
    .verify-container .center-col .sub-title {
        padding-left: 2%;
        width: 100%;
    }
}

.verify-container input {
    width: 95%;
    height: 60px;
    padding: 0 30px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    opacity: 1;
    border-radius: 168px;
    border: none;
    outline: 0;
    margin-bottom: 20px;
}

.verify-container .main-button {
    width: 95%;
    height: 60px;
    border-radius: 168px;
    outline: 0;
    border: none;
    margin-top: 30px;
    font-weight: 700;
    color: #fff;
    font-size: 24px;
}

.verify-container .center-col a {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    transition: color 0.5s ease;
}

.verify-container .center-col a:hover {
    color: #f05271;
}

@media (max-width: 1300px) {
    .verify-container {
        background-image: none;
        min-height: 100vh;
    }

    .verify-container .center-col {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 90%;
    }
}
/*
.login-container {
    display: flex;
    justify-content: center;
    background-size: cover;

    width: 100%;
    min-height: 100vh;
    z-index: 5;
    position: relative;
}

.login-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, #f8992c 0, transparent 50%),
        radial-gradient(circle at 20% 80%, #8379b8 0, transparent 50%),
        radial-gradient(circle at 80% 20%, #44bda4 0, transparent 50%),
        radial-gradient(circle at 80% 80%, #fe2c55 0, transparent 50%);
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.login-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   background: linear-gradient(
        45deg,
        rgba(248, 153, 44, 0.1) 0,
        rgba(131, 121, 184, 0.1) 25%,
        rgba(68, 189, 164, 0.1) 50%,
        rgba(254, 44, 85, 0.1) 75%,
        rgba(248, 153, 44, 0.1) 100%
    );
    z-index: -1;
} */

.login-container .slider-container {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login-container .slider {
    position: relative;
    width: 50%;
    height: 42px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2509803922) inset;
    margin-bottom: 60px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.login-container .slider span {
    position: relative;
    width: 50%;
    text-align: center;
    font-family: Baloo 2;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 700;
    z-index: 2;
    cursor: pointer;
    transition: color 0.5s ease;
}

.login-container .separator {
    display: flex;
    align-items: center;
    margin: 10px 43px;
    color: #ccc;
    font-size: 24px;
    font-weight: 700;
    width: 90%;
}

.login-container .separator::after,
.login-container .separator::before {
    content: "";
    flex: 1;
    border-bottom: 3px solid #ccc;
    margin: auto 0;
}

.login-container .separator::before {
    margin-right: 15px;
}

.login-container .separator::after {
    margin-left: 15px;
}

.login-container .center-col {
    width: 45%;
    margin-top: 180px;
    text-align: center;
}

.login-container .center-col .title {
    font-family: Baloo 2;
    font-weight: 500;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0;
    color: #f05271;
    margin-bottom: 29px;
}

.login-container .center-col .sub-title {
    font-family: Baloo 2;
    font-weight: 700;
    font-size: clamp(18px, 5vw, 48px);
    line-height: 100%;
    letter-spacing: 0;
    margin: 0;
}

.login-container .center-col .input {
    padding: 0 30px;
    width: 80%;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    opacity: 1;
    border-radius: 168px;
    border: none;
    outline: 0;
    margin-bottom: 31px;
}

@media (max-width: 1300px) {
    .login-container .center-col .input {
        margin-bottom: 3px;
    }
}

.login-container .center-col input {
    padding: 0 24px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    opacity: 1;
    border-radius: 168px;
    border: none;
    outline: 0;
    margin-bottom: 24px;
    width: 80%;
}

.login-container input::-moz-placeholder {
    color: #aaa;
    font-weight: 500;
    font-size: 18px;
    padding-right: 5px;
    opacity: 1;
}

.login-container input::placeholder {
    color: #aaa;
    font-weight: 500;
    font-size: 18px;
    padding-right: 5px;
    opacity: 1;
}

.login-container .center-col button {
    width: 80%;
    height: 60px;
    font-weight: 700;
    font-size: clamp(18px, 5vw, 24px);
    border: none;
    border-radius: 168px;
    outline: 0;
    margin-bottom: 25px;
    cursor: pointer;
}

.login-container .center-col .signin {
    background-color: #f05271;
    color: #fff;
    transition:
        background-color 1.5s ease,
        color 1.5s ease,
        border-color 1.5s ease,
        transform 1.5s ease;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
}

.login-container .center-col .signin:hover {
    background-color: #8379b8;
}

.login-container .center-col .btn-1 {
    border: 2px solid #4284f3;
    background-color: transparent;
    font-size: clamp(18px, 5vw, 24px);
    color: #4284f3;
    z-index: 5;
    transition:
        background-color 2s ease,
        color 2s ease,
        border-color 2s ease,
        transform 2s ease;
    cursor: pointer;
}

.login-container .center-col .btn-1:hover {
    background-color: #f05271;
    color: #fff;
    border-color: #f05271;
    transform: scale(1.05);
}

.login-container .center-col .btn-2 {
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    transition:
        background-color 2s ease,
        color 2s ease,
        border-color 2s ease,
        transform 2s ease;
}

.login-container .center-col .btn-2:hover {
    background-color: #f05271;
    color: #fff;
    border-color: #f05271;
    transform: scale(1.05);
}

.login-container .no-account {
    display: flex;
    width: 100%;
    padding-left: 13%;
}

html[lang="ar"].login-container .no-account {
    padding-right: 13%;
}

.login-container .no-account a {
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    margin-left: 10px;
    color: #f8992c;
}

html[lang="ar"] .login-container .no-account a {
    margin-left: -28px;
}

.login-container .remember {
    display: flex;
    width: 86%;
    margin-bottom: 20px;
    padding-left: 13%;
    margin-top: 5px;
}

html[lang="ar"] .login-container .no-account {
    padding-right: 13%;
}

html[lang="ar"] .login-container .remember {
    padding-right: 13%;
    padding-left: 0;
}

.login-container .remember .p-1 {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 0;
    line-height: 1;
    width: 45%;
}

.login-container .remember .p-2 {
    color: #f05271;
    width: 55%;
    display: flex;
    align-items: flex-start;
    padding: 0;
    justify-content: flex-end;
    margin-top: -8px;
}

.login-container .login-container .remember .p-2 {
    color: #f05271;
    font-size: clamp(12px, 5vw, 14px);
    font-weight: 500;
    margin-bottom: 0;
}

.login-container .remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #f05271;
    cursor: pointer;
    position: relative;
}

@media (max-width: 1300px) {
    .login-container {
        background-image: none;
        min-height: 100vh;
    }

    .login-container .center-col {
        display: flex;
        justify-content: center;
        align-items: center;
        height: auto;
        flex-direction: column;
        margin-left: 0;
        width: 90%;
    }

    .login-container .remember {
        padding-left: 12%;
        padding-right: 12%;
        width: 100%;
    }

    .login-container .center-col input {
        margin-bottom: 0;
    }
}

@media (max-width: 700px) {
    .login-container .slider {
        width: 70%;
    }
}

@media (max-width: 500px) {
    .login-container .slider {
        width: 90%;
    }

    .login-container .center-col input {
        width: 90%;
        margin-bottom: 0;
    }

    .login-container .center-col button {
        width: 90%;
    }
}

@media (max-width: 420px) {
    .login-container .remember {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 0;
        padding-right: 0;
    }

    .login-container .remember .p-2 {
        align-items: flex-start;
        justify-content: flex-start;
        margin-top: 2px;
        width: 100%;
    }

    .login-container .remember .p-1 {
        height: 21px;
        width: 100%;
    }
}

@media (max-width: 374px) {
    .login-container .no-account {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-container .no-account a {
        margin-left: 0;
    }
}

@media (max-width: 1284px) {
    html[lang="ar"] .login-container .remember .p-2 {
        margin-left: 10%;
    }
}

.signup-container .separator {
    display: flex;
    align-items: center;
    margin: 17px 43px;
    color: #ccc;
    font-size: 24px;
    font-weight: 700;
    width: 90%;
}

.signup-container .separator::after,
.signup-container .separator::before {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
    margin: auto 0;
}

.signup-container .separator::before {
    margin-right: 15px;
}

.signup-container .separator::after {
    margin-left: 15px;
}

.signup-container .center-col {
    width: 45%;
    margin-top: 10%;
    height: 100%;
    text-align: center;
}

.signup-container .center-col .sup-content {
    color: #f05271;
    font-size: 18;
    font-weight: 500;
}

.signup-container .center-col .top-conent p {
    font-family: Baloo 2;
    font-weight: 700;
    font-size: clamp(24px, 4vw, 48px);
    line-height: 100%;
    letter-spacing: 0;
    color: #000;
}

.signup-container .center-col .top-conent .p-1 {
    margin-bottom: 0;
}

.signup-container .roles {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 46px;
}

@media (max-width: 686px) {
    .signup-container .roles {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}

html[lang="ar"] .signup-container .roles .producer {
    padding-left: 10px;
}

.signup-container .roles div {
    height: 116px;
    width: 40%;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    display: flex;
    border-radius: 33px;
    align-items: center;
    margin-right: 36px;
    padding-right: 10px;
}

@media (max-width: 686px) {
    .signup-container .roles div {
        width: 60%;
    }
}

.signup-container .roles .div-1 {
    padding-left: 20px;
    padding-right: 10px;
    transition: background-color 3s ease;
    cursor: pointer;
}

@media (max-width: 686px) {
    .signup-container .roles .div-1 {
        margin-bottom: 28px;
    }
}

@media (max-width: 512px) {
    .signup-container .roles .div-1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 10px;
        width: 80%;
        margin: 0;
    }
}

html[lang="ar"] .signup-container .roles .div-1 {
    padding-left: 5px;
}

.signup-container .roles .div-1:hover {
    background-color: #f05271;
    box-shadow: 0 4px 21px 0 rgba(0, 0, 0, 0.1490196078);
    color: #fff;
}

.signup-container .roles .div-1 a,
.signup-container .roles .div-2 a {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

.signup-container .roles .div-1 span {
    font-size: clamp(12px, 5vw, 18px);
    font-weight: 700;
    color: grey;
}

.signup-container .roles .div-2 {
    padding-right: 20px;
    transition: background-color 3s ease;
    cursor: pointer;
}

.signup-container .roles .div-2:hover {
    background-color: #8379b8;
    box-shadow: 0 4px 21px 0 rgba(0, 0, 0, 0.1490196078);
    color: #fff;
}

.signup-container .roles .div-2:hover span {
    color: #fff;
}

.signup-container .roles .div-1:hover span {
    color: #fff;
}

.div-1:hover img {
    filter: brightness(0) invert(1);
}

.div-2:hover img {
    filter: brightness(0) invert(1);
}

html[lang="ar"] .signup-container .roles .div-2 img {
    padding-left: 5%;
}

@media (max-width: 512px) {
    html[lang="ar"] .signup-container .roles .div-2 img {
        padding-left: 0;
    }
}

.signup-container .roles .div-2 span {
    font-size: 18px;
    font-weight: 700;
    color: grey;
}

.signup-container .roles .div-1 img {
    padding-left: 41px;
    padding-right: 5%;
}

@media (max-width: 512px) {
    .signup-container .roles .div-1 img {
        padding-right: 20%;
    }
}

html[lang="ar"] .signup-container .roles .div-1 img {
    padding-left: 21px;
}

.signup-container .roles .div-2 img {
    padding-left: 8%;
    padding-right: 5px;
}

.signup-container .line-text {
    text-align: center;
    border-bottom: 2px solid rgba(0, 0, 0, 0.2509803922);
    line-height: 0.1em;
    margin: 25px 0;
}

.signup-container .line-text span {
    background: #fff;
    padding: 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.2509803922);
}

.signup-container .center-col button {
    width: 95%;
    height: 60px;
    font-weight: 700;
    font-size: 24px;
    border: none;
    border-radius: 168px;
    outline: 0;
    margin-bottom: 13px;
}

.signup-container .center-col .have-account span {
    font-size: 16px;
    font-weight: 600;
}

.signup-container .center-col .have-account a {
    color: #f05271;
    font-size: 16px;
    font-weight: 700;
}

.signup-container .center-col .btn-1 {
    border: 2px solid #4284f3;
    background-color: transparent;
    color: #4284f3;
    z-index: 5;
    transition:
        background-color 2s ease,
        color 2s ease,
        border-color 2s ease,
        transform 2s ease;
    cursor: pointer;
}

.signup-container .center-col .btn-1:hover {
    background-color: #f05271;
    color: #fff;
    border-color: #f05271;
    transform: scale(1.05);
}

.signup-container .center-col .btn-2 {
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    transition:
        background-color 2s ease,
        color 2s ease,
        border-color 2s ease,
        transform 2s ease;
}

.signup-container .center-col .btn-2:hover {
    background-color: #f05271;
    color: #fff;
    border-color: #f05271;
    transform: scale(1.05);
}

@media (max-width: 1300px) {
    .signup-container {
        background-image: none;
        align-items: center;
    }

    .signup-container .center-col {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        flex-direction: column;
        margin-top: 28%;
        margin-left: 0;
        width: 90%;
    }
}

.crew-container {
    width: 100%;
    min-width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 108px;
    position: relative;
    z-index: 5;
}

.crew-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: radial-gradient(circle at 20% 20%, #f8992c 0, transparent 50%),
        radial-gradient(circle at 20% 80%, #8379b8 0, transparent 50%),
        radial-gradient(circle at 80% 20%, #44bda4 0, transparent 50%),
        radial-gradient(circle at 80% 80%, #fe2c55 0, transparent 50%);
    mix-blend-mode: multiply; */
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.crew-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(
        45deg,
        rgba(248, 153, 44, 0.1) 0,
        rgba(131, 121, 184, 0.1) 25%,
        rgba(68, 189, 164, 0.1) 50%,
        rgba(254, 44, 85, 0.1) 75%,
        rgba(248, 153, 44, 0.1) 100%
    ); */
    z-index: -1;
}

/* .crew-container .top-content {
    display: inline-block;
    margin-left: 15%;
    margin-top: 10%;
} */

#step3,
#step4,
#step5,
#step6,
#step7,
.crew-container #step2 {
    display: none;
}

.crew-container .top-content .span-1 {
    font-size: 36px;
    font-weight: 700;
    margin-right: 10px;
}

.crew-container .top-content .span-2 {
    color: #f05271;
    font-weight: 500;
    font-size: 24px;
}

.crew-container .center-col {
    display: flex;
    margin-top: 5%;
    width: 98%;
    justify-content: center;
    margin-left: 2%;
}

.crew-container .col-1 {
    width: 22%;
    margin-left: -5%;
}

.crew-container .col-1 span {
    background-color: rgba(128, 128, 128, 0.1019607843);
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 18px;
    color: grey;
    width: 40px;
    height: 40px;
    border: grey 2px solid;
    border-radius: 50%;
    z-index: 1;
    position: relative;
}

.crew-container .col-1 .number::after {
    content: "";
    display: block;
    height: 80px;
    width: 2px;
    background-color: #d3d3d3;
    position: absolute;
    top: 100%;
}

.crew-container .col-1 .row {
    cursor: pointer;
    display: flex;
    margin-left: 5px;
    height: 118px;
}

.crew-container .row div h3 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 0;
}

.crew-container .row div p {
    margin-top: 5px;
    color: grey;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.crew-container .col-1 .row div {
    margin-left: 20px;
    width: 70%;
}

.crew-container .row.active h3 {
    color: #f05271;
}

.crew-container .row.active span {
    background-color: #f05271;
    color: #fff;
    border: none;
    outline: 2px solid #f05271;
    outline-offset: 5px;
}

.crew-container .row.active1 span {
    background-color: #44bda4;
    color: #fff;
    border: none;
    outline: 2px solid #44bda4;
    outline-offset: 5px;
}

.crew-container .row.active1 h3 {
    color: #44bda4;
}

.crew-container .col-2 {
    width: 45%;
}

.crew-container .col-2 .content .top-content-2 {
    font-weight: 700;
    font-size: clamp(36px, 5vw, 18px);
    margin-bottom: 5px;
}

.crew-container input[type="radio"] {
    accent-color: #f05271;
}

.crew-container .content label {
    font-size: 24px;
    font-weight: 500;
}

.crew-container .col-2 .content .exprience {
    font-weight: 700;
    font-size: clamp(36px, 5vw, 18px);
    margin-top: 5%;
    margin-bottom: 8px;
}

.crew-container .col-2 #client {
    margin-left: 7%;
}

.crew-container .radio-group {
    display: flex;
    gap: 40px;
}

.crew-container .radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.crew-container .radio-container input {
    display: none;
}

.crew-container .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #000;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    position: relative;
}

.crew-container .radio-container input:checked + .checkmark::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #f05271;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.crew-container .custom-dropdown {
    width: 200px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.crew-container .custom-dropdown .selected {
    padding: 10px 15px;
    border-radius: 100px;
    background-color: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: grey;
    font-size: 16px;
    font-weight: 700;
}

.crew-container .custom-dropdown .selected i {
    pointer-events: none;
    transition: transform 0.3s ease;
    margin-left: 37px;
}

.crew-container .custom-dropdown.open .selected i {
    transform: rotate(180deg);
}

.crew-container .custom-dropdown .options {
    position: absolute;
    width: 100%;
    border-radius: 12px;
    height: 100px;
    transition: max-height 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
    opacity: 0;
}

.crew-container .custom-dropdown .options div {
    padding: 10px 15px;
    background-color: #fff;
    cursor: pointer;
}

.crew-container .custom-dropdown .options div:hover {
    background-color: #e0e0e0;
}

.crew-container .options.open {
    max-height: 200px;
    opacity: 1;
}

.crew-container .intro p {
    font-size: 36px;
    font-weight: 700;
    margin-top: 70px;
    letter-spacing: 0;
}

.crew-container .intro textarea {
    width: 90%;
    resize: none;
    height: 250px;
    outline: 0;
    border: none;
    padding: 30px;
    border-radius: 0 50px 50px 50px;
}

.crew-container textarea::-moz-placeholder {
    color: grey;
    font-size: 20px;
    font-weight: 500;
}

.crew-container textarea::placeholder {
    color: grey;
    font-size: 20px;
    font-weight: 500;
}

.crew-container .col-2 .row-3 {
    width: 100%;
    display: flex;
    margin-top: 8%;
    align-items: flex-start;
}

.crew-container .back {
    width: 20%;
    background-color: grey;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    border: none;
    outline: 0;
    height: 40px;
    border-radius: 168px;
    margin-left: 2%;
    transition: background-color 1.5s ease;
}

.crew-container .back:hover {
    background-color: #f05271;
}

.crew-container .back-btn {
    width: 70%;
}

.crew-container .skip {
    width: 40%;
    height: 80px;
}

.crew-container .skip span {
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: color 1.5s ease;
}

.crew-container .skip span:hover {
    color: #f05271;
}

.crew-container .skip button {
    outline: 0;
    border: none;
    height: 48px;
    width: 48px;
    border-radius: 35px;
    background-color: #f05271;
    transition: background-color 1.5s ease;
}

.crew-container .skip button i {
    color: #fff;
    font-size: 25px;
}

.crew-container .skip button:hover {
    background-color: grey;
}

.crew-container .col-2 .content.step-2 .top-content-step-2 {
    font-weight: 700;
    font-size: clamp(20px, 5vw, 36px);
    margin-bottom: 0;
    width: 80%;
    line-height: 38px;
}

.crew-container .col-2 .content.step-2 .sub-content-2 {
    font-weight: 700;
    font-size: clamp(36px, 5vw, 12px);
    margin-top: 0;
    margin-bottom: 5px;
}

.crew-container .col-2 .step-2.content .input-with-btn {
    position: relative;
    width: 80%;
    margin-top: 35px;
}

.crew-container .col-2 .step-2.content .input-with-btn input {
    width: 100%;
    padding: 15px 60px 15px 24px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    outline: 0;
}

.crew-container .col-2 .step-2.content .input-with-btn input::-moz-placeholder {
    color: #f05271;
    font-weight: 500;
    font-size: 20px;
}

.crew-container .col-2 .step-2.content .input-with-btn input::placeholder {
    color: #f05271;
    font-weight: 500;
    font-size: 20px;
}

.crew-container .col-2 .step-2.content .input-with-btn .add-btn {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 6px;
    background: #f05271;
    color: #fff;
    border-radius: 50px;
    font-size: 25px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crew-container .col-2 .step-2.content .followers {
    font-size: clamp(36px, 5vw, 18px);
    font-weight: 700;
    margin-left: 15px;
    margin-top: 95px;
}

.crew-container .col-2 .step-2.content .result .result-1 {
    background-color: #fff;
    width: 80%;
    height: 60px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding-left: 4%;
    margin-top: 20px;
    position: relative;
}

.crew-container .result-1 {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
    background-color: #44bda4;
    border-radius: 8px;
    padding: 10px 40px;
    margin-bottom: 10px;
}

.crew-container .result-1 input.text-item {
    width: 100%;
    background: 0 0;
    border: none;
    outline: 0;
    color: #000;
    font-size: 16px;
    padding-left: 60px;
    padding-right: 70px;
}

.crew-container .result-1 .glob.icon-left {
    position: absolute;
    left: 35px;
}

.crew-container .result-1 .icon-1 {
    position: absolute;
    right: 50px;
    top: 50%;
    cursor: pointer;
    background-color: grey;
    transform: translateY(-50%);
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crew-container .result-1 .icon-2 {
    position: absolute;
    right: 10px;
    top: 50%;
    background-color: grey;
    transform: translateY(-50%);
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crew-container .col-2 .step-2.content .social .youtube {
    position: relative;
    width: 80%;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.crew-container .col-2 .step-2.content .social div input {
    width: 100%;
    padding-left: 90px;
    padding-right: 70px;
    height: 60px;
    border-radius: 50px;
    outline: 0;
    border: none;
}

.crew-container .col-2 .step-2.content .social div .icon-left {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 30px;
}

.crew-container .col-2 .step-2.content .social div .icon-3 {
    position: absolute;
    right: 50px;
    top: 50%;
    background-color: grey;
    transform: translateY(-50%);
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crew-container .col-2 .step-2.content .social div .icon-4 {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: grey;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.crew-container .col-2 .step-3.content .top-content-3 {
    font-weight: 700;
    font-size: clamp(36px, 5vw, 16px);
    line-height: 57px;
    margin-top: -5px;
    z-index: -1;
}

.crew-container .col-2 .step-3.content .sub-content-3 {
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 20px;
}

.crew-container .col-2 .step-3.content .custom-select {
    width: 100%;
    position: relative;
}

.crew-container .col-2 .step-3.content .custom-select.step-3 {
    margin-bottom: 40px;
}

.crew-container #step5 .custom-select,
.crew-container .location-step .custom-select {
    margin-bottom: 41px;
}

.crew-container #step5 .top-content-5,
.crew-container .location-step .top-content-5 {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 36px);
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.crew-container .col-2 .step-3.content .custom-select.half-width {
    width: 50%;
}

.crew-container .col-2 .step-3.content .custom-select .selected {
    background-color: #fff;
    height: 62px;
    border-radius: 30px;
}

.crew-container .col-2 #step5 .custom-select .selected {
    height: 45px;
    background-color: #fff;
    border-radius: 30px;
}

.crew-container .col-2 #step5 .custom-select .selected span {
    position: absolute;
    left: 40px;
    top: 10px;
}

.crew-container .col-2 #step5 .custom-select .selected i {
    position: absolute;
    top: 15px;
    right: 48px;
}

.crew-container .col-2 .step-3.content .custom-select .selected i {
    position: absolute;
    right: 48px;
    top: 20px;
    cursor: pointer;
}

.crew-container .col-2 .step-3.content .custom-select .selected .open {
    transform: rotate(180deg);
}

/* .crew-container .col-2 .step-3.content .custom-select .selected span {
    position: absolute;
    left: 40px;
    top: 20px;
} */

.crew-container .custom-select .options {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.5s ease;
}

.crew-container .col-2 .step-3.content .custom-select .options.open-option {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 3px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 5;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.crew-container .col-2 .step-3.content .custom-select .options div {
    padding: 10px 0 10px 20px;
}

.crew-container
    .col-2
    .step-3.content
    .custom-select
    .options
    .option-item:hover {
    background-color: #f05271;
    border-radius: 10px;
    height: 45px;
}

.crew-container .col-2 .container-content .row-2 {
    display: flex;
    width: 100%;
}

.crew-container .col-2 .container-content .row-2 .level-exprience {
    width: 50%;
}

.crew-container .col-2 .container-content .row-2 .level-exprience p {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 24px;
}

.crew-container .col-2 .container-content .row-2 .team-size {
    width: 50%;
    margin-top: 3px;
}

.crew-container .col-2 .container-content .row-2 .team-size div {
    margin-left: 26px;
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 15px;
}

.crew-container .col-2 .container-content .row-2 .team-size div span {
    margin-left: 5px;
    font-size: 14px;
    line-height: 15px;
    font-weight: 500px;
    color: #f05271;
}

.crew-container .col-2 .Available-equipment .title {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 8px;
    margin-left: 5px;
}

.crew-container .col-2 .container-content .row-2 .team-size input {
    width: 95%;
    padding: 0 30px;
    border-radius: 30px;
    height: 62px;
    outline: 0;
    border: none;
    margin-left: 20px;
}

.crew-container .col-2 .Available-equipment {
    margin-bottom: 20px;
}

.crew-container .col-2 .equipment-tags {
    background-color: #fff;
    border-radius: 30px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
}

.crew-container .col-2 .equipment-tags.skills {
    min-height: 156px;
}

.crew-container .col-2 .equipment-tags.equipments {
    min-height: 156px;
}

.crew-container .col-2 .equipment-tags.languages {
    min-height: 237px;
    width: 86%;
}

.crew-container .col-2 .equipment-tags .tags {
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 5px;
}

.crew-container .col-2 .equipment-tags .tag-item {
    border: 1px solid grey;
    border-radius: 100px;
    padding: 5px 15px 5px 15px;
    margin-left: 5px;
    margin-bottom: 10px;
    display: inline-block;
}

.crew-container .col-2 .equipment-tags .tag-item span {
    margin-right: 8px;
}

.crew-container .col-2 .tag-item .delete-icon {
    cursor: pointer;
    font-size: 14px;
}

.crew-container .col-2 .equipment-tags input {
    border: none;
    outline: 0;
    height: 26px;
    padding-left: 15px;
    margin-top: 20px;
    border-radius: 30px;
    min-width: 120px;
}

.crew-container .col-2 .suggestions {
    list-style: none;
    width: 100%;
    position: absolute;
    padding: 0;
    top: 100%;
    border-radius: 10px;
    background-color: #fff;
    z-index: 999;
}

.crew-container .suggestions.hidden {
    opacity: 0;
    pointer-events: none;
}

.crew-container .suggestions.show {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}

.crew-container .col-2 .suggestions li {
    padding: 10px 0 10px 15px;
}

.crew-container .col-2 .suggestions li:hover {
    background-color: #f05271;
    width: 100%;
    display: block;
    border-radius: 10px;
    cursor: pointer;
}

.crew-container .Available-equipment.languages {
    min-height: 237px;
}

.crew-container .upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 50px;
    width: 85%;
}

.crew-container .upload.Showreel {
    height: 60px;
    border-radius: 50px;
    padding: 5px 30px;
}

.crew-container .upload.profile {
    padding: 5px 30px;
    margin-top: 15px;
    margin-bottom: 10%;
}

.crew-container .Showreel-file {
    margin-top: 10px;
}

.crew-container .Showreel-file span {
    padding-left: 10px;
    font-size: 24px;
    font-weight: 500;
    color: #000;
}

.crew-container .top-content-6 {
    margin-bottom: 30px;
    font-size: 30px;
    line-height: 25px;
    font-weight: 600;
}

.crew-container .Showreel-file img {
    width: 29px;
    height: 23px;
}

.crew-container .upload.work {
    border-radius: 50px;
    min-height: 156px;
    padding: 5px 30px;
    margin-bottom: 3%;
}

.crew-container .work-title {
    font-size: 30px;
    line-height: 25px;
    font-weight: 600px;
    margin-bottom: 10px;
}

.crew-container .work-subtitle {
    font-size: 18px;
    line-height: 15px;
    color: #f05271;
    margin-bottom: 20px;
    font-weight: 500;
}

.crew-container .upload.work .upload-btn {
    background-color: transparent;
    width: 30%;
    display: block;
    color: grey;
    font-size: 11px;
}

.crew-container .upload.work .upload-btn img {
    height: 16px;
    width: 19px;
    margin-bottom: 5px;
}

.crew-container .upload.work .upload-btn span {
    color: grey;
    font-weight: 600;
    font-size: 14px;
}

.crew-container .upload .previous-work {
    min-height: 112px;
    width: 100%;
    border: 1px dashed #cdcdcd;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

.crew-container .upload .preview {
    width: 74px;
    height: 74px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 61px;
}

.crew-container .upload .upload-btn {
    background: 0 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    background-color: #f05271;
    height: 59px;
    border-radius: 35px;
    width: 40%;
}

.crew-container .upload .upload-btn span {
    font-size: 20px;
    color: #fff;
    line-height: 14px;
    font-weight: 700;
    margin-left: 10px;
}

.crew-container .upload .file-input {
    display: none;
}

.crew-container .upload.Showreel .upload-btn {
    width: 36px;
    height: 36px;
    border-radius: 50px;
}

.crew-container .sub-title-7 {
    font-size: 16px;
    line-height: 19px;
    color: #f05271;
    font-weight: 500;
    margin-bottom: 20px;
}

.crew-container .crew-independents {
    line-height: 25px;
    font-size: 30px;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
}

.crew-container .crew-companies {
    line-height: 25px;
    font-size: 30px;
    font-weight: 600;
    margin-top: 60px;
    margin-bottom: 15px;
}

input[disabled] {
    background-color: #fff !important;
    color: #000;
}

@media (max-width: 1503px) {
    .crew-container {
        background-image: none;
    }

    .crew-container .center-col {
        flex-direction: column;
        margin-left: 4%;
        width: 95%;
    }

    /* .crew-container .top-content {
        margin-left: 4%;
        margin-top: 15%;
    } */

    .crew-container .center-col .col-1 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-left: -1%;
    }

    .crew-container .center-col .col-2 {
        width: 95%;
        margin-left: 0;
    }

    .crew-container .center-col .col-1 .row {
        width: 33%;
    }
}

@media (min-width: 1515px) {
    .center-col {
        width: 85%;
    }
}

@media (max-width: 1403px) {
    .crew-container .col-2 .step-2.content .followers {
        margin-top: 10px;
    }
}

@media (max-width: 1430px) {
    .crew-container .center-col {
        width: 95%;
    }
}

@media (max-width: 1106px) {
    .crew-container .center-col .col-1 .row {
        width: 50%;
    }

    .crew-container .col-2 .step-2.content .result .result-1 {
        width: 90%;
    }

    .crew-container .col-2 .step-2.content .social .youtube {
        width: 90%;
    }

    .crew-container .col-2 .step-2.content .input-with-btn {
        width: 90%;
    }
}

@media (max-width: 770px) {
    .crew-container .center-col .col-1 .row {
        width: 100%;
    }
}

@media (max-width: 770px) {
    .crew-container .top-content {
        margin-top: 23%;
    }

    .crew-container .center-col .col-2 .top-content-2 {
        margin-bottom: 20px;
    }

    .crew-container .radio-group {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 1059px) {
    .crew-container .center-col .back {
        width: 38%;
    }
}

@media (max-width: 684px) {
    .crew-container .dob-container {
        width: 90%;
    }

    .crew-container .intro textarea {
        width: 100%;
    }

    .crew-container .col-2 .step-3.content .top-content-3 {
        line-height: 36px;
    }

    .crew-container .col-2 .equipment-tags.languages {
        width: 99%;
    }

    .crew-container .upload.work .upload-btn {
        width: 59%;
    }

    .crew-container .upload.work {
        width: 100%;
    }

    .crew-container .upload.profile {
        width: 100%;
    }

    .crew-container .col-2 .container-content .row-2 {
        flex-direction: column;
    }

    .crew-container .col-2 .container-content .row-2 .level-exprience {
        width: 100%;
    }

    .crew-container .col-2 .container-content .row-2 .team-size {
        width: 100%;
        margin-left: 0;
    }

    .crew-container .col-2 .container-content .row-2 .team-size div {
        margin-left: 0;
    }

    .crew-container .col-2 .container-content .row-2 .team-size input {
        margin-left: 0;
    }
}

@media (max-width: 1070px) {
    .crew-container .col-2 .step-2.content .input-with-btn {
        width: 99%;
    }

    .crew-container .col-2 .step-2.content .social .youtube {
        width: 99%;
    }
}

@media (max-width: 523px) {
    .crew-container .upload-btn img {
        display: none;
    }

    .crew-container .upload .upload-btn {
        width: 51%;
    }

    .crew-container .upload.Showreel {
        width: 100%;
    }
}

.cast-container {
    width: 100%;
    min-width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    padding-bottom: 108px;
    position: relative;
    z-index: 5;
}
/* .cast-container .top-content {
    display: inline-block;
    margin-left: 15%;
    margin-top: 10%;
} */

#step3,
#step4,
#step5,
#step6,
#step7,
.cast-container #step2 {
    display: none;
}

.cast-container .top-content .span-1 {
    font-size: clamp(30px, 5vw, 36px);
    font-weight: 700;
    margin-right: 10px;
}

.cast-container .top-content .span-2 {
    color: #f05271;
    font-weight: 500;
    font-size: 24px;
}

.cast-container .center-col {
    display: flex;
    margin-top: 5%;
    width: 98%;
    justify-content: center;
    margin-left: 2%;
}

.cast-container .col-1 {
    width: 22%;
    margin-left: -5%;
}

.cast-container .col-1 span {
    background-color: rgba(128, 128, 128, 0.1019607843);
    align-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 18px;
    color: grey;
    width: 40px;
    height: 40px;
    border: grey 2px solid;
    border-radius: 50%;
    z-index: 1;
    position: relative;
}

.cast-container .col-1 .number::after {
    content: "";
    display: block;
    height: 80px;
    width: 2px;
    background-color: #d3d3d3;
    position: absolute;
    top: 100%;
}

.cast-container .col-1 .row {
    cursor: pointer;
    display: flex;
    margin-left: 5px;
    height: 118px;
}

.cast-container .row div h3 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 0;
}

.cast-container .row div p {
    margin-top: 5px;
    color: grey;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.cast-container .col-1 .row div {
    margin-left: 20px;
    width: 70%;
}

.cast-container .row.active h3 {
    color: #f05271;
}

.cast-container .row.active span {
    background-color: #f05271;
    color: #fff;
    border: none;
    outline: 2px solid #f05271;
    outline-offset: 5px;
}

.cast-container .row.active1 span {
    background-color: #44bda4;
    color: #fff;
    border: none;
    outline: 2px solid #44bda4;
    outline-offset: 5px;
}

.cast-container .row.active1 h3 {
    color: #44bda4;
}

.cast-container .col-2 {
    width: 45%;
}

.cast-container .col-2 .content .top-content-2 {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 36px);
    margin-bottom: 5px;
}

.cast-container input[type="radio"] {
    accent-color: #f05271;
}

.cast-container .content label {
    font-size: 24px;
    font-weight: 500;
}

.cast-container .col-2 .content .exprience {
    font-weight: 700;
    font-size: clamp(18px, 5vw, 36px);
    margin-top: 5%;
    margin-bottom: 8px;
}

.cast-container .col-2 #client {
    margin-left: 7%;
}

.cast-container .radio-group {
    display: flex;
    gap: 40px;
}

.cast-container .radio-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 10px;
}

.cast-container .radio-container input {
    display: none;
}

.cast-container .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid #000;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    position: relative;
}

.cast-container .radio-container input:checked + .checkmark::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #f05271;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.cast-container .custom-dropdown {
    width: 200px;
    position: relative;
    font-family: sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.cast-container .custom-dropdown .selected {
    padding: 10px 15px;
    border-radius: 100px;
    background-color: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    height: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: grey;
    font-size: 16px;
    font-weight: 700;
}

.cast-container .custom-dropdown.open .selected i {
    transform: rotate(180deg);
}

.crew-container .col-2 .step-3.content .custom-select .options.open-option {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 3px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 5;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cast-container .custom-dropdown .options div {
    padding: 10px 15px;
    cursor: pointer;
}

.cast-container .custom-dropdown .options div:hover {
    background-color: #e0e0e0;
}

.cast-container .custom-dropdown.open .options {
    max-height: 200px;
}

.cast-container .dob-container {
    display: flex;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    height: 45px;
    width: 40%;
    padding: 0 10px;
    font-weight: 700;
    font-size: 16px;
    color: grey;
}

.cast-container .dob-drop {
    flex: 1;
    position: relative;
}

.cast-container .dob-selected {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    height: 45px;
    cursor: pointer;
    font-size: 14px;
    background: 0 0;
}

.cast-container .dob-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 900;
}

.cast-container .dob-options div {
    padding: 8px 10px;
    cursor: pointer;
}

.cast-container .dob-options div:hover {
    background: #eee;
}

.cast-container .dob-drop.open .dob-options {
    display: block;
}

.cast-container .intro p {
    font-size: clamp(30px, 5vw, 36px);
    font-weight: 700;
    margin-top: 70px;
    letter-spacing: 0;
}

.cast-container .intro textarea {
    width: 90%;
    resize: none;
    height: 250px;
    outline: 0;
    border: none;
    border-radius: 0 50px 50px 50px;
    padding: 30px;
}

.cast-container textarea::-moz-placeholder {
    color: grey;
    font-size: 20px;
    font-weight: 500;
}

.cast-container textarea::placeholder {
    color: grey;
    font-size: 20px;
    font-weight: 500;
}

.cast-container .col-2 .row-3 {
    width: 100%;
    display: flex;
    margin-top: 8%;
    align-items: flex-start;
}

.cast-container .back {
    width: 20%;
    background-color: grey;
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    border: none;
    outline: 0;
    height: 40px;
    border-radius: 168px;
    margin-left: 2%;
    transition: background-color 1.5s ease;
}

.cast-container .back:hover {
    background-color: #f05271;
}

.cast-container .back-btn {
    width: 70%;
}

.cast-container .skip {
    width: 40%;
    height: 80px;
}

.cast-container .skip span {
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    transition: color 1.5s ease;
}

.cast-container .skip span:hover {
    color: #f05271;
}

.cast-container .skip button {
    outline: 0;
    border: none;
    height: 48px;
    width: 48px;
    border-radius: 35px;
    background-color: #f05271;
    transition: background-color 1.5s ease;
}

.cast-container .skip button i {
    color: #fff;
    font-size: 25px;
}

.cast-container .skip button:hover {
    background-color: grey;
}

.cast-container .col-2 .content.step-2 .top-content-step-2 {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 36px);
    margin-bottom: 0;
    width: 80%;
    line-height: 38px;
}

.cast-container .col-2 .content.step-2 .sub-content-2 {
    font-weight: 700;
    font-size: clamp(12px, 5vw, 36px);
    margin-top: 0;
    margin-bottom: 5px;
}

.cast-container .col-2 .step-2.content .input-with-btn {
    position: relative;
    width: 80%;
    margin-top: 35px;
}

.cast-container .col-2 .step-2.content .input-with-btn input {
    width: 100%;
    padding: 15px 60px 15px 24px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    outline: 0;
}

.cast-container .col-2 .step-2.content .input-with-btn input::-moz-placeholder {
    color: #f05271;
    font-weight: 500;
    font-size: 20px;
}

.cast-container .col-2 .step-2.content .input-with-btn input::placeholder {
    color: #f05271;
    font-weight: 500;
    font-size: 20px;
}

.cast-container .col-2 .step-2.content .input-with-btn .add-btn {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 6px;
    background: #f05271;
    color: #fff;
    border-radius: 50px;
    font-size: 25px;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cast-container .col-2 .step-2.content .followers {
    font-size: clamp(30px, 5vw, 36px);
    font-weight: 700;
    margin-left: 15px;
    margin-top: 95px;
}

.cast-container .col-2 .step-2.content .result .result-1 {
    background-color: #fff;
    width: 80%;
    height: 60px;
    border-radius: 50px;
    display: flex;
    align-items: center;

    margin-top: 20px;
    position: relative;
}

.cast-container .result-1 {
    position: relative;
    display: flex;
    align-items: center;
    width: 300px;
    background-color: #44bda4;
    border-radius: 8px;
    padding: 10px 40px;
    margin-bottom: 10px;
}

.cast-container .result-1 input.text-item {
    width: 100%;
    background: 0 0;
    border: none;
    outline: 0;
    color: #000;
    font-size: 16px;
    padding-left: 60px;
    padding-right: 70px;
}

.cast-container .result-1 .glob.icon-left {
    position: absolute;
    left: 35px;
}

.cast-container .result-1 .icon-1 {
    position: absolute;
    right: 50px;
    top: 50%;
    cursor: pointer;
    background-color: grey;
    transform: translateY(-50%);
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cast-container .result-1 .icon-2 {
    position: absolute;
    right: 10px;
    top: 50%;
    background-color: grey;
    transform: translateY(-50%);
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cast-container .col-2 .step-2.content .social .youtube {
    position: relative;
    width: 80%;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.cast-container .col-2 .step-2.content .social div input {
    width: 100%;
    padding-left: 90px;
    padding-right: 70px;
    height: 60px;
    border-radius: 50px;
    outline: 0;
    border: none;
}

.cast-container .col-2 .step-2.content .social div .icon-left {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 30px;
}

.cast-container .col-2 .step-2.content .social div .icon-3 {
    position: absolute;
    right: 50px;
    top: 50%;
    background-color: grey;
    transform: translateY(-50%);
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cast-container .col-2 .step-2.content .social div .icon-4 {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background-color: grey;
    border-radius: 50px;
    height: 36px;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cast-container .col-2 .step-3.content .top-content-3 {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 36px);
    line-height: 57px;
    margin-top: -5px;
    z-index: -1;
}

.cast-container .col-2 .step-3.content .sub-content-3 {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 20px;
    color: #f05271;
}

.title-of-work {
    background-color: #fff;
    height: 66px;
    border-radius: 50px;
    padding-top: 15px;
    width: 95%;
    position: relative;
}

.title-of-work input {
    border: none;
    outline: 0;
    height: auto;
    min-height: 40px;
    padding: 10px 0 10px 5px;
    width: 90%;
    margin-left: 10px;
}

.title-of-work input::-moz-placeholder {
    color: grey;
    font-size: clamp(14px, 5vw, 10px);
    font-weight: 500;
}

.title-of-work input::placeholder {
    color: grey;
    font-size: clamp(14px, 5vw, 10px);
    font-weight: 500;
}

.title-of-work button {
    background-color: #f05271;
    border-radius: 50px;
    width: 36px;
    height: 36px;
    border: none;
    font-size: 25px;
    font-weight: 300;
    color: #fff;
    position: absolute;
    right: 10px;
}

.work-result {
    min-height: 165px;
    padding: 15px;
    background-color: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    border-radius: 30px;
    margin-top: 50px;
    width: 95%;
}

.result-row {
    border-bottom: 1px solid rgba(128, 128, 128, 0.5019607843);
    display: flex;
    justify-content: space-between;
    padding-bottom: 2px;
    color: grey;
}

.aword-row {
    padding-bottom: 2px;
    color: grey;
}

.aword-title {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 36px);
    margin-top: 30px;
    margin-bottom: 30px;
}

.cast-container .col-2 .step-3.content .sub-content-3 {
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 20px;
}

.cast-container .col-2 .step-3.content .custom-select {
    width: 100%;
    position: relative;
}

.cast-container .col-2 .step-3.content .custom-select.step-3 {
    margin-bottom: 40px;
}

.cast-container #step6 .custom-select,
.cast-container .location-step .custom-select {
    margin-bottom: 41px;
}

.cast-container #step6 .top-content-5,
.cast-container .location-step .top-content-5 {
    font-weight: 700;
    font-size: clamp(30px, 5vw, 36px);
    line-height: 38px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.cast-container .col-2 .step-3.content .custom-select.half-width {
    width: 50%;
}

.cast-container .col-2 .step-3.content .custom-select .selected {
    background-color: #fff;
    height: 62px;
    border-radius: 30px;
}

.cast-container .col-2 #step5 .custom-select .selected {
    height: 45px;
    background-color: #fff;
    border-radius: 30px;
}

.cast-container .col-2 #step5 .custom-select .selected span {
    position: absolute;
    left: 40px;
    top: 10px;
}

.cast-container .col-2 #step5 .custom-select .selected i {
    position: absolute;
    top: 15px;
    right: 48px;
}

.cast-container .col-2 .step-3.content .custom-select .selected i {
    position: absolute;
    top: 20px;
    cursor: pointer;
}

.cast-container .col-2 .step-3.content .custom-select .selected .open {
    transform: rotate(180deg);
}

/* .cast-container .col-2 .step-3.content .custom-select .selected span {
    position: absolute;
    left: 40px;
    top: 20px;
} */

.cast-container .custom-select .options {
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.5s ease;
}

.cast-container .col-2 .content .custom-select .options.open-option {
    background-color: #fff;
    border-radius: 10px;
    margin-top: 3px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 5;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cast-container .col-2 .step-3.content .custom-select .options div {
    padding: 10px 0 10px 20px;
}

.cast-container
    .col-2
    .step-3.content
    .custom-select
    .options
    .option-item:hover {
    background-color: #f05271;
    border-radius: 10px;
    height: 45px;
}

.cast-container .col-2 .container-content .row-2 {
    display: flex;
    width: 100%;
}

.cast-container .col-2 .container-content .row-2 .level-exprience {
    width: 50%;
}

.cast-container .col-2 .container-content .row-2 .level-exprience p {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 24px;
}

.cast-container .col-2 .container-content .row-2 .team-size {
    width: 50%;
    margin-top: 3px;
}

.cast-container .col-2 .container-content .row-2 .team-size div {
    margin-left: 26px;
    font-weight: 500;
    font-size: 24px;
    margin-bottom: 15px;
}

.cast-container .col-2 .container-content .row-2 .team-size div span {
    margin-left: 5px;
    font-size: 14px;
    line-height: 15px;
    font-weight: 500px;
    color: #f05271;
}

.cast-container .col-2 .Available-equipment .title {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 8px;
    margin-left: 5px;
}

.cast-container .col-2 .container-content .row-2 .team-size input {
    width: 95%;
    padding: 0 30px;
    border-radius: 30px;
    height: 62px;
    outline: 0;
    border: none;
    margin-left: 20px;
}

.cast-container .col-2 .Available-equipment {
    margin-bottom: 20px;
}

.cast-container .col-2 .equipment-tags {
    background-color: #fff;
    border-radius: 30px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 20px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-start;
}

.cast-container .col-2 .equipment-tags.skills {
    min-height: 156px;
}

.cast-container .col-2 .equipment-tags.equipments {
    min-height: 156px;
}

.cast-container .col-2 .equipment-tags.languages {
    min-height: 237px;
    width: 86%;
}

.cast-container .col-2 .equipment-tags .tags {
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 5px;
}

.cast-container .col-2 .equipment-tags .tag-item {
    border: 1px solid grey;
    border-radius: 100px;
    padding: 5px 15px 5px 15px;
    margin-left: 5px;
    margin-bottom: 10px;
    display: inline-block;
}

.cast-container .col-2 .equipment-tags .tag-item span {
    margin-right: 8px;
}

.cast-container .col-2 .tag-item .delete-icon {
    cursor: pointer;
    font-size: 14px;
}

.cast-container .col-2 .equipment-tags input {
    border: none;
    outline: 0;
    height: 26px;
    padding-left: 15px;
    margin-top: 20px;
    border-radius: 30px;
    min-width: 120px;
}

.cast-container .col-2 .suggestions {
    list-style: none;
    width: 100%;
    position: absolute;
    padding: 0;
    top: 100%;
    border-radius: 10px;
    background-color: #fff;
    z-index: 999;
}

.cast-container .suggestions.hidden {
    opacity: 0;
    pointer-events: none;
}

.cast-container .suggestions.show {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.5s ease;
}

.cast-container .col-2 .suggestions li {
    padding: 10px 0 10px 15px;
}

.cast-container .col-2 .suggestions li:hover {
    background-color: #f05271;
    width: 100%;
    display: block;
    border-radius: 10px;
    cursor: pointer;
}

.cast-container .Available-equipment.languages {
    min-height: 237px;
}

.cast-container .upload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 50px;
    width: 85%;
}

.cast-container .upload.Showreel {
    height: 60px;
    border-radius: 50px;
    padding: 5px 30px;
}

.cast-container .upload.profile {
    padding: 5px 30px;
    margin-top: 15px;
    margin-bottom: 10%;
}

.cast-container .Showreel-file {
    margin-top: 10px;
}

.cast-container .Showreel-file span {
    padding-left: 10px;
    font-size: 24px;
    font-weight: 500;
    color: #000;
}

.cast-container .top-content-6 {
    margin-bottom: 30px;
    font-size: 30px;
    line-height: 25px;
    font-weight: 600;
}

.cast-container .Showreel-file img {
    width: 29px;
    height: 23px;
}

.cast-container .upload.work {
    border-radius: 50px;
    min-height: 156px;
    padding: 5px 30px;
    margin-bottom: 3%;
}

.cast-container .work-title {
    font-size: 30px;
    line-height: 25px;
    font-weight: 600px;
    margin-bottom: 10px;
}

.cast-container .work-subtitle {
    font-size: 18px;
    line-height: 15px;
    color: #f05271;
    margin-bottom: 20px;
    font-weight: 500;
}

.cast-container .upload.work .upload-btn {
    background-color: transparent;
    width: 30%;
    display: block;
    color: grey;
    font-size: 11px;
}

.cast-container .upload.work .upload-btn img {
    height: 16px;
    width: 19px;
    margin-bottom: 5px;
}

.cast-container .upload.work .upload-btn span {
    color: grey;
    font-weight: 600;
    font-size: 14px;
}

.cast-container .upload .previous-work {
    min-height: 112px;
    width: 100%;
    border: 1px dashed #cdcdcd;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

.cast-container .upload .preview {
    width: 15%;
    height: 15%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 61px;
}

.cast-container .upload .upload-btn {
    background: 0 0;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: clamp(10px, 5vw, 20px);
    background-color: #f05271;
    height: 59px;
    border-radius: 35px;
    width: 40%;
}

.cast-container .upload .upload-btn span {
    font-size: clamp(10px, 5vw, 20px);
    color: #fff;
    line-height: 14px;
    font-weight: 700;
    margin-left: 10px;
    margin-right: 10px;
}

.cast-container .upload .file-input {
    display: none;
}

.cast-container .upload.Showreel .upload-btn {
    width: 36px;
    height: 36px;
    border-radius: 50px;
}

.cast-container .sub-title-7 {
    font-size: 16px;
    line-height: 19px;
    color: #f05271;
    font-weight: 500;
    margin-bottom: 20px;
}

.cast-container .crew-independents {
    line-height: 25px;
    font-size: 30px;
    font-weight: 600;
    margin-top: 45px;
    margin-bottom: 15px;
}

.cast-container .crew-companies {
    line-height: 25px;
    font-size: 30px;
    font-weight: 600;
    margin-top: 60px;
    margin-bottom: 15px;
}

input[disabled] {
    background-color: #fff !important;
    color: #000;
}

@media (max-width: 1503px) {
    .cast-container {
        background-image: none;
    }

    .cast-container .center-col {
        flex-direction: column;
        margin-left: 4%;
        width: 95%;
    }
    .cast-container .center-col .col-1 {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-left: -1%;
    }

    .cast-container .center-col .col-2 {
        width: 95%;
        margin-left: 0;
    }

    .cast-container .center-col .col-1 .row {
        width: 33%;
    }
}

@media (min-width: 1515px) {
    .center-col {
        width: 85%;
    }
}

@media (max-width: 1403px) {
    .cast-container .col-2 .step-2.content .followers {
        margin-top: 10px;
    }
}

@media (max-width: 1430px) {
    .cast-container .center-col {
        width: 95%;
    }
}

@media (max-width: 1106px) {
    .cast-container .center-col .col-1 .row {
        width: 50%;
    }

    .cast-container .col-2 .step-2.content .result .result-1 {
        width: 90%;
    }

    .cast-container .col-2 .step-2.content .social .youtube {
        width: 90%;
    }

    .cast-container .col-2 .step-2.content .input-with-btn {
        width: 90%;
    }
}

@media (max-width: 770px) {
    .cast-container .center-col .col-1 .row {
        width: 100%;
    }
}

@media (max-width: 770px) {
    .cast-container .center-col .col-2 .top-content-2 {
        margin-bottom: 20px;
    }

    .cast-container .radio-group {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 1059px) {
    .cast-container .center-col .back {
        width: 38%;
    }
}

@media (max-width: 684px) {
    .cast-container .dob-container {
        width: 90%;
    }

    .cast-container .intro textarea {
        width: 100%;
    }

    .cast-container .col-2 .step-3.content .top-content-3 {
        line-height: 36px;
    }

    .cast-container .col-2 .equipment-tags.languages {
        width: 99%;
    }

    .cast-container .upload.work .upload-btn {
        width: 59%;
    }

    .cast-container .upload.work {
        width: 100%;
    }

    .cast-container .upload.profile {
        width: 100%;
    }
}

@media (max-width: 1070px) {
    .cast-container .col-2 .step-2.content .input-with-btn {
        width: 99%;
    }

    .cast-container .col-2 .step-2.content .social .youtube {
        width: 99%;
    }
}

@media (max-width: 523px) {
    .cast-container .upload-btn img {
        display: none;
    }

    .cast-container .upload .upload-btn {
        width: 51%;
    }

    .cast-container .upload.Showreel {
        width: 100%;
    }
}

.register-container {
    /* background-image: url(../../../assets/images/register.png); */
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-size: cover;
    position: relative;
    z-index: 5;
}

.register-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    mix-blend-mode: multiply;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.register-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    z-index: -1;
}

.register-container .main-container {
    display: flex;
    justify-content: center;
    padding-bottom: 18px;
}

.register-container .col-center {
    width: 76%;
    display: flex;
}

.register-container .col-1 {
    width: 50%;
    margin-top: 16%;
    margin-left: 4%;
}

.register-container .col-1 .top-heading {
    margin-bottom: 10px;
    color: #f05271;
    font-weight: 700;
    font-size: 48px;
    margin-left: 5px;
    line-height: 47px;
}

.register-container .col-1 p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 17px;
    color: #333;
    font-weight: 500;
    margin-left: 5px;
}

.register-container .col-2 {
    width: 54%;
    margin-left: 3%;
    margin-top: 270px;
}

.register-container .col-2 .heading-1 {
    color: #f8992c;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.register-container .col-2 p {
    margin-bottom: 5px;
    color: grey;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 16px;
    line-height: 22px;
}

.register-container .col-2 .heading-2 {
    color: #44bda4;
    font-size: 24px;
    margin-top: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.register-container .input {
    padding: 0 24px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    opacity: 1;
    border-radius: 168px;
    border: none;
    outline: 0;
    margin-bottom: 24px;
}

.register-container .input-full-width {
    width: 90%;
    height: 60px;
}

.register-container .input-half-width {
    width: 45%;
    height: 60px;
}

.register-container .slider-container {
    width: 100%;
    display: flex;
}

.register-container .slider {
    position: relative;
    background-color: #fff;
    width: 60%;
    height: 42px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2509803922) inset;
    margin-bottom: 30px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.register-container .slider {
    position: relative;
    width: 50%;
    text-align: center;
    font-family: Baloo 2;
    font-size: 20px;
    font-weight: 700;
    z-index: 2;
    cursor: pointer;
    transition: color 0.5s ease;
}

.register-container .slider span {
    position: relative;
    width: 50%;
    text-align: center;
    font-family: Baloo 2;
    font-size: clamp(18px, 5vw, 24px);
    font-weight: 700;
    z-index: 2;
    cursor: pointer;
    transition: color 0.5s ease;
}

.register-container .span-1 {
    height: 100%;
    border-radius: 50px;
    color: #fff;
    padding-top: 5px;
}

.register-container .span-2 {
    color: #f05271;
}

.register-container .slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #f05271;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2509803922) inset;
    border-radius: 50px;
    z-index: 1;
    transition: transform 0.5s ease;
}

.register-container .not-robot {
    background-color: transparent;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    height: 88px;
    border-radius: 21px;
    display: flex;
    align-items: center;
    width: 60%;
    z-index: -5;
}

.register-container .not-robot input {
    margin-top: 3px;
    margin-left: 8%;
    margin-right: 9px;
}

.register-container .not-robot input[type="checkbox"] {
    transform: scale(1.5);
}

.register-container .not-robot span {
    color: grey;
    font-weight: 700;
}

.register-container .terms-and-conditions {
    margin-left: 22px;
    margin-bottom: 15px;
}

.register-container .main-button {
    border: none;
    outline: 0;
    font-size: 24px;
    font-weight: 700;
    width: 93%;
    height: 60px;
    border-radius: 168px;
    margin-top: 20px;
}

.register-container .already-have {
    margin-top: 18px;
    margin-left: 10px;
    font-weight: 500;
    margin-bottom: 10px;
}

.register-container .already-have a {
    color: #f05271;
    font-weight: 500;
}

.register-container .col-2 button {
    border-radius: 60px;
    color: #f05271;
    border: 1px solid #f05271;
    width: 36%;
    height: 46px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    margin-top: 26px;
    background-color: transparent;
    transition: background-color 3s ease;
}

.register-container .col-2 button:hover {
    background-color: #f05271;
    color: #fff;
}

@media (max-width: 1494px) {
    .register-container {
        background-image: none;
        min-height: -moz-fit-content;
        min-height: fit-content;
    }
}

@media (max-width: 1072px) {
    .register-container .col-center {
        flex-wrap: wrap;
    }

    .register-container .col-center .col-1 {
        width: 100%;
    }

    .register-container .col-center .col-2 {
        display: none;
        width: 100%;
        margin-top: 3%;
        margin-left: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 788px) {
    .register-container .main-container {
        justify-content: flex-start;
    }

    .register-container .col-center .col-1 {
        margin-top: 200px;
    }

    .register-container .top-heading {
        text-align: center;
    }

    .register-container p {
        text-align: center;
    }

    .register-container .slider-container {
        justify-content: center;
        width: 100%;
    }

    .register-container .slider-container .slider {
        width: 100%;
    }

    .register-container .input {
        width: 100%;
    }

    .register-container .not-robot {
        width: 88%;
    }

    .register-container .col-center {
        justify-content: flex-start;
        width: 90%;
    }
}

.register-producer-container {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-size: cover;
    position: relative;
    z-index: 5;
}

.register-producer-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: radial-gradient(circle at 20% 20%, #f8992c 0, transparent 50%),
        radial-gradient(circle at 20% 80%, #8379b8 0, transparent 50%),
        radial-gradient(circle at 80% 20%, #44bda4 0, transparent 50%),
        radial-gradient(circle at 80% 80%, #fe2c55 0, transparent 50%);
    mix-blend-mode: multiply; */
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.register-producer-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(
        45deg,
        rgba(248, 153, 44, 0.1) 0,
        rgba(131, 121, 184, 0.1) 25%,
        rgba(68, 189, 164, 0.1) 50%,
        rgba(254, 44, 85, 0.1) 75%,
        rgba(248, 153, 44, 0.1) 100%
    ); */
    z-index: -1;
}

.register-producer-container .main-container {
    display: flex;
    justify-content: center;
    padding-bottom: 18px;
}

.register-producer-container .col-center {
    width: 76%;
    display: flex;
}

.register-producer-container .col-1 {
    width: 50%;
    margin-top: 16%;
    margin-left: 4%;
}

.register-producer-container .col-1 .top-heading {
    margin-bottom: 10px;
    color: #f05271;
    font-weight: 700;
    font-size: 48px;
    margin-left: 5px;
    line-height: 47px;
}

.register-producer-container .col-1 p {
    margin-top: 0;
    margin-bottom: 34px;
    font-size: 17px;
    color: #333;
    font-weight: 500;
    margin-left: 5px;
}

.register-producer-container .col-2 {
    width: 54%;
    margin-left: 3%;
    margin-top: 270px;
}

.register-producer-container .col-2 .heading-1 {
    color: #f8992c;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.register-producer-container .col-2 p {
    margin-bottom: 5px;
    color: grey;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 16px;
    line-height: 22px;
}

.register-producer-container .col-2 .heading-2 {
    color: #44bda4;
    font-size: 24px;
    margin-top: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.register-producer-container .input {
    padding: 0 24px;
    height: 60px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    opacity: 1;
    border-radius: 168px;
    border: none;
    outline: 0;
    margin-bottom: 24px;
}

.register-producer-container .input-full-width {
    width: 90%;
    height: 60px;
}

.register-producer-container .input-half-width {
    width: 45%;
    height: 60px;
}

.register-producer-container .slider-container {
    width: 100%;
    display: flex;
}

.register-producer-container .slider {
    position: relative;
    background-color: #fff;
    width: 60%;
    height: 42px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2509803922) inset;
    margin-bottom: 30px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.register-producer-container .slider span {
    position: relative;
    width: 50%;
    text-align: center;
    font-family: Baloo 2;
    font-size: 20px;
    font-weight: 700;
    z-index: 2;
    cursor: pointer;
    transition: color 0.5s ease;
}

.register-producer-container .span-1 {
    height: 100%;
    border-radius: 50px;
    color: #fff;
    padding-top: 5px;
}

.register-producer-container .span-2 {
    color: #f05271;
}

.register-producer-container .slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: #f05271;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2509803922) inset;
    border-radius: 50px;
    z-index: 1;
    transition: transform 0.5s ease;
}

.register-producer-container .not-robot {
    background-color: transparent;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    height: 88px;
    border-radius: 21px;
    display: flex;
    align-items: center;
    width: 60%;
    z-index: -5;
}

.register-producer-container .not-robot input {
    margin-top: 3px;
    margin-left: 8%;
    margin-right: 9px;
}

.register-producer-container .not-robot input[type="checkbox"] {
    transform: scale(1.5);
}

.register-producer-container .not-robot span {
    color: grey;
    font-weight: 700;
}

.register-producer-container .terms-and-conditions {
    margin-left: 22px;
    margin-bottom: 15px;
}

.register-producer-container .main-button {
    border: none;
    outline: 0;
    font-size: 24px;
    font-weight: 700;
    width: 93%;
    height: 60px;
    border-radius: 168px;
    margin-top: 20px;
}

.register-producer-container .already-have {
    margin-top: 18px;
    margin-left: 10px;
    font-weight: 500;
    margin-bottom: 10px;
}

.register-producer-container .already-have a {
    color: #f05271;
    font-weight: 500;
}

.register-producer-container .col-2 button {
    border-radius: 60px;
    color: #f05271;
    border: 1px solid #f05271;
    width: 36%;
    height: 46px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    margin-top: 26px;
    background-color: transparent;
    transition: background-color 3s ease;
}

.register-producer-container .col-2 button:hover {
    background-color: #f05271;
    color: #fff;
}

@media (max-width: 1494px) {
    .register-producer-container {
        background-image: none;
        min-height: -moz-fit-content;
        min-height: fit-content;
    }
}

@media (max-width: 1072px) {
    .register-producer-container .col-center {
        flex-wrap: wrap;
    }

    .register-producer-container .col-center .col-1 {
        width: 100%;
    }

    .register-producer-container .col-center .col-2 {
        display: none;
        width: 100%;
        margin-top: 3%;
        margin-left: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 788px) {
    .register-producer-container .col-center .col-1 {
        margin-top: 200px;
        margin-left: 0;
    }

    .register-producer-container .top-heading {
        text-align: center;
    }

    .register-producer-container p {
        text-align: center;
    }

    .register-producer-container .slider-container {
        justify-content: center;
        width: 100%;
    }

    .register-producer-container .slider-container .slider {
        width: 100%;
    }

    .register-producer-container .input {
        width: 100%;
    }

    .register-producer-container .not-robot {
        width: 88%;
    }

    .register-producer-container .col-center {
        justify-content: flex-start;
        margin-left: 5px;
        width: 90%;
    }
}

.register-independent-container {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background-size: cover;
    position: relative;
    z-index: 5;
}

.register-independent-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: radial-gradient(circle at 20% 20%, #f8992c 0, transparent 50%),
        radial-gradient(circle at 20% 80%, #8379b8 0, transparent 50%),
        radial-gradient(circle at 80% 20%, #44bda4 0, transparent 50%),
        radial-gradient(circle at 80% 80%, #fe2c55 0, transparent 50%);
    mix-blend-mode: multiply; */
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    animation: heroGradientShift 6s ease-in-out infinite;
}

.register-independent-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: linear-gradient(
        45deg,
        rgba(248, 153, 44, 0.1) 0,
        rgba(131, 121, 184, 0.1) 25%,
        rgba(68, 189, 164, 0.1) 50%,
        rgba(254, 44, 85, 0.1) 75%,
        rgba(248, 153, 44, 0.1) 100%
    ); */
    z-index: -1;
}

.register-independent-container .col-center {
    width: 60%;
    margin-top: 10%;
}

.register-independent-container .col-center .profile-settings {
    margin-left: 28px;
}

.register-independent-container .col-center .profile-settings .span-1 {
    font-size: clamp(18px, 5vw, 36px);
    font-weight: 700;
    line-height: 38px;
    color: #000;
}

.register-independent-container .col-center .profile-settings .span-2 {
    font-size: clamp(12px, 5vw, 16px);
    font-weight: 500;
    color: #f05271;
    letter-spacing: 0;
}

.register-independent-container .col-center .file {
    width: 100%;
    background-color: #fff;
    border-radius: 50px;
    height: 105px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    position: relative;
}

.register-independent-container .col-center .file input {
    display: none;
    pointer-events: auto;
}

.register-independent-container .col-center .file .profile-img {
    margin-left: 20px;
    margin-right: 20px;
    height: 74px;
    width: 74px;
    border-radius: 61px;
}

.register-independent-container .col-center .file button {
    background-color: #f05271;
    border: none;
    outline: 0;
    height: 59px;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    width: 25%;
    position: absolute;
    right: 30px;
}

.register-independent-container .col-center .file button .photo-icon {
    margin-right: 10px;
    margin-bottom: 5px;
}

.register-independent-container .col-center .file .img-size {
    color: rgba(0, 0, 0, 0.3607843137);
    font-size: 16px;
    font-weight: 500;
}

.register-independent-container .personal-information {
    display: flex;
    width: 100%;
    margin-top: 50px;
}

.register-independent-container .personal-information p {
    width: 50%;
    padding-left: 10px;
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-top: 0;
}

.register-independent-container .col-center .slider-container {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
}

.register-independent-container .slider {
    position: relative;
    background-color: #fff;
    width: 70%;
    height: 42px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2509803922) inset;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.register-independent-container .slider span {
    position: relative;
    width: 70%;
    text-align: center;
    font-family: Baloo 2;
    font-size: clamp(18px, 5vw, 20px);
    font-weight: 700;
    z-index: 2;
    cursor: pointer;
    transition: color 0.5s ease;
}

.register-independent-container .slider .span-1 {
    background-color: #8379b8;
    height: 100%;
    border-radius: 50px;
    color: #fff;
    padding-top: 6px;
}

.register-independent-container .slider .span-2 {
    color: #f05271;
}

.register-independent-container .slider-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: transparent;
    border-radius: 50px;
    z-index: 1;
    transition: transform 0.5s ease;
}

.register-independent-container .col-center .col {
    display: flex;
    flex-direction: column;
    height: 100px;
}

.register-independent-container .col-center .col label {
    margin-left: 20px;
    font-size: 16px;
    font-weight: 500;
    color: grey;
}

.register-independent-container .col-center label.required::after {
    content: " *";
    color: grey;
    font-weight: 700;
}

.register-independent-container .col-center .input-groups {
    margin-top: 50px;
}

.register-independent-container .col-center .row {
    display: flex;
}

.register-independent-container .input-full-width {
    width: 90%;
    height: 60px;
}

.register-independent-container .col-center .input-half-width {
    width: 100%;
    height: 60px;
}

.register-independent-container .col-center input {
    padding: 0 24px;
    height: 45px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    opacity: 1;
    border-radius: 168px;
    border: none;
    outline: 0;
    margin-bottom: 24px;
    width: 80%;
}

.register-independent-container .custom-dropdwon {
    height: 45px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    border-radius: 168px;
    position: relative;
}

.register-independent-container .custom-dropdwon .selected {
    margin-left: 20px;
    margin-top: 10px;
    position: relative;
    color: #aaa;
    font-weight: 500;
    font-size: 18px;
    padding-right: 5px;
    opacity: 1;
}

.register-independent-container .custom-dropdwon .selected .arrow {
    right: 30px;
    top: 5px;
    position: absolute;
    cursor: pointer;
}

.register-independent-container .independent {
    display: none;
}

.register-independent-container .custom-dropdwon .options {
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    position: absolute;
    top: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: all 1s ease;
    padding: 0;
}

.register-independent-container .custom-dropdwon .options div {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.register-independent-container .custom-dropdwon .options div:hover {
    background-color: #aaa;
    border-radius: 5px;
}

.register-independent-container .custom-dropdwon .options.open {
    opacity: 1;
    pointer-events: auto;
}

.register-independent-container input::-moz-placeholder {
    color: #aaa;
    font-weight: 500;
    font-size: 18px;
    padding-right: 5px;
    opacity: 1;
}

.register-independent-container input::placeholder {
    color: #aaa;
    font-weight: 500;
    font-size: 18px;
    padding-right: 5px;
    opacity: 1;
}

.register-independent-container .main-button {
    border: none;
    outline: 0;
    font-size: 24px;
    font-weight: 700;
    width: 100%;
    height: 60px;
    border-radius: 168px;
    margin-top: 40px;
    margin-bottom: 50px;
}

.register-independent-container .add-attachment {
    border: none;
    outline: 0;
    font-size: 20px;
    font-weight: 500;
    width: 100%;
    height: 45px;
    color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    background-color: #8379b8;
    border-radius: 100px;
    transition: all 1s ease;
}

.register-independent-container .add-attachment:hover {
    background-color: #44bda4;
}

.register-independent-container .attachment {
    margin-left: 20px;
    margin-bottom: 10px;
}

.register-independent-container .support {
    color: grey;
    font-size: 16px;
    font-weight: 400;
    line-height: 17px;
    margin-top: 15px;
    margin-left: 20px;
}

.register-independent-container #attachment {
    display: none;
}

.register-independent-container .file-item {
    padding: 8px;
    background: #f3f3f3;
    margin-bottom: 5px;
    border-radius: 6px;
    font-size: 14px;
    margin-top: 5px;
}

.register-independent-container .independent p {
    color: #000;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (max-width: 1184px) {
    .register-independent-container .profile-settings {
        margin-top: 150px;
    }

    .register-independent-container .col-center {
        width: 80%;
    }

    .register-independent-container .personal-information {
        display: flex;
        flex-direction: column;
    }

    .register-independent-container .col-center .slider-container {
        width: 80%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .register-independent-container .personal-information p {
        width: 80%;
    }
}

@media (max-width: 931px) {
    .register-independent-container .col-center .file {
        display: flex;
        flex-direction: column;
        height: -moz-fit-content;
        height: fit-content;
        padding: 10px;
    }

    .register-independent-container .col-center .file button {
        width: 50%;
        position: static;
    }
}

@media (max-width: 657px) {
    .register-independent-container .profile-settings {
        margin-top: 150px;
        display: flex;
        flex-direction: column;
    }

    .register-independent-container .col-center .file button {
        width: 80%;
        font-size: 16px;
    }

    .register-independent-container .col-center .file .img-size {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .register-independent-container .col-center .row {
        flex-direction: column;
    }

    .register-independent-container .col-center {
        width: 90%;
    }

    .register-independent-container .custom-dropdwon {
        margin-bottom: 20px;
    }

    .register-independent-container .col-center .slider-container {
        width: 100%;
    }

    .register-independent-container .personal-information p {
        font-size: 24px;
        width: 90%;
    }

    .register-independent-container .independent p {
        font-size: 24px;
        width: 100%;
    }

    .register-independent-container .slider {
        width: 100%;
    }
}

.navbar-margin-top {
    padding-top: 113px;
}

@media (max-width: 992px) {
    .navbar-margin-top {
        padding-top: 103px;
    }
}

.all-services {
    background:
        radial-gradient(circle at 0 0, #fff3e5 0, transparent 45%),
        radial-gradient(circle at 100% 0, #f3fbff 0, transparent 45%);
    min-height: 100vh;
}

.all-services .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 1440px) {
    .all-services .main-container {
        max-width: 1220px !important;
    }
}

@media (max-width: 1200px) {
    .all-services .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .all-services .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .all-services .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .all-services .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .all-services .main-container {
        padding: 0 15px;
    }
}

.all-services .all-services-header {
    padding: 80px 0 30px;
}

@media (max-width: 768px) {
    .all-services .all-services-header {
        padding: 30px 0 20px;
    }
}

.all-services .all-services-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

@media (max-width: 768px) {
    .all-services .all-services-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.all-services .all-services-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    margin: 0;
}

@media (max-width: 576px) {
    .all-services .all-services-title {
        white-space: normal;
        margin-bottom: 10px;
    }
}

.all-services .all-services-search {
    flex: 1;
    max-width: 419px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 999px;
    padding: 0 24px;
    box-shadow: 0 16px 50px 0 rgba(0, 0, 0, 0.1);
    height: 50px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.all-services .all-services-search:focus-within,
.all-services .all-services-search:hover {
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .all-services .all-services-search {
        width: 100%;
        max-width: 100%;
    }
}

.all-services .all-services-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 22px;
    color: rgba(0, 0, 0, 0.4);
    font-size: 16px;
}

.all-services .all-services-search-icon svg {
    width: 18px;
}

@media (max-width: 768px) {
    .all-services .all-services-search-icon {
        margin-right: 10px;
    }
}

.all-services .all-services-search-input {
    flex: 1;
    border: none;
    outline: 0;
    background: 0 0;
    font-size: 15px;
    color: #333;
    transform: translateY(2px);
    padding: 12px 0;
}

.all-services .all-services-search-input::-moz-placeholder {
    color: grey;
    font-size: 15px;
}

.all-services .all-services-search-input::placeholder {
    color: grey;
    font-size: 15px;
}

.all-services .all-services-filters {
    padding: 0 0 0;
    z-index: 9999;
    position: relative;
}

@media (max-width: 768px) {
    .all-services .all-services-filters {
        padding: 0 0 0;
    }
}

.all-services .all-services-filters-form {
    width: 100%;
}

.all-services .all-services-filters-container {
    background: rgba(0, 0, 0, 0.0509803922);
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 19px 25px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto;
    gap: clamp(8px, 1vw, 12px);
    position: relative;
}

@media (max-width: 1200px) {
    .all-services .all-services-filters-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 992px) {
    .all-services .all-services-filters-container {
        padding: 14px 20px;
    }
}

@media (max-width: 768px) {
    .all-services .all-services-filters-container {
        padding: 12px 15px;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .all-services .all-services-filters-container {
        padding: 12px 15px;
        border-radius: 30px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.all-services .filter-dropdown {
    position: relative;
    flex-shrink: 0;
}

.all-services .filter-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: #fff;
    border: none;
    border-radius: 100px;
    height: 45px;
    width: 100%;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.all-services .filter-dropdown-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.all-services .filter-dropdown-toggle:active {
    transform: translateY(0);
}

@media (max-width: 1200px) {
    .all-services .filter-dropdown-toggle {
        width: clamp(160px, 14vw, 180px);
    }
}

@media (max-width: 992px) {
    .all-services .filter-dropdown-toggle {
        padding: 0 14px;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .all-services .filter-dropdown-toggle {
        width: calc(50% - 4px);
        height: 42px;
        padding: 0 12px;
    }
}

@media (max-width: 576px) {
    .all-services .filter-dropdown-toggle {
        width: 100%;
        height: 40px;
        padding: 0 14px;
    }
}

.all-services .filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 185px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

[dir="rtl"] .all-services .filter-dropdown-menu {
    left: auto;
    right: 0;
}

@media (max-width: 768px) {
    .all-services .filter-dropdown-menu {
        min-width: 100%;
    }
}

.all-services .filter-dropdown-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.all-services .filter-dropdown-list::-webkit-scrollbar {
    width: 5px;
}

.all-services .filter-dropdown-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.all-services .filter-dropdown-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.all-services .filter-dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
}

[dir="rtl"] .all-services .filter-dropdown-item {
    text-align: right;
}

.all-services .filter-dropdown-item:focus,
.all-services .filter-dropdown-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.all-services .filter-dropdown-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .all-services .filter-dropdown-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

.all-services .filter-dropdown.show .filter-dropdown-toggle .filter-arrow-svg {
    transform: rotate(180deg);
}

/* .all-services .filter-dropdown.show .filter-dropdown-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
} */

.all-services .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.all-services .filter-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 992px) {
    .all-services .filter-icon {
        width: clamp(14px, 1.5vw, 15px);
        height: clamp(14px, 1.5vw, 15px);
        min-width: clamp(14px, 1.5vw, 15px);
    }
}

@media (max-width: 576px) {
    .all-services .filter-icon {
        width: 14px;
        height: 14px;
        min-width: 14px;
    }
}

.all-services .filter-text {
    font-size: 14px;
    font-weight: 500;
    color: grey;
    white-space: nowrap;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] .all-services .filter-text {
    text-align: right;
}

@media (max-width: 992px) {
    .all-services .filter-text {
        font-size: clamp(12px, 1.3vw, 13px);
    }
}

@media (max-width: 576px) {
    .all-services .filter-text {
        font-size: 13px;
    }
}

.all-services .filter-arrow-svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-left: auto;
    width: 9px;
    height: 6px;
}

[dir="rtl"] .all-services .filter-arrow-svg {
    margin-left: 0;
    margin-right: auto;
}

.all-services .filter-search-btn {
    width: 45px;
    height: 45px;
    background-color: #f05271;
    border: none;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
}

[dir="rtl"] .all-services .filter-search-btn {
    margin-left: 0;
    margin-right: auto;
}

.all-services .filter-search-btn svg {
    width: clamp(16px, 1.8vw, 18px);
    height: clamp(16px, 1.8vw, 18px);
    display: block;
}

.all-services .filter-search-btn:hover {
    background-color: #8379b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 82, 113, 0.3);
}

.all-services .filter-search-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .all-services .filter-search-btn {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 576px) {
    .all-services .filter-search-btn {
        width: 40px;
        height: 40px;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        border-radius: 100px;
        grid-column: span 2 / span 2;
    }
}

@media (max-width: 768px) {
    .all-services [dir="rtl"] .all-services-header-container {
        align-items: flex-end;
    }
}

.all-services [dir="rtl"] .all-services-search {
    padding-right: 24px;
    padding-left: 24px;
}

.all-services [dir="rtl"] .all-services-search-icon {
    margin-right: 0;
    margin-left: 12px;
}

@media (max-width: 768px) {
    .all-services [dir="rtl"] .all-services-search-icon {
        margin-left: 10px;
    }
}

.all-services [dir="rtl"] .all-services-filters-container {
    flex-direction: row-reverse;
}

.all-services [dir="rtl"] .filter-search-btn {
    margin-right: auto;
    margin-left: 0;
}

.all-services .all-services-grid {
    padding: 40px 0 60px;
}

@media (max-width: 768px) {
    .all-services .all-services-grid {
        padding: 20px 0 40px;
    }
}

.all-services .all-services-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 1200px) {
    .all-services .all-services-grid-container {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .all-services .all-services-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .all-services .all-services-grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 419px;
        margin: 0 auto 50px;
    }
}

@media (max-width: 576px) {
    .all-services .all-services-grid-container {
        gap: 24px;
    }
}

.all-services .all-services-grid-container .service-card:nth-child(1) {
    animation-delay: 0.1s;
}

.all-services .all-services-grid-container .service-card:nth-child(2) {
    animation-delay: 0.2s;
}

.all-services .all-services-grid-container .service-card:nth-child(3) {
    animation-delay: 0.3s;
}

.all-services .all-services-grid-container .service-card:nth-child(4) {
    animation-delay: 0.4s;
}

.all-services .all-services-grid-container .service-card:nth-child(5) {
    animation-delay: 0.5s;
}

.all-services .all-services-grid-container .service-card:nth-child(6) {
    animation-delay: 0.6s;
}

.all-services .service-card {
    position: relative;
    background-color: #fff;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 391px;
    padding-bottom: 20px;
    will-change: transform;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 99;
    padding: 0 25px;
}

@media (max-width: 576px) {
    .all-services .service-card {
        padding: 0 20px;
    }
}

.all-services .service-card:hover {
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.all-services .service-card:hover .service-card-image img {
    transform: scale(1.1);
}

.all-services .service-card:hover .service-card-bookmark {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .all-services .service-card {
        max-width: 419px;
        margin: 0 auto;
    }
}

.all-services .service-card-image {
    width: 100%;
    height: 162px;
    overflow: hidden;
    margin: 31px auto 0;
    border-radius: 19px;
}

.all-services .service-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover !important;
    -o-object-position: center;
    object-position: center;
    border-radius: 19px;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.all-services .service-card-content {
    padding-top: 21px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .all-services .service-card-content {
        width: 100%;
    }
}

.all-services .service-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
}

.all-services .service-card-profile {
    width: 44px;
    height: 44px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.all-services .service-card-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.all-services .service-card-name {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0;
    line-height: 26px;
    white-space: nowrap;
}

.all-services .service-card-description {
    font-size: 18px;
    font-weight: 500;
    color: #000;
    line-height: 27px;
    margin: 0;
}

.all-services .service-card-text {
    display: inline;
}

.all-services .service-card-price {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    margin: 0;
}

.all-services .service-card-price-label {
    font-weight: 500;
}

.all-services .service-card-price-value {
    font-weight: 700;
    color: #f05271;
}

.all-services .service-card-bookmark {
    position: absolute;
    top: 50px;
    right: 47px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .all-services .service-card-bookmark {
    right: auto;
    left: 47px;
}

.all-services .service-card-bookmark:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.all-services .service-card-bookmark:hover .bookmark-icon-outline {
    fill: #f05271;
}

.all-services .service-card-bookmark:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.all-services .service-card-bookmark.active .bookmark-icon-outline {
    display: none;
}

.all-services .service-card-bookmark.active .bookmark-icon-filled {
    display: block !important;
}

.all-services .service-card-bookmark .bookmark-icon {
    width: 20px;
    height: 19px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.all-services .service-card-bookmark .bookmark-icon-outline {
    display: block;
    fill: grey;
}

.all-services .service-card-bookmark .bookmark-icon-filled {
    display: none;
    fill: #f05271;
}

.all-services .all-services-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .all-services .all-services-pagination {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .all-services .all-services-pagination {
        padding: 0;
    }
}

.all-services .pagination-info {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
}

.all-services .pagination-info strong {
    font-weight: 700;
}

.all-services .pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.all-services .pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-services .pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.all-services .pagination-btn:hover:not(.all-services.pagination-btn-active) {
    border-color: #f05271;
    color: #f05271;
    transform: translateY(-2px);
}

.all-services .pagination-btn:active {
    transform: translateY(0) scale(0.95);
}

.all-services .pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.all-services .pagination-arrow:hover {
    transform: translateX(3px);
}

.all-services .pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .all-services .pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .all-services .pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .all-services .pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.all-services .pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.all-services .pagination-arrow:hover svg {
    stroke: #f05271;
}

.all-services [dir="rtl"] .service-card-header {
    flex-direction: row-reverse;
}

.all-projects {
    min-height: 100vh;
}

.all-projects .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 1440px) {
    .all-projects .main-container {
        max-width: 1220px !important;
    }
}

@media (max-width: 1200px) {
    .all-projects .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .all-projects .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .all-projects .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .all-projects .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .all-projects .main-container {
        padding: 0 15px;
    }
}

.all-projects .all-projects-header {
    padding: 80px 0 30px;
}

@media (max-width: 768px) {
    .all-projects .all-projects-header {
        padding: 30px 0 20px;
    }
}

.all-projects .all-projects-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

@media (max-width: 768px) {
    .all-projects .all-projects-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.all-projects .all-projects-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    margin: 0;
}

@media (max-width: 576px) {
    .all-projects .all-projects-title {
        white-space: normal;
        margin-bottom: 10px;
    }
}

.all-projects .all-projects-search {
    flex: 1;
    max-width: 419px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 999px;
    padding: 0 24px;
    box-shadow: 0 16px 50px 0 rgba(0, 0, 0, 0.1);
    height: 50px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.all-projects .all-projects-search:focus-within,
.all-projects .all-projects-search:hover {
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .all-projects .all-projects-search {
        width: 100%;
        max-width: 100%;
    }
}

.all-projects .all-projects-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 22px;
    color: rgba(0, 0, 0, 0.4);
    font-size: 16px;
}

.all-projects .all-projects-search-icon svg {
    width: 18px;
}

@media (max-width: 768px) {
    .all-projects .all-projects-search-icon {
        margin-right: 10px;
    }
}

.all-projects .all-projects-search-input {
    flex: 1;
    border: none;
    outline: 0;
    background: 0 0;
    font-size: 15px;
    color: #333;
    transform: translateY(2px);
    padding: 12px 0;
}

.all-projects .all-projects-search-input::-moz-placeholder {
    color: grey;
    font-size: 15px;
}

.all-projects .all-projects-search-input::placeholder {
    color: grey;
    font-size: 15px;
}

.all-projects .all-projects-filters {
    margin: 0;
    padding: 0 0 0;
    z-index: 9999;
    position: relative;
}

@media (max-width: 768px) {
    .all-projects .all-projects-filters {
        padding: 0 0 0;
    }
}

.all-projects .all-projects-filters-form {
    width: 100%;
}

.all-projects .all-projects-filters-container {
    background: rgba(0, 0, 0, 0.0509803922);
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 19px 25px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: clamp(8px, 1vw, 12px);
    position: relative;
}

@media (max-width: 1200px) {
    .all-projects .all-projects-filters-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 992px) {
    .all-projects .all-projects-filters-container {
        padding: 14px 20px;
    }
}

@media (max-width: 768px) {
    .all-projects .all-projects-filters-container {
        padding: 12px 15px;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .all-projects .all-projects-filters-container {
        padding: 12px 15px;
        border-radius: 30px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.all-projects .filter-dropdown {
    position: relative;
    flex-shrink: 0;
}

.all-projects .filter-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: #fff;
    border: none;
    border-radius: 100px;
    height: 45px;
    width: 100%;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.all-projects .filter-dropdown-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.all-projects .filter-dropdown-toggle:active {
    transform: translateY(0);
}

@media (max-width: 1200px) {
    .all-projects .filter-dropdown-toggle {
        width: clamp(160px, 14vw, 180px);
    }
}

@media (max-width: 992px) {
    .all-projects .filter-dropdown-toggle {
        padding: 0 14px;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .all-projects .filter-dropdown-toggle {
        width: calc(50% - 4px);
    }
}

@media (max-width: 576px) {
    .all-projects .filter-dropdown-toggle {
        width: 100%;
    }
}

.all-projects .filter-dropdown.show .filter-dropdown-toggle .filter-arrow-svg {
    transform: rotate(180deg);
}

/* .all-projects .filter-dropdown.show .filter-dropdown-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
} */

.all-projects .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.all-projects .filter-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 992px) {
    .all-projects .filter-icon {
        width: clamp(14px, 1.5vw, 15px);
        height: clamp(14px, 1.5vw, 15px);
        min-width: clamp(14px, 1.5vw, 15px);
    }
}

@media (max-width: 576px) {
    .all-projects .filter-icon {
        width: 14px;
        height: 14px;
        min-width: 14px;
    }
}

.all-projects .filter-text {
    font-size: 14px;
    font-weight: 500;
    color: grey;
    white-space: nowrap;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] .all-projects .filter-text {
    text-align: right;
}

@media (max-width: 992px) {
    .all-projects .filter-text {
        font-size: clamp(12px, 1.3vw, 13px);
    }
}

@media (max-width: 576px) {
    .all-projects .filter-text {
        font-size: 12px;
    }
}

.all-projects .filter-arrow-svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-left: auto;
    width: 9px;
    height: 6px;
}

[dir="rtl"] .all-projects .filter-arrow-svg {
    margin-left: 0;
    margin-right: auto;
}

.all-projects .filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 185px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

[dir="rtl"] .all-projects .filter-dropdown-menu {
    left: auto;
    right: 0;
}

@media (max-width: 768px) {
    .all-projects .filter-dropdown-menu {
        min-width: 100%;
    }
}

.all-projects .filter-dropdown-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.all-projects .filter-dropdown-list::-webkit-scrollbar {
    width: 5px;
}

.all-projects .filter-dropdown-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.all-projects .filter-dropdown-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.all-projects .filter-dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
}

[dir="rtl"] .all-projects .filter-dropdown-item {
    text-align: right;
}

.all-projects .filter-dropdown-item:focus,
.all-projects .filter-dropdown-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.all-projects .filter-dropdown-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .all-projects .filter-dropdown-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

.all-projects .filter-search-btn {
    width: 45px;
    height: 45px;
    background-color: #f05271;
    border: none;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
}

[dir="rtl"] .all-projects .filter-search-btn {
    margin-left: 0;
    margin-right: auto;
}

.all-projects .filter-search-btn svg {
    width: clamp(16px, 1.8vw, 21px);
    height: clamp(16px, 1.8vw, 21px);
    display: block;
}

.all-projects .filter-search-btn:hover {
    background-color: #8379b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 82, 113, 0.3);
}

.all-projects .filter-search-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .all-projects .filter-search-btn {
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 576px) {
    .all-projects .filter-search-btn {
        width: 100%;
        border-radius: 100px;
        grid-column: span 2 / span 2;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .all-projects [dir="rtl"] .all-projects-header-container {
        align-items: flex-end;
    }
}

.all-projects [dir="rtl"] .all-projects-search {
    padding-right: 24px;
    padding-left: 24px;
}

.all-projects [dir="rtl"] .all-projects-search-icon {
    margin-inline-end: 0;
    margin-inline-start: 22px;
}

@media (max-width: 768px) {
    .all-projects [dir="rtl"] .all-projects-search-icon {
        margin-left: 10px;
    }
}

.all-projects [dir="rtl"] .all-projects-filters-container {
    flex-direction: row-reverse;
}

.all-projects [dir="rtl"] .filter-search-btn {
    margin-right: auto;
    margin-left: 0;
}

.all-projects .all-projects-grid {
    padding: 40px 0 60px;
}

@media (max-width: 768px) {
    .all-projects .all-projects-grid {
        padding: 30px 0 40px;
    }
}

.all-projects .all-projects-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 1200px) {
    .all-projects .all-projects-grid-container {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .all-projects .all-projects-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .all-projects .all-projects-grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 419px;
        margin: 0 auto 50px;
    }
}

@media (max-width: 576px) {
    .all-projects .all-projects-grid-container {
        gap: 24px;
    }
}

.all-projects .project-card {
    position: relative;
    background-color: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 243px;
    padding: 28px;
    will-change: transform;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 99;
}

@media (max-width: 576px) {
    .all-projects .project-card {
        padding: 24px;
    }
}

.all-projects .project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.all-projects .project-card:hover .project-card-bookmark {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .all-projects .project-card {
        max-width: 419px;
        margin: 0 auto;
    }
}

.all-projects .project-card-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 11px;
    position: relative;
}

.all-projects .project-card-profile {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.all-projects .project-card-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.all-projects .project-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 9px;
}

.all-projects .project-card-name {
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 700;
    color: #000;
    margin: 0 0 5px 0;
    line-height: 26px;
    white-space: nowrap;
}

.all-projects .project-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 500;
    color: #000;
    line-height: 26px;
}

.all-projects .project-card-location svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.all-projects .project-card-location span {
    white-space: nowrap;
}

.all-projects .project-card-divider {
    width: 100%;
    height: 1px;
    margin: 0 0 11px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.all-projects .project-card-divider svg {
    width: 100%;
    max-width: 361px;
    height: 1px;
    display: block;
}

.all-projects .project-card-description {
    border-top: 1px solid rgba(128, 128, 128, 0.3019607843);
    padding-top: 12px;
    margin: 0 0 15px 0;
}

.all-projects .project-card-description p {
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 500;
    color: grey;
    line-height: 18px;
    margin: 0;
}

.all-projects .project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 11px;
}

.all-projects .project-card-price {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 700;
    color: #000;
    line-height: 24px;
}

.all-projects .project-card-duration {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 500;
    color: #000;
    line-height: 20px;
}

.all-projects .project-card-duration-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f05271;
    flex-shrink: 0;
}

.all-projects .project-card-bookmark {
    position: absolute;
    top: 39px;
    right: 28px;
    width: 24px;
    height: 24px;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    overflow: visible;
}

[dir="rtl"] .all-projects .project-card-bookmark {
    right: auto;
    left: 28px;
}

.all-projects .project-card-bookmark:hover {
    transform: scale(1.1);
}

.all-projects .project-card-bookmark:hover .bookmark-icon-outline {
    fill: #f05271;
}

.all-projects .project-card-bookmark:active {
    transform: scale(0.95);
}

.all-projects .project-card-bookmark.active .bookmark-icon-outline {
    display: none;
}

.all-projects .project-card-bookmark.active .bookmark-icon-filled {
    display: block !important;
}

.all-projects .project-card-bookmark .bookmark-icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.all-projects .project-card-bookmark .bookmark-icon-outline {
    display: block;
    fill: grey;
}

.all-projects .project-card-bookmark .bookmark-icon-filled {
    display: none;
    fill: #f05271;
}

.all-projects .all-projects-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .all-projects .all-projects-pagination {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .all-projects .all-projects-pagination {
        padding: 0;
    }
}

.all-projects .pagination-info {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
}

.all-projects .pagination-info strong {
    font-weight: 700;
}

.all-projects .pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.all-projects .pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.all-projects .pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.all-projects .pagination-btn:hover:not(.all-projects.pagination-btn-active) {
    border-color: #f05271;
    color: #f05271;
    transform: translateY(-2px);
}

.all-projects .pagination-btn:active {
    transform: translateY(0) scale(0.95);
}

.all-projects .pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.all-projects .pagination-arrow:hover {
    transform: translateX(3px);
}

.all-projects .pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .all-projects .pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .all-projects .pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .all-projects .pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.all-projects .pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.all-projects .pagination-arrow:hover svg {
    stroke: #f05271;
}

.all-projects [dir="rtl"] .project-card-header {
    flex-direction: row-reverse;
}

.all-projects [dir="rtl"] .project-card-info {
    align-items: flex-end;
}

.all-projects [dir="rtl"] .project-card-location {
    flex-direction: row-reverse;
}

.all-projects [dir="rtl"] .project-card-footer {
    flex-direction: row-reverse;
}

.cast-hub {
    min-height: 100vh;
}

.cast-hub .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 1440px) {
    .cast-hub .main-container {
        max-width: 1220px !important;
    }
}

@media (max-width: 1200px) {
    .cast-hub .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .cast-hub .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .cast-hub .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .cast-hub .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .cast-hub .main-container {
        padding: 0 15px;
    }
}

.cast-hub .cast-hub-header {
    padding: 80px 0 30px;
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-header {
        padding: 30px 0 20px;
    }
}

.cast-hub .cast-hub-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.cast-hub .cast-hub-title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #000;
    white-space: nowrap;
    margin: 0;
}

@media (max-width: 576px) {
    .cast-hub .cast-hub-title {
        white-space: normal;
        margin-bottom: 10px;
    }
}

.cast-hub .cast-hub-search {
    flex: 1;
    max-width: 419px;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 999px;
    padding: 0 24px;
    box-shadow: 0 16px 50px 0 rgba(0, 0, 0, 0.1);
    height: 50px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.cast-hub .cast-hub-search:focus-within,
.cast-hub .cast-hub-search:hover {
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-search {
        width: 100%;
        max-width: 100%;
    }
}

.cast-hub .cast-hub-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 22px;
    color: rgba(0, 0, 0, 0.4);
    font-size: 16px;
}

.cast-hub .cast-hub-search-icon svg {
    width: 18px;
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-search-icon {
        margin-right: 10px;
    }
}

.cast-hub .cast-hub-search-input {
    flex: 1;
    border: none;
    outline: 0;
    background: 0 0;
    font-size: 15px;
    color: #333;
    transform: translateY(2px);
    padding: 12px 0;
}

.cast-hub .cast-hub-search-input::-moz-placeholder {
    color: grey;
    font-size: 15px;
}

.cast-hub .cast-hub-search-input::placeholder {
    color: grey;
    font-size: 15px;
}

.cast-hub .cast-hub-filters {
    margin: 0;
    padding: 0 0 0;
    z-index: 9999;
    position: relative;
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-filters {
        padding: 0 0 0;
    }
}

.cast-hub .cast-hub-filters-form {
    width: 100%;
}

.cast-hub .cast-hub-filters-container {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 19px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px;
    position: relative;
}

@media (max-width: 1200px) {
    .cast-hub .cast-hub-filters-container {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 12px;
    }
}

@media (max-width: 992px) {
    .cast-hub .cast-hub-filters-container {
        padding: 14px 20px;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-filters-container {
        padding: 12px 15px;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .cast-hub .cast-hub-filters-container {
        padding: 12px 15px;
        border-radius: 30px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.cast-hub .filter-dropdown {
    position: relative;
    flex-shrink: 0;
}

.cast-hub .filter-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: #fff;
    border: none;
    border-radius: 100px;
    height: 45px;
    width: 192px;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
}

.cast-hub .filter-dropdown-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cast-hub .filter-dropdown-toggle:active {
    transform: translateY(0);
}

@media (max-width: 1200px) {
    .cast-hub .filter-dropdown-toggle {
        width: clamp(160px, 14vw, 192px);
    }
}

@media (max-width: 992px) {
    .cast-hub .filter-dropdown-toggle {
        padding: 0 14px;
        gap: 8px;
        width: clamp(140px, 15vw, 180px);
    }
}

@media (max-width: 768px) {
    .cast-hub .filter-dropdown-toggle {
        width: calc(50% - 4px);
    }
}

@media (max-width: 576px) {
    .cast-hub .filter-dropdown-toggle {
        width: 100%;
    }
}

.cast-hub .filter-dropdown.show .filter-dropdown-toggle .filter-arrow-svg {
    transform: rotate(180deg);
}

/* .cast-hub .filter-dropdown.show .filter-dropdown-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
} */

.cast-hub .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    min-width: 14px;
}

.cast-hub .filter-icon img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
}

.cast-hub .filter-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 992px) {
    .cast-hub .filter-icon {
        width: clamp(12px, 1.5vw, 14px);
        height: clamp(12px, 1.5vw, 14px);
        min-width: clamp(12px, 1.5vw, 14px);
    }
}

@media (max-width: 576px) {
    .cast-hub .filter-icon {
        width: 12px;
        height: 12px;
        min-width: 12px;
    }
}

.cast-hub .filter-text {
    font-size: 14px;
    font-weight: 500;
    color: grey;
    white-space: nowrap;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] .cast-hub .filter-text {
    text-align: right;
}

@media (max-width: 992px) {
    .cast-hub .filter-text {
        font-size: clamp(12px, 1.3vw, 13px);
    }
}

@media (max-width: 576px) {
    .cast-hub .filter-text {
        font-size: 12px;
    }
}

.cast-hub .filter-arrow-svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-left: auto;
    width: 9px;
    height: 6px;
}

[dir="rtl"] .cast-hub .filter-arrow-svg {
    margin-left: 0;
    margin-right: auto;
}

.cast-hub .filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 185px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

[dir="rtl"] .cast-hub .filter-dropdown-menu {
    left: auto;
    right: 0;
}

@media (max-width: 768px) {
    .cast-hub .filter-dropdown-menu {
        min-width: 100%;
    }
}

.cast-hub .filter-dropdown-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.cast-hub .filter-dropdown-list::-webkit-scrollbar {
    width: 5px;
}

.cast-hub .filter-dropdown-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.cast-hub .filter-dropdown-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.cast-hub .filter-dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
}

[dir="rtl"] .cast-hub .filter-dropdown-item {
    text-align: right;
}

.cast-hub .filter-dropdown-item:focus,
.cast-hub .filter-dropdown-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.cast-hub .filter-dropdown-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .cast-hub .filter-dropdown-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

.cast-hub .filter-search-btn {
    width: 192px;
    height: 45px;
    background-color: #f05271;
    border: none;
    border-radius: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .cast-hub .filter-search-btn {
    margin-left: 0;
    margin-right: auto;
}

.cast-hub .filter-search-btn .filter-search-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
}

.cast-hub .filter-search-btn:hover {
    background-color: #8379b8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(240, 82, 113, 0.3);
}

.cast-hub .filter-search-btn:active {
    transform: translateY(0);
}

@media (max-width: 1200px) {
    .cast-hub .filter-search-btn {
        width: clamp(160px, 14vw, 192px);
    }
}

@media (max-width: 992px) {
    .cast-hub .filter-search-btn {
        width: clamp(140px, 15vw, 180px);
        height: 42px;
    }

    .cast-hub .filter-search-btn .filter-search-text {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .cast-hub .filter-search-btn {
        width: calc(50% - 4px);
        height: 42px;
    }
}

@media (max-width: 576px) {
    .cast-hub .filter-search-btn {
        width: 100%;
        border-radius: 100px;
        grid-column: span 2 / span 2;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    .cast-hub [dir="rtl"] .cast-hub-header-container {
        align-items: flex-end;
    }
}

.cast-hub [dir="rtl"] .cast-hub-search {
    padding-right: 24px;
    padding-left: 24px;
}

.cast-hub [dir="rtl"] .cast-hub-search-icon {
    margin-inline-end: 0;
    margin-inline-start: 22px;
}

@media (max-width: 768px) {
    .cast-hub [dir="rtl"] .cast-hub-search-icon {
        margin-left: 10px;
    }
}

.cast-hub [dir="rtl"] .cast-hub-filters-container {
    flex-direction: row-reverse;
}

.cast-hub [dir="rtl"] .filter-search-btn {
    margin-right: auto;
    margin-left: 0;
}

.cast-hub .cast-hub-grid {
    padding: 40px 0 60px;
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-grid {
        padding: 30px 0 40px;
    }
}

.cast-hub .cast-hub-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 1200px) {
    .cast-hub .cast-hub-grid-container {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .cast-hub .cast-hub-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-grid-container {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 419px;
        margin: 0 auto 50px;
    }
}

@media (max-width: 576px) {
    .cast-hub .cast-hub-grid-container {
        gap: 24px;
    }
}

.cast-hub .artist-card {
    position: relative;
    background-color: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 398px;
    padding: 28px;
    will-change: transform;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 99;
    width: 100%;
}

@media (max-width: 576px) {
    .cast-hub .artist-card {
        padding: 24px;
        height: auto;
        min-height: 398px;
    }
}

.cast-hub .artist-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .cast-hub .artist-card {
        max-width: 419px;
        margin: 0 auto;
    }
}

.cast-hub .artist-card-image {
    width: 248px;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto 20px;
    position: relative;
}

.cast-hub .artist-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.artist-card:hover .cast-hub .artist-card-image img {
    transform: scale(1.05);
}

@media (max-width: 576px) {
    .cast-hub .artist-card-image {
        width: 100%;
        max-width: 248px;
    }
}

.cast-hub .artist-card-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cast-hub .artist-card-name {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 0 0 8px 0;
    line-height: 19px;
    text-align: left;
}

[dir="rtl"] .cast-hub .artist-card-name {
    text-align: right;
}

@media (max-width: 576px) {
    .cast-hub .artist-card-name {
        font-size: 18px;
    }
}

.cast-hub .artist-card-role-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
}

.cast-hub .artist-card-role {
    font-size: 18px;
    font-weight: 400;
    color: #000;
    line-height: 19px;
}

.cast-hub .artist-card-star {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cast-hub .artist-card-star svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cast-hub .artist-card-rating {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    line-height: 14px;
}

.cast-hub .artist-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.cast-hub .artist-card-followers {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    line-height: 17px;
}

.cast-hub .artist-card-followers strong {
    font-weight: 700;
}

.cast-hub .artist-card-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cast-hub .artist-card-social img {
    width: 17px;
    height: 17px;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
    opacity: 0.8;
}

.cast-hub .artist-card-social img:hover {
    transform: scale(1.1);
    opacity: 1;
}

.cast-hub .cast-hub-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-pagination {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
}

@media (max-width: 576px) {
    .cast-hub .cast-hub-pagination {
        padding: 0;
    }
}

.cast-hub .pagination-info {
    font-size: 14px;
    font-weight: 400;
    color: #000;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cast-hub .pagination-info strong {
    font-weight: 700;
}

.cast-hub .pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cast-hub .pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cast-hub .pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.cast-hub .pagination-btn:hover:not(.cast-hub.pagination-btn-active) {
    border-color: #f05271;
    color: #f05271;
    transform: translateY(-2px);
}

.cast-hub .pagination-btn:active {
    transform: translateY(0) scale(0.95);
}

.cast-hub .pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cast-hub .pagination-arrow:hover {
    transform: translateX(3px);
}

.cast-hub .pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .cast-hub .pagination-arrow:hover {
    transform: translateX(3px);
}

[dir="rtl"] .cast-hub .pagination-arrow:active {
    transform: translateX(1px);
}

.cast-hub .pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.cast-hub .pagination-arrow:hover svg {
    stroke: #f05271;
}

.cast-hub [dir="rtl"] .artist-card-name {
    text-align: right;
}

.cast-hub [dir="rtl"] .artist-card-footer {
    flex-direction: row-reverse;
}

.cast-hub .cast-hub-filters {
    margin: 0;
    padding: 0 0 0;
    z-index: 9999;
    position: relative;
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-filters {
        padding: 0 0 0;
    }
}

.cast-hub .cast-hub-filters-form {
    width: 100%;
}

.cast-hub .cast-hub-filters-container {
    background: rgba(0, 0, 0, 0.0509803922);
    border: 1px solid #fff;
    border-radius: 50px;
    padding: 19px 25px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
    gap: clamp(8px, 1vw, 12px);
    position: relative;
}

@media (max-width: 1200px) {
    .cast-hub .cast-hub-filters-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 992px) {
    .cast-hub .cast-hub-filters-container {
        padding: 14px 20px;
    }
}

@media (max-width: 768px) {
    .cast-hub .cast-hub-filters-container {
        padding: 12px 15px;
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .cast-hub .cast-hub-filters-container {
        padding: 12px 15px;
        border-radius: 30px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.cast-hub .filter-dropdown {
    position: relative;
    flex-shrink: 0;
}

.cast-hub .filter-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    background-color: #fff;
    border: none;
    border-radius: 100px;
    height: 45px;
    width: 100%;
    padding: 0 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.cast-hub .filter-dropdown-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cast-hub .filter-dropdown-toggle:active {
    transform: translateY(0);
}

@media (max-width: 1200px) {
    .cast-hub .filter-dropdown-toggle {
        width: clamp(160px, 14vw, 180px);
    }
}

@media (max-width: 992px) {
    .cast-hub .filter-dropdown-toggle {
        padding: 0 14px;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .cast-hub .filter-dropdown-toggle {
        width: calc(50% - 4px);
    }
}

@media (max-width: 576px) {
    .cast-hub .filter-dropdown-toggle {
        width: 100%;
    }
}

.cast-hub .filter-dropdown.show .filter-dropdown-toggle .filter-arrow-svg {
    transform: rotate(180deg);
}

/* .cast-hub .filter-dropdown.show .filter-dropdown-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
} */

.cast-hub .filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    min-width: 16px;
}

.cast-hub .filter-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

@media (max-width: 992px) {
    .cast-hub .filter-icon {
        width: clamp(14px, 1.5vw, 15px);
        height: clamp(14px, 1.5vw, 15px);
        min-width: clamp(14px, 1.5vw, 15px);
    }
}

@media (max-width: 576px) {
    .cast-hub .filter-icon {
        width: 14px;
        height: 14px;
        min-width: 14px;
    }
}

.cast-hub .filter-text {
    font-size: 14px;
    font-weight: 500;
    color: grey;
    white-space: nowrap;
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

[dir="rtl"] .cast-hub .filter-text {
    text-align: right;
}

@media (max-width: 992px) {
    .cast-hub .filter-text {
        font-size: clamp(12px, 1.3vw, 13px);
    }
}

@media (max-width: 576px) {
    .cast-hub .filter-text {
        font-size: 12px;
    }
}

.cast-hub .filter-arrow-svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-left: auto;
    width: 9px;
    height: 6px;
}

[dir="rtl"] .cast-hub .filter-arrow-svg {
    margin-left: 0;
    margin-right: auto;
}

.cast-hub .filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 185px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

[dir="rtl"] .cast-hub .filter-dropdown-menu {
    left: auto;
    right: 0;
}

@media (max-width: 768px) {
    .cast-hub .filter-dropdown-menu {
        min-width: 100%;
    }
}

.cast-hub .filter-dropdown-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.cast-hub .filter-dropdown-list::-webkit-scrollbar {
    width: 5px;
}

.cast-hub .filter-dropdown-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.cast-hub .filter-dropdown-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.cast-hub .filter-dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
}

[dir="rtl"] .cast-hub .filter-dropdown-item {
    text-align: right;
}

.cast-hub .filter-dropdown-item:focus,
.cast-hub .filter-dropdown-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.cast-hub .filter-dropdown-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .cast-hub .filter-dropdown-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

@media (max-width: 1440px) {
    .project-details .main-container {
        max-width: 1220px;
    }
}

@media (max-width: 1200px) {
    .project-details .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .project-details .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .project-details .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .project-details .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .project-details .main-container {
        padding: 0 15px;
    }
}

.breadcrumb-project-details {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.project-header {
    padding: 30px 0;
    padding-top: 70px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .project-header {
        padding: 20px 0;
        margin-bottom: 20px;
    }
}

.project-header-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

@media (max-width: 576px) {
    .project-header-container {
        flex-direction: column;
        gap: 15px;
    }
}

.project-header-profile {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.project-header-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.project-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-header-name {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    color: #000;
    margin: 0;
}

.project-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width: 576px) {
    .project-header-meta {
        gap: 15px;
    }
}

.project-header-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    color: #000;
}

.project-header-meta-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.project-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 419px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1200px) {
    .project-content-wrapper {
        grid-template-columns: 1fr 380px;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .project-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.project-main-content {
    background-color: #fff;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .project-main-content {
        padding: 24px;
    }
}

.project-meta-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.project-date {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 25px;
    color: #000;
}

.project-tags {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.project-tag {
    padding: 4px 12px;
    border-radius: 35px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: normal;
    color: grey;
}

.project-tag-senior {
    background-color: rgba(128, 128, 128, 0.15);
}

.project-tag-onset {
    background-color: rgba(248, 153, 44, 0.15);
    color: #f8992c;
}

.project-title-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .project-title-wrapper {
        gap: 15px;
    }
}

.project-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 32px;
    color: #000;
    margin: 0;
    flex: 1;
}

@media (max-width: 768px) {
    .project-title {
        font-size: 16px;
        line-height: 28px;
    }
}

.project-title-bookmark {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-top: 4px;
}

.project-title-bookmark:hover {
    transform: scale(1.1);
}

.project-title-bookmark img {
    width: 24px;
    height: 24px;
    -o-object-fit: contain;
    object-fit: contain;
}

.project-divider {
    width: 100%;
    height: 1px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-divider svg {
    width: 100%;
    max-width: 800px;
    height: 1px;
    -o-object-fit: contain;
    object-fit: contain;
}

.project-description {
    margin-bottom: 30px;
}

.project-description p {
    font-family: "Baloo 2", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #000;
    margin: 0 0 15px 0;
}

.project-description p:last-child {
    margin-bottom: 0;
}

.project-features {
    margin-bottom: 30px;
    padding: 20px 30px 30px;
    margin-left: -30px;
    margin-right: -30px;
    background-color: rgba(128, 128, 128, 0.02);
}

@media (max-width: 768px) {
    .project-features {
        padding: 20px 24px 24px;
        margin-left: -24px;
        margin-right: -24px;
    }
}

.project-features-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    color: #000;
    margin: 0 0 20px 0;
}

.project-features-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.project-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.project-feature-emoji {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.project-feature-content {
    flex: 1;
}

.project-feature-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 34px;
    color: #000;
    margin: 0 0 5px 0;
}

.project-feature-description {
    font-family: "Baloo 2", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 34px;
    color: #000;
    margin: 0;
}

.project-footer-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(128, 128, 128, 0.1);
}

@media (max-width: 576px) {
    .project-footer-info {
        flex-direction: column;
        align-items: flex-start;
    }
}

.project-price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 26px;
    color: #f05271;
}

@media (max-width: 768px) {
    .project-price {
        font-size: 28px;
    }
}

.project-price-currency {
    font-size: 32px;
    margin-right: 5px;
}

.project-price-amount {
    font-size: 32px;
}

.project-footer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

@media (max-width: 576px) {
    .project-footer-meta {
        gap: 15px;
    }
}

.project-footer-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    color: #000;
}

.project-footer-meta-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.project-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (max-width: 992px) {
    .project-sidebar {
        max-width: 100%;
    }
}

.submit-proposal {
    background-color: #fff;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .submit-proposal {
        padding: 24px;
    }
}

.submit-proposal-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 26px;
    color: #000;
    margin: 0 0 30px 0;
}

.submit-proposal-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: flex;
    gap: 20px;
}

@media (max-width: 576px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }
}

.form-group-half {
    flex: 1;
}

.filter-dropdown {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.filter-dropdown-toggle.proposal-amount-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 10px;
}

.filter-dropdown-toggle.proposal-amount-toggle .currency-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: grey;
    padding: 0 10px;
    white-space: nowrap;
}

.filter-dropdown-toggle.proposal-amount-toggle .currency-separator {
    width: 0;
    height: 43px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    margin: 0;
}

.filter-dropdown-toggle.proposal-amount-toggle .amount-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: grey;
    padding: 0 10px;
    flex: 1;
}

.filter-dropdown.show .filter-dropdown-toggle .filter-arrow-svg {
    transform: rotate(180deg);
}
/*
.filter-dropdown.show .filter-dropdown-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
} */
.filter-arrow-svg {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-left: auto;
    width: 9px;
    height: 6px;
}

.filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 185px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .filter-dropdown-menu {
        min-width: 100%;
    }
}

.filter-dropdown-list::-webkit-scrollbar {
    width: 5px;
}

.filter-dropdown-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.filter-dropdown-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.filter-dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: start;
    cursor: pointer;
}

.filter-dropdown-item:focus,
.filter-dropdown-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.filter-dropdown-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .filter-dropdown-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 26px;
    color: grey;
}

.form-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #cdcdcd;
    border-radius: 15px;
    height: 45px;
    background-color: #fff;
}

.proposal-amount-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.currency-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: grey;
    padding: 0 10px;
    white-space: nowrap;
}

.currency-separator {
    width: 0;
    height: 43px;
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    margin: 0;
}

.currency-select-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.currency-select {
    border: none;
    outline: 0;
    background: 0 0;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: grey;
    padding: 0 20px 0 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.form-input {
    flex: 1;
    border: none;
    outline: 0;
    background: 0 0;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: grey;
    padding: 0 10px;
}

.form-input::-moz-placeholder {
    color: grey;
}

.form-input::placeholder {
    color: grey;
}

.amount-input {
    flex: 1;
}

.form-select {
    flex: 1;
    border: none;
    outline: 0;
    background: 0 0;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: grey;
    padding: 0 30px 0 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.form-select option {
    color: #000;
}

.select-arrow-icon {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    flex-shrink: 0;
    line-height: 1;
}

.amount-arrows {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

html[dir="rtl"] .amount-arrows {
    right: auto;
    left: 10px;
}

.select-arrows {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.select-arrow-icon {
    font-size: 11px;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1;
}

.form-textarea {
    width: 100%;
    min-height: 120px;
    border: 1px solid #cdcdcd;
    border-radius: 15px;
    padding: 10px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    color: grey;
    resize: vertical;
    outline: 0;
}

.form-textarea::-moz-placeholder {
    color: grey;
}

.form-textarea::placeholder {
    color: grey;
}

.form-textarea:focus {
    border-color: #f05271;
}

.file-upload-area {
    border: 1px dashed #cdcdcd;
    border-radius: 15px;
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #fff;
}

.file-upload-area:hover {
    border-color: #f05271;
    background-color: rgba(240, 82, 113, 0.02);
}

.file-upload-area.dragover {
    border-color: #f05271;
    background-color: rgba(240, 82, 113, 0.05);
}

.file-upload-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 34px 0;
}

.upload-icon-wrapper {
    width: 19.866px;
    height: 16px;
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-icon {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.file-upload-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    color: grey;
    margin: 0;
}

.file-upload-text-main {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 22px;
    color: grey;
    margin: 0;
    text-align: center;
}

.file-upload-hint {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: 22px;
    color: grey;
    margin: 0;
    text-align: center;
}

.submit-proposal-btn {
    width: 100%;
    height: 40px;
    background-color: #f05271;
    border: none;
    border-radius: 168px;
    color: #fff;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
}

.submit-proposal-btn:hover {
    background-color: #8379b8;
    transform: translateY(-2px);
}

.submit-proposal-btn:active {
    transform: translateY(0);
}

.related-projects {
    border-radius: 30px;
}

.related-projects-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 26px;
    color: #000;
    margin: 0 0 20px 0;
}

.related-projects-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-card {
    position: relative;
    background-color: #fff;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 243px;
    padding: 28px;
    will-change: transform;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 99;
}

@media (max-width: 576px) {
    .project-card {
        padding: 24px;
    }
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.project-card:hover .project-card-bookmark {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .project-card {
        max-width: 419px;
        margin: 0 auto;
    }
}

.project-card-header {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 11px;
    position: relative;
}

.project-card-profile {
    width: 67px;
    height: 67px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.project-card-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.project-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 9px;
}

.project-card-name {
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 700;
    color: #000;
    margin: 0 0 5px 0;
    line-height: 26px;
    white-space: nowrap;
}

.project-card-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 500;
    color: #000;
    line-height: 26px;
}

.project-card-location svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.project-card-location span {
    white-space: nowrap;
}

.project-card-divider {
    width: 100%;
    height: 1px;
    margin: 0 0 11px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.project-card-divider svg {
    width: 100%;
    max-width: 361px;
    height: 1px;
    display: block;
}

.project-card-description {
    border-top: 1px solid rgba(128, 128, 128, 0.3019607843);
    padding-top: 12px;
    margin: 0 0 15px 0;
}

.project-card-description p {
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 500;
    color: grey;
    line-height: 18px;
    margin: 0;
}

.project-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 11px;
}

.project-card-price {
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 700;
    color: #000;
    line-height: 24px;
}

.project-card-duration {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(12px, 1.3vw, 14px);
    font-weight: 500;
    color: #000;
    line-height: 20px;
}

.project-card-duration-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f05271;
    flex-shrink: 0;
}

.project-card-bookmark {
    position: absolute;
    top: 39px;
    right: 28px;
    width: 24px;
    height: 24px;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    overflow: visible;
}

[dir="rtl"] .project-card-bookmark {
    right: auto;
    left: 28px;
}

.project-card-bookmark:hover {
    transform: scale(1.1);
}

.project-card-bookmark:hover .bookmark-icon-outline {
    fill: #f05271;
}

.project-card-bookmark:active {
    transform: scale(0.95);
}

.project-card-bookmark.active .bookmark-icon-outline {
    display: none;
}

.project-card-bookmark.active .bookmark-icon-filled {
    display: block !important;
}

.project-card-bookmark .bookmark-icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card-bookmark .bookmark-icon-outline {
    display: block;
    fill: grey;
}

.project-card-bookmark .bookmark-icon-filled {
    display: none;
    fill: #f05271;
}

.service-details {
    background:
        radial-gradient(circle at 0 0, #fff3e5 0, transparent 45%),
        radial-gradient(circle at 100% 0, #f3fbff 0, transparent 45%);
    min-height: 100vh;
    padding-bottom: 50px;
}

.service-details .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 1440px) {
    .service-details .main-container {
        max-width: 1220px;
    }
}

@media (max-width: 1200px) {
    .service-details .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .service-details .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .service-details .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .service-details .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .service-details .main-container {
        padding: 0 15px;
    }
}

.service-details .breadcrumb-service-details {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.service-details .service-header {
    padding: 30px 0;
    padding-top: 70px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .service-details .service-header {
        padding: 20px 0;
        margin-bottom: 20px;
    }
}

.service-details .service-header-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

@media (max-width: 576px) {
    .service-details .service-header-container {
        flex-direction: column;
        gap: 15px;
    }
}

.service-details .service-header-profile {
    width: 91px;
    height: 91px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-details .service-header-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

.service-details .service-header-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.service-details .service-header-name {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 26px;
    color: #000;
    margin: 0;
    margin-bottom: 5px;
    white-space: nowrap;
}

.service-details .service-header-location {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: clamp(10px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    margin-bottom: 10px;
    white-space: nowrap;
}

.service-details .service-header-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 0;
}

.service-details .service-header-stat-item {
    display: flex;
    align-items: center;
    gap: 0;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: clamp(10px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    white-space: nowrap;
    margin-right: 26px;
}

[dir="rtl"] .service-details .service-header-stat-item:first-child {
    margin-right: 0 !important;
}

@media (max-width: 768px) {
    .service-details .service-header-stat-item {
        margin-right: 20px;
    }
}

@media (max-width: 576px) {
    .service-details .service-header-stat-item {
        margin-right: 15px;
        margin-bottom: 8px;
    }
}

.service-details .service-header-stat-icon {
    width: clamp(15px, 2vw, 19px);
    height: clamp(15px, 2vw, 19px);
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
    margin-inline-end: 5px;
}

.service-details .service-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 405px;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1200px) {
    .service-details .service-content-wrapper {
        grid-template-columns: 1fr 380px;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .service-details .service-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

.service-details .service-main-content {
    background-color: #fff;
    border-radius: 30px;
    padding: 30px 41px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .service-details .service-main-content {
        padding: 24px 10px;
    }
}

.service-details .service-image {
    width: 787px;
    max-width: 100%;
    height: 571px;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 40px;
}

.service-details .service-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
}

@media (max-width: 992px) {
    .service-details .service-image {
        width: 100%;
        height: auto;
        aspect-ratio: 787/571;
    }
}

@media (max-width: 768px) {
    .service-details .service-image {
        height: 300px;
        aspect-ratio: auto;
    }
}

.service-details .service-title-wrapper {
    margin-bottom: 20px;
}

.service-details .service-title {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: clamp(18px, 2vw, 26px);
    line-height: 32px;
    color: #000;
    margin: 0;
    width: 787px;
    max-width: 100%;
    white-space: pre-wrap;
}

@media (max-width: 992px) {
    .service-details .service-title {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .service-details .service-title {
        font-size: clamp(18px, 2vw, 20px);
        line-height: 28px;
    }
}

.service-details .service-title-bookmark {
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    margin-top: 4px;
}

.service-details .service-title-bookmark:hover {
    transform: scale(1.1);
}

.service-details .service-title-bookmark svg {
    width: clamp(15px, 2vw, 20px);
    height: clamp(15px, 2vw, 19px);
}

.service-details .service-description {
    margin-bottom: 30px;
    width: 787px;
    max-width: 100%;
}

.service-details .service-description p {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 21px;
    color: #000;
    margin: 0;
    white-space: pre-wrap;
}

.service-details .service-description p strong {
    font-weight: 500;
}

.service-details .service-description p .service-description-text {
    font-weight: 400;
    font-family: "Gotham Rounded", sans-serif;
}

.service-details .service-description p:last-child {
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .service-details .service-description {
        width: 100%;
    }
}

.service-details .compare-packages-section {
    margin-bottom: 40px;
}

.service-details .compare-packages-title {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 32px;
    color: #000;
    margin: 20px 0 30px 0;
}

.service-details .packages-table {
    width: 100%;
}

@media (max-width: 768px) {
    .service-details .packages-table {
        overflow-x: auto;
    }
}

.service-details .packages-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 20px;
    overflow: hidden;
}

[dir="rtl"]
    .service-details
    .packages-table
    thead
    tr:first-child
    th:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 20px;
}

[dir="ltr"]
    .service-details
    .packages-table
    thead
    tr:first-child
    th:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 0;
}

[dir="rtl"]
    .service-details
    .packages-table
    thead
    tr:first-child
    th:last-child {
    border-top-right-radius: 0;
    border-top-left-radius: 20px;
}

[dir="ltr"]
    .service-details
    .packages-table
    thead
    tr:first-child
    th:last-child {
    border-top-right-radius: 20px;
    border-top-left-radius: 0;
}

[dir="rtl"]
    .service-details
    .packages-table
    tbody
    tr:last-child
    td:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 20px;
}

[dir="ltr"]
    .service-details
    .packages-table
    tbody
    tr:last-child
    td:first-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 0;
}

[dir="rtl"] .service-details .packages-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 20px;
}

[dir="ltr"] .service-details .packages-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 0;
}

.service-details .packages-table thead {
    background-color: rgba(128, 128, 128, 0.0509803922) !important;
}

.service-details .packages-table thead td,
.service-details .packages-table thead th {
    background: rgba(128, 128, 128, 0.0509803922) !important;
}

.service-details .packages-table td,
.service-details .packages-table th {
    padding: 0;
    text-align: left;
    border: 1px solid rgba(128, 128, 128, 0.3);
    font-family: "Gotham Rounded", sans-serif;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: normal;
    vertical-align: middle;
    box-sizing: border-box;
}

.service-details .packages-table th {
    font-weight: 500;
    color: #000;
}

.service-details .packages-table td {
    font-weight: 500;
    color: #000;
}

.service-details .packages-table .packages-table-header {
    text-align: center;
    padding: 30px !important;
    display: table-cell;
    vertical-align: middle;
}

.service-details .packages-table .packages-table-header.packages-table-package {
    text-align: center;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    color: #8379b8;
    width: 210px;
    padding: 30px 97px !important;
}

.service-details .packages-table .packages-table-header.packages-table-basic {
    color: #44bda4;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    width: 159px;
    padding: 30px 47px !important;
}

.service-details
    .packages-table
    .packages-table-header.packages-table-standard {
    color: #f8992c;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    width: 159px;
    padding: 30px 24px !important;
}

.service-details .packages-table .packages-table-header.packages-table-premium {
    color: #f05271;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    width: 159px;
    padding: 30px 25px !important;
}

.service-details .packages-table .packages-table-package {
    text-align: center;
    font-size: clamp(10px, 1.5vw, 13px);
    font-weight: 600;
    line-height: normal;
    padding: 30px 10px !important;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    background: #fff;
}

.service-details .packages-table .packages-table-basic {
    text-align: center;
    width: 159px;
    padding: 30px 47px !important;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    background: #fff;
}

.service-details .packages-table .packages-table-basic img {
    display: block;
    margin: 0 auto;
}

.service-details .packages-table .packages-table-standard {
    text-align: center;
    width: 159px;
    padding: 30px 24px !important;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    background: #fff;
}

.service-details .packages-table .packages-table-standard img {
    display: block;
    margin: 0 auto;
}

.service-details .packages-table .packages-table-premium {
    text-align: center;
    width: 159px;
    padding: 30px 25px !important;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    background: #fff;
}

.service-details .packages-table .packages-table-premium img {
    display: block;
    margin: 0 auto;
}

.service-details .packages-table .packages-table-delivery {
    background-color: rgba(128, 128, 128, 0.0509803922);
}

.service-details .packages-table .packages-table-delivery td {
    font-weight: 700;
    font-size: clamp(10px, 1.5vw, 14px);
    padding: 15px !important;
    display: table-cell;
    vertical-align: middle;
    background: rgba(128, 128, 128, 0.0509803922) !important;
}

.service-details .packages-table .packages-table-delivery td img {
    vertical-align: middle;
    margin: 0 5px;
    display: inline-block;
}

.service-details
    .packages-table
    .packages-table-delivery
    td.packages-table-package {
    padding: 30px 27px !important;
    color: #8379b8;
    text-align: center;
}

.service-details
    .packages-table
    .packages-table-delivery
    td.packages-table-basic {
    padding: 30px 15px !important;
    color: #44bda4;
    text-align: center;
}

.service-details
    .packages-table
    .packages-table-delivery
    td.packages-table-standard {
    padding: 30px 24px !important;
    color: #f8992c;
    text-align: center;
}

.service-details
    .packages-table
    .packages-table-delivery
    td.packages-table-premium {
    padding: 30px 25px !important;
    color: #f05271;
    text-align: center;
}

.service-details .packages-table .packages-table-total td {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 600;
    padding: 30px !important;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.service-details
    .packages-table
    .packages-table-total
    td.packages-table-package {
    font-size: clamp(18px, 2vw, 20px);
    padding: 30px 27px !important;
    text-align: center;
}

.service-details .packages-table .packages-table-total td.packages-table-basic {
    padding: 30px 47px !important;
}

.service-details
    .packages-table
    .packages-table-total
    td.packages-table-standard {
    padding: 30px 24px !important;
}

.service-details
    .packages-table
    .packages-table-total
    td.packages-table-premium {
    padding: 30px 25px !important;
}

.service-details .reviews-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.service-details .reviews-title {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    line-height: normal;
    color: #000;
    margin: 0 0 20px 0;
}

.service-details .reviews-overall-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 0;
    margin-bottom: 60px;
    height: 267px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .service-details .reviews-overall-card {
        height: auto;
        flex-direction: column;
        padding: 30px 20px;
    }
}

.service-details .reviews-overall-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 34px;
    gap: 0;
    position: relative;
}

@media (max-width: 768px) {
    .service-details .reviews-overall-left {
        padding: 20px;
        width: 100%;
    }
}

.service-details .reviews-overall-rating {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.service-details .reviews-overall-stars-icon {
    margin-top: 8px;
    margin-bottom: 14px;
}

.service-details .reviews-overall-stars-icon img {
    width: 98px;
    height: 13px;
    display: block;
}

.service-details .reviews-overall-number {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 2vw, 35px);
    line-height: normal;
    color: #000;
    display: block;
    margin-bottom: 0;
}

.service-details .reviews-overall-count {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 300;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.service-details .reviews-overall-divider {
    height: 180px;
    display: flex;
    align-items: center;
    margin: 0;
    width: 1px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .service-details .reviews-overall-divider {
        display: none;
    }
}

.service-details .reviews-overall-divider img {
    width: 1px;
    height: 180px;
    display: block;
}

.service-details .reviews-overall-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px 34px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

@media (max-width: 768px) {
    .service-details .reviews-overall-breakdown {
        padding: 0;
        width: 100%;
    }
}

.service-details .reviews-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin-bottom: 6px;
    position: relative;
    height: 30px;
}

@media (max-width: 768px) {
    .service-details .reviews-breakdown-item {
        height: 20px;
    }
}

.service-details .reviews-breakdown-item:last-child {
    margin-bottom: 0;
}

.service-details .reviews-breakdown-bar-wrapper {
    flex: 1;
    max-width: 404.566px;
    min-width: 200px;
    height: 8px;
    position: relative;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .service-details .reviews-breakdown-bar-wrapper {
        max-width: 100%;
    }
}

.service-details .reviews-breakdown-bar {
    height: 100%;
    background-color: #f8992c;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
}

.service-details .reviews-breakdown-bar.reviews-breakdown-bar-5 {
    width: 100%;
}

.service-details .reviews-breakdown-bar.reviews-breakdown-bar-4 {
    width: 79%;
}

.service-details .reviews-breakdown-bar.reviews-breakdown-bar-3 {
    width: 66%;
}

.service-details .reviews-breakdown-bar.reviews-breakdown-bar-2 {
    width: 51%;
}

.service-details .reviews-breakdown-bar.reviews-breakdown-bar-1 {
    width: 37%;
}

.service-details .reviews-breakdown-bar.reviews-breakdown-bar-2-2 {
    width: 75%;
}

.service-details .reviews-breakdown-label {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: normal;
    color: #000;
    text-align: end;
    white-space: nowrap;
    min-width: 95px;
}

.service-details .reviews-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .service-details .reviews-list {
        gap: 30px;
        margin-bottom: 40px;
    }
}

.service-details .review-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 28px 34px;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.service-details .review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .service-details .review-card {
        height: auto;
        padding: 24px 20px;
        min-height: 198px;
    }
}

.service-details .review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.service-details .review-card-separator {
    height: 1px;
    background-color: rgba(202, 202, 202, 0.5);
    margin: 16px 0;
    width: 100%;
}

.service-details .review-card-stars {
    margin: 16px 0;
    display: flex;
    align-items: center;
}

.service-details .review-card-stars img {
    width: 98px;
    height: 13px;
    display: block;
}

.service-details .review-card-user {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.service-details .review-card-avatar {
    width: 35.969px;
    height: 35.969px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-details .review-card-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.service-details .review-card-user-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.service-details .review-card-name {
    font-family: "Gotham Rounded", sans-serif;
    font-size: 14px;
    line-height: normal;
    color: #000;
    margin-bottom: 3px;
}

.service-details .review-card-name-bold {
    font-weight: 700;
}

.service-details .review-card-name-normal {
    font-weight: 400;
}

.service-details .review-card-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 11px;
    line-height: normal;
    color: #000;
}

.service-details .review-card-location-dot {
    width: 5.404px;
    height: 5.404px;
    background-color: #f05271;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.service-details .review-card-time {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    color: #000;
    text-align: right;
    white-space: nowrap;
    margin: 0;
}

.service-details .review-card-content {
    position: relative;
}

.service-details .review-card-text {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #000;
    margin: 0;
    position: relative;
    z-index: 2;
    white-space: pre-wrap;
    margin-bottom: 10px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .service-details .review-card-text {
        padding-left: 0;
    }
}

.service-details .reviews-pagination {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .service-details .reviews-pagination {
        margin-top: 40px;
    }
}

.service-details .reviews-pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.service-details .reviews-pagination-btn:hover {
    border-color: #f05271;
    color: #f05271;
    transform: scale(1.05);
}

.service-details .reviews-pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.service-details .reviews-pagination-btn-active:hover {
    transform: scale(1.05);
    color: #fff;
}

.service-details .reviews-pagination-arrow {
    width: 38px;
    height: 38px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    padding: 0;
}

.service-details .reviews-pagination-arrow:hover {
    transform: translateX(2px);
}

.service-details .reviews-pagination-arrow svg {
    width: 9px;
    height: 14px;
}

.service-details .service-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

@media (max-width: 992px) {
    .service-details .service-sidebar {
        max-width: 100%;
        order: -1;
    }
}

.service-details .package-selection {
    background-color: #fff;
    border-radius: 30px;
    padding: 0;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    overflow: visible;
    position: relative;
}

@media (max-width: 768px) {
    .service-details .package-selection {
        padding: 0;
    }
}

.service-details .package-tabs-container {
    background-color: #fff;
    border-radius: 30px 30px 0 0;
    height: 70px;
    padding: 16px 14px;
    position: relative;
    z-index: 1;
}

.service-details .package-tabs {
    display: flex;
    gap: 7px;
    height: 100%;
    align-items: center;
}

.service-details .package-tab {
    flex: 1;
    height: 38px;
    border: none;
    background-color: #8379b8;
    color: #fff;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 17px);
    line-height: normal;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-details .package-tab:hover {
    opacity: 0.9;
}

.service-details .package-tab-active {
    background-color: #f05271;
}

.service-details .package-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 524px;
}

@media (max-width: 768px) {
    .service-details .package-content {
        padding: 24px;
        min-height: auto;
    }
}

.service-details .package-separator {
    height: 1px;
    background-color: rgba(128, 128, 128, 0.1);
    width: 100%;
    margin: 18px 0;
}

.service-details .package-features {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.service-details .package-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.service-details .package-feature-item img {
    width: clamp(15px, 2vw, 18px);
    height: clamp(15px, 2vw, 18px);
    flex-shrink: 0;
    margin-top: 2px;
}

.service-details .package-feature-item span {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 16px);
    line-height: 21px;
    color: #000;
    flex: 1;
}

.service-details .package-feature-item:not(:last-child) {
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.service-details .package-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin: 0;
}

.service-details .package-price-label {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 2vw, 18px);
    line-height: 21px;
    color: #000;
}

.service-details .package-price-amount {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 21px;
    color: #f05271;
}

.service-details .package-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.service-details .package-compare:hover {
    opacity: 0.8;
}

.service-details .package-compare-icon {
    width: 24px;
    height: 29px;
    flex-shrink: 0;
}

.service-details .package-compare-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 16px);
    line-height: 18px;
    color: #8379b8;
}

.service-details .package-actions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 30px 30px 30px;
}

@media (max-width: 768px) {
    .service-details .package-actions {
        padding: 0 24px 24px 24px;
    }
}

.service-details .package-btn-primary {
    width: 100%;
    height: 60px;
    background-color: #f05271;
    border: none;
    border-radius: 168px;
    color: #fff;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 2vw, 18px);
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    white-space: pre-wrap;
    text-align: center;
}

.service-details .package-btn-primary:hover {
    background-color: #8379b8;
    transform: translateY(-2px);
}

.service-details .package-btn-primary:active {
    transform: translateY(0);
}

.service-details .package-btn-secondary {
    width: 100%;
    height: 60px;
    background-color: transparent;
    border: 1px solid #f05271;
    border-radius: 60px;
    color: #f05271;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 58px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    white-space: pre-wrap;
    text-align: center;
}

.service-details .package-btn-secondary:hover {
    background-color: rgba(240, 82, 113, 0.1);
    transform: translateY(-2px);
}

.service-details .package-btn-secondary:active {
    transform: translateY(0);
}

.cast-profile-details {
    min-height: 100vh;
    padding-bottom: 50px;
}

.cast-profile-details .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 1440px) {
    .cast-profile-details .main-container {
        max-width: 1220px;
    }
}

@media (max-width: 1200px) {
    .cast-profile-details .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .cast-profile-details .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .cast-profile-details .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .cast-profile-details .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .cast-profile-details .main-container {
        padding: 0 15px;
    }
}

.profile-details-section {
    padding: 96px 0 50px;
}

@media (max-width: 768px) {
    .profile-details-section {
        padding: 50px 0 30px;
    }
}

.profile-details-title {
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0 0 40px 0;
}

@media (max-width: 768px) {
    .profile-details-title {
        margin-bottom: 30px;
    }
}

.profile-details-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 38px 47px;
    position: relative;
}

@media (max-width: 992px) {
    .profile-details-card {
        padding: 30px 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-card {
        padding: 24px 20px;
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .profile-details-card {
        padding: 20px 15px;
        border-radius: 20px;
    }
}

.profile-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .profile-details-header {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .profile-details-header {
        gap: 15px;
        margin-bottom: 15px;
    }
}

.profile-details-header-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex: 1;
}

@media (max-width: 576px) {
    .profile-details-header-left {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
}

.profile-details-photo {
    width: 91px;
    height: 91px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-details-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media (max-width: 576px) {
    .profile-details-photo {
        width: 80px;
        height: 80px;
        border-radius: 50px;
    }
}

.profile-details-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-details-name {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 26px;
    color: #000;
    margin: 0 0 5px 0;
    white-space: nowrap;
}

.profile-details-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    margin-bottom: 10px;
}

.profile-details-location svg {
    flex-shrink: 0;
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
}

.profile-details-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .profile-details-stats {
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .profile-details-stats {
        gap: 12px;
    }
}

.profile-details-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    white-space: nowrap;
}

.profile-details-stat-item svg {
    flex-shrink: 0;
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
}

.profile-details-stat-item .profile-details-stat-icon {
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.profile-details-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

@media (max-width: 992px) {
    .profile-details-header-right {
        align-items: flex-start;
        width: 100%;
    }
}

.profile-details-response-time {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 992px) {
    .profile-details-response-time {
        flex-direction: column;
        align-items: flex-start;
    }
}

.profile-details-time-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 35px;
    padding: 4px 12px;
    height: 23px;
    font-weight: 500;
    font-size: clamp(10px, 1.2vw, 12px);
    line-height: normal;
    color: grey;
}

.profile-details-time-item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.profile-details-time-item strong {
    font-weight: 700;
}

.profile-details-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(128, 128, 128, 0.3);
    margin: 20px 0;
}

@media (max-width: 768px) {
    .profile-details-divider {
        margin: 15px 0;
    }
}

.profile-video-section {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row !important;
}

@media (max-width: 992px) {
    .profile-video-section {
        flex-direction: column !important;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-video-section {
        gap: 25px;
    }
}

.profile-video-section > div {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.profile-details-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
}

@media (max-width: 992px) {
    .profile-details-content {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-content {
        gap: 25px;
        margin-top: 20px;
    }
}

.profile-details-content-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

@media (max-width: 992px) {
    .profile-details-content-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-content-row {
        gap: 25px;
    }
}

.profile-details-section-item {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.profile-details-section-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 26px;
    color: #000;
    margin: 0;
}

.profile-details-section-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 20px;
    color: #000;
    text-align: justify;
    margin: 0;
    max-width: 554px;
}

@media (max-width: 992px) {
    .profile-details-section-text {
        max-width: 100%;
    }
}

.profile-details-list {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 24px;
    color: #000;
    text-align: justify;
    margin: 0;
    padding-left: 21px;
}

[dir="rtl"] .profile-details-list {
    padding-left: 0;
    padding-right: 21px;
}

.profile-details-list li {
    margin-bottom: 0;
}

.profile-details-list li:last-child {
    margin-bottom: 0;
}

.profile-details-list li strong {
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
}

.profile-details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 576px) {
    .profile-details-tags {
        gap: 8px;
    }
}

.profile-details-tag {
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 100px;
    padding: 7px 22px;
    font-weight: 600;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: normal;
    color: grey;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: default;
}

.profile-details-tag:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-tag {
        padding: 6px 18px;
        font-size: 12px;
    }
}

.profile-details-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 100px;
    padding: 7px 22px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 17px;
    color: grey;
    white-space: nowrap;
}

.profile-details-button svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.profile-details-button:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-button {
        padding: 6px 18px;
        font-size: 14px;
    }

    .profile-details-button svg {
        width: 20px;
        height: 20px;
    }
}

.profile-details-video-links {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
}

@media (max-width: 576px) {
    .profile-details-video-links {
        gap: 12px;
    }
}

.profile-details-video-link {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 50px;
    padding: 7px 22px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 17px;
    color: grey;
    white-space: nowrap;
    height: 38px;
    width: 119px;
    justify-content: center;
}

.profile-details-video-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.profile-details-video-link:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-video-link {
        padding: 6px 18px;
        font-size: 14px;
        height: 35px;
        width: 110px;
    }

    .profile-details-video-link svg {
        width: 14px;
        height: 14px;
    }
}

.photo-album-section {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .photo-album-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.photo-album-title {
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0 0 40px 0;
}

@media (max-width: 768px) {
    .photo-album-title {
        margin-bottom: 30px;
    }
}

@media (max-width: 992px) {
    .photo-album-wrapper {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .photo-album-wrapper {
        padding: 0 30px;
    }
}

@media (max-width: 576px) {
    .photo-album-wrapper {
        padding: 0 20px;
    }
}

.photo-album-swiper {
    width: 100%;
    overflow: visible;
}

.photo-album-item {
    position: relative;
    width: 100%;
    height: 388px;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.photo-album-item:hover {
    transform: translateY(-5px);
    box-shadow: none;
}

.photo-album-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media (max-width: 992px) {
    .photo-album-item {
        height: 350px;
        border-radius: 30px;
    }
}

@media (max-width: 768px) {
    .photo-album-item {
        height: 300px;
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .photo-album-item {
        height: 250px;
        border-radius: 20px;
    }
}

.photo-album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 35px;
    pointer-events: none;
}

@media (max-width: 992px) {
    .photo-album-overlay {
        border-radius: 30px;
    }
}

@media (max-width: 768px) {
    .photo-album-overlay {
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .photo-album-overlay {
        border-radius: 20px;
    }
}

.photo-album-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 14px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.photo-album-nav:hover {
    opacity: 0.8;
    transform: none;
}

.photo-album-nav svg {
    width: 12px;
    height: 18px;
    transition: transform 0.3s ease;
}

.photo-album-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.photo-album-nav-prev {
    left: 0;
}

@media (max-width: 576px) {
    .photo-album-nav-prev {
        left: -10px;
    }
}

.photo-album-nav-next {
    right: 0;
}

.photo-album-nav-next svg {
    transform: rotate(180deg);
}

@media (max-width: 576px) {
    .photo-album-nav-next {
        right: -10px;
    }
}

.services-catalogue-section {
    padding: 50px 0;
    margin-top: 50px;
}

@media (max-width: 768px) {
    .services-catalogue-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.services-catalogue-title {
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0 0 40px 0;
}

@media (max-width: 768px) {
    .services-catalogue-title {
        margin-bottom: 30px;
    }
}

.services-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .services-catalogue-grid {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .services-catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .services-catalogue-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 419px;
        margin: 0 auto 40px;
    }
}

@media (max-width: 576px) {
    .services-catalogue-grid {
        gap: 24px;
    }
}

.service-card {
    position: relative;
    background-color: #fff;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 391px;
    padding-bottom: 20px;
    will-change: transform;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 99;
    padding: 0 25px;
}

@media (max-width: 576px) {
    .service-card {
        padding: 0 20px;
    }
}

.service-card:hover {
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.service-card:hover .service-card-image img {
    transform: scale(1.1);
}

.service-card:hover .service-card-bookmark {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .service-card {
        max-width: 419px;
        margin: 0 auto;
    }
}

.service-card-image {
    width: 100%;
    height: 162px;
    overflow: hidden;
    margin: 31px auto 0;
    border-radius: 19px;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    border-radius: 19px;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.service-card-content {
    padding-top: 21px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .service-card-content {
        width: 100%;
    }
}

.service-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
}

.service-card-profile {
    width: 44px;
    height: 44px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-card-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.service-card-name {
    font-size: 18px;
    font-weight: 700;
    font-family: "Baloo 2", sans-serif;
    color: #000;
    margin: 0;
    line-height: 26px;
    white-space: nowrap;
}

.service-card-description {
    font-size: 18px;
    font-weight: 500;
    font-family: "Baloo 2", sans-serif;
    color: #000;
    line-height: 27px;
    margin: 0;
}

.service-card-text {
    display: inline;
}

.service-card-price {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    margin: 0;
}

.service-card-price-label {
    font-weight: 500;
    font-family: "Baloo 2", sans-serif;
}

.service-card-price-value {
    font-weight: 700;
    font-family: "Baloo 2", sans-serif;
    color: #f05271;
}

.service-card-bookmark {
    position: absolute;
    top: 50px;
    right: 47px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .service-card-bookmark {
    right: auto;
    left: 47px;
}

.service-card-bookmark:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.service-card-bookmark:hover .bookmark-icon-outline {
    fill: #f05271;
}

.service-card-bookmark:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.service-card-bookmark.active .bookmark-icon-outline {
    display: none;
}

.service-card-bookmark.active .bookmark-icon-filled {
    display: block !important;
}

.service-card-bookmark .bookmark-icon {
    width: 20px;
    height: 19px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-bookmark .bookmark-icon-outline {
    display: block;
    fill: grey;
}

.service-card-bookmark .bookmark-icon-filled {
    display: none;
    fill: #f05271;
}

.services-catalogue-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .services-catalogue-pagination {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .services-catalogue-pagination {
        padding: 0;
    }
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.pagination-btn:hover:not(.pagination-btn-active) {
    border-color: #f05271;
    color: #f05271;
    transform: translateY(-2px);
}

.pagination-btn:active {
    transform: translateY(0) scale(0.95);
}

.pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-arrow:hover {
    transform: translateX(3px);
}

.pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.pagination-arrow:hover svg {
    stroke: #f05271;
}

.reviews-section {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.reviews-title {
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: normal;
    color: #000;
    margin: 0 0 20px 0;
}

.reviews-overall-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 0;
    margin-bottom: 60px;
    height: 267px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .reviews-overall-card {
        height: auto;
        flex-direction: column;
        padding: 30px 20px;
    }
}

.reviews-overall-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 80px;
    gap: 0;
    position: relative;
}

@media (max-width: 768px) {
    .reviews-overall-left {
        padding: 20px;
        width: 100%;
    }
}

.reviews-overall-rating {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.reviews-overall-stars-icon {
    margin-top: 8px;
    margin-bottom: 14px;
}

.reviews-overall-stars-icon img {
    width: 98px;
    height: 13px;
    display: block;
}

.reviews-overall-number {
    font-weight: 700;
    font-size: clamp(40px, 4vw, 50px);
    line-height: normal;
    color: #000;
    display: block;
    margin-bottom: 0;
}

.reviews-overall-count {
    font-weight: 400;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.reviews-overall-divider {
    height: 180px;
    display: flex;
    align-items: center;
    margin: 0;
    width: 1px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .reviews-overall-divider {
        display: none;
    }
}

.reviews-overall-divider img {
    width: 1px;
    height: 180px;
    display: block;
}

.reviews-overall-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px 34px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

@media (max-width: 768px) {
    .reviews-overall-breakdown {
        padding: 0;
        width: 100%;
    }
}

.reviews-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin-bottom: 6px;
    position: relative;
    height: 30px;
}

@media (max-width: 768px) {
    .reviews-breakdown-item {
        height: 20px;
    }
}

.reviews-breakdown-item:last-child {
    margin-bottom: 0;
}

.reviews-breakdown-bar-wrapper {
    flex: 1;
    max-width: 80%;
    min-width: 200px;
    height: 8px;
    position: relative;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .reviews-breakdown-bar-wrapper {
        max-width: 100%;
    }
}

.reviews-breakdown-bar {
    height: 100%;
    background-color: #f8992c;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
}

.reviews-breakdown-bar.reviews-breakdown-bar-5 {
    width: 100%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-4 {
    width: 79%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-3 {
    width: 66%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-2 {
    width: 51%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-1 {
    width: 37%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-2-2 {
    width: 75%;
}

.reviews-breakdown-label {
    font-weight: 700;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: normal;
    color: #000;
    text-align: end;
    white-space: nowrap;
    min-width: 95px;
}

.reviews-client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .reviews-client-header {
        align-items: flex-start;
        gap: 15px;
    }
}

.reviews-client-title {
    font-weight: 700;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.reviews-sort-dropdown {
    position: relative;
}

.reviews-sort-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.reviews-sort-toggle:hover {
    opacity: 0.8;
}

.reviews-sort-arrow {
    width: 9px;
    height: 6px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.reviews-sort-label {
    font-weight: 400;
    font-size: 14px;
    color: #000;
}

.reviews-sort-value {
    font-weight: 700;
    font-size: 14px;
    color: #000;
}

.reviews-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

[dir="rtl"] .reviews-sort-menu {
    right: auto;
    left: 0;
}

.reviews-sort-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.reviews-sort-list::-webkit-scrollbar {
    width: 5px;
}

.reviews-sort-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.reviews-sort-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.reviews-sort-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
}

[dir="rtl"] .reviews-sort-item {
    text-align: right;
}

.reviews-sort-item:focus,
.reviews-sort-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.reviews-sort-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .reviews-sort-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

.reviews-sort-dropdown.show .reviews-sort-toggle .reviews-sort-arrow {
    transform: rotate(180deg);
}

.reviews-sort-dropdown.show .reviews-sort-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .reviews-list {
        gap: 30px;
        margin-bottom: 40px;
    }
}

.review-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 28px 34px;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    min-height: 198px;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .review-card {
        height: auto;
        padding: 24px 20px;
        min-height: 198px;
    }
}

.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.review-card-separator {
    height: 1px;
    background-color: rgba(202, 202, 202, 0.5);
    margin: 16px 0;
    width: 100%;
}

.review-card-stars {
    margin: 16px 0;
    display: flex;
    align-items: center;
}

.review-card-stars img {
    width: 98px;
    height: 13px;
    display: block;
}

.review-card-user {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.review-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.review-card-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.review-card-user-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-card-name {
    font-size: 15px;
    line-height: normal;
    color: #000;
    margin-bottom: 3px;
}

.review-card-name-bold {
    font-weight: 700;
}

.review-card-name-normal {
    font-weight: 400;
}

.review-card-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 11px;
    line-height: normal;
    color: #000;
}

.review-card-location-dot {
    width: 7px;
    height: 7px;
    background-color: #f05271;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.review-card-time {
    font-weight: 400;
    font-size: 11px;
    line-height: normal;
    color: #000;
    text-align: right;
    white-space: nowrap;
    margin: 0;
}

.review-card-content {
    position: relative;
}

.review-card-text {
    font-weight: 400;
    font-size: 15px;
    color: #000;
    margin: 0;
    position: relative;
    z-index: 2;
    white-space: pre-wrap;
    margin-bottom: 10px;
    margin-top: 0;
    line-height: normal;
}

@media (max-width: 768px) {
    .review-card-text {
        padding-left: 0;
    }
}

.reviews-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .reviews-pagination {
        margin-top: 40px;
        justify-content: center;
    }
}

.reviews-pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.reviews-pagination-btn:hover {
    border-color: #f05271;
    color: #f05271;
    transform: scale(1.05);
}

.reviews-pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.reviews-pagination-btn-active:hover {
    transform: scale(1.05);
    color: #fff;
}

.reviews-pagination-btn:active {
    transform: scale(0.95);
}

.reviews-pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.reviews-pagination-arrow:hover {
    transform: translateX(3px);
}

.reviews-pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .reviews-pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .reviews-pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .reviews-pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.reviews-pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.reviews-pagination-arrow:hover svg {
    stroke: #f05271;
}

.crew-profile-details {
    min-height: 100vh;
    padding-bottom: 50px;
}

.crew-profile-details .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 1440px) {
    .crew-profile-details .main-container {
        max-width: 1220px;
    }
}

@media (max-width: 1200px) {
    .crew-profile-details .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .crew-profile-details .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .crew-profile-details .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .crew-profile-details .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .crew-profile-details .main-container {
        padding: 0 15px;
    }
}

.profile-details-section {
    padding: 96px 0 50px;
}

@media (max-width: 768px) {
    .profile-details-section {
        padding: 50px 0 30px;
    }
}

.profile-details-title {
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0 0 40px 0;
}

@media (max-width: 768px) {
    .profile-details-title {
        margin-bottom: 30px;
    }
}

.profile-details-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 38px 47px;
    position: relative;
}

@media (max-width: 992px) {
    .profile-details-card {
        padding: 30px 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-card {
        padding: 24px 20px;
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .profile-details-card {
        padding: 20px 15px;
        border-radius: 20px;
    }
}

.profile-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .profile-details-header {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .profile-details-header {
        gap: 15px;
        margin-bottom: 15px;
    }
}

.profile-details-header-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex: 1;
}

@media (max-width: 576px) {
    .profile-details-header-left {
        flex-direction: column;
        gap: 15px;
    }
}

.profile-details-photo {
    width: 91px;
    height: 91px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-details-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media (max-width: 576px) {
    .profile-details-photo {
        width: 80px;
        height: 80px;
        border-radius: 50px;
    }
}

.profile-details-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-details-name {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 26px;
    color: #000;
    margin: 0 0 5px 0;
    white-space: nowrap;
}

.profile-details-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    margin-bottom: 10px;
}

.profile-details-location svg {
    flex-shrink: 0;
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
}

.profile-details-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .profile-details-stats {
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .profile-details-stats {
        gap: 12px;
    }
}

.profile-details-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    white-space: nowrap;
}

.profile-details-stat-item svg {
    flex-shrink: 0;
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
}

.profile-details-stat-item .profile-details-stat-icon {
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.profile-details-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

@media (max-width: 992px) {
    .profile-details-header-right {
        align-items: flex-start;
        width: 100%;
    }
}

.profile-details-response-time {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 992px) {
    .profile-details-response-time {
        flex-direction: column;
        align-items: flex-start;
    }
}

.profile-details-time-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 35px;
    padding: 4px 12px;
    height: 23px;
    font-weight: 500;
    font-size: clamp(10px, 1.2vw, 12px);
    line-height: normal;
    color: grey;
}

.profile-details-time-item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.profile-details-time-item strong {
    font-weight: 700;
}

.profile-details-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(128, 128, 128, 0.3);
    margin: 20px 0;
}

@media (max-width: 768px) {
    .profile-details-divider {
        margin: 15px 0;
    }
}

.profile-video-section {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row !important;
}

@media (max-width: 992px) {
    .profile-video-section {
        flex-direction: column !important;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-video-section {
        gap: 25px;
    }
}

.profile-video-section > div {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.profile-details-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
}

@media (max-width: 992px) {
    .profile-details-content {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-content {
        gap: 25px;
        margin-top: 20px;
    }
}

.profile-details-content-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

@media (max-width: 992px) {
    .profile-details-content-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-content-row {
        gap: 25px;
    }
}

.profile-details-section-item {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.profile-details-section-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 26px;
    color: #000;
    margin: 0;
}

.profile-details-section-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 20px;
    color: #000;
    text-align: justify;
    margin: 0;
    max-width: 554px;
}

@media (max-width: 992px) {
    .profile-details-section-text {
        max-width: 100%;
    }
}

.profile-details-list {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 24px;
    color: #000;
    text-align: justify;
    margin: 0;
    padding-left: 21px;
}

[dir="rtl"] .profile-details-list {
    padding-left: 0;
    padding-right: 21px;
}

.profile-details-list li {
    margin-bottom: 0;
}

.profile-details-list li:last-child {
    margin-bottom: 0;
}

.profile-details-list li strong {
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
}

.profile-details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 576px) {
    .profile-details-tags {
        gap: 8px;
    }
}

.profile-details-tag {
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 100px;
    padding: 7px 22px;
    font-weight: 600;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: normal;
    color: grey;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: default;
}

.profile-details-tag:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-tag {
        padding: 6px 18px;
        font-size: 12px;
    }
}

.profile-details-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 100px;
    padding: 7px 22px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 17px;
    color: grey;
    white-space: nowrap;
}

.profile-details-button svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.profile-details-button:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-button {
        padding: 6px 18px;
        font-size: 14px;
    }

    .profile-details-button svg {
        width: 20px;
        height: 20px;
    }
}

.profile-details-video-links {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
}

@media (max-width: 576px) {
    .profile-details-video-links {
        gap: 12px;
    }
}

.profile-details-video-link {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 50px;
    padding: 7px 22px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 17px;
    color: grey;
    white-space: nowrap;
    height: 38px;
    width: 119px;
    justify-content: center;
}

.profile-details-video-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.profile-details-video-link:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-video-link {
        padding: 6px 18px;
        font-size: 14px;
        height: 35px;
        width: 110px;
    }

    .profile-details-video-link svg {
        width: 14px;
        height: 14px;
    }
}

.photo-album-section {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .photo-album-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.photo-album-title {
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0 0 40px 0;
}

@media (max-width: 768px) {
    .photo-album-title {
        margin-bottom: 30px;
    }
}

.photo-album-wrapper {
    position: relative;
    padding: 0 50px;
}

@media (max-width: 992px) {
    .photo-album-wrapper {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .photo-album-wrapper {
        padding: 0 30px;
    }
}

@media (max-width: 576px) {
    .photo-album-wrapper {
        padding: 0 20px;
    }
}

.photo-album-swiper {
    width: 100%;
    overflow: visible;
}

.photo-album-item {
    position: relative;
    width: 100%;
    height: 388px;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.photo-album-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.photo-album-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media (max-width: 992px) {
    .photo-album-item {
        height: 350px;
        border-radius: 30px;
    }
}

@media (max-width: 768px) {
    .photo-album-item {
        height: 300px;
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .photo-album-item {
        height: 250px;
        border-radius: 20px;
    }
}

.photo-album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 35px;
    pointer-events: none;
}

@media (max-width: 992px) {
    .photo-album-overlay {
        border-radius: 30px;
    }
}

@media (max-width: 768px) {
    .photo-album-overlay {
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .photo-album-overlay {
        border-radius: 20px;
    }
}

.photo-album-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 14px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.photo-album-nav:hover {
    opacity: 0.8;
    transform: none;
}

.photo-album-nav svg {
    width: 12px;
    height: 18px;
    transition: transform 0.3s ease;
}

.photo-album-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.photo-album-nav-prev {
    left: 0;
}

@media (max-width: 576px) {
    .photo-album-nav-prev {
        left: -10px;
    }
}

.photo-album-nav-next {
    right: 0;
}

.photo-album-nav-next svg {
    transform: rotate(180deg);
}

@media (max-width: 576px) {
    .photo-album-nav-next {
        right: -10px;
    }
}

.services-catalogue-section {
    padding: 50px 0;
    margin-top: 50px;
}

@media (max-width: 768px) {
    .services-catalogue-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.services-catalogue-title {
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0 0 40px 0;
}

@media (max-width: 768px) {
    .services-catalogue-title {
        margin-bottom: 30px;
    }
}

.services-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .services-catalogue-grid {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .services-catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .services-catalogue-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 419px;
        margin: 0 auto 40px;
    }
}

@media (max-width: 576px) {
    .services-catalogue-grid {
        gap: 24px;
    }
}

.service-card {
    position: relative;
    background-color: #fff;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 391px;
    padding-bottom: 20px;
    will-change: transform;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 99;
    padding: 0 25px;
}

@media (max-width: 576px) {
    .service-card {
        padding: 0 20px;
    }
}

.service-card:hover {
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.service-card:hover .service-card-image img {
    transform: scale(1.1);
}

.service-card:hover .service-card-bookmark {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .service-card {
        max-width: 419px;
        margin: 0 auto;
    }
}

.service-card-image {
    width: 100%;
    height: 162px;
    overflow: hidden;
    margin: 31px auto 0;
    border-radius: 19px;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    border-radius: 19px;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.service-card-content {
    padding-top: 21px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .service-card-content {
        width: 100%;
    }
}

.service-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
}

.service-card-profile {
    width: 44px;
    height: 44px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-card-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.service-card-name {
    font-size: 18px;
    font-weight: 700;
    font-family: "Baloo 2", sans-serif;
    color: #000;
    margin: 0;
    line-height: 26px;
    white-space: nowrap;
}

.service-card-description {
    font-size: 18px;
    font-weight: 500;
    font-family: "Baloo 2", sans-serif;
    color: #000;
    line-height: 27px;
    margin: 0;
}

.service-card-text {
    display: inline;
}

.service-card-price {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    margin: 0;
}

.service-card-price-label {
    font-weight: 500;
    font-family: "Baloo 2", sans-serif;
}

.service-card-price-value {
    font-weight: 700;
    font-family: "Baloo 2", sans-serif;
    color: #f05271;
}

.service-card-bookmark {
    position: absolute;
    top: 50px;
    right: 47px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .service-card-bookmark {
    right: auto;
    left: 47px;
}

.service-card-bookmark:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.service-card-bookmark:hover .bookmark-icon-outline {
    fill: #f05271;
}

.service-card-bookmark:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.service-card-bookmark.active .bookmark-icon-outline {
    display: none;
}

.service-card-bookmark.active .bookmark-icon-filled {
    display: block !important;
}

.service-card-bookmark .bookmark-icon {
    width: 20px;
    height: 19px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-bookmark .bookmark-icon-outline {
    display: block;
    fill: grey;
}

.service-card-bookmark .bookmark-icon-filled {
    display: none;
    fill: #f05271;
}

.services-catalogue-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .services-catalogue-pagination {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .services-catalogue-pagination {
        padding: 0;
    }
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.pagination-btn:hover:not(.pagination-btn-active) {
    border-color: #f05271;
    color: #f05271;
    transform: translateY(-2px);
}

.pagination-btn:active {
    transform: translateY(0) scale(0.95);
}

.pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-arrow:hover {
    transform: translateX(3px);
}

.pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.pagination-arrow:hover svg {
    stroke: #f05271;
}

.reviews-section {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.reviews-title {
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: normal;
    color: #000;
    margin: 0 0 20px 0;
}

.reviews-overall-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 0;
    margin-bottom: 60px;
    height: 267px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .reviews-overall-card {
        height: auto;
        flex-direction: column;
        padding: 30px 20px;
    }
}

.reviews-overall-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 80px;
    gap: 0;
    position: relative;
}

@media (max-width: 768px) {
    .reviews-overall-left {
        padding: 20px;
        width: 100%;
    }
}

.reviews-overall-rating {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.reviews-overall-stars-icon {
    margin-top: 8px;
    margin-bottom: 14px;
}

.reviews-overall-stars-icon img {
    width: 98px;
    height: 13px;
    display: block;
}

.reviews-overall-number {
    font-weight: 700;
    font-size: clamp(40px, 4vw, 50px);
    line-height: normal;
    color: #000;
    display: block;
    margin-bottom: 0;
}

.reviews-overall-count {
    font-weight: 400;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.reviews-overall-divider {
    height: 180px;
    display: flex;
    align-items: center;
    margin: 0;
    width: 1px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .reviews-overall-divider {
        display: none;
    }
}

.reviews-overall-divider img {
    width: 1px;
    height: 180px;
    display: block;
}

.reviews-overall-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px 34px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

@media (max-width: 768px) {
    .reviews-overall-breakdown {
        padding: 0;
        width: 100%;
    }
}

.reviews-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin-bottom: 6px;
    position: relative;
    height: 30px;
}

@media (max-width: 768px) {
    .reviews-breakdown-item {
        height: 20px;
    }
}

.reviews-breakdown-item:last-child {
    margin-bottom: 0;
}

.reviews-breakdown-bar-wrapper {
    flex: 1;
    max-width: 80%;
    min-width: 200px;
    height: 8px;
    position: relative;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .reviews-breakdown-bar-wrapper {
        max-width: 100%;
    }
}

.reviews-breakdown-bar {
    height: 100%;
    background-color: #f8992c;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
}

.reviews-breakdown-bar.reviews-breakdown-bar-5 {
    width: 100%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-4 {
    width: 79%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-3 {
    width: 66%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-2 {
    width: 51%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-1 {
    width: 37%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-2-2 {
    width: 75%;
}

.reviews-breakdown-label {
    font-weight: 700;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: normal;
    color: #000;
    text-align: end;
    white-space: nowrap;
    min-width: 95px;
}

.reviews-client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .reviews-client-header {
        align-items: flex-start;
        gap: 15px;
    }
}

.reviews-client-title {
    font-weight: 700;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.reviews-sort-dropdown {
    position: relative;
}

.reviews-sort-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.reviews-sort-toggle:hover {
    opacity: 0.8;
}

.reviews-sort-arrow {
    width: 9px;
    height: 6px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.reviews-sort-label {
    font-weight: 400;
    font-size: 14px;
    color: #000;
}

.reviews-sort-value {
    font-weight: 700;
    font-size: 14px;
    color: #000;
}

.reviews-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

[dir="rtl"] .reviews-sort-menu {
    right: auto;
    left: 0;
}

.reviews-sort-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.reviews-sort-list::-webkit-scrollbar {
    width: 5px;
}

.reviews-sort-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.reviews-sort-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.reviews-sort-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
}

[dir="rtl"] .reviews-sort-item {
    text-align: right;
}

.reviews-sort-item:focus,
.reviews-sort-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.reviews-sort-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .reviews-sort-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

.reviews-sort-dropdown.show .reviews-sort-toggle .reviews-sort-arrow {
    transform: rotate(180deg);
}

.reviews-sort-dropdown.show .reviews-sort-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .reviews-list {
        gap: 30px;
        margin-bottom: 40px;
    }
}

.review-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 28px 34px;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    min-height: 198px;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .review-card {
        height: auto;
        padding: 24px 20px;
        min-height: 198px;
    }
}

.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.review-card-separator {
    height: 1px;
    background-color: rgba(202, 202, 202, 0.5);
    margin: 16px 0;
    width: 100%;
}

.review-card-stars {
    margin: 16px 0;
    display: flex;
    align-items: center;
}

.review-card-stars img {
    width: 98px;
    height: 13px;
    display: block;
}

.review-card-user {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.review-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.review-card-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.review-card-user-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-card-name {
    font-size: 15px;
    line-height: normal;
    color: #000;
    margin-bottom: 3px;
}

.review-card-name-bold {
    font-weight: 700;
}

.review-card-name-normal {
    font-weight: 400;
}

.review-card-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 11px;
    line-height: normal;
    color: #000;
}

.review-card-location-dot {
    width: 7px;
    height: 7px;
    background-color: #f05271;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.review-card-time {
    font-weight: 400;
    font-size: 11px;
    line-height: normal;
    color: #000;
    text-align: right;
    white-space: nowrap;
    margin: 0;
}

.review-card-content {
    position: relative;
}

.review-card-text {
    font-weight: 400;
    font-size: 15px;
    color: #000;
    margin: 0;
    position: relative;
    z-index: 2;
    white-space: pre-wrap;
    margin-bottom: 10px;
    margin-top: 0;
    line-height: normal;
}

@media (max-width: 768px) {
    .review-card-text {
        padding-left: 0;
    }
}

.reviews-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .reviews-pagination {
        margin-top: 40px;
        justify-content: center;
    }
}

.reviews-pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.reviews-pagination-btn:hover {
    border-color: #f05271;
    color: #f05271;
    transform: scale(1.05);
}

.reviews-pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.reviews-pagination-btn-active:hover {
    transform: scale(1.05);
    color: #fff;
}

.reviews-pagination-btn:active {
    transform: scale(0.95);
}

.reviews-pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.reviews-pagination-arrow:hover {
    transform: translateX(3px);
}

.reviews-pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .reviews-pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .reviews-pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .reviews-pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.reviews-pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.reviews-pagination-arrow:hover svg {
    stroke: #f05271;
}

.profile-details-dashboard {
    background:
        radial-gradient(circle at 0 0, #fff3e5 0, transparent 45%),
        radial-gradient(circle at 100% 0, #f3fbff 0, transparent 45%);
    min-height: 100vh;
    padding-bottom: 50px;
}

.profile-details-dashboard .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

@media (max-width: 1440px) {
    .profile-details-dashboard .main-container {
        max-width: 1220px;
    }
}

@media (max-width: 1200px) {
    .profile-details-dashboard .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .profile-details-dashboard .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .profile-details-dashboard .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .profile-details-dashboard .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .profile-details-dashboard .main-container {
        padding: 0 15px;
    }
}

.profile-details-section {
    padding: 96px 0 50px;
}

@media (max-width: 768px) {
    .profile-details-section {
        padding: 50px 0 30px;
    }
}

.profile-details-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .profile-details-section-header {
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
    }
}

.profile-details-title {
    font-weight: 700;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.profile-details-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 38px 47px;
    position: relative;
}

@media (max-width: 992px) {
    .profile-details-card {
        padding: 30px 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-card {
        padding: 24px 20px;
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .profile-details-card {
        padding: 20px 15px;
        border-radius: 20px;
    }
}

.profile-details-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .profile-details-header {
        flex-direction: column;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .profile-details-header {
        gap: 15px;
        margin-bottom: 15px;
    }
}

.profile-details-header-left {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    flex: 1;
}

@media (max-width: 576px) {
    .profile-details-header-left {
        flex-direction: column;
        gap: 15px;
    }
}

.profile-details-photo {
    width: 91px;
    height: 91px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-details-photo img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media (max-width: 576px) {
    .profile-details-photo {
        width: 80px;
        height: 80px;
        border-radius: 50px;
    }
}

.profile-details-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-details-name {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 26px;
    color: #000;
    margin: 0 0 5px 0;
    white-space: nowrap;
}

.profile-details-location {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    margin-bottom: 10px;
}

.profile-details-location svg {
    flex-shrink: 0;
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
}

.profile-details-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 0;
}

@media (max-width: 768px) {
    .profile-details-stats {
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .profile-details-stats {
        gap: 12px;
    }
}

.profile-details-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 26px;
    color: #000;
    white-space: nowrap;
}

.profile-details-stat-item svg {
    flex-shrink: 0;
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
}

.profile-details-stat-item .profile-details-stat-icon {
    width: clamp(17px, 2vw, 19px);
    height: clamp(17px, 2vw, 19px);
    flex-shrink: 0;
    -o-object-fit: contain;
    object-fit: contain;
}

.profile-details-header-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

@media (max-width: 992px) {
    .profile-details-header-right {
        align-items: flex-start;
        width: 100%;
    }
}

.profile-details-response-time {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media (max-width: 992px) {
    .profile-details-response-time {
        flex-direction: column;
        align-items: flex-start;
    }
}

.profile-details-time-item {
    display: flex;
    align-items: center;
    gap: 7px;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 35px;
    padding: 4px 12px;
    height: 23px;
    font-weight: 500;
    font-size: clamp(10px, 1.2vw, 12px);
    line-height: normal;
    color: grey;
}

.profile-details-time-item .profile-details-time-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.profile-details-time-item svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.profile-details-time-item strong {
    font-weight: 700;
}

.profile-details-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(128, 128, 128, 0.3);
    margin: 20px 0;
}

@media (max-width: 768px) {
    .profile-details-divider {
        margin: 15px 0;
    }
}

.profile-video-section {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: row !important;
}

@media (max-width: 992px) {
    .profile-video-section {
        flex-direction: column !important;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-video-section {
        gap: 25px;
    }
}

.profile-video-section > div {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.profile-details-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 30px;
}

@media (max-width: 992px) {
    .profile-details-content {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-content {
        gap: 25px;
        margin-top: 20px;
    }
}

.profile-details-content-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

@media (max-width: 992px) {
    .profile-details-content-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .profile-details-content-row {
        gap: 25px;
    }
}

.profile-details-section-item {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.profile-details-section-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 26px;
    color: #000;
    margin: 0;
}

.profile-details-section-text {
    font-family: "Baloo 2", sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 20px;
    color: #000;
    text-align: justify;
    margin: 0;
    max-width: 554px;
}

@media (max-width: 992px) {
    .profile-details-section-text {
        max-width: 100%;
    }
}

.profile-details-list {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: 24px;
    color: #000;
    text-align: justify;
    margin: 0;
    padding-left: 21px;
}

[dir="rtl"] .profile-details-list {
    padding-left: 0;
    padding-right: 21px;
}

.profile-details-list li {
    margin-bottom: 0;
}

.profile-details-list li:last-child {
    margin-bottom: 0;
}

.profile-details-list li strong {
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
}

.profile-details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 576px) {
    .profile-details-tags {
        gap: 8px;
    }
}

.profile-details-tag {
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 100px;
    padding: 7px 22px;
    font-weight: 600;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: normal;
    color: grey;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: default;
}

.profile-details-tag:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-tag {
        padding: 6px 18px;
        font-size: 12px;
    }
}

.profile-details-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 100px;
    padding: 7px 22px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 17px;
    color: grey;
    white-space: nowrap;
}

.profile-details-button svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.profile-details-button:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-button {
        padding: 6px 18px;
        font-size: 14px;
    }

    .profile-details-button svg {
        width: 20px;
        height: 20px;
    }
}

.profile-details-video-links {
    display: flex;
    flex-wrap: wrap;
    gap: 17px;
}

@media (max-width: 576px) {
    .profile-details-video-links {
        gap: 12px;
    }
}

.profile-details-video-link {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(128, 128, 128, 0.05);
    border-radius: 50px;
    padding: 7px 22px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 17px;
    color: grey;
    white-space: nowrap;
    height: 38px;
    width: 119px;
    justify-content: center;
}

.profile-details-video-link svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

.profile-details-video-link:hover {
    background-color: rgba(128, 128, 128, 0.1);
    transform: translateY(-2px);
}

@media (max-width: 576px) {
    .profile-details-video-link {
        padding: 6px 18px;
        font-size: 14px;
        height: 35px;
        width: 110px;
    }

    .profile-details-video-link svg {
        width: 14px;
        height: 14px;
    }
}

.photo-album-section {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .photo-album-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.photo-album-title {
    font-weight: 700;
    font-size: clamp(20px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0;
}

@media (max-width: 768px) {
    .photo-album-title {
        margin-bottom: 0;
    }
}

.photo-album-wrapper {
    position: relative;
    padding: 0 50px;
}

@media (max-width: 992px) {
    .photo-album-wrapper {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .photo-album-wrapper {
        padding: 0 30px;
    }
}

@media (max-width: 576px) {
    .photo-album-wrapper {
        padding: 0 20px;
    }
}

.photo-album-swiper {
    width: 100%;
    overflow: visible;
}

.photo-album-item {
    position: relative;
    width: 100%;
    height: 388px;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.photo-album-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.photo-album-item img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
}

@media (max-width: 992px) {
    .photo-album-item {
        height: 350px;
        border-radius: 30px;
    }
}

@media (max-width: 768px) {
    .photo-album-item {
        height: 300px;
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .photo-album-item {
        height: 250px;
        border-radius: 20px;
    }
}

.photo-album-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 35px;
    pointer-events: none;
}

@media (max-width: 992px) {
    .photo-album-overlay {
        border-radius: 30px;
    }
}

@media (max-width: 768px) {
    .photo-album-overlay {
        border-radius: 25px;
    }
}

@media (max-width: 576px) {
    .photo-album-overlay {
        border-radius: 20px;
    }
}

.photo-album-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 14px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.photo-album-nav:hover {
    opacity: 0.8;
    transform: none;
}

.photo-album-nav svg {
    width: 12px;
    height: 18px;
    transition: transform 0.3s ease;
}

.photo-album-nav.swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.photo-album-nav-prev {
    left: 0;
}

@media (max-width: 576px) {
    .photo-album-nav-prev {
        left: -10px;
    }
}

.photo-album-nav-next {
    right: 0;
}

.photo-album-nav-next svg {
    transform: rotate(180deg);
}

@media (max-width: 576px) {
    .photo-album-nav-next {
        right: -10px;
    }
}

.services-catalogue-section {
    padding: 50px 0;
    margin-top: 50px;
}

@media (max-width: 768px) {
    .services-catalogue-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.services-catalogue-title {
    font-weight: 700;
    font-size: clamp(20px, 3vw, 32px);
    line-height: normal;
    color: #000;
    margin: 0 0 40px 0;
}

@media (max-width: 768px) {
    .services-catalogue-title {
        margin-bottom: 30px;
    }
}

.services-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

@media (max-width: 1200px) {
    .services-catalogue-grid {
        gap: 24px;
    }
}

@media (max-width: 992px) {
    .services-catalogue-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .services-catalogue-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        max-width: 419px;
        margin: 0 auto 40px;
    }
}

@media (max-width: 576px) {
    .services-catalogue-grid {
        gap: 24px;
    }
}

.service-card {
    position: relative;
    background-color: #fff;
    border-radius: 35px;
    overflow: hidden;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 391px;
    padding-bottom: 20px;
    will-change: transform;
    display: block;
    text-decoration: none;
    color: inherit;
    z-index: 99;
    padding: 0 25px;
}

@media (max-width: 576px) {
    .service-card {
        padding: 0 20px;
    }
}

.service-card:hover {
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

.service-card:hover .service-card-image img {
    transform: scale(1.1);
}

.service-card:hover .service-card-bookmark {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .service-card {
        max-width: 419px;
        margin: 0 auto;
    }
}

.service-card-image {
    width: 100%;
    height: 162px;
    overflow: hidden;
    margin: 31px auto 0;
    border-radius: 19px;
}

.service-card-image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    border-radius: 19px;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.service-card-content {
    padding-top: 21px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .service-card-content {
        width: 100%;
    }
}

.service-card-header {
    display: flex;
    align-items: center;
    gap: 13px;
}

.service-card-profile {
    width: 44px;
    height: 44px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.service-card-profile img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.service-card-name {
    font-size: 18px;
    font-weight: 700;
    font-family: "Baloo 2", sans-serif;
    color: #000;
    margin: 0;
    line-height: 26px;
    white-space: nowrap;
}

.service-card-description {
    font-size: 18px;
    font-weight: 500;
    font-family: "Baloo 2", sans-serif;
    color: #000;
    line-height: 27px;
    margin: 0;
}

.service-card-text {
    display: inline;
}

.service-card-price {
    font-size: 16px;
    line-height: 26px;
    color: #000;
    margin: 0;
}

.service-card-price-label {
    font-weight: 500;
    font-family: "Baloo 2", sans-serif;
}

.service-card-price-value {
    font-weight: 700;
    font-family: "Baloo 2", sans-serif;
    color: #f05271;
}

.service-card-bookmark {
    position: absolute;
    top: 50px;
    right: 47px;
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[dir="rtl"] .service-card-bookmark {
    right: auto;
    left: 47px;
}

.service-card-bookmark:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.service-card-bookmark:hover .bookmark-icon-outline {
    fill: #f05271;
}

.service-card-bookmark:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.service-card-bookmark.active .bookmark-icon-outline {
    display: none;
}

.service-card-bookmark.active .bookmark-icon-filled {
    display: block !important;
}

.service-card-bookmark .bookmark-icon {
    width: 20px;
    height: 19px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-bookmark .bookmark-icon-outline {
    display: block;
    fill: grey;
}

.service-card-bookmark .bookmark-icon-filled {
    display: none;
    fill: #f05271;
}

.services-catalogue-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .services-catalogue-pagination {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .services-catalogue-pagination {
        padding: 0;
    }
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.pagination-btn:hover:not(.pagination-btn-active) {
    border-color: #f05271;
    color: #f05271;
    transform: translateY(-2px);
}

.pagination-btn:active {
    transform: translateY(0) scale(0.95);
}

.pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-arrow:hover {
    transform: translateX(3px);
}

.pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.pagination-arrow:hover svg {
    stroke: #f05271;
}

.reviews-section {
    padding: 50px 0;
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 30px 0;
        margin-top: 30px;
    }
}

.reviews-title {
    font-weight: 700;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: normal;
    color: #000;
    margin: 0 0 20px 0;
}

.reviews-overall-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 0;
    margin-bottom: 60px;
    height: 267px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0;
}

@media (max-width: 768px) {
    .reviews-overall-card {
        height: auto;
        flex-direction: column;
        padding: 30px 20px;
    }
}

.reviews-overall-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 80px;
    gap: 0;
    position: relative;
}

@media (max-width: 768px) {
    .reviews-overall-left {
        padding: 20px;
        width: 100%;
    }
}

.reviews-overall-rating {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
}

.reviews-overall-stars-icon {
    margin-top: 8px;
    margin-bottom: 14px;
}

.reviews-overall-stars-icon img {
    width: 98px;
    height: 13px;
    display: block;
}

.reviews-overall-number {
    font-weight: 700;
    font-size: clamp(40px, 4vw, 50px);
    line-height: normal;
    color: #000;
    display: block;
    margin-bottom: 0;
}

.reviews-overall-count {
    font-weight: 400;
    font-size: clamp(12px, 1.5vw, 14px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.reviews-overall-divider {
    height: 180px;
    display: flex;
    align-items: center;
    margin: 0;
    width: 1px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .reviews-overall-divider {
        display: none;
    }
}

.reviews-overall-divider img {
    width: 1px;
    height: 180px;
    display: block;
}

.reviews-overall-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 32px 34px;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

@media (max-width: 768px) {
    .reviews-overall-breakdown {
        padding: 0;
        width: 100%;
    }
}

.reviews-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    margin-bottom: 6px;
    position: relative;
    height: 30px;
}

@media (max-width: 768px) {
    .reviews-breakdown-item {
        height: 20px;
    }
}

.reviews-breakdown-item:last-child {
    margin-bottom: 0;
}

.reviews-breakdown-bar-wrapper {
    flex: 1;
    max-width: 80%;
    min-width: 200px;
    height: 8px;
    position: relative;
    background-color: rgba(128, 128, 128, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .reviews-breakdown-bar-wrapper {
        max-width: 100%;
    }
}

.reviews-breakdown-bar {
    height: 100%;
    background-color: #f8992c;
    border-radius: 4px;
    position: absolute;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
}

.reviews-breakdown-bar.reviews-breakdown-bar-5 {
    width: 100%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-4 {
    width: 79%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-3 {
    width: 66%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-2 {
    width: 51%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-1 {
    width: 37%;
}

.reviews-breakdown-bar.reviews-breakdown-bar-2-2 {
    width: 75%;
}

.reviews-breakdown-label {
    font-weight: 700;
    font-size: clamp(10px, 1.5vw, 12px);
    line-height: normal;
    color: #000;
    text-align: end;
    white-space: nowrap;
    min-width: 95px;
}

.reviews-client-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .reviews-client-header {
        align-items: flex-start;
        gap: 15px;
    }
}

.reviews-client-title {
    font-weight: 700;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: normal;
    color: #000;
    margin: 0;
}

.reviews-sort-dropdown {
    position: relative;
}

.reviews-sort-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: 0 0;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.3s ease;
}

.reviews-sort-toggle:hover {
    opacity: 0.8;
}

.reviews-sort-arrow {
    width: 9px;
    height: 6px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.reviews-sort-label {
    font-weight: 400;
    font-size: 14px;
    color: #000;
}

.reviews-sort-value {
    font-weight: 700;
    font-size: 14px;
    color: #000;
}

.reviews-sort-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 9999;
    margin-top: 4px;
}

[dir="rtl"] .reviews-sort-menu {
    right: auto;
    left: 0;
}

.reviews-sort-list {
    list-style: none;
    padding: 8px 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
}

.reviews-sort-list::-webkit-scrollbar {
    width: 5px;
}

.reviews-sort-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.reviews-sort-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.reviews-sort-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
}

[dir="rtl"] .reviews-sort-item {
    text-align: right;
}

.reviews-sort-item:focus,
.reviews-sort-item:hover {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

.reviews-sort-item.active {
    background-color: rgba(240, 82, 113, 0.1);
    color: #f05271;
}

@media (max-width: 576px) {
    .reviews-sort-item {
        padding: 8px 16px;
        font-size: 13px;
    }
}

.reviews-sort-dropdown.show .reviews-sort-toggle .reviews-sort-arrow {
    transform: rotate(180deg);
}

.reviews-sort-dropdown.show .reviews-sort-menu {
    max-height: 300px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    overflow-y: auto;
    transform: translateY(0);
}

.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .reviews-list {
        gap: 30px;
        margin-bottom: 40px;
    }
}

.review-card {
    background-color: #fff;
    border-radius: 35px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.08);
    padding: 28px 34px;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    min-height: 198px;
}

.review-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    .review-card {
        height: auto;
        padding: 24px 20px;
        min-height: 198px;
    }
}

.review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.review-card-separator {
    height: 1px;
    background-color: rgba(202, 202, 202, 0.5);
    margin: 16px 0;
    width: 100%;
}

.review-card-stars {
    margin: 16px 0;
    display: flex;
    align-items: center;
}

.review-card-stars img {
    width: 98px;
    height: 13px;
    display: block;
}

.review-card-user {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.review-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 61px;
    overflow: hidden;
    flex-shrink: 0;
}

.review-card-avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.review-card-user-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.review-card-name {
    font-size: 15px;
    line-height: normal;
    color: #000;
    margin-bottom: 3px;
}

.review-card-name-bold {
    font-weight: 700;
}

.review-card-name-normal {
    font-weight: 400;
}

.review-card-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 11px;
    line-height: normal;
    color: #000;
}

.review-card-location-dot {
    width: 7px;
    height: 7px;
    background-color: #f05271;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.review-card-time {
    font-weight: 400;
    font-size: 11px;
    line-height: normal;
    color: #000;
    text-align: right;
    white-space: nowrap;
    margin: 0;
}

.review-card-content {
    position: relative;
}

.review-card-text {
    font-weight: 400;
    font-size: 15px;
    color: #000;
    margin: 0;
    position: relative;
    z-index: 2;
    white-space: pre-wrap;
    margin-bottom: 10px;
    margin-top: 0;
    line-height: normal;
}

@media (max-width: 768px) {
    .review-card-text {
        padding-left: 0;
    }
}

.reviews-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 60px;
}

@media (max-width: 768px) {
    .reviews-pagination {
        margin-top: 40px;
        justify-content: center;
    }
}

.reviews-pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px solid grey;
    background-color: transparent;
    color: grey;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.reviews-pagination-btn:hover {
    border-color: #f05271;
    color: #f05271;
    transform: scale(1.05);
}

.reviews-pagination-btn-active {
    background-color: #f05271;
    border-color: #f05271;
    color: #fff;
}

.reviews-pagination-btn-active:hover {
    transform: scale(1.05);
    color: #fff;
}

.reviews-pagination-btn:active {
    transform: scale(0.95);
}

.reviews-pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 100px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.reviews-pagination-arrow:hover {
    transform: translateX(3px);
}

.reviews-pagination-arrow:active {
    transform: translateX(1px);
}

[dir="rtl"] .reviews-pagination-arrow {
    transform: rotate(180deg);
}

[dir="rtl"] .reviews-pagination-arrow:hover {
    transform: rotate(180deg) translateX(3px);
}

[dir="rtl"] .reviews-pagination-arrow:active {
    transform: rotate(180deg) translateX(1px);
}

.reviews-pagination-arrow svg {
    width: 9px;
    height: 14px;
    transition: stroke 0.2s ease;
}

.reviews-pagination-arrow:hover svg {
    stroke: #f05271;
}

.profile-details-edit-intro {
    position: relative;
    z-index: 10;
}

.profile-details-edit-intro-btn {
    background-color: #f05271;
    border: none;
    border-radius: 35px;
    padding: clamp(6px, 1.5vw, 8px) clamp(20px, 1.5vw, 24px);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 5px 40px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.profile-details-edit-intro-btn:hover {
    background-color: #e0415f;
    transform: translateY(-2px);
    box-shadow: 0 8px 50px 0 rgba(0, 0, 0, 0.15);
}

.profile-details-edit-intro-btn:active {
    transform: translateY(0);
}

.profile-details-edit-intro-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.profile-details-edit-intro-btn span {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.5vw, 16px);
    line-height: 14px;
    color: #fff;
    white-space: nowrap;
}

.profile-details-promotion-banner {
    background-color: rgba(240, 82, 113, 0.1);
    border-radius: 0 0 20px 20px;
    padding: 14px 31px;
    margin: 0 -47px 20px -47px;
}

@media (max-width: 992px) {
    .profile-details-promotion-banner {
        margin: 0 -30px 20px -30px;
        padding: 14px 20px;
    }
}

@media (max-width: 768px) {
    .profile-details-promotion-banner {
        margin: 0 -20px 20px -20px;
        padding: 12px 15px;
    }
}

.profile-details-promotion-banner p {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #f05271;
    margin: 0;
}

.profile-details-promotion-banner p strong {
    font-weight: 700;
}

.profile-details-available-work {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-details-available-work span {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: #000;
}

.profile-details-toggle {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
}

.profile-details-toggle input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.profile-details-toggle
    input[type="checkbox"]:checked
    + .profile-details-toggle-slider {
    background-color: #f05271;
}

.profile-details-toggle
    input[type="checkbox"]:checked
    + .profile-details-toggle-slider::before {
    transform: translateX(15px);
}

.profile-details-toggle .profile-details-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 15px;
    transition: background-color 0.3s ease;
}

.profile-details-toggle .profile-details-toggle-slider::before {
    content: "";
    position: absolute;
    height: 13px;
    width: 13px;
    left: 1px;
    bottom: 1px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.profile-details-toggle:hover .profile-details-toggle-slider {
    background-color: #b3b3b3;
}

.profile-details-toggle
    input[type="checkbox"]:checked
    ~ .profile-details-toggle-slider {
    background-color: #f05271;
}

.profile-details-toggle
    input[type="checkbox"]:checked
    ~ .profile-details-toggle-slider::before {
    transform: translateX(15px);
}

.profile-details-promote-profile {
    display: flex;
    align-items: center;
    gap: 9px;
}

.profile-details-promote-profile span {
    font-family: "Baloo 2", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    color: #000;
}

.profile-details-promote-icon {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
}

.profile-details-promote-icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.profile-details-header-right-top {
    display: flex;
    flex-direction: row;
    gap: 30px;
    margin-bottom: 18px;
    align-items: center;
}

@media (max-width: 992px) {
    .profile-details-header-right-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.photo-album-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .photo-album-header {
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
    }
}

.photo-album-add-btn {
    background-color: #f05271;
    border: none;
    border-radius: 60px;
    padding: clamp(10px, 1.5vw, 13px) clamp(60px, 1.5vw, 92px);
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .photo-album-add-btn {
        padding: 5px 30px;
    }
}

.photo-album-add-btn:hover {
    background-color: #e0415f;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px 0 rgba(240, 82, 113, 0.3);
}

.photo-album-add-btn:active {
    transform: translateY(0);
}

.photo-album-add-btn span {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1.5vw, 18px);
    line-height: 19px;
    color: #fff;
}

.services-catalogue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .services-catalogue-header {
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
    }
}

.services-catalogue-add-btn {
    background-color: #f05271;
    border: none;
    border-radius: 60px;
    padding: clamp(10px, 1.5vw, 13px) clamp(60px, 1.5vw, 92px);
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .services-catalogue-add-btn {
        padding: 5px 30px;
    }
}

.services-catalogue-add-btn:hover {
    background-color: #e0415f;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px 0 rgba(240, 82, 113, 0.3);
}

.services-catalogue-add-btn:active {
    transform: translateY(0);
}

.services-catalogue-add-btn span {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1.5vw, 18px);
    line-height: 19px;
    color: #fff;
}

.navbar2 i {
    font-size: 20px;
    background-color: #a59d9d;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dashboard .form-add-ticket .form-container .constrains .content {
    font-size: 20px;
    font-weight: 600;
    color: #f05271;
}

.dashboard .form-add-ticket .form-container .balance {
    padding-bottom: 20px;
    border-bottom: 1px solid gray;
    padding-top: 20px;
    margin-bottom: 20px;
}

.dashboard .form-add-ticket .form-container .balance .balance-title {
    font-size: 25px;
    font-weight: 700;
    color: #666;
    margin-bottom: 10px;
}

.dashboard .form-add-ticket .form-container .balance .balance-price {
    font-size: 42px;
    font-weight: 700;
    color: #f05271;
    margin-bottom: 10px;
}

.dashboard .form-add-ticket .top-title {
    font-size: clamp(30px, 5vw, 15px);
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid gray;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard .form-add-ticket .top-title #closePopup {
    font-size: 25px;
}

.dashboard .form-add-ticket .input-container {
    margin-bottom: 10px;
}

.dashboard .form-add-ticket .input-container input {
    width: 100%;
    height: 60px;
    padding: 10px;
    outline: 0;
    border: 1px solid grey;
    border-radius: 10px;
}

.dashboard .form-add-ticket .title {
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: 500;
    color: #666;
}

.dashboard .form-add-ticket .top-title {
    display: flex;
}

.dashboard .form-add-ticket .form-buttons {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
    padding-top: 30px;
}

.dashboard .form-add-ticket .form-buttons .close {
    margin-right: 20px;
    width: 15%;
    height: 50px;
    border: 1px solid #666;
    outline: 0;
    border-radius: 10px;
    font-size: 20px;
    color: #666;
    background-color: transparent;
}

html[lang="ar"] .dashboard .form-add-ticket .form-buttons .close {
    margin-left: 20px;
}

html[lang="en"] .dashboard .form-add-ticket .form-buttons .close {
    margin-right: 20px;
}

.dashboard .form-add-ticket .form-buttons .create {
    width: 20%;
    border: none;
    outline: 0;
    height: 50px;
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
    background-color: #d64545;
}

html[lang="ar"] .dashboard .form-add-ticket .form-buttons .create {
    margin-left: 10px;
}

.dashboard .overlay-withdraw {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

@media (max-width: 560px) {
    .wallets-info .row2 .wallet-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 959px) {
    .wallets-info .row1 .tickets {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 20px;
    }

    .wallets-info .row1 .tickets .withdraw {
        width: 50%;
    }

    .wallets-info .row1 .tickets .deposit {
        width: 50%;
    }

    .wallets-info .row1 .tickets .wallet-buttons {
        justify-content: flex-start;
        margin-top: 10px;
        width: 100%;
    }

    .wallets-info .row1 .tickets .notice-container {
        margin-top: 20px;
        margin-left: 10px;
        width: 100%;
    }

    .wallets-info .row1 .tickets .notice-container input {
        width: 60%;
    }
}

@media (max-width: 482px) {
    .wallets-info .row1 .tickets .wallet-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .wallets-info .row1 .tickets .wallet-buttons .deposit {
        margin-bottom: 8px;
        width: 100%;
    }

    .wallets-info .row1 .tickets .wallet-buttons .withdraw {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .wallet-box table,
    .wallet-box tbody,
    .wallet-box td,
    .wallet-box th,
    .wallet-box thead,
    .wallet-box tr {
        display: block;
        width: 100%;
    }

    .wallets-info .row2 {
        width: 96%;
    }

    .wallet-box thead {
        display: none;
    }

    .wallet-box tr {
        background: #fff;
        margin: 12px 0;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    }

    .wallet-box td {
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
    }

    .wallet-box td:last-child {
        border-bottom: none;
    }

    .wallet-box td:nth-child(1)::before {
        content: "Payment Gateway:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td:nth-child(2)::before {
        content: "Payment Status:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td:nth-child(3)::before {
        content: "Deposit Amount:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td:nth-child(4)::before {
        content: "Deposit Date:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td {
        font-size: 14px;
    }

    .wallet-box .status {
        margin-left: 10px;
    }
}

@media (max-width: 1025px) {
    .dashboard .form-add-ticket {
        width: 90%;
        margin-top: 80%;
    }
}

@media (max-width: 670px) {
    .dashboard .form-add-ticket .form-buttons {
        flex-direction: column;
        padding: 20px 10px;
    }

    .dashboard .form-add-ticket .form-buttons .close {
        width: 100%;
        margin-bottom: 20px;
    }

    .dashboard .form-add-ticket .form-buttons .create {
        width: 100%;
    }

    .dashboard .form-add-ticket .form-buttons .close {
        margin-right: 0;
    }

    html[lang="ar"] .dashboard .form-add-ticket .form-buttons .close {
        margin-left: 0;
    }
}

@media (max-width: 1235px) {
    .dashboard .form-add-ticket .form-container .first-row .img-container {
        width: 29%;
    }
}

@media (max-width: 563px) {
    .dashboard .form-add-ticket .form-container .first-row .img-container {
        width: 43%;
    }
}

@media (max-width: 435px) {
    .dashboard .form-add-ticket .form-container .first-row {
        justify-content: center;
    }

    .dashboard .form-add-ticket .form-container .first-row .img-container {
        width: 40%;
    }
}

.withdraw-info .row1 {
    width: 90%;
}

.withdraw-info .row1 .tickets input {
    width: 69%;
    border: none;
    outline: 0;
}

.withdraw-info .row2 {
    width: 90%;
}

.withdraw-info .row2 .wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 10px;
}

.withdraw-info .row2 .wallet-header h2 {
    font-weight: 700;
    font-size: 32px;
    color: #000;
}

.withdraw-info .row2 .wallet-header .search-wallet {
    border-radius: 50px;
    width: 30%;
    height: 38px;
    display: flex;
    align-items: center;
    padding: 20px;
}

.withdraw-info .row2 .wallet-header .search-wallet input {
    border: none;
    outline: 0;
    padding: 5px 10px;
}

.withdraw-info .row1 .tickets {
    display: flex;
    align-items: center;
    border-radius: 50px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    height: 72px;
    padding-left: 25px;
    padding-right: 20px;
    position: relative;
}

.withdraw-info .row1 .tickets button {
    background-color: #f05271;
    border-radius: 35px;
    height: 37px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    color: azure;
    width: 25%;
    position: absolute;
    right: 10px;
}

.withdraw-info .row1 .tickets .notice {
    color: rgba(0, 0, 0, 0.3607843137);
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
}

.withdraw-info .row1 .tickets .notice-content {
    color: rgba(0, 0, 0, 0.3607843137);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0;
}
@media (max-width: 768px) {
    .withdraw-box table,
    .withdraw-box tbody,
    .withdraw-box td,
    .withdraw-box th,
    .withdraw-box thead,
    .withdraw-box tr {
        display: block;
        width: 100%;
    }

    .withdraw-box thead {
        display: none;
    }

    .withdraw-box tbody tr {
        background: #fff;
        margin-bottom: 15px;
        border-radius: 10px;
        padding: 15px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .withdraw-box tbody td {
        text-align: left;
        padding: 8px 0;
        border: none;
        display: flex;
    }

    .withdraw-box tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        width: 120px;
    }

    .withdraw-box tbody td span {
        flex-grow: 1;
    }
}

.withdraw-box table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 15px;
    overflow: hidden;
}

.withdraw-box thead {
    background-color: #e7e7ed;
}

.withdraw-box thead th {
    text-align: center;
    padding: 15px;
    font-weight: 700;
    font-size: 18px;
}

.withdraw-box tbody td {
    padding: 15px;
    font-weight: 600;
    font-size: 14px;
    color: #000;
    border-top: 1px solid #eee;
    text-align: center;
}

.withdraw-box .status {
    padding: 2px 25px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.withdraw-box .status.complete {
    background: #d6f7ed;
    color: #0ea77a;
}

.withdraw-box .status.pending {
    background: rgba(248, 153, 44, 0.2);
    color: #f8992c;
}

.withdraw-box .status.incomplete {
    background: #fcd6d9;
    color: #d64545;
}

.withdraw-box .details-btn {
    background: #ffa620;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
}
@media (max-width: 1025px) {
    .dashboard .form-add-ticket {
        margin-top: 80%;
    }
}
.subscription .user-details .span-1 {
    color: rgba(0, 0, 0, 0.5019607843);
    font-size: 16px;
    font-weight: 700;
}

.subscription .user-details .span-2 {
    color: #f05271;
    font-size: 16px;
    font-weight: 700;
    margin-left: 25px;
    position: relative;
}

@media (max-width: 768px) {
    .create-service-content {
        padding: 15px;
    }
}

.service-intro-header {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.service-intro-header .service-intro-title {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 38px;
    color: #000;
    margin: 0;
    text-align: center;
}

.service-intro-header .service-intro-separator {
    font-family: Sitara, "Noto Sans", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: normal;
    color: #000;
    margin: 0;
}

.service-intro-header .service-intro-subtitle {
    font-family: "Baloo 2", sans-serif;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 14px !important;
    color: #f05271 !important;
    margin: 0;
}

.service-timeline {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 60px;
    position: relative;
    width: 100%;
    max-width: 965px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    gap: 20px;
}

@media (max-width: 768px) {
    .service-timeline {
        flex-direction: column;
        gap: 30px;
        padding: 0;
    }
}
.service-timeline .timeline-step::after {
    content: "";
    position: absolute;
    left: 51px;
    top: 25px;
    width: 100%;
    height: 2px;
    background: grey;
}

.service-timeline .timeline-step:last-child::after {
    display: none;
}

@media (max-width: 768px) {
    .service-timeline .timeline-step {
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
    }

    .service-timeline .timeline-step::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .service-timeline .timeline-step .timeline-step-number {
        font-size: 18px;
        margin-bottom: 0;
        margin-right: 15px;
    }
}

.service-timeline .timeline-step .timeline-step-number .timeline-step-bg {
    position: absolute;
    left: 5.29px;
    top: 5.29px;
    width: 36.429px;
    height: 36.429px;
    border-radius: 50%;
    border: 2px solid grey;
    background: 0 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .service-timeline .timeline-step .timeline-step-number .timeline-step-bg {
        left: auto;
        top: auto;
    }
}

.service-timeline
    .timeline-step
    .timeline-step-number
    .timeline-step-number-text {
    position: relative;
    z-index: 1;
    line-height: 1;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14.571px;
}

.service-timeline .timeline-step.active .timeline-step-number {
    border-color: #f05271;
    background: 0 0;
    color: #fff;
    width: 51px;
    height: 51px;
}

.service-timeline
    .timeline-step.active
    .timeline-step-number
    .timeline-step-bg {
    background: #f05271;
    border: 2px solid transparent;
}

.service-timeline
    .timeline-step.active
    .timeline-step-number
    .timeline-step-number-text {
    color: #fff;
}

.service-timeline .timeline-step.active .timeline-step-title {
    color: #f05271;
}

.service-timeline .timeline-step.completed .timeline-step-number {
    border: 2px solid #44bda4 !important;
    background: 0 0;
    color: #fff;
}

.service-timeline
    .timeline-step.completed
    .timeline-step-number
    .timeline-step-bg {
    background: #44bda4;
    border: 2px solid #44bda4;
}

.service-timeline
    .timeline-step.completed
    .timeline-step-number
    .timeline-step-number-text {
    color: #fff;
}

.service-timeline .timeline-step.completed .timeline-step-title {
    color: #44bda4;
}

.service-timeline
    .timeline-step:not(.active)
    .timeline-step-number
    .timeline-step-number-text {
    width: 14.571px;
    height: 34px;
}

@media (max-width: 768px) {
    .service-timeline .timeline-step:not(.active) .timeline-step-number {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
}

.service-timeline .timeline-step .timeline-step-content {
    text-align: start;
    width: 179px;
    position: relative;
}

@media (max-width: 768px) {
    .service-timeline .timeline-step .timeline-step-content {
        text-align: left;
        flex: 1;
        width: auto;
    }
}

.service-timeline .timeline-step .timeline-step-content .timeline-step-title {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    color: grey;
    margin: 0 0 8px 0;
}

.service-timeline .timeline-step .timeline-step-content .timeline-step-desc {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: grey;
    margin: 0;
    width: 100%;
}

@media (max-width: 768px) {
    .service-timeline
        .timeline-step
        .timeline-step-content
        .timeline-step-desc {
        max-width: 100%;
    }
}

.service-timeline .timeline-step:nth-child(3) {
    margin-left: 0;
}

.service-timeline .timeline-step:nth-child(5) {
    margin-left: 0;
}

.service-timeline .timeline-connector {
    width: 79.5px;
    height: 2px;
    margin: 25px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    top: 0;
    align-self: flex-start;
    margin-top: 25px;
}

.service-timeline .timeline-connector svg {
    width: 100%;
    height: 2px;
}

@media (max-width: 768px) {
    .service-timeline .timeline-connector {
        display: none;
    }
}

.create-service-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
}

.form-field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-field-group .filter-dropdown {
    width: 100%;
}

.form-field-group .filter-dropdown .filter-dropdown-toggle {
    width: 100%;
    height: 45px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    padding: 0 28px;
    justify-content: flex-start;
}

.form-field-group .filter-dropdown .filter-dropdown-toggle .filter-text {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.36);
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
}

.form-field-label {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: grey;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-field-label .edit-icon {
    width: 13px;
    height: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.form-field-label .edit-icon path {
    stroke: grey;
    transition: stroke 0.3s ease;
}

.form-field-label .edit-icon:hover path {
    stroke: #f05271;
}

.form-field-wrapper {
    position: relative;
    width: 100%;
}

.form-field-input,
.form-field-select,
.form-field-textarea {
    width: 100%;
    height: 45px;
    padding: 0 28px;
    border: none;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    color: rgba(0, 0, 0, 0.36);
    outline: 0;
    transition: all 0.3s ease;
}

.form-field-input:focus,
.form-field-select:focus,
.form-field-textarea:focus {
    box-shadow: 0 16px 88px 0 rgba(240, 82, 113, 0.2);
}

.form-field-input::-moz-placeholder,
.form-field-select::-moz-placeholder,
.form-field-textarea::-moz-placeholder {
    color: rgba(0, 0, 0, 0.36);
}

.form-field-input::placeholder,
.form-field-select::placeholder,
.form-field-textarea::placeholder {
    color: rgba(0, 0, 0, 0.36);
}

.form-field-textarea {
    height: 118px;
    border-radius: 35px;
    padding: 20px 28px;
    resize: vertical;
    line-height: 1.5;
}

.form-field-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 50px;
}

.select-arrow {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.editor-wrapper {
    width: 100%;
    background: #fff;
    border-radius: 31px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.description-editor {
    min-height: 306px;
    background: #fff;
}

.description-editor .ql-container {
    border: none;
    font-family: "Gotham Rounded", sans-serif;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.36);
    min-height: 250px;
}

.description-editor .ql-editor {
    min-height: 250px;
    padding: 28px;
}

.description-editor .ql-editor.ql-blank::before {
    color: rgba(0, 0, 0, 0.36);
    font-style: normal;
    font-family: "Gotham Rounded", sans-serif;
    font-size: 12px;
}

.description-editor .ql-toolbar {
    border: none;
    border-bottom: 1px solid #e9ecef;
    padding: 8px;
    background: rgba(131, 121, 184, 0.1);
    border-radius: 35px 35px 0 0;
}

.description-editor .ql-toolbar .ql-formats {
    margin-right: 8px;
}

.description-editor .ql-toolbar .ql-picker-label,
.description-editor .ql-toolbar button {
    border-radius: 4px;
    transition: background 0.2s ease;
}

.description-editor .ql-toolbar .ql-picker-label:hover,
.description-editor .ql-toolbar button:hover {
    background: rgba(0, 0, 0, 0.05);
}

.create-service-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 40px;
}

@media (max-width: 768px) {
    .create-service-actions {
        justify-content: center;
    }
}

.next-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    background: 0 0;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: grey;
}

.next-button span {
    color: grey;
}

.next-button .next-button-icon {
    width: 49px;
    height: 48px;
    background: grey;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.next-button .next-button-icon svg {
    width: 21px;
    height: 21px;
    transition: transform 0.3s ease;
}

.next-button:hover span {
    color: #f05271;
}

.next-button:hover .next-button-icon {
    background: #f05271;
    box-shadow: 0 8px 20px rgba(240, 82, 113, 0.3);
}

.next-button:hover .next-button-icon svg {
    fill: #f05271;
}

@media (max-width: 992px) {
    .create-service-content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .service-intro-header {
        margin-bottom: 30px;
    }

    .service-timeline {
        margin-bottom: 40px;
    }

    .create-service-form {
        gap: 25px;
        margin-bottom: 30px;
    }

    .form-field-input,
    .form-field-select,
    .form-field-textarea {
        height: 45px;
        padding: 0 20px;
        font-size: 14px;
    }

    .form-field-textarea {
        height: 100px;
        padding: 15px 20px;
    }

    .description-editor {
        min-height: 250px;
    }

    .description-editor .ql-container {
        min-height: 200px;
    }

    .description-editor .ql-editor {
        min-height: 200px;
        padding: 20px;
    }
}

.upload-section {
    margin-bottom: 40px;
}

.upload-section .upload-section-label {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: grey;
    margin: 0 0 20px 0;
}

.upload-section .upload-card {
    background: #fff;
    border-radius: 31px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-height: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.upload-section .upload-card:hover {
    box-shadow: 0 20px 100px 0 rgba(0, 0, 0, 0.15);
}

.upload-section .upload-card .upload-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 276px;
    height: 148px;
    position: relative;
}

.upload-section .upload-card .upload-card-content .upload-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.upload-section .upload-card .upload-card-content .upload-icon svg {
    width: 100%;
    height: 100%;
}

.upload-section .upload-card .upload-card-content .upload-button {
    width: 276px;
    height: 52px;
    background: #f05271;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    line-height: 27px;
    color: #fff;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-section .upload-card .upload-card-content .upload-button:hover {
    background: #e04562;
    box-shadow: 0 8px 20px rgba(240, 82, 113, 0.3);
    transform: translateY(-2px);
}

.upload-section .upload-card .upload-card-content .upload-button:active {
    transform: translateY(0);
}

.upload-section .upload-card .upload-card-content .upload-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.upload-section .upload-card .upload-card-content .upload-info p {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.36);
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.upload-section .upload-card .uploaded-images-grid,
.upload-section .upload-card .uploaded-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    padding: 20px;
    width: 100%;
    min-height: 330px;
}

.upload-section .upload-card .uploaded-images-grid .uploaded-image-item,
.upload-section .upload-card .uploaded-images-grid .uploaded-video-item,
.upload-section .upload-card .uploaded-videos-grid .uploaded-image-item,
.upload-section .upload-card .uploaded-videos-grid .uploaded-video-item {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    transition: transform 0.3s ease;
}

.upload-section .upload-card .uploaded-images-grid .uploaded-image-item:hover,
.upload-section .upload-card .uploaded-images-grid .uploaded-video-item:hover,
.upload-section .upload-card .uploaded-videos-grid .uploaded-image-item:hover,
.upload-section .upload-card .uploaded-videos-grid .uploaded-video-item:hover {
    transform: scale(1.02);
}

.upload-section .upload-card .uploaded-images-grid .uploaded-image-item img,
.upload-section .upload-card .uploaded-images-grid .uploaded-image-item video,
.upload-section .upload-card .uploaded-images-grid .uploaded-video-item img,
.upload-section .upload-card .uploaded-images-grid .uploaded-video-item video,
.upload-section .upload-card .uploaded-videos-grid .uploaded-image-item img,
.upload-section .upload-card .uploaded-videos-grid .uploaded-image-item video,
.upload-section .upload-card .uploaded-videos-grid .uploaded-video-item img,
.upload-section .upload-card .uploaded-videos-grid .uploaded-video-item video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block;
}

.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-image-item
    .remove-image-btn,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-image-item
    .remove-video-btn,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-video-item
    .remove-image-btn,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-video-item
    .remove-video-btn,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-image-item
    .remove-image-btn,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-image-item
    .remove-video-btn,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-video-item
    .remove-image-btn,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-video-item
    .remove-video-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: rgba(240, 82, 113, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-image-item
    .remove-image-btn:hover,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-image-item
    .remove-video-btn:hover,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-video-item
    .remove-image-btn:hover,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-video-item
    .remove-video-btn:hover,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-image-item
    .remove-image-btn:hover,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-image-item
    .remove-video-btn:hover,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-video-item
    .remove-image-btn:hover,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-video-item
    .remove-video-btn:hover {
    background: #f05271;
    transform: scale(1.1);
}

.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-image-item
    .remove-image-btn
    svg,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-image-item
    .remove-video-btn
    svg,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-video-item
    .remove-image-btn
    svg,
.upload-section
    .upload-card
    .uploaded-images-grid
    .uploaded-video-item
    .remove-video-btn
    svg,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-image-item
    .remove-image-btn
    svg,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-image-item
    .remove-video-btn
    svg,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-video-item
    .remove-image-btn
    svg,
.upload-section
    .upload-card
    .uploaded-videos-grid
    .uploaded-video-item
    .remove-video-btn
    svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    .upload-section {
        margin-bottom: 30px;
    }

    .upload-section .upload-card {
        min-height: 280px;
    }

    .upload-section .upload-card .upload-card-content {
        width: 100%;
        padding: 20px;
    }

    .upload-section .upload-card .upload-card-content .upload-button {
        width: 100%;
        max-width: 276px;
    }

    .upload-section .upload-card .uploaded-images-grid,
    .upload-section .upload-card .uploaded-videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        padding: 15px;
        min-height: 280px;
    }
}

.upload-gallery-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    gap: 20px;
}

@media (max-width: 768px) {
    .upload-gallery-actions {
        gap: 20px;
        margin-top: 40px;
    }
}

.upload-gallery-actions .back-button-link,
.upload-gallery-actions .next-button-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: grey;
}

.upload-gallery-actions .back-button-link:hover,
.upload-gallery-actions .next-button-link:hover {
    color: #f05271;
}

.upload-gallery-actions .back-button-link:hover .back-button-icon,
.upload-gallery-actions .back-button-link:hover .next-button-icon,
.upload-gallery-actions .next-button-link:hover .back-button-icon,
.upload-gallery-actions .next-button-link:hover .next-button-icon {
    background: #f05271;
    box-shadow: 0 8px 20px rgba(240, 82, 113, 0.3);
}

.upload-gallery-actions .back-button-link:hover svg,
.upload-gallery-actions .next-button-link:hover svg {
    fill: #fff;
}

.upload-gallery-actions .back-button-link:hover svg path,
.upload-gallery-actions .next-button-link:hover svg path {
    fill: #fff;
}

.upload-gallery-actions .back-button-icon,
.upload-gallery-actions .next-button-icon {
    width: 49px;
    height: 48px;
    background: grey;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

@media (max-width: 768px) {
    .upload-gallery-actions .back-button-icon,
    .upload-gallery-actions .next-button-icon {
        width: 35px;
        height: 35px;
    }

    .upload-gallery-actions .back-button-icon svg,
    .upload-gallery-actions .next-button-icon svg {
        width: 16px !important;
        height: 16px !important;
    }
}

.upload-gallery-actions .back-button-icon svg,
.upload-gallery-actions .next-button-icon svg {
    width: 21px;
    height: 21px;
    fill: #fff;
    transition: all 0.3s ease;
}

.upload-gallery-actions .back-button-icon svg path,
.upload-gallery-actions .next-button-icon svg path {
    fill: #fff;
}

.upload-gallery-actions .back-button-text,
.upload-gallery-actions .next-button-text {
    color: grey;
    transition: color 0.3s ease;
}

.upload-gallery-actions .back-button-link:hover .back-button-text,
.upload-gallery-actions .next-button-link:hover .next-button-text {
    color: #f05271;
}

.packages-charge-table-container {
    width: 100%;
    max-width: 965px;
    margin: 0 auto 40px;
    background: #fff;
    border-radius: 31px;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1);
    padding: 0;
}

@media (max-width: 768px) {
    .packages-charge-table-container {
        overflow-x: auto;
        border-radius: 20px;
    }
}

.packages-charge-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    position: relative;
}

.packages-charge-table thead {
    background-color: rgba(128, 128, 128, 0.1);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
}

.packages-charge-table .packages-header-row {
    height: 78.917px;
}

.packages-charge-table .packages-header-row th {
    border: 1px solid rgba(128, 128, 128, 0.1);
    padding: 0;
    vertical-align: middle;
    text-align: center;
    background-color: rgba(128, 128, 128, 0.1);
}

.packages-charge-table .packages-header-row .packages-label-column {
    width: 241px;
    background: 0 0;
    border: none;
}

.packages-charge-table .packages-header-row .package-column {
    width: 241px;
    position: relative;
}

.packages-charge-table .packages-header-row .package-column.package-standard {
    width: 242px;
}

.packages-charge-table .packages-header-row .packages-actions-column {
    width: 81px;
    background: 0 0;
    border: none;
}

.packages-charge-table .package-header-badge {
    height: 45px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    color: #fff;
    margin: 17px auto;
    box-shadow: inset 0 4px 15px 0 rgba(0, 0, 0, 0.25);
    width: 193px;
    position: relative;
}

.packages-charge-table .package-basic .package-header-badge {
    background-color: #f05271;
}

.packages-charge-table .package-standard .package-header-badge {
    background-color: #44bda4;
}

.packages-charge-table .package-premium .package-header-badge {
    background-color: #f8992c;
}

.packages-charge-table tbody .packages-row {
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.packages-charge-table tbody .packages-row:last-child {
    border-bottom: none;
}

.packages-charge-table tbody .packages-row.packages-row-single {
    height: 78.917px;
}

.packages-charge-table tbody .packages-row.packages-row-dynamic {
    height: 158px;
    position: relative;
}

.packages-charge-table
    tbody
    .packages-row.packages-charges-row
    .packages-charges-label {
    background-color: #f05271 !important;
}

.packages-charge-table tbody .packages-label-cell {
    width: 241px;
    border: 1px solid rgba(128, 128, 128, 0.1);
    padding: 0;
    vertical-align: middle;
    background: #fff;
    position: relative;
}

.packages-charge-table
    tbody
    .packages-label-cell:last-child
    .packages-label-text {
    color: #fff !important;
}

.packages-charge-table tbody .packages-label-cell.packages-charges-label {
    background-color: #f05271;
    border-radius: 0 0 0 15px !important;
}

[dir="rtl"]
    .packages-charge-table
    tbody
    .packages-label-cell.packages-charges-label {
    border-radius: 0 0 15px 0 !important;
}

.packages-charge-table tbody .packages-label-cell .packages-label-text {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    color: #8379b8;
    text-align: center;
    display: block;
    padding: 0;
    position: absolute;
    left: 53px;
    top: 50%;
    transform: translateY(-50%);
}

.packages-charges-row
    .packages-charge-table
    tbody
    .packages-label-cell
    .packages-label-text {
    color: #fff;
}

.packages-charge-table tbody .packages-label-cell.packages-label-dynamic {
    padding: 0;
    vertical-align: top;
}

.packages-charge-table tbody .packages-label-upper {
    height: 78.917px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.packages-charge-table tbody .packages-label-input {
    width: 193px;
    height: 45px;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 50px;
    padding: 0 29px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: grey;
    background: #fff;
    outline: 0;
}

.packages-charge-table tbody .packages-label-input::-moz-placeholder {
    color: grey;
}

.packages-charge-table tbody .packages-label-input::placeholder {
    color: grey;
}

.packages-charge-table tbody .packages-label-lower {
    height: 78.917px;
    padding: 0 24px;
    display: flex;
    align-items: center;
}

.packages-charge-table tbody .package-type-dropdown-wrapper {
    position: relative;
    width: 193px;
}

.packages-charge-table tbody .package-type-dropdown-btn {
    width: 100%;
    height: 45px;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 50px;
    padding: 0 29px 0 29px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: grey;
    background: #fff;
    cursor: pointer;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.packages-charge-table tbody .package-type-dropdown-btn i {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.5);
}

.packages-charge-table tbody .package-type-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-top: none;
    border-radius: 0 0 50px 50px;
    display: none;
    z-index: 100;
    overflow: hidden;
}

.packages-charge-table tbody .package-type-dropdown-menu.show {
    display: block;
}

.packages-charge-table tbody .package-type-dropdown-menu .package-type-item {
    width: 100%;
    height: 45px;
    border: none;
    background: 0 0;
    padding: 0 29px;
    text-align: left;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: grey;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.packages-charge-table
    tbody
    .package-type-dropdown-menu
    .package-type-item:hover {
    background-color: rgba(128, 128, 128, 0.05);
}

.packages-charge-table
    tbody
    .package-type-dropdown-menu
    .package-type-item:not(:last-child) {
    border-bottom: 1px solid rgba(128, 128, 128, 0.1);
}

.packages-charge-table tbody .package-cell {
    width: 241px;
    border: 1px solid rgba(128, 128, 128, 0.1);
    padding: 0;
    vertical-align: middle;
    text-align: center;
    background: #fff;
    position: relative;
}

.packages-charge-table tbody .package-cell.package-standard-cell {
    width: 242px;
}

.packages-row-dynamic .packages-charge-table tbody .package-cell {
    vertical-align: top;
    padding-top: 24px;
}

.packages-charge-table tbody .packages-actions-cell {
    width: 81px;
    border: none;
    padding: 0;
    vertical-align: middle;
    position: absolute;
    right: 100px;
    bottom: 0;
}

[dir="rtl"] .packages-charge-table tbody .packages-actions-cell {
    right: auto;
    left: 100px;
}

.package-dropdown-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 16.9585px 24px;
}

.package-dropdown-wrapper .custom-dropdwon {
    width: 193px;
    height: 45px;
    background-color: #fff;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    border-radius: 50px;
    position: relative;
    border: 2px solid rgba(128, 128, 128, 0.3);
    transition: all 0.3s ease;
}

.package-dropdown-wrapper .custom-dropdwon.package-dropdown-basic {
    border-color: #f05271;
}

.package-dropdown-wrapper
    .custom-dropdwon.package-dropdown-basic
    .selected
    span {
    color: #f05271;
}

.package-dropdown-wrapper .custom-dropdwon.package-dropdown-basic .arrow {
    color: #f05271;
}

.package-dropdown-wrapper .custom-dropdwon.package-dropdown-standard {
    border-color: #44bda4;
}

.package-dropdown-wrapper
    .custom-dropdwon.package-dropdown-standard
    .selected
    span {
    color: #44bda4;
}

.package-dropdown-wrapper .custom-dropdwon.package-dropdown-standard .arrow {
    color: #44bda4;
}

.package-dropdown-wrapper .custom-dropdwon.package-dropdown-premium {
    border-color: #f8992c;
}

.package-dropdown-wrapper
    .custom-dropdwon.package-dropdown-premium
    .selected
    span {
    color: #f8992c;
}

.package-dropdown-wrapper .custom-dropdwon.package-dropdown-premium .arrow {
    color: #f8992c;
}

.package-dropdown-wrapper .custom-dropdwon .selected {
    margin-left: 29px;
    margin-top: 0;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 40px;
    cursor: pointer;
}

[dir="rtl"] .package-dropdown-wrapper .custom-dropdwon .selected {
    margin-left: auto;
}

.package-dropdown-wrapper .custom-dropdwon .selected span {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: rgba(128, 128, 128, 0.7);
    transition: color 0.3s ease;
}

.package-dropdown-wrapper .custom-dropdwon .selected .arrow {
    position: absolute;
    right: 29px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition:
        transform 0.3s ease,
        color 0.3s ease;
}

[dir="rtl"] .package-dropdown-wrapper .custom-dropdwon .selected .arrow {
    right: auto;
    left: 29px;
}

.package-dropdown-wrapper .custom-dropdwon .options {
    background-color: #fff;
    padding: 10px 0;
    border-radius: 10px;
    margin-top: 5px;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1019607843);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

.package-dropdown-wrapper .custom-dropdwon .options div {
    padding: 8px 29px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: rgba(128, 128, 128, 0.7);
    transition: all 0.3s ease;
}

.package-dropdown-wrapper .custom-dropdwon .options div:hover {
    background-color: rgba(128, 128, 128, 0.1);
}

.package-dropdown-wrapper .custom-dropdwon .options div:first-child {
    border-radius: 10px 10px 0 0;
}

.package-dropdown-wrapper .custom-dropdwon .options div:last-child {
    border-radius: 0 0 10px 10px;
}

.package-dropdown-wrapper .custom-dropdwon .options.open {
    opacity: 1;
    pointer-events: auto;
}

.package-dropdown-wrapper .custom-dropdwon.open .arrow {
    transform: translateY(-50%) rotate(180deg);
}

.package-checkbox-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #4a90e2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    margin: 0 auto;
    flex-shrink: 0;
}

.package-checkbox-icon::before {
    content: "✓";
}

.package-numeric-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 24px;
    position: relative;
    width: 100%;
}

.package-numeric-input {
    width: 193px;
    height: 45px;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 50px;
    padding: 0 40px 0 29px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: rgba(128, 128, 128, 0.7);
    background: #fff;
    outline: 0;
    text-align: left;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.package-numeric-input::-webkit-inner-spin-button,
.package-numeric-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.package-numeric-input[type="number"] {
    -moz-appearance: textfield;
}

.numeric-controls {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

.numeric-btn {
    border: none;
    background: 0 0;
    color: grey;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0;
    pointer-events: all;
}

.numeric-btn:hover {
    color: #000;
}

.numeric-btn i {
    font-size: 10px;
}

.numeric-counter {
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: rgba(128, 128, 128, 0.7);
    margin-top: 0;
}

.package-text-input {
    width: 90%;
    height: 45px;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 50px;
    padding: 0 20px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    color: rgba(128, 128, 128, 0.7);
    background: #fff;
    outline: 0;
    margin: 0 auto;
    display: block;
}

.package-text-input::-moz-placeholder {
    color: rgba(128, 128, 128, 0.7);
}

.package-text-input::placeholder {
    color: rgba(128, 128, 128, 0.7);
}

.package-charge-input-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 3px 24px;
    position: relative;
    width: 100%;
    border: 2px solid rgba(128, 128, 128, 0.3);
    border-radius: 50px;
    max-width: 196px;
    margin: 35px auto;
    margin-bottom: 10px;
}

.charge-currency-icon {
    width: 28px;
    height: 23px;
    flex-shrink: 0;
    position: absolute;
    z-index: 1;
    border-right: 1px solid rgba(128, 128, 128, 0.3);
    padding-right: 10px;
}

[dir="rtl"] .charge-currency-icon {
    border-right: none;
    border-left: 1px solid rgba(128, 128, 128, 0.3);
    padding-left: 10px;
    padding-right: 0;
}

.package-charge-input {
    width: 120px;
    height: 45px;
    border: none;
    padding: 0 40px 0 38px;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    color: rgba(128, 128, 128, 0.7);
    background: #fff;
    outline: 0;
    text-align: left;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

.package-charge-input::-webkit-inner-spin-button,
.package-charge-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.package-charge-input[type="number"] {
    -moz-appearance: textfield;
}

.charge-controls {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
}

[dir="rtl"] .charge-controls {
    right: auto;
    left: 35px;
}

.charge-btn {
    width: 14px;
    height: 14px;
    border: none;
    background: 0 0;
    color: grey;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0;
    pointer-events: all;
}

.charge-btn:hover {
    color: #000;
}

.charge-btn i {
    font-size: 14px;
}

.column-actions {
    position: absolute;
    right: 27.5px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: 5.35px;
    z-index: 10;
    align-items: center;
    justify-content: flex-start;
}

.column-action-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: 0 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
    overflow: hidden;
}

.column-action-btn:hover {
    opacity: 0.8;
}

.column-action-btn img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

.column-action-btn.add-column-btn {
    background: 0 0;
}

.column-action-btn.remove-column-btn {
    background: 0 0;
}

.column-action-btn.remove-column-btn.charges-row-minus {
    background: #fff;
}

.packages-charge-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    width: 100%;
    max-width: 965px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .packages-charge-actions {
        flex-direction: column;
        gap: 20px;
    }
}

.back-button-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: grey;
    font-family: "Gotham Rounded", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    transition: color 0.3s ease;
}

.back-button-link:hover {
    color: #000;
}

.back-button-icon {
    width: 49px;
    height: 48px;
    background-color: grey;
    border-radius: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.back-button-icon:hover {
    background-color: #666;
}

.back-button-icon svg {
    width: 21px;
    height: 21px;
}

.back-button-icon svg path {
    fill: #fff;
}

.add-project-button {
    width: 259px;
    padding: 0 !important;
    height: 48px;
    background-color: #f05271;
    border: none;
    border-radius: 60px;
    color: #fff;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 0 92px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-project-button:hover {
    background-color: #e04160;
}

@media (max-width: 768px) {
    .add-project-button {
        width: 100%;
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .packages-charge-table-container {
        border-radius: 20px;
    }

    .packages-charge-table {
        min-width: 800px;
    }

    .packages-charge-table .packages-header-row th {
        font-size: 14px;
    }

    .packages-charge-table .package-header-badge {
        font-size: 16px;
        width: 150px;
        height: 40px;
    }

    .packages-charge-table .packages-label-cell {
        width: 200px;
        padding: 0 15px;
    }

    .packages-charge-table .packages-label-cell .packages-label-text {
        font-size: 16px;
    }

    .packages-charge-table .package-cell {
        width: 200px;
    }

    .add-title-type-btn {
        width: 100%;
    }

    .add-title-type-dropdown {
        width: 100%;
    }
}

.packages-charge-table span.packages-label-text:last-child {
    color: #fff !important;
}

.subscription-page {
    min-height: 100vh;
    background-size: cover;
}

.subscription-page .main-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    padding-top: 50px !important;
}

@media (max-width: 1440px) {
    .subscription-page .main-container {
        max-width: 1220px !important;
    }
}

@media (max-width: 1200px) {
    .subscription-page .main-container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .subscription-page .main-container {
        max-width: 720px;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .subscription-page .main-container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .subscription-page .main-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 380px) {
    .subscription-page .main-container {
        padding: 0 15px;
    }
}

.subscription-page .subscription-hero {
    padding: clamp(60px, 8vw, 120px) 0 clamp(40px, 5vw, 80px);
    text-align: center;
    position: relative;
}

.subscription-page .subscription-hero-content {
    margin: 0 auto;
    padding: 0 clamp(15px, 2vw, 30px);
}

.subscription-page .subscription-label {
    font-weight: 500;
    font-size: clamp(24px, 3vw, 32px);
    line-height: normal;
    color: #f05271;
    margin-bottom: clamp(20px, 2.5vw, 30px);
    display: block;
}

.subscription-page .subscription-title {
    font-weight: 700;
    font-size: clamp(28px, 4vw, 40px);
    line-height: clamp(34px, 4.2vw, 50px);
    color: #000;
    margin-bottom: clamp(20px, 2.5vw, 30px);
    max-width: 1134px;
    margin-left: auto;
    margin-right: auto;
}

.subscription-page .subscription-description {
    font-weight: 500;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: clamp(24px, 2.5vw, 29px);
    color: grey;
    margin: 0 auto;
    white-space: pre-wrap;
}

.subscription-page .subscription-plans-section {
    padding: 0 0 clamp(80px, 10vw, 120px);
    position: relative;
}

.subscription-page .subscription-plans-container {
    margin: 0 auto;
    padding: 0 clamp(15px, 2vw, 30px);
    position: relative;
}

.subscription-page .user-type-tabs {
    display: flex;
    gap: clamp(20px, 2.5vw, 23px);
    justify-content: center;
    margin-bottom: clamp(30px, 4vw, 50px);
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(15px, 2vw, 30px);
}

.subscription-page .user-type-tab {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    border-radius: 33px;
    width: clamp(250px, 31.9vw, 412px);
    height: clamp(90px, 11.5vw, 116px);
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(15px, 1.9vw, 20px);
    box-shadow: 0 4px 21px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    font-family: "Baloo 2", sans-serif;
    font-weight: 700;
    font-size: clamp(14px, 1.8vw, 18px);
    line-height: normal;
    color: grey;
    position: relative;
    padding-left: clamp(30px, 3.8vw, 36px);
    padding-right: clamp(30px, 3.8vw, 50px);
}

.subscription-page .user-type-tab.active {
    background: #f05271;
    color: #fff;
    box-shadow: 0 4px 21px 0 rgba(0, 0, 0, 0.15);
}

.subscription-page .user-type-tab.active img {
    filter: brightness(2);
}

.subscription-page .user-type-tab:not(.active) {
    background: rgba(255, 255, 255, 0.9);
}

.subscription-page .user-type-tab:not(.active) img {
    /* filter: brightness(0.5); */
}

.subscription-page .user-type-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.9);
}

.subscription-page .user-type-tab:hover:not(.active) img {
    /* filter: brightness(0.5); */
}

.subscription-page .user-type-tab .user-type-icon {
    width: clamp(50px, 6.4vw, 67px);
    height: clamp(50px, 6.4vw, 67px);
    flex-shrink: 0;
    display: block;
}

.subscription-page .user-type-tab span {
    flex: 1;
    text-align: start;
}

@media (max-width: 768px) {
    .subscription-page .user-type-tab {
        width: 100%;
        max-width: 312px;
        justify-content: center;
        padding-left: clamp(20px, 5vw, 36px);
        padding-right: clamp(20px, 5vw, 50px);
    }
}

.subscription-page .billing-cycle-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: clamp(40px, 5vw, 82px);
    position: relative;
    flex-wrap: wrap;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(15px, 2vw, 30px);
}

.subscription-page .billing-cycle-tabs {
    position: relative;
    width: clamp(280px, 32.7vw, 420px);
    height: clamp(32px, 3.8vw, 37px);
    background: #fff;
    border-radius: 50px;
    box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    overflow: hidden;
    mix-blend-mode: multiply;
}

.subscription-page .billing-cycle-tab {
    flex: 1;
    border: none;
    background: 0 0;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 24px);
    line-height: clamp(17px, 1.8vw, 17px);
    color: #f05271;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    padding: clamp(8px, 1vw, 10px) clamp(40px, 4.7vw, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.subscription-page .billing-cycle-tab.active {
    background: #f05271;
    color: #fff;
    border-radius: 100px;
    box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.25);
}

.subscription-page .save-badge {
    font-weight: 400;
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: clamp(20px, 2.5vw, 24px);
    color: #000;
    margin: 0;
    white-space: nowrap;
    margin-inline-start: clamp(15px, 1.8vw, 20px);
    text-align: center;
}

.subscription-page .plans-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.5vw, 30px);
    margin-top: clamp(30px, 4vw, 50px);
}

@media (max-width: 992px) {
    .subscription-page .plans-cards-container {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: clamp(30px, 4vw, 50px) auto 0;
    }
}

.subscription-page .plan-card {
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: clamp(500px, 62vw, 575.59px);
}

.subscription-page .plan-card-header {
    position: relative;
    height: clamp(170px, 19vw, 193px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: clamp(12px, 1.5vw, 17px);
}

.subscription-page .plan-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 0;
}

.subscription-page .plan-title {
    font-weight: 700;
    font-size: clamp(18px, 2.2vw, 24px);
    line-height: normal;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 1;
    text-align: center;
}

.subscription-page .plan-price-badge {
    position: absolute;
    left: 50%;
    transform: translate(-49%, clamp(110px, 15vw, 120px));
    width: clamp(85px, 12.5vw, 110px);
    height: clamp(85px, 12.5vw, 110px);
    background: #fff;
    border-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-top: clamp(-60px, -7.5vw, -80px);
}

.subscription-page .plan-price {
    font-weight: 700;
    font-size: clamp(22px, 4vw, 28px);
    line-height: clamp(26px, 3.2vw, 42px);
    color: #333;
    display: block;
}

.subscription-page .plan-period {
    font-weight: 700;
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: clamp(19px, 2.4vw, 26px);
    color: #333;
    display: block;
}

.subscription-page .plan-card-body {
    flex: 1;
    padding: clamp(30px, 4vw, 40px) clamp(20px, 2.5vw, 40px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.subscription-page .plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.subscription-page .plan-feature {
    display: flex;
    align-items: center;
    gap: clamp(15px, 2vw, 21px);
    margin-bottom: clamp(20px, 2.5vw, 34px);
    height: clamp(25px, 3vw, 34px);
}

.subscription-page .plan-feature:last-child {
    margin-bottom: 0;
}

.subscription-page .feature-icon {
    width: clamp(10px, 1.2vw, 13px);
    height: clamp(9px, 1.1vw, 11px);
    flex-shrink: 0;
}

.subscription-page .plan-feature span {
    font-weight: 400;
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: clamp(19px, 2.4vw, 26px);
    color: #333;
    flex: 1;
}

.subscription-page .plan-card-footer {
    padding: 0 clamp(30px, 4vw, 40px) clamp(30px, 4vw, 40px);
}

.subscription-page .purchase-btn {
    width: 100%;
    height: clamp(45px, 5.5vw, 54px);
    background: #f05271;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: clamp(16px, 2vw, 20px);
    line-height: clamp(21px, 2.6vw, 26px);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.subscription-page .purchase-btn:hover {
    background: #e04562;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px 0 rgba(240, 82, 113, 0.3);
}

.subscription-page .purchase-btn:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .subscription-page .subscription-hero {
        padding: clamp(40px, 6vw, 80px) 0 clamp(30px, 4vw, 60px);
    }

    .subscription-page .user-type-tabs {
        flex-direction: column;
        align-items: center;
    }

    .subscription-page .user-type-tab {
        width: 100%;
        justify-content: center;
    }

    .subscription-page .billing-cycle-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .subscription-page .plans-cards-container {
        gap: clamp(30px, 4vw, 40px);
    }
}

@media (max-width: 576px) {
    .subscription-page .subscription-title {
        font-size: clamp(24px, 5vw, 32px);
    }

    .subscription-page .subscription-description {
        font-size: clamp(14px, 3vw, 18px);
    }

    .subscription-page .plan-card {
        min-height: auto;
    }
}

.dashboard-producer .top-nav .nav-tab .span-1 {
    color: grey;
    font-weight: 400;
    font-size: 16px;
}

.dashboard-producer .top-nav .nav-tab i {
    margin-left: 15px;
    margin-right: 15px;
}

.dashboard-producer .col-1 {
    width: 20%;
    border-radius: 50px;
    margin-left: 10%;
    box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.0784313725);
}

.dashboard-producer .col-2 {
    width: 58%;
    margin-top: 2%;
    margin-left: 3%;
}

.dashboard-producer .col-2 .span-1 {
    color: #000;
    font-size: 32px;
    font-weight: 700;
}

.dashboard-producer .col-2 .span-2 {
    font-size: 12px;
    color: #f05271;
    font-weight: 700;
}

.dashboard-producer .col-2 p {
    color: grey;
    font-weight: 400;
    font-size: 14px;
}

.dashboard-producer .profile {
    position: relative;
}

.dashboard-producer .shape {
    width: 100%;
    border-radius: 50px;
}

.dashboard-producer .name {
    position: absolute;
    top: 15%;
    left: 34%;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
}

.dashboard-producer .tabs {
    margin-top: 30%;
    margin-left: 10px;
    padding-bottom: 20px;
}
.rating-section-producer {
    margin-top: 8%;
}

.rating-section-producer .center-container {
    display: flex;
    width: 85%;
    padding-bottom: 30px;
}

.rating-section-producer .top-nav {
    display: flex;
    justify-content: space-between;
    margin-left: 16%;
    margin-right: 16%;
    margin-bottom: 30px;
}

.rating-section-producer .top-nav .nav-tab .span-1 {
    color: grey;
    font-weight: 400;
    font-size: 16px;
}

.rating-section-producer .top-nav .nav-tab .span-2 {
    color: #f05271;
    font-size: 12px;
    font-weight: 700;
}

.rating-section-producer .top-nav .nav-tab i {
    margin-left: 15px;
    margin-right: 15px;
}

.rating-section-producer .user-details .span-1 {
    color: rgba(0, 0, 0, 0.5019607843);
    font-size: 16px;
    font-weight: 700;
}

.rating-section-producer .user-details .span-2 {
    color: #f05271;
    font-size: 16px;
    font-weight: 700;
    margin-left: 25px;
    position: relative;
}

.rating-section-producer .user-details .span-2::before {
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 10px;
    background: #000;
    position: absolute;
}

html[lang="ar"] .rating-section-producer .center-container .col1 {
    margin-right: 19%;
    margin-left: 5%;
}

.rating-section-producer .center-container .col1 {
    margin-left: 19%;
    margin-right: 5%;
}

.rating-section-producer .center-container .col1 h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0;
    margin-bottom: 50px;
}

.rating-section-producer .center-container .col1 .sub-title {
    font-weight: 300;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0;
    margin-bottom: 30px;
}

.rating-section-producer .center-container .col1 .content-review {
    width: 100%;
    height: 183px;
    border-radius: 30px;
    background-color: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    margin-bottom: 30px;
    padding: 30px;
}

.rating-section-producer .center-container .col1 .content-review textarea {
    width: 100%;
    height: 100%;
    border: none;
    outline: 0;
    font-size: 16px;
    font-weight: 300;
    resize: none;
    resize: none;
    border: 1px solid gray;
    border-radius: 15px;
    padding: 15px;
}

.rating-section-producer .center-container .col1 .feedback {
    font-weight: 700;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
    margin-bottom: 20px;
}

.rating-section-producer .center-container .col1 .feedback-content {
    width: 62%;
    font-weight: 300;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    margin-bottom: 24px;
}

.rating-section-producer .center-container .col1 .row1 {
    display: flex;
    justify-content: space-between;
}

.rating-section-producer .center-container .col1 .rating-content {
    background-color: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    border-radius: 30px;
    padding: 30px;
    margin-bottom: 40px;
}

.rating-section-producer .center-container .col1 .rating-content .how-you-rate {
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
    margin-bottom: 60px;
    margin-left: 10px;
}

.rating-section-producer .center-container .col1 .rating-content .reset {
    width: 10%;
}

.rating-section-producer .center-container .col1 .rating-content .reset button {
    background-color: transparent;
    border: 1px solid #f05271;
    color: #f05271;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0;
    width: 100%;
    padding: 5px 0;
}

.rating-section-producer .center-container .rating-row {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.rating-section-producer .center-container .rate-item {
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    padding: 5px 10px;
    position: relative;
}

.rating-section-producer
    .center-container
    .rating-row
    .rate-item.active
    .bubble {
    position: absolute;
    background: orange;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 1;
    transition: 0.3s ease;
    top: -69%;
    left: 4%;
}

.rating-section-producer .center-container .rating-row .rate-item.active {
    border-color: orange;
    background-color: #f8eadc;
}

.rating-section-producer .center-container .rate-item.active .emoji {
    border-color: orange;
}

.rating-section-producer .center-container .rate-item.active .stars i {
    color: #f8992c;
}

.rating-section-producer .center-container .rating-row .rate-item .bubble {
    position: absolute;
    background: orange;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transition: 0.3s ease;
    top: -69%;
    left: 4%;
}

.rating-section-producer
    .center-container
    .rating-row
    .rate-item
    .bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: orange transparent transparent transparent;
}

.rating-section-producer .center-container .emoji {
    font-size: 30px;
    padding-right: 8px;
    border-right: 1px solid #e0e0e0;
}

.rating-section-producer .center-container .stars i {
    color: grey;
    font-size: 20px;
}

.rating-section-producer .center-container .col2 {
    margin-top: 5%;
    background-color: #fff;
    box-shadow: 0 16px 88px 0 rgba(0, 0, 0, 0.1019607843);
    width: 20%;
    border-radius: 30px;
    height: -moz-fit-content;
    height: fit-content;
    padding: 30px 30px;
}

.rating-section-producer .center-container .col2 .skills {
    display: flex;
    border: 0.5px solid rgba(128, 128, 128, 0.5019607843);
    padding: 10px 15px;
    margin-bottom: 15px;
}

.rating-section-producer .center-container .col2 .skills.active {
    border: 1px solid #8ebd8e;
    color: green;
    background-color: #e6f1e6;
}

html[lang="en"] .rating-section-producer .center-container .col2 .skills span {
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0;
    margin-left: 10px;
}

html[lang="ar"] .rating-section-producer .center-container .col2 .skills span {
    font-weight: 300;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0;
    margin-right: 10px;
}

.rating-section-producer .center-container .col2 .span-border {
    border: 1px solid #d9d9d9;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating-section-producer .center-container .col2 .span-border i {
    display: none;
}

.rating-section-producer .center-container .col2 .skills.active .span-border i {
    display: block;
    color: #fff;
    font-size: 14px;
}

.rating-section-producer .center-container .col2 .skills.active .span-border {
    background-color: #54a854;
}

.rating-section-producer .center-container .col2 .overall-score {
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0;
    padding: 20px 0;
}

.rating-section-producer .center-container .col2 .overall-score i {
    color: #f8992c;
}

html[lang="ar"] .rating-section-producer .center-container .emoji {
    font-size: 30px;
    padding-left: 8px;
    border-left: 1px solid #e0e0e0;
    border-right: none;
}

.rating-section-producer .center-container .col2 .submit {
    width: 100%;
    height: 40px;
    background-color: #f05271;
    border-radius: 168px;
    font-family: Baloo 2;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
    color: #fff;
    border: none;
    outline: 0;
}

@media (max-width: 1773px) {
    .rating-section-producer .center-container {
        flex-direction: column;
    }

    html[lang="ar"] .rating-section-producer .center-container .col1 {
        margin-right: 5%;
        margin-left: 5%;
    }

    .rating-section-producer .center-container .col1 {
        margin-right: 5%;
        margin-left: 5%;
        width: 90%;
    }

    .rating-section-producer .center-container .col2 {
        width: 90%;
        margin-right: 5%;
        margin-left: 5%;
    }

    .rating-section-producer .center-container .col1 .feedback-content {
        width: 100%;
    }

    .rating-section-producer .center-container {
        width: 100%;
    }

    html[lang="ar"] .rating-section-producer .center-container .col2 {
        margin-right: 5%;
        margin-left: 5%;
    }
}

@media (max-width: 1557px) {
    .rating-section-producer .top-nav {
        margin-left: 8%;
        margin-right: 8%;
    }
}

@media (max-width: 1393px) {
    .rating-section-producer .top-nav {
        margin-left: 7%;
        margin-right: 7%;
    }
}

@media (max-width: 1205px) {
    .rating-section-producer .top-nav {
        margin-left: 2%;
        margin-right: 2%;
    }

    .rating-section-producer .top-nav {
        margin-top: 11%;
        margin-bottom: 2%;
    }
}

@media (max-width: 1082px) {
    .rating-section-producer .top-nav {
        margin-left: 7%;
        margin-right: 2%;
    }
}

@media (max-width: 652px) {
    .rating-section-producer .top-nav {
        margin-top: 35%;
    }
}

@media (max-width: 910px) {
    .rating-section-producer .center-container .col1 .row1 {
        flex-direction: column;
        justify-items: flex-start;
    }

    .rating-section-producer
        .center-container
        .col1
        .rating-content
        .how-you-rate {
        margin-bottom: 10px;
    }

    .rating-section-producer .center-container .col1 .rating-content .reset {
        margin-bottom: 10px;
        width: 30%;
    }
}

@media (max-width: 548px) {
    .rating-section-producer .center-container .col2 {
        width: 90%;
    }

    .rating-section-producer .center-container .col1 {
        width: 90%;
    }

    html[lang="ar"] .rating-section-producer .center-container .col1 {
        width: 90%;
    }
}

@media (max-width: 560px) {
    .wallets-info-producer .row2 .wallet-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 959px) {
    .wallets-info-producer .row1 .tickets {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 20px;
    }

    .wallets-info-producer .row1 .tickets .withdraw {
        width: 50%;
    }

    .wallets-info-producer .row1 .tickets .deposit {
        width: 50%;
    }

    .wallets-info-producer .row1 .tickets .wallet-buttons {
        justify-content: flex-start;
        margin-top: 10px;
        width: 100%;
    }

    .wallets-info-producer .row1 .tickets .notice-container {
        margin-top: 20px;
        margin-left: 10px;
        width: 100%;
    }

    .wallets-info-producer .row1 .tickets .notice-container input {
        width: 60%;
    }
}

@media (max-width: 482px) {
    .wallets-info-producer .row1 .tickets .wallet-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .wallets-info-producer .row1 .tickets .wallet-buttons .deposit {
        margin-bottom: 8px;
        width: 100%;
    }

    .wallets-info-producer .row1 .tickets .wallet-buttons .withdraw {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .wallet-box table,
    .wallet-box tbody,
    .wallet-box td,
    .wallet-box th,
    .wallet-box thead,
    .wallet-box tr {
        display: block;
        width: 100%;
    }

    .wallets-info-producer .row2 {
        width: 96%;
    }

    .wallet-box thead {
        display: none;
    }

    .wallet-box tr {
        background: #fff;
        margin: 12px 0;
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    }

    .wallet-box td {
        padding: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
    }

    .wallet-box td:last-child {
        border-bottom: none;
    }

    .wallet-box td:nth-child(1)::before {
        content: "Payment Gateway:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td:nth-child(2)::before {
        content: "Payment Status:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td:nth-child(3)::before {
        content: "Deposit Amount:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td:nth-child(4)::before {
        content: "Deposit Date:";
        font-weight: 700;
        color: #444;
    }

    .wallet-box td {
        font-size: 14px;
    }

    .wallet-box .status {
        margin-left: 10px;
    }
}

@media (max-width: 1025px) {
    .dashboard-producer .form-add-ticket {
        width: 90%;
        margin-top: 80%;
    }
}

@media (max-width: 670px) {
    .dashboard-producer .form-add-ticket .form-buttons {
        flex-direction: column;
        padding: 20px 10px;
    }

    .dashboard-producer .form-add-ticket .form-buttons .close {
        width: 100%;
        margin-bottom: 20px;
    }

    .dashboard-producer .form-add-ticket .form-buttons .create {
        width: 100%;
    }

    .dashboard-producer .form-add-ticket .form-buttons .close {
        margin-right: 0;
    }

    html[lang="ar"] .dashboard-producer .form-add-ticket .form-buttons .close {
        margin-left: 0;
    }
}

@media (max-width: 1235px) {
    .dashboard-producer
        .form-add-ticket
        .form-container
        .first-row
        .img-container {
        width: 29%;
    }
}

@media (max-width: 563px) {
    .dashboard-producer
        .form-add-ticket
        .form-container
        .first-row
        .img-container {
        width: 43%;
    }
}

@media (max-width: 435px) {
    .dashboard-producer .form-add-ticket .form-container .first-row {
        justify-content: center;
    }

    .dashboard-producer
        .form-add-ticket
        .form-container
        .first-row
        .img-container {
        width: 40%;
    }
}

.support-producer .ticket-box table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    display: table;
    border-radius: 15px;
    overflow: hidden;
}

.support-producer .ticket-box thead {
    display: table-header-group;
}

.support-producer .ticket-box tbody {
    display: table-row-group;
}

.support-producer .ticket-box tr {
    display: table-row;
}

.support-producer .ticket-box td,
.support-producer .ticket-box th {
    display: table-cell;
}

.support-producer .ticket-box td::before {
    display: none;
    content: none;
}

.support-producer .ticket-box .table-wrapper {
    width: 100%;
}

.support-producer .ticket-box thead {
    background-color: #e7e7ed;
}

.support-producer .ticket-box thead th {
    text-align: left;
    padding: 15px;
    font-weight: 700;
    font-size: 18px;
}

.support-producer .ticket-box tbody td {
    padding: 15px;
    font-weight: 600;
    font-size: 14px;
    color: #000;
    border-top: 1px solid #eee;
}

.support-producer .ticket-box .status {
    padding: 2px 25px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.support-producer .ticket-box .status.complete {
    background: #d6f7ed;
    color: #0ea77a;
}

.support-producer .ticket-box .status.incomplete {
    background: #fcd6d9;
    color: #d64545;
}

.support-producer .ticket-box .details-btn {
    background: #ffa620;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    cursor: pointer;
}

.support-producer .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.support-producer .form-add-ticket .form-container {
    padding: 20px;
    border-bottom: 1px solid gray;
}

.support-producer .form-add-ticket .top-title {
    font-size: 30px;
    font-weight: 700;
    padding-bottom: 10px;
    border-bottom: 1px solid gray;
    margin-bottom: 30px;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.support-producer .form-add-ticket .top-title #closePopup {
    font-size: 25px;
}

.support-producer .form-add-ticket .input-container {
    margin-bottom: 10px;
}

.support-producer .form-add-ticket .input-container input {
    width: 100%;
    height: 60px;
    padding: 10px;
    outline: 0;
    border: 1px solid grey;
    border-radius: 10px;
}

.support-producer .form-add-ticket .title {
    margin-bottom: 10px;
    font-size: 25px;
    font-weight: 500;
    color: #666;
}

.support-producer .form-add-ticket .top-title {
    display: flex;
}

.support-producer .form-add-ticket .form-buttons {
    display: flex;
    justify-content: flex-end;
    padding-right: 30px;
    padding-top: 30px;
}

.support-producer .form-add-ticket .form-buttons .close {
    margin-right: 20px;
    width: 15%;
    height: 50px;
    border: none;
    outline: 0;
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
    background-color: grey;
}

.support-producer .form-add-ticket .form-buttons .create {
    width: 20%;
    border: none;
    outline: 0;
    height: 50px;
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
    background-color: #d64545;
}

@media (max-width: 1363px) {
    .support-producer .col-1 {
        width: 25%;
    }
}

@media (max-width: 1065px) {
    .support-producer .col-1 {
        width: 30%;
    }
}

@media (max-width: 990px) {
    .support-producer .tickets-info .row1 .tickets {
        height: 90px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .support-producer .tickets-info .row1 .tickets .notice {
        width: 90%;
        margin-bottom: 10px;
    }

    .support-producer .tickets-info .row1 .tickets .button {
        width: 100%;
    }

    .support-producer .tickets-info .row1 .tickets {
        width: 100%;
    }

    .tickets-info .row1 {
        margin: 10px auto 10px auto;
        width: 90%;
    }

    .support-producer .top-content {
        width: 87%;
        margin: 10px auto 10px auto;
    }

    .support-producer .tickets-info .row2 {
        margin: 10px auto 10px auto;
    }

    .support-producer .ticket-box {
        margin: auto;
    }
}

@media (max-width: 999px) {
    .support-producer .profile-img {
        height: 144px;
        width: 144px;
    }

    .support-producer .name {
        left: 33%;
    }
}

@media (max-width: 768px) {
    .support-producer .ticket-box .table-wrapper {
        display: block;
    }

    .support-producer .ticket-box .table-wrapper table {
        display: block;
        border: none;
        width: 100%;
    }

    .support-producer .ticket-box .table-wrapper thead {
        display: none;
    }

    .support-producer .ticket-box .table-wrapper tbody {
        display: block;
    }

    .support-producer .ticket-box .table-wrapper tbody tr {
        display: block;
        background: #fff;
        padding: 18px;
        border-radius: 16px;
        margin-bottom: 18px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #f1f1f1;
        transition: 0.2s ease;
    }

    .support-producer .ticket-box .table-wrapper tbody tr:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }

    .support-producer .ticket-box .table-wrapper tbody tr td {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
        border: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .support-producer .ticket-box .table-wrapper tbody tr td:last-child {
        border-bottom: none;
    }

    .support-producer .ticket-box .table-wrapper tbody tr td::before {
        content: attr(data-label) ":";
        display: inline-block;
        font-weight: 600;
        color: #666;
        font-size: 14px;
        min-width: 90px;
        flex-shrink: 0;
    }

    .support-producer
        .ticket-box
        .table-wrapper
        tbody
        tr
        td[data-label="Title"] {
        flex-wrap: wrap;
    }

    .support-producer .ticket-box .details-btn {
        width: auto;
        align-self: flex-start;
        padding: 8px 14px;
        background: #ffa620;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        font-weight: 600;
        margin-top: 5px;
        transition: 0.2s ease;
    }

    .support-producer .ticket-box .details-btn:hover {
        background: #e6951c;
    }

    .support-producer .col-1 {
        width: 95%;
        margin-bottom: 30px;
    }

    .support-producer .top-nav {
        margin-top: 31%;
    }

    .support-producer .col-2,
    .support-producer .col-md-12,
    .support-producer .col-sm-12 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 15px;
    }

    .support-producer .tickets-info .row2 .ticket-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .support-producer .tickets-info .row2 .ticket-header h2 {
        font-size: 24px;
    }

    .support-producer .tickets-info .row2 .ticket-header .search-ticket {
        width: 100%;
    }

    .support-producer .ticket-box {
        overflow-x: visible;
        padding: 15px;
    }
}

@media (max-width: 992px) {
    .support-producer .col-md-12 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 670px) {
    .support-producer .form-add-ticket .form-buttons {
        flex-direction: column;
        padding: 20px 10px;
    }

    .support-producer .form-add-ticket .form-buttons .close {
        width: 100%;
        margin-bottom: 20px;
    }

    .support-producer .form-add-ticket .form-buttons .create {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .support-producer .col-sm-12 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 10px;
    }

    .support-producer .tickets-info .row2 .ticket-header h2 {
        font-size: 20px;
    }

    .support-producer .ticket-box {
        padding: 12px;
    }

    .support-producer .ticket-box .table-wrapper tbody tr {
        padding: 15px;
        margin-bottom: 15px;
    }

    .support-producer .ticket-box .table-wrapper tbody tr td {
        font-size: 13px;
        padding: 6px 0;
    }

    .support-producer .ticket-box .table-wrapper tbody tr td::before {
        font-size: 13px;
        min-width: 75px;
    }

    .support-producer .ticket-box .details-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
    html, body {
    overflow-x: hidden;
}

}

@media (max-width: 1025px) {
    .dashboard-producer .form-add-ticket {
        margin-top: 80%;
    }
}

.myorders-producer-section .top-nav .nav-tab i {
    margin-left: 15px;
    margin-right: 15px;
}

.myorders-producer-section .user-details .span-1 {
    color: rgba(0, 0, 0, 0.5019607843);
    font-size: 16px;
    font-weight: 700;
}

.myorders-producer-section .user-details .span-2 {
    color: #f05271;
    font-size: 16px;
    font-weight: 700;
    margin-left: 25px;
    position: relative;
}

[data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
}

.aos-init,
.aos-animate {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
    animation: none !important;
}

* {
    &[data-aos] {
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
        transition: none !important;
        animation: none !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    direction: ltr;
    text-align: left;
    font-family: "Baloo Bhaijaan 2", cursive;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

body a {
    -webkit-tap-highlight-color: transparent;
    color: inherit;
}

body a:link {
    color: inherit;
    -webkit-text-fill-color: inherit;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f7f7f7;
}

::-webkit-scrollbar-thumb {
    background: #021945;
}

::-webkit-scrollbar-thumb:hover {
    background: #000713;
}

/* Global Pagination Styles */
.cast-hub-pagination,
.all-services-pagination,
.all-projects-pagination,
.reviews-pagination,
.services-catalogue-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.pagination-info {
    font-size: 14px;
    color: #808080;
}

.pagination-info strong {
    color: #000;
    margin: 0 4px;
}

.pagination-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pagination-btn,
.reviews-pagination-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background-color: transparent;
    color: #808080;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pagination-btn:hover,
.reviews-pagination-btn:hover {
    border-color: #f05271;
    color: #f05271;
}

.pagination-btn-active,
.reviews-pagination-btn-active {
    background-color: #f05271 !important;
    border-color: #f05271 !important;
    color: #ffffff !important;
}

.pagination-arrow,
.reviews-pagination-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    background: transparent;
    border: none;
}

.pagination-arrow:hover,
.reviews-pagination-arrow:hover {
    transform: translateX(3px);
}

[dir="rtl"] .pagination-arrow:hover,
[dir="rtl"] .reviews-pagination-arrow:hover {
    transform: translateX(-3px);
}

.pagination-arrow svg,
.reviews-pagination-arrow svg {
    width: 9px;
    height: 14px;
}

.pagination-arrow:hover svg path,
.reviews-pagination-arrow:hover svg path {
    stroke: #f05271;
}

.filter-dropdown {
    display: flex !important;
    align-items: center !important;
}
.download-btn a{
    text-decoration: none;
}