* {
     box-sizing: border-box;
}
 body {
     margin: 0;
     font-family: Arial, sans-serif;
}
 a.navbar-brand img {
     width: 70px;
}
 a.nav-link:hover {
     color: #f08f28 !important;
}
 a.btn.btn-primary.readmore {
     float: left;
     background: #ee8311;
     color: #fff;
     border: none;
     font-size: 15px;
     padding: 10px 20px;
     border-radius: 0px;
     margin-top: 10px;
     text-transform: capitalize;
     outline: none;
}
 a.btn.btn-primary.readmore:focus {
     outline: none !important;
     border: none;
     box-shadow: none;
}
 body.rtl a.btn.btn-primary.readmore {
     float: right;
}
 body.rtl section.banner-section {
     margin-top: -210px;
     max-width: 100%;
     max-height: 300px !important;
}
 body.rtl h1.display-5.font-weight-bold.mb-4.connect {
     margin-top: 100px;
     font-size: 18px !important;
}
 body.rtl {
     font-family: Cairo;
}
 body.rtl .row.align-items-center p.lead.mb-4 {
     font-size: 18px;
     font-family: Cairo;
}
 body.rtl .row.align-items-center h1.display-5.font-weight-bold.mb-4 {
     font-size: 34px;
}
 body.rtl h1.display-5.font-weight-bold.mb-4.connect, body.rtl h1.display-5.font-weight-bold.mb-4 {
     font-family: Cairo;
}
 body.rtl .row.align-items-center {
     margin-left: 90px;
}
 body.rtl .services-section h2, body.rtl .why-title, body.rtl .serve-title{
     font-family: Cairo;
}
 h1.display-5.font-weight-bold.mb-4.connect {
     color: #ee8311;
     font-size: 20px;
}
 nav.navbar.navbar-expand-lg.navbar-light.sticky-navbar {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 999;
     box-shadow: 0 2px 8px rgb(0 0 0 / 34%);
     transition: all 0.3s ease;
     background: #273844;
     padding: 0px;
}
 nav.navbar.navbar-expand-lg li.nav-item a.nav-link{
     color: #d9d5d5;
     font-size: 17px;
     font-weight: 500;
}
 a.btn.btn-outline-primary.ms-3 {
     color: #ffffff;
     border-color: #ffffff;
     margin-left: 80px;
     border-radius: 0px;
}
 a#arabicToggleBtn:hover {
     background: #ee8311;
}
 nav.navbar.navbar-expand-lg.navbar-light {
     padding-top: 25px;
     z-index: 9999;
     padding-bottom: 25px;
}
 .navbar.sticky {
     position: fixed;
     top: 0;
     width: 100%;
     background-color: #283745;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    /* Stronger, deeper shadow */
     z-index: 1000;
     transition: all 0.3s ease;
}
/* Custom mobile navbar */
 .mobile-navbar {
     padding: 10px 15px;
     position: relative;
     z-index: 1051;
}
 .mobile-navbar-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 a.mobile-logo img{
     width: 60px;
}
 .mobile-toggle-btn {
     font-size: 35px;
     background: none;
     border: none;
     cursor: pointer;
}
/* Mobile menu panel */
 .mobile-menu {
     position: fixed;
     top: 0;
     left: -280px;
     width: 250px;
     height: 100%;
     background: #273845;
     box-shadow: 2px 0 5px rgba(0,0,0,0.2);
     padding: 20px;
     transition: left 0.3s ease;
     z-index: 1050;
}
 .mobile-menu.active {
     left: 0;
}
 .mobile-menu-list {
     list-style: none;
     padding: 0;
     margin-top: 65px;
}
 .mobile-menu-list li {
     margin: 15px 0;
}
 .mobile-menu-list a {
     color: #d9d5d5;
     text-decoration: none;
     font-size: 16px;
     display: block;
}
 .mobile-menu {
     position: fixed;
     top: 0;
     bottom: 0;
     width: 250px;
     background: linear-gradient(to right, #273844, #3c4e5a);
    /* Slightly lighter, more grayish blue */
     transition: transform 0.3s ease;
     z-index: 1000;
}
 body.rtl .close-btn{
     left: 15px !important;
     right: unset;
}
 button#mobileToggleBtn {
     outline: none;
}
/* RTL mode: slide in from right */
 body.rtl .mobile-menu {
     right: 0;
     transform: translateX(100%);
}
 body.rtl .mobile-menu.active {
     transform: translateX(0);
}
/* LTR mode: slide in from left (optional fallback) */
 body:not(.rtl) .mobile-menu {
     left: 0;
     transform: translateX(-100%);
}
 body:not(.rtl) .mobile-menu.active {
     transform: translateX(0);
}
/* Close button inside menu */
 .close-btn {
     position: absolute;
     top: 10px;
     right: 15px;
     font-size: 28px;
     background: none;
     border: none;
     cursor: pointer;
}
 .navbar {
     display: block;
}
 .mobile-navbar {
     display: none;
}
 button#closeMobileMenu{
     color: #fff;
     font-size: 40px;
     width: 50px;
     height: 40px;
}
/*we serve section starts */
 .serve-section {
     padding: 60px 20px;
     background-color: #f7f7f7;
}
 .serve-container {
     max-width: 1200px;
     margin: auto;
}
 .serve-row {
     display: flex;
     flex-wrap: wrap;
     gap: 40px;
     align-items: center;
}
 .serve-image {
     text-align: center;
}
 .serve-image img {
     max-width: 100%;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}
 body.rtl .about-image {
     padding: 20px !important;
     padding-right: 0px !important;
}
 body.rtl .about-content h2, body.rtl .about-content p, body.rtl .service-title, body.rtl .service-content ul li {
     text-align: right;
     font-family: Cairo;
}
 .serve-content {
     flex: 1 1 500px;
}
 body.rtl .service-content ul {
     padding-right: 15px;
}
 .serve-title {
     font-size: 32px;
     color: #001f8d;
     font-family: "IBM Plex Serif", serif;
     font-weight: 600;
     margin-bottom: 30px;
     text-align: center;
}
 .serve-box {
     background: #ffffff;
     padding: 20px 25px;
     margin-bottom: 25px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
 .serve-box:nth-of-type(3){
     margin: 0px;
}
 .serve-box h3 {
     font-size: 20px;
     margin-bottom: 10px;
     color: #32475b;
}
 .serve-box p {
     font-size: 16px;
     color: #676e79;
     line-height: 1.6;
}
/*we serve section end */
/* our mision section starts */
/* Main Mission Section */
 .mission-main {
     position: relative;
     padding: 80px 20px;
     overflow: hidden;
}
 html {
     scroll-behavior: smooth;
}
/* Background Image with Opacity */
 .mission-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('img/your-background-image.jpg');
    /* Replace with your image */
     background-size: cover;
     background-position: center;
     opacity: 0.1;
     z-index: 0;
}
/* Content Layout */
 .mission-content {
     position: relative;
     z-index: 1;
     max-width: 1200px;
     margin: auto;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     gap: 40px;
}
/* Text Column */
 .mission-text {
     flex: 1 1 500px;
}
 .mission-text h2 {
     font-size: 32px;
     color: #001f8d;
     font-family: "IBM Plex Serif", serif;
     font-weight: 600;
     margin-bottom: 20px;
}
 .mission-text p {
     font-size: 18px;
     color: #676e79;
     line-height: 1.7;
}
/* Image Column */
 .mission-image {
     flex: 1 1 400px;
     text-align: center;
}
 .mission-image img {
     max-width: 100%;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
/* our mision section end */
/* banner section starts */
 .about-container .about-image {
     padding-left: 0px;
}
 section.banner-section {
     margin-top: -121px;
     background-image: url(img/map4.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     opacity: 0.9;
}
 .row.align-items-center {
     margin-top: 100px;
     margin-left: 90px;
     text-align: left;
}
 h1.display-5.font-weight-bold.mb-4 {
     text-align: left;
     font-family: "IBM Plex Serif", serif;
     text-transform: capitalize;
     font-size: 39px;
}
 p.lead.mb-4 {
     text-align: left;
     font-family: "IBM Plex Serif", serif;
     font-size: 22px;
     color: #d9d5d5;
}
 .banner-section a.btn.btn-primary {
     background: #ee8311;
     color: #fff;
     border: none;
     font-size: 15px;
     padding: 10px 20px;
     border-radius: 0px;
     margin-bottom: 20px;
     margin-top: 10px;
}
 .banner-section {
     background: linear-gradient(135deg, #2c3e50, #34495e);
     color: #fff;
     padding: 60px 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
     text-align: center;
}
 .banner-content {
     max-width: 900px;
}
 .banner-title {
     font-size: 32px;
     font-weight: 700;
     margin-bottom: 30px;
}
 .banner-text {
     font-size: 18px;
     line-height: 1.7;
     margin-bottom: 40px;
}
 .read-more-btn {
     display: inline-block;
     background-color: #00bcd4;
     color: #fff;
     padding: 12px 25px;
     border-radius: 5px;
     text-decoration: none;
     font-weight: 600;
     transition: background-color 0.3s ease;
}
 .read-more-btn:hover {
     background-color: #0097a7;
}
/* banner section end */
/* mission section starts */
 .mission-section {
     background: linear-gradient(135deg, #2c3e50, #2c3e50);
     padding: 60px 0px;
}
 .mission-container {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
}
 .mission-title {
     font-size: 36px;
     font-weight: bold;
     color: #ffffff;
     margin-bottom: 30px;
}
 .mission-icon {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, #007bff, #00bcd4);
     border-radius: 50%;
     margin: 0 auto 30px auto;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .mission-icon span {
     font-size: 36px;
     color: white;
}
 .mission-text-card {
     background: #ffffff;
     padding: 30px 25px;
     border-radius: 12px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
 .mission-text-card p {
     font-size: 18px;
     color: #555555;
     line-height: 1.6;
}
/* mission section end */
/* our services section starts */
 .services-section {
     padding: 60px 0px;
     max-width: 1200px;
     margin: auto;
}
 .services-section h2 {
     font-size: 32px;
     color: #001f8d;
     font-family: "IBM Plex Serif", serif;
     font-weight: 600;
     text-align: center;
     margin-bottom: 50px;
}
 .services-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     justify-content: space-between;
}
 .service-column {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgb(164 168 171 / 37%);
     flex: 1 1 30%;
     min-width: 280px;
     padding: 20px;
     text-align: center;
     transition: transform 0.3s ease;
}
 body.rtl a.btn.btn-outline-primary.ms-3 {
     margin-right: 80px;
     margin-left: 0px;
}
 body.rtl a.navbar-brand{
     margin-right: 0px;
}
 body.rtl h1.display-5.font-weight-bold.mb-4, body.rtl p.lead.mb-4, body.rtl .mission-text h2, body.rtl .mission-text p, body.rtl .serve-box, body.rtl .footer-column{
     text-align: right;
     font-family: 'Cairo';
}
 body.rtl .banner-section a.btn.btn-primary{
     float: right;
}
 body.rtl .social-icons i {
     margin-left: 12px;
     margin-right: 0px;
}
 body.rtl .social-icons a {
     margin-left: 10px;
     margin-right: 0px;
}
 .service-column:hover {
     transform: translateY(-8px);
}
 body.rtl .footer-column.ar-list li i {
     margin-right: 10px;
     color: #ee8311;
     transform: rotate(180deg);
}
 body.rtl .footer-column li i {
     margin-right: 0px;
     margin-left: 10px;
}
 body.rtl .footer-column input{
     text-align: right;
}
 .zoomed {
     transform: scale(1.8);
     transition: transform 0.3s ease;
     z-index: 10;
     position: relative;
}
 .service-image img {
     transition: transform 0.3s ease;
     cursor: zoom-in;
}
 .service-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
}
 .service-title {
     font-size: 22px;
     font-weight: 600;
     margin-top: 15px;
     margin-bottom: 15px;
     color: #061d72;
     text-align: left;
}
 .service-content ul{
     text-align: left;
     margin-top: 15px;
     padding-left: 20px;
     list-style-type: disc;
}
 .service-content {
     font-size: 16px;
     color: #5d6571;
     line-height: 1.6;
}
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
    }
     to {
         opacity: 1;
         transform: translateY(0);
    }
}
/* our services section end */
/* why choose us section starts */
 .why-choose-us {
     background-color: #f7f7f7;
     padding: 60px 0px;
}
 .why-title {
     text-align: center;
     margin-bottom: 40px;
     font-size: 32px;
     color: #001f8d;
     font-family: "IBM Plex Serif", serif;
     font-weight: 600;
}
 .why-container {
     display: flex;
     flex-wrap: wrap;
     max-width: 1200px;
     margin: auto;
     justify-content: space-between;
}
 .why-box {
     flex: 1 1 30%;
     background: white;
     margin: 15px;
     padding: 30px 20px;
     text-align: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 .why-box:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
 .why-box i {
     font-size: 36px;
     color: #001f8d;
     margin-bottom: 15px;
}
 .why-box h4 {
     margin: 10px 0 5px;
     font-size: 18px;
     color: #2c3e50;
}
 .why-box p {
     font-size: 14px;
     color: #555;
     line-height: 1.6;
}
/* why choose us section end */
/* About us section starts */
 .about-section {
     padding: 60px 0px;
     background-color: #f7f7f7;
}
 .about-container {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     max-width: 1200px;
     margin: auto;
}
 section.serve-section .container {
     padding: 0px;
}
 section.why-choose-us .container{
     padding: 0px;
}
 .about-image {
     padding: 20px;
     text-align: center;
}
 .about-image img {
     width: 100%;
     max-width: 500px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
 .about-content {
     flex: 1 1 50%;
     padding: 20px 20px 20px 50px;
}
 .about-content h2 {
     font-size: 32px;
     color: #001f8d;
     font-family: "IBM Plex Serif", serif;
     font-weight: 600;
     margin-bottom: 20px;
}
 .about-content p {
     font-size: 16px;
     color: #555;
     line-height: 1.8;
}
/* About us section end */
/* Footer section start */
 .footer {
     background-color: #2c3e50;
     color: white;
     padding: 40px 20px;
}
 .footer-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: 1200px;
     margin: auto;
}
 body.rtl .serve-image {
     padding-right: 16px;
}
 .footer-column {
     flex: 1 1 250px;
     margin: 20px 15px;
}
 .footer-column h3 {
     margin-bottom: 30px;
}
 .footer-column p, .footer-column li, .footer-column a {
     color: #ecf0f1;
     font-size: 14px;
     line-height: 1.6;
     text-decoration: none;
}
 .social-icons {
     margin-top: 10px;
}
 .social-icons a {
     display: inline-block;
     margin-right: 10px;
     color: white;
     font-size: 18px;
}
 .footer-column ul {
     list-style: none;
     padding: 0;
}
 .contact-info li {
     margin-bottom: 8px;
}
 .footer-form input, .footer-form button {
     width: 100%;
     padding: 10px;
     margin-bottom: 6px;
     border: none;
     border-radius: 4px;
}
 .footer-form input {
     background-color: #ecf0f1;
     color: #2c3e50;
     border-radius: 0px;
     height: 30px;
     outline: none;
     font-size: 15px;
}
 form.footer-form select{
     width: 100%;
     height: 30px;
     margin-bottom: 6px;
     outline: none;
     font-size: 15px;
     color: #2c3e50;
     padding: 0px 10px;
     background-color: #ecf0f1;
}
 form.footer-form textarea {
     width: 100%;
     height: 60px;
     margin-bottom: 6px;
     outline: none;
     font-size: 15px;
     color: #2c3e50;
     padding:10px;
     background-color: #ecf0f1;
}
 .footer-form button {
     background-color: #ee8311;
     color: #2c3e50;
     font-weight: bold;
     cursor: pointer;
     border-radius: 0px;
}
 form.footer-form button {
     color: #fff;
}
 .social-icons i {
     font-size: 20px;
     padding: 10px;
     margin-right: 12px;
     background-color: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(236, 240, 241, 0.2);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
     border-radius: 10px;
}
 .social-icons a:hover {
     color:#ee8311;
}
 footer.footer a:hover {
     color:#ee8311;
}
 .footer-column li i {
     margin-right: 10px;
     color: #ee8311;
}
 .footer-column li{
     margin-bottom: 15px;
}
 .footer-bottom {
     text-align: center;
     padding: 20px;
     color: #ecf0f1;
     font-size: 14px;
}
/* Footer section end */
 @media (max-width: 992px) {
     .why-box {
         flex: 1 1 45%;
    }
}
 @media (max-width: 992px) {
     button#arabicToggleBtnMobile {
         position: absolute;
         right: 70px;
         top: 32px;
         height: 26px;
         border: none;
         color: #001f8d;
         font-weight: 600;
    }
     .navbar {
         display: none !important;
    }
     .mobile-navbar {
         display: block !important;
    }
     button#mobileToggleBtn {
         color: #fff;
    }
     .row.align-items-center {
         margin-top: 100px;
         margin-left: 0px;
    }
     button#arabicToggleBtn {
         float: right;
    }
     .mobile-navbar-container {
         position: relative;
    }
     .mobile-navbar-container button#arabicToggleBtn {
         position: absolute;
         right: 55px;
         width: 72px;
         height: 29px;
         top: 22px;
         border: none;
    }
}
 @media (max-width: 768px) {
     .about-container {
         flex-direction: column;
    }
     .about-content, .about-image {
         flex: 1 1 100%;
         padding: 10px;
    }
     .about-content h2 {
         font-size: 26px;
    }
     .footer-container {
         flex-direction: column;
    }
     .footer-column {
         margin: 10px 0;
    }
     .services-grid {
         flex-direction: column;
         gap: 30px;
    }
     .banner-title {
         font-size: 26px;
    }
     .banner-text {
         font-size: 16px;
    }
     .read-more-btn {
         padding: 10px 20px;
         font-size: 14px;
    }
     .mission-content {
         flex-direction: column;
         text-align: center;
    }
     .mission-text h2 {
         font-size: 28px;
    }
     .mission-text p {
         font-size: 16px;
    }
     .mission-text, .mission-image {
         flex: 1 1 100%;
    }
     .serve-row {
         flex-direction: column;
         text-align: center;
    }
     .serve-title {
         font-size: 26px;
    }
     .serve-box {
         text-align: left;
    }
}
 @media (max-width: 600px) {
     .why-box {
         flex: 1 1 100%;
    }
     .why-title {
         font-size: 26px;
    }
}
 @media (max-width: 480px) {
     .banner-title {
         font-size: 22px;
    }
     .banner-text {
         font-size: 15px;
    }
}
 @media screen and (max-width: 480px) {
     .serve-image img {
         width: 100%;
    }
     .serve-image {
         flex: none;
        /* text-align: center;
         */
         width: 100% !important;
    }
     h1.display-5.font-weight-bold.mb-4 {
         font-size: 25px;
    }
     p.lead.mb-4 {
         font-size: 18px;
    }
     .about-container .about-image {
         padding: 0px;
    }
     .about-content {
         padding-left: 0px;
         padding-right: 0px;
    }
     .about-content h2 {
         font-size: 24px;
         margin-top: 40px;
    }
     .services-section h2, .why-title, .mission-text h2, .serve-title {
         font-size: 24px;
    }
     .footer-column h3 {
         margin-bottom: 15px;
         font-size: 20px;
    }
     .footer-column {
         flex: 1 1 190px;
    }
     .why-box {
         margin: 20px 0px;
    }
     .mission-text {
         order: 2;
    }
     .mission-image {
         order: 1;
    }
     .mission-content {
         flex-direction: column;
    }
     .mission-text, .mission-image {
         flex: 1 1 100%;
         text-align: center;
        /* Optional: center-align on small screens */
    }
     .mission-image img {
         width: 100%;
         height: auto;
    }
     .row.align-items-center .col-lg-12 {
         padding-left: 0px;
         padding-right: 0px;
    }
     .mission-main{
         padding: 80px 0px;
    }
     .serve-section{
         padding: 60px 0px;
    }
     button#arabicToggleBtnMobile{
         top: 21px;
    }
     .row.align-items-center {
         margin-left: -10px;
    }
     .why-container{
         padding: 0px 20px;
    }
     .serve-container {
         padding: 0px 20px;
    }
     body.rtl .row.align-items-center {
         margin-left: 0px;
    }
     body.rtl h1.display-5.font-weight-bold.mb-4.connect {
         margin-top: 182px;
         font-size: 16px !important;
    }
     body.rtl .row.align-items-center h1.display-5.font-weight-bold.mb-4 {
         font-size: 18px;
    }
     body.rtl .row.align-items-center p.lead.mb-4 {
         font-size: 16px;
         font-family: Cairo;
    }
     body.rtl section.banner-section {
         margin-top: -279px;
         max-width: 100%;
         max-height: 655px !important;
    }
     body.rtl .banner-section{
         height: unset;
    }
}
 @media screen and (max-width: 414px) {
     button#arabicToggleBtnMobile {
         top: 22px;
    }
     h1.display-5.font-weight-bold.mb-4 {
         font-size: 18px;
    }
     p.lead.mb-4 {
         font-size: 14px;
         line-height: 18px;
         margin-bottom: 13px !important;
    }
     h1.display-5.font-weight-bold.mb-4 {
         margin-bottom: 15px !important;
    }
     button#arabicToggleBtnMobile {
         top: 18px;
    }
     body.rtl h1.display-5.font-weight-bold.mb-4.connect {
         margin-top: 0px;
         font-size: 16px !important;
    }
     body.rtl section.banner-section {
         margin-top: -310px;
    }
     .row.align-items-center {
         margin-top: 317px;
    }
}