body {
    font-family: Tajawal, sans-serif;
    overflow-x: hidden;
    background-color: #eff2f5;
    background-color: #fff
}

header {
    height: 640px;
    position: relative;
    background: url(../img/5.svg) no-repeat scroll center center / cover border-box, linear-gradient(73deg, #8134cc 0, #3685ba 100%) no-repeat scroll center center / cover;
    /*border-radius: 0 0 32px 32px;
    margin: 0 14px;
    /* box-shadow: 0 0 2px 0px #5a7ac4; */
}

.header-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 290px
}

header nav .nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0
}

nav {
    position: relative
}

    nav .nav-logo a {
        color: #fff;
        font-size: 30px;
        text-decoration: none !important;
    }

    nav .nav-logo img {
        width: 190px;
        image-rendering: auto;
        object-fit: contain
    }

    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        margin: 0 15px
    }

        nav ul li {
            display: inline-block;
            padding: 0 10px
        }

            nav ul li a {
                text-decoration: none !important;
                color: #fff !important;
                outline: 0 !important;
                font-size: 15px;
                position: relative;
                transition: .3s ease
            }

                nav ul li a.signup-nav {
                    border: 1px solid #dadada;
                    border-radius: 3px;
                    padding: 6px 15px
                }

                nav ul li a.signup2-nav {
                    background-color: #fff;
                    color: #5d5bc3 !important;
                }

                nav ul li a.signup-nav:hover {
                    background-color: #fff;
                    color: #5d5bc3 !important;
                    border: 1px solid #fff
                }

    nav .nav-menu {
        margin-left: auto
    }

    nav .lang-select {
        background-color: #fff;
        border-radius: 5px;
        overflow: hidden
    }

        nav .lang-select a {
            color: #5d5bc3;
            font-weight: 600;
            padding: 5px;
            display: inline-block;
            text-decoration: none;
            cursor: pointer
        }

            nav .lang-select a.en {
                background-color: #fff;
                box-shadow: 0 0 11px rgba(0, 0, 0, .23) inset
            }

.mobile-menu img {
    width: 20px
}

.mobile-menu {
    color: #fff;
    font-size: 25px;
    padding: 0 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.head-wrapper {
    position: relative;
    z-index: 2;
    margin-top: 120px
}

li.additional-features {
    padding: 12px !important;
    background: #fff;
    color: #000 !important;
    text-align: center;
    display: flex !important;
    align-items: center;
    justify-content: center !important
}

.head-wrapper .project-mockup img {
    width: 100%
}

.head-wrapper .intro-section {
    color: #fff;
    padding: 70px 140px 0 0
}

    .head-wrapper .intro-section h1 {
        line-height: 1.4;
        font-weight: 300;
        font-size: 34px;
        margin: 0
    }

    .head-wrapper .intro-section p {
        margin: 15px 0
    }

    .head-wrapper .intro-section a {
        text-decoration: none !important;
        color: #fff !important;
        border-radius: 10px;
        background-color: #2eca5a;
        padding: 10px 28px;
        display: inline-block;
        font-size: 17px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .15);
        transition: .3s ease
    }

        .head-wrapper .intro-section a:hover {
            transform: scale(.97);
            box-shadow: 0 1px 20px rgba(0, 0, 0, .15)
        }

.features-section {
    position: relative;
    margin-top: -1px;
    direction: rtl;
    overflow-x: hidden; /* Allow vertical scroll but prevent horizontal */
    border-radius: 32px 32px 0 0;
}

.section-title {
    color: #7a7878 !important;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 500;
    padding: 0 10px 0 0;
}

.section-description {
    color: #7a7878 !important;
    font-size: 23px !important;
    line-height: 31px !important;
    padding: 0 10px 0 0 !important;
}

.features-items .item {
    margin-bottom: 30px;
    text-align: center;
    padding: 20px 0;
    transition: .3s ease;
    position: relative
}

    .features-items .item p {
        color: #fff;
        margin: 20px 0 0
    }

    .features-items .item img {
        width: 70px;
        object-fit: contain;
        height: 70px;
    }

    .features-items .item:hover {
        box-shadow: 0 6px 35px 0 rgba(0, 0, 0, .22);
        z-index: 1
    }

    .features-items .item.item-top {
        margin-top: -30px
    }

.row-features {
    display: flex;
    align-items: center;
}

    .row-features .feature-img {
        width: 100%;
        height: 300px;
        border-radius: 15px;
        padding: 25px
    }

        .row-features .feature-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    .row-features .features-items {
        margin-bottom: 50px;
        height: 450px;
    }

    .row-features h2 {
        text-align: right;
        font-weight: 900;
        color: white;
    }

.features-section-item2 h2 {
    text-align: center;
}

.row-features p {
    font-size: 14px;
}

.features-items .feature-one {
    background-color: #8134cc
}

.features-items .feature-two {
    background-color: #31b355
}

.features-items .feature-three {
    background-color: #ff9b53
}

.features-items .feature-four {
    background-color: #ce3265
}

.features-items .feature-five {
    background-color: #5c6576
}

.features-items .feature-sex {
    background-color: #42a6e8
}

.features-section-item {
    z-index: 1;
    position: relative;
}

    .features-section-item .avatar {
        text-align: center
    }

        .features-section-item .avatar img {
            max-width: 100%
        }

    .features-section-item .left-img {
        order: -1
    }

.features-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-height: 290px;
    transform: rotateY(180deg)
}

.screenshots-section {
    background-color: #fff;
    padding: 30px 0 50px
}

.screen-slider {
    margin-top: 50px;
    position: relative
}

    .screen-slider .item {
        position: relative;
        outline: 0
    }

    .screen-slider .content {
        padding: 130px 10% 130px 50px;
        background-color: #8134cc;
        width: 50%;
        height: 460px;
    }

.vs-slider {
    margin-top: 30px;
    margin-bottom: 70px;
}

    .vs-slider .slick-list {
        height: 620px !important;
    }

    .vs-slider .content {
        padding: 20px;
        width: fit-content;
        margin: 0 auto;
    }

    .vs-slider img {
        margin: 0 auto;
        image-rendering: auto;
    }

    .vs-slider .first-card,
    .vs-slider .sub-cards {
        direction: rtl
    }

.screen-slider .content .title {
    font-size: 35px;
    font-weight: 700;
    color: #fff;
    margin: 0
}

.screen-slider .content .description {
    color: #fff;
    margin: 15px 0
}

.screen-slider .content a {
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    padding: 8px 18px;
    border-radius: 5px;
    display: inline-block;
    outline: 0
}

.screen-slider .avatar {
    box-shadow: 0 5px 15px rgba(38, 50, 56, .15);
    width: 54%;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    border-radius: 10px;
    overflow: hidden
}

    .screen-slider .avatar img {
        max-width: 100%
    }

.screen-slider .content .avatar-mobile {
    width: 100%;
    box-shadow: 0 5px 35px rgba(38, 50, 56, .27);
    transform: translateY(-25%)
}

    .screen-slider .content .avatar-mobile img {
        max-width: 100%
    }

.screen-slider .control,
.vs-slider .control {
    position: absolute;
    bottom: 15px;
    z-index: 5;
    color: #fff;
    font-size: 38px;
    padding: 5px;
    cursor: pointer;
    margin-left: -24px;
    width: 45px;
}

.vs-slider .control {
    color: #8134cc;
    bottom: -35px;
    width: 40px;
}

    .screen-slider .control.next,
    .vs-slider .control.next {
        left: calc(25% + 27px);
        width: 45px;
        height: 45px;
        border: 2px solid;
        border-radius: 50%;
        padding: 10px;
    }

    .screen-slider .control.prev,
    .vs-slider .control.prev {
        left: calc(25% + -27px);
        width: 45px;
        height: 45px;
        border: 2px solid;
        border-radius: 50%;
        padding: 10px;
    }

.screen-slider .item:nth-of-type(1) .content {
    background-color: #8134cc
}

.screen-slider .item:nth-of-type(2) .content {
    background-color: #31b355
}

.screen-slider .item:nth-of-type(3) .content {
    background-color: #ff9b53
}

.screen-slider .item:nth-of-type(4) .content {
    background-color: #ce3265
}

.screen-slider .item:nth-of-type(5) .content {
    background-color: #5c6576
}

.screen-slider .item:nth-of-type(6) .content {
    background-color: #42a6e8
}

.screen-slider .item:nth-of-type(7) .content {
    background-color: #ff5722
}

.screen-slider .item:nth-of-type(8) .content {
    background-color: #58C3C3
}

.screen-slider .item:nth-of-type(9) .content {
    background-color: #496EA2
}

.screen-slider .content .title {
    opacity: 0;
    transition: .5s ease;
    transform: translate(0, 30px);
    font-weight: 300
}

.screen-slider .slick-active.item .content .title {
    opacity: 1;
    transform: translate(0, 0);
    transition: .5s ease .5s;
    font-weight: 700
}

.screen-slider .content .description {
    opacity: 0;
    transition: .5s ease;
    transform: translate(0, 30px);
    font-size: 16px
}

.screen-slider .slick-active.item .content .description {
    opacity: 1;
    transform: translate(0, 0);
    transition: .5s ease 1s;
    font-size: 16px
}

.screen-slider .content a {
    opacity: 0;
    transition: .5s ease;
    transform: translate(0, 30px)
}

.screen-slider .slick-active.item .content a {
    opacity: 1;
    transform: translate(0, 0);
    transition: .5s ease 1.5s
}

.screen-slider .avatar {
    opacity: 0;
    transition: .5s ease;
    margin-top: 30px
}

.screen-slider .slick-active.item .avatar {
    opacity: 1;
    margin-top: 0;
    transition: .5s ease .5s
}

.screen-slider .item .avatar-mobile {
    opacity: 0;
    transition: .5s ease;
    transform: translateY(-10%)
}

.screen-slider .slick-active.item .avatar-mobile {
    opacity: 1;
    transform: translateY(-25%);
    transition: .5s ease .5s
}

.testimonials-section {
    background-color: #eff2f5;
    padding: 150px 0 50px;
    position: relative
}

    .testimonials-section .slider-con {
        margin-top: 30px
    }

    .testimonials-section .slider-title {
        margin: 15px 0 0 0
    }

        .testimonials-section .slider-title .one {
            display: block;
            color: #6454c5;
            font-size: 18px;
            font-weight: 600
        }

        .testimonials-section .slider-title .two {
            display: block;
            color: #6454c5;
            font-size: 15px
        }

.testimonials-slider .item {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    margin: 15px;
    outline: 0
}

    .testimonials-slider .item .person {
        display: flex;
        align-items: center
    }

        .testimonials-slider .item .person .avatar {
            width: 60px;
            height: 60px;
            flex: 0 0 60px;
            overflow: hidden;
            border-radius: 3px
        }

            .testimonials-slider .item .person .avatar img {
                width: 100%;
                height: 100%
            }

        .testimonials-slider .item .person .info {
            margin-left: 10px
        }

            .testimonials-slider .item .person .info p {
                color: #5a5a5a;
                margin: 0
            }

            .testimonials-slider .item .person .info .name {
                font-weight: 600;
                margin-bottom: 3px
            }

            .testimonials-slider .item .person .info .work {
                font-size: 12px
            }

    .testimonials-slider .item q {
        margin-top: 10px;
        display: block;
        color: #5a5a5a
    }

.testimonials-slider .control {
    position: absolute;
    top: 86px;
    left: -22%;
    z-index: 5;
    color: #6453c5;
    font-size: 38px;
    padding: 5px;
    cursor: pointer;
    margin-top: -24px
}

    .testimonials-slider .control.next {
        left: calc(-22% + 54px)
    }

    .testimonials-slider .control.prev {
        left: calc(-22% + 0px)
    }

.testimonials-shape {
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    max-height: 224px
}

.features-section-item .avatar img.calender {
    max-width: 100%;
}

.contact-section {
    background: url(../img/5.svg) no-repeat scroll center/cover border-box, linear-gradient(73deg, #8134cc 0, #3685ba 100%) no-repeat scroll center center/cover;
    padding: 100px 0 120px;
    position: relative
}

    .contact-section .section-title {
        color: #fff;
        margin-bottom: 30px
    }

    .contact-section .container {
        z-index: 6;
        position: relative
    }

.contact-form .my-input {
    width: 100%;
    margin-bottom: 15px;
    outline: 0;
    border-radius: 5px;
    border: 1px solid #fff;
    background-color: transparent;
    color: #fff;
    padding: 7px 10px
}

    .contact-form .my-input.input-name {
        width: calc(50% - 7.5px);
        margin-right: 15px;
        float: left
    }

    .contact-form .my-input.input-phone {
        width: calc(50% - 7.5px);
        float: left
    }

    .contact-form .my-input.input-message {
        height: 130px;
        resize: none
    }

.contact-form .send-contact {
    color: #fff !important;
    border-radius: 6px;
    background-color: #2eca5a;
    padding: 8px 38px;
    /* float: right; */
    border: none;
    outline: 0
}

::-webkit-input-placeholder {
    color: #d2d2d2
}

::-moz-placeholder {
    color: #d2d2d2
}

:-ms-input-placeholder {
    color: #d2d2d2
}

:-moz-placeholder {
    color: #d2d2d2
}

.copy-right {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    text-align: center
}

    .copy-right p {
        margin: 0;
        padding: 15px
    }

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 25px 50px 0 50px;
}

    .footer-logo .con {
        position: relative
    }

        .footer-logo .con .gear {
            position: absolute;
            left: 23%;
            top: 25%;
            animation: spin 4s linear infinite;
            width: 30px
        }

        .footer-logo .con .word {
            width: 250px;
            object-fit: contain
        }

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.footer-logo .footer-mail {
    width: 100%;
    text-align: center;
    color: #fff;
    margin-top: 10px
}

header.inner-page-header {
    height: auto
}

.pricing-section {
    background-color: #fff;
    padding: 50px 0 50px
}

    .pricing-section .section-info {
        text-align: center
    }

    .pricing-section .section-description {
        padding: 0 20%;
        margin-bottom: 20px
    }

.select-term {
    background-color: #eff2f5;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block
}

    .select-term p {
        color: #474747;
        font-weight: 600;
        padding: 5px;
        display: inline-block;
        text-decoration: none;
        cursor: pointer;
        padding: 7px 10px;
        margin: 0;
        width: 90px
    }

        .select-term p.selected {
            background-color: #607d8b;
            box-shadow: 0 0 20px rgba(0, 0, 0, .17) inset;
            color: #fff
        }

.pricing-holder {
    margin-top: 50px
}

.plan-item {
    color: #fff;
    padding: 15px 10px;
    margin-bottom: 30px;
    position: relative;
    transition: .3s ease
}

    .plan-item:hover {
        box-shadow: 0 6px 35px 0 rgba(0, 0, 0, .22);
        z-index: 1
    }

    .plan-item .plan-title {
        text-align: center;
        margin-bottom: 15px
    }

        .plan-item .plan-title p.title {
            font-weight: 300;
            font-size: 18px;
            margin: 0
        }

        .plan-item .plan-title p.most-popular {
            font-weight: 600;
            font-size: 12px;
            margin: 0;
            text-transform: uppercase;
            margin-top: 5px;
            opacity: .7
        }

    .plan-item ul.item-option {
        margin: 0 -10px;
        padding: 0
    }

    .plan-item .item-option li {
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        color: #fff
    }

        .plan-item .item-option li:nth-child(odd) {
            background-color: rgba(255, 255, 255, .08)
        }

    .plan-item .price-area {
        display: none;
        text-align: center;
        margin: 15px 0
    }

        .plan-item .price-area .price-val {
            font-size: 25px;
            margin: 0
        }

        .plan-item .price-area .term-type {
            margin: 0;
            font-size: 13px;
            opacity: .7
        }

