@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');

@font-face {
    font-family: 'SuisseIntl-Regular';
    src: url(../font/SuisseIntl-Regular/SuisseIntl-Regular.ttf);
}

:root {
    --main-color: rgba(5, 46, 76, 1);
    --second-color: rgba(226, 151, 52, 1);
    --main-text: rgba(10, 10, 10, 1);
    --second-text: rgba(74, 89, 101, 1);
}

body {
    font-family: 'SuisseIntl-Regular', sans-serif;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

section {
    margin-top: 90px;
}

.container {
    max-width: 1157px;
    margin: 0 auto;
}

ul {
    list-style: none;
    padding: 0;
}

a {
    text-decoration: none;
}

h2 {
    color: var(--main-color);
    text-align: center;
    font-weight: 700;
    font-family: 'SuisseIntl-Regular', sans-serif;
}

.search-members {
    margin-top: 200px;
}

/* icon header */

.std_select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 10px;
    /* Adjust this value based on the width of your icon */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23ababab' d='M831.872 340.864L512 652.672L192.128 340.864a30.59 30.59 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.59 30.59 0 0 0-42.752 0z'/%3E%3C/svg%3E") no-repeat right 10px center;
}

.std_select::-ms-expand {
    display: none;
}

.ep--arrow-down {
    position: absolute;
    top: 43%;
    right: auto;
    left: 20px;
    pointer-events: none;
    transform: translateY(-50%);
    display: none;
}

.formkit--close {
    display: inline-block;
    width: 0.75rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath fill='%23f90637' d='M10 12.5a.47.47 0 0 1-.35-.15l-8-8c-.2-.2-.2-.51 0-.71s.51-.2.71 0l7.99 8.01c.2.2.2.51 0 .71c-.1.1-.23.15-.35.15Z'/%3E%3Cpath fill='%23f90637' d='M2 12.5a.47.47 0 0 1-.35-.15c-.2-.2-.2-.51 0-.71l8-7.99c.2-.2.51-.2.71 0s.2.51 0 .71l-8.01 7.99c-.1.1-.23.15-.35.15'/%3E%3C/svg%3E");
}

.ep--arrow-down {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23ababab' d='M831.872 340.864L512 652.672L192.128 340.864a30.59 30.59 0 0 0-42.752 0a29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728a30.59 30.59 0 0 0-42.752 0z'/%3E%3C/svg%3E");
}

.logos--whatsapp-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 258'%3E%3Cdefs%3E%3ClinearGradient id='logosWhatsappIcon0' x1='50%25' x2='50%25' y1='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%231faf38'/%3E%3Cstop offset='100%25' stop-color='%2360d669'/%3E%3C/linearGradient%3E%3ClinearGradient id='logosWhatsappIcon1' x1='50%25' x2='50%25' y1='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%23f9f9f9'/%3E%3Cstop offset='100%25' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23logosWhatsappIcon0)' d='M5.463 127.456c-.006 21.677 5.658 42.843 16.428 61.499L4.433 252.697l65.232-17.104a123 123 0 0 0 58.8 14.97h.054c67.815 0 123.018-55.183 123.047-123.01c.013-32.867-12.775-63.773-36.009-87.025c-23.23-23.25-54.125-36.061-87.043-36.076c-67.823 0-123.022 55.18-123.05 123.004'/%3E%3Cpath fill='url(%23logosWhatsappIcon1)' d='M1.07 127.416c-.007 22.457 5.86 44.38 17.014 63.704L0 257.147l67.571-17.717c18.618 10.151 39.58 15.503 60.91 15.511h.055c70.248 0 127.434-57.168 127.464-127.423c.012-34.048-13.236-66.065-37.3-90.15C194.633 13.286 162.633.014 128.536 0C58.276 0 1.099 57.16 1.071 127.416m40.24 60.376l-2.523-4.005c-10.606-16.864-16.204-36.352-16.196-56.363C22.614 69.029 70.138 21.52 128.576 21.52c28.3.012 54.896 11.044 74.9 31.06c20.003 20.018 31.01 46.628 31.003 74.93c-.026 58.395-47.551 105.91-105.943 105.91h-.042c-19.013-.01-37.66-5.116-53.922-14.765l-3.87-2.295l-40.098 10.513z'/%3E%3Cpath fill='%23fff' d='M96.678 74.148c-2.386-5.303-4.897-5.41-7.166-5.503c-1.858-.08-3.982-.074-6.104-.074c-2.124 0-5.575.799-8.492 3.984c-2.92 3.188-11.148 10.892-11.148 26.561s11.413 30.813 13.004 32.94c1.593 2.123 22.033 35.307 54.405 48.073c26.904 10.609 32.379 8.499 38.218 7.967c5.84-.53 18.844-7.702 21.497-15.139c2.655-7.436 2.655-13.81 1.859-15.142c-.796-1.327-2.92-2.124-6.105-3.716s-18.844-9.298-21.763-10.361c-2.92-1.062-5.043-1.592-7.167 1.597c-2.124 3.184-8.223 10.356-10.082 12.48c-1.857 2.129-3.716 2.394-6.9.801c-3.187-1.598-13.444-4.957-25.613-15.806c-9.468-8.442-15.86-18.867-17.718-22.056c-1.858-3.184-.199-4.91 1.398-6.497c1.431-1.427 3.186-3.719 4.78-5.578c1.588-1.86 2.118-3.187 3.18-5.311c1.063-2.126.531-3.986-.264-5.579c-.798-1.593-6.987-17.343-9.819-23.64'/%3E%3C/svg%3E");
}

.fluent-emoji--love-letter {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Crect width='28' height='20' x='2' y='6' fill='url(%23f873id8)' rx='2'/%3E%3Crect width='28' height='20' x='2' y='6' fill='url(%23f873id0)' rx='2'/%3E%3Cg filter='url(%23f873idc)'%3E%3Cpath fill='%23ccc1d3' d='M15.643 23.595c.29.17.645.155.93-.023c2.038-1.273 5.43-3.826 6.789-7.23c1.985-4.408-2.688-7.852-5.91-5.32c-.35.275-.825.68-1.13 1.015c-.112.123-.317.134-.432.013c-.367-.388-.956-.944-1.35-1.21c-2.746-1.859-7.73.514-5.6 5.741c.78 2.34 4.59 5.763 6.703 7.014'/%3E%3C/g%3E%3Cpath fill='url(%23f873id1)' d='M2 8a2 2 0 0 1 2-2h1v20H4a2 2 0 0 1-2-2z'/%3E%3Cpath fill='url(%23f873id2)' d='M2 8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2z'/%3E%3Cpath fill='url(%23f873id3)' d='M27 6h1a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-1z'/%3E%3Cpath fill='url(%23f873id4)' d='M2 21h28v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z'/%3E%3Cpath fill='%23c2b4cb' fill-rule='evenodd' d='M2.124 24.695A1.996 1.996 0 0 1 2 24v-.41l10.232-6.512l.536.844z' clip-rule='evenodd'/%3E%3Cpath fill='%23cec4d7' fill-rule='evenodd' d='M30 23.59V24c0 .245-.044.479-.124.695l-10.644-6.773l.536-.844z' clip-rule='evenodd'/%3E%3Cpath fill='%23c5b9c4' fill-rule='evenodd' d='M2.121 7.313A1.996 1.996 0 0 0 2 8v.434l8.223 5.482l.554-.832z' clip-rule='evenodd'/%3E%3Cpath fill='%23d5cfda' fill-rule='evenodd' d='M29.879 7.313c.078.214.121.446.121.687v.434l-8.223 5.482l-.554-.832z' clip-rule='evenodd'/%3E%3Cpath fill='url(%23f873id9)' d='M16.131 22.794c.29.17.645.154.93-.023c2.1-1.31 5.608-3.945 7.011-7.46c2.046-4.544-2.77-8.093-6.09-5.484c-.364.286-.858.707-1.172 1.054a.299.299 0 0 1-.431.013c-.379-.4-.99-.978-1.399-1.255c-2.83-1.915-7.968.53-5.77 5.918c.803 2.416 4.746 5.955 6.921 7.237'/%3E%3Cpath fill='url(%23f873ida)' d='M16.131 22.794c.29.17.645.154.93-.023c2.1-1.31 5.608-3.945 7.011-7.46c2.046-4.544-2.77-8.093-6.09-5.484c-.364.286-.858.707-1.172 1.054a.299.299 0 0 1-.431.013c-.379-.4-.99-.978-1.399-1.255c-2.83-1.915-7.968.53-5.77 5.918c.803 2.416 4.746 5.955 6.921 7.237'/%3E%3Cpath fill='url(%23f873id5)' d='M16.131 22.794c.29.17.645.154.93-.023c2.1-1.31 5.608-3.945 7.011-7.46c2.046-4.544-2.77-8.093-6.09-5.484c-.364.286-.858.707-1.172 1.054a.299.299 0 0 1-.431.013c-.379-.4-.99-.978-1.399-1.255c-2.83-1.915-7.968.53-5.77 5.918c.803 2.416 4.746 5.955 6.921 7.237'/%3E%3Cpath fill='url(%23f873idb)' fill-opacity='0.75' d='M16.131 22.794c.29.17.645.154.93-.023c2.1-1.31 5.608-3.945 7.011-7.46c2.046-4.544-2.77-8.093-6.09-5.484c-.364.286-.858.707-1.172 1.054a.299.299 0 0 1-.431.013c-.379-.4-.99-.978-1.399-1.255c-2.83-1.915-7.968.53-5.77 5.918c.803 2.416 4.746 5.955 6.921 7.237'/%3E%3Cg filter='url(%23f873idd)'%3E%3Cpath stroke='url(%23f873id6)' stroke-linecap='round' stroke-opacity='0.6' d='M13.063 10.813a6.443 6.443 0 0 1 3.103 1.996c.273.315.396.728.396 1.144v4.235'/%3E%3C/g%3E%3Cg filter='url(%23f873ide)'%3E%3Cpath stroke='url(%23f873id7)' stroke-linecap='round' stroke-opacity='0.6' d='M22.063 10.625c1.53 1.031 1.5 2.719 1.343 3.406'/%3E%3C/g%3E%3Cg filter='url(%23f873idf)' opacity='0.5'%3E%3Cpath fill='%23fff' d='M27.959 7.313h1V23.5h-1z'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='f873id0' x1='-.875' x2='14.375' y1='-.625' y2='16' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23e3c3c4' stop-opacity='0.6'/%3E%3Cstop offset='1' stop-color='%23e1c0c2' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f873id1' x1='2' x2='5' y1='16' y2='16' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23e3c3c4'/%3E%3Cstop offset='1' stop-color='%23e1c0c2' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f873id2' x1='16' x2='16' y1='6' y2='7.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23dedede'/%3E%3Cstop offset='1' stop-color='%23e8e4e8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f873id3' x1='30' x2='27' y1='16' y2='16' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23dedede'/%3E%3Cstop offset='1' stop-color='%23e8e4e8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f873id4' x1='16' x2='16' y1='21' y2='26' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23dcc8ef' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23c79be7'/%3E%3C/linearGradient%3E%3ClinearGradient id='f873id5' x1='16.563' x2='16.563' y1='13.75' y2='24.508' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.151' stop-color='%23c12372' stop-opacity='0'/%3E%3Cstop offset='.895' stop-color='%23c12372'/%3E%3C/linearGradient%3E%3ClinearGradient id='f873id6' x1='15.656' x2='18.619' y1='10.156' y2='11.252' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ff9e75'/%3E%3Cstop offset='1' stop-color='%23ff9e75' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f873id7' x1='22.625' x2='25.588' y1='10.156' y2='11.252' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23ff9e75'/%3E%3Cstop offset='1' stop-color='%23ff9e75' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='f873id8' cx='0' cy='0' r='1' gradientTransform='matrix(-26.00018 20.49983 -28.69971 -36.40018 24 9.5)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23f3eff9'/%3E%3Cstop offset='.48' stop-color='%23e9e2ea'/%3E%3Cstop offset='.676' stop-color='%23e8d2f5'/%3E%3C/radialGradient%3E%3CradialGradient id='f873id9' cx='0' cy='0' r='1' gradientTransform='matrix(0 14.3125 -27.6487 0 19.271 11.693)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23f12e52'/%3E%3Cstop offset='.596' stop-color='%23ff3b79'/%3E%3Cstop offset='1' stop-color='%23ff4ec6'/%3E%3C/radialGradient%3E%3CradialGradient id='f873ida' cx='0' cy='0' r='1' gradientTransform='matrix(-11.9374 9.00005 -16.85803 -22.36 20.563 12.5)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.483' stop-color='%23c12372' stop-opacity='0'/%3E%3Cstop offset='.834' stop-color='%23c12372'/%3E%3C/radialGradient%3E%3CradialGradient id='f873idb' cx='0' cy='0' r='1' gradientTransform='matrix(0 -14 20.5463 0 16.313 21.75)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.719' stop-color='%23ff7033' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ff7033'/%3E%3C/radialGradient%3E%3Cfilter id='f873idc' width='19.412' height='17.553' x='6.425' y='8.162' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_6990_5054' stdDeviation='1'/%3E%3C/filter%3E%3Cfilter id='f873idd' width='8.5' height='12.375' x='10.562' y='8.312' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_6990_5054' stdDeviation='1'/%3E%3C/filter%3E%3Cfilter id='f873ide' width='6.414' height='8.406' x='19.562' y='8.125' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_6990_5054' stdDeviation='1'/%3E%3C/filter%3E%3Cfilter id='f873idf' width='6' height='21.187' x='25.459' y='4.813' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_6990_5054' stdDeviation='1.25'/%3E%3C/filter%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
}

.ic--outline-plus {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23363636' d='M19 12.998h-6v6h-2v-6H5v-2h6v-6h2v6h6z'/%3E%3C/svg%3E");
}

.openmoji--star {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 72'%3E%3Cpath fill='%23fcea2b' d='M35.993 10.736L27.791 27.37L9.439 30.044l13.285 12.94l-3.128 18.28l16.412-8.636l16.419 8.624l-3.142-18.278l13.276-12.95l-18.354-2.66z'/%3E%3Cpath fill='none' stroke='%23c4c4c4' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.85' d='M35.993 10.736L27.791 27.37L9.439 30.044l13.285 12.94l-3.128 18.28l16.412-8.636l16.419 8.624l-3.142-18.278l13.276-12.95l-18.354-2.66z'/%3E%3C/svg%3E");
}

