/* The public pages (landing, how it works, API docs). Moved out of the Blade partial so the browser keeps it. */

.container {
    max-width: 1140px !important;
}

@media (min-width: 992px) {
    .landing-page .header.hor-header {
        display: none;
    }
}

.landing-page .landing-statistics .card-body {
    border-radius: 50px 50px 0 50px;
}

.header {
    background: #fff;
    padding-block-start: 0.75rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid #e9edf4;
}

.services-statistics .card {
    background-color: transparent;
}

.landing-page .landing-title {
    background: linear-gradient(to right, transparent, #6c5ffc, transparent);
    height: 1px;
    margin: 0px auto;
    width: 70px !important;
    margin-block-end: 10px;
}

.bg-image-style {
    background-image: url(../images/landing/backgrounds/5.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    position: relative;
    border-radius: 0px;
    z-index: 0;
}

.landing-top-header {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    position: relative;
    border-radius: 0px;
}

.landing-top-header::before {
    position: absolute;
    content: "";
    inset-inline-start: -19%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    inset-inline-end: 0;
    width: 35%;
    height: 80%;
    overflow: hidden;

}

.landing-page .top.sticky.stickyClass {
    position: fixed;
    inset-block-start: 0;
    width: 100%;
    z-index: 99;
    border-block-end: 1px solid #ebedfa;
    background: #fff;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
}

.landing-page {
    background-color: #fff;
}

.bg-image-style::before {
    content: "";
    background-color: #ffffffa6;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0;
    position: absolute;
    z-index: -1;
}

.landing-page .bg-landing {
    background-color: #f8f9fb;
}

.bg-image-style {
    background-image: url(../images/landing/backgrounds/bg3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    position: relative;
    border-radius: 0px;
    z-index: 0;
}

.landing-statistics {
    padding-bottom: 50px;
}

.demo-screen-headline.reveal {
    transform: translateY(100px);
    opacity: 1;
    transition: all 0.3s ease;
}

.demo-screen-headline {
    /* padding-block-start: 50px; */
    padding-block-end: 15px;
}

.landing-page .animate-heading::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 2px;
    height: 100%;
    animation: cursorAnimate 0.8s steps(4) infinite;
}

.landing-page .animate-heading {
    position: relative;
    color: var(--primary-bg-color);
    letter-spacing: 0px;
    text-transform: capitalize;
    font-size: 2rem;
    animation: text 3s steps(4) infinite;
    overflow: hidden;
    display: flex;
}

.landing-top-header .demo-screen-headline h6 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

h1 {
    font-size: 38px;
}

/* custom */
.mt-c-7 {
    margin-top: 2rem !important;
}

.demo-screen-headline h4 {
    line-height: 1.5rem;
}

.demo-screen-headline h1 {
    line-height: 3rem;
}

.top-footer img {
    border: 1px solid transparent;
    border-radius: 6px;
}

.landing-page .bg-image-landing {
    background-image: url(../images/landing/backgrounds/3.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    position: relative;
}

.responsive-navbar {
    display: initial;
    flex-basis: inherit;
    flex-wrap: inherit;
}

/* .guest-footer{
    background-color: var(--primary-bg-color);
    padding: 1.5rem 1rem;
    color: #fff;
    a{
        color: #fff;
        font-weight: bolder;
        margin: 0px 4px;
    }
} */
.header {
    background: #fff;
    padding-block-start: 0.75rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px solid #e9edf4;
}

.hor-header .container.main-container div:first-child {
    align-items: center !important;
}

.d-flex {
    display: flex !important;
}

.app-sidebar__toggle {
    color: var(--primary-bg-color);
    z-index: 1;
    transition: padding-inline-start 0.3s ease;
    padding: 0 9px;
    text-align: center;
    font-size: 1.5rem;
    position: relative;
    inset-inline-end: 7px;
}

.app-sidebar__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-horizontal {
    display: none;
}

.navbar-toggler:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.125rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
}

.responsive-navbar {
    display: initial;
    flex-basis: inherit;
    flex-wrap: inherit;
}

.navbar-collapse {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
}

.navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.hor-header .container.main-container div:first-child {
    align-items: center !important;
}

.header-right-icons a {
    padding-block-start: 9px;
}



/* Four figures: one height (the card fills its column, and the label has room for two lines). */
.landing-page .landing-statistics .card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1.5rem 1rem;
}

.landing-page .landing-statistics .counter-text {
    min-height: 3em;
}

.landing-page .landing-statistics .counter-text h5 {
    line-height: 1.5;
}

/* Steps: five cards of one height. The number sits on the top edge of each card, and a dashed line joins the
   cards from 1200px, where they are in one row. */
.landing-page .landing-step {
    position: relative;
}

.landing-page .landing-step .card {
    position: relative;
    margin-top: 1.25rem;
    overflow: visible;
}

.landing-page .landing-step .card-body {
    padding: 2.25rem 1.25rem 1.5rem;
    border-radius: 12px;
}

.landing-page .landing-step-number {
    position: absolute;
    inset-block-start: -1.25rem;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 700;
    box-shadow: 0 0 0 4px #fff;
    z-index: 1;
}

html[dir="rtl"] .landing-page .landing-step-number {
    transform: translateX(50%);
}

html.idara-dark .landing-page .landing-step-number {
    box-shadow: 0 0 0 4px #17192a;
}

.landing-page .landing-step h4 {
    font-size: 1.1rem;
}

.landing-page .landing-step p {
    font-size: .95rem;
    line-height: 1.8;
}

@media (min-width: 1200px) {
    .landing-page .landing-step:not(:last-child)::after {
        content: "";
        position: absolute;
        inset-block-start: 1.25rem;
        inset-inline-start: calc(50% + 1.5rem);
        width: calc(100% - 3rem);
        border-block-start: 2px dashed var(--primary-bg-color);
        opacity: .45;
    }
}

/* The menu opened by the three dots on a phone: buttons in a row that wraps, in the page's own direction. */
.landing-menu-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
}