.term-type {
    color: #333333;
    font-size: 12px;
    margin-bottom: 5px !important;
}

.last_td {
    padding-top: 0 !important;
}

.term-type2 {
    font-size: 22px;
    color: #333333;
}

.plan-item .order-now {
    text-align: center;
    margin: 15px 0 0 0
}

    .plan-item .order-now a.order-btn {
        text-decoration: none;
        background-color: #fff;
        padding: 8px 15px;
        display: inline-block;
        border-radius: 6px;
        color: #474747
    }

.pricing-holder article .price-area {
    display: none;
    text-align: center;
    margin: 0;
}

.pricing-holder[data-term=month] .month-selected {
    display: block
}

.pricing-holder[data-term=year] .year-selected {
    display: block
}

.plan-item.free {
    background-color: #607d8b
}

.plan-item.standard {
    background-color: #31b355;
    margin-top: -22px
}

.plan-item.profissional {
    background-color: #6a67ce
}

.plan-item.enterprise {
    background-color: #004595
}

.faq-section {
    background-color: #eff2f5;
    padding: 50px 0 50px;
    position: relative
}

    .faq-section .faq-holder {
        width: 60%;
        margin: 30px auto 0
    }

.question-item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(191, 195, 202, .24)
}

    .question-item .question-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 10px;
        background-color: #fff;
        color: #474747;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none
    }

        .question-item .question-head i {
            padding: 10px
        }

    .question-item .question-answer {
        display: none
    }

        .question-item .question-answer p {
            margin: 0;
            font-size: 14px;
            padding: 15px
        }

.faq-shape {
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    max-height: 224px
}
/****************************************************************/
.get-free {
    padding: 0;
    background: radial-gradient(circle,#7f4acc,#6566c7);
    position: relative;
    overflow: hidden;
    border-radius: 45px;
    height: 350px;
    margin: 0px 50px;
    display: flex; /* إضافة flexbox */
    align-items: center; /* توسيط عمودي */
    justify-content: center; /* توسيط أفقي */
}

    .get-free .shapes-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* تحت الكلام */
        pointer-events: none;
        display: grid;
    }

    .get-free .shape {
        position: absolute;
        background-color: #f1f3ff;
        border-radius: 4px;
        opacity: 0.18;
        box-shadow: none;
        transition: opacity 0.3s;
    }

    .get-free .shape-1 {
        top: 8%;
        left: 5%;
        width: 90px;
        height: 90px;
    }

    .get-free .shape-2 {
        top: 18%;
        left: 40%;
        width: 120px;
        height: 120px;
    }

    .get-free .shape-3 {
        top: 10%;
        left: 60%;
        width: 70px;
        height: 70px;
    }

    .get-free .shape-4 {
        top: 30%;
        left: 80%;
        width: 100px;
        height: 100px;
    }

    .get-free .shape-5 {
        top: 70%;
        left: 28%;
        width: 80px;
        height: 80px;
    }

    .get-free .shape-6 {
        top: 75%;
        left: 5%;
        width: 60px;
        height: 60px;
    }

    .get-free .shape-7 {
        top: 65%;
        left: 70%;
        width: 110px;
        height: 110px;
    }

    .get-free .shape-8 {
        top: 85%;
        left: 90%;
        width: 50px;
        height: 50px;
    }


    .get-free .row {
        display: flex;
        align-items: center
    }

@keyframes anime_bg {
    0% {
        background-position: 0 50%
    }

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

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

.getfree-contents {
    z-index: 2;
    position: relative;
    text-align: center;
}

.getfree-contents-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin: 0px 0 0 0;
}

.getfree-text {
    flex: 1;
}

.getfree-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .getfree-image img {
        width: 450px;
        height: auto;
        display: block;
    }

@media (max-width: 767px) {
    .getfree-contents-row {
        flex-direction: column;
        text-align: center;
    }
}

/* للشاشات الكبيرة */
@media (min-width: 1200px) {
    .get-free {
        height: 400px;
        margin: 0px 80px;
    }

    .getfree-contents-row {
        gap: 60px;
    }

    .getfree-image img {
        width: 500px;
    }

    .title-app {
        font-size: 35px !important;
    }

    .getfree-description {
        font-size: 18px !important;
        line-height: 28px;
    }
}

/* للشاشات المتوسطة إلى الكبيرة */
@media (min-width: 992px) and (max-width: 1199px) {
    .get-free {
        margin: 40px 60px;
        height: 380px;
    }

    .getfree-contents-row {
        gap: 50px;
    }

    .getfree-image img {
        width: 420px;
    }

    .getfree-text {
        text-align: center; /* توسيط النص للشاشات المتوسطة أيضاً */
    }

    .title-app {
        text-align: center;
    }

    .getfree-description {
        text-align: center;
        margin: 0 auto 20px;
    }

    .store {
        text-align: center;
    }
}

/* إضافة أو تحديث الأنماط للشاشات الصغيرة */

/* تحديث الأنماط الموجودة للشاشات الصغيرة */
@media (max-width: 991px) {
    .get-free {
        margin: 40px 20px;
        height: auto;
        min-height: 280px;
        padding: 30px 15px;
        overflow: visible;
    }

        .get-free .container {
            position: static !important;
            transform: none !important;
            width: 100%;
            max-width: none;
            top: auto;
            left: auto;
        }

    .getfree-description {
        text-align: center;
        margin: 0 auto 20px;
    }

    .getfree-contents-row {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        align-items: center;
    }

    .getfree-image {
        order: 1;
        margin-bottom: 20px;
    }

    .getfree-text {
        order: 2;
        text-align: center;
    }
}


@media (max-width: 767px) {
    .get-free {
        margin: 30px 15px;
        border-radius: 20px;
        padding: 25px 15px;
        min-height: 260px;
    }

    .getfree-contents-row {
        gap: 15px;
        padding: 10px 0;
    }

    .title-app {
        font-size: 22px !important;
        line-height: 1.3;
        margin-bottom: 15px;
        text-align: center;
    }

    .getfree-description {
        font-size: 14px !important;
        line-height: 20px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto 15px;
        text-align: center;
    }

    /* تحسين أزرار التطبيقات */
    .store {
        margin: 15px 0 0;
        text-align: center;
    }

        .store a {
            margin: 0 5px 8px;
            display: inline-block;
        }

            .store a img {
                width: 110px;
                height: auto;
            }

    /* تقليل حجم الأشكال الخلفية */
    .get-free .shape-1,
    .get-free .shape-3,
    .get-free .shape-6,
    .get-free .shape-8 {
        width: 35px;
        height: 35px;
    }

    .get-free .shape-2,
    .get-free .shape-4,
    .get-free .shape-7 {
        width: 50px;
        height: 50px;
    }

    .get-free .shape-5 {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    .get-free {
        margin: 20px 10px;
        border-radius: 18px;
        padding: 20px 10px;
        min-height: 240px;
    }

    .getfree-image img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }

    .getfree-contents-row {
        gap: 12px;
        padding: 5px 0;
    }


    .title-app {
        font-size: 18px !important;
        line-height: 1.2;
        margin-bottom: 12px;
    }

    .getfree-description {
        font-size: 12px !important;
        line-height: 18px;
        max-width: 250px;
        margin-bottom: 12px;
    }

    .store a img {
        width: 95px;
    }

    /* إخفاء بعض الأشكال في الشاشات الصغيرة جداً */
    .get-free .shape-3,
    .get-free .shape-4,
    .get-free .shape-7,
    .get-free .shape-8 {
        display: none;
    }

    .get-free .shape-1,
    .get-free .shape-6 {
        width: 25px;
        height: 25px;
    }

    .get-free .shape-2,
    .get-free .shape-5 {
        width: 35px;
        height: 35px;
    }
}