.streamline--recycle-bin-2 {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' d='M1 3.5h12m-10.5 0h9v9a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1zm2 0V3a2.5 2.5 0 1 1 5 0v.5m-4 3.001v4.002m3-4.002v4.002'/%3E%3C/svg%3E");
}

.carbon--send-alt-filled {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='%23f7bf5f' d='M27.71 4.29a1 1 0 0 0-1.05-.23l-22 8a1 1 0 0 0 0 1.87l8.59 3.43L19.59 11L21 12.41l-6.37 6.37l3.44 8.59A1 1 0 0 0 19 28a1 1 0 0 0 .92-.66l8-22a1 1 0 0 0-.21-1.05'/%3E%3C/svg%3E");
}

.noto-v1--question-mark {
    display: inline-block;
    width: 10px;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%2340c0e7' d='M49.14 82.91v-5.76c0-2.65.27-5.04.81-7.2c.55-2.15 1.38-4.2 2.49-6.15c1.11-1.94 2.55-3.83 4.32-5.68c1.76-1.83 3.89-3.74 6.38-5.71c2.18-1.71 4.02-3.24 5.53-4.59c1.5-1.35 2.72-2.69 3.65-4c.94-1.33 1.61-2.71 2.03-4.16c.41-1.45.62-3.14.62-5.06c0-2.95-1-5.39-3-7.31s-5.04-2.88-9.14-2.88c-3.58 0-7.43.75-11.56 2.26c-4.12 1.51-8.39 3.35-12.79 5.53l-7.93-17.19c2.23-1.3 4.65-2.53 7.27-3.7c2.62-1.17 5.34-2.2 8.17-3.11a65.89 65.89 0 0 1 8.6-2.14c2.91-.52 5.76-.78 8.56-.78c5.29 0 10.06.64 14.31 1.91c4.26 1.27 7.86 3.13 10.82 5.56c2.96 2.44 5.22 5.4 6.81 8.87c1.58 3.47 2.37 7.44 2.37 11.9c0 3.27-.36 6.19-1.09 8.75c-.73 2.56-1.81 4.95-3.23 7.16c-1.43 2.2-3.22 4.33-5.37 6.38s-4.66 4.21-7.51 6.49c-2.18 1.71-3.95 3.2-5.33 4.47c-1.38 1.27-2.45 2.48-3.23 3.62c-.78 1.15-1.31 2.32-1.6 3.54c-.29 1.22-.43 2.66-.43 4.32v4.67H49.14zm-2.57 26.6c0-2.44.35-4.5 1.05-6.19c.7-1.68 1.67-3.04 2.92-4.08c1.24-1.04 2.71-1.79 4.4-2.26c1.68-.46 3.48-.7 5.41-.7c1.82 0 3.54.24 5.18.7c1.63.46 3.07 1.22 4.32 2.26c1.24 1.04 2.23 2.4 2.96 4.08c.73 1.69 1.09 3.75 1.09 6.19c0 2.33-.36 4.33-1.09 5.99c-.73 1.66-1.71 3.03-2.96 4.12a11.474 11.474 0 0 1-4.32 2.37c-1.64.5-3.36.74-5.18.74c-1.92 0-3.72-.24-5.41-.74c-1.69-.49-3.16-1.28-4.4-2.37c-1.24-1.09-2.21-2.46-2.92-4.12c-.7-1.66-1.05-3.66-1.05-5.99'/%3E%3C/svg%3E");
}

.ant-design--ellipsis-outlined {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23919191' d='M176 511a56 56 0 1 0 112 0a56 56 0 1 0-112 0m280 0a56 56 0 1 0 112 0a56 56 0 1 0-112 0m280 0a56 56 0 1 0 112 0a56 56 0 1 0-112 0'/%3E%3C/svg%3E");
}

.mdi--denied {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12S6.5 2 12 2m0 2c-1.9 0-3.6.6-4.9 1.7l11.2 11.2c1-1.4 1.7-3.1 1.7-4.9c0-4.4-3.6-8-8-8m4.9 14.3L5.7 7.1C4.6 8.4 4 10.1 4 12c0 4.4 3.6 8 8 8c1.9 0 3.6-.6 4.9-1.7'/%3E%3C/svg%3E");
}

.ep--close {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23ffffff' d='M764.288 214.592L512 466.88L259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512L214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z'/%3E%3C/svg%3E");
}

.material-symbols-light--close {
    display: inline-block;
    width: 1.30em;
    height: 1.30em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e10909' d='m6.4 18.308l-.708-.708l5.6-5.6l-5.6-5.6l.708-.708l5.6 5.6l5.6-5.6l.708.708l-5.6 5.6l5.6 5.6l-.708.708l-5.6-5.6z'/%3E%3C/svg%3E");
}

.icon-park--correct {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%233ab44b' fill-rule='evenodd' stroke='%233ab44b' stroke-linecap='round' stroke-linejoin='round' stroke-width='0.5' d='M4 24L9 19L19 29L39 9L44 14L19 39L4 24Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.logos--facebook {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%231877f2' d='M256 128C256 57.308 198.692 0 128 0S0 57.308 0 128c0 63.888 46.808 116.843 108 126.445V165H75.5v-37H108V99.8c0-32.08 19.11-49.8 48.348-49.8C170.352 50 185 52.5 185 52.5V84h-16.14C152.959 84 148 93.867 148 103.99V128h35.5l-5.675 37H148v89.445c61.192-9.602 108-62.556 108-126.445'/%3E%3Cpath fill='%23fff' d='m177.825 165l5.675-37H148v-24.01C148 93.866 152.959 84 168.86 84H185V52.5S170.352 50 156.347 50C127.11 50 108 67.72 108 99.8V128H75.5v37H108v89.445A129 129 0 0 0 128 256a129 129 0 0 0 20-1.555V165z'/%3E%3C/svg%3E");
}

.skill-icons--instagram {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cg fill='none'%3E%3Crect width='256' height='256' fill='url(%23skillIconsInstagram0)' rx='60'/%3E%3Crect width='256' height='256' fill='url(%23skillIconsInstagram1)' rx='60'/%3E%3Cpath fill='%23fff' d='M128.009 28c-27.158 0-30.567.119-41.233.604c-10.646.488-17.913 2.173-24.271 4.646c-6.578 2.554-12.157 5.971-17.715 11.531c-5.563 5.559-8.98 11.138-11.542 17.713c-2.48 6.36-4.167 13.63-4.646 24.271c-.477 10.667-.602 14.077-.602 41.236s.12 30.557.604 41.223c.49 10.646 2.175 17.913 4.646 24.271c2.556 6.578 5.973 12.157 11.533 17.715c5.557 5.563 11.136 8.988 17.709 11.542c6.363 2.473 13.631 4.158 24.275 4.646c10.667.485 14.073.604 41.23.604c27.161 0 30.559-.119 41.225-.604c10.646-.488 17.921-2.173 24.284-4.646c6.575-2.554 12.146-5.979 17.702-11.542c5.563-5.558 8.979-11.137 11.542-17.712c2.458-6.361 4.146-13.63 4.646-24.272c.479-10.666.604-14.066.604-41.225s-.125-30.567-.604-41.234c-.5-10.646-2.188-17.912-4.646-24.27c-2.563-6.578-5.979-12.157-11.542-17.716c-5.562-5.562-11.125-8.979-17.708-11.53c-6.375-2.474-13.646-4.16-24.292-4.647c-10.667-.485-14.063-.604-41.23-.604zm-8.971 18.021c2.663-.004 5.634 0 8.971 0c26.701 0 29.865.096 40.409.575c9.75.446 15.042 2.075 18.567 3.444c4.667 1.812 7.994 3.979 11.492 7.48c3.5 3.5 5.666 6.833 7.483 11.5c1.369 3.52 3 8.812 3.444 18.562c.479 10.542.583 13.708.583 40.396c0 26.688-.104 29.855-.583 40.396c-.446 9.75-2.075 15.042-3.444 18.563c-1.812 4.667-3.983 7.99-7.483 11.488c-3.5 3.5-6.823 5.666-11.492 7.479c-3.521 1.375-8.817 3-18.567 3.446c-10.542.479-13.708.583-40.409.583c-26.702 0-29.867-.104-40.408-.583c-9.75-.45-15.042-2.079-18.57-3.448c-4.666-1.813-8-3.979-11.5-7.479s-5.666-6.825-7.483-11.494c-1.369-3.521-3-8.813-3.444-18.563c-.479-10.542-.575-13.708-.575-40.413c0-26.704.096-29.854.575-40.396c.446-9.75 2.075-15.042 3.444-18.567c1.813-4.667 3.983-8 7.484-11.5c3.5-3.5 6.833-5.667 11.5-7.483c3.525-1.375 8.819-3 18.569-3.448c9.225-.417 12.8-.542 31.437-.563zm62.351 16.604c-6.625 0-12 5.37-12 11.996c0 6.625 5.375 12 12 12s12-5.375 12-12s-5.375-12-12-12zm-53.38 14.021c-28.36 0-51.354 22.994-51.354 51.355c0 28.361 22.994 51.344 51.354 51.344c28.361 0 51.347-22.983 51.347-51.344c0-28.36-22.988-51.355-51.349-51.355zm0 18.021c18.409 0 33.334 14.923 33.334 33.334c0 18.409-14.925 33.334-33.334 33.334c-18.41 0-33.333-14.925-33.333-33.334c0-18.411 14.923-33.334 33.333-33.334'/%3E%3Cdefs%3E%3CradialGradient id='skillIconsInstagram0' cx='0' cy='0' r='1' gradientTransform='matrix(0 -253.715 235.975 0 68 275.717)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fd5'/%3E%3Cstop offset='.1' stop-color='%23fd5'/%3E%3Cstop offset='.5' stop-color='%23ff543e'/%3E%3Cstop offset='1' stop-color='%23c837ab'/%3E%3C/radialGradient%3E%3CradialGradient id='skillIconsInstagram1' cx='0' cy='0' r='1' gradientTransform='matrix(22.25952 111.2061 -458.39518 91.75449 -42.881 18.441)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233771c8'/%3E%3Cstop offset='.128' stop-color='%233771c8'/%3E%3Cstop offset='1' stop-color='%2360f' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
}

.logos--twitter {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 209'%3E%3Cpath fill='%2355acee' d='M256 25.45a105 105 0 0 1-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.2 105.2 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.3 52.3 0 0 1-23.79-6.57q-.004.33-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.6 52.6 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435q0-3.417-.152-6.795A106.8 106.8 0 0 0 256 25.45'/%3E%3C/svg%3E");
}

.logos--youtube-icon {
    display: inline-block;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 180'%3E%3Cpath fill='%23f00' d='M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134'/%3E%3Cpath fill='%23fff' d='m102.421 128.06l66.328-38.418l-66.328-38.418z'/%3E%3C/svg%3E");
}

.solar--heart-linear {
    display: inline-block;
    width: 1.30em;
    height: 1.30em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23beacac' d='m8.962 18.91l.464-.588zM12 5.5l-.54.52a.75.75 0 0 0 1.08 0zm3.038 13.41l.465.59zm-5.612-.588C7.91 17.127 6.253 15.96 4.938 14.48C3.65 13.028 2.75 11.335 2.75 9.137h-1.5c0 2.666 1.11 4.7 2.567 6.339c1.43 1.61 3.254 2.9 4.68 4.024zM2.75 9.137c0-2.15 1.215-3.954 2.874-4.713c1.612-.737 3.778-.541 5.836 1.597l1.08-1.04C10.1 2.444 7.264 2.025 5 3.06C2.786 4.073 1.25 6.425 1.25 9.137zM8.497 19.5c.513.404 1.063.834 1.62 1.16c.557.325 1.193.59 1.883.59v-1.5c-.31 0-.674-.12-1.126-.385c-.453-.264-.922-.628-1.448-1.043zm7.006 0c1.426-1.125 3.25-2.413 4.68-4.024c1.457-1.64 2.567-3.673 2.567-6.339h-1.5c0 2.198-.9 3.891-2.188 5.343c-1.315 1.48-2.972 2.647-4.488 3.842zM22.75 9.137c0-2.712-1.535-5.064-3.75-6.077c-2.264-1.035-5.098-.616-7.54 1.92l1.08 1.04c2.058-2.137 4.224-2.333 5.836-1.596c1.659.759 2.874 2.562 2.874 4.713zm-8.176 9.185c-.526.415-.995.779-1.448 1.043c-.452.264-.816.385-1.126.385v1.5c.69 0 1.326-.265 1.883-.59c.558-.326 1.107-.756 1.62-1.16z'/%3E%3C/svg%3E");
}

.icon-park--messages-one {
    display: inline-block;
    width: 1.30em;
    height: 1.30em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke-width='4.05'%3E%3Cpath fill='%232f88ff' stroke='%233d87ff' d='M39 6H9C7.34315 6 6 7.34315 6 9V39C6 40.6569 7.34315 42 9 42H39C40.6569 42 42 40.6569 42 39V9C42 7.34315 40.6569 6 39 6Z'/%3E%3Cpath fill='%2343ccf8' stroke='%23fff' stroke-linejoin='round' d='M34 23C34 26.8624 31.2967 30.1565 27.5 31.4334C26.4107 31.7997 25.2313 32 24 32C20 32 15 34 15 34L16.1323 31.5543C16.6952 30.3384 16.336 28.9248 15.5616 27.8314C14.5729 26.4356 14 24.778 14 23C14 18.0294 18.4772 14 24 14C29.5228 14 34 18.0294 34 23Z'/%3E%3C/g%3E%3C/svg%3E");
}

.solar--heart-filled {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 80%;
    -webkit-border-radius: 80%;
    -moz-border-radius: 80%;
    -ms-border-radius: 80%;
    -o-border-radius: 80%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e10505' d='M6.979 3.074a6 6 0 0 1 4.988 1.425l.037.033l.034-.03a6 6 0 0 1 4.733-1.44l.246.036a6 6 0 0 1 3.364 10.008l-.18.185l-.048.041l-7.45 7.379a1 1 0 0 1-1.313.082l-.094-.082l-7.493-7.422A6 6 0 0 1 6.979 3.074'/%3E%3C/svg%3E");
}

.fxemoji--noentrysign {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ff473e' d='M255.107 1.894C114.768 1.894 1.001 115.661 1.001 256s113.767 254.106 254.106 254.106S509.213 396.339 509.213 256S395.445 1.894 255.107 1.894M124.924 386.183C90.151 351.41 71.001 305.176 71.001 256c0-37.761 11.303-73.78 32.289-104.214l256.03 256.031c-30.434 20.986-66.453 32.289-104.214 32.289c-49.176 0-95.409-19.151-130.182-53.923m283.54-28.218L153.141 102.643c29.952-20.004 65.133-30.749 101.966-30.749c49.176 0 95.41 19.15 130.183 53.923c34.773 34.773 53.923 81.006 53.923 130.183c0 36.833-10.745 72.013-30.749 101.965'/%3E%3C/svg%3E");
}

.weui--report-problem-filled {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e4f21c' fill-rule='evenodd' d='m21.268 21.053l-18.536.001a1 1 0 0 1-.866-1.5L11.132 3.5a1 1 0 0 1 1.732 0l9.27 16.053a1 1 0 0 1-.866 1.5M11.248 9.545l.116 5.666h1.272l.117-5.666zm.75 8.572c.48 0 .855-.369.855-.832s-.375-.826-.856-.826a.83.83 0 0 0-.85.826c0 .463.375.832.85.832z'/%3E%3C/svg%3E");
}

.tabler--clock-hour-7 {
    display: inline-block;
    width: 1.70em;
    height: 1.38em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%237d7878' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.85' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m9 0l-2 3m2-8v5'/%3E%3C/svg%3E");
}

.noto--pink-heart {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23ff94bd' d='M93.99 8.97c-21.91 0-29.96 22.39-29.96 22.39s-7.94-22.39-30-22.39c-16.58 0-35.48 13.14-28.5 43.01s58.56 67.08 58.56 67.08s51.39-37.21 58.38-67.08c6.98-29.87-10.56-43.01-28.48-43.01'/%3E%3Cpath fill='%23ff61a9' d='M30.65 11.2c17.2 0 25.74 18.49 28.5 25.98c.39 1.07 1.88 1.1 2.33.06L64 31.35C60.45 20.01 50.69 8.97 34.03 8.97c-6.9 0-14.19 2.28-19.86 7.09c5.01-3.29 10.88-4.86 16.48-4.86m63.34-2.23c-5.29 0-9.77 1.54-13.53 3.85c2.64-1.02 5.56-1.62 8.8-1.62c16.21 0 30.72 12.29 24.17 40.7c-5.62 24.39-38.46 53.98-48.49 65.27c-.64.72-.86 1.88-.86 1.88s51.39-37.21 58.38-67.08c6.99-29.86-11.89-43-28.47-43'/%3E%3Cpath fill='%23f9d2e1' d='M17.04 24.82c3.75-4.68 10.45-8.55 16.13-4.09c3.07 2.41 1.73 7.35-1.02 9.43c-4 3.04-7.48 4.87-9.92 9.63c-1.46 2.86-2.34 5.99-2.79 9.18c-.18 1.26-1.83 1.57-2.45.46c-4.22-7.48-5.42-17.78.05-24.61m60.12 9.84c-1.76 0-3-1.7-2.36-3.34c1.19-3.02 2.73-5.94 4.58-8.54c2.74-3.84 7.95-6.08 11.25-3.75c3.38 2.38 2.94 7.14.57 9.44c-5.09 4.93-11.51 6.19-14.04 6.19'/%3E%3C/svg%3E");
}

.basil--arrow-left-solid {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23080609' d='M11.03 8.53a.75.75 0 1 0-1.06-1.06l-4 4a.748.748 0 0 0 0 1.06l4 4a.75.75 0 1 0 1.06-1.06l-2.72-2.72H18a.75.75 0 0 0 0-1.5H8.31z'/%3E%3C/svg%3E");
}

.gravity-ui--bars-unaligned {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23080609' fill-rule='evenodd' d='M2.75 2.5a.75.75 0 0 0 0 1.5h10.5a.75.75 0 0 0 0-1.5zM4 8a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 8m-4 4.75A.75.75 0 0 1 .75 12h10.5a.75.75 0 0 1 0 1.5H.75a.75.75 0 0 1-.75-.75' clip-rule='evenodd'/%3E%3C/svg%3E");
}


.solar--heart-linear {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 80%;
    -webkit-border-radius: 80%;
    -moz-border-radius: 80%;
    -ms-border-radius: 80%;
    -o-border-radius: 80%;
}

.solar--heart-linear.clicked {
    background: rgba(255, 0, 0, 0.457);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

/* end icon */
.bars {
    margin-top: 11px;
    margin-right: 10px;
    width: 57px;
    height: 39px;
    border: none;
    outline: none;
    background-color: white;
    /* border: 1px solid; */
    box-shadow: 1px 1px 5px #ddd;
    margin-top: 10vh;
}

.bars-3 {
    margin-top: -211px;
    margin-right: 10px;
    width: 57px;
    height: 39px;
    border: none;
    outline: none;
    background-color: white;
    /* border: 1px solid; */
    box-shadow: 1px 1px 5px #ddd;
    margin-top: 6vh;
}

#bars-section {
    position: fixed;
    width: 280px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    padding: 20px;
    margin-top: 4px;
    height: 100%;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    /* transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out; */
    z-index: 9999999999999999999999999999999;
}

#bars-section.show {
    right: 0;
}

