/* ------------------------------------------------------------------- 
 * ## fonts 
 * ------------------------------------------------------------------- */
 @import url("https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 :root {
   --font-1: "ZCOOL XiaoWei", serif;
   --font-2: "DM Sans", sans-serif;
   --font-3: ;
 
   --font-size-logo: 2.5rem;
   --font-size-heading: 3rem;
   --font-size-heading2: 1.2rem;
   --font-size-err1: 0.6rem;
   --font-size-err2: 0.7rem;
   --font-size-err3: 0.9rem;
   --font-size-p: 0.75rem;
   --font-size-normal: 1rem;
   --font-size-second: 0.875rem;
   --font-size-third: 0.7rem;
   --font-size-fourth: 0.6rem;  
   --font-size-fifth: 0.5rem; 
 }
 
 /* ------------------------------------------------------------------- 
   * ## colors
   * ------------------------------------------------------------------- */
 :root {
   /* --bg-color: #030405; */
   --main-color: #e80071; 
    --main-color2: #eb5ca1;
   /* --main-color: #a33cdb;
   --main-color2: #9d68b9; */
 
   --text-color: #f3f4f7;
   --text-color-2: #848383;
   --text-color-3: #b4b4b4;
   --text-color-4: #e2e2e2;
   --second-text-color: #515151;
   --red-text-color: #ea4335;
   --blue-text-color: #316ff6;
   --green-text-color: #28a745;
 
   /* Admin Panel  */
   /* dark theam */
   /* main baground color */
   --bg-color: #121212;
     /* second bagorund color */
   --bg-color-6: #212121;
 
   /* white team */
   /* main baground color */
       /* second bagorund color */
   /* --bg-color: #ffffff;
 
     --bg-color-6: #e9e9e9;
     --text-color: #000000;
     --text-color-2: #626161;
     --text-color-3: #0c0c0c;
     --text-color-4: #000000;
     --second-text-color: #1c1c1c; */
 
   --bg-color-2: #161927;
   --bg-color-3: #232942;
   --bg-color-4: #1a1a1a;
   --bg-color-5: #222222;
   /* second bagorund color */
   /* --bg-color-6: #212121; */
   --bg-color-7: #242424;
   --bg-color-btn-hover: #242d56;
   --bg-color-tbl-hover: #242d5673;
   --bg-color-btn-hover2: #212e64;
   --bg-color-btn-hover3: #1a3294;
   --bg-green-color: #009829;
   --bg-red-color: #e51e1e;
   --bg-blue-color: #3d99f5;
   --bg-purple-color: #6261cc;
 
   --red-text-color: #ff2a2a;
   --red-text-color-2: #cd0000;
   --red-text-color-3: #ff000057;
   --red-text-color-4: #ff0000;
   --red-text-color-5: #fa232334;
 
   --pink-text-color: #ff2fd5;
   --pink-text-color-2: #cd00bc;
   --pink-text-color-3: #ff00cc57;
   --pink-text-color-5: #ff22d32d;
 
   --main-text-color: #ff2e93;
   --main-text-color-2: #e80071;
   --main-text-color-3: #e800705c;
 
   --green-text-color: #3aff33;
   --green-text-color-2: #00ca11;
   --green-text-color-3: #00ff1557;
   --green-text-color-5: #2af83b2c;
 
   --blue-text-color: #389bff;
   --blue-text-color-2: #006ad4;
   --blue-text-color-3: #0080ff58;
   --blue-text-color-5: #208ffe2d;
 
   --yellow-text-color: #ffff38;
   --yellow-text-color-2: #d4bb00;
   --yellow-text-color-3: #fff20058;
   --yellow-text-color-5: #faef222f;
   
   --orange-text-color: #df431b;
   --white-text-color: #83838338;
 
   --pastel-blue-color: #47afd4;
   --pastel-red-color: #e74e4e;
 
   --background-color: #242424;
   --border-color: rgba(255, 255, 255, 0.1);
   --hover-color: #242d56;
   --text-color-muted: #848383;
 }

 body {
    font-family: var(--font-2);
    font-size: var(--font-size-normal);
    color: var(--text-color);
    background-color: var(--bg-color-7);
    height: 100vh;
    overflow-y: hidden;
}

@media (max-width: 1000px) {
    body {
        overflow-y: auto;
    }
}

.sdfsdf {
    color: #7e57c2;
    color: #ec407a;
    color: rgba(232, 55, 146, 0.2);
}

a {
    text-decoration: none;
}

.help-page-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 100px;
    background-color: var(--bg-color);
}

.help-page-nav .logo a {
    font-family: var(--font-1);
    font-size: var(--font-size-logo);
    color: var(--main-color);
}
.other-page-user-contents {
   margin: 60px 40px 0px 40px;
   /* height: 100vh; */
}
.help-container {
    margin: 0;
    padding: 1rem 1rem;
    border-radius: 8px;
    background-color: var(--bg-color);
}

.search-container input {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 3px 10px;
    width: 100%;
    outline: none;
    margin-left: 20px;
    margin-right: 70px;
    border-radius: 4px;
}

.search-container input:focus {
    border-color: var(--main-color);
    box-shadow: none;
    outline: none;
}

.search-container input::placeholder {
    color: var(--text-color-muted);
}
.help-user-session a {
    color: var(--text-color);
    font-size: var(--font-size-second);
}
.nav-bar-last-signup-btn {
    background-color: var(--main-color);
    border-radius: 4px;
    border: none;
    padding: 3px 8px;
    margin: 4px;
}
.profile-section img {
    width: 30px; 
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
}

