/* Color Palette Variables */
        :root {
            --primary-color: #08383c;
            --secondary-color: #062d30;
            --accent-color: #052224;
            --dark-color: #041718;
            --darkest-color: #030c0d;
            --light-text: #ffffff;
            --muted-text: rgba(255, 255, 255, 0.8);
            --grey-color-muted: #e0e3e8;

            /* Navigation Colors */
            --nav-color: #000;
            --nav-hover-color: #08383c;
            --nav-mobile-background-color: #ffffff;
            --nav-dropdown-background-color: #ffffff;
            --nav-dropdown-color: #212529;
            --nav-dropdown-hover-color: #08383c;
            --contrast-color: #ffffff;

            /* Font Variables */
            --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --heading-font: "Raleway", sans-serif;
            --nav-font: "Poppins", sans-serif;
        }

        /* General Reset */
        * {
            box-sizing: border-box;
        }

        /* Body Styling */
        .login-btn:hover {
            background-color: var(--primary-color) !important;
            color: white !important;
        }

        /* Form Container */
        .form-container {
            background: var(--light-text);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
            text-align: center;
        }

        /* Form Title */
        .form-container h2 {
            margin-bottom: 1.5rem;
            color: var(--primary-color);
            font-size: 1.5rem;
        }

        /* Form Group */
        .form-group {
            margin-bottom: 1rem;
            text-align: left;
        }

        /* Labels */
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        /* Input Fields */
        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        /* Input Focus Effect */
        .form-group input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 4px rgba(8, 56, 60, 0.25);
        }

        /* Submit Button */
        .submit-btn {
            width: 100%;
            padding: 0.8rem;
            background-color: var(--primary-color);
            color: var(--light-text);
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* Hover Effect for Button */
        .submit-btn:hover {
            background-color: var(--secondary-color);
        }

        /* Responsive Design */
        @media (max-width: 576px) {
            .form-container {
                padding: 1.5rem;
            }

            .form-container h2 {
                font-size: 1.25rem;
            }
        }

        </style><style>

        /* Modal background */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            align-items: center;
            justify-content: center;
        }

        /* Modal content */
        .modal-content {
            background: white;
            padding: 20px;
            width: auto;

            text-align: center;
            position: relative;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
        }

        /* Close button */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
        }

        /* Button */
        button {
            padding: 10px 20px;
            border: none;
            background: var(--primary-color);
            color: var(--light-text);
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background: var(--secondary-color);
        }

        </><style>body {
            font-family: 'Open Sans', 'Poppins', 'Raleway', sans-serif;
        }

        /* If you need to target specific elements */
        body:lang(ar) {
            font-family: 'Cairo', sans-serif;
        }

        /* Arabic text styling */
        .arabic-text {
            font-family: 'Cairo', sans-serif;
        }

        /* RTL support */
        [dir="rtl"] {
            font-family: 'Cairo', sans-serif;
        }

        [dir="rtl"] h1,
        [dir="rtl"] h2,
        [dir="rtl"] h3,
        [dir="rtl"] h4,
        [dir="rtl"] h5,
        [dir="rtl"] h6,
        [dir="rtl"] span {
            font-family: 'Cairo', sans-serif;
        }

        /* Language Dropdown Container */
        .language-dropdown {
            position: relative;
            display: inline-block;
        }

        /* Dropdown Toggle Button */
        .dropdown-toggle {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
        }


        /* Dropdown Menu */
        .dropdown-menu {
            display: none;
            /* Hidden by default */
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.15);

            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 120px;
            padding: 0;
            margin-top: 5px;
            z-index: 1000;
        }

        .dropdown-menu.show {
            display: block;
            /* Show dropdown when toggled */
        }

        /* Dropdown Items */
        .dropdown-item {
            padding: 8px 16px;
            font-size: 14px;
            color: #333;
            text-decoration: none;
            display: block;
            transition: background-color 0.3s ease;
        }

        .dropdown-item:hover {
            background-color: #f8f9fa;
            /* Light gray background on hover */
        }

        .dropdown-item.text-danger {
            color: var(--primary-color) !important;
            /* Primary color for the active language */
        }

        .swiper-button {
            color: var(--primary-color) !important;
            /* Primary color for swiper buttons */
        }

        /* Divider */
        .dropdown-divider {
            margin: 4px 0;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }

        .current-language {
            margin-left: 8px;
            font-size: 14px;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* Flag styling */
        .current-language::before {
            font-size: 16px;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        /* Optional: Add hover animation */
        .dropdown-toggle:hover .current-language {
            transform: translateX(2px);
            transition: transform 0.2s ease;
        }

        .client-card {
            position: relative;
            width: 150px;
            /* Equal width */
            height: 150px;
            /* Equal height */
            overflow: hidden;
            border-radius: 10px;
        }

        /* Parent Container */
        .client-container {
            width: 150px;
            /* Set a fixed width or use max-width */
            height: auto;
            text-align: center;
        }

        /* Background Image */
        .client-image {
            width: 100%;
            height: 150px;
            /* Equal height */
            background-size: cover;
            background-position: center;
            opacity: 1;
            border-radius: 10px;
        }

        /* Client Name Under Image */
        .client-name {
            width: 100%;
            /* Matches the image width */
            text-align: center;
            font-weight: bold;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.7);
            ;

            padding: 8px;
            border-radius: 0 0 10px 10px;
            /* Rounded bottom corners */
        }

        .icon {
            text-align: center;
            /* Center the icon */
            margin-bottom: 1rem;
            /* Add some space below the icon */
        }

        .icon-img {
            width: 50px;
            /* Adjust size as needed */
            height: 50px;
            /* Adjust size as needed */
            object-fit: contain;
            /* Ensures the image fits within the dimensions */
            display: block;
            /* Ensures the image is treated as a block element */
            margin: 0 auto;
            /* Centers the image horizontally */
        }

        /* Header Styling */
        .header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            box-shadow: 0 2px 10px rgba(8, 56, 60, 0.3);
        }

        .topbar {
            background: var(--dark-color);
            color: var(--light-text);
        }

        .branding {
            background: var(--light-text) !important;
            border-bottom: 2px solid var(--primary-color);
        }

        /* Navigation Links */
        .navmenu ul li a {
            color: var(--primary-color) !important;
            transition: color 0.3s ease;
        }

        .navmenu ul li a:hover,
        .navmenu ul li a.active {
            color: var(--light-text) !important;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            color: var(--light-text);
        }

        .hero h2 {
            color: var(--light-text);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        .hero p {
            color: var(--muted-text);
        }

        .btn-get-started {
            background: var(--light-text);
            color: var(--primary-color) !important;
            border: 2px solid var(--light-text);
            transition: all 0.3s ease;
        }

        .btn-get-started:hover {
            background: transparent;
            color: var(--light-text) !important;
            border-color: var(--light-text);
        }

        /* Section Titles */
        .section-title span {
            color: var(--grey-color-muted);
            font-weight: 600;
        }

        .section-title h2 {
            color: var(--secondary-color);
        }

        /* Service Items */
        .service-item {
            background: var(--light-text);
            border: 1px solid rgba(8, 56, 60, 0.1);
            border-radius: 10px;
            padding: 2rem;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(8, 56, 60, 0.1);
        }

        .service-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(8, 56, 60, 0.2);
            border-color: var(--primary-color);
        }

        .service-item h3 {
            color: var(--primary-color);
        }

        .service-item p {
            color: var(--secondary-color);
        }

        /* Call to Action Sections */
        .call-to-action {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            color: var(--light-text);
        }

        .call-to-action h3 {
            color: var(--light-text);
        }

        .call-to-action p {
            color: var(--muted-text);
        }

        .cta-btn {
            background: var(--light-text);
            color: var(--primary-color) !important;
            border: 2px solid var(--light-text);
            transition: all 0.3s ease;
        }

        .cta-btn:hover {
            background: transparent;
            color: var(--light-text) !important;
            border-color: var(--light-text);
        }

        /* Pricing Cards */
        .pricing-item {
            border: 2px solid rgba(8, 56, 60, 0.1);
            transition: all 0.3s ease;
        }

        .pricing-item:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(8, 56, 60, 0.2);
        }

        .pricing-item .card-header {
            background: var(--primary-color) !important;
        }

        .pricing-item .btn-danger {
            background: var(--primary-color) !important;
            border-color: var(--primary-color);
        }

        .pricing-item .btn-danger:hover {
            background: var(--secondary-color) !important;
            border-color: var(--secondary-color);
        }

        .pricing-item .btn-success {
            background: var(--accent-color) !important;
            border-color: var(--accent-color);
        }

        .pricing-item .btn-success:hover {
            background: var(--dark-color) !important;
            border-color: var(--dark-color);
        }

        /* Contact Section */
        .contact .info-item {
            background: var(--light-text);
            border: 1px solid rgba(8, 56, 60, 0.1);
            border-radius: 10px;
            padding: 2rem;
            transition: all 0.3s ease;
        }

        .contact .info-item:hover {
            border-color: var(--primary-color);
            box-shadow: 0 5px 15px rgba(8, 56, 60, 0.1);
        }

        .contact .info-item i {
            color: var(--primary-color);
        }

        .contact .info-item h3 {
            color: var(--secondary-color);
        }

        .contact .info-item p {
            color: var(--accent-color);
        }

        /* Form Elements */
        .php-email-form input,
        .php-email-form textarea {
            border: 1px solid rgba(8, 56, 60, 0.2);
            transition: border-color 0.3s ease;
        }

        .php-email-form input:focus,
        .php-email-form textarea:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 5px rgba(8, 56, 60, 0.2);
        }

        .php-email-form button {
            background: var(--primary-color);
            border-color: var(--primary-color);
        }

        .php-email-form button:hover {
            background: var(--secondary-color);
            border-color: var(--secondary-color);
        }

        /* Footer */
        .footer {
            background: linear-gradient(135deg, var(--dark-color) 0%, var(--darkest-color) 100%);
            color: var(--light-text);
        }

        .footer h4 {
            color: var(--light-text);
        }

        .footer a {
            color: var(--muted-text);
            transition: color 0.3s ease;
        }

        .footer a:hover {
            color: var(--light-text);
        }

        .footer .sitename {
            color: var(--light-text);
        }

        /* Social Links */
        .social-links a {
            color: var(--muted-text);
            transition: all 0.3s ease;
        }

        .social-links a:hover {
            color: var(--light-text);
            transform: translateY(-2px);
        }

        /* Scroll Top Button */
        .scroll-top {
            background: var(--primary-color);
            color: var(--light-text);
        }

        .scroll-top:hover {
            background: var(--secondary-color);
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .service-item {
                padding: 1.5rem;
            }

            .contact .info-item {
                padding: 1.5rem;
            }
        }

        /*--------------------------------------------------------------
        # Navigation Menu Styles from main.css
        --------------------------------------------------------------*/

        /* Desktop Navigation */
        @media (min-width: 1200px) {
            .navmenu {
                padding: 0;
            }

            .navmenu ul {
                margin: 0;
                padding: 0;
                display: flex;
                list-style: none;
                align-items: center;
            }

            .navmenu li {
                position: relative;
            }

            .navmenu a,
            .navmenu a:focus {
                color: #fff !important;
                padding: 20px 15px;
                margin-left: 2px;
                font-size: 16px;
                font-family: var(--nav-font);
                font-weight: 400;
                display: flex;
                align-items: center;
                justify-content: space-between;
                white-space: nowrap;
                transition: 0.3s;
            }

            .navmenu a i,
            .navmenu a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
                transition: 0.3s;
            }

            .navmenu li:hover>a,
            .navmenu .active,
            .navmenu .active:focus {
                color: var(--contrast-color) !important;
                background-color: var(--nav-hover-color);
            }

            .navmenu .dropdown ul {
                margin: 0;
                padding: 0;
                background: var(--nav-dropdown-background-color);
                display: block;
                position: absolute;
                visibility: hidden;
                left: 2px;
                top: 130%;
                opacity: 0;
                transition: 0.3s;
                z-index: 99;
                box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
            }

            .navmenu .dropdown ul li {
                min-width: 200px;
            }

            .navmenu .dropdown ul a {
                padding: 10px 20px;
                margin: 0;
                font-size: 15px;
                text-transform: none;
                color: var(--nav-dropdown-color);
            }

            .navmenu .dropdown ul a i {
                font-size: 12px;
            }

            .navmenu .dropdown ul a:hover,
            .navmenu .dropdown ul .active:hover,
            .navmenu .dropdown ul li:hover>a {
                color: var(--contrast-color) !important;
                background-color: var(--nav-hover-color);
            }

            .navmenu .dropdown:hover>ul {
                opacity: 1;
                top: 100%;
                visibility: visible;
            }

            .navmenu .dropdown .dropdown ul {
                top: 0;
                left: -90%;
                visibility: hidden;
            }

            .navmenu .dropdown .dropdown:hover>ul {
                opacity: 1;
                top: 0;
                left: -100%;
                visibility: visible;
            }
        }

        /* Mobile Navigation */
        @media (max-width: 1199px) {
            .mobile-nav-toggle {
                color: var(--nav-color) !important;
                font-size: 28px;
                line-height: 0;
                margin-right: 10px;
                cursor: pointer;
                transition: color 0.3s;
            }

            .navmenu {
                padding: 0;
                z-index: 9997;
            }

            .navmenu ul li a:hover,
            .navmenu ul li a.active {
                color: var(--accent-color) !important;
            }

            .navmenu ul {
                display: none;
                list-style: none;
                position: absolute;
                inset: 60px 20px 20px 20px;
                padding: 10px 0;
                margin: 0;
                border-radius: 6px;
                background-color: var(--nav-mobile-background-color);
                overflow-y: auto;
                transition: 0.3s;
                z-index: 9998;
                box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
            }

            .navmenu a,
            .navmenu a:focus {
                color: var(--nav-dropdown-color) !important;
                padding: 10px 20px;
                font-family: var(--nav-font);
                font-size: 17px;
                font-weight: 500;
                display: flex;
                align-items: center;
                justify-content: space-between;
                white-space: nowrap;
                transition: 0.3s;
            }

            .navmenu a i,
            .navmenu a:focus i {
                font-size: 12px;
                line-height: 0;
                margin-left: 5px;
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                transition: 0.3s;
                background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
            }

            .navmenu a i:hover,
            .navmenu a:focus i:hover {
                background-color: var(--accent-color) !important;
                color: var(--contrast-color);
            }

            .navmenu a:hover,
            .navmenu .active,
            .navmenu .active:focus {
                color: var(--nav-dropdown-hover-color) !important;
            }

            .navmenu .active i,
            .navmenu .active:focus i {
                background-color: var(--accent-color) !important;
                color: var(--contrast-color);
                transform: rotate(180deg);
            }

            .navmenu .dropdown ul {
                position: static;
                display: none;
                z-index: 99;
                padding: 10px 0;
                margin: 10px 20px;
                background-color: var(--nav-dropdown-background-color);
                transition: all 0.5s ease-in-out;
            }

            .navmenu .dropdown ul ul {
                background-color: rgba(33, 37, 41, 0.1);
            }

            .navmenu .dropdown>.dropdown-active {
                display: block;
                background-color: rgba(33, 37, 41, 0.03);
            }

            .mobile-nav-active {
                overflow: hidden;
            }

            .mobile-nav-active .mobile-nav-toggle {
                color: #fff !important;
                position: absolute;
                font-size: 32px;
                top: 15px;
                right: 15px;
                margin-right: 0;
                z-index: 9999;
            }

            .mobile-nav-active .navmenu {
                position: fixed;
                overflow: hidden;
                inset: 0;
                background: rgba(33, 37, 41, 0.8);
                transition: 0.3s;
            }

            .mobile-nav-active .navmenu>ul {
                display: block;
            }
        }

        /* Listing Dropdown - Desktop */
        @media (min-width: 1200px) {
            .navmenu .listing-dropdown {
                position: static;
            }

            .navmenu .listing-dropdown ul {
                margin: 0;
                padding: 10px;
                background: var(--nav-dropdown-background-color);
                box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
                position: absolute;
                top: 130%;
                left: 0;
                right: 0;
                visibility: hidden;
                opacity: 0;
                display: flex;
                transition: 0.3s;
                border-radius: 4px;
                z-index: 99;
            }

            .navmenu .listing-dropdown ul li {
                flex: 1;
            }

            .navmenu .listing-dropdown ul li a,
            .navmenu .listing-dropdown ul li:hover>a {
                padding: 10px 20px;
                font-size: 15px;
                color: var(--nav-dropdown-color);
                background-color: var(--nav-dropdown-background-color);
            }

            .navmenu .listing-dropdown ul li a:hover,
            .navmenu .listing-dropdown ul li .active,
            .navmenu .listing-dropdown ul li .active:hover {
                color: var(--nav-dropdown-hover-color);
                background-color: var(--nav-dropdown-background-color);
            }

            .navmenu .listing-dropdown:hover>ul {
                opacity: 1;
                top: 100%;
                visibility: visible;
            }
        }

        /* Listing Dropdown - Mobile */
        @media (max-width: 1199px) {
            .navmenu .listing-dropdown ul {
                position: static;
                display: none;
                z-index: 99;
                padding: 10px 0;
                margin: 10px 20px;
                background-color: var(--nav-dropdown-background-color);
                transition: all 0.5s ease-in-out;
            }

            .navmenu .listing-dropdown ul ul {
                background-color: rgba(33, 37, 41, 0.1);
            }

            .navmenu .listing-dropdown>.dropdown-active {
                display: block;
                background-color: rgba(33, 37, 41, 0.03);
            }

            .navmenu ul li a:hover,
            .navmenu ul li a.active {
                color: var(--accent-color) !important;
            }
        }