/* إضافة مسافات بين الأقسام لمنع التداخل */
@media (max-width: 767px) {
    /* مسافة قبل وبعد قسم get-free */
    .get-free {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    /* تأكد من عدم تداخل الأقسام الأخرى */
    .option-section,
    .pricing-section,
    .contact-section {
        margin-top: 40px;
        clear: both;
    }

    /* إصلاح العناصر المطلقة الموضع */
    .get-free .container {
        position: relative !important;
    }

    /* تحسين تخطيط النموذج إذا كان موجوداً */
    .get-free .get-free-form {
        width: 95%;
        margin: 20px auto 0;
        flex-direction: column;
        height: auto;
    }

        .get-free .get-free-form input {
            width: 100%;
            height: 45px;
            margin-bottom: 10px;
            border-radius: 8px;
        }

        .get-free .get-free-form a.signup-free {
            width: 100%;
            height: 45px;
            line-height: 45px;
            border-radius: 8px;
            font-size: 16px;
        }
}

/* إضافة z-index للتأكد من ترتيب العناصر */
@media (max-width: 767px) {
    .get-free {
        position: relative;
        z-index: 1;
    }

        .get-free .getfree-contents {
            position: relative;
            z-index: 2;
        }

        .get-free .shapes-bg {
            z-index: 0;
        }
}

/* تحسين إضافي لمنع overflow */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .get-free {
        max-width: 100%;
        box-sizing: border-box;
    }

    .getfree-contents-row {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* إضافة للتأكد من عدم تأثير أي أنماط أخرى */
.get-free .getfree-contents {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 250px;
}

@media (max-width: 991px) {
    .get-free .getfree-contents {
        display: block;
        height: auto;
        min-height: auto;
    }
}

/****************************************************************/
.option-section {
    padding: 50px 0 20px;
    position: relative;
    background-color: #f8f8f8
}

    .option-section .img-holder {
        text-align: center;
        margin: 30px 0 30px
    }

        .option-section .img-holder img {
            max-width: 500px;
            width: 100%
        }

    .option-section .section-description {
        text-align: center;
        padding: 0 20%
    }

.option-shape {
    position: absolute;
    top: calc(100% - 1px);
    right: 0;
    left: 0;
    width: 100%;
    z-index: 5;
    max-height: 224px;
    transform: rotateY(0) rotateX(180deg)
}

.get-free .section-title {
    color: #fff;
    margin-bottom: 40px
}

.get-free .container {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    height: 100%; /* إضافة ارتفاع كامل */
    display: flex;
    align-items: center;
    justify-content: center;
}

.get-free .get-free-form {
    width: 50%;
    height: 40px;
    margin: auto;
    display: flex
}

    .get-free .get-free-form input {
        width: 100%;
        float: left;
        background-color: #fff;
        padding: 10px 10px 10px 25px;
        border: none;
        border-radius: 3px 0 0 3px;
        outline: 0;
        height: 55px
    }

    .get-free .get-free-form a.signup-free {
        background-color: #31cc5d;
        color: #fff;
        display: inline-block;
        float: left;
        padding: 0 10px;
        text-decoration: none;
        border-radius: 0 3px 3px 0;
        width: 210px;
        text-align: center;
        height: 55px;
        line-height: 55px;
        font-weight: 600;
        font-size: 17px
    }

.signup-section {
    position: relative;
    background-color: #eff2f5;
    padding: 50px 0
}

.sign-up-holder {
    background-color: #fff;
    width: 50%;
    margin: auto;
    padding: 30px;
    border-radius: 5px
}

.signup-section .sign-up-title {
    color: #474747;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 35px;
    margin-bottom: 30px
}

.signup-section .like-form .input-item {
    margin-bottom: 10px
}

    .signup-section .like-form .input-item p {
        color: #474747;
        margin: 0 0 5px;
        font-weight: 600
    }

    .signup-section .like-form .input-item input {
        padding: 7px 10px;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #e4e4e4
    }

.signup-section .like-form .sign-up-btn {
    background-color: #ff9b53;
    color: #fff;
    padding: 10px 55px;
    display: inline-block;
    border-radius: 5px;
    margin: 15px 0 25px;
    text-align: center;
    text-decoration: none
}

.signup-section .login-label {
    margin: 0
}

    .signup-section .login-label a {
        font-weight: 600
    }

.login-section {
    position: relative;
    background-color: #eff2f5;
    padding: 50px 0
}

.login-holder {
    background-color: #fff;
    width: 50%;
    margin: auto;
    padding: 30px;
    border-radius: 5px
}

.login-section .login-title {
    color: #474747;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 35px;
    margin-bottom: 30px
}

.login-section .like-form .input-item {
    margin-bottom: 10px
}

    .login-section .like-form .input-item p {
        color: #474747;
        margin: 0 0 5px;
        font-weight: 600
    }

    .login-section .like-form .input-item input {
        padding: 7px 10px;
        width: 100%;
        border-radius: 5px;
        border: 1px solid #e4e4e4
    }

.login-section .like-form .login-btn {
    background-color: #ff9b53;
    color: #fff;
    padding: 10px 55px;
    display: inline-block;
    border-radius: 5px;
    margin: 15px 0 25px;
    text-align: center;
    text-decoration: none
}

.price-plan-holder {
    display: flex;
    justify-content: center;
    align-items: center
}

    .price-plan-holder .price-val-del {
        margin: 0 5px 10px;
        text-decoration: line-through;
        opacity: .5
    }

.title-app {
    color: #fff;
    font-size: 30px;
    font-weight: 600;
}

.store {
    margin: 15px 0 0
}

    .store a {
        margin: 0 5px 9px;
        display: inline-block
    }

        .store a img {
            width: 145px;
            box-shadow: 0 0px 10px #ffffff2b;
            border-radius: 5px;
        }

.getfree-description {
    color: #fafafa;
    font-size: 16px;
    line-height: 24px;
    width: 300px;
}


.app-mockup {
    text-align: center
}

.blog-section {
    padding: 50px 0 20px;
    position: relative;
    background-color: #fff
}

a.item-blog {
    display: block;
    text-decoration: none;
    margin: 20px 0;
    height: 400px;
}

    a.item-blog .blogs-img {
        height: 210px;
        border: 1px solid #f4f4f4;
        border-radius: 15px;
        padding: 20px;
        background: #f4f4f4;
        margin-bottom: 35px;
    }

    a.item-blog img {
        width: 100%;
        object-fit: cover;
        object-position: center;
        mix-blend-mode: multiply;
        height: 100%;
        overflow: visible;
    }

    a.item-blog .blog-title {
        font-size: 22px;
        font-weight: 700;
        color: #333;
    }

    a.item-blog .blog-date {
        color: #333;
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

a.more-blogs {
    text-decoration: none;
    cursor: pointer;
    /* background: linear-gradient(73deg, #8134cc 0, #3685ba 100%) no-repeat scroll center center/cover; */
    color: #7a4acb;
    border: 1px solid #7a4acb;
    padding: 10px 20px;
    display: inline-flex;
    margin-top: 30px;
    border-radius: 12px;
    height: 45px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    transition: .5s ease-in-out
}
    /*    a.more-blogs:hover {
        background: linear-gradient(73deg, #8134cc 0, #3685ba 100%) no-repeat scroll center center/cover;
        color: #fff;
        border:none
    }*/
    a.more-blogs svg {
        width: 15px;
        margin-right: 10px;
    }


.additional-features span {
    display: flex;
    align-items: center
}

.blogslink {
    font-size: 2rem;
    font-weight: bold;
    color: #673AB7;
    text-decoration: none !important;
    position: relative;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    width: 220px;
}

    .blogslink svg {
        width: 18px;
        z-index: 9;
        margin-right: 5px;
    }

    .blogslink span,
    .blogslink i {
        position: relative;
    }

    .blogslink i {
        margin-left: 0.5em;
    }

    .blogslink .color {
        width: 2em;
        height: 2em;
        border-radius: 2em;
        background-color: #44acff;
        position: absolute;
        top: 50%;
        transform: translatey(-50%);
        right: 0.35em;
    }

    .blogslink:hover {
        color: #3F51B5
    }

        .blogslink:hover .color {
            animation: rainbow-btn 8s ease-in-out alternate
        }

@keyframes rainbow-btn {
    0% {
        width: 2em;
        height: 2em;
        right: 0.35em;
    }

    100% {
        width: 100%;
        right: 0;
    }

    -50% {
        left: 3px;
        right: auto;
        width: 2em;
    }

    0% {
        width: 2em;
        height: 2em;
        right: 0.35em;
        left: auto
    }
}

.additional-features span i {
    width: 20px;
    height: 20px;
    background: #e1e1e1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    margin: 0 10px;
    transition: .3s ease;
    display: none
}

.additional-features.open span i {
    transform: rotate(180deg)
}

article {
    width: 100%;
    margin: 0 auto;
    /* height:1000px; */
    position: relative;
}

.pricing-holder article ul {
    display: flex;
    top: 0px;
    z-index: 10;
    padding: 0 0 15px;
}

.pricing-holder article li {
    list-style: none;
    flex: 1;
}

    .pricing-holder article li:last-child {
        border-right: 1px solid #DDD;
    }

.pricing-holder article button {
    width: 100%;
    border: 1px solid #DDD;
    border-right: 0;
    border-top: 0;
    padding: 10px;
    background: #FFF;
    font-size: 14px;
    font-weight: bold;
    height: 60px;
    color: #999;
    outline: none;
}

.pricing-holder article li.active button {
    background: #F5F5F5;
    color: #000;
}

.pricing-holder article table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.pricing-holder article th {
    background: #F5F5F5;
    display: none;
}

.pricing-holder article td,
.pricing-holder article th {
    height: 53px
}

.pricing-holder article td,
.pricing-holder article th {
    border: 1px solid #DDD;
    padding: 10px;
    empty-cells: show;
}

.pricing-holder article td,
.pricing-holder article th {
    /* text-align: right; */
}

    .pricing-holder article td + td,
    .pricing-holder article th + th {
        text-align: center;
        display: none;
    }

    .pricing-holder article td.default {
        display: table-cell;
    }

.pricing-holder article .bg-1 {
    border-top: 7px solid #607d8b;
}

.pricing-holder article .bg-2 {
    border-top: 7px solid #31b355;
}

.pricing-holder article .bg-3 {
    border-top: 7px solid #6a67ce;
}

.pricing-holder article .bg-4 {
    border-top: 7px solid #004595;
}

.pricing-holder article .sep {
    background: #F5F5F5;
    font-weight: bold;
}

.pricing-holder article .order-btn {
    text-decoration: none;
    border: 1px solid;
    padding: 5px 10px;
    display: inline-block;
    border-radius: 35px;
    margin: 0 0 2px;
}

.pricing-holder article .txt-l {
    font-size: 28px;
    font-weight: bold;
}

.pricing-holder article .txt-top {
    position: relative;
    top: -9px;
    left: -2px;
}

.pricing-holder article .tick,
.first-card .list-card ul .tick,
.second-card ul .tick {
    font-size: 18px;
    color: #2CA01C;
}

.first-card .list-card ul .tick,
.second-card ul .tick {
    margin-left: 5px;
}

.false_icon {
    color: #e33716 !important;
}

.pricing-holder article .hide {
    border: 0;
    background: none;
}

article p.price-val {
    font-size: 25px;
    font-weight: 600;
}

@media (min-width:701px) and (max-width:991px) {
    .screen-slider .content {
        height: 650px;
    }
}

@media (min-width:500px) and (max-width:700px) {
    .screen-slider .content {
        height: 540px;
    }
}

@media (min-width: 640px) {
    .pricing-holder article table {
        table-layout: auto;
    }

    .pricing-holder article ul {
        display: none;
    }

    .pricing-holder article td,
    .pricing-holder article th {
        display: table-cell !important;
    }

    .pricing-holder article td,
    .pricing-holder article th {
        width: 330px;
    }

        .pricing-holder article td + .pricing-holder article td,
        .pricing-holder article th + .pricing-holder article th {
            width: auto;
        }
}

@media (max-width:1199px) {
    .faq-section .faq-holder {
        width: 70%
    }
}

@media (max-width:991px) {
    .plan-item.standard {
        margin-top: 0
    }

    .head-wrapper .project-mockup img {
        width: 100%
    }

    header {
        height: auto
    }

    .head-wrapper {
        margin-top: 60px
    }

        .head-wrapper .intro-section {
            padding: 50px 20% 0;
            text-align: center;
            margin-bottom: 100px
        }
    /*    .nav-menu ul {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        text-align: center;
        background-color: #fff;
        z-index: 10;
        transition: .3s ease;
        opacity: 0;
        visibility: hidden;
        margin: 0
    }
    .nav-menu ul.openMenu {
        opacity: 1;
        visibility: visible
    }
    .nav-menu ul li {
        display: block;
        padding: 0
    }
    .nav-menu ul li a {
        display: block;
        padding: 10px;
        color: #5a5a5a !important
    }
    .nav-menu ul li a:before {
        content: none
    }
    .nav-menu ul li a:hover {
        background-color: rgba(14, 14, 14, .1)
    }
    nav ul li a.signup-nav {
        width: 50%;
        margin: 15px auto 20px;
        background-color: #ff9b53;
        color: #fff !important;
        border: 0
    }
    nav ul li a.signup-nav:hover {
        background-color: #ff9b53;
        color: #fff !important;
        border: 0
    }
  */
    .features-section .section-info {
        margin-bottom: 60px
    }

    .row-features {
        display: block
    }

    .screen-slider .item {
        margin-top: 130px
    }

    .screen-slider .content .title {
        font-size: 25px
    }

    .screen-slider .content {
        padding: 0 30px 80px 30px;
        width: 100%
    }

    .screen-slider .control.next,
    .vs-slider .control.next {
        left: calc(50% + 27px)
    }

    .screen-slider .control.prev,
    .vs-slider .control.prev {
        left: calc(50% + -27px);
        width: 45px;
        height: 45px;
        border: 2px solid;
        border-radius: 50%;
        padding: 10px;
    }

    .testimonials-section .slider-title {
        margin: 15px 0 45px 15px
    }

    .testimonials-slider .control.next {
        left: calc(0% + 54px)
    }

    .testimonials-slider .control.prev {
        left: calc(0% + 0px)
    }

    .testimonials-slider .control {
        top: -20px
    }

    .screen-slider {
        margin-top: 0
    }

    .testimonials-section .slider-con {
        margin-top: 0
    }

    .faq-section .faq-holder {
        width: 80%
    }

    .get-free .get-free-form {
        width: 80%
    }

    .sign-up-holder {
        width: 80%
    }

    .login-holder {
        width: 80%
    }
}

@media (max-width:767px) {
    .container {
        max-width: 590px !important
    }

    .head-wrapper .intro-section {
        padding: 50px 10% 0
    }

        .head-wrapper .intro-section h1 {
            font-size: 25px
        }

    .gantt-section {
        margin: 50px 0 60px
    }

    .footer-logo {
        margin-top: 60px;
        margin-bottom: 20px
    }

    .screen-slider .item {
        margin-top: 100px
    }

    .contact-section {
        padding: 70px 0 120px
    }

    .faq-section .faq-holder {
        width: 100%
    }

    .pricing-section .section-description {
        padding: 0 10%
    }

    .get-free .get-free-form {
        width: 95%
    }

    .section-title {
        font-size: 28px;
    }

    .sign-up-holder {
        width: 95%
    }

    .login-holder {
        width: 95%
    }


    .get-free .row {
        display: block;
        padding: 30px 0 15px;
        text-align: center
    }

    .title-app {
        margin-bottom: 20px
    }

    nav .nav-logo img {
        width: 115px;
    }

    nav ul li {
        display: inline-block;
        padding: 0 5px;
    }

        nav ul li a.signup-nav {
            padding: 6px 6px;
        }
}

.select_lang {
    display: none;
    position: relative;
    color: #5d5bc3;
    font-weight: 600;
    padding: 5px 8px;
    text-decoration: none;
    cursor: pointer;
    background: #fff;
    height: 30px;
    border-radius: 8px;
}

    .select_lang .lang_btn {
        border: none;
        background-color: transparent;
        padding: 0;
    }

        .select_lang .lang_btn img {
            width: 20px
        }

.lang_list {
    position: absolute;
    background: #f9f9f9;
    top: 35px;
    left: 0;
    width: 64px;
    display: none;
    border-radius: 12px;
    z-index: 9;
}

    .lang_list.showMenu {
        display: block
    }

    .lang_list a {
        display: block;
        color: #818080 !important;
        font-size: 13px;
        border-bottom: 1px solid #f1f1f1;
        padding: 4px 20px;
        text-align: center;
    }

        .lang_list a.active {
            color: #5d5bc3 !important;
        }

        .lang_list a:last-child {
            border-bottom: none
        }

@media (max-width:767px) {
    .col-xs {
        width: 100%
    }

    .col-xxs {
        width: 50%
    }

    .container {
        max-width: 380px
    }

    .features-items .item.item-top {
        margin-top: 0
    }

    .features-items .item.item-top-mobile {
        margin-top: -30px
    }

    .plan-item.standard {
        margin-top: 0
    }

    .additional-features span i {
        display: flex
    }

    .additional-features-holder {
        display: none
    }

    .nav-menu ul {
        position: absolute;
        left: 0;
        right: 0;
        top: 80px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    nav ul li {
        padding: 0 4px;
    }

        nav ul li a.signup-nav {
            padding: 6px 8px;
            border-radius: 8px
        }

    .lang-select {
        display: none
    }

    .select_lang {
        display: flex;
    }

    nav ul li a {
        font-size: 12px
    }

    .inner-page-header {
        height: 125px !important;
    }

    header nav .nav-wrapper .nav-logo {
        width: 100%;
        text-align: center;
    }
}

.padding-zero {
    padding: 0
}

a {
    outline: 0
}

.loading {
    background-image: linear-gradient(73deg, #8134cc 0, #3685ba 100%);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center
}

    .loading .con {
        position: relative
    }

        .loading .con .gear {
            position: absolute;
            left: 23%;
            top: 25%;
            animation: spin 4s linear infinite;
            width: 30px
        }

        .loading .con .word {
            width: 250px
        }

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.overflow-hidde {
    overflow: hidden
}

.first-card {
    text-align: center;
    min-height: 535px;
    /* max-height: 450px; */
    position: relative;
    box-shadow: 0px 10px 20px 0px #ccc;
    background: #fff;
    border-radius: 10px;
    background: linear-gradient( 73deg, #8134cc 0, #3685ba 100%) no-repeat;
}

    .first-card .card-header,
    .second-card .card-header {
        border-radius: 10px;
        padding: 20px 20px 35px;
        align-items: center;
        display: block;
        justify-content: center;
    }

.second-card .card-header {
    padding: 100px 20px 35px;
}

    .first-card .card-header .projecto-img,
    .second-card .card-header img {
        width: 180px;
        height: 62px;
        object-fit: contain;
    }

.first-card .card-header p {
    font-size: 18px;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 20px;
    direction: ltr;
}

.second-card .card-header p {
    font-size: 18px;
    color: #333;
    margin-top: 15px;
    margin-bottom: 20px;
    direction: ltr;
}

.first-card .card-header p span {
    font-size: 30px;
    font-weight: 700;
    direction: rtl !important;
    display: flex;
    justify-content: center;
}

.first-card .card-header p small {
    display: block;
    line-height: 6px;
    padding-bottom: 10px;
}

.second-card .card-header p span {
    font-size: 20px;
    font-weight: 700;
    direction: rtl !important;
    display: flex;
    justify-content: center;
}

.second-card .card-header small {
    display: block;
    line-height: 6px;
}

.first-card .card-header .startnewtrial {
    background: transparent;
    border: 1px solid #fff;
    position: relative;
    color: #fff;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 3px;
    text-decoration: none !important;
    margin-bottom: 15px;
}

.sub-cards .card-header .startnewtrial {
    background: transparent;
    border: 1px solid #4674be;
    position: relative;
    color: #4575be;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 3px;
    text-decoration: none !important;
    margin-bottom: 15px;
}


/* .first-card ul {
    text-align: right;
    background-color: #fbfbfb;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 20px 40px 20px 20px;
    /* position: absolute; *
    bottom: 0px;
    width: 100%;
    border-radius: 10px;
} */

.first-card .list-card {
    text-align: right;
    background-color: #fbfbfb;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 20px 15px 10px 15px;
    /* position: absolute; */
    bottom: 0px;
    width: 100%;
    border-radius: 10px;
}

    .first-card .list-card ul {
        padding: 0 0px 0 0;
        list-style: none;
    }

.sub-cards ul {
    text-align: right;
    padding: 0
}

    .first-card ul li,
    .sub-cards ul li {
        padding: 4px 0px;
        color: #162020;
        font-size: 13px;
        font-weight: 700;
        display: flex;
        align-items: flex-start;
    }

.sub-cards {
    display: flex;
    justify-content: space-around;
    border: 1px solid #ddd;
    min-height: 575px;
    /* max-height: 450px; */
    padding: 10px 20px;
    /* padding: 20px;*/
    overflow: hidden;
    border-radius: 10px
}

.second-card {
    border-left: 1px solid #ddd;
    padding: 0px 20px 0px;
    align-items: center;
    text-align: center;
    display: block;
    justify-content: center;
}

    .second-card:last-child {
        border-left: none;
    }

.accordion-button {
    position: relative;
    cursor: pointer;
}

    .accordion-button a {
        text-decoration: none;
    }

.more-btn {
    border: none;
    color: #4575be;
    padding: 0;
    background: transparent;
    margin: 0px 0 6px;
    width: 100%;
    text-align: right;
}

    .more-btn::after {
        display: inline-block;
        margin-left: .255em;
        vertical-align: .255em;
        position: absolute;
        left: 0;
        top: 10px;
        content: "";
        border-top: .3em solid;
        border-right: .3em solid transparent;
        border-bottom: 0;
        border-left: .3em solid transparent;
        color: #4476bd;
    }

@media (min-width:992px) and (max-width:1192px) {
    .first-card .card-header .projecto-img,
    .second-card .card-header img {
        width: 150px;
    }

    .first-card .card-header .startnewtrial {
        font-size: 12px;
        padding: 10px 15px;
    }
}

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

@media (min-width:768px) and (max-width:991px) {
    .vs-slider2 {
        display: none;
    }
}

@media (min-width:300px) and (max-width:767px) {
    .vs-slider1 {
        display: none;
    }
}

.vs-slider1 .second-card .card-header {
    padding: 100px 0px 35px !important;
}

    .vs-slider1 .second-card .card-header img {
        width: 165px;
    }

@media (max-width:992px) {
    .flex_no {
        flex: none;
    }
    /*    .sub-cards {
        margin-top: 35px;
    }
    .second-card .card-header{
        margin:10px auto;
        padding:10px 0 !important;
    }*/
    .sub-cards ul {
        padding: 0
    }
    /*  .sub-cards {
        min-height: 480px;
    }*/
}

@media (max-width:767px) {
    /*    .sub-cards {
        display: block;
        min-height: auto;
        margin-top: 35px;
        max-height: max-content;
    }
    .second-card {
        border-bottom: 1px solid #ddd;
        border-left: none;
        padding: 0px 20px 10px;
    }
    .second-card:last-child {
        border-left: none;
        border-bottom: none;
    }
    .second-card .card-header {
        padding: 20px 20px 15px;
    }*/
}

.social_media {
    display: flex;
    align-items: end;
    justify-content: center;
    background: #fff;
    bottom: 50px;
    height: 55px;
    padding-bottom: 5px;
}

    .social_media a {
        margin: 0 5px;
    }

        .social_media a img {
            width: 32px;
        }

.visibility_hidden {
    visibility: hidden;
}

.visibility_visible {
    visibility: visible;
}

.d-none {
    display: none;
}

.ani-dur-1s {
    animation-duration: 1s
}

.overflow-hidden {
    overflow: hidden;
}


.bg-ovwhite {
    background: #f9f8f8;
}

.bg-white {
    background: #fff;
}

.cap-style {
    color: #fff;
    display: block;
}

.mt-20 {
    margin-top: 20px;
}

.font-size-30 {
    font-size: 30px;
}

.color-black {
    color: #000;
}

.font-family-monospace {
    font-family: monospace;
}

.contents {
    margin: 65px 50px 0;
}

.call-info {
    display: flex;
    align-items: center;
    margin: 5px 0 15px;
    font-size: 18px;
    justify-content: center;
}

    .call-info img {
        width: 24px;
        margin-left: 10px;
    }

    .call-info a {
        color: #fff;
        text-decoration: none;
    }

@media only screen and (max-width: 767px) {
    .contents {
        margin: 65px 0px 0;
    }

    .footer-logo {
        margin: 25px 0px 40px 0px;
    }
}


/************* help page ******************/

.section-content {
    background: #fafafa;
}

.help-footer-section {
    padding: 0px 0 160px;
    position: relative;
}

.help-tab {
    margin: 80px 50px 30px;
}

    .help-tab ul {
        display: flex;
        align-items: center;
        list-style: none;
        justify-content: flex-start;
        padding: 0;
        border-bottom: 1px solid #B8BABC;
        padding-bottom: 18px;
    }

        .help-tab ul li {
            margin-left: 45px;
            flex: none;
        }

        .help-tab ul a {
            display: flex;
            align-items: center;
            text-decoration: underline !important;
            position: relative;
            padding: 0 10px;
            color: #676363;
            font-size: 16px;
        }

            .help-tab ul a img {
                width: 28px;
                margin-left: 10px;
            }

            .help-tab ul a .img-active,
            .help-tab ul a.active .defult-img {
                display: none;
            }

            .help-tab ul a.active .img-active {
                display: flex;
            }

            .help-tab ul a span {
                color: #7B7D87;
                font-size: 18px;
            }

            .help-tab ul a.active span {
                color: #7266BA;
                font-weight: 800;
            }

        .help-tab ul li a::before {
            content: "";
            height: 2px;
            background-color: #7266BA;
            position: absolute;
            bottom: -20px;
            left: 0;
            opacity: 0;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }

        .help-tab ul li a.active::before {
            opacity: 1;
            width: 100%;
        }

    .help-tab .tab-box {
        margin: 50px 30px;
    }

.tab-box .my-input {
    background: #fff !important;
    color: #000;
}

.help-tab .tab-box h2 {
    color: #4a4949;
    font-size: 25px;
    margin-bottom: 16px;
    font-weight: 600;
}

.tab-box h3 {
    font-size: 24px;
    color: #4a4949;
    font-weight: 600;
    margin-top: 60px;
    margin-bottom: 20px;
}

.help-tab .tab-box h6 {
    display: flex;
    align-items: center;
    color: #333739;
    font-size: 18px;
    font-weight: 600;
}

    .help-tab .tab-box h6 img {
        width: 20px;
        margin-right: 6px;
    }

.help-tab .tab-box p {
    font-size: 18px;
    color: #828384;
    margin: 20px 0;
}

.blackOut {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 0;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
}

    .blackOut .popupAlignCenter {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .blackOut .popupAlignCenter .popUpWrapper {
            width: 80%;
            max-width: 1280px;
            max-height: 640px;
            z-index: 100;
        }

            .blackOut .popupAlignCenter .popUpWrapper iframe {
                border-radius: 20px;
            }

.video-link {
    position: relative;
    width: 50%;
    height: 260px;
    display: block;
    margin: 0 auto;
    margin-bottom: 50px;
    margin-top: 50px;
}

    .video-link .video-img {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .video-link .play-img {
        position: absolute;
        top: 33%;
        left: 0;
        right: 0;
        text-align: center;
        margin: 0 auto;
    }

.num-list,
.point-list {
    display: block !important;
    border: none;
    margin: 0;
    padding: 5px 15px !important;
    border-bottom: none !important;
}

.num-list {
    list-style: auto !important;
}

.point-list {
    list-style: disc !important;
}

    .num-list li,
    .point-list li {
        margin-bottom: 8px;
        margin-right: 0 !important;
    }

.help-tab ul::-webkit-scrollbar {
    display: none;
}

.support-section {
    width: 60%;
    background: #fff;
    padding: 30px 20px;
    border-radius: 10px;
    margin: 40px auto;
    text-align: center;
}

    .support-section p {
        font-size: 14px !important;
        width: 80%;
        margin: 0 auto 30px !important;
    }

    .support-section .buttons {
        display: flex;
        justify-content: center;
    }

        .support-section .buttons a,
        .help-section .buttons a {
            width: 130px;
            text-decoration: none;
            border-radius: 0 20px 0 20px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            cursor: pointer;
        }

            .support-section .buttons a.FAQ-btn {
                background: #7266BA;
                color: #fff;
            }

            .support-section .buttons a.Contact-btn {
                color: #7266BA;
                border: 1px solid;
            }

.accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
    margin: 30px 0;
}

    .accordion .accordion__item {
        padding: 0;
        position: relative;
        border-radius: 10px;
        width: 100%;
        cursor: pointer;
        margin: 0 !important;
    }

.contatct-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 35px !important;
}

    .contatct-header button {
        color: #fff !important;
        border-radius: 6px;
        background-color: #7266c0;
        padding: 12px 13px;
        border: none;
        outline: 0;
        font-size: 15px;
        margin-right: 10px;
    }

.accordion .accordion__item a {
    margin: 0;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 9px rgba(170, 163, 163, .12), 0px 0px 5px rgba(125, 117, 117, .24);
    position: relative;
    color: #676363;
    font-size: 16px;
    width: 100%;
    display: flex;
    height: 60px;
    align-items: center;
    text-decoration: none;
}

.accordion .accordion__item p {
    color: #828384;
    margin: 0;
    background: #fff;
    padding: 30px 20px;
    box-shadow: 0px 0px 9px rgb(170 163 163 / 12%), 0px 0px 5px rgb(125 117 117 / 24%);
    border-radius: 0 0 8px 8px;
}

.accordion .accordion__item a i {
    position: absolute;
    left: 15px;
}

.accordion .accordion__item:not(.open) p {
    display: none;
}

.help-section {
    width: 60%;
    background: #fff;
    background-image: url(../img/help-bg.webp);
    padding: 30px 20px;
    border-radius: 10px;
    margin: 40px auto;
    text-align: right;
    background-position: center;
    background-size: cover;
}

    .help-section p {
        font-size: 14px !important;
        width: 80%;
        color: #dadee1 !important;
        margin: 0 30px !important;
    }

    .help-section h2 {
        color: #ffffff !important;
        margin: 0 30px;
    }

    .help-section .buttons {
        display: flex;
        justify-content: flex-start;
        margin: 20px 30px 0;
    }

        .help-section .buttons a.Contact-btn {
            color: #333739;
            border: none;
            background: #ECECEC;
        }

.contact-details {
    text-align: center;
    margin-bottom: 60px;
}

    .contact-details img {
        height: 230px;
        object-fit: cover;
        object-position: center;
        margin-bottom: 15px;
        max-width: 100%;
    }

    .contact-details h2 {
        color: #333739 !important;
        margin-bottom: 10px !important;
    }

    .contact-details p {
        font-size: 16px !important;
        color: #5A5960 !important;
        margin: 15px 0 !important;
    }

.contact-input .my-input {
    width: 100%;
    height: 45px;
    background: #FFFFFF;
    border: none !important;
    border-radius: 5px;
    padding: 0 15px;
    margin-bottom: 15px;
    box-shadow: none !important;
}

.contact-input textarea.my-input {
    height: 135px;
    padding: 15px 15px
}

.contact-input .my-input:active,
.contact-input .my-input:hover,
.contact-input .my-input:focus {
    border: none !important;
    box-shadow: none !important;
}

.send-row {
    text-align: end;
}

.contact-input .send-contact {
    width: 110px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #7266BA;
    border: none;
    border-radius: 7px;
    color: #fff;
    text-decoration: none;
}

.footer-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 40px 0 20px;
}

    .footer-items img {
        width: 18px;
        margin-left: 6px;
    }

.blog-username {
    display: flex;
    align-items: center;
    color: #7266BA;
    flex: none;
}

.blog-list {
    border: none !important;
    flex-flow: wrap;
    justify-content: end !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul.blog-list li {
    margin-left: 10px;
    flex: none;
}

.blogs-content {
    text-align: center;
}

.blog-items {
    box-shadow: 0px 0px 9px rgb(170 163 163 / 12%), 0px 0px 5px rgb(125 117 117 / 24%);
    position: relative;
    border-radius: 10px;
    padding: 10px 35px;
    background: #fff;
    width: 90%;
    margin: 25px auto;
    text-align: right;
}

    .blog-items h2 {
        color: #333738 !important;
        margin-bottom: 15px !important;
    }

    .blog-items p {
        margin: 10px 0;
    }

.blog-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
}

@media only screen and (max-width: 767px) {
    .video-link,
    .support-section,
    .help-section,
    .accordion,
    .blog-items {
        width: 100%;
    }

        .help-section p,
        .support-section p {
            width: 90%;
        }

    .blog-items {
        padding: 10px 20px;
    }

    .help-tab,
    .help-tab .tab-box {
        margin: 50px 15px;
    }

        .help-tab ul {
            overflow-y: hidden;
            overflow-x: scroll;
        }

            .help-tab ul li {
                margin-left: 25px;
            }

    .contact-input .send-contact {
        width: 100%;
    }

    .blog-img {
        height: 160px;
    }

    .footer-items {
        flex-flow: wrap;
    }

    .blog-username {
        margin-bottom: 10px;
    }

    ul.blog-list {
        overflow-x: hidden;
        display: block;
    }

        ul.blog-list li {
            margin-right: 0;
            margin-top: 10px;
        }
}
/******************/
.helpslider {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    /*    height: 420px;*/
    height: 550px;
    margin-top: 60px;
}

.container .helpslider .slider-slides {
    width: 100%;
}

    .container .helpslider .slider-slides .slider-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 50px;
        font-weight: bold;
        width: 100%;
        margin: 0 auto;
        height: 100%;
        opacity: 0;
    }

        .container .helpslider .slider-slides .slider-slide.active {
            opacity: 1;
            z-index: 999;
        }

        .container .helpslider .slider-slides .slider-slide iframe {
            width: 100%;
            border-radius: 20px;
            height: 420px
        }

.container .slider__nav-button {
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: #333;
    opacity: 0.8;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#nav-button--next {
    top: 35%;
    left: 0;
    transform: translateY(-50%);
}

#nav-button--prev i {
    font-size: 26px;
    color: white;
}

#nav-button--prev {
    top: 35%;
    right: 0;
    transform: translateY(-50%);
}

#nav-button--next i {
    font-size: 26px;
    color: white;
}

.slider__nav {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.slider__navlink {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 1px #fff solid;
    background-color: #333;
    opacity: 0.8;
    margin: 0 10px 0 10px;
    cursor: pointer;
}

    .slider__navlink.active {
        background-color: #fff;
        border: 1px #333 solid;
    }

.support-main-title {
    margin-bottom: 65px;
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: #7645ca;
}

.icon-title {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: inline-block !important
}

.workflow-mockup img {
    animation: UpDown 2s linear infinite;
}

.workflow-page-header .head-wrapper {
    margin-top: 65px;
}

.workflow-page-header .header-shape {
    transform: rotateY(0deg);
}

.workflow-page-header .intro-section h1 {
    font-size: 50px;
    font-weight: 600;
    text-transform: uppercase;
}

.workflow-page-header .intro-section h2 {
    margin: 0;
    font-size: 45px;
    letter-spacing: 8px;
}

.workflow-page-header .intro-section p {
    font-size: 18px;
    color: #d5cfcf;
}

.workflowtools {
    background-color: #fff;
    padding: 80px 0 20px;
    position: relative;
}

.workflow-title {
    font-size: 40px;
    width: 80%;
    margin: 15px auto;
    font-weight: 600;
    color: #000;
    justify-content: center;
}

.workflow-description {
    color: #474747;
    font-size: 18px;
    width: 55%;
    margin: 20px auto 75px;
}

.workflow-img {
    width: 100%;
}

.workflow-icon {
    width: 80px;
    margin-left: 15px;
}

.workflow-title {
    display: flex;
    align-items: center;
}

@keyframes UpDown {
    0% {
        margin-top: 0px;
    }

    50% {
        margin-top: 30px;
    }

    100% {
        margin-top: 0px;
    }
}

.slider-images {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
}

    .slider-images a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 85px;
        margin: 10px 3px;
    }

        .slider-images a img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
            border: 3px solid #fff;
            opacity: 0.7;
        }

        .slider-images a.active img {
            opacity: 1;
            border: none;
        }