.landing-menu-actions .btn {
    position: static !important;
    margin: 0 !important;
}

/* Phones: the four figures two by two (a column of four 250px cards was a screen and a half for four numbers). */
@media (max-width: 575px) {
    .landing-page .landing-statistics .card-body {
        padding: 1rem .5rem;
    }

    .landing-page .landing-statistics .h1 {
        font-size: 28px;
    }

    .landing-page .landing-statistics .counter-text h5 {
        font-size: 13px;
    }

    /* the contact card sat inside two more cards of padding, which left 270px of 375 for the content */
    .landing-page #contact .card-body,
    .landing-page #contact .statistics-info {
        padding: .75rem !important;
    }
}

/* Footer: room between the columns when they stack, and links dark enough to read (the grey was about 3.7:1). */
.landing-page .top-footer p {
    margin-bottom: 1.5rem;
}

.landing-page .top-footer h6 {
    margin-bottom: .75rem;
}

.landing-page .top-footer ul li a {
    color: #4a4f6b;
}

/* Language switch: both languages shown, the current one filled. */
.lang-switch {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--primary-bg-color);
    border-radius: 999px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1;
}

.lang-switch-item {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    color: var(--primary-bg-color);
    text-decoration: none;
    white-space: nowrap;
}

.lang-switch-item.is-current {
    background: var(--primary-bg-color);
    color: #fff;
    font-weight: 600;
}

a.lang-switch-item:hover,
a.lang-switch-item:focus-visible {
    background: rgba(108, 95, 252, .12);
    color: var(--primary-bg-color);
}

.landing-page .header-nav-right .lang-switch {
    margin-inline-end: .5rem;
    align-self: center;
}

/* Hero: the message beside the picture from 992px, one under the other (centred) below that. */
.landing-hero .landing-hero-title {
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.4;
}

.landing-hero .landing-hero-text {
    max-width: 560px;
    margin-inline: auto;
    font-size: 17px;
    line-height: 1.9;
}

.landing-hero .landing-hero-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: 560px;
    margin: 0 auto 1.5rem;
    padding: 0;
    font-size: 15px;
    justify-items: center;
}

.landing-hero .landing-hero-points li {
    border: 0;
    padding: 0;
}

/* the theme makes this highlight a flex box that sits at the start of the line */
.landing-hero .animate-heading {
    display: block;
    text-align: center;
}

.landing-hero .landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.landing-hero .landing-hero-picture {
    max-width: 640px;
    margin: 1.5rem auto 0;
}

.landing-hero .landing-hero-picture img {
    display: block;
    margin-inline: auto;
    width: 100%;
    height: auto;
}

/* Below 992px the menu bar is fixed at the top and 75px tall: the hero must start under it, not behind it. */
@media (max-width: 991px) {
    html body .landing-hero.spacing-top {
        padding-top: 105px !important;
    }
}

/* From 992px: two columns, text at the start of the line, picture beside it. */
@media (min-width: 992px) {
    html body .landing-hero.spacing-top {
        padding-top: 30px !important;
    }

    .landing-hero .landing-hero-text {
        margin-inline: 0;
    }

    .landing-hero .landing-hero-points {
        margin-inline: 0;
        justify-items: start;
    }

    .landing-hero .animate-heading {
        text-align: start;
    }

    .landing-hero .landing-hero-actions {
        justify-content: flex-start;
    }

    .landing-hero .landing-hero-picture {
        max-width: none;
        margin: 0;
    }
}

/* A wide screen gets a wider page: 1140px left a 1920px screen mostly empty. */
@media (min-width: 1400px) {
    .landing-page .container,
    .landing-page .container-xxl {
        max-width: 1320px !important;
    }
}