.status--online-seciton {
    background: #35c313;
}

.bars-2.status--online-seciton {
    border: 3px solid #fffffc;
    border-radius: 50%;
    display: block;
    height: 18px;
    bottom: 641px;
    left: 161px;
    position: absolute;
    width: 18px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.user-info__avatar-seciton figure img {
    border-radius: 50%;
    /*height: 30%;
    */
    background-color: #f2f2f2;
    object-fit: cover;
    width: 20%;
    padding: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

ul.seciton-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: white;
    box-shadow: 1px 1px 5px #ddd;
}

.header-2 {
    background-color: antiquewhite;
    padding: 0 10px;
    width: 100%;
    box-shadow: 1px 1px 8px #c7c7c7ee;
    margin-top: -50px;
    position: fixed;
    z-index: 999999999;
    top: 0;
}

.header__login-box ul li {
    list-style: none;
}

.header__login-box ul li a {
    text-decoration: none;
}

.login-btn {
    width: 100%;
    height: 30px;
    border: none;
    outline: none;
    color: #fff;
    background-color: rgb(5, 46, 76);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
    padding: 10px 20px;
}

.login-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}




.header__login-box .sign-up-btn {
    width: 100%;
    height: 30px;
    border: none;
    outline: none;
    color: #fff;
    background-color: var(--second-color);
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 5px;
    margin-top: 20px;
    padding: 10px 20px;
}

.header__login-box .sign-up-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}


.header-2 .header__login-box,
.header-2 .header__logo,
.header-2 .header__language-box {
    display: flex;
    align-items: center;
}

.header-2 .header__login-box ul,
.header-2 .header__language-box .options ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}


.header__logo a {
    display: block;
    padding-bottom: 25px;
    position: relative;
    transition: .2s ease-in;
    width: 60px;
    -webkit-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -o-transition: .2s ease-in;
}

.header__logo img {
    display: block;
    height: auto;
    transition: .2s ease-in;
    width: 120px;
    -webkit-transition: .2s ease-in;
    -moz-transition: .2s ease-in;
    -ms-transition: .2s ease-in;
    -o-transition: .2s ease-in;
    padding-top: 50px;
}

.header__language-box .language .handler {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgb(5, 46, 76);
    border-radius: 5px;
    color: #ffffff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 17px;
    font-weight: 700;
    height: 34px;
    line-height: normal;
    padding: 10px 20px;
    margin-top: 10px;
    position: relative;
    width: 80%;
    margin-left: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
}



[dir=rtl] .header__language-box .language .handler .flag {
    display: block;
    margin-left: 8px;
    margin-right: 0;
    position: relative;
    top: 1px;
    width: 23px;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    left: 0;
    display: none;
}


.header__language-box .language .handler i {
    font-style: normal;
    padding-top: 0;
}

.header__language-box .language .handler i {
    font-style: normal;
    padding-top: 0;
}

.header__language-box .language .options {
    left: 50%;
    top: 53px;
    opacity: 0;
    position: absolute;
    -webkit-transform: translate(-50%, 90%);
    transform: translate(-50%, 90%);
    transition: opacity .3s, visibility 0s .3s, -webkit-transform .3s;
    transition: opacity .3s, transform .3s, visibility 0s .3s;
    transition: opacity .3s, transform .3s, visibility 0s .3s, -webkit-transform .3s;
    visibility: hidden;
    width: 100%;
    z-index: 40;
    -moz-transform: translate(-50%, 90%);
    -ms-transform: translate(-50%, 90%);
    -o-transform: translate(-50%, 90%);
    -webkit-transition: opacity .3s, transform .3s, visibility 0s .3s, -webkit-transform .3s;
    -moz-transition: opacity .3s, transform .3s, visibility 0s .3s, -webkit-transform .3s;
    -ms-transition: opacity .3s, transform .3s, visibility 0s .3s, -webkit-transform .3s;
    -o-transition: opacity .3s, transform .3s, visibility 0s .3s, -webkit-transform .3s;
}

.header__language-box .language .options ul {
    background-color: var(--main-color);
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    gap: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}


.header__language-box .language .options ul li i {
    color: #fff;
    font-size: 13px;
}

.header__language-box .language:hover .options {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
}

.header__language-box {
    position: relative;
    display: inline-block;
}

.header__language-box .options {
    display: none;
    position: absolute;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    margin-top: 18px;
    z-index: 1;
}

.header__language-box .options ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.header__language-box .options ul li {
    padding: 8px 16px;
}

.header__language-box .options ul li a img {
    width: 20px;
    height: 20px;
}

.header__language-box .language:hover .options {
    display: block;
}

/* /* home-hero  start* */

.home-hero {
    /* background-image: url(../images/introOne.png); */
    /* background-repeat: no-repeat;
    background-position: center; */
    height: 84vh;
    margin-top: 63px !important;
    background-color: antiquewhite;
}

.img-panner img {
    width: 100%;
}

/*
.text-home-hero {
    margin-top: 280px;
} */

.text-home-hero h1 {
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 20px;
    line-height: 80px;
    color: var(--second-text);
}

.text-home-hero p {
    font-size: 20px;
    font-weight: 500;
    color: var(--main-color);
}

/* end home hero */

/* start .advance-search */

.advance-search__content {
    background: rgba(5, 46, 76, 0.756);
    border: 1px solid rgba(255, 255, 255, 0);
    color: rgb(251, 251, 251);
    padding: 40px 78px 46px 110px;
    position: relative;
    margin-top: -180px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.advance-search {
    position: relative;
    z-index: 40;
}

.advance-search_head_content {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    margin-top: -30px;
    width: 100%;
    padding: 5px 20px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}


.advance-search__content h3 {
    color: #ffffff;
    padding: 10px;
    float: left;
    font-size: 24px;
    font-weight: 700;
    line-height: 50px;
}


.filter--primary .btn {
    margin: 10px;
    padding: 10px 20px;
    font-size: 16px;
    color: rgb(255, 252, 252);
    /* border-color: #150b0b; */
}

.advance-search__content .filter--primary .btn {
    min-width: 50px;
    padding: 10px 40px;
    margin-bottom: 30px;
    background-color: var(--second-color);
    border: none;
    border-radius: 30px !important;
    margin-left: 0 !important;
    -webkit-border-radius: 30px !important;
    -moz-border-radius: 30px !important;
    -ms-border-radius: 30px !important;
    -o-border-radius: 30px !important;
}

.advance-search__content .filter--primary .btn:hover {
    background-color: var(--main-color);
    color: #fff;
}

.advance-search__content .filter--primary .active {
    background-color: var(--main-color) !important;
    color: #fff;
}

.search-options-for-mobile .btn--more {
    background: #f5f7f9;
    border-radius: 50px;
    box-shadow: inset 0 0 0 1px rgba(165, 165, 165, 0.09);
    color: #394659;
    font-family: inherit;
    font-size: 18px;
    margin-top: 20px;
    font-weight: 700;
    height: 41px;
    line-height: 41px;
    text-align: center !important;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    padding: 0 20px;
}

.btn {
    transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
}

.btn-2 {
    background-color: var(--second-color);
    border: none;
    border-radius: 5px;
    padding: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.btn-2:hover {
    background-color: var(--main-color);
    color: #fff;
}

.bootstrap-select>select.mobile-device {
    display: block !important;
    left: 0;
    top: 0;
    width: 97% !important;
    z-index: 2 !important;
    border: none;
    border-radius: 10px !important;
    color: #a0828299;
    background: rgb(255, 255, 255) !important;
    border: 1px solid rgba(255, 255, 255, 0);
    color: rgb(119 119 119);
    padding: 0 10px;
    display: block;
    height: 100%;
    line-height: calc(2.25rem);
    font-size: 12px;
    font-weight: 600;
    margin-right: 5px;
    height: 41px;
    outline: none;
    -webkit-border-radius: 10px !important;
    -moz-border-radius: 10px !important;
    -ms-border-radius: 10px !important;
    -o-border-radius: 10px !important;
    margin-bottom: 25px;
}

.advance-search__options label {
    color: #ffffff;
    display: block;
    font-size: 17px;
    font-weight: 700;
    height: auto;
    line-height: normal;
    padding-bottom: 20px;
    padding-right: 5px;
}

.advance-search__content .filter--primary .btn {
    min-width: 50px;
    padding: 10px 20px;
    margin-bottom: 30px;
}

input[type="radio"] {
    display: none;
}

.irs-grid {
    bottom: 0;
    display: none;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}

.std_select_big.bootstrap-select .dropdown-toggle {
    display: none;
}

.slidecontainer {
    width: 100%;
}



input[type=submit].btn {
    color: #101010;
    min-width: 150px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.advance-search__options .btn-danger {
    color: #fff;
    margin-top: -15px;
    min-width: 182px;
}

.price-range-slider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 0px;
}

.price-range-slider-bar {
    position: relative;
    width: 90%;
    height: 1px;
    background: #ddd;
    margin: 0 10px;
    display: flex;
    align-items: center;
}

.price-range-slider-bar input[type="range"] {
    position: absolute;
    width: 100%;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
}

.price-range-slider-bar input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: var(--second-color);
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid var(--second-color);
}

.price-range-slider-bar input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    height: 20px;
    width: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #007bff;
}