.video-tabe ul {
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: center;
    padding: 0;
    padding-bottom: 18px;
}

    .video-tabe ul a {
        display: flex;
        align-items: center;
        text-decoration: none;
        position: relative;
        padding: 0 10px;
        color: #676363;
        flex-direction: column;
        opacity: .5;
        text-align: center
    }

        .video-tabe ul a img {
            width: 140px;
            height: 75px;
            object-fit: cover;
            object-position: center;
            border-radius: 10px;
        }

        .video-tabe ul a span {
            color: #7B7D87;
            font-size: 14px;
            font-weight: 400;
            margin-top: 10px;
        }

        .video-tabe ul a.active {
            opacity: 1;
        }

            .video-tabe ul a.active span {
                color: #7266BA;
                font-weight: 800;
            }

.video-iframe {
    text-align: center
}

    .video-iframe iframe {
        width: 80%;
        border-radius: 20px;
        height: 420px;
        margin: 30px auto;
    }

@media (max-width: 640px) {
    .video-tabe ul a span {
        font-size: 13px;
    }

    .video-tabe ul {
        justify-content: flex-start;
        overflow-x: scroll;
    }

    .video-iframe iframe {
        width: 90%;
        height: 290px;
        margin: 0px auto 20px;
    }
}

.workflow-header {
    margin-top: 60px;
}

    .workflow-header .workflow-intro-section {
        text-align: center;
        width: 75%;
        margin: 10px auto;
    }

        .workflow-header .workflow-intro-section h1 {
            font-weight: 900;
            color: #3F51B5;
            font-size: 40px;
            line-height: 55px;
        }

        .workflow-header .workflow-intro-section p {
            color: #6A6767;
            font-size: 18px;
            margin: 0 auto 30px;
            width: 75%;
        }

