/* Custom Website Styles */

/* Responsive Navbar */
@media (max-width: 991.98px) {
    .ftco-navbar-light {
        background: #005890 !important;
        position: relative;
        top: 0;
        padding: 10px 15px;
    }
}

/* Heading Styles */
.heading-section .subheading {
    color: #005890 !important;
}

/* Button Styles */
.btn.btn-white:hover,
.btn.btn-white:focus,
.btn.btn-white:active {
    color: #005890 !important;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-image: initial;
}

html, body {
    scroll-behavior: auto !important;
}

/* Menu Hover Effects */
.menus:hover .text h3 {
    color: #005890;
}

/* Contact Section */
.contact-section .contact-info p {
    color: #005890;
}

.contact-section .contact-info p a {
    color: #005890;
}

/* Breadcrumbs */
.breadcrumbs a:hover {
    color: #FFD700 !important;
    /* bright yellow */
}

/* Background Primary */
.bg-primary {
    background: #005890 !important;
}

/* Footer Styles */
.ftco-footer-social li a {
    height: 40px;
    width: 40px;
    display: block;
    float: left;
    background: #005890;
    border-radius: 50%;
    position: relative;
}

.ftco-footer .ftco-footer-widget h2 {
    font-weight: normal;
    color: #005890;
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

.btn.btn-primary {
    color: #005890;
}

.ftco-footer p {
    color: #005890;
}

.ftco-footer .ftco-footer-widget .open-hours li span:first-child {
    color: #005890;
}

.ftco-footer .subscribe-form .form-group input {
    color: #005890 !important;
}

/* Navbar Styles */
.navbar-nav .nav-link {
    color: white !important;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: #FFD700 !important;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background-color: #FFD700;
    transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.active .nav-link::after {
    width: 100%;
}

/* Menu Page Styles */
.nav-pills .nav-link {
    border-radius: 30px;
    padding: 10px 20px;
    margin: 5px;
    color: #005890;
    border: 1px solid #005890;
    font-weight: 500;
    transition: all 0.3s ease;
}

.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
    background-color: #005890;
    color: #fff;
}

.menu-card {
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    transition: all 0.3s ease-in-out;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.menu-img {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.menu-info h5 {
    color: #005890;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}

.menu-info .price {
    font-size: 1.1rem;
}

/* Contact Info Cards */
.contact-info-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 88, 144, 0.1);
    height: 100%;
}

.contact-info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 88, 144, 0.15) !important;
    border-color: #005890;
}

.contact-info-card .icon {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 88, 144, 0.1);
    transition: all 0.3s ease;
}

.contact-info-card:hover .icon {
    background: #005890;
}

.contact-info-card:hover .icon i {
    color: white !important;
}

.contact-info-card h5 {
    color: #005890;
    font-size: 1.1rem;
}

.contact-info-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-info-card a {
    transition: color 0.3s ease;
}

.contact-info-card a:hover {
    color: #003d66 !important;
    text-decoration: underline !important;
}

/* RTL Support */
.contact-info-card.text-right {
    direction: rtl;
}

.contact-info-card.text-right .icon {
    margin-left: auto;
    margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .contact-info-card {
        margin-bottom: 20px;
    }
}

/* Arabic Language Styling */
body[lang="ar"], .lang-ar {
    font-family: 'Tajawal', 'Cairo', 'Arial', sans-serif !important;
}