/* Touch screens (phones and tablets): tap targets of at least about 40px. The footer links were 18px high. */
@media (max-width: 991px) {
    .landing-page .top-footer ul li a {
        display: inline-block;
        padding: 10px 0;
    }

    .landing-page .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    /* The opened phone menu is the page's sidebar, which on these pages is transparent (it is the top bar on a
       laptop): over the page its links were printed on top of the headline. Give it a background. */
    .landing-page .app-sidebar.bg-transparent {
        background-color: #ffffff !important;
        box-shadow: 0 0 24px rgba(43, 47, 74, 0.18);
        z-index: 1001;
    }

    .landing-page .app-sidebar .side-menu__item {
        color: #2b2f4a;
    }
}

/* The theme removes the container's side padding from 992px (a rule for its "horizontal" layout), but a row inside
   a container has -12px side margins. Between 992 and 1139px the container is as wide as the screen, so every row
   stuck out by 12px and the page scrolled sideways. The padding is put back in the content, not in the header. */
html body.landing-page.horizontal .main-content .container {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

@media (min-width: 992px) {
    .landing-page .header.hor-header {
        display: none;
    }

    .landing-page .navbar-toggler {
        border: 0 !important;
    }
}

@media (max-width: 991px) {
    .header.hor-header {
        position: fixed;
        border-block-end: 1px solid #e9edf4;
        width: 100%;
        z-index: 999;
        inset-block-start: 0;
    }

    .header {
        border-block-end: 1px solid rgba(255, 255, 255, 0.2);
        padding-block-start: 0.95rem;
        padding-block-end: 0.95rem;
    }

    .app-sidebar__toggle {
        padding-inline-start: 15px !important;
    }

    .logo-horizontal {
        display: block;
        inset-inline-start: 0;
        position: absolute;
        inset-inline-end: 0;
        width: inherit;
    }

    .landing-page .navresponsive-toggler {
        padding: 3px;
    }

    .responsive-navbar .navbar-collapse {
        padding: 0px 10px;
        position: fixed;
        width: 100%;
        background: #fff;
        margin-block-start: 41px;
        z-index: 999;
        box-shadow: 0 12px 11px -3px rgba(104, 113, 123, 0.1);
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-start: 0;
    }

    .sidebar-mini .responsive-navbar .navbar-collapse,
    .responsive-navbar .navbar-collapse {
        margin-block-start: 72px !important;
    }

    .sidebar-mini .responsive-navbar .navbar-collapse,
    .responsive-navbar .navbar-collapse {
        margin-block-start: 72px !important;
    }

    .responsive-navbar .navbar-collapse {
        padding: 0px 10px;
        position: fixed;
        width: 100%;
        background: #fff;
        margin-block-start: 41px;
        z-index: 999;
        box-shadow: 0 12px 11px -3px rgba(104, 113, 123, 0.1);
        inset-inline-start: 0;
        inset-inline-end: 0;
        inset-block-start: 0;
    }
}

/* The two home pages (Arabic and English) have a picture behind the menu; the other public pages have none. */
body.landing-home .landing-top-header {
    background-image: url(../images/landing/backgrounds/5.png);
}

body.landing-home .landing-top-header::before {
    background-image: url(../images/landing/backgrounds/1.png);
}

.landing-page .landing-contact-note {
    font-size: 13px;
    line-height: 1.7;
}

/* Footer links: a comfortable height to tap, on every screen (it was 18px). */
.landing-page .top-footer ul li a {
    display: inline-block;
    padding: 8px 0;
}

/* The API docs page has no hero: below 992px its first line must start under the fixed menu bar, not behind it. */
@media (max-width: 991px) {
    .landing-page .main-content.api-docs-content {
        padding-top: 80px;
    }
}

/* Reveal-on-scroll boxes start shifted sideways; until they are shown they stuck out of the page and added a
   sideways scroll (12px between 992 and 1139px on the Arabic page). "clip" cuts them without making the content a
   scroll box, so the sticky menu keeps working. */
.landing-page .main-content {
    overflow-x: clip;
}

/* The theme's own heading rules centre these; in the two-column hero they follow the reading direction. */
.landing-hero h1,
.landing-hero h4,
.landing-hero h6 {
    text-align: inherit;
}

/* From 992px the theme removes the side padding of the menu bar container, which pushed the logo against the edge
   of the screen (and cut it off on the English page between 992 and 1139px). */
html body.landing-page.horizontal .app-sidebar .container {
    padding-right: .75rem;
    padding-left: .75rem;
}

/* Centred below 992px, at the start of the line from 992px. (The theme redefines Bootstrap's text-center utilities, so
   the alignment is set here instead of with them.) */
.landing-hero .landing-hero-copy {
    text-align: center;
}

@media (min-width: 992px) {
    .landing-hero .landing-hero-copy {
        text-align: start;
    }
}

/* The logo sat against the screen edge from 992px: the row inside the container has a negative margin that cancelled
   the container's padding, so the padding goes on the bar itself. */
html body.landing-page.horizontal .app-sidebar .main-sidemenu {
    padding-right: .75rem !important;
    padding-left: .75rem !important;
}