.header-items {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    margin: 30px 0;
    width: 390px;
    background: #fff;
    padding: 15px 10px;
    border-radius: 15px;
}

    .header-items:first-child {
        background: #e2d0f3;
        color: #8134cc;
        box-shadow: 0 0 20px 0 #6d48cb8f;
    }

    .header-items:nth-child(2) {
        color: #fe8794;
        background: #ffeff1;
        box-shadow: 0 0 20px 0 #fe87947a;
        margin-right: 100px;
    }

    .header-items:nth-child(3) {
        background: #e2fff6;
        color: #25c997;
        box-shadow: 0 0 20px 0 #25c99754;
        margin-right: -15px;
    }

    .header-items:last-child {
        background: #fff4de;
        color: #ffad44;
        box-shadow: 0 0 20px 0 #ffad4470;
        margin-right: 55px;
    }
    /*   .header-items strong {
        color: #67be45;
    }*/
    .header-items img {
        background: #ffffff47;
        padding: 10px;
        margin-left: 10px;
        border-radius: 15px;
        height: 60px;
        display: flex;
        object-fit: contain;
    }

    .header-items svg {
        width: 30px;
        color: #67be45;
        margin-left: 10px;
        flex: none;
        top: 5px;
        position: relative;
    }

.workflowcontent {
    display: block;
    position: absolute;
    right: 10%;
    bottom: -15px;
}

.workflow-header .workflow-intro-section a {
    color: #3F51B5;
    border: 1px solid #3F51B5;
    height: 55px;
    display: flex;
    width: 200px;
    border-radius: 56px;
    font-size: 18px;
    font-weight: 600;
    justify-content: center;
    align-items: center;
    line-height: 23px;
    margin: 20px auto;
    cursor: pointer;
    text-decoration: none;
}

    .workflow-header .workflow-intro-section a svg {
        width: 20px;
        margin-right: 15px;
    }

.workflow-header .workflow-img {
    width: 70%;
    margin: 30px auto 30px;
}

.workflow-img-items {
    position: relative;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.features2 {
    margin-bottom: 70px;
}

    .features2 .features2-patterns {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        width: auto;
    }

.fearure2-item {
    background: #281e9d;
    padding: 30px;
    border-radius: 40px;
    color: #fff;
    position: relative;
    margin: 20px 0
}

    .fearure2-item p {
        font-size: 18px;
        margin-left: 90px;
    }

    .fearure2-item .row {
        align-items: center;
        display: flex;
    }

    .fearure2-item .feature-content {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
        text-align: right;
    }

        .fearure2-item .feature-content h2 {
            font-size: 40px;
            font-weight: 800;
            margin-top: 0;
        }

        .fearure2-item .feature-content a {
            display: flex;
            width: 155px;
            color: #fff;
            background: #6D22B5;
            font-size: 16px;
            height: 45px;
            justify-content: center;
            align-items: center;
            margin: 10px 0 0;
            cursor: pointer;
            text-decoration: none;
            border-radius: 38px;
        }

            .fearure2-item .feature-content a svg, .workflow2 a svg {
                width: 16px;
                margin-right: 10px;
            }

    .fearure2-item img {
        width: 100%;
        border-radius: 40px;
    }

.workflow2 {
    background: #d4cfcf1a;
    text-align: center;
    padding: 120px 20px 60px;
    position: relative
}

    .workflow2 h2 {
        font-size: 40px;
        font-weight: 600;
        color: #000;
        width: 70%;
        margin: 0 auto 10px;
    }

    .workflow2 p {
        font-size: 18px;
        width: 35%;
        margin: 25px auto;
    }

    .workflow2 a {
        display: flex;
        align-items: center;
        height: 50px;
        background: #6447B1;
        font-size: 21px;
        font-weight: 600;
        color: #fff;
        width: 170px;
        margin: 35px auto 0;
        justify-content: center;
        border-radius: 40px;
        cursor: pointer;
        text-decoration: none;
    }

@media (max-width: 767px) {
    .workflow-img-items {
        display: block;
        text-align: center;
    }

    .workflow-header .workflow-img {
        width: 100%;
        margin: 0;
    }

    .header-items {
        font-size: 14px;
        margin: 10px auto;
        width: 90%;
        text-align: right;
    }

    .workflowcontent {
        display: block;
        position: relative;
        right: 0;
        bottom: 0;
        top: -70px;
    }

    .header-items:nth-child(2), .header-items:nth-child(3), .header-items:nth-child(4) {
        margin-right: auto
    }

    .workflowtools {
        padding: 0 0 20px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .workflow-header .workflow-img {
        width: 100%;
    }
}

@media (min-width: 767px) and (max-width: 991px) {
    .workflow-header .workflow-img {
        width: 100%;
    }

    .workflowcontent {
        right: 40px;
        bottom: -15px;
    }

    .header-items {
        font-size: 12px;
        margin: 10px 0;
        width: 400px;
    }

        .header-items img {
            height: 50px;
        }
}

.count-section h2 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 16px;
}

.count-section p {
    font-size: 20px;
    color: #6A6767;
}

.all-count-section {
    display: flex;
    justify-content: center;
    margin: 80px 0;
    align-items: end;
}

    .all-count-section .itemss {
        display: flex;
        height: 250px;
        margin: 15px;
        flex-direction: column;
        justify-content: end;
    }

        .all-count-section .itemss h4 {
            font-size: 22px;
            font-weight: 600;
        }


        .all-count-section .itemss .count-item {
            height: 100%;
            border-radius: 20px;
            position: relative;
            width: 250px;
        }

            .all-count-section .itemss .count-item span {
                position: absolute;
                bottom: 0px;
                left: 15px;
                font-size: 45px;
                font-weight: 600;
            }

        .all-count-section .itemss .count-item {
            background: #FFD2D7
        }

        .all-count-section .itemss:nth-child(2) .count-item {
            background: #B2FFD3
        }

        .all-count-section .itemss:nth-child(3) .count-item {
            background: #FFE3CE
        }

        .all-count-section .itemss:nth-child(4) .count-item {
            background: #C1FFFF
        }

.start-with-us {
    background: #050038;
    background-image: url('../img/start-with.png');
    width: 100%;
    background-position: left;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    color: #fff;
    padding: 160px 0;
    margin: 0px 0 0;
}

    .start-with-us h2 {
        font-size: 40px;
        font-weight: 600;
        margin: 0 auto 20px;
        text-align: center;
    }

    .start-with-us p {
        font-size: 18px;
        width: 50%;
        margin: 10px auto;
    }

    .start-with-us .input-contact {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 40px auto 0;
    }

        .start-with-us .input-contact .my-input {
            width: 85%;
            background: transparent;
            border: none;
            padding: 20px;
            font-size: 18px;
            font-weight: 600;
            outline: none
        }

    .start-with-us .send-contact {
        height: 60px;
        background: #FF6575;
        border: none;
        border-radius: 45px;
        flex: none;
        font-size: 18px;
        font-weight: 700;
        width: 200px;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 40px auto 0;
        color: #fff
    }

.last-section {
    background-color: #fff;
    padding: 95px 0 100px;
    position: relative;
}

    .last-section h2 {
        font-size: 35px;
        width: 80%;
        font-weight: 600;
        color: #000;
        text-align: center;
    }

    .last-section .subtitle {
        color: #474747;
        font-size: 18px;
        width: 45%;
        margin: 20px auto 75px;
        text-align: center;
    }

    .last-section .section-content {
        margin-top: 100px;
        background: transparent;
        margin-bottom: 140px;
        display: flex;
        align-items: center;
    }

        .last-section .section-content img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 30px;
        }

        .last-section .section-content h2 {
            text-align: right
        }

        .last-section .section-content h3 {
            font-weight: 700;
            font-size: 22px;
            width: 75%;
        }

        .last-section .section-content p {
            color: #474747;
            font-size: 18px;
            width: 90%;
            margin: 10px 0 10px;
            text-align: right;
        }

            .last-section .section-content p span {
                display: block;
                margin: 0px 0 7px;
                font-size: 14px;
            }

                .last-section .section-content p span img {
                    width: 24px;
                    height: 24px;
                    margin-left: 5px;
                }

        .last-section .section-content a {
            display: flex;
            align-items: center;
            height: 50px;
            background: #6447B1;
            font-size: 21px;
            font-weight: 600;
            color: #fff;
            width: 170px;
            margin: 0px 0 0;
            justify-content: center;
            border-radius: 40px;
            cursor: pointer;
            text-decoration: none;
        }

            .last-section .section-content a svg {
                width: 16px;
                margin-right: 10px;
            }

@media (max-width: 992px) {
    .fearure2-item .row {
        display: block;
    }

    .last-section .section-content {
        margin-top: 60px;
        margin-bottom: 60px;
        flex-direction: column;
    }

        .last-section .section-content:nth-of-type(2) {
            flex-direction: column-reverse;
        }

        .last-section .section-content img {
            margin-bottom: 30px
        }

    .fearure2-item .feature-content a {
        margin: 10px 0 50px;
    }

    .features2 .features2-patterns {
        height: 70%;
        width: 100%;
        object-fit: cover;
        margin-bottom: 0
    }

    .fearure2-item {
        padding: 60px 30px 30px;
    }

        .fearure2-item img {
            margin-bottom: 50px;
        }

    .workflow-title, .workflow-description, .start-with-us p, .last-section .subtitle, .workflow2 h2, .workflow2 p, .workflow-header .workflow-intro-section {
        width: 100%;
    }

    .fearure2-item p {
        margin-left: 0
    }

    .start-with-us {
        background-size: cover;
        padding: 80px 0;
    }

        .start-with-us h2, .fearure2-item .feature-content h2, .workflow-title, .workflow-header .workflow-intro-section h1, .last-section h2, .workflow2 h2 {
            font-size: 30px;
            line-height: 35px;
        }
}

.header-title {
    width: 100% !important;
}

.notification-img {
    position: absolute;
    right: 0;
    left: 0;
    top: -26px;
    margin: auto;
    width: 45px !important;
    animation: swing ease-in-out 4s infinite alternate-reverse;
}

.calender-img {
    position: absolute;
    left: 0px;
    top: -40px;
    width: 95px !important;
    animation: swing2 ease-in-out 8s infinite alternate;
}

.chart-img {
    position: absolute;
    right: 0px;
    top: 5px;
    width: 100px !important;
    animation: swing3 ease-in-out 4s infinite alternate;
}

.chart-img2 {
    position: absolute;
    right: 0px;
    bottom: 5px;
    width: 140px !important;
    animation: swing4 ease-in-out 4s infinite alternate;
}

.task-img {
    position: absolute;
    left: 0px;
    bottom: 5px;
    width: 100px !important;
    animation: swing5 ease-in-out 4s infinite alternate;
}

.task2-img {
    position: absolute;
    left: 156px;
    bottom: 146px;
    width: 125px !important;
    animation: swing6 ease-in-out 4s infinite alternate;
}

.task3-img {
    position: absolute;
    left: 279px;
    bottom: 146px;
    width: 125px !important;
    animation: swing7 ease-in-out 4s infinite alternate;
}

@keyframes swing6 {
    0% {
        left: 156px;
        bottom: 146px;
    }

    50% {
        left: 237px;
        bottom: 142px;
    }

    100% {
        left: 279px;
        bottom: 146px;
    }
}

@keyframes swing7 {
    0% {
        left: 279px;
        bottom: 146px;
    }

    50% {
        left: 220px;
        bottom: 100px;
    }

    100% {
        left: 156px;
        bottom: 146px;
    }
}

@keyframes swing {
    0% {
        top: 30px;
        right: 50px
    }

    100% {
        right: 0;
        top: -30px;
    }
}

@keyframes swing5 {
    0% {
        bottom: -35px;
        left: -15px
    }

    100% {
        left: 10px;
        bottom: -35px;
    }
}

@keyframes swing2 {
    0% {
        left: 0px;
        top: 5px;
    }

    50% {
        left: -25px;
        top: 20px;
    }

    100% {
        left: 25px;
        top: 20px;
    }
}

@keyframes swing3 {
    0% {
        right: 0px;
        top: 0;
    }

    50% {
        right: 15px;
        top: 30px;
    }

    75% {
        right: -15px;
        top: 30px;
    }

    100% {
        right: 0px;
        top: 0;
    }
}

@keyframes swing4 {
    0% {
        right: 0px;
        bottom: -5px;
    }

    50% {
        right: -15px;
        bottom: 30px;
    }

    100% {
        right: 0px;
        bottom: -5px;
    }
}

@media (max-width: 992px) {
    .task3-img, .task2-img {
        animation: none
    }

    .task2-img {
        position: absolute;
        left: 28%;
        bottom: 40%;
        width: 23% !important;
    }

    .task3-img {
        position: absolute;
        left: 50%;
        bottom: 40%;
        width: 23% !important;
    }
}

@media (max-width: 767px) {
    .task-img, .chart-img2, .chart-img, .calender-img, .notification-img {
        animation: none
    }

    .task-img {
        bottom: -25px;
        width: 70px !important;
    }

    .calender-img {
        top: -19px;
        width: 79px !important;
    }

    .chart-img2 {
        right: -7px;
        bottom: 0px;
        width: 100px !important;
    }

    .project-mockup {
        margin-top: 25px;
    }

    .chart-img {
        right: -7px;
        top: -7px;
        width: 80px !important;
    }
}

/**************************************/


.testim-section .testim-title {
    font-size: 60px;
    text-align: right;
    padding: 70px 0px;
    font-weight: 500;
    text-transform: uppercase;
}

    .testim-section .testim-title strong {
        color: #42a6e8;
        font-size: 60px;
    }

.testim {
    width: 100%;
}

    .testim .wrap {
        position: relative;
        width: 100%;
        max-width: 1020px;
        padding: 40px 20px;
        margin: auto;
    }

    .testim .dots {
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: 30px;
        right: 0;
        display: block;
        z-index: 9;
        height: 12px;
        padding: 0;
    }

    .testim .cont div p span svg {
        width: 22px;
        margin-left: 8px;
    }

    .testim .dots .dot {
        list-style-type: none;
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid #e2e2e2;
        margin: 0 6px;
        cursor: pointer;
        -webkit-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        position: relative;
    }

        .testim .dots .dot.active,
        .testim .dots .dot:hover {
            background: #42a6e8;
            border-color: #42a6e8;
        }

        .testim .dots .dot.active {
            -webkit-animation: testim-scale .5s ease-in-out forwards;
            -moz-animation: testim-scale .5s ease-in-out forwards;
            -ms-animation: testim-scale .5s ease-in-out forwards;
            -o-animation: testim-scale .5s ease-in-out forwards;
            animation: testim-scale .5s ease-in-out forwards;
        }

    .testim .cont {
        position: relative;
        /* overflow: hidden;*/
    }

        .testim .cont > div {
            text-align: center;
            position: absolute;
            top: 30px;
            left: 0;
            right: 0;
            padding: 0 0 70px 0;
            opacity: 0;
        }

            .testim .cont > div.inactive {
                opacity: 1;
            }


            .testim .cont > div.active {
                position: relative;
                opacity: 1;
            }


        .testim .cont div .img img {
            display: block;
            position: absolute;
            width: 200px;
            height: 180px;
            margin: auto;
            border-radius: 20px;
            z-index: 9;
            bottom: 50px;
            left: -10px;
            box-shadow: 0px 0px 20px #5365c1d9;
        }

        .testim .cont div h2 {
            color: #ea830e;
            font-size: 1em;
            margin: 15px 0;
        }

        .testim .cont .test-item-content {
            width: 100%;
            padding: 45px 30px 20PX;
            margin: auto;
            text-align: center;
            height: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            border-radius: 20px;
            background-position: top 15px left 15px, bottom 15px right 15px;
            background-repeat: no-repeat;
            background-size: 180px, 180px;
            color: #333333;
            border: 3px solid #D0D0D0;
        }

            .testim .cont .test-item-content p {
                font-weight: 600;
                font-size: 24px;
            }