/* Arabic Navbar Styling */
.lang-ar .navbar-nav .nav-link {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

.lang-ar .navbar-brand {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}

/* Arabic Top Bar Styling */
.lang-ar .wrap .phone {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Arabic Headings */
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-ar h4, .lang-ar h5, .lang-ar h6 {
    font-family: 'Tajawal', 'Cairo', 'Arial', sans-serif !important;
    font-weight: 700 !important;
}

/* Arabic Text Content */
.lang-ar p, .lang-ar span, .lang-ar a {
    font-family: 'Tajawal', 'Cairo', 'Arial', sans-serif !important;
}

/* Arabic Form Elements */
.lang-ar input, .lang-ar select, .lang-ar textarea, .lang-ar button {
    font-family: 'Tajawal', 'Cairo', 'Arial', sans-serif !important;
}

/* Top Bar Black Text Color */
.wrap .phone,
.wrap .phone span,
.wrap .phone a,
.wrap p,
.wrap .social-media p,
.wrap .social-media a {
    color: #000000 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}

/* Social media icons black */
.wrap .social-media .fa-facebook,
.wrap .social-media .fa-instagram {
    color: #000000 !important;
    font-size: 1.2rem !important;
}
/* ---------------------------------------- */
/* FIX OWL CAROUSEL BACKGROUND IMAGE (RTL)  */
/* ---------------------------------------- */

/* Force background images to always show */
.slider-item {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Prevent RTL mode from breaking background */
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage,
.owl-carousel .owl-item {
    direction: ltr !important;
}

[dir="rtl"] .owl-carousel {
    direction: rtl !important;
}

/* Make sure slider stays correct in RTL */
[dir="rtl"] .slider-item {
    background-position: center !important;
    background-size: cover !important;
}
.heading-ar {
    font-family: 'Lateef', serif !important;
  
    color: #fff;
}
.ar-text {
    direction: rtl;
    text-align: right;
    color: white;
}
/* -------------------------------------------------------
   RTL Footer – Clean Working Version
------------------------------------------------------- */

/* 1. Make footer text RTL */
[dir="rtl"] footer .ftco-footer-widget,
[dir="rtl"] footer p,
[dir="rtl"] footer ul,
[dir="rtl"] footer li,
[dir="rtl"] .ftco-footer .open-hours li {
    text-align: right !important;
    direction: rtl !important;
}

/* 2. Keep copyright centered */
[dir="rtl"] footer .text-center {
    text-align: center !important;
    direction: rtl !important;
}

/* 3. Force Font Awesome icons to use correct font (prevents squares) */
.fa, .fa:before, [class^="fa-"], [class*=" fa-"] {
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
    direction: ltr !important; /* icon glyph direction must stay LTR */
}

/* 4. Social icons container aligned to RIGHT in RTL */
[dir="rtl"] .ftco-footer-social {
    display: flex !important;
    justify-content: flex-end !important;
    direction: ltr !important; /* keep icons rendering correctly */
}

/* 5. Align each icon with correct spacing */
[dir="rtl"] .ftco-footer-social li {
    margin-left: 0.7rem !important;
    margin-right: 0 !important;
    float: none !important;
}
@media (max-width: 768px) {
.navbar-brand {
    margin-right: 0rem !important;
    }
}    
  /* Ensure mobile truly centers the menu pills */
        @media (max-width: 768px) {

            /* make the UL full width and a proper flex row that wraps and centers */
            #menuTabs {
                display: flex !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                align-items: center !important;
                width: 100% !important;
                padding-left: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                box-sizing: border-box;
                position: relative;
                /* allows transform centering fallback */
                left: 0;
                transform: none;
            }

            /* remove any left padding/margin coming from header helpers on small screens */
            .heading-section .pl-lg-3,
            .heading-section .ml-md-5,
            .pl-lg-3,
            .ml-md-5 {
                padding-left: 0 !important;
                margin-left: 0 !important;
            }

            /* make each nav item behave like an inline-block pill */
            #menuTabs .nav-item {
                margin: 3px !important;
                flex: 0 0 auto;
                /* don't stretch */
            }

            #menuTabs .nav-link {
                padding: 8px 14px !important;
                width: auto !important;
                text-align: center;
                border-radius: 30px;
            }

            /* RTL: keep visual center even if dir=rtl */
            [dir="rtl"] #menuTabs {
                direction: ltr !important;
            }
        }

        .owl-carousel.home-slider .slider-item .slider-text h1 {
            color: #fff;
            line-height: 1;
            font-family: "Dancing Script", cursive;
            font-size: 3vw;
            font-weight: 400;
            margin-bottom: 40px;
        }

        @media (max-width: 768px) {
            

            .heading-section .subheading {
                color: #005890 !important;
                margin-top: 5% !important;

            }

            .tetet {
                margin-top: -22% !important;

            }

            .offer-text-header {
                font-size: 22px !important;
            }

            .offer-text {
                font-size: 10.5px !important;
            }
        }   .owl-carousel.home-slider .slider-item .slider-text h1 {
                color: #fff;
                line-height: 1;
                font-family: "Dancing Script", cursive;
                font-size: 3vw;
                font-weight: 400;
                margin-bottom: 40px;
            }

            @media (max-width: 768px) {
                .hero-wrap.hero-wrap-2 {
                    height: 50vh !important;
                }

                .tete {
                    margin-top: -22% !important;

                }

                .offer-text-header {
                    font-size: 22px !important;
                }

                .offer-text {
                font-size: 10.5px !important;

                }

            }

            /* Ensure mobile truly centers the menu pills */
            @media (max-width: 768px) {

                /* make the UL full width and a proper flex row that wraps and centers */
                #menuTabs {
                    display: flex !important;
                    flex-wrap: wrap !important;
                    justify-content: center !important;
                    align-items: center !important;
                    width: 100% !important;
                    padding-left: 0 !important;
                    margin-left: 0 !important;
                    margin-right: 0 !important;
                    box-sizing: border-box;
                    position: relative;
                    /* allows transform centering fallback */
                    left: 0;
                    transform: none;
                }

                /* remove any left padding/margin coming from header helpers on small screens */
                .heading-section .pl-lg-3,
                .heading-section .ml-md-5,
                .pl-lg-3,
                .ml-md-5 {
                    padding-left: 0 !important;
                    margin-left: 0 !important;
                }

                /* make each nav item behave like an inline-block pill */
                #menuTabs .nav-item {
                    margin: 3px !important;
                    flex: 0 0 auto;
                    /* don't stretch */
                }

                #menuTabs .nav-link {
                    padding: 8px 14px !important;
                    width: auto !important;
                    text-align: center;
                    border-radius: 30px;
                }

                /* RTL: keep visual center even if dir=rtl */
                [dir="rtl"] #menuTabs {
                    direction: ltr !important;
                }
            }