.price-range-slider-bar-inner {
    position: absolute;
    height: 100%;
    background: #007bff;
    z-index: -1;
}

.main-value,
.max-value {
    display: flex;
    align-items: center;
}

input[type="number"] {
    /* width: 50px; */
    height: 30px;
    text-align: center;
    font-size: 1em;
    /* border: 1px solid #ffffff; */
    /* color: #ffffff; */
    border-radius: 4px;
    padding: px;
    margin: 0 0px;
}

/* end .advance-search*/

/* start ..signup-section*/
.signup-section {
    margin-top: -30px;
}

.signup-section__content {
    margin: 0px 16% 30px 0;
    margin: 0 auto;
    padding: 80px 50px;
    position: relative;
    text-align: center;
    z-index: 10;
}

.signup-section__content h2 {
    color: var(--second-text);
    font-size: 40px;
    font-weight: 700;
    line-height: 80px;
}

.signup-section__content p {
    color: #101010;
    font-size: 15px;
    font-weight: 500;
    line-height: 30px;
}

.signup-section .btn-3 {
    background-color: var(--second-color);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin-top: 40px;
    padding: 10px 40px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.signup-section .btn-3:hover {
    background-color: var(--main-color);
    color: #fff;
}

.img-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--main-color);
    font-weight: 600;
}

.text-slid {
    margin-top: 10px;
}

/* end..signup-section*/

/*start latest-members */

.latest-members h2 {
    padding-bottom: 52px;
    text-align: center;
    color: var(--second-text);
    font-size: 40px;
    font-family: 'SuisseIntl-Regular', sans-serif;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 30px;
}

.swiper-3 {
    width: 100%;
    height: 100%;
}

.Swiper-latest-members .swiper-slide {
    background-color: #fff;
    font-size: 18px;
    border-radius: 5px;
    display: flex;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    /* gap: 40px; */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    color: var(--second-text);
}

.Swiper-latest-members .swiper-slide img {
    display: block;
    width: 20px;
    aspect-ratio: 1/1;
    object-fit: fill;
}

.card-online .text-img-slider img {
    width: 20px;
    aspect-ratio: 1/1;
    object-fit: fill;
}

.img-text-slider img {
    width: 60px;
    aspect-ratio: 1/1;
    object-fit: fill;
}

.card-slider {
    width: 320px;
    height: 240px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    border-radius: 5px;
    border: 1px solid #ddd9d9;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.slick-slider {
    margin: 20px;
    padding: 10px;
}


.img-text-slider {
    border-bottom: 1px solid #a7a0a045;
    gap: 10px;
    /* margin-top: 25px; */
    padding: 0 40px;
}

.img-text-slider img {
    width: 24px !important;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin-bottom: 5px;
}


.text-img-slider h3 {
    font-size: 13px;
    color: var(--main-color);
}

.text-img-slider h4 {
    font-size: 13px;
    color: var(--main-color);
}

.text-img-slider img {
    width: 10px;
}

.locin p {
    font-size: 10px;
    color: var(--main-color);
}

.locin-2 p {
    font-size: 13px;
    color: var(--main-color);
}

.nav-link {
    padding: 10px 30px;
    font-weight: 6s00;
    background-color: var(--second-color);
    border: 1px solid var(--second-color);
    border-radius: 5px;
    color: #ffffff;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.nav-link:hover {
    background-color: fff;
    color: #ffffff;
    border-color: #fff;
}

.nav-link.active {
    background-color: #ffffff;
    color: #fff;
    border-color: #fff;
}

.nav-link:focus {
    outline: none;
}

/* end  latest-members  */

/* start app  */

.app-donlowd {
    background-color: var(--second-color);
    width: 100%;
    height: 100%;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.app-section__info {
    color: #ffffff;
}

.app-section__info p {
    width: 600px;
}

.app-section__info {
    line-height: 40px;
}

.app-section__info h3 {
    color: #fff;
}

.img-app img {
    width: 90px;
}

/* end app */

/* start success-stories */

.story-card {
    /* width: 350px; */

    height: 320px;
    background-color: #ffffff;
    background-image: url(../images/bottomLeftIcon.png);
    background-position: bottom left;
    background-size: 200px;
    background-repeat: no-repeat;
    box-shadow: 1px 1px 8px #ddd;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    margin-bottom: 30px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.success-stories h2 {
    font-size: 40px;
}

.user-data h4 {
    font-size: 18px;
    margin-top: 10px;
}

.user-data h5 {
    font-size: 18px;
    margin-top: 10px;
    color: #007bff;
}

.story-content p {
    font-size: 15px;
    font-weight: bold;
}

.more-stories .btn {
    background-color: var(--second-color);
    color: #ffff;
}

/* start home-blog*/

.home-blog {
    margin-top: 60px;
}

.home-blog__content figure img {
    border-radius: 25px;
    width: 100%;
}

.home-blog__info-2 {
    left: auto;
    right: 15px;
}

.home-blog h2 {
    font-size: 40px;
}

.more-articles .btn {
    background-color: var(--second-color);
    color: #fff;
    border: none;
}


.container {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding: 5px;
    margin-right: auto;
    margin-left: auto;
}

/* end home-blog */

/* start footer */
.inner-footer {
    background: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    padding: 20px;
}

.footer__links h4 {
    font-weight: 700;
}

.footer__links ul li {
    font-size: 14px;
    line-height: 30px;
}

.footer__links ul li a {
    font-size: 14px;
    /* line-height: 30px; */
    color: var(--second-text);
}

/* end footer */

/* start signup */

.navbar {
    margin-top: 75px;
    padding: 7px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    position: fixed;
    width: 100%;
    z-index: 9999;
}


.nav-links img {
    padding-right: 5px;
    width: 30px;
    aspect-ratio: 1/1;
    object-fit: fill;
}

.nav-links h6 {
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
    color: var(--main-color);
}

/* .nav-links::before, */
ul.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

li.nav-item {
    position: relative;
}

a.nav-links {
    position: relative;
    display: inline-block;
    padding: 0px 15px;
    text-decoration: none;
    color: #000;
    text-align: center;
}

a.nav-links::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--second-color);
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

a.nav-links:hover::after {
    width: 100%;
}

a.nav-links.active::after {
    width: 100%;
}

/* start signup-page */
.before-register h1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--main-color);
}

.before-register p {
    font-size: 14px;
    font-weight: 500;
}

.signup-page .before-register {
    margin-top: 200px;
    line-height: 30px;
}

.block-oathed {
    background: #fff;
    border: 1px solid #ebd2d2;
    border-radius: 10px;
    color: var(--second-text);
    padding: 12px 16px;
}

.btf-control {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 3px;
}

.btf-checkbox {
    display: none;
}

.btf-label {
    position: relative;
    font-size: 15px;
    padding-left: 30px;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: end;
    gap: 20px;
}

.btf-label::before,
.btf-label::after {
    content: '';
    /* position: absolute; */
    display: inline-block;
    transition: all 0.3s ease;
}


/* end  */

/* start signin */

.signin {
    margin-top: 230px;
}

.form-signin {
    width: 60%;
}

.grop-shrot {
    background: none !important;
    color: rgb(118, 118, 246) !important;
}

.login-form h1 {
    color: var(--main-color);
    font-size: 25px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 24px;
}

.login-form .form-options {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px;
    padding-top: 5px;
}

.form-controls {
    -webkit-appearance: none;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 45px;
    line-height: 43px;
    outline: none !important;
    padding: 0 12px !important;
    width: 100%;
}

.forms-signins label {
    color: #324148;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 9px;
    margin-top: 10px;
}

.form-group a {
    background-color: var(--second-color);
    color: #fff;
}

.login-form h2 {
    color: #324148;
    font-size: 22px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 25px;
    padding-top: 20px;
}

.register_link {
    font-size: 18px;
}

.std_select_big-mobile-device {
    -webkit-appearance: none;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 45px;
    line-height: 43px;
    outline: none !important;
    padding: 0 12px !important;
    width: 100%;
    margin-bottom: 20px;
}

.formes-groupes label {
    color: #324148;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 15px;
    margin-top: 10px;
}

/* start card-male-famel */
.male-register {
    width: 110px;
    height: 110px;
    background-color: rgba(226, 151, 52, 0.771);
    border-radius: 10px;
}

.female-register {
    width: 110px;
    height: 110px;
    background-color: rgba(5, 46, 76, 0.713);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.male-register img {
    width: 70px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.female-register img {
    width: 63px;
    margin-bottom: 10px;
}

.male-register h3 {
    color: #fff;
    font-size: 14px;
}

.female-register h3 {
    color: #fff;
    font-size: 14px;
}

/* start terms-conditions-page */
.terms-conditions-page {
    margin-top: 170px;
    padding: 20px;
}

.terms-conditions-page h2 {
    margin-bottom: 30px;
}

/* start laws */
.main-content {
    margin: 0 -20px;
    padding-bottom: 27px;
    padding-top: 40px;
}

.terms-conditions-page h1 {
    color: var(--main-color);
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 20px;
}

.terms-conditions-page h1+span {
    display: block;
    margin-bottom: 15px;
    margin-top: 10px;
}

.terms-conditions-page p {
    color: #324148;
    font-size: 16px;
    font-weight: 400;
}

.terms-conditions-page h2 {
    color: var(--main-color);
    font-size: 24px;
    font-weight: 700;
    padding-bottom: 20px;
    padding-top: 8px;
}

.terms-conditions-page ol li {
    color: #324148;
    counter-increment: my-counter;
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 18px;
    padding-left: 35px;
    position: relative;
}

/* start search */

.search {
    margin-top: 200px;
}

.register-account {
    background: #edfbff;
    border-radius: 15px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .05);
    margin-bottom: 10px;
    padding: 50px 25px 28px;
}

.register-account figure img {
    max-width: 100%;
}

.register-account h3 {
    color: #4287b9;
    font-size: 20px;
    font-weight: 700;
    line-height: .8;
    padding-bottom: 25px;
}

.register-account h3 span {
    display: block;
    font-size: 18px;
    font-weight: 600;
}

.register-account h3 strong {
    color: #1767a1;
    font-size: 30px;
    font-weight: 700;
}

.register-account p {
    color: #56595a;
    font-size: 13px;
    text-align: center;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 40px;
}

.register-account .btn {
    background: var(--second-color);
    font-size: 19px;
    color: #fff;
    font-weight: 500;
    overflow: hidden;
    white-space: unset;
    width: 100%;
    transition: 0.50s ease-in-out;
    -webkit-transition: 0.50s ease-in-out;
    -moz-transition: 0.50s ease-in-out;
    -ms-transition: 0.50s ease-in-out;
    -o-transition: 0.50s ease-in-out;
}

.register-account .btn:hover {
    background: rgba(226, 151, 52, 0.802);
    color: #fff;
}

.side-block {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .05);
    margin-bottom: 20px;
    overflow: hidden;
}

.sideblock-links ul li a {
    color: var(--second-text);
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
    -o-transition: .1s ease-in;
}

.grid-ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background-color: #ebe6e6;
}

.side-block ul li {
    list-style: none;
    background-color: #fff;
}

.side-block figure img {
    /* width: 50%; */
    aspect-ratio: 1/1;
    object-fit: contain;
    margin: 0;
}

.myaccount {
    margin-top: 200px;
}

.btn.grid-add-email {
    color: var(--main-color);
    width: 130px;
    height: 50px;
    outline: none;
    border: none;
    margin-top: -27px;
}

