body {
    background-color: #ffffff;
}

.sec-color {
    color: var(--secondary);
}

.bg-sec {
    background-color: var(--secondary);
    color: #fff;
}

.btn-custom {
    padding: 60px 5px;
    border-radius: 75px;
    border: 1px solid var(--primary);
    background: transparent;
    position: relative;
    overflow: hidden;
    color: var(--primary);
    width: 150px;
    height: 150px;
}

.btn-custom::after {
    content: "";
    position: absolute;
    width: 83px;
    height: 68px;
    background-color: var(--secondary);
    bottom: -59px;
    left: 36px;
    border-radius: 74px;
    rotate: -3deg;
    transform: translate(-50%, -50%) scale(0.5);
    border-radius: 50%;
    transition: transform .5s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: 1;
}

/* أثناء الـ hover تغطي الزر بالكامل */
.btn-custom:hover::after {
    transform: translate(-50%, -50%) scale(7);
    z-index: 1;
    color: var(--primary);
}

/* عشان النص يفضل فوق */
.btn-custom span {
    position: relative;
    z-index: 2;
    color: var(--primary) !important;
}


.home--slider {
    width: 100%;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
}

.fs-70 {
    font-size: 5vw;
}

.fs-100 {
    font-size: 8vw;
}


#starAnimation svg {

    animation: rotation 20s infinite linear;
}

.circle-animation svg {
    animation: moveleftRight 5s infinite linear;
}

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

    50% {
        transform: translateX(20px);
    }

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

}


@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


.section--services {
    /* background-image: url(../../front/images/ser_bg.png); */
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-color: var(--light);
}

.project--section {
    background-image: url(../../front/images/pro_bg.png);
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%
}

.cat--item.cat-active {
    color: var(--secondary);
    border-bottom: 2px solid var(--secondary) !important;
    padding: 10px;
}


.cat--item {
    padding: 10px;
    color: #fff;
    border-bottom: 2px solid;
}

.project--desc {
    opacity: 0;
}

.project--item:hover .project--desc {
    opacity: 1 !important;
    transition: 1s all ease;
}

.sec--order {
    background-image: url(../images/sec-order.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    min-height: 300px;
}

.sec--order-div {
    background: linear-gradient(45deg, #02021ac2, #03032a8c);
    padding: 50px;
}

.copyright {
    background-color: #ffffff;
    padding: 10px;
}

.page-header {
    background-image: url(../../front/images/head.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    height: 400px;
    width: 100%;
}

.ltr .page-header,
.ltr .meta--banner {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.work--steps {
    background-image: url(../../front/images/work_bg.png);
    background-position: right;
    background-size: cover;
    background-repeat: no-repeat;

    width: 100%;
}

div.about--desc *,
.service-desc * {
    color: #fff !important;
}

.step--image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: auto;
}

.step--image::after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 42%;
    left: 42%;
    transform: translate(-50%, -50%);
    animation: rotateCircle 10s linear infinite;
}

/* تعريف الحركة الدائرية البسيطة */
@keyframes rotateCircle {
    from {
        transform: rotate(0deg) translateX(75px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(75px) rotate(-360deg);
    }
}

.step--item:nth-child(odd)>div>div>div.step--image {
    background: linear-gradient(215deg, #FE6620 13.03%, #762C0A 86.81%);
}

.step--item:nth-child(even)>div>div>div.step--image {
    background: linear-gradient(215deg, #00007E 13.03%, #020255 86.81%);
}


.btn-contact:hover svg {
    rotate: -50deg;
    transition: .5s all ease-in-out;
}

.package--item {
    background: linear-gradient(195deg, rgba(254, 102, 32, 0.162) 0%, rgba(254, 102, 32, 0.02) 50%, rgba(254, 102, 32, 0.06) 100%);
}

.package--item div div a.btn-contact {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.00) 100%) !important;
}

.package--item.active div div a.btn-contact {
    background: var(--secondary) !important;
}

.package--item.active {
    background: linear-gradient(180deg, rgba(43, 255, 255, 0.12) 0%, rgba(43, 255, 255, 0.04) 50%, rgba(43, 255, 255, 0.07) 100%);
    scale: 1.1;
    transition: .5s all ease-in-out;
}

.package--item.active div span.one,
.package--item div span.two {
    display: none;
}

.package--item.active div span.two {
    display: block;
}