body {
    text-align: right;
    direction: rtl;

    font-family: "font_main";
}


/*! الخطوط */
@font-face {
    font-family: "font_main";
    src: url("../assets/fonts/Changa/Changa-Regular.ttf");
}

@font-face {
    font-family: "font_medium";
    src: url("../assets/fonts/Changa/Changa-Medium.ttf");
}

@font-face {
    font-family: "font_bold";
    src: url("../assets/fonts/Changa/Changa-Bold.ttf");
}

@font-face {
    font-family: "font_SemiBold";
    src: url("../assets/fonts/Changa/Changa-SemiBold.ttf");
}







.main-btn {
    /* padding-inline: 35px 10px; */
    text-align: start;

    border-right: 1px solid var(--white-color);
    border-left: none;
}
.projects-explore .main-btn {
    border-right: 1px solid var(--main-color);
    border-left: none;
}
.main-btn:hover .line-btn {
    left: -12px;
    right: unset;
}
.main-btn::before,
.main-btn::after {
    left: 0;
    right: unset;
}
.main-btn .line-btn {
    right: unset;
    left: -15px;
}

.title-line {
    transform-origin: right;
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }

    100% {
        background-position: 200% center;
    }
}











nav {
    left: 0;
    right: unset;
    border-radius: 0 10px 10px 0 !important;
}
.navbar {
    left: 0;
    right: unset;
}

.hero .caption .border-h1 {
    right: -40px;
    border-left: none;
    border-right: 3px solid var(--main-color);
}

.hero .caption .border-h1::before,
.hero .caption .border-h1::after {
    left: 0;
    right: unset;
}

.about-logo-badge {
    left: 90%;
    right: unset;
}

.whatsapp-wrapper {
    right: 50px;
}
.whatsapp-text {
    transform: translateX(20px);
}
.nav-responsive {
    left: 40px;
    right: unset;
}
.nav-responsive.active {
    left: 110px;
    right: unset;
}

.service-icon {
    left: 15%;
}

@media (max-width: 768px) {
    .about-logo-badge {
        position: absolute;
        bottom: 85%;
        right: 50%;
    }
    .nav-responsive.active {
        left: 80px;
        bottom: 85px;
    }
}
@media (max-width: 400px) {
    .nav-responsive {
        left: 10px;
        bottom: 0;
    }
    .nav-responsive.active {
        left: 50px;
        bottom: 50px;
    }
}