.btn.grid-add-email img {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.btn.grid-add-email p {
    font-size: 12px;
}

.dropdown-menu {
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 1px 1px 5px #ddd;
    /* width: 10px; */
}

.dropdown-item {
    color: #333;
    padding: 10px 20px;
    font-size: 13px;
    text-align: right;
}

.dropdown-item:hover {
    background-color: #f1f1f1;
    color: #000;
}

.side-block ul li a:hover {
    color: var(--second-color);
}

.page-head {
    margin-bottom: 25px;
    margin-top: 25px;
}

.page-head h1 {
    color: var(--main-color);
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-right: 30px;
}


.accordion-button:not(.collapsed) {
    background: none !important;
}

button:focus:not(:focus-visible) {
    outline: none !important;
    border: none !important;
}

.tabs_box .nav-tabs {
    margin: 0 0 20px;
    padding: 0;
    border: none;
}

.nav-tabs {
    border: none !important;
}

.content-tabs .nav-tabs .nav-link.active {
    background: var(--second-color);
    border-radius: 25px;
    color: #fff;
    transition: .50s ease-in-out;
    -webkit-transition: .50s ease-in-out;
    -moz-transition: .50s ease-in-out;
    -ms-transition: .50s ease-in-out;
    -o-transition: .50s ease-in-out;
}

.content-tabs .nav-tabs .nav-link:hover {
    background: rgba(226, 151, 52, 0.802);
    color: #fff;
}

.content-tabs .nav-tabs .nav-link-item {
    border: none !important;
    color: #211e1e;
    font-size: 16px;
    font-weight: 500;
    line-height: 44px;
    background-color: none;
    margin: 0;
    padding: 0 30px;
}

.content-tabs .nav-tabs .nav-linkes {
    border: none !important;
    color: #211e1e;
    font-size: 16px;
    font-weight: 500;
    line-height: 44px;
    background-color: none;
    margin: 0;
    padding: 0 30px;
}

.button-accordion {
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 10px;
}

.button-accordion {
    color: var(--main-color);
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

.button-accordion::after {
    margin-left: 0;
}

.accordion-button::after {
    width: 20px;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin: 0;
}

.forms-groups {
    margin-bottom: 45px;
    position: relative;
    gap: 20px;
}

.forms-groups label {
    color: #324148;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 20px;
}

.form-control {
    -webkit-appearance: none;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: none !important;
    color: #394659;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    height: 45px;
    line-height: 43px;
    outline: none !important;
    padding: 0 12px !important;
    width: 100%;
}

input[type=submit].btn {
    color: #fff;
    min-width: 150px;
    background-color: var(--second-color);
    transition: 0.50s ease-in-out;
    -webkit-transition: 0.50s ease-in-out;
    -moz-transition: 0.50s ease-in-out;
    -ms-transition: 0.50s ease-in-out;
    -o-transition: 0.50s ease-in-out;
}

input[type=submit].btn:hover {
    background: rgba(226, 151, 52, 0.802);
    color: #fff;
}


/* start online */

.page-head h1 {
    color: var(--main-color);
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
    padding-bottom: 0;
}

.page-desc {
    color: #324148;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    margin: 5px 0 15px;
    padding: 0 10px;
}

.page-head .page-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.page-head .page-options .filter-gender ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.std_select_big-mobile-device-online {
    -webkit-appearance: none;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 45px;
    line-height: 43px;
    outline: none !important;
    padding: 0 12px !important;
    width: 100%;
    margin-top: 10px;
}

.page-head .page-options .filter-gender ul li a {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    color: #2b373d;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    height: 34px;
    line-height: 30px;
    padding: 0 6px;
    text-decoration: none;
    transition: .1s ease-in;
}

option {
    font-weight: normal;
    display: block;
    min-height: 1.2em;
    padding: 0px 2px 1px;
    white-space: nowrap;
}

.card-online {
    background-color: #fff;
    border-radius: 22px;
    box-shadow: -1px 9px 14px 0 #f0f2f4;
    margin: 10px 0px !important;
    padding: 0px !important;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;

}


.corner {
    transform: rotate(-90deg);
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}

.corner img {
    left: 9px;
    top: 8px;
    transform: rotate(-90deg);
}

.corner {
    background-image: url(../images/corner.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    height: 44px;
    text-align: center;
    width: 46px
}

.img-text-slider h3 {
    font-size: 15px;
}

.img-text-slider h4 {
    color: #007bff;
    font-size: 12px;
}

/* start viwe */

.page-body article {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    gap: 20px;
    padding: 25px;
    z-index: 9998;
}

.blog-list__block h2 a {
    color: #324148;
    text-decoration: none;
    font-size: 18px;
}

.blog-list__block figure img {
    display: block;
    width: 200px;
    aspect-ratio: 1/1;
    object-fit: fill;
}

.blog-list__block .blog-list__content .d-flex {
    padding: 40px;
    width: 100%;
    padding-left: 8px;
}

.blog-list__block p {
    color: #7f7f7f;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.86;
    padding-left: 55px;
    margin-bottom: 0;
}

.read-more {
    display: inline-block;
    color: var(--second-color);
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    text-decoration: none;
}

.widget_categories .widget-title {
    color: #0f518d;
    font-size: 20px;
    font-family: arabic;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 16px;
    padding-bottom: 0;
}

.widget_categories ul li a {
    color: #000000;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: 0.1s ease-in;
}

.pagination-wrapper .wp-pagenavi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pagination-wrapper .current,
.pagination-wrapper .page {
    height: 20px;
    text-align: center;
    line-height: 20px;
    border: 0;
    padding: 2px 10px 0 !important;
    display: block;
    color: #2f3034;
    margin: 0;
}

.nextpostslink {
    width: 40px;
    height: 40px;
    background: var(--second-color);
    border: 1px solid var(--second-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    color: #fff;
    padding: 0;
    justify-content: center;
    margin: 0 6px;
    position: relative;
    font-size: 12px;
    transition: all 0.3s;
}

.blog-main__content>figure {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 28px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.blog-main__related-topics ul li {
    color: #324148;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.63;
    padding-right: 25px;
    position: relative;
    margin-bottom: 12px;
}

.blog-main__related-topics ul li a {
    color: #324148;
    text-decoration: none;
    transition: 0.1s ease-in;
}

/* start Success-stories */

.success-page__design-block {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: -1px 4px 12px 0 hsla(0, 0%, 72%, .2);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 18px;
    justify-content: center;
    margin-bottom: 24px;
    margin-top: 44px;
    min-height: 84px;
    padding: 30px 25px;
    position: relative;
}

.success-page__design-block:after {
    background: url(../images/OBJECTS.png) no-repeat 50%;
    right: 0;
}

.success-page__design-block:after,
.success-page__design-block:before {
    content: "";
    /*display: block;
    */
    height: 84px;
    position: absolute;
    top: 0;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 300px;
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.success-page__design-block::before {
    background: url(../images/OBJECTS.png) no-repeat 50%;
    left: 0;
}

.blog-main__content {
    background: #fff;
    border-radius: 8px;
    box-shadow: -1px 4px 12px 0 rgba(183, 183, 183, 0.2);
    padding: 25px 30px;
    padding-bottom: 62px;
}


.blog-main__content p {
    color: #7f7f7f;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.93;
    text-align: justify;
}


.success-page__controls .btn--highlight {
    background: var(--second-color) !important;
    color: #fff;
    width: 100%;
}

.page-desc {
    color: #324148;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin: 5px 0 15px;
}

.line-on-sides {
    display: flex;
    justify-content: center;
}

.line-on-sides:after,
.line-on-sides:before {
    border-bottom: 1px solid #e8e7e7;
    content: "";
    flex: 1 1;
    margin: auto;
}

.page-body .box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 1px 1px 10px #dddd;
    position: relative;
    z-index: 9998;
}

.success-page__user {
    border-bottom: 1px solid #f4f3f3;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.user-profile-line {
    align-items: flex-start;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.user-profile-line {
    justify-content: flex-start;
    gap: 15px;
}

.user-profile-line .data {
    margin: 2px 0 0;
}

.user-profile-line .avatar img {
    border-radius: 50%;
    height: 48px;
    width: 48px;
}

.avatar img.avatar-male {
    background-color: #eaf5fa;
}

.secondary-data {
    font-size: 13px;
}

.separator-dash:before {
    color: #ddd;
    content: "—";
}

.success-page__description {
    min-height: 72px;
    padding-bottom: 5px;
    border-bottom: 1px solid #f4f3f3;
}

.page-body.success-stories p {
    color: var(--main-text);
    padding: 0 10px;
}

.story-more-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0 0;
}

.user-maritalStatus {
    color: #da4761;
}

.color-blue,
.color-pseudo-blue:after,
.color-pseudo-blue:before {
    color: #1767a0 !important;
}

.story-more-data .success-date {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #324148;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 4px;
    font-weight: 400;
    height: 30px;
    line-height: normal;
}

.story-more-data .success-after {
    color: #324148;
    -ms-flex: 0 0 60%;
    font-weight: 400;
    line-height: 35px;
}

/* start profile */
.user-profile-page {
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 40px 26px rgba(0, 0, 0, .06);
    color: #324148;
}

.page-body {
    margin: 0;
    padding: 0;
}

.user-profile-male .profile-cover {
    background: var(--main-color);
}

.user-profile-page .profile-cover {
    border-radius: 15px 15px 0 0;
    margin: 0 0 -50px;
    min-height: 70px;
    position: relative;
}

.user-profile-page .profile-cover .membership-type {
    left: 80px;
    right: auto;
}

.user-profile-page .profile-cover .membership-type {
    bottom: 10px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    position: absolute;
    right: 65px;
    text-shadow: 0 0 5px rgba(0, 0, 0, .05);
}

.user-profile-page .masthead-data {
    display: flex;
    padding: 0 65px;
    width: 100%;
}

.user-profile-page .masthead-data .avatar {
    height: 110px;
    margin: 15px;
    position: relative;
    width: 110px;
}

.user-profile-page .masthead-data .avatar img {
    border: 5px solid #fff;
    border-radius: 50%;
    height: 110px;
    width: 110px;
}

.avatar img.avatar-male {
    background-color: #eaf5fa;
}

.user-profile-page .masthead-data .data {
    margin-left: 20px;
    margin-right: 5px;
}

.user-profile-page .masthead-data .data {
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 0;
    margin-top: 65px;
    width: 100%;
}

.user-profile-page .masthead-data .data .brief {
    margin-top: 5px;
}

.user-profile-page .masthead-data .user-username {
    color: #324148;
    display: block;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0;
    padding-bottom: 10px;
    padding-top: 5px;
}

.user-profile-page .masthead-data .user-maritalStatus {
    color: #da4761;
    margin: 10px;
    font-size: 14px;
}

.user-profile-page .masthead-data .user-country {
    margin-top: 3px;
    position: relative;
    font-size: 14px;
}

.user-profile-page .masthead-data .options .option {
    cursor: pointer;
    margin: 0 20px 0 0;
    font-size: 13px;
    text-align: center;
}

.user-profile-page .masthead-data .options {
    align-content: flex-end;
    display: flex;
    flex-flow: row nowrap;
    max-width: 60%;
}

.user-profile-page .secondary-data {
    padding-left: 0;
    padding-right: 70px;
}

.user-profile-page .secondary-data {
    padding: 70px 20px 0 70px;
}

.user-profile-page .essencial-data {
    border-top: 1px dotted #ddd;
    padding-right: 0;
    padding-top: 15px;
}

.user-profile-page .secondary-data .data-block-content ul li span.field-name {
    color: #999;
    margin-bottom: 5px;
}

.user-profile-page .essencial-data .data-block {
    margin-bottom: 30px;
    padding: 0;
}

.user-profile-page .essencial-data .data-block-title {
    align-items: center;
    color: #da4761;
    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    position: relative;
    font-size: 10px;
}

.user-profile-page .essencial-data .data-block-content ul {
    align-content: flex-end;
    background: #edfbff;
    border-radius: 15px;
    display: flex;
    flex-flow: row wrap;
    list-style: none;
    margin: 15px 0;
    padding: 0;
}

.user-profile-page .essencial-data .data-block-content ul li {
    padding: 15px;
    width: 33.33%;
}

.user-profile-page .essencial-data .data-block-content ul li span.field-name {
    color: #999;
    margin-bottom: 5px;
}

.user-profile-page .essencial-data .data-block-content ul li span {
    display: block;
}

.rtl .user-profile-page .masthead-data .avatar:after {
    border: 5px solid #09e109;
    left: 5px;
    right: auto;
}

/* .user-profile-page .masthead-data .avatar:after {
    background-color: #33cc1b;
    border: 4px solid #ffffff;
    border-radius: 50%;
    bottom: 10px;
    content: "";
    display: block;
    font-family: FontAwesome;
    font-size: 20px;
    height: 25px;
    position: absolute;
    right: 5px;
    width: 25px;
} */

.user-profile-page .masthead-data .options .option span:first-child {
    align-items: center;
    background-color: #f5f5f6;
    border-radius: 50%;
    color: #bbb;
    display: flex;
    height: 30px;
    justify-content: center;
    margin: 0 auto 9px;
    width: 30px;
}

.user-profile-page .secondary-data .data-block-content ul li {
    margin-bottom: 15px;
}

.user-profile-page p {
    font-size: inherit;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: justify;
}

h2 {
    color: var(--main-color);
    text-align: center;
    font-weight: 600;
    font-family: 'SuisseIntl-Regular', sans-serif;
    font-size: 20px;
    padding: 20px;
}

.user-profile-page .toolbar ul.menu-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.user-profile-page .toolbar ul.menu-actions li,
.user-profile-page .toolbar ul.menu-actions li button {
    font-size: 16px;
    height: auto !important;
    /* margin: 0 5px; */
    text-align: center;
    /* width: 45px !important; */
}

.user-profile-page .toolbar ul.menu-actions li button.btn-more-options {
    background: #f7f7f7;
}

.user-profile-page .toolbar ul.menu-actions li button {
    padding: 10px 15px;
}

.no-select {
    background-color: #fff;
    box-shadow: 1px 1px 5px #ddd;
    margin: 0;
}

.btn-send-message-file {
    background-color: #4287b9;
    width: 200px;
    color: #fff;
    font-size: 20px;
}

/* start Help-center */

.content h1 {
    color: var(--main-color);
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
    padding-bottom: 0;
}

.content p {
    color: #324148;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin: 5px 0 15px;
}


.search input[type="search"] {
    display: block;
    width: 100%;
    height: 54px;
    background: #ffffff url(../images/searchMenuIcon.png) no-repeat left 20px center;
    border: none;
    border-radius: 28px;
    box-shadow: 1px 1px 5px #ddd;
    outline: none !important;
    padding: 0 25px;
    padding-left: 55px;
    font-size: 15px;
    font-weight: 500;
    margin-top: -160px;
    line-height: 54px;
}

.help-center__faq {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: -1px 4px 12px 0px rgba(183, 183, 183, 0.2);
    height: 100%;
    padding: 22px;
    padding-top: 35px;
    margin-top: 30px;
}

.help-center__title .icon {
    margin-left: 15px;
    margin-right: 0px;
}

.help-center__title h2 {
    color: var(--main-color);
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 0;
    padding-top: 12px;
}

.help-center__title h2 a {
    text-decoration: none !important;
    color: var(--main-color);
}

.help-center__faq ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.help-center__faq ul li {
    color: #324148;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    border-bottom: 1px solid #e5e0e0;
    padding-bottom: 10px;
    margin-bottom: 16px;
}

.help-center__faq ul li a {
    display: block;
    color: #324148;
    text-decoration: none;
    font-size: 16px;
}

.col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
    margin: 20px 0;
}

.help-all-ar {
    padding-top: 5px;
    text-align: left;
}

a.faq-all,
a.faq-all:hover {
    border-radius: 50px;
    color: #ffffff;
    font-size: 14px;
    padding: 5px 15px 5px 15px;
    background-color: var(--second-color);
}

/* start sign-in */

.sign-in {
    margin-top: 200px;
}

.input-group {
    display: block;
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.25rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
}


.form-group label sup {
    color: #da4761;
    font-size: 22px;
    font-weight: 500;
    margin-right: 4px;
    top: -2px;
}

/* Styles for Basic items's Next Button. */
.width-50 {
    width: 50%;
}

.ml-auto {
    margin-left: auto;
}

/* Styles for h2 & Credit Link. */
.text-center,
.text-center a {
    text-decoration: none;
    text-align: center;
}

.text-center a {
    text-decoration: none;
    font-size: 14px;
}

/* Styles for Progress Bar */
.progressbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    counter-reset: step;
    margin: 2rem 0 4rem;
}

.progressbar::before,
.progress {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    background-color: #dcdcdc;
    z-index: -1;
}

.progress {
    background-color: var(--primary-color);
    width: 0%;
    transition: 0.3s;
    z-index: -1;
}

.progress-step {
    width: 2.1875rem;
    height: 2.1875rem;
    background-color: #dcdcdc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.progress-step::before {
    counter-increment: step;
    content: counter(step);
}

.progress-step::after {
    content: attr(data-title);
    position: absolute;
    top: calc(100% + 0.5rem);
    font-size: 0.85rem;
    color: #666;
}

.progress-step-active {
    background-color: var(--main-color);
    color: #fff1f1;
}

/* Styles for Form. */
.form {
    width: 60rem;
    margin: 0 auto;
    border-radius: 0.35rem;
    padding: 1.5rem;

}

.form-step {
    display: none;
    transform-origin: top;
    animation: animate 0.5s;
}

@keyframes animate {
    from {
        transform: scale(1, 0);
        opacity: 0;
    }

    to {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.form-step-active {
    display: block;
}

/* Styles for Next and Back Button. */
.btns-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.btn-2 {
    padding: 10px 0;
    display: block;
    text-decoration: none;
    background-color: var(--second-color);
    color: white;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: 0.3s;
}

.btn:hover {
    box-shadow: 0 0 0 2px #cd2121, 0 0 0 3px var(--primary-color);
}


/* Social Credit Styles */
.social_media_div {
    position: fixed;
    left: 0;
    bottom: 20px;
}

.social_media_div li {
    list-style: none;
    margin-bottom: 20px;
    background-color: #fff;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -ms-transition: all 0.4s;
    transition: all 0.4s;
    font-size: 20px;
}

.social_media_div li a {
    text-decoration: none;
}

.social_media_div li a i {
    color: black;
    width: 2.1875rem;
    height: 2.1875rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.12);
}

/* Responsive Style */
@media (max-width: 850px) {
    .form {
        width: 100vw;
    }
}

#heading {
    text-align: center;
    font-size: 30px;
}

.std_select_big-mobile-device-online {
    -webkit-appearance: none;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 45px;
    line-height: 43px;
    outline: none !important;
    padding: 0 12px !important;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}

.form-control {
    -webkit-appearance: none;
    background: #fff !important;
    border: 1px solid #ddd;
    border-radius: 7px;
    box-shadow: none !important;
    color: #394659;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    height: 45px;
    line-height: 43px;
    outline: none !important;
    padding: 0 12px !important;
    width: 100%;
    margin-bottom: 20px;
}

.signup-form__content .signup-form__rules {
    left: 7px;
    position: absolute;
    top: 40px;
    width: calc(100% - 14px);
}

.signup-form__rules {
    background: var(--main-color);
    border-radius: 14px;
    padding: 15px 15px 15px 30px;
    color: #fff;
    position: relative;
}

.signup-form__rules:after {
    border-color: transparent transparent transparent var(--main-color);
    border-width: 8px 0 8px 8px;
    left: 100%;
}

.signup-form__rules:after {
    border-style: solid;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    top: 40px;
    width: 0;
}

.progress-step::before {
    counter-increment: step;
    content: counter(step);
    font-weight: 800;
}

.signup-form__rules h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 12px;
}

.signup-form__rules ul li {
    padding-right: 20px;
}

.signup-form__rules ul li {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.46;
    margin-bottom: 10px;
    position: relative;
}

/* start myaccount */
/*
.header-top__user {
    float: right;
    left: 0;
    margin-left: 12px;
} */

.header__myaccount__logo img {
    width: 110px;
    margin-top: 20px;
}

.navbar-myaccount-expand-lg {
    margin-top: 70px;
}

.inner-header-top__more {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 30px;
}

@media(max-width: 768px) {
    .inner-header-top__more {
        margin-top: 10px;
    }
}

.header-top__notification {
    float: right;
}

.header-top__notification {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 58px;
    left: 0;
    padding: 0 5px;
    position: relative;
    top: 0;
    transition: .2s ease-in;
}

@media(max-width: 768px) {
    .header-top__notification {
        left: -29px;
    }
}

.header-top__user {
    position: relative;
}

.header-top__user img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    margin-top: 10px;
}

.header-top__user ul {
    left: -28px;
}

.header-top__user ul {
    background: #fff;
    border-radius: 0 0 8px 8px;
    bottom: 0;
    box-shadow: 0 2px 11px 0 rgba(0, 0, 0, .1);
    list-style: none;
    margin: 0;
    opacity: 0;
    padding: 10px 0 0;
    position: absolute;
    -webkit-transform: translateY(90%);
    transform: translateY(90%);
    transition: opacity .3s, visibility 0s .3s, -webkit-transform .3s;
    transition: opacity .3s, transform .3s, visibility 0s .3s;
    transition: opacity .3s, transform .3s, visibility 0s .3s, -webkit-transform .3s;
    visibility: hidden;
    width: 100%;
    width: 250px;
    left: -80%;
    z-index: 9999;
}

.header-top__user ul li {
    /* text-align: center; */
    border-bottom: 1px solid #ddd;
}

.header-top__user ul li a figure {
    margin: 0;
    position: static;
    width: 36px;
}

.header-top__user:hover ul {
    opacity: 1;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: opacity .3s, visibility 0s, -webkit-transform .3s;
    transition: opacity .3s, transform .3s, visibility 0s;
    transition: opacity .3s, transform .3s, visibility 0s, -webkit-transform .3s;
    visibility: visible;
}

.header-top__user ul li a {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #463c3c;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-family: inherit;
    gap: 20px;
    font-size: 16px;
    font-weight: 400;
    height: auto;
    line-height: normal;
    padding: 10px 15px;
    text-decoration: none;
    transition: .1s ease-in;
}

@media(max-width: 768px) {
    .header-top__user ul li a {
        font-size: 13px;
    }
}

.navbar {
    margin-top: 55px;
    padding: 7px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    position: fixed;
    width: 100%;
    z-index: 9999;
}

.notification__link {
    position: relative;
    display: inline-block;
}

.header__language-box .options ul li {
    padding: 8px 16px;
    font-size: 15px;
}

.header-top__notification .notification__link {
    background: url(../images/bell.png) no-repeat 50%;
    background-size: 30px;
    display: block;
    height: 30px;
    position: relative;
    text-decoration: none;
    transition: .1s ease-in;
    width: 30px;
}

.header-top__notification .notification__link span {
    background: #408c2e;
    border-radius: 50px;
    position: absolute;
    left: 20px;
    color: #fff;
    display: table;
    font-size: 12px;
    height: 18px;
    line-height: 1px;
    padding: 9px 6px 3px;
}

.header-top__package-link {
    border-right: 2px solid var(--second-color);
    padding-right: 20px;
}

.header-top__package-link .btn img {
    position: relative;
    top: 1px;
    vertical-align: middle;
    width: 21px;
}

.btn-md {
    font-size: 15px;
}

.side-block {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .05);
    margin-bottom: 20px;
    overflow: hidden;
}