.test-pattern {
    position: absolute;
    opacity: .7;
    height: 75%;
    object-fit: cover;
    right: 20%;
    top: 20%;
}

.testim .cont .test-item-content span.user-sign {
    font-size: 16px;
    font-weight: 500;
    margin: 30px auto 10px;
    color: #8e9399;
    display: inline-block;
    text-align: center;
}

    .testim .cont .test-item-content span.user-sign img {
        width: 70px;
        background: #fff;
        /*     border: 2px solid #f1f1f1;*/
        border-radius: 45px;
        height: 70px;
        object-fit: contain;
        object-position: center;
        padding: 0px 0 0;
        display: block;
        margin: 0px auto 15px;
    }

.testim .cont .test-item.active img {
    -webkit-animation: testim-show .5s ease-in-out forwards;
    -moz-animation: testim-show .5s ease-in-out forwards;
    -ms-animation: testim-show .5s ease-in-out forwards;
    -o-animation: testim-show .5s ease-in-out forwards;
    animation: testim-show .5s ease-in-out forwards;
}

.testim .cont .test-item {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;
    -moz-animation: testim-content-out .5s ease-in-out forwards;
    -ms-animation: testim-content-out .5s ease-in-out forwards;
    -o-animation: testim-content-out .5s ease-in-out forwards;
    animation: testim-content-out .5s ease-in-out forwards;
}

.user-sign {
    text-align: center;
    text-align: center !important;
    width: 170px;
    margin: 20px auto 0 0 !important;
    font-size: 12px !important;
}

    .user-sign img {
        margin: 0px auto 0 5px;
    }

.testim .cont .test-item p {
    margin-top: 20px
}

.testim .cont .test-item.active, .testim .cont .test-item.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;
    -moz-animation: testim-content-in .5s ease-in-out forwards;
    -ms-animation: testim-content-in .5s ease-in-out forwards;
    -o-animation: testim-content-in .5s ease-in-out forwards;
    animation: testim-content-in .5s ease-in-out forwards;
}

.test-item.active p .quote-l, .test-item.active p .quote-r {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 21px;
    background: url('../img/sprite.png') no-repeat scroll -56px -113px;
    margin: 0 0px 0 8px;
    top: -15px;
}

.test-item.active p .quote-r {
    background: url('../img/sprite.png') no-repeat scroll 0 -113px;
    margin: 0px 8px 0 0px;
    top: 15px;
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        -moz-transform: translateX(0);
        transform: translateX(0);
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateX(100%);
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        opacity: 0;
        -moz-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        opacity: 0;
        -ms-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-100%);
    }
}

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }

    to {
        opacity: 1;
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }

    to {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }

    to {
        opacity: 1;
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }

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

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);
        transform: scale(1);
    }

    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1);
    }

    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);
        transform: scale(1);
    }

    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0);
    }
}

@media all and (max-width: 300px) {
    body {
        font-size: 14px;
    }
}

@media all and (max-width: 500px) {
    .testim .arrow {
        font-size: 1.5em;
    }

    .testim .cont div p {
        line-height: 25px;
        font-size: 18px !important;
    }

    .testim .wrap {
        padding: 0px 20px 40px;
    }
}

@media (min-width:767px) and (max-width:991px) {
    nav .nav-logo img {
        width: 140px;
    }

    nav ul li {
        padding: 0 6px;
    }
}

@media (max-width: 1200px) {
    .testim-section .testim-title {
        text-align: center;
        padding: 40px 0px 10px;
    }
}

@media (max-width: 767px) {
    .testim .cont .test-item-content {
        height: 360px;
    }
}

@media (max-width: 500px) {
    .testim .cont .test-item-content {
        height: auto;
        font-size: 20px;
        padding: 20px 20px 30px;
    }

        .testim .cont .test-item-content span.user-sign {
            margin: 20px auto 0 !important;
        }

    .testim-section .testim-title, .testim-section .testim-title strong {
        font-size: 3.5rem;
    }

    .testim-section .testim-title {
        padding: 0px 0px 0px;
    }
}
/*******************************************/
.user-request-section {
    margin: 0px 0;
}

.user-pattern {
    background-image: linear-gradient(#ffffff00,#ffffff00,#f0f0f0);
    height: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    width: 100%;
}

.user-request-items {
    background-image: linear-gradient(#ffffff,#ededed);
    overflow: hidden;
    display: block;
    position: relative
}

.user-request-left {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.user-request_img {
    display: flex;
    padding: 0 0px;
    position: relative;
    flex-direction: column;
    width: 11%;
}

.image-col {
    width: 100%;
    padding: 0;
}

.user-request_img img {
    width: 100%;
    height: auto;
    padding: 0 0px 8px 8px;
    border-radius: 20px;
    object-fit: cover;
}

.user-request_img:first-child {
    bottom: -15px;
}

.user-request_img:nth-child(2) {
    bottom: 8px;
}

.user-request_img:nth-child(3) {
    bottom: -25px;
}

.user-request_img:nth-child(4) {
    bottom: -60px;
}

.user-request_img:nth-child(5) {
    bottom: -15px;
}

.user-request_img:nth-child(6) {
    bottom: -45px;
}

.user-request_img:last-child {
    bottom: -35px;
}

.user-request_img:first-child img {
    animation: zoom-in-zoom-out 3s ease-out infinite;
}

.user-request_img:nth-child(2) img {
    animation: zoom-in-zoom-out 4s ease-out infinite;
}

.user-request_img:nth-child(3) img {
    animation: zoom-in-zoom-out 5s ease-out infinite;
}

.user-request_img:nth-child(4) img {
    animation: zoom-in-zoom-out 6s ease-out infinite;
}

.user-request_img:nth-child(5) img {
    animation: zoom-in-zoom-out 7s ease-out infinite;
}

.user-request_img:nth-child(6) img {
    animation: zoom-in-zoom-out 8s ease-out infinite;
}

.user-request_img:nth-child(7) img {
    animation: zoom-in-zoom-out 9s ease-out infinite;
}

.user-request_img:last-child img {
    animation: zoom-in-zoom-out 10s ease-out infinite;
}

@keyframes zoom-in-zoom-out {
    0% {
        opacity: .5
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: .5
    }
}

.image-contents {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 15px 45px 25px;
    margin: 10px 0 30px;
}

    .image-contents .heading {
        font-size: 3.5rem;
        font-weight: 600;
        line-height: 1.2;
        color: #474747;
        margin: 0px 0 15px;
        text-align: center
    }

    .image-contents .users-desc {
        opacity: .8;
        color: #474747;
        font-size: 16px;
        margin-bottom: 18px;
        text-align: center
    }

.follow-btn {
    background: #6447B1;
    border-radius: 34px;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #ffffff !important;
    font-size: 16px;
    justify-content: center;
    text-decoration: none !important;
}

@media (min-width:300px) and (max-width:767px) {
    .user-pattern {
        height: 20%;
    }

    .user-request_img img {
        padding: 0 2px 8px 2px;
        border-radius: 8px;
    }

    .user-request_img {
        width: 20%;
    }

    .image-contents {
        margin: 0 0 0px;
    }
}
/**********************************************************/
.home-workflow .row-features .feature-img {
    height: 160px;
    padding: 0 10px;
}

.home-workflow .row-features .features-items {
    height: auto;
}

.workflow-contact {
    background-image: url(../img/Image1.png);
    padding: 60px 0 0;
    background-position: center;
    position: relative;
    color: #000;
    background-repeat: no-repeat;
    background-size: cover;
}

    .workflow-contact .workflow-contact-header {
        margin-bottom: 60px
    }

        .workflow-contact .workflow-contact-header h2 {
            font-size: 40px;
            font-weight: 600;
            color: #fff;
            width: 75%;
            text-align: center;
            margin: 0 auto 0px;
            color: #000;
        }

        .workflow-contact .workflow-contact-header p {
            font-size: 18px;
            width: 35%;
            margin: 16px auto 0px;
            text-align: center;
            color: #474747;
        }

    .workflow-contact .form-control {
        background-color: transparent;
        box-shadow: none
    }

        .workflow-contact .form-control option {
            color: #474747
        }

    .workflow-contact .contact-form {
        background-image: url(../img/img2.png);
        padding: 60px 10% 0px;
        background-position: center;
        position: relative;
        color: #000;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 10px 10px 0 0;
    }

        .workflow-contact .contact-form .my-input, .workflow-contact .form-control {
            border-radius: 15px;
            border: 1px solid #efe9ff;
            color: #000000;
            min-height: 45px;
        }

    .workflow-contact .cap-style {
        color: #272424;
    }

.false-alert {
    color: #f96e77;
    background-color: #ffffff;
    box-shadow: 0px 0px 13px 0px #f3f3f3;
    height: 60px;
    align-items: center;
    padding: 0 20px;
    position: relative;
    display: flex;
    border-radius: 15px 0px 0px 15px;
}

    .false-alert::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 4px;
        right: 0;
        top: 0;
        background: #ed1725;
    }

    .false-alert svg, .true-alert svg {
        width: 24px;
        margin: 0 10px;
    }

.true-alert {
    color: #8cc63e;
    background-color: #ffffff;
    box-shadow: 0px 0px 13px 0px #f3f3f3;
    height: 60px;
    align-items: center;
    padding: 0 20px;
    position: relative;
    display: flex;
    border-radius: 15px 0px 0px 15px;
}

    .true-alert::before {
        content: "";
        position: absolute;
        height: 100%;
        width: 4px;
        right: 0;
        top: 0;
        background: #8cc63e;
    }
/****************************************************************/
/****************************************************************/
/****************************************************************/
.client-section {
    padding: 5px 0 80px;
    text-align: center;
    position: relative;
    margin-top: 30px;
}

    .client-section .section-description {
        padding-left: 0
    }

@keyframes scroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(calc(200px * 8.8));
    }
}

@keyframes scroll2 {
    0% {
        transform: translateX(calc(200px * 9.5))
    }

    100% {
        transform: translateX(0%);
    }
}

.clientslider {
    background: #fff0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

    .clientslider::before, .clientslider::after {
        background: linear-gradient(to right, #fff0 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        height: 100px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .clientslider::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .clientslider::before {
        left: 0;
        top: 0;
    }

    .clientslider .slide-track {
        -webkit-animation: scroll 40s ease-in-out infinite;
        animation: scroll 40s ease-in-out infinite;
        display: -webkit-box;
        width: calc(200px * 18);
        margin-bottom: 0px !important;
    }

    .clientslider .slide-track2 {
        -webkit-animation: scroll2 40s ease-in-out infinite;
        animation: scroll2 40s ease-in-out infinite;
        display: -webkit-box;
        width: calc(200px * 19);
    }

    .clientslider .slide-track3 {
        -webkit-animation: scroll 40s ease-in-out infinite;
        animation: scroll 20s ease-in-out infinite;
        display: -webkit-box;
        width: calc(200px * 20);
    }

    .clientslider .slide {
        margin: 10px 15px;
        height: 80px !important;
        width: 200px;
        /* border: 1px solid grey; */
        border-radius: 25px;
        background-color: white;
        /* justify-content: center; */
        align-items: center;
        padding: 1px 0;
        box-shadow: 0 0 11px 2px #80808021;
    }

        .clientslider .slide, .clientslider .slide img {
            height: 80px;
        }

            .clientslider .slide img {
                object-position: center;
                object-fit: contain;
                width: 160px !important;
            }
/*******************************************/
.wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}

    .wrapper.loaded {
        position: relative !important;
    }

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loaded #loader {
    opacity: 0;
    transition: all 01s ease-out;
}

.loaded #loader-wrapper {
    visibility: hidden;
    transform: translateX(-100%);
    transition: all 01s 1s ease-out;
}

.preload * {
    transition: none !important;
}

#loader-wrapper .brand-logo img {
    max-width: 250px;
    width: 84%;
}

#loader-wrapper .brand-logo span {
    font-weight: 500;
    color: #7266ba !important;
    font-size: 50px;
}

#loader-wrapper .brand-logo {
    background-color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999999999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    #loader-wrapper .brand-logo .brand-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
/**********************************/
.fadeInUp {
    animation: fadeInUp 1s ease-in-out backwards;
}

.delayed2 {
    animation-delay: .2s
}

.delayed4 {
    animation-delay: .4s
}

.delayed6 {
    animation-delay: .6s
}

.delayed8 {
    animation-delay: .8s
}

.delayed10 {
    animation-delay: 1s
}

.delayed12 {
    animation-delay: 1.2s
}

.delayed14 {
    animation-delay: 1.4s
}

.delayed16 {
    animation-delay: 1.6s
}

.delayed18 {
    animation-delay: 1.8s
}

@keyframes fadeInUp {
    0% {
        transform: translate(0px, 100px);
        opacity: 0;
    }

    100% {
        transform: translate(0px, 0);
        opacity: 1;
    }
}
/*********************************/
@media (min-width:300px) and (max-width:600px) {
    .first-card .card-header .projecto-img, .second-card .card-header img {
        width: 130px;
        height: 50px;
    }

    .first-card .card-header p {
        margin-top: 0px;
    }

        .first-card .card-header p span {
            font-size: 22px;
        }

    .first-card .card-header .startnewtrial {
        padding: 10px 12px;
        font-size: 10px;
    }

    .first-card .card-header, .second-card .card-header {
        padding: 20px 20px 20px;
    }

    .first-card .list-card {
        margin-top: 0px;
        margin-bottom: 0px;
        padding: 20px 15px 5px 15px;
    }

    .first-card ul li, .sub-cards ul li {
        padding: 2px 0px;
        font-size: 11px;
    }

    .first-card .list-card ul .tick, .second-card ul .tick {
        font-size: 13px;
        color: #2CA01C;
    }

    .first-card .card-header p small, .second-card p small {
        font-size: 11px;
    }

    .first-card, .sub-cards {
        min-height: 415px;
    }
}
/*********************************/

a.mobile-btn {
    bottom: 20px;
    width: 130px;
    left: 20px;
    position: fixed;
    background: #467BBE;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 50px;
    box-shadow: 0 4px 9px 0 rgba(0, 0, 0, .14);
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    z-index: 99;
    text-decoration: none;
}

    a.mobile-btn svg {
        width: 24px;
    }

    a.mobile-btn span {
        margin-left: 8px;
    }

/*********************************/


.container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


.dashboard-grid {
    margin-bottom: 40px;
}

    .dashboard-grid .col-xs-12,
    .dashboard-grid .col-sm-6,
    .dashboard-grid .col-md-4 {
        margin-bottom: 30px;
    }

