.hero-title{ font-size: 2.5rem; line-height: 1.6; text-align: right; white-space: normal; word-break: break-word} @media (max-width: 575.98px){ .hero-title{ font-size: 1.9rem}} @media (max-width: 575.98px){ .hero-chip{ margin-left: .5rem !important}} main.page-v10 .hero-chip .fs-5{ font-size: .875rem !important} main.page-v10 .hero-chip .fs-6{ font-size: .82rem !important} @media (max-width: 575.98px){ html, body{ max-width: 100vw; overflow-x: hidden !important}} .stat-card{ min-height: 112px} [dir="rtl"] .blockquote-footer{ text-align: end} [dir="rtl"] .blockquote-footer .d-flex{ justify-content: flex-end} @media (max-width: 575.98px){ .stat-card h4, .stat-card p{ white-space: normal; word-break: break-word; overflow-wrap: anywhere; text-align: center}} .footer-psy{ direction: rtl; text-align: right; .footer-link{ color: rgba(255, 255, 255, 0.75); text-decoration: none; transition: color .15s ease, text-decoration-color .15s ease; i{ margin-left: .5rem; margin-right: 0; font-size: 1rem; line-height: 1} span{ line-height: 1.7} &:hover, &:focus{ color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px}} .text-cap{ font-weight: 600; font-size: .95rem; letter-spacing: .2px} .footer-text, .footer-psy ul, .footer-psy li, .footer-psy a{ white-space: normal; overflow-wrap: anywhere; word-break: break-word} .footer-hiring-badge{ display: inline-block; font-size: .85rem; font-weight: 700; color: #0d6efd; white-space: nowrap}} @media (max-width: 575.98px){ .footer-psy .list-inline{ display: block} .footer-psy .list-inline-item + .list-inline-item{ margin-right: 0; margin-top: .5rem}} .text-justify{ text-align: justify !important; text-align-last: right} .img-cover-430{ height: 430px; object-fit: cover; width: 100%} .img-w-10rem{ width: 10rem} .hero-bg{ background-image: url("../img/1920x1080/img11.c52f89f0ca35.jpg"); background-size: cover; background-position: center} footer[dir="rtl"] .list-unstyled{ padding-right: .3rem !important} .wave-bg{ background-image: url("/static/assets/svg/components/wave-pattern.a720b8a11ccf.svg"); background-repeat: no-repeat; background-position: center; background-size: cover} .list-checked{ padding-right: 0 !important; margin-right: 0 !important; text-align: right} .list-checked .list-checked-item{ text-align: right; padding-right: 1.5rem; padding-left: 0 !important} #header.navbar{ padding-top: 0.5rem !important; padding-bottom: 0.8rem !important} #header{ margin-top: 0 !important; padding-top: 0 !important} .d-flex.min-vh-lg-100{ min-height: auto !important} .navbar-brand-logo{ transform: scale(1.2); transform-origin: center} .shape-unclip{ margin: 0 !important; transform: translate(-1rem, 1rem)} html, body{ overflow-x: hidden !important; max-width: 100%} #content{ overflow-x: hidden !important} .rtl-left-shape-fix{ inset-inline-start: 0 !important; inset-inline-end: auto !important; margin-inline-start: -6rem !important; margin-inline-end: 0 !important} .rtl-left-shape-fix img{ max-width: 90%} .hero-excerpt{ text-align: justify; text-justify: inter-word} .hero-divider{ display:block; width:100%; height:1px; background: linear-gradient(to left, rgba(0,0,0,0.04), rgba(0,0,0,0.07), rgba(0,0,0,0.04)); margin: 1rem 0; border-radius: 1px} .post-meta{ direction: rtl; text-align: right; line-height: 1.9} .post-meta .meta-chip{ display: inline-flex; align-items: center; gap: .35rem; margin-inline-start: .9rem} .post-meta .bi{ font-size: .9em; line-height: 1} .post-meta a{ text-decoration: none; border-bottom: 1px solid transparent} .post-meta a:hover{ border-bottom-color: currentColor} @media (max-width: 576px){ .post-meta .meta-chip{ margin-inline-start: .6rem} .hero-divider{ margin: .75rem 0}} .article-body p{ text-align: justify; text-justify: inter-word} .share-list{ list-style:none; padding:0; margin:0; display:flex; align-items:center; flex-wrap:wrap; gap: .5rem} .share-btn{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:none; border-radius:8px; color:#fff; font-size:16px; line-height:1; cursor:pointer; text-decoration:none; transition:transform .08s ease, box-shadow .12s ease} .share-btn:active{ transform:scale(.95)} .share-twitter{ background:#1DA1F2} .share-telegram{ background:#0088cc} .share-whatsapp{ background:#25D366} .share-link{ background:#6c757d} .share-btn.copied{ box-shadow:0 0 0 3px rgba(108,117,125,.25) inset} .tag-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06); padding:.6rem .9rem; margin-top:1.84rem !important; direction:rtl} .tag-row{ display:flex; align-items:center; gap:.5rem .75rem} .tag-title{ color:#495057; white-space:nowrap} .tag-items{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem} .tag-pill{ display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:.34rem .7rem; font-size:.95rem; line-height:1.1; text-align:center; vertical-align:middle; background:#f6f8f9; color:#0b5c5c; border:1px solid rgba(0,0,0,.10); border-radius:6px; text-decoration:none; font-weight: 600} .tag-pill:hover{ background:#eef2f4; border-color:rgba(0,0,0,.14); color:#084c4c} .share-row{ margin-bottom:0 !important} @media (max-width:576px){ .tag-card{ padding:.55rem .8rem}} section[data-rel-slider] .rel-wrap, #related-posts .rel-wrap{ position: relative} section[data-rel-slider] .rel-viewport, #related-posts .rel-viewport{ direction: ltr; overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; user-select: none} section[data-rel-slider] .rel-viewport::-webkit-scrollbar, #related-posts .rel-viewport::-webkit-scrollbar{ display:none} section[data-rel-slider] .rel-track, #related-posts .rel-track{ display: flex; gap: 1rem; padding: .25rem 0; will-change: transform; transition: transform .45s cubic-bezier(.22,.61,.36,1)} section[data-rel-slider] .rel-track.is-animating, #related-posts .rel-track.is-animating{ pointer-events: none} section[data-rel-slider] .rel-card, #related-posts .rel-card{ flex: 0 0 100%; max-width: 100%; min-width: 0} section[data-rel-slider] .rel-card .card-body, #related-posts .rel-card .card-body{ direction: rtl; text-align: right; padding: .75rem .75rem .25rem} section[data-rel-slider] .rel-card .card-body .mb-2, section[data-rel-slider] .rel-card .card-body .card-title, section[data-rel-slider] .rel-card .card-body .rel-title, #related-posts .rel-card .card-body .mb-2, #related-posts .rel-card .card-body .card-title, #related-posts .rel-card .card-body .rel-title{ margin: 0; line-height: 1.35} section[data-rel-slider] .rel-card .card-body .card-text, section[data-rel-slider] .rel-card .card-body .rel-excerpt, #related-posts .rel-card .card-body .card-text, #related-posts .rel-card .card-body .rel-excerpt{ margin: 0} section[data-rel-slider] .rel-card .card-footer, #related-posts .rel-card .card-footer{ direction: rtl; text-align: right; padding-right: .875rem} section[data-rel-slider] .rel-card .card-footer .card-link, section[data-rel-slider] .rel-card .read-more, #related-posts .rel-card .card-footer .card-link, #related-posts .rel-card .read-more{ display: inline-block; position: relative; align-items: center; white-space: nowrap; padding-left: calc(0.75rem + 1.25rem + 0.6rem); padding-right: 0; line-height: 1.35; text-decoration: none; flex-direction: row-reverse} section[data-rel-slider] .rel-card .card-footer .card-link i, section[data-rel-slider] .rel-card .read-more i, section[data-rel-slider] .rel-card .card-footer .card-link .bi, section[data-rel-slider] .rel-card .read-more .bi, #related-posts .rel-card .card-footer .card-link i, #related-posts .rel-card .read-more i, #related-posts .rel-card .card-footer .card-link .bi, #related-posts .rel-card .read-more .bi{ display: inline-block; line-height: 1; font-size: .95rem} @media (min-width: 992px){ section[data-rel-slider] .rel-card, #related-posts .rel-card{ flex: 0 0 calc((100% - 2rem)/3); max-width: calc((100% - 2rem)/3)}} @media (max-width: 991.98px){ section[data-rel-slider] .rel-viewport, #related-posts .rel-viewport{ overflow: visible !important} section[data-rel-slider] .rel-track, #related-posts .rel-track{ transform: none !important; flex-wrap: wrap} section[data-rel-slider] .rel-card, #related-posts .rel-card{ flex: 0 0 100%; max-width: 100%; margin-bottom: 1.25rem} section[data-rel-slider] .rel-prev, section[data-rel-slider] .rel-next, #related-posts .rel-prev, #related-posts .rel-next{ display: none !important}} section[data-rel-slider] .rel-prev, section[data-rel-slider] .rel-next, #related-posts .rel-prev, #related-posts .rel-next{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(0,0,0,.55); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); -webkit-user-select: none; user-select: none; pointer-events: auto} section[data-rel-slider] .rel-prev, #related-posts .rel-prev{ right: .25rem} section[data-rel-slider] .rel-next, #related-posts .rel-next{ left: .25rem} section[data-rel-slider] .rel-prev:hover, section[data-rel-slider] .rel-next:hover, #related-posts .rel-prev:hover, #related-posts .rel-next:hover{ filter: brightness(1.1)} section[data-rel-slider] .rel-prev:focus-visible, section[data-rel-slider] .rel-next:focus-visible, #related-posts .rel-prev:focus-visible, #related-posts .rel-next:focus-visible{ outline: 2px solid #fff; outline-offset: 2px} section[data-rel-slider] .rel-prev.disabled, section[data-rel-slider] .rel-next.disabled, #related-posts .rel-prev.disabled, #related-posts .rel-next.disabled{ opacity: .5; cursor: not-allowed; pointer-events: auto} section[data-rel-slider] .rel-prev[aria-disabled="true"], section[data-rel-slider] .rel-next[aria-disabled="true"], #related-posts .rel-prev[aria-disabled="true"], #related-posts .rel-next[aria-disabled="true"]{ opacity: .5; cursor: not-allowed; pointer-events: auto} section[data-rel-slider] .rel-prev > i, section[data-rel-slider] .rel-next > i, #related-posts .rel-prev > i, #related-posts .rel-next > i{ line-height: 1; font-size: 1rem} section[data-rel-slider] .rel-track, #related-posts .rel-track{ direction: rtl} section[data-rel-slider] .rel-card .card-transition-zoom-item, section[data-rel-slider] .rel-card .card-transition-zoom-item *, #related-posts .rel-card .card-transition-zoom-item, #related-posts .rel-card .card-transition-zoom-item *{ pointer-events: none !important} section[data-rel-slider] .rel-card > a, #related-posts .rel-card > a{ position: relative; z-index: 4} @media (max-width: 991.98px){ section[data-rel-slider] .rel-viewport, #related-posts .rel-viewport{ position: relative; overflow: hidden} section[data-rel-slider] .rel-prev, section[data-rel-slider] .rel-next, #related-posts .rel-prev, #related-posts .rel-next{ z-index: 1} section[data-rel-slider] .rel-card, #related-posts .rel-card{ position: relative; z-index: 2} section[data-rel-slider] .rel-card > a, #related-posts .rel-card > a{ position: relative; z-index: 3; touch-action: manipulation} section[data-rel-slider] .rel-card .card-transition-zoom-item, section[data-rel-slider] .rel-card .card-transition-zoom-item *, #related-posts .rel-card .card-transition-zoom-item, #related-posts .rel-card .card-transition-zoom-item *{ pointer-events: none}} section[data-rel-slider]{ padding-top: 1rem !important; padding-bottom: 1.25rem !important} @media (min-width: 992px){ section[data-rel-slider]{ padding-top: 1.25rem !important; padding-bottom: 1.5rem !important}} section[data-rel-slider] h3{ margin-top: 0 !important} section[data-rel-slider] .w-lg-65.text-center.mx-lg-auto.mb-7{ margin-bottom: 1.25rem !important} section[data-rel-slider] .row.justify-content-center{ margin-top: 0 !important; margin-bottom: 0 !important} section[data-rel-slider] .card-body{ padding-bottom: .25rem !important} section[data-rel-slider] .card-footer{ padding-top: .25rem !important} #dash-userbar .content-space-b-lg-3{ padding-bottom: 1.25rem !important} .avatar-custom-56{ width: 50px; height: 50px; border-radius: 50%; object-fit: cover} :root{ --gap-bridge: 8px; --edu-nudge: 0px; --mega-lift: 0px; --edu-minw: 20rem; --edu-maxw: 56rem} .navbar .nav-item.hs-has-mega-menu > .nav-link{ position: relative} .navbar .nav-item.hs-has-mega-menu > .nav-link::after{ content: ""; position: absolute; left: 0; right: 0; height: 18px; bottom: -18px; pointer-events: none; display: block; background: transparent; z-index: 2} #header .hs-mega-menu.dropdown-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; pointer-events: none; display: block; background: transparent} #header .hs-mega-menu.dropdown-menu{ margin-top: 0 !important; padding-top: var(--gap-bridge) !important; z-index: 1001} @media (min-width: 992px){ #header #docsMegaMenu + .hs-mega-menu.edu-mega{ position: absolute; left: auto !important; right: 50% !important; transform: translateX(calc(50% + var(--edu-nudge))) translateY(calc(-1 * var(--mega-lift))) !important; width: auto !important; min-width: var(--edu-minw); max-width: min(90vw, var(--edu-maxw)); margin: 0 !important} #header #docsMegaMenu + .hs-mega-menu.edu-mega[data-bs-popper]{ left: auto !important; right: 50% !important; transform: translateX(calc(50% + var(--edu-nudge))) translateY(calc(-1 * var(--mega-lift))) !important; width: auto !important; min-width: var(--edu-minw); max-width: min(90vw, var(--edu-maxw))} #header #docsMegaMenu + .hs-mega-menu.edu-mega.dropdown-menu-start{ left: auto !important; right: 50% !important}} @media (max-width: 991.98px){ #header #docsMegaMenu + .hs-mega-menu.edu-mega{ position: static !important; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-shadow: none !important} .navbar .nav-item.hs-has-mega-menu > .nav-link::after, #header .hs-mega-menu.dropdown-menu::before{ display: none !important} #header #docsMegaMenu + .hs-mega-menu.edu-mega .navbar-dropdown-menu-media-title, #header #docsMegaMenu + .hs-mega-menu.edu-mega .navbar-dropdown-menu-media-desc{ text-align: right !important}} #header .hs-has-mega-menu.keep-open > .hs-mega-menu.dropdown-menu{ display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important} #signup-form .invalid-feedback, #signup-form .text-danger, #signup-form .form-text, #signup-form .is-invalid + .invalid-feedback, #signup-form .is-invalid ~ .invalid-feedback{ color: #a10f2b !important} #signup-form #matchMsg.text-danger{ color: #a10f2b !important} #reset-form .invalid-feedback, #reset-form .text-danger, #reset-form .form-text, #reset-form .is-invalid + .invalid-feedback, #reset-form .is-invalid ~ .invalid-feedback{ color: #a10f2b !important} #reset-form #matchMsg.text-danger{ color: #a10f2b !important} #related-posts .rel-track{ direction: rtl} .dropdown.dropstart > #advancedMgmt + .dropdown-menu{ position: absolute; top: 0; right: 100%; left: auto; margin: 0} .social-icons i{ color: var(--bs-primary) !important; opacity: 1} .social-icons a:hover i{ filter: brightness(0.95) saturate(1.1)} .footer-contacts{ direction: rtl; text-align: right !important; color: #fff} .footer-contacts h6{ color:#fff !important; margin-bottom:.75rem} .footer-contacts ul{ list-style:none; margin:0; padding:0; text-align:right !important} .footer-contacts .addr-list, .footer-contacts .phone-list{ padding-right:1.25rem} .footer-contacts .addr-list li, .footer-contacts .phone-list li{ display:flex; flex-direction:row; align-items:flex-start; gap:.5rem; width:100%; margin-bottom:.5rem; color:rgba(255,255,255,.95)} .footer-contacts .addr-list i, .footer-contacts .phone-list i, .footer-contacts .fc-link i{ color:var(--bs-primary, #0ABF53) !important; font-size:1rem; line-height:1; opacity:1; margin-top:.15rem} .footer-contacts .branch-label{ font-weight:700; color:#fff !important; white-space:nowrap} .footer-contacts .address-text{ font-weight:400; color:#fff !important; white-space:normal; overflow-wrap:anywhere} .footer-contacts .fc-link{ display:flex; align-items:flex-start; gap:.5rem; color:rgba(255,255,255,.95) !important; text-decoration:none; width:100%} .footer-contacts .fc-link:hover{ color:#fff !important; text-decoration:underline} .footer-contacts .addr-list li span, .footer-contacts .addr-list li strong, .footer-contacts .phone-list li span{ color:#fff !important} @media (max-width: 576px){ .footer-contacts .addr-list, .footer-contacts .phone-list{ padding-right:1rem} .footer-contacts .addr-list li, .footer-contacts .phone-list li{ margin-bottom:.6rem}} :root{ --contact-indent-desktop: 1.25rem; --contact-indent-mobile: 1rem; --contact-icon-gap: .5rem} .footer-contacts .addr-list, .footer-contacts .phone-list{ padding-right: var(--contact-indent-desktop)} .footer-contacts .addr-list li, .footer-contacts .phone-list li, .footer-contacts .fc-link{ gap: var(--contact-icon-gap)} @media (max-width: 576px){ .footer-contacts .addr-list, .footer-contacts .phone-list{ padding-right: var(--contact-indent-mobile)}} .footer-contacts{ direction: rtl; text-align: right !important; color: #fff} .footer-contacts ul{ list-style: none; margin: 0; padding: 0; text-align: right !important} .footer-contacts .addr-list, .footer-contacts .phone-list{ padding-right: 1.25rem} .footer-contacts .addr-list li, .footer-contacts .phone-list li{ display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; margin-bottom: 0.5rem; color: rgba(255,255,255,0.95)} .footer-contacts .addr-list i, .footer-contacts .phone-list i, .footer-contacts .fc-link i{ color: var(--bs-primary, #0ABF53) !important; font-size: 1rem; line-height: 1; opacity: 1; margin-top: 0.15rem} .footer-contacts .phone-list i, .footer-contacts .fc-link i{ padding-right: 0.25rem} .footer-contacts .branch-label{ font-weight: 700; color: #fff !important; white-space: nowrap} .footer-contacts .address-text{ font-weight: 400; color: #fff !important; white-space: normal; overflow-wrap: anywhere} .footer-contacts .fc-link{ display: flex; align-items: flex-start; gap: 0.5rem; color: rgba(255,255,255,0.95) !important; text-decoration: none; width: 100%} .footer-contacts .fc-link:hover{ color: #fff !important; text-decoration: underline} .test-hero__media{ --hero-aspect: 16 / 9; width: 100%; aspect-ratio: var(--hero-aspect); border-radius: 1rem; overflow: hidden; background: #000} .test-hero__media img, .test-hero__media picture{ width: 100%; height: 100%; display: block; object-fit: cover; object-position: center} .test-hero__caption{ margin-top: .5rem; padding-inline: 1rem; font-size: .95rem; color: #6c757d; line-height: 1.7} @media (min-width: 1400px){ .test-hero__media{ max-height: 560px}} @media (max-width: 480px){ .test-hero__media{ aspect-ratio: auto; max-height: 65svh; display: grid; place-items: center; background: #000} .test-hero__media img, .test-hero__media picture{ object-fit: contain !important; object-position: center center; width: 100%; height: auto; max-height: 100%; display: block} .test-hero__caption{ font-size: .875rem}} @supports not (aspect-ratio: 1 / 1){ .test-hero__media{ height: clamp(180px, 45vw, 360px)} .test-hero__media img, .test-hero__media picture{ height: 100%} @media (max-width: 480px){ .test-hero__media{ height: auto; max-height: 65svh; display: grid; place-items: center} .test-hero__media img, .test-hero__media picture{ height: auto; max-height: 100%; object-fit: contain !important}}} :root{ --tr-brand:#0ea5a3; --tr-brand-05:#f7fdfd; --tr-brand-10:#f0fbfb; --tr-brand-15:#e6f7f6; --tr-brand-30:#c8efed; --tr-text:#0b3d3c} :lang(fa){ font-kerning: normal; font-variant-ligatures: contextual common-ligatures} .tr-justify, .tr-justify p, .tr-justify li{ text-align: justify; text-align-last: right; text-justify: inter-word; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; line-height: 1.95} @media (max-width: 375px){ .tr-justify, .tr-justify p, .tr-justify li{ text-align: start; text-align-last: start}} .badge.tr-chip{ background: var(--tr-brand-10) !important; color: #0d3a39 !important; border: 1px solid var(--tr-brand-30) !important} .tr-green-card{ background: var(--tr-brand-15) !important; border: 1px solid var(--tr-brand) !important; border-radius: .75rem !important} .tr-green-card h2{ color: var(--tr-text)} .tr-green-section{ background: var(--tr-brand-15) !important; border: 1px solid var(--tr-brand) !important; border-radius: .75rem !important} .test-hero__media{ width:100%; aspect-ratio: 16 / 9; border-radius: 1rem; overflow:hidden; background:#000} .test-hero__media img{ width:100%; height:100%; object-fit: cover; object-position: center; display:block} .test-hero__caption{ margin-top:.5rem} @media (max-width: 575.98px){ [dir="rtl"] .navbar > .container, [dir="rtl"] .navbar > .container-fluid{ padding-inline-start: .5rem} [dir="rtl"] .navbar .navbar-brand{ margin-inline-end: .6rem !important} [dir="rtl"] .navbar .navbar-toggler{ margin-inline-start: .25rem !important}} @media (max-width: 991.98px){ .dropdown.dropstart > .dropdown-menu{ position: static !important; inset: auto !important; transform: none !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; box-shadow: none !important; text-align: right} .dropdown.dropstart:hover > .dropdown-menu{ display: none !important} .dropdown.dropstart > .dropdown-menu.show{ display: block !important}} .dropdown.dropstart > #personalityTests + .dropdown-menu{ position: absolute; top: 0; right: 100%; left: auto; margin: 0} #content .offset-2lines{ padding-top: calc(2lh); padding-top: 3em} section[data-rel-slider] .rel-card .card-transition-zoom-item{ height: 220px; overflow: hidden} section[data-rel-slider] .rel-card .card-img{ display: block; width: 100%; height: 220px; object-fit: cover; object-position: center} .dropdown.dropstart > #flashcardsMenu + .flashcards-submenu{ position: absolute; top: 0; right: calc(100% + 0.7rem); left: auto; margin: 0; white-space: nowrap; min-width: 17rem; padding-top: 0.35rem; padding-bottom: 0.35rem} .flashcards-submenu .dropdown-item + .dropdown-item{ margin-top: 0.5rem; padding-top: 0.5rem; border-top: 0; position: relative} .flashcards-submenu .dropdown-item + .dropdown-item::before{ content: ""; position: absolute; top: 0; right: 1rem; left: 1rem; height: 1px; background: linear-gradient(to left, transparent, #dfe3ea 18%, #dfe3ea 82%, transparent); pointer-events: none} .navbar .dropdown.dropstart > #flashcardsMenu + .flashcards-submenu::before{ display: none} #flashcardsMenu::after{ margin-left: -0.5rem !important} #header .edu-mega .dropdown.dropstart{ position: relative} #header .edu-mega .dropdown.dropstart::before{ content: ""; position: absolute; top: -6px; bottom: -6px; right: -4px; left: -16px; background: transparent; pointer-events: auto} .rel-card .card-body{ padding: .75rem .75rem .5rem; row-gap: .35rem} .rel-card .card-body h4{ line-height: 1.6; margin: 0 0 .4rem 0} .rel-card .card-body .text-muted, .rel-card .card-body .small, .rel-card .card-body .card-text{ line-height: 1.65} .rel-card .card-footer{ padding-top: .4rem} .rel-card .card-link{ line-height: 1.6} section[data-rel-slider] .rel-card .card-body h4.mb-2.text-truncate{ line-height: 1.7 !important; margin: 0 0 .45rem 0 !important} section[data-rel-slider] .rel-card .card-body .small, section[data-rel-slider] .rel-card .card-body .text-muted, section[data-rel-slider] .rel-card .card-body .card-text{ line-height: 1.65 !important} .tr-card-title-wrap{ position: relative} .blog-category-chips .btn{ font-size: 1.05rem; font-weight: 700} .blog-category-chips .btn i{ font-size: 1.1rem} .tr-badge-dot{ position: absolute; top: -6px; left: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background-color: #ef4444; color: #fff; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff} .tr-inline-badge{ display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; margin-right: .35rem; font-size: 11px; border-radius: 999px; background-color: #bbf7d0; color: #14532d; font-weight: 600; line-height: 1.4; white-space: nowrap} @media (min-width: 992px){ .tk-article section[id], .tk-article h2[id], .tk-article h3[id], .tk-article h4[id]{ scroll-margin-top: 140px}} @media (max-width: 991.98px){ .tk-article section[id], .tk-article h2[id], .tk-article h3[id], .tk-article h4[id]{ scroll-margin-top: 130px}} @media (min-width: 992px){ .tk-article [id^="section-"], .tk-article [id^="gloss-"], .tk-article #glossary{ scroll-margin-top: 140px}} @media (max-width: 991.98px){ .tk-article [id^="section-"], .tk-article [id^="gloss-"], .tk-article #glossary{ scroll-margin-top: 130px}} .tk-article p, .tk-article li{ font-size: 1.25rem; line-height: 2} .breadcrumb .breadcrumb-item:last-child::before{ content: none !important} @media (max-width: 991.98px){ #related-posts .rel-viewport{ overflow: visible !important} #related-posts .rel-track{ transform: none !important; flex-wrap: wrap} #related-posts .rel-card{ flex: 0 0 100%; max-width: 100%} #related-posts .rel-prev, #related-posts .rel-next{ display: none !important} #related-posts .rel-track .rel-card:nth-child(n+7){ display: none !important}} @media (max-width: 991.98px){ #header .hs-mega-menu[aria-labelledby="blogMegaMenu"]{ width: 100% !important; max-width: 100% !important; min-width: 0 !important; z-index: 1050 !important; background-color: #fff !important; max-height: calc(100dvh - 6.5rem) !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 1rem !important; -webkit-overflow-scrolling: touch} #header .hs-mega-menu[aria-labelledby="blogMegaMenu"] .navbar-dropdown-menu-inner{ padding-bottom: 1rem !important} #header .hs-mega-menu[aria-labelledby="blogMegaMenu"] .row.g-0 > .col-6{ width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important} #header .hs-mega-menu[aria-labelledby="blogMegaMenu"] .row.g-0 > .col-6.pe-3{ padding-right: 0 !important} #header .hs-mega-menu[aria-labelledby="blogMegaMenu"] .row.g-0 > .col-6.ps-3{ padding-left: 0 !important; margin-top: .75rem !important} #header .hs-mega-menu[aria-labelledby="blogMegaMenu"] .dropdown-item, #header .hs-mega-menu[aria-labelledby="blogMegaMenu"] .dropdown-header{ white-space: normal !important}} #header .navbar-nav a.btn.btn-ghost-dark.text-end{ text-align: center !important} #header .navbar-nav a.btn.btn-ghost-dark.text-end > span, #header .navbar-nav a.btn.btn-ghost-dark.text-end > small{ text-align: center !important} @media (min-width: 992px){ #header .navbar-nav > li:nth-last-child(-n+3){ margin-inline: .15rem !important} #header .navbar-nav > li:nth-last-child(-n+3) .btn{ padding-inline: .55rem !important} #header.navbar .navbar-nav-wrap{ justify-content: flex-start !important; gap: .85rem !important; width: auto !important} #header.navbar #navbarNavDropdown.navbar-collapse{ flex: 0 1 auto !important; flex-grow: 0 !important; flex-basis: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important} #header.navbar #navbarNavDropdown .navbar-absolute-top-scroller{ width: auto !important; margin: 0 !important; padding: 0 !important} #header.navbar #navbarNavDropdown .navbar-nav{ margin: 0 !important; padding: 0 !important; width: auto !important; justify-content: flex-start !important; margin-inline-start: 0 !important; margin-inline-end: 0 !important} #header.navbar #navbarNavDropdown .navbar-nav .nav-link{ padding-inline: .3rem !important} @media (min-width: 992px) and (max-width: 1399.98px){ #header.navbar #navbarNavDropdown .navbar-nav .nav-link{ padding-inline: .18rem !important; font-size: .92rem !important} #header .navbar-nav a.btn.btn-ghost-dark small{ max-width: 8ch !important}} @media (min-width: 992px) and (max-width: 1199.98px){ #header .navbar-nav a.btn.btn-ghost-dark small{ display: none !important}} #header.navbar .navbar-brand{ margin: 0 !important; padding: 0 !important; margin-inline-end: .6rem !important} #header .guide-support-dropdown{ text-align: right} #header .guide-support-dropdown .dropdown-item{ padding-top: .55rem; padding-bottom: .55rem} #header .guide-support-dropdown .dropdown-item i{ font-size: 1rem} #header .guide-support-root{ position: relative} #header .guide-support-root > .hs-mega-menu.guide-support-dropdown, #header .guide-support-root > .hs-mega-menu.guide-support-dropdown[data-bs-popper]{ left: auto !important; right: 0 !important; transform: none !important; width: max-content !important; min-width: 0 !important; max-width: 90vw !important; margin: 0 !important; margin-top: 1rem !important}} @media (min-width: 992px){ #header .tests-mega-root{ --tests-nudge: -10px; --tests-lift: 0px; --tests-sub-nudge-x: .5rem; --tests-sub-nudge-y: 0px; position: relative} #header .tests-mega-root #testsMegaMenu + .hs-mega-menu.tests-mega .dropdown.dropstart > .dropdown-menu{ top: var(--tests-sub-nudge-y) !important; right: calc(100% + var(--tests-sub-nudge-x)) !important; left: auto !important; margin: 0 !important} #header .tests-mega-root #testsMegaMenu + .hs-mega-menu.tests-mega{ left: auto !important; right: 0 !important; transform: translateX(var(--tests-nudge)) translateY(calc(-1 * var(--tests-lift))) !important; width: max-content !important; min-width: 0 !important; max-width: 90vw !important; margin: 0 !important} #header .tests-mega-root #testsMegaMenu + .hs-mega-menu.tests-mega[data-bs-popper]{ left: auto !important; right: 0 !important; transform: translateX(var(--tests-nudge)) translateY(calc(-1 * var(--tests-lift))) !important; width: max-content !important; min-width: 0 !important; max-width: 90vw !important; margin: 0 !important} #header .tests-mega-root #testsMegaMenu + .hs-mega-menu.tests-mega.dropdown-menu-start{ left: auto !important; right: 0 !important}} .tr-cta-phone{ position: relative; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: linear-gradient(135deg, #20c997, #0f7a5b); color: white !important; border-radius: 50%; font-size: 1.1rem; box-shadow: 0 3px 8px rgba(32, 201, 151, 0.4); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-decoration: none; z-index: 1000} .tr-cta-phone:hover{ transform: scale(1.1); box-shadow: 0 5px 15px rgba(32, 201, 151, 0.6); color: white} .tr-cta-phone{ animation: pulse-green 2s infinite} @keyframes pulse-green{ 0%{ box-shadow: 0 0 0 0 rgba(32, 201, 151, 0.7)} 70%{ box-shadow: 0 0 0 6px rgba(32, 201, 151, 0)} 100%{ box-shadow: 0 0 0 0 rgba(32, 201, 151, 0)}} .tr-cta-phone::before{ content: attr(data-tooltip); position: absolute; top: 120%; left: 50%; transform: translateX(-50%) translateY(-10px); background-color: #333; color: #fff; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-family: 'Vazir', sans-serif; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none} .tr-cta-phone::after{ content: ''; position: absolute; top: 110%; left: 50%; transform: translateX(-50%) translateY(-10px); border-width: 5px; border-style: solid; border-color: transparent transparent #333 transparent; opacity: 0; visibility: hidden; transition: all 0.3s ease} .tr-cta-phone:hover::before, .tr-cta-phone:hover::after{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0)} a.tr-cta-phone[href^="tel:"]::before, a.tr-cta-phone[href^="tel:"]::after{ display: none} .release-entry-card{ position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 16px; width: fit-content; max-width: 100%; padding: 16px 20px 16px 22px; border-radius: 16px; border: 1px solid rgba(7, 124, 118, 0.28); background: linear-gradient(135deg, rgba(10, 191, 83, 0.07), rgba(7, 124, 118, 0.10)); box-shadow: 0 10px 26px -14px rgba(7, 124, 118, 0.40), 0 2px 8px -4px rgba(31, 41, 59, 0.10); color: #1b2924; transition: transform 240ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms ease, border-color 240ms ease, background 240ms ease} .release-entry-card:hover, .release-entry-card:focus{ transform: translateY(-2px); border-color: rgba(7, 124, 118, 0.50); background: linear-gradient(135deg, rgba(10, 191, 83, 0.11), rgba(7, 124, 118, 0.15)); box-shadow: 0 18px 38px -14px rgba(7, 124, 118, 0.48), 0 4px 12px -4px rgba(31, 41, 59, 0.14)} .release-entry-glow{ position: absolute; inset: 0 0 0 auto; width: 4px; background: linear-gradient(180deg, #0ABF53, #077C76)} .release-entry-icon{ flex: 0 0 auto; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.4rem; color: #fff; background: linear-gradient(135deg, #0ABF53, #077C76); box-shadow: 0 6px 14px -4px rgba(7, 124, 118, 0.55)} .release-entry-text{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0} .release-entry-title{ display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.1rem); color: #14241e; line-height: 1.4} .release-entry-badge{ flex: 0 0 auto; padding: 2px 9px; font-size: .68rem; font-weight: 700; letter-spacing: .02em; line-height: 1.6; color: #fff; background: linear-gradient(135deg, #0ABF53, #077C76); border-radius: 999px} .release-entry-sub{ font-size: clamp(0.95rem, 1.1vw, 1.05rem); color: #2d3d35; font-weight: 500; line-height: 1.7} .release-entry-arrow{ flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; color: #077C76; background: rgba(7, 124, 118, 0.12); transition: transform 240ms cubic-bezier(.2,.7,.2,1), background 240ms ease, color 240ms ease} .release-entry-card:hover .release-entry-arrow, .release-entry-card:focus .release-entry-arrow{ transform: translateX(-4px); background: linear-gradient(135deg, #0ABF53, #077C76); color: #fff} @media (max-width: 575.98px){ .release-entry-card{ width: 100%; padding: 13px 16px 13px 18px; gap: 12px; border-radius: 14px} .release-entry-icon{ width: 42px; height: 42px; font-size: 1.2rem; border-radius: 11px} .release-entry-arrow{ display: none}} .rel-badge{ display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; margin-inline-start: 8px; vertical-align: middle; white-space: nowrap} .rel-badge.badge-new{ background: #d1f7e0; color: #0b6e3a; box-shadow: 0 0 0 3px rgba(17, 145, 88, .12)} .rel-badge.badge-verified{ background: #e3f2ec; color: #157347} .rel-badge.badge-rejected{ background: #fde8e8; color: #a4262c} .partner-slide{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; height: 100%; min-height: 108px; padding: 1rem 1.25rem; background: #fff; border: 1px solid rgba(33, 50, 91, .08); border-radius: 1rem; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease} .partner-slide:hover, .partner-slide:focus{ transform: translateY(-4px); border-color: rgba(55, 125, 255, .35); box-shadow: 0 .75rem 1.75rem rgba(33, 50, 91, .08); text-decoration: none} .partner-slide-name{ font-weight: 700; color: #1e2022; font-size: .95rem; line-height: 1.6} .partner-slide-desc{ font-size: .78rem; color: #77838f; line-height: 1.6} .partner-slide-icon{ font-size: .8rem; color: #377dff; margin-top: .15rem} .js-swiper-clients .swiper-slide{ height: auto} .article-sheet{ background: #fff; border: 1px solid rgba(15, 23, 42, .06); border-radius: clamp(18px, 2.5vw, 28px); box-shadow: 0 1rem 3rem rgba(15, 23, 42, .05); padding: clamp(1.25rem, 3vw, 3rem)} @media (min-width: 992px){ #header .tests-mega-root #testsMegaMenu + .hs-mega-menu.tests-mega, #header .tests-mega-root #testsMegaMenu + .hs-mega-menu.tests-mega[data-bs-popper]{ margin-top: 1rem !important} #header .tests-mega .dropdown.dropstart{ position: relative} #header .tests-mega .dropdown.dropstart::before{ content: ""; position: absolute; top: -6px; bottom: -6px; right: -4px; left: -18px; background: transparent; pointer-events: auto}} #partners .partners-wrap{ background: linear-gradient(135deg, #eef5ff 0%, #f0fdf9 55%, #fdf4ff 100%); border: 1px solid rgba(55, 125, 255, .08); overflow: hidden} .partner-card-v2{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; height: 100%; padding: 1.75rem 1.25rem; background: #fff; border: 1px solid rgba(33, 50, 91, .07); border-radius: 1.25rem; text-decoration: none; color: #1e2022; box-shadow: 0 .35rem 1rem rgba(33, 50, 91, .05); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease} .partner-card-v2:hover, .partner-card-v2:focus{ transform: translateY(-6px); box-shadow: 0 1rem 2.25rem rgba(33, 50, 91, .12); color: #1e2022; text-decoration: none} .partner-chip{ width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; font-size: 1.6rem; color: #fff; margin-bottom: .35rem; box-shadow: 0 .5rem 1.25rem rgba(30, 32, 34, .18)} .partner-name{ font-size: 1.15rem; font-weight: 800; margin: 0; line-height: 1.6} .partner-desc{ font-size: 1rem; color: #77838f; margin: 0; line-height: 1.9; flex-grow: 1} .partner-visit{ display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 700; border-radius: 999px; padding: .45rem 1.1rem; color: #1e2022; background: #f6f9fc; transition: background .2s ease, color .2s ease} .partner-card-v2:hover .partner-visit{ background: #1e2022; color: #fff} .partner-logo{ width: 48px; height: 48px; object-fit: contain; border-radius: 0.5rem; display: block} .pc-blue .partner-chip{ background: linear-gradient(135deg, #3b82f6, #1d4ed8)} .pc-teal .partner-chip{ background: linear-gradient(135deg, #14b8a6, #0f766e)} .pc-indigo .partner-chip{ background: linear-gradient(135deg, #818cf8, #4f46e5)} .pc-green .partner-chip{ background: linear-gradient(135deg, #34d399, #059669)} .pc-orange .partner-chip{ background: linear-gradient(135deg, #fb923c, #ea580c)} .pc-purple .partner-chip{ background: linear-gradient(135deg, #c084fc, #9333ea)} .pc-blue{ border-top: 4px solid #3b82f6} .pc-teal{ border-top: 4px solid #14b8a6} .pc-indigo{ border-top: 4px solid #6366f1} .pc-green{ border-top: 4px solid #10b981} .pc-orange{ border-top: 4px solid #f97316} .pc-purple{ border-top: 4px solid #a855f7} #partners .rel-card{ flex: 0 0 100%; max-width: 100%; min-width: 0} @media (min-width: 576px){ #partners .rel-card{ flex: 0 0 50%; max-width: 50%}} @media (min-width: 992px){ #partners .rel-card{ flex: 0 0 32%; max-width: 32%}} #partners .rel-prev, #partners .rel-next{ border: 1px solid rgba(33, 50, 91, .12)} main.page-v10{ font-size: 1.05rem} main.page-v10 .fs-6{ font-size: 1.1rem !important} main.page-v10 .small{ font-size: 1rem !important} main.page-v10 p{ line-height: 2} #header .hs-mega-menu.dropdown-menu:not([style*="display: block"]) .dropdown-menu, #header .hs-mega-menu.dropdown-menu[style*="display: none"] .dropdown-menu{ display: none !important} @media (max-width: 575.98px){ #partners .rel-viewport{ overflow-x: auto}} body[data-season="spring"]{ --hero-season-rgb: 63, 158, 110} body[data-season="summer"]{ --hero-season-rgb: 222, 153, 58} body[data-season="autumn"]{ --hero-season-rgb: 192, 112, 61} body[data-season="winter"]{ --hero-season-rgb: 91, 141, 184} .hero-date-pill{ display: inline-flex; align-items: center; gap: .5rem; padding: .4rem 1rem; margin-bottom: 1.25rem; border-radius: 50rem; background: rgba(255, 255, 255, .85); border: 1px solid rgba(var(--hero-season-rgb, 91, 141, 184), .35); box-shadow: 0 .35rem 1rem -.5rem rgba(0, 0, 0, .18); font-size: .9rem; font-weight: 600; color: #333f48; backdrop-filter: blur(4px)} .hero-date-pill .hero-date-icon{ color: rgb(var(--hero-season-rgb, 91, 141, 184))} .hero-date-dot{ position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: #2fb380; flex-shrink: 0} .hero-date-dot::after{ content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: heroDatePulse 2.4s ease-out infinite} @keyframes heroDatePulse{ 0%{ transform: scale(1); opacity: .6} 70%, 100%{ transform: scale(2.4); opacity: 0}} @media (prefers-reduced-motion: reduce){ .hero-date-dot::after{ animation: none}} .hero-media::after{ content: ''; position: absolute; inset: 0; border-radius: .375rem; pointer-events: none; background: linear-gradient(135deg, rgba(var(--hero-season-rgb, 91, 141, 184), .16), rgba(var(--hero-season-rgb, 91, 141, 184), .03) 60%)} @media (max-width: 575.98px){ .hero-date-pill{ margin-bottom: 1rem; font-size: .8rem}} .hiw-page{ font-size: 1.0625rem; color: #3e4962} .hiw-page .table{ font-size: 1.05rem} .hiw-page .table .badge{ font-size: .9rem} .hiw-page .no-spam-pledge .fs-6{ font-size: 1rem !important} .faq-page{ font-size: 1.0625rem; color: #3e4962} .faq-page h1.display-5{ font-size: 3rem} .faq-page h2.h4{ font-size: 1.4rem} .faq-page .accordion-button{ font-size: 1.18rem} .faq-page .accordion-body{ font-size: 1.08rem; line-height: 2.1} .faq-page .no-spam-pledge .fs-6{ font-size: 1rem !important} @media (max-width: 575.98px){ .faq-page h1.display-5{ font-size: 2.1rem} .faq-page .accordion-button{ font-size: 1.05rem} .faq-page .accordion-body{ font-size: 1rem}} .hiw-timeline{ position: relative; padding-inline-start: 0} .hiw-timeline__item{ position: relative; display: flex; gap: 1rem; align-items: flex-start; padding: 0 0 1.4rem 0; padding-inline-start: 3.4rem} .hiw-timeline__item:last-child{ padding-bottom: 0} .hiw-timeline__item::before{ content: ''; position: absolute; top: 2.6rem; bottom: -.2rem; inset-inline-start: 1.15rem; width: 2px; background: linear-gradient(#c9dcff, #e7efff)} .hiw-timeline__item:last-child::before{ display: none} .hiw-timeline__dot{ position: absolute; inset-inline-start: 0; top: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: #fff; color: #1c5ed6; font-size: 1.05rem; border: 2px solid #c9dcff; box-shadow: 0 2px 6px rgba(28, 94, 214, .12)} .hiw-timeline__item strong{ display: block; margin-bottom: .15rem} .hiw-video{ border: 0; border-radius: 1rem; box-shadow: 0 4px 16px rgba(15, 55, 92, .07)} .hiw-video__ph{ display: flex; align-items: center; justify-content: center; width: 100%; max-width: 640px; aspect-ratio: 16/9; margin: 0 auto; border-radius: .8rem; background: radial-gradient(circle at 30% 30%, rgba(55, 125, 255, .25), transparent 60%), linear-gradient(135deg, #eef4ff, #dce8ff); border: 1px dashed #9dbfff} .hiw-video__ph i{ font-size: 3.4rem; color: #1c5ed6; opacity: .85} .no-spam-pledge{ border: 0; border-radius: 1rem; box-shadow: 0 4px 16px rgba(15, 55, 92, .07); border-inline-start: 5px solid #0f7a5b} .no-spam-pledge__icon{ font-size: 2.2rem; color: #0f7a5b; line-height: 1} .demo-banner{ display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; margin-bottom: 1.5rem; border-radius: 1rem; border: 1px solid #ffd57e; background: linear-gradient(135deg, #fff9ec, #fff3d6); color: #6b4e0e} .demo-banner i{ font-size: 1.4rem; color: #d99a06; flex-shrink: 0; margin-top: .1rem} .demo-banner p{ margin: 0; line-height: 1.9; font-size: .98rem} .enamad-seal{ width: 96px; height: 96px; object-fit: contain} :root{ --bs-primary: #0a8436; --bs-primary-rgb: 10, 132, 54; --bs-link-color: #0a8436; --bs-link-color-rgb: 10, 132, 54; --bs-link-hover-color: #086b2c} .hero-media picture{ display: block} .btn-primary{ --bs-btn-bg: #0a8436; --bs-btn-border-color: #0a8436; --bs-btn-hover-bg: #086b2c; --bs-btn-hover-border-color: #086b2c; --bs-btn-active-bg: #076028; --bs-btn-active-border-color: #076028; --bs-btn-focus-shadow-rgb: 10, 132, 54} .release-entry-badge{ background: #0a8436} .partner-desc{ color: #687480} .text-primary-light{ color: #5cd69c}