/* =============================================================
   Arabic RTL Styles - فن تفصيل المطابخ
   ============================================================= */

/* Google Fonts - Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800&display=swap');

/* Base Arabic Font & Direction */
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, ul, ol,
input, textarea, button,
.section-title, .slider-title,
.feature-content, .about-content,
.service-content, .blog-title,
.testimonial-description, .contact-info {
    font-family: 'Cairo', 'Tajawal', sans-serif !important;
}

/* RTL Text Alignment */
.post-comment-description p,
.service-description p,
.inner-service-title p,
.company-info-desc p,
.tab-title p,
.single-pricing-content p {
    text-align: right;
}

/* Navbar RTL */
.hendre_menu .nav_scroll {
    direction: rtl;
}

.hendre_menu ul.nav_scroll > li {
    float: right;
}

.sub-menu {
    left: auto !important;
    right: 0 !important;
    text-align: right;
}

/* Mobile menu RTL */
.mean-container .mean-nav ul li a {
    text-align: right !important;
    font-family: 'Cairo', sans-serif !important;
}

.mean-container .mean-nav {
    text-align: right;
}

/* Slider RTL */
.slider-content .slider-title h4,
.slider-content .slider-title h1,
.slider-content .slider-button {
    text-align: right;
}

/* Feature area RTL */
.feature-content {
    text-align: right;
}

/* About area RTL */
.tabs {
    direction: rtl;
    text-align: right;
}

.tab_content {
    direction: rtl;
}

/* Counter RTL */
.counter-title h4,
.counter-text h1 {
    text-align: center;
}

/* Service area RTL */
.service-title h3,
.service-description {
    text-align: right;
}

.icon-list ul {
    direction: rtl;
}

.icon-list ul li {
    text-align: right;
}

/* Inner service boxes RTL */
.inner-service-title h3,
.inner-service-title p {
    text-align: right;
}

/* Project area */
.project-content h3,
.project-content h4 {
    text-align: right;
}

/* Testimonial RTL */
.testimonial-description p {
    text-align: right;
}

.testimonial-title h3,
.testimonial-title span {
    text-align: right;
}

/* Blog area RTL */
.blog-title h3,
.blog-title h4 {
    text-align: right;
}

/* Breadcrumb RTL */
.breadcumb-content h1 {
    text-align: right;
}

.breadcumb-content ul {
    direction: rtl;
    justify-content: flex-end;
}

/* Contact area RTL */
.contact_from_box input,
.contact_from_box textarea {
    text-align: right;
    direction: rtl;
}

/* Footer RTL */
.widgets-company-title h3,
.widgets-company-icon-list ul li,
.company-info-desc p {
    text-align: right;
    direction: rtl;
}

.widgets-company-icon-list ul {
    direction: rtl;
    padding-right: 0;
}

.copy-rights h4 {
    text-align: center;
}

/* Sidebar Info RTL */
.contact-info h2,
.contact-info ul li,
.list-style-one li {
    text-align: right;
    direction: rtl;
}

/* Pricing Area RTL */
.single-pricing-content h3,
.single-pricing-content p,
.pricing-plan-list ul {
    text-align: right;
}

.pricing-plan-list ul {
    direction: rtl;
    padding-right: 0;
}

/* Brand Area RTL */
.brand-title h4 {
    text-align: center;
}

/* Subscribe form RTL */
.subscribe_form input {
    text-align: right;
    direction: rtl;
}

/* WhatsApp CTA Button */
.whatsapp-cta {
    display: inline-block;
    background-color: #25D366;
    color: #fff !important;
    padding: 10px 25px;
    border-radius: 4px;
    font-family: 'Cairo', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s;
}

.whatsapp-cta:hover {
    background-color: #1ebe57;
    color: #fff !important;
}

/* Service areas section */
.service-areas {
    background: #f5f5f5;
    padding: 40px 0;
}

.service-areas-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    direction: rtl;
    padding: 15px 0;
}

.service-areas-list span {
    background: #fff;
    border: 1px solid #ddd;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    color: #555;
    transition: all 0.3s;
}

.service-areas-list span:hover {
    background: var(--main-color, #c9a267);
    color: #fff;
    border-color: var(--main-color, #c9a267);
}

/* CTA Section styling */
.arcke-agency h2,
.arcke-agency p {
    text-align: center;
    font-family: 'Cairo', sans-serif !important;
}

/* Phone CTA */
.phone-cta-section {
    background: var(--main-color, #c9a267);
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    margin: 20px 0;
    direction: rtl;
}

.phone-cta-section h3 {
    color: #fff;
    font-family: 'Cairo', sans-serif;
    margin-bottom: 10px;
}

.phone-cta-section a {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
}

/* Mean menu RTL fix */
.mean-bar {
    direction: rtl;
}

/* Blog RTL */
.blog-thumb img {
    width: 100%;
}

/* Progress bars RTL */
.prosses-bar {
    text-align: right;
    display: block;
}

/* Marquee tag area - Arabic */
.tag-area .content-box h6 {
    font-family: 'Cairo', sans-serif !important;
}

/* Section titles */
.section-title .main-title h1 {
    font-family: 'Cairo', sans-serif !important;
}

.section-title .sub-title h2 {
    font-family: 'Cairo', sans-serif !important;
    text-align: center;
}

/* Additional RTL Fixes for Bootstrap */
.row {
    direction: rtl;
}

.col-lg-6,
.col-lg-4,
.col-lg-8,
.col-lg-3,
.col-lg-12,
.col-md-6 {
    direction: rtl;
}

/* Fix for owl carousel RTL */
.owl-carousel {
    direction: ltr;
}

.owl-carousel .owl-item {
    direction: rtl;
}

/* =============================================================
   زر "اتصل بنا" - تصميم جذاب ومتحرك
   ============================================================= */

/* Keyframe - حركة الطفو الخفيفة */
@keyframes float-btn {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-5px); }
    100% { transform: translateY(0px); }
}

/* الـ container */
.header-button.two {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* الزر الرئيسي */
.header-button.two a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 50px;
    font-size: 14px;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
    border-radius: 15px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;

    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);

    box-shadow: 0 6px 20px rgba(0, 114, 255, 0.35),
                0 2px 6px rgba(0, 0, 0, 0.15);

    transform: scale(1) translateY(0);
    will-change: transform;

    transition: background 0.45s ease,
                box-shadow 0.45s ease,
                color 0.45s ease;
}