.quick-link-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    text-align: center;
    border-radius: 4px;
    height: 100%;
    padding: 1rem 0rem;
    cursor: pointer;
}

.quick-link-card:hover {
    transform: translateY(-3px);
    color: var(--main-color);
}

.quick-link-card i {
    font-size: 1.5rem;
}

.accordion-item {
    border: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
    background: var(--background-color);
}

.accordion-button {
    background: var(--background-color) !important;
    color: var(--text-color) !important;
    font-size: var(--font-size-second);
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: var(--main-color) !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e80071'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:focus {
    border-color: var(--main-color);
}

.accordion-body {
    background: var(--background-color);
    color: var(--text-color);
    border: 1px solid var(--text-color-2);
    padding: 2px 8px;
    font-size: var(--font-size-third);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    background: var(--background-color);
    border: 1px solid var(--text-color-2);
    color: var(--text-color-3);
}

.contact-form input::placeholder {
    color: var(--text-color-3);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    background: var(--background-color);
    border-color: var(--main-color);
    box-shadow: none;
    color: var(--text-color-3);
}

.contact-form select option {
    background: var(--background-color);
    color: var(--text-color);
}

.contact-form button {
    background-color: var(--main-color);
    border: none;
    color: var(--text-color);
}

.contact-form button:hover {
    background-color: var(--hover-color);
}

.contact-info i {
    color: var(--main-color);
    font-size: var(--font-size-normal);
    width: 24px;
    cursor: pointer;
}

.contact-info h6 {
    color: var(--text-color);
    font-size: var(--font-size-second);
    margin: 0;
}

.contact-info small {
    font-size: var(--font-size-third);
    color: var(--text-color-muted);
}

.help-page-nav {
    display: flex;
    align-items: center;
    padding: 1rem 6rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.help-page-nav .search-container {
    flex: 1;
    max-width: 600px;
}

.other-page-user-contents {
    background: var(--bg-color-7);
    min-height: 100vh;
    padding: 2rem 0;
}

.help-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.quick-link-card {
    background: var(--background-color);
    border: 1px dashed var(--text-color-2);
    transition: all 0.3s ease;
    text-align: center;
    border-radius: 4px;
    height: 100%;
}

.quick-link-card:hover {
    transform: translateY(-3px);
    border-color: var(--main-color);
}

.quick-link-card i {
    font-size: 1.5rem;
    color: var(--main-color);
    margin-bottom: 0.5rem;
}

.quick-link-card h5 {
    color: var(--text-color);
    margin: 0.5rem 0;
}

.quick-link-card p {
    color: var(--text-color-muted);
    font-size: 0.9rem;
    margin: 0;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    background: var(--background-color);
    border-color: var(--main-color);
    box-shadow: none;
    color: var(--text-color-3);
}

.contact-form select option {
    background: var(--background-color);
    color: var(--text-color);
}

.contact-form button {
    background-color: var(--main-color);
    border: none;
    color: var(--text-color);
}

.contact-form button:hover {
    background-color: var(--hover-color);
}

.contact-info i {
    color: var(--main-color);
    font-size: var(--font-size-normal);
    width: 24px;
    cursor: pointer;
}

.contact-info h6 {
    color: var(--text-color);
    font-size: var(--font-size-second);
    margin: 0;
}

.contact-info small {
    font-size: var(--font-size-third);
    color: var(--text-color-muted);
}

.help-page-nav {
    display: flex;
    align-items: center;
    padding: 1rem 6rem;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
}

.help-page-nav .search-container {
    flex: 1;
    max-width: 600px;
}

.other-page-user-contents {
    background: var(--bg-color-7);
    min-height: 100vh;
    padding: 2rem 0;
}

.help-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.quick-link-card {
    background: var(--background-color);
    border: 1px dashed var(--text-color-2);
    transition: all 0.3s ease;
    text-align: center;
    border-radius: 4px;
    height: 100%;
}

.quick-link-card:hover {
    transform: translateY(-3px);
    border-color: var(--main-color);
}

.quick-link-card i {
    font-size: 1.5rem;
    color: var(--main-color);
    margin-bottom: 0.5rem;
}

.quick-link-card h5 {
    color: var(--text-color);
    margin: 0.5rem 0;
}

.quick-link-card p {
    color: var(--text-color-muted);
    font-size: 0.9rem;
    margin: 0;
}



@media (max-width: 1115px) {
    .search-container input {
        display: none;
    }
    .help-page-nav {
        padding: 0 30px;
    }
    .other-page-user-contents {
        margin: 60px 10px 10px 10px;
    }

}



/* get app
.get-app-content {
    max-width: 600px;
}

h1 {
    font-size: 48px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
}

/* App Features */
.app-features {
    display: flex;
    gap: 30px;
    margin-bottom: 60px;
}

.feature {
    text-align: center;
}

.feature img {
    margin-bottom: 20px;
}

.feature h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.feature p {
    font-size: 14px;
    color: #666;
}

/* Coming Soon Section */
.coming-soon {
    margin-bottom: 40px;
}

.coming-soon h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.coming-soon p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.notify-form {
    display: flex;
    gap: 10px;
}

.notify-form input {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 70%;
    font-size: 16px;
}

.notify-form button {
    padding: 12px 24px;
    background-color: #ff6f61;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.notify-form button:hover {
    background-color: #e65a50;
}

/* App Store Buttons */
.app-store-buttons {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.app-store-button img {
    width: 150px;
    height: auto;
}

/* App Mockup */
.app-mockup img {
    width: 400px;
    height: auto;
} */