/*********************************/
.features-title {
    font-weight: 600;
    margin-top: 15px;
    color: #7a7878;
}

.card {
    border-radius: 20px;
    padding: 30px;
    transition: all 0.2s ease-out;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: 200px !important;
}

    .card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--card-color), var(--card-color-light));
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.4s ease-in-out;
    }

    .card:hover::before {
        transform: scaleX(1);
        transform-origin: left;
    }

    .card:hover {
        box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    }

.card-orange {
    --card-color: #ff7849;
    --card-color-light: #ffb347;
}

.card-green {
    --card-color: #4caf50;
    --card-color-light: #81c784;
}

.card-purple {
    --card-color: #9c27b0;
    --card-color-light: #ba68c8;
}

.card-blue {
    --card-color: #2196f3;
    --card-color-light: #64b5f6;
}

.card-gray {
    --card-color: #607d8b;
    --card-color-light: #90a4ae;
}

.card-pink {
    --card-color: #e91e63;
    --card-color-light: #f06292;
}

.card-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--card-color), var(--card-color-light));
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    transform: translateZ(20px);
}

    .card-icon img {
        width: 40px; /* Sizing the image within the icon container */
        height: 40px;
        filter: none;
    }

.card:hover .card-icon {
    transform: scale(1.1) translateZ(40px);
    filter: brightness(1.2);
}

.card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #7a7878;
    margin-bottom: 8px;
    transform: translateZ(30px);
}

.card-subtitle {
    font-size: 0.95rem;
    color: #7f8c8d; /* Darker text */
    font-weight: 400;
    opacity: 0.9;
    transform: translateZ(10px);
}

.features-section01 {
    padding: 25px;
    text-align: center;
    color: white;
    margin: 14px 0px;
}

.container01 {
    background: linear-gradient(135deg, rgba(248, 244, 255, 0.95) 0%, rgba(232, 242, 255, 0.9) 15%, rgba(209, 218, 250, 0.85) 35%, rgba(197, 217, 255, 0.9) 60%, rgba(181, 216, 255, 0.95) 85%, rgba(165, 201, 245, 1) 100% ), radial-gradient(ellipse 800px 600px at 70% 20%, rgba(129, 52, 204, 0.08) 0%, transparent 50% ), radial-gradient(ellipse 600px 800px at 30% 80%, rgba(54, 133, 186, 0.06) 0%, transparent 50% ), radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 30%, transparent 70% ), radial-gradient(circle at 80% 70%, rgba(129, 52, 204, 0.1) 0%, rgba(129, 52, 204, 0.03) 40%, transparent 70% );
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(129, 52, 204, 0.1), 0 15px 35px rgba(54, 133, 186, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    background-clip: padding-box;
    margin: 0 50px;
    border-radius: 32px;
    padding: 0 50px 50px 50px;
}
/*********************************/
/* تصحيح media query للشاشات الصغيرة */
@media (max-width: 768px) {
    /* جعل البطاقات تظهر واحدة تحت الأخرى في الموبايل */
    .dashboard-grid .col-md-2 {
        width: 100%;
        margin-bottom: 20px;
    }

    /* تقليل حجم البطاقات في الموبايل */
    .card {
        padding: 20px;
        height: 160px !important;
    }

    /* تقليل حجم أيقونة البطاقة */
    .card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

        .card-icon img {
            width: 30px;
            height: 30px;
        }

    /* تقليل حجم النص */
    .card-title {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }

    .card-subtitle {
        font-size: 0.85rem;
    }

    /* تقليل المسافات في القسم */
    .features-section01 {
        padding: 15px;
    }

    .container01 {
        margin: 0 20px;
        padding: 0 20px 30px 20px;
    }

    /* تعديل العنوان */
    .features-title {
        font-size: 1.5rem;
        margin-top: 10px;
    }
}

/* للشاشات الأصغر (أقل من 480px) */
@media (max-width: 480px) {
    .container01 {
        margin: 0 10px;
        padding: 0 15px 25px 15px;
    }

    .card {
        padding: 15px;
        height: 140px !important;
    }

    .card-title {
        font-size: 1rem;
    }

    .card-subtitle {
        font-size: 0.8rem;
    }
}

/* للشاشات المتوسطة (بين 768px و 991px) */
@media (min-width: 769px) and (max-width: 991px) {
    .dashboard-grid .col-md-2 {
        width: 100%; /* جعل البطاقة تأخذ العرض الكامل */
        margin-bottom: 25px;
    }

    .card {
        height: 180px !important;
    }
}

/* للشاشات الكبيرة نسبياً (بين 992px و 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .dashboard-grid .col-md-2 {
        width: 50%; /* بطاقتان في الصف الواحد */
        margin-bottom: 25px;
    }

    .card {
        height: 200px !important;
    }
}

/*********************************/

.container02 {
    margin: 50px 0px;
    padding: 50px;
}

.features-section-item .kanban img.calender {
    max-width: 100%;
    border-radius: 32px;
    background: linear-gradient(to right, #E7EAF2, #C5D1FF);
    box-shadow: 0 10px 25px 0 rgb(228 232 243), 0 3px 8px rgb(198 209 254);
}

/*********************************/

.container03 {
    background: linear-gradient(to right, #E7EAF2, #C5D1FF);
    margin: 50px 0px;
    padding: 50px;
}

.features-section-item .Ganttchart img {
    max-width: 100%;
    border-radius: 32px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, 0.08);
}

/*********************************/

.container04 {
    margin: 50px 0px;
    padding: 50px;
}

.features-section-item .calender01 img {
    max-width: 75%;
    border-radius: 32px;
    border: 2px solid rgba(0, 0, 0, 0%);
    background-color: #8353ce;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .25), 0 3px 8px rgba(0, 0, 0, 0.08);
}


@media (min-width: 769px) and (max-width: 991px) {


    .container04 {
        padding: 35px 25px;
    }

    .features-section-item .calender01 {
        text-align: center;
    }

        .features-section-item .calender01 img {
            max-width: 75%;
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(131, 83, 206, 0.3), 0 4px 10px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            display: block;
        }

    .features-section-item h2 {
        font-size: 32px !important;
        text-align: center;
    }

    .features-section-item p {
        font-size: 18px !important;
        text-align: center;
        max-width: 85%;
        margin: 0 auto;
    }
}

/* الشاشات الصغيرة (768px وما دون) */
@media (max-width: 768px) {
    .container04 {
        padding: 20px 15px;
        margin-bottom: 60PX;
    }

    .features-section-item .calender01 {
        text-align: center;
    }

        .features-section-item .calender01 img {
            max-width: 95%;
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: 0 8px 20px rgba(131, 83, 206, 0.3), 0 4px 10px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            display: block;
        }

    /* تحسين النصوص */
    .features-section-item h2 {
        font-size: 28px !important;
        text-align: center;
        margin-bottom: 15px;
        color: #333;
        line-height: 1.3;
    }

    .features-section-item p {
        font-size: 16px !important;
        margin: 15px auto;
        max-width: 90%;
    }

    /* تحسين التخطيط للشاشات الصغيرة */
    .features-section-item .row {
        text-align: center;
    }

    .features-section-item .col-md-6 {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* الشاشات الأصغر (360px وما دون) */
@media (max-width: 360px) {

    .features-section-item .calender01 img {
        max-width: 100%;
        margin: 12px auto;
    }

    .features-section-item h2 {
        font-size: 22px !important;
        margin-bottom: 10px;
    }

    .features-section-item p {
        font-size: 13px !important;
        margin: 10px auto;
        max-width: 100%;
    }
}


/****************************************************************/

<!-- Testimonials Section -->
.testim-section {
    background-color: #f0f2f5; /* لون خلفية خفيف */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* محاذاة إلى الأعلى */
    min-height: unset;
    padding: 20px; /* مسافة داخلية حول الصفحة */
}


/* حاوية البطاقات القابلة للتمرير */
.scroll-container-wrapper {
    position: relative;
    width: 100%;
    border-radius: 10px; /* حواف مستديرة للحاوية الخارجية */
    height: auto !important;
    min-height: unset !important;
}

.scroll-container {
    padding: 40px 0px 10px 0px; /* مسافة داخلية حول البطاقات داخل الحاوية */
    -webkit-overflow-scrolling: touch; /* لتحسين التمرير على الأجهزة التي تعمل باللمس */
    scroll-behavior: smooth; /* سلوك التمرير الناعم */
    height: auto !important;
    min-height: unset !important;
}


/* إخفاء شريط التمرير لتحسين المظهر (اختياري) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none; /* لـ IE و Edge */
    scrollbar-width: none; /* لـ Firefox */
}

/* نمط بطاقة الشهادة الفردية */
.testimonial-card {
    flex: 0 0 auto; /* منع البطاقة من التمدد أو الانكماش */
    width: 320px; /* عرض ثابت للبطاقة */
    max-width: 100%;
    height: 200px;
    margin: 0 10px;
    background-color: #fff;
    border: 1px solid #ddd; /* إطار خفيف */
    border-radius: 20px; /* حواف مستديرة للبطاقة */
    box-shadow: 0 2px 2px rgba(0,0,0,0.1); /* ظل خفيف */
    padding: 25px;
    transition: transform 0.2s ease-in-out; /* حركة ناعمة عند التحويم */
    white-space: normal; /* السماح للنص داخل البطاقة بالالتفاف بشكل طبيعي */
}



.media {
    display: flex;
    align-items: center;
}

.media-object {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    object-fit: cover;
}

.media-body .name {
    font-weight: bold;
    font-size: 17px;
    color: #333;
}

.media-body .title {
    font-size: 14px;
    color: #777;
    margin-top: 3px;
}

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

.fade-left::before,
.fade-right::after {
    content: '';
    position: absolute;
    top: 40px;
    height: 80%;
    width: 80px;
    pointer-events: none;
    z-index: 10;
}

.fade-left::before {
    left: 0;
    background: linear-gradient(to right, #f0f2f5, transparent); /* من لون الخلفية إلى شفاف */
}

.fade-right::after {
    right: 0;
    background: linear-gradient(to left, #f0f2f5, transparent); /* من لون الخلفية إلى شفاف */
}

section.testim-section {
    margin: -85px 0 0 0;
}

.item.slick-slide .content {
    border-radius: 20px;
}

/* =================== Media Queries محسنة =================== */

@media (min-width: 1000px) and (max-width: 1199px) {


    .testimonial-card {
        width: 280px;
        height: 200px;
        margin: 0 5px;
        padding: 20px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }


    .media-body .name {
        font-size: 13px;
    }

    .media-body .title {
        font-size: 12px;
    }

    .testimonial-text {
        line-height: 1.4;
        margin-top: 12px;
        font-size: 14px;
    }

    .fade-left::before,
    .fade-right::after {
        width: 50px;
        height: 80%;
        top: 40px;
    }

    .fade-left::before {
        left: 0 !important;
    }
}

/************/

@media (min-width: 768px) and (max-width: 999px) {

    .testimonial-card {
        margin: 0 5px;
        padding: 15px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    .media-body .name {
        font-size: 11px;
    }

    .media-body .title {
        font-size: 9px;
    }

    .testimonial-text {
        line-height: 1.4;
        margin-top: 12px;
        font-size: 12px;
    }

    .fade-left::before,
    .fade-right::after {
        width: 50px;
    }
}



/* تحسينات قسم الشهادات للشاشات الصغيرة */
@media (min-width: 480px) and (max-width: 767px) {

    .testimonial-card {
        height: 150px; /* تقليل ارتفاع البطاقة */
        margin: 0 5px; /* تقليل المارجن */
        padding: 20px; /* تقليل المسافة الداخلية */
        scroll-snap-align: start; /* محاذاة التمرير */
    }


    .media-body .name {
        font-size: 13px; /* تقليل حجم اسم الشخص */
    }

    .media-body .title {
        font-size: 11px; /* تقليل حجم المسمى الوظيفي */
    }

    .testimonial-text {
        font-size: 13px; /* تقليل حجم نص الشهادة */
        line-height: 1.4; /* تقليل المسافة بين الأسطر */
        margin-top: 12px;
    }

    .fade-left::before,
    .fade-right::after {
        width: 35px;
        height: 75%;
        top: 40px;
    }
}


/****************************************************************/

.screenshots-section {
    background: linear-gradient(135deg, rgba(248, 244, 255, 0.95) 0%, rgba(232, 242, 255, 0.9) 15%, rgba(209, 218, 250, 0.85) 35%, rgba(197, 217, 255, 0.9) 60%, rgba(181, 216, 255, 0.95) 85%, rgba(165, 201, 245, 1) 100% ), radial-gradient(ellipse 800px 600px at 70% 20%, rgba(129, 52, 204, 0.08) 0%, transparent 50% ), radial-gradient(ellipse 600px 800px at 30% 80%, rgba(54, 133, 186, 0.06) 0%, transparent 50% ), radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 30%, transparent 70% ), radial-gradient(circle at 80% 70%, rgba(129, 52, 204, 0.1) 0%, rgba(129, 52, 204, 0.03) 40%, transparent 70% );
    position: relative;
    overflow: hidden;
    padding: 60px 0 80px;
    margin-bottom: 120px;
    min-height: 500px;
    border-radius: 0 0 50px 50px;
    box-shadow: 0 25px 50px rgba(129, 52, 204, 0.1), 0 15px 35px rgba(54, 133, 186, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    background-clip: padding-box;
}

    .screenshots-section::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle at 40% 40%, rgba(129, 52, 204, 0.25) 0%, rgba(129, 52, 204, 0.15) 30%, rgba(129, 52, 204, 0.08) 50%, rgba(129, 52, 204, 0.03) 70%, transparent 100% ), conic-gradient(from 0deg at 50% 50%, rgba(129, 52, 204, 0.1) 0deg, rgba(54, 133, 186, 0.08) 90deg, rgba(129, 52, 204, 0.06) 180deg, rgba(54, 133, 186, 0.04) 270deg, rgba(129, 52, 204, 0.1) 360deg );
        border-radius: 50%;
        z-index: 0;
        filter: blur(2px);
        backdrop-filter: blur(1px);
        animation: floatRotateAdvanced 25s ease-in-out infinite, pulse 8s ease-in-out infinite alternate;
        box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.3), 0 0 80px rgba(129, 52, 204, 0.15), 0 0 120px rgba(129, 52, 204, 0.08);
    }

    .screenshots-section::after {
        content: "";
        position: absolute;
        bottom: -100px;
        left: -100px;
        width: 250px;
        height: 250px;
        background: radial-gradient(circle at 60% 60%, rgba(54, 133, 186, 0.2) 0%, rgba(54, 133, 186, 0.12) 35%, rgba(54, 133, 186, 0.06) 55%, rgba(54, 133, 186, 0.02) 75%, transparent 100% ), linear-gradient(45deg, rgba(54, 133, 186, 0.08) 0%, rgba(129, 52, 204, 0.06) 50%, rgba(54, 133, 186, 0.04) 100% );
        border-radius: 50%;
        z-index: 0;
        filter: blur(1.5px);
        animation: floatRotateReverseAdvanced 30s ease-in-out infinite, breathe 12s ease-in-out infinite;
        box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.25), 0 0 60px rgba(54, 133, 186, 0.12), 0 0 100px rgba(54, 133, 186, 0.06);
    }

    .screenshots-section > * {
        position: relative;
        z-index: 1;
    }

.screenshots-section-animated {
    background: linear-gradient( 135deg, #f8f4ff 0%, #e8f2ff 15%, #d1dafa 30%, #c5d9ff 45%, #b5d8ff 60%, #a5c9f5 75%, #95baf0 90%, #85abeb 100% );
    background-size: 600% 600%;
    animation: gradientShiftAdvanced 20s ease infinite;
    position: relative;
    overflow: hidden;
    padding: 60px 0 80px;
    margin-bottom: 120px;
    min-height: 500px;
    border-radius: 0 0 50px 50px;
    box-shadow: 0 25px 50px rgba(129, 52, 204, 0.1), 0 15px 35px rgba(54, 133, 186, 0.08);
}

    .screenshots-section-animated::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle at 40% 40%, rgba(129, 52, 204, 0.25) 0%, rgba(129, 52, 204, 0.15) 30%, rgba(129, 52, 204, 0.08) 50%, rgba(129, 52, 204, 0.03) 70%, transparent 100% );
        border-radius: 50%;
        z-index: 0;
        animation: floatRotateAdvanced 25s ease-in-out infinite;
    }

    .screenshots-section-animated::after {
        content: "";
        position: absolute;
        bottom: -100px;
        left: -100px;
        width: 250px;
        height: 250px;
        background: radial-gradient(circle at 60% 60%, rgba(54, 133, 186, 0.2) 0%, rgba(54, 133, 186, 0.12) 35%, rgba(54, 133, 186, 0.06) 55%, rgba(54, 133, 186, 0.02) 75%, transparent 100% );
        border-radius: 50%;
        z-index: 0;
        animation: floatRotateReverseAdvanced 30s ease-in-out infinite;
    }