/* طبقة shimmer فوق الزر */
.header-button.two a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    transition: left 0.8s ease;
    z-index: 2;
    pointer-events: none;
}

/* تأثير shimmer عند الهوفر */
.header-button.two a:hover::before {
    left: 130%;
}

/* عند دخول الماوس: Zoom In تدريجي منبثق */
.header-button.two a:hover {
    animation: smooth-zoom-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
    box-shadow: 0 12px 30px rgba(0, 198, 255, 0.45),
                0 4px 10px rgba(0, 0, 0, 0.18);
    color: #fff !important;
}

/* عند خروج الماوس: رجوع سلس */
.header-button.two a:not(:hover) {
    animation: smooth-zoom-out 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* زوم دخول منبثق */
@keyframes smooth-zoom-in {
    0% {
        transform: scale(1) translateY(0);
    }

    100% {
        transform: scale(1.06) translateY(-3px);
    }
}

/* رجوع ناعم للوضع الطبيعي */
@keyframes smooth-zoom-out {
    0% {
        transform: scale(1.08) translateY(-3px);
    }

    100% {
        transform: scale(1) translateY(0);
    }
}

/* =============================================================
   إلغاء الدائرة المتحركة مع الماوس (Custom Cursor)
   ============================================================= */
.curser,
.curser2 {
    display: none !important;
}

/* =============================================================
   Border Radius - كاردات وصور الموقع
   ============================================================= */

/* --- Feature Cards (كاردات الميزات) --- */
/* نسبة الأبعاد ≈ عرضية - radius متوسط */
.single-feature-box {
    border-radius: 14px;
    overflow: hidden;
}

/* --- Service Cards (كاردات الخدمات) --- */
/* كارد أفقي عريض - radius خفيف */
.single-service-box {
    border-radius: 12px;
    overflow: hidden;
}

/* صورة الخدمة داخل الكارد */
.service-thumb img {
    border-radius: 10px;
    width: 100%;
    display: block;
}

/* --- Project / Portfolio Cards (كاردات الأعمال) --- */
/* الكارد الكبير col-lg-8 */
.single-project-box {
    border-radius: 16px;
    overflow: hidden;
}

/* صور المشاريع - overflow hidden على الـ thumb */
.project-thumb {
    border-radius: 16px;
    overflow: hidden;
}

.project-thumb img {
    border-radius: 16px;
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.single-project-box:hover .project-thumb img {
    transform: scale(1.04);
}

/* --- Blog Cards (كاردات المدونة) --- */
/* كاردات عمودية متوسطة col-lg-4 */
.single-blog-box {
    border-radius: 14px;
    overflow: hidden;
}

/* صورة البلوج */
.blog-thumb {
    border-radius: 14px 14px 0 0;
    overflow: hidden;
}

.blog-thumb img {
    border-radius: 14px 14px 0 0;
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.single-blog-box:hover .blog-thumb img {
    transform: scale(1.04);
}

/* --- Testimonial Cards (كاردات التقييمات) --- */
/* كاردات مربعة نسبياً */
.test-box {
    border-radius: 12px;
    overflow: hidden;
}

/* صورة العميل في التقييم (مربعة/دائرية) */
.testimonial-tmb img {
    border-radius: 50%;
}

/* --- About Section Images (صور قسم "من نحن") --- */
.about-thumb img {
    border-radius: 14px;
    width: 100%;
    display: block;
}

/* صور التبويبات داخل "عنا" */
.tab-thumb img {
    border-radius: 10px;
    width: 100%;
    display: block;
}

/* --- Sidebar Thumb Images (صور الـ sidebar) --- */
.content-thumb-box {
    border-radius: 10px;
    overflow: hidden;
}

.content-thumb-box img {
    border-radius: 10px;
    width: 100%;
    display: block;
}

/* ★ CHANGED: font-display:swap override for FontAwesome 5 to prevent render-blocking fonts */
/* Since all.min.css is minified, we override @font-face here to add font-display:swap */
@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* ★ CHANGED: Added font-display:swap */
    src: url("../webfonts/fa-regular-400.eot");
    src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
         url("../webfonts/fa-regular-400.woff2") format("woff2"),
         url("../webfonts/fa-regular-400.woff") format("woff"),
         url("../webfonts/fa-regular-400.ttf") format("truetype"),
         url("../webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap; /* ★ CHANGED: Added font-display:swap */
    src: url("../webfonts/fa-solid-900.eot");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
         url("../webfonts/fa-solid-900.woff2") format("woff2"),
         url("../webfonts/fa-solid-900.woff") format("woff"),
         url("../webfonts/fa-solid-900.ttf") format("truetype"),
         url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

@font-face {
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap; /* ★ CHANGED: Added font-display:swap */
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
         url("../webfonts/fa-brands-400.woff2") format("woff2"),
         url("../webfonts/fa-brands-400.woff") format("woff"),
         url("../webfonts/fa-brands-400.ttf") format("truetype"),
         url("../webfonts/fa-brands-400.svg#fontawesome") format("svg");
}