.user-info__top {
    background-color: var(--main-color);
    background-image: url(../images/png.png);
    background-position: center bottom -1px;
    background-repeat: no-repeat;
    background-size: 102% auto;
    margin-bottom: 22px;
    padding-top: 26px;
    text-align: center;
}

.user-info__avatar img {
    width: 100px;
    height: 80px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.user-info__top strong {
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
}

.user-info__top h6,
.user-info__top strong {
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}

.user-info__avatar figure img {
    border-radius: 50%;
    /* height: 30%; */
    background-color: #f2f2f2;
    object-fit: cover;
    width: 30%;
    padding: 5px;
}

.user-info__avatar {
    background: url(../images/najm.png) no-repeat 50%;
    background-position: center;
    background-size: cover;
    /* height: 102px; */
    /* margin: 0 auto; */
    position: relative;
}

.user-info__avatar .status.status--online {
    background: #35c313;
}

.user-info__avatar .status {
    border: 3px solid #fffffc;
    border-radius: 50%;
    bottom: 5px;
    display: block;
    height: 18px;
    left: 95px;
    position: absolute;
    width: 18px;
}

.user-info__avatar .avatar--upload {
    position: absolute;
    right: 80px;
    top: 12px;
}

.user-info__avatar .avatar--upload {
    background: #d8d8d8 url(../images/5ceb634b9a978691de68.svg) no-repeat 50%;
    border: 3px solid #fff;
    border-radius: 50%;
    display: block;
    height: 32px;
    transition: .2s ease-in;
    width: 32px;
}

.user-info__links-2 {
    /* padding: 0 20px; */
}

.user-info__links-2 ul {
    display: flex;
    flex-direction: column;

}

.user-info__links-2 ul li {
    padding-bottom: 22px;
}

.user-info__links-2 ul li a {
    color: #324148;
    display: block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    padding-left: 35px;
    margin-top: 20px;
    padding-right: 35px;
    position: relative;
    text-decoration: none;
    transition: .1s ease-in;
}

.user-info__links-2 img {
    width: 20px;
}

.user-info__links-2 ul li a .nos {
    left: 0;
    right: auto;
}

.user-info__links-2 ul li a .nos {
    align-content: center;
    align-items: center;
    background: #408c2e;
    border-radius: 50%;
    color: #fff;
    direction: ltr;
    display: inline-block;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    font-family: inherit;
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    height: 25px;
    justify-content: center;
    line-height: 25px;
    margin-top: -7px;
    min-width: 25px;
    padding: 2px 3px 0 0px;
    position: absolute;
    left: 5px;
    text-align: center;
    top: 50%;
}

.dashboard-page__block {
    background: #fff;
    border-radius: 12px;
    box-shadow: 1px 5px 5px #ddd;
    margin-bottom: 20px;
    margin-top: 100px;
    padding: 15px;
}

.dashboard-page__link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-left: 5px;
}