.screenshots-curve-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.2) 100% );
    clip-path: polygon( 0 40%, 15% 45%, 30% 35%, 45% 40%, 60% 30%, 75% 35%, 90% 25%, 100% 30%, 100% 100%, 0% 100% );
}

@keyframes floatRotateAdvanced {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.8;
    }

    20% {
        transform: translate(15px, -20px) rotate(72deg) scale(1.08);
        opacity: 0.6;
    }

    40% {
        transform: translate(-8px, -35px) rotate(144deg) scale(0.92);
        opacity: 0.7;
    }

    60% {
        transform: translate(-25px, -15px) rotate(216deg) scale(1.05);
        opacity: 0.5;
    }

    80% {
        transform: translate(12px, 10px) rotate(288deg) scale(0.98);
        opacity: 0.65;
    }
}

@keyframes floatRotateReverseAdvanced {
    0%, 100% {
        transform: translate(0, 0) rotate(360deg) scale(1);
        opacity: 0.7;
    }

    25% {
        transform: translate(-18px, 12px) rotate(270deg) scale(0.95);
        opacity: 0.5;
    }

    50% {
        transform: translate(10px, 30px) rotate(180deg) scale(1.06);
        opacity: 0.6;
    }

    75% {
        transform: translate(20px, -5px) rotate(90deg) scale(0.97);
        opacity: 0.45;
    }
}

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

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

@keyframes breathe {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.15) rotate(180deg);
        opacity: 0.3;
    }
}

@keyframes gradientShiftAdvanced {
    0% {
        background-position: 0% 50%;
    }

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

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

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

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

.screen-slider .content {
    padding: 130px 10% 130px 50px;
    width: 50%;
    height: 460px;
    background: rgba(255, 255, 255, 0.19) !important;
    border-radius: 16px;
    backdrop-filter: blur(5.5px) !important;
    -webkit-backdrop-filter: blur(5.5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.31);
}

    .screen-slider .content .description {
        color: #808080fa;
        font-size: 20px !important;
    }

    .screen-slider .content .title {
        color: rgb(142 172 236) !important;
    }

.screenshots-section .screen-slider .content .icon-title {
    padding: 10px;
    background: rgb(142 172 236) !important;
    border-radius: 16px;
    backdrop-filter: blur(6px) !important; /* Slightly stronger blur */
    transition: background 0.3s ease; /* Smooth transition on hover */
}

.icon-text-row.rtl-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
}

img.icon-title {
    width: 60px;
    height: 60px;
}


/* تحسينات قسم Screenshots للشاشات الصغيرة */

/* الشاشات الصغيرة (768px وما دون) */
@media (max-width: 768px) {
    .screenshots-section {
        background: linear-gradient(135deg, #f8f4ff 0%, #e8f2ff 50%, #b5d8ff 100%);
    }

    .screen-slider .content {
        height: auto;
        min-height: 300px;
        margin-bottom: 40px;
    }

    .screen-slider .item {
        margin-top: 100PX;
    }

    .screen-slider .content .title {
        font-size: 22px !important;
        color: rgb(120 150 220) !important;
        text-align: center;
    }

    .screen-slider .content .description {
        line-height: 1.6;
        color: #666666;
        text-align: center;
        margin: 15px 0;
    }

    /* تحسين الأيقونات والصف */
    .icon-text-row.rtl-row {
        justify-content: center;
        padding-bottom: 15px;
    }

    img.icon-title {
        width: 45px;
        height: 45px;
    }

    .screenshots-section .screen-slider .content .icon-title {
        padding: 8px;
        background: rgb(120 150 220) !important;
        border-radius: 12px;
    }

    .screen-slider .avatar {
        display: none !important;
    }

    .screen-slider .content .avatar-mobile {
        display: block !important;
        width: 90%;
        margin: 20px auto 0;
        transform: translateY(0);
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(129, 52, 204, 0.2);
    }

        .screen-slider .content .avatar-mobile img {
            width: 100%;
            height: auto;
            border-radius: 15px;
        }

    /* تحسين أزرار التحكم */
    .screen-slider .control {
        bottom: -50px;
    }

        .screen-slider .control.next {
            left: calc(50% + 25px);
        }

        .screen-slider .control.prev {
            left: calc(50% - 25px);
        }

    /* تحسين عنوان القسم */
    .screenshots-section .section-title {
        font-size: 28px;
        text-align: center;
    }

    /* تحسين الانحناء السفلي */
    .screenshots-curve-bottom {
        height: 60px;
    }
}
/*****************/

/* تحسينات قسم Screenshots للشاشات الكبيرة (فوق 768px) */

/* الشاشات المتوسطة إلى الكبيرة (769px - 991px) */
@media (min-width: 769px) and (max-width: 991px) {

    /* تحسين العناصر المتحركة */
    .screenshots-section::before {
        width: 280px;
        height: 280px;
        top: -100px;
        right: -100px;
        animation: floatRotateAdvanced 22s ease-in-out infinite, pulse 7s ease-in-out infinite alternate;
    }

    .screenshots-section::after {
        width: 220px;
        height: 220px;
        bottom: -80px;
        left: -80px;
        animation: floatRotateReverseAdvanced 28s ease-in-out infinite, breathe 10s ease-in-out infinite;
    }

    .screen-slider .content {
        height: auto;
        min-height: 300px;
        margin-bottom: 40px;
    }


        .screen-slider .content .title {
            font-size: 32px !important;
            color: rgb(130 160 230) !important;
            line-height: 1.3;
        }

        .screen-slider .content .description {
            font-size: 18px !important;
            line-height: 1.7;
            margin: 15px 0;
            text-align: center;
        }



    .screen-slider .avatar {
        width: 56%;
        right: 25px;
        border-radius: 15px;
        box-shadow: 0 10px 40px rgba(129, 52, 204, 0.25);
    }

    .screen-slider .content .avatar-mobile {
        transform: translateY(0);
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(129, 52, 204, 0.2);
    }

    .icon-text-row.rtl-row {
        justify-content: center;
        padding-bottom: 15px;
    }

    img.icon-title {
        width: 65px;
        height: 65px;
    }

    .screenshots-section .screen-slider .content .icon-title {
        padding: 12px;
        background: rgb(130 160 230) !important;
        border-radius: 18px;
        backdrop-filter: blur(8px) !important;
    }

    /* تحسين أزرار التحكم */
    .screen-slider .control {
        bottom: -50px;
    }
}


/****************************************************************/
/***************المقـــالات***************/


p.section-title01 {
    font-size: xx-large;
    color: white;
}


.contact-form .my-input.input-name {
    width: calc(50% - 7.5px);
    float: right;
    margin-right: 0px !important;
}

.contact-form .my-input.input-phone {
    width: calc(50% - 7.5px);
    float: left;
}

/****************************************************************/


/* خصيصًا لقسم الـ Department */

.container-Department {
    margin: 50px 150px;
}

    .container-Department > .row {
        display: flex;
        flex-wrap: wrap;
    }

        .container-Department > .row > [class^="col-"] {
            display: flex;
            flex-direction: column;
            margin-bottom: 30px;
            padding-left: 15px;
            padding-right: 15px;
        }

    .container-Department .panel {
        flex: 1 1 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .container-Department .panel-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

.section-info.text-Department {
    text-align: center;
    margin-bottom: 50px;
}

.panel {
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-body {
    padding: 38px 32px 32px 32px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.panel-image {
    width: 100%;
    height: 310px;
    overflow: hidden;
    background: #eee;
}

    .panel-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.btn-custom {
    border-radius: 6px;
    border: 2px solid #2563eb;
    color: #2563eb;
    background: #fff;
    font-weight: bold;
    transition: all 0.2s;
    font-family: Tajawal, sans-serif;
}

    .btn-custom:hover {
        background: #2563eb;
        color: #fff;
        box-shadow: 0 5px 10px rgba(37,99,235,0.3);
    }

.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 10px;
    font-family: Tajawal, sans-serif;
}

.section-desc {
    font-size: 1.125rem;
    color: #4a5568;
    margin-bottom: 40px;
    font-family: Tajawal, sans-serif;
}

.panel-title {
    font-size: large;
    color: #1a202c;
    font-weight: 600;
    flex: auto;
}

.panel-desc {
    color: #4a5568;
    font-size: medium;
    margin: 20px 0;
    flex: auto;
}

@media (max-width: 991px) {
    .panel-image {
        height: 140px;
    }
}

@media (max-width: 767px) {
    .panel-image {
        height: 120px;
    }
}



.panel.panel-default {
    border: 1.5px solid #e5e3f8;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 8px 32px 0 rgba(60, 60, 120, 0.07);
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.2s;
    justify-content: center;
    align-items: center;
}

    .panel.panel-default:hover {
        box-shadow: 0 16px 40px 0 rgba(60, 60, 120, 0.13);
    }

.panel-img-top {
    width: 100%;
    height: 260px;
    display: block;
    margin-bottom: 0;
    object-fit: contain;
    background: #f7f7fa;
}

.get-started-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f5fa;
    color: #4b437b;
    border: none;
    border-radius: 20px;
    padding: 18px 48px;
    font-size: 20px;
    font-family: 'Tajawal', Arial, sans-serif;
    font-weight: 400;
    box-shadow: none;
    transition: background 0.2s, color 0.2s, transform 0.2s;
    text-decoration: none !important;
    gap: 10px;
}

    .get-started-btn .arrow-icon {
        margin-left: -18px;
        vertical-align: middle;
        transform: scaleX(-1); /* Flip arrow direction */
        transition: transform 0.2s;
    }

    .get-started-btn:hover {
        background: #e0e7ef;
        color: #2a3a5e;
        transform: scale(1.04);
        box-shadow: 0 4px 16px rgba(44,67,123,0.08);
    }

img.panel-img-top {
    max-width: 80%; /* Adjust the percentage as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it's a block element */
    margin: 30px;
}



/****************************************************************/


/* AI Section */
.AI {
    background-Image: linear-gradient(to right, rgba(229,231,235,0.8) 1px, transparent 1px), linear-gradient(to bottom, rgba(229,231,235,0.8) 1px, transparent 1px), radial-gradient(circle 500px at 0% 20%, rgba(139,92,246,0.3), transparent), radial-gradient(circle 500px at 100% 0%, rgba(59,130,246,0.3), transparent);
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(129, 52, 204, 0.1), 0 15px 35px rgba(54, 133, 186, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid transparent;
    background-clip: padding-box;
    margin: 50px 50px 150px 50px;
    border-radius: 32px;
    background-Size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.AI-head {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-direction: column;
    width: 100%;
}


h5.AI-title {
    font-size: 50px;
    margin: 0 39px;
}




.AI-dropdown {
    width: 100%;
    max-width: 165px;
    border-radius: 35px;
    background-color: #5a72c4;
    border-left: 1px solid #eee;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px #e6eaf3;
    overflow: hidden;
    direction: rtl;
    margin: 0 auto 10px auto;
}

.AI-dropdown-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    padding: 3px 9px;
    white-space: nowrap;
    color: white;
    font-size: 26px !important;
    font-family: 'Tajawal', sans-serif;
    font-weight: 300 !important;
    text-decoration: none;
}

a:focus, a:hover {
    text-decoration: none;
    color: white;
    cursor: pointer;
}


.ai-gradient-text {
    background: linear-gradient(90deg, #ff00c4 0%, #ae42c1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: bold;
}

img.AI-img01 {
    width: 5%;
    margin: 0;
    object-fit: contain;
}


/* تحسينات لقسم الـ AI في الشاشات الصغيرة */
@media (max-width: 768px) {
    .AI {
        margin: 20px 15px 80px 15px;
        border-radius: 24px;
        min-height: 320px;
        padding: 30px 15px;
    }

    .AI-head {
        margin-bottom: 30px;
        gap: 15px;
    }

    h5.AI-title {
        font-size: 28px;
        line-height: 1.3;
        margin: 0 10px;
        text-align: center;
    }

    .AI-dropdown {
        max-width: 140px;
        height: 50px;
        border-radius: 25px;
    }

    .AI-dropdown-text {
        font-size: 18px !important;
        padding: 2px 8px;
    }

    img.AI-img01 {
        width: 8%;
        min-width: 20px;
    }
}

/* للشاشات الأصغر جداً */
@media (max-width: 480px) {
    .AI {
        margin: 15px 10px 60px 10px;
        border-radius: 20px;
        min-height: 280px;
        padding: 25px 10px;
    }

    h5.AI-title {
        font-size: 24px;
        margin: 0 5px;
        line-height: 1.4;
    }

    .AI-dropdown {
        max-width: 120px;
        height: 45px;
        border-radius: 22px;
    }

    .AI-dropdown-text {
        font-size: 16px !important;
        padding: 2px 6px;
    }

    img.AI-img01 {
        width: 10%;
        min-width: 18px;
    }

    .ai-gradient-text {
        display: block;
        margin: 5px 0;
    }
}

/* تحسينات إضافية للنص في الشاشات الصغيرة */
@media (max-width: 768px) {
    .AI-head {
        padding: 0 15px;
    }

    h5.AI-title {
        word-spacing: 2px;
        letter-spacing: 0.5px;
    }

    /* تحسين الألوان للقراءة بشكل أفضل */
    .AI-dropdown {
        box-shadow: 0 4px 12px rgba(90, 114, 196, 0.3);
    }

    .AI-dropdown-text {
        font-weight: 500 !important;
    }
}

/* تحسين التخطيط للشاشات العمودية */
@media (max-width: 768px) and (orientation: portrait) {
    .AI {
        min-height: 300px;
    }

    .AI-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    h5.AI-title {
        max-width: 90%;
    }
}

/****************************************************************/

a.item-blog img {
    width: 100%;
    object-fit: contain;
    object-position: center;
    mix-blend-mode: multiply;
    height: 100%;
    display: block;
}


.social_media a img[src="img/x.png"] {
    border-radius: 6px;
}