.btn-links ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.block-user-data {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-data figure {
    float: right;
    margin-left: 18px;
    margin-right: 0;
}

.user-data {
    /* display: flex; */
    align-items: center;
    gap: 20px;
}

/*
.btn{
    border-radius: 50%;
    padding: 10px;
} */

.block-user-data .membership-infos h4 {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 5px;
    padding: 0;
}

.block-user-data .membership-infos p strong {
    color: #da4761;
    font-size: 16px;
    font-weight: 500;
    padding-right: 5px;
}

.block-user-data .membership-infos p span {
    white-space: pre;
    color: #9d9d9d;
}

.block-user-data {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    border-bottom: 1px solid #efefef;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 20px;
}

.dashboard-page__user-infolist {
    padding: 15px 15px 5px;
}

.dashboard-page__user-infolist ul li {
    padding-right: 20px;
}

.dashboard-page__user-infolist ul li {
    color: #324148;
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 18px;
    position: relative;
    display: flex;
    word-break: break-word;
}

.dashboard-page__user-infolist ul li:before {
    right: 0;
}

.dashboard-page__user-infolist ul li:before {
    background: var(--main-color);
    border-radius: 20%;
    content: "";
    display: block;
    height: 8px;
    position: absolute;
    top: 8px;
    width: 8px;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
    -ms-border-radius: 20%;
    -o-border-radius: 20%;
}

.dashboard-page__user-infolist ul li strong {
    font-weight: 500;
}

.dashboard-page__user-infolist ul li strong a {
    color: #da4761;
}

.dashboard-page__user-infolist ul li a {
    color: #324148;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.upload-photo img {
    border-radius: 50%;
    background-color: #ddd;
    padding: 5px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.block-user-data .user-data figure a.upload-photo:after {
    background: #a6a6a6 url(../images/5ceb634b9a978691de68.svg) no-repeat 50%;
    content: "";
    border: 3px solid #fff;
    border-radius: 50%;
    width: 32px;
    display: block;
    height: 24px;
    opacity: 75%;
    position: absolute;
    top: auto;
    transition: .2s ease-in;
    right: auto;
    transform: translateY(-210%);
    width: 24px;
    -webkit-transform: translateY(-210%);
    -moz-transform: translateY(-210%);
    -ms-transform: translateY(-210%);
    -o-transform: translateY(-210%);
}

.block-premium-status {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 15px 20px 20px;
}

.dashboard-page__block--equal {
    min-height: calc(100% - 20px);
}

.subscribe img {
    width: 30px;
    aspect-ratio: 1/1;
    object-fit: fill;
}

.subscribe span {
    font-size: 14px;
}

.block-premium-status p {
    color: #919191;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.block-premium-status h3 {
    color: #000;
    font-size: 19px;
    font-weight: 500;
    line-height: normal;
    padding: 0;
}

.block-premium-status a {
    text-align: end;
}

.block-counters h6 {
    color: #324148;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.block-counters .col,
.block-counters .col>a {
    text-align: center;
}

.block-counters h6 strong {
    color: #da4761;
    font-weight: 500;
}

.block-last-notifications>div {
    padding: 15px 25px 25px;
}

.dashboard-page__block--equal {
    min-height: calc(100% - 20px);
}

.dashboard-page__block {
    background: #fff;
    border-radius: 12px;
    box-shadow: -1px 4px 12px 0 hsla(0, 0%, 72%, .2);
    margin-bottom: 20px;
    padding: 15px;
}

.block-last-notifications h2 {
    color: var(--main-color);
    font-size: 22px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 10px;
    padding-left: 15px;
}

.block-last-notifications ul li.notification figure img {
    border-radius: unset;
    height: 32px;
    width: 32px;
}

.content {
    padding: 0 20px;
    margin-top: -5px;
}

.block-last-notifications ul li.notification p {
    color: #324148;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 5px;
    margin-top: 6px;
}

.block-last-notifications ul li.notification .time {
    color: #9c9d9d;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.block-last-notifications ul li.notification {
    padding-right: 85px;
}

.block-last-notifications ul li.notification {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px dotted #ddd;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 15px;
    min-height: 88px;
    padding: 10px 15px;
    position: relative;
}

.notification.new {
    background: #fff8e3;
    border: none !important;
    border-radius: 14px;
    margin-bottom: 10px !important;
}

.btn-action {
    text-align: left !important;
}

.swiper {
    width: 100%;
    height: 100%;
}

.mySwiper-myaccount .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 100%;
    margin: 1px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.mySwiper-myaccount .swiper-slide img {
    display: block;
    height: 100%;
    object-fit: cover;
}

.user-profile-line .avatar img {
    border-radius: 50%;
    height: 38px;
    width: 38px;
    /* margin-top: 20px; */
}

.user-profile-line .essential-data span.user-username {
    font-weight: 700;
    word-break: break-all;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.user-profile-line .essential-data span {
    color: var(--main-text);
}

.user-profile-line .essential-data .user-location {
    color: #919191;
    font-size: 14px;
}

.data .essential-data {
    margin-top: -20px;
}

.secondary-data {
    padding: 10px;
    color: var(--main-color);
}

@media (width <=460px) {
    .mySwiper-myaccount .swiper-slide {
        align-items: center;
        width: 100px;
    }
}

/* start my privilege */

.my-privilege {
    margin-top: 200px;
}

.feature {
    align-items: center;
    display: flex;
    margin-bottom: 10px;
    padding: 10px;
}

.feature span {
    margin-right: 10px;
}

.feature span {
    display: block;
}

.block-features {
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

.premium-package-block {
    padding-bottom: 15px;
}

.input-block {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .05);
    margin-bottom: 35px;
    margin-top: 45px;
    padding: 0 55px 18px;
    position: relative;
}

.premium-package-block h2 {
    background-color: #ffa300;
}

.input-block h2 {
    background: var(--second-color);
    border-radius: 8px;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    height: 44px;
    line-height: 44px;
    margin-bottom: 5px;
    min-width: 165px;
    padding: 0 25px;
    position: relative;
    top: -22px;
}

.input-block p {
    color: #324148;
    font-size: 16px;
    font-weight: 400;
}

.premium-package-block p a.btn {
    margin-top: 15px;
}

/* start notifications */

.notification {
    margin-top: 200px;
}

.page-head .page-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.std_select .mobile-device-notifications {
    min-width: 200px;
    border: none;
    background-color: #0e0442;
    box-shadow: 1px 1px 5px #ddd;
    padding: 10px 20px;
    font-size: 12px;
    color: aliceblue;
    font-weight: 600;
    border-radius: 5px;
    outline: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.page-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-notifications {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.notification-page__option-links .btn {
    padding: 7px 25px;
    position: relative;
}

.btn.btn-with-icon {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prev--link {
    background-color: var(--second-color);
    color: #fff;
    border-radius: 50px;
    padding: 15px;
    font-size: 16px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.prev--link:hover {
    background-color: #0e0442;
    color: #fff;
}

/* start card */

.card-cip {
    margin-top: 200px;
}


.input-block {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .05);
    margin-bottom: 35px;
    margin-top: 45px;
    padding: 20px 55px 18px;
    position: relative;
}

.required {
    width: 100%;
}

/* start chat */

.popup-box {
    background: #fff;
    box-shadow: 1px 1px 56px #ddd;
    overflow: auto;
    border-radius: 25px;
    bottom: 0;
    display: none;
    height: auto;
    position: fixed;
    left: 70px;
    width: 250px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    padding: 0 0 10px 0;
}

.round.hollow {
    margin: 40px 0 0;
}

.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}

.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}

.popup-box-on {
    display: block !important;
}

.popup-box .popup-head {
    background-color: var(--second-color);
    clear: both;
    color: #fff;
    display: inline-table;
    font-size: 21px;
    padding: 7px 10px;
    width: 100%;
    font-family: Oswald;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bg_none i {
    border: 1px solid #ff6701;
    border-radius: 25px;
    color: #ff6701;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}

.bg_none:hover i {
    border: 1px solid #000;
    border-radius: 25px;
    color: #000;
    font-size: 17px;
    height: 33px;
    line-height: 30px;
    width: 33px;
}

.bg_none {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}

.popup-box .popup-head .popup-head-right {
    margin: 11px 7px 0;
}

.popup-box .popup-messages {}

.popup-head-left img {
    border: 1px solid #fffbfb;
    border-radius: 50%;
    width: 40px;
    padding: 5px;
}

.pull-left {
    font-size: 17px;
}

.popup-messages-footer>textarea {
    border-bottom: 1px solid #b2b2b2 !important;
    height: 34px !important;
    margin: 7px;
    padding: 5px !important;
    border: medium none;
    width: 95% !important;
}

.popup-messages-footer {
    background: #fff none repeat scroll 0 0;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.popup-messages-footer .btn-footer {
    overflow: hidden;
    padding: 2px 5px 10px 6px;
    width: 100%;
}

.simple_round {
    background: #d1d1d1 none repeat scroll 0 0;
    border-radius: 50%;
    color: #4b4b4b !important;
    height: 21px;
    padding: 0 0 0 1px;
    width: 21px;
}

.popup-box .popup-messages {
    background-image: url(../images/chatBackImage0.png);
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    height: 275px;
    overflow: auto;
}

.direct-chat-messages {
    overflow: auto;
    padding: 10px;
    transform: translate(0px, 0px);

}

.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}

.popup-messages abbr.timestamp {
    background: #3f9684 none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-head-right .btn-group {
    display: inline-flex;
    margin: 0 8px 0 0;
    vertical-align: top !important;
}

.chat-header-button {
    background: transparent none repeat scroll 0 0;
    /* border: 1px solid var(--main-color); */
    outline: none;
    border: none;
    border-radius: 50%;
    font-size: 17px;
    height: 24px;
    width: 31px;
}

.popup-head-right .btn-group .dropdown-menu {
    border: medium none;
    min-width: 122px;
    padding: 0;
}

.popup-head-right .btn-group .dropdown-menu li a {
    font-size: 12px;
    padding: 3px 10px;
    color: #303030;
}

.popup-messages abbr.timestamp {
    background: var(--second-color) none repeat scroll 0 0;
    color: #fff;
    padding: 0 11px;
}

.popup-messages .chat-box-single-line {
    border-bottom: 1px solid #a4c6b5;
    height: 12px;
    margin: 7px 0 20px;
    position: relative;
    text-align: center;
}

.popup-messages .direct-chat-messages {
    height: auto;
}

.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.popup-messages .direct-chat-timestamp {
    color: #fff;
    opacity: 0.6;
}

.popup-messages .direct-chat-name {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 0 49px !important;
    color: #fff;
    opacity: 0.9;
}

.popup-messages .direct-chat-info {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
}

.popup-messages .big-round {
    margin: -9px 0 0 !important;
}

.popup-messages .direct-chat-img {
    border: 1px solid #fff;
    background: #3f9684 none repeat scroll 0 0;
    border-radius: 50%;
    float: left;
    height: 40px;
    margin: -21px 0 0;
    width: 40px;
}

.direct-chat-reply-name {
    color: #fff;
    font-size: 15px;
    margin: 0 0 0 10px;
    opacity: 0.9;
}

.direct-chat-img-reply-small {
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    height: 20px;
    margin: 0 8px;
    width: 20px;
    background: #3f9684;
}

.popup-messages .direct-chat-msg {
    margin-bottom: 10px;
    position: relative;
}

.popup-messages .doted-border::after {
    background: transparent none repeat scroll 0 0 !important;
    border-right: 2px dotted #fff !important;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
    display: inline;
    z-index: -2;
}

.popup-messages .direct-chat-msg::after {
    background: #fff none repeat scroll 0 0;
    border-right: medium none;
    bottom: 0;
    content: "";
    left: 17px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 2px;
    display: inline;
    z-index: -2;
}

.direct-chat-text::after,
.direct-chat-text::before {

    border-color: transparent #dfece7 transparent transparent;

}

.direct-chat-text::after,
.direct-chat-text::before {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: transparent #d2d6de transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: medium;
    content: " ";
    height: 0;
    pointer-events: none;
    position: absolute;
    right: 100%;
    top: 15px;
    width: 0;
}

.direct-chat-text::after {
    border-width: 5px;
    margin-top: -5px;
}

.popup-messages .direct-chat-text {
    background: #dfece7 none repeat scroll 0 0;
    border: 1px solid #dfece7;
    border-radius: 2px;
    color: #1f2121;
}

.direct-chat-text {
    background: #d2d6de none repeat scroll 0 0;
    border: 1px solid #d2d6de;
    border-radius: 5px;
    color: #444;
    margin: 5px 0 0 50px;
    padding: 5px 10px;
    position: relative;
}

.add-message {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.foot .input-message textarea {
    background: #f3f3f3;
    border: none;
    border-radius: 15px;
    box-shadow: none;
    line-height: unset;
    margin-bottom: -6px;
    min-height: 38px !important;
    outline: none !important;
    overflow: hidden;
    padding: 5px 15px;
    font-size: 13px;
    resize: none;
    width: 100%;
}

.message-body {
    background-color: #f5f5f3f3;
    padding: 10px 10px;
    margin: 5px;
    border-radius: 10px 10px 10px 0;
}

.message-body .message-status .created-at {
    direction: rtl;
    display: flex;
    font-size: 12px;
    justify-content: space-between;
    min-height: 16px;
    padding-top: 5px;
    white-space: nowrap;
    color: #aaa;
    margin-top: -10px;
}

.message-options {
    background-color: rgb(239, 239, 239);
    padding: 0 10px;
    border-radius: 5px;
    display: flex;
}

/* end chat */

/* start my-mail */

.my-mail {
    margin-top: 200px;
}

.table.table.standard div:first-child {
    border-radius: 10px 10px 0 0;
}

.table.standard .head {
    background: #fdfdfd;
    border-bottom: 1px solid #cdeef7;
    border-radius: 10px 10px 0 0;
    box-shadow: 1px 1px 5px #ddd;
    padding: 17px 10px;
}

.head {
    align-items: flex-start;
    display: inline-flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
    align-items: center;
}

.head .table-cell {
    min-width: 16px;
    width: 100%;
}

input[type=checkbox] {
    background-position: 0 0;
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    height: auto;
    margin-top: -4px !important;
    min-height: 16px;
    min-width: 16px;
    position: relative;
    user-select: none;
    vertical-align: middle;
}

.table-body .message {
    background-color: var(--main-color);
    display: flex;
    color: #fff;
    justify-content: space-between;
    padding: 17px 15px;
    margin-top: -15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #fff;
}

.table-body .table-row .table-cell {
    min-width: 16px;
    width: 100%;
}

.avatar {
    position: relative;
    /* display: inline-block; */
}

.avatar-male {
    /* display: block; */
}

.openmoji--star {
    position: absolute;
    top: -6px;
    right: -10px;
    font-size: 24px;
}

.nb-unread-messages {
    background-color: rgb(0, 142, 17);
    border-radius: 50px;
    padding: 0px 3px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    font-size: 12px;
    margin-top: -5px;
}

.table-foot .options button {
    margin-left: 0;
    margin-right: 0;
}

.btn.action {
    font-size: 14px;
    font-weight: 400;
    height: 35px;
    line-height: inherit;
    max-width: 194px;
    background-color: var(--second-color);
    color: #fff;
}

.table-foot {
    border-top: 1px solid #ffffff;
    padding: 10px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    margin-top: -20px;
}

.no-conversations {
    background-color: var(--main-color);
    color: #fff;
    max-width: 100%;
    width: 100%;
    padding: 20px 10px;
    margin-top: -20px;
}

/* start subscribe premium */

.btn-whatsapp {
    align-items: center;
    background-color: #25d366;
    border-radius: 50px;
    bottom: 40px;
    box-shadow: 2px 2px 3px #999;
    color: #fff;
    display: flex;
    font-size: 30px;
    height: 60px;
    justify-content: center;
    left: 40px;
    position: fixed;
    text-align: center;
    width: 60px;
    z-index: 100;
    z-index: 10000;
}

#banner .content {
    background: #fff3cb;
    border: 1px solid #ffe080;
    display: flex;
    padding: 20px 30px 25px;
    position: relative;
    top: 3px;
}

.page-body .box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 9998;
}

.section {
    margin-bottom: 30px;
}

#why-go-premium .content {
    background: #fffefd;
    box-shadow: 1px 1px 5px #ddd;
    padding: 20px 30px 25px;
    position: relative;
    top: 3px;
    border-radius: 12px;
}

.card-sub {
    width: 300px;
    height: 250px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}

.card-sub .avatar img {
    width: 80px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    margin-bottom: 20px;
}

.card-sub h3 {
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 8px;
}

.section .content p {
    font-size: 16px;
}

.card-sub p {
    color: #a2a2a2;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 0;
}

#premium-package-prices .content ul {
    list-style: none;
    margin: 0;
    /* padding: 25px; */
}

.page-body .box {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .05);
    position: relative;
    z-index: 9998;
    padding: 50px;
}

#premium-package-prices .content ul li strong {
    color: #1767a1;
}

strong {
    font-weight: 700;
}

.nav-tabs__mobile_title {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tabs_box .nav-tabs {
    margin: 0 0 20px;
    padding: 0;
}

.nav.nav-tabs {
    margin-bottom: 20px;
    z-index: 9999;
}

.content-tabs .nav-tabs {
    background: #fff;
    border: none;
    border-radius: 25px;
    box-shadow: -1px 4px 12px 0 hsla(0, 0%, 72%, .2);
    height: 44px;
    margin-bottom: 30px;
}

.content-tabs .nav-tabs .nav-linkrf {
    border: none !important;
    color: #394659;
    font-size: 16px;
    font-weight: 500;
    line-height: 44px;
    margin: 0;
    padding: 0 10px;
}

.nav-tabs .nav-linkrf {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    /* border-top-right-radius: .25rem; */
}

/* start edit profile */
.btn-user-naum {
    border: 1px solid var(--second-color);
    font-size: 14px;
    color: var(--second-color);
    width: 220px;
}

.edit-details__content {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}


/*  */

.box-inputs.scroll {
    max-height: 250px;
    overflow: hidden;
    overflow-y: auto;
}

.box-inputs {
    background: #e6e6e6;
    border-radius: 8px;
    box-shadow: 1px 1px 5px #ddd;
    padding: 15px 15px;
    margin-bottom: 20px;
}

.criteria-bloc {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, .05);
    margin-bottom: 35px;
    padding: 30px 55px;
    position: relative;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

/*start  setting */
.tab-content {
    /* background-color: #ffffff; */
    /* box-shadow: 1px 1px 5px #ddd; */
    padding: 20px;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

.my-setting__options {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}


.mobile-device-my-stting {
    border: none;
    background-color: #fff;
    box-shadow: 1px 1px 5px #ddd;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 13px;
    outline: none;
    /* margin-bottom: 20px; */
}

.my-setting__options h5 {
    font-size: 14px;
    color: var(--main-color);
    font-weight: 500;
    margin-bottom: 0;
}

.std_select {
    font-size: 12px;
    /* background-color: #f8f9fa; */
    color: #8d8d8d;
    border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}


.switch-v2 {
    display: inline-block;
    position: relative;
    width: 60px;
}

.switch {
    position: absolute;
    display: inline-block;
    width: 100%;
    /* height: 100%; */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.track:before {
    position: absolute;
    content: "";
    height: 21px;
    width: 20px;
    left: 7px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.track {
    background-color: #21f33a;
}

input:checked+.track:before {
    transform: translateX(26px);
}

.my-setting__block h4 {
    color: #da4761;
    font-size: 16px;
    font-weight: 600;
}

.my-setting__block {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

#general h4 {
    color: #da4761;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 0;
    margin-bottom: 30px;
}


/* start app alwly */

.header-landing_logo img {
    display: block;
    max-width: 110px;
    height: auto;
    transition: .2s ease-in;
    margin-top: 29px;
}

.header-manu_landing ul li a {
    color: var(--main-color);
    display: block;
    position: relative;
    color: #2b373d;
    font-size: 17px;
    font-family: DINNextLT;
    font-weight: 600;
    line-height: 45px;
    text-decoration: none;
    transition: .2s ease-in;
    padding: 0 10px;
}

.header-manu_landing nav ul li a {
    text-decoration: none;
    color: #000;
    padding: 0px 15px;
    transition: background-color 0.3s, color 0.3s;
}

.header-manu_landing nav ul li a.active {
    background-color: var(--second-color);
    color: #fff;
    border-radius: 50px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}


.section1 {
    margin-top: 130px;
}

.section2 {
    margin-top: 170px;
}

.app-slider {
    background-image: url('../images/slider-app.jpeg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    padding-top: 17px;
    padding-bottom: 24px;
}

.mySwiper-app-alwly .swiper-slide img {
    width: 90%;
    border-radius: 20px;
    height: auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}


.section2 h2 {
    font-size: 35px;
    color: var(--main-color);
    font-weight: 700;
    line-height: 45px;
    margin-bottom: 30px;
}

.landing-benefits {
    margin-top: 170px;
}

.landing-benefits h2 {
    font-size: 35px;
    color: var(--main-color);
    font-weight: 700;
    line-height: 45px;
    margin-bottom: 30px;
}

.landing-benefits__block {
    background: #fff;
    border: 1px solid rgba(242, 242, 242, .6);
    border-radius: 9px;
    box-shadow: 1px 1px 5px rgba(255, 244, 244, .69);
    padding: 25px;
    margin-bottom: 20px;
}

.story-data-landing img {
    display: inline-block;
    width: auto;
    margin-bottom: 20px;
    max-width: 20%;
}

.user-data-landing .avatar img {
    width: 20%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-bottom: 10px;
}

.user-data-landing h4 {
    font-size: 16px;
}

.user-data-landing h5 {
    font-size: 15px;
    margin-top: -10px;
}

.landing-steps h2 {
    font-size: 35px;
    color: var(--main-color);
    font-weight: 700;
    margin-bottom: 10px;
}

.landing-steps p {
    font-size: 15px;
    color: var(--main-text);
    font-weight: 700;
    margin-bottom: 30px;
}

.landing-steps__list {
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-steps_pic {
    display: flex;
    justify-content: center;
    align-items: center;
}

.landing-steps__list ul {
    list-style: none;
    padding: 0 60px;
}

.landing-steps__list ul li {
    margin-bottom: 20px;
}

.nos {
    font-size: 2rem;
    color: #333;
    margin-right: 10px;
}

.landing-steps .title h2 {
    margin-bottom: 20px;
}

.landing-steps__list ul li h4 {
    color: #383838;
    font-size: 19px;
    font-family: DINNextLT;
    font-weight: 700;
    line-height: normal;
    padding-bottom: 10px;
}

.landing-steps__list ul li p {
    color: #989a9b;
    font-size: 19px;
    font-family: DINNextLT;
    font-weight: 400;
    line-height: 1.84;
}

.landing-steps__list ul li .nos {
    display: inline-block;
    width: 38px;
    height: 38px;
    background: #259acb;
    border-radius: 50%;
    border: 4px solid #c9e4f0;
    color: #fff;
    font-size: 16px;
    font-family: DINNextLT;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    margin-bottom: 22px;
}

.landing-info__block:nth-child(odd) {
    background: #f5fcff;
}

.landing-info__content h6 {
    color: #da4761;
    font-size: 20px;
    font-family: DINNextLT;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 12px;
}

.landing-info__block {
    padding: 80px;
}

.landing-info__content h3 {
    line-height: 40px;
}

.landing-info__content h3 {
    font-size: 30px;
    font-family: DINNextLT;
}

.landing-info__content p {
    color: #7b747e;
    font-size: 21px;
    font-family: DINNextLT;
    font-weight: 400;
    line-height: 1.71;
}

.landing-info__content h4 {
    color: #1767a1;
    font-size: 22px;
    font-family: DINNextLT;
    font-weight: 400;
    line-height: normal;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-landing__copyright p {
    color: #323436;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0;
}

.footer-landing__links {
    text-align: center;
    padding-bottom: 25px;
}

.footer-landing__copyright {
    border-top: 1px solid #ddd;
    padding-top: 22px;
    padding-bottom: 20px;
}

#chatMessages {
    height: 275px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

#bars-section {
    opacity: 0;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
}

#bars-section.show {
    opacity: 1;
    transform: translateX(10px);
    -webkit-transform: translateX(10px);
    -moz-transform: translateX(10px);
    -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
}

#close-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    top: 10px;
    left: -200px;
    z-index: 9999;
}

#close-btn .formkit--close {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #ffffff;
    box-shadow: 1px 1px 5px #ddd;
    padding: 10px;
}

.bacround-bottom {
    /* background-color:#000; */
    height: 200px;
}

.footer-menu {
    display: none;
}

@media (max-width:767px) {
    .footer-menu {
        background: hsla(0, 0%, 100%, 0.96);
        bottom: 0;
        box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, 0.06);
        display: block;
        height: 67px;
        left: 0;
        padding: 0;
        position: fixed;
        width: 100%;
        z-index: 9999;
    }

    .footer-menu ul {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: space-between;
        list-style: none;
        margin: 0;
        padding: 0;
        margin-right: 20px;
    }

    .footer-menu ul li {
        height: 68px;
        width: 33.33%;
        margin-top: 20px;
        padding: 0 10px;
        font-size: 13px;
    }

    .footer-menu ul li a {
        color: #000;
    }
}

/* header-3 */
.header-3 {
    margin-top: -4px;
}

.logo-header-md img {
    width: 140px;
}

.language-box {
    position: relative;
    display: inline-block;
}

.language-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
}

.language-handler {
    display: flex;
    align-items: center;
    gap: 10px;
}



.header-3 .language-box {
    background-color: #ffa300;
    margin-top: -3px;
    padding: 7px;
    border-radius: 5px;
    margin-right: 11px;
}


.header-3 .language-box i {
    color: #0e0303;
}

.language-flag img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.language-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
}

.language-options ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.language-options ul li {
    padding: 10px;
}

.language-options ul li a {
    color: #333;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.language-options ul li a i {
    margin-left: 8px;
}

.language-options ul li:hover {
    background-color: #f1f1f1;
}

.language-wrapper:hover .language-options {
    display: block;

}

.login-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.login-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.login-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.login-button:hover {
    background-color: #0056b3;
}

.signup-button {
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.signup-button:hover {
    background-color: #218838;
}

.header-3 .logo-header-md img {
    max-width: 150px;
    height: auto;
}

.bars {
    background: none;
    border: none;
    cursor: pointer;
}

.gravity-ui--bars-unaligned {
    font-size: 24px;
    color: #333;
}

.login-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -4px;
}

.login-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
}

.login-button, .signup-button {
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
    transition: background-color 0.3s ease;
}

.login-button {
    background-color: rgb(5, 46, 76);
}

.signup-button {
    background-color: rgb(5, 46, 76);
}

.login-button:hover {
    background-color: rgb(5, 46, 76);
}

.signup-button:hover {
    background-color: rgb(5, 46, 76);
}

.language-box {
    margin-left: 20px;
}

.language-handler {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* margin-top: 10px; */
}

.language-flag img {
    width: 20px;
    margin-right: 8px;
}

/* خيارات اللغة */
.language-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-options ul li a {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.language-options ul li.active-lang a {
    font-weight: bold;
}

dl.faq button {
    margin: 0;
    margin-top: 16px;
    padding: 4px 8px;
    font-weight: bold;
    font-size: 110%;
    border: none;
    background-color: transparent;
    border-radius: 5px;
}

dl dd {
    margin: 0;
    padding: 0;
    margin-left: 1.5em;
    padding-bottom: 20px;
    border-bottom: 2px solid #777;
}

dl.faq .desc {
    margin: 0;
    margin-top: 0.25em;
    padding: 0.25em;
    font-size: 110%;
    display: none;
    background-color: #fed;
}

dl.faq button:hover,
dl.faq button:focus {
    padding: 2px 6px;
    background-color: #def;
    border: 2px solid #005a9c;
    cursor: pointer;
}

/* dl.faq button[aria-expanded="false"]::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 1 11, 8 6' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E%0A");
    position: relative;
    left: -2px;
  } */

/* dl.faq button[aria-expanded="true"]::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' style='forced-color-adjust: auto;'%3E%3Cpolygon points='1 1, 11 1, 6 8' fill='currentcolor' stroke= 'currentcolor' /%3E%3C/svg%3E ");
    position: relative;
    left: -4px;
    top: 2px;
    margin-left: 10px;
    margin-right: 10px;
  } */


@media (max-width: 767.98px) {
    .logo-header-md img {
        max-width: 100px;
    }

    .login-box {
        display: none;
    }

    .bars {
        font-size: 20px;
        margin-top: 0px;
    }

    .language-handler {
        margin-top: 5px;
    }

    .header-3 {
        height: 60px;
    }
}

@media (min-width: 768px) {
    .bars {
        display: none;
    }

    .login-box {
        justify-content: flex-end;
    }

    .language-box {
        display: flex;
        align-items: center;
        margin-top: -20px;
    }

    .language-handler {
        /* margin-top: -30px; */
    }
}


@media (max-width: 375px) {
    .logo-header-md img {
        max-width: 100px;
        margin-top: -70px;
    }

    .login-box {
        display: none;
    }

    .bars {
        font-size: 20px;
        margin-top: -500px;
    }

    .language-handler {
        margin-top: -70px;
    }

    .header-3 {
        height: 60px;
    }
}

header {
    transition: background-color 0.3s ease;
}

header.scrolled {
    background-color: #f3a954;
}

header {
    /* background-color: transparent !important;/ */
    box-shadow: none !important;
}

.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.avatar img {
    border-radius: 50%;
    border: 2px solid #ccc;
}

.user-data h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 10px;
}

.user-data h4 img {
    vertical-align: middle;
    border-radius: 5px;
}

.story-data {
    border-top: 1px solid #868686 !important;
}


.story-data p {
    font-size: 14px;
    color: #868686 !important;
    padding-top: 20px !important;
}


.slick-slide {
    margin: 0 10px;
}

.slider-all {
    gap: 20px;
}

.story-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar.bg-dark {
    background-color: #343a40 !important;
    transition: background-color 0.3s ease-in-out;
}

.blog-title {
    text-align: start !important;
}


.navbar.fixed-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    transition: top 0.3s ease-in-out;
}

.navbar {
    transition: top 0.3s ease-in-out;
}

.language-options {
    display: none;
    position: absolute;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    min-width: 150px;
    list-style: none;
    z-index: 1000;
}

.language-select-wrapper {
    position: relative;
}

.language-select-wrapper.active .language-options {
    display: block;
}

.language-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    padding: 5px 10px;
    border-radius: 6px;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 15px;
}

.lang-option:hover {
    background-color: #f5f5f5;
}

.flag-icon {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.lang-text {
    font-size: 14px;
    color: #333;
}

@media (max-width: 767px) {
    .header-top__more.active {
        display: flex !important;
    }

    /* .header-top__more.active {
        display: flex !important;
        flex-direction: column;
        align-items: flex-end;
        background-color: #fff;
        padding: 10px;
        position: absolute;
        top: 70px;
        right: 0;
        z-index: 9999;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 100%;
    } */

    .header-top__user ul {
        right: 0;
        left: auto;
        width: 180px;
    }

    .language-options {
        position: absolute;
        top: 100%;
        right: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        width: 120px;
        display: none;
    }

    .language-wrapper:hover .language-options {
        display: block;
    }

    .bars {
        font-size: 24px;
        background: none;
        border: none;
        color: #333;
        z-index: 9999999999999999;
    }

    .header__myaccount__logo img {
        max-width: 120px;
    }
}

.img-text-slider .main-user {
    width: 75px !important;
    height: 100px;
}


.testimonial-slider {
    width: 100%;
    margin: auto;
    margin: 30px 0;
}

.testimonial-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.testimonial-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 15px;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #eee;
    object-fit: cover;
}

.testimonial-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.testimonial-info {
    font-size: 14px;
    color: #12b6c2;
    margin-bottom: 15px;
}

.testimonial-text {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

.quote-icon {
    font-size: 40px;
    color:#f3a954;
    position: absolute;
    bottom: 15px;
    right: 20px;
    opacity: 0.2;
}

.testimonial-date {
    font-size: 13px;
    color: #999;
    margin-top: 10px;
}

.testimonial-slider .slick-slide {
    opacity: 0.4;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.testimonial-slider .slick-center {
    opacity: 1 !important;
    transform: scale(1.05);
}

.testimonial-slider .slick-prev, .slick-next {
    display: none !important;
}
/* يخلي الكارت بالنص مع RTL */
[dir="rtl"] .slick-center {
  margin: 0 auto !important;
}
/* Container for notification icon */

/* Dropdown box */
.notification-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 999;
    padding: 10px;
}

/* Show dropdown on hover */
.header-top__notification:hover .notification-dropdown {
    display: block;
}

/* Style each notification item */
.notification-item {
    padding: 8px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 14px;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: #f9f9f9;
}