.hero-gradient {
     background: linear-gradient(135deg, rgba(20, 30, 48, 0.9) 0%, rgba(36, 59, 85, 0.9) 100%);
 }

 .service-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .nav-link:hover {
     color: #3b82f6;
 }

 .dropdown:hover .dropdown-menu {
     display: block;
 }

 .industry-icon {
     transition: all 0.3s ease;
 }

 .industry-card:hover .industry-icon {
     transform: scale(1.1);
     color: #3b82f6;
 }

 .animate-bounce-slow {
     animation: bounce 3s infinite;
 }

 @keyframes bounce {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 /* features section */

 .section-title {
     text-align: center;
     margin-bottom: 10px;
     font-size: 24px;
     font-weight: bold;
 }

 .section-subtitle {
     text-align: center;
     max-width: 800px;
     margin: 0 auto 40px;
     color: #555;
     font-size: 16px;
     line-height: 1.6;
 }

 .features {
     display: flex;
     justify-content: space-between;
     gap: 20px;
 }

 .feature-box {
     flex: 1;
     border: 1px solid #eee;
     padding: 20px;
     border-radius: 8px;
     background-color: #f9f9f9;
 }

 .feature-box img {
     width: 100%;
     height: auto;
     max-height: 140px;
     object-fit: contain;
     margin-bottom: 15px;
 }

 .feature-box h3 {
     font-size: 18px;
     margin-bottom: 10px;
     color: #111;
 }

 .feature-box ul {
     padding-left: 20px;
     margin: 0;
     list-style-type: "✔ ";
 }

 .feature-box ul li {
     margin-bottom: 8px;
     color: #333;
 }

 .feature-box a {
     display: inline-block;
     margin-top: 10px;
     color: #0066cc;
     text-decoration: none;
     font-weight: bold;
 }

 .feature-box a:hover {
     text-decoration: underline;
 }

 @media(max-width: 768px) {
     .features {
         flex-direction: column;
     }
 }

 .proto-section {
     background-color: #f9f9f9;
     padding: 60px 20px;
     font-family: 'Segoe UI', sans-serif;
 }

 .proto-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 40px;
     max-width: 1200px;
     margin: 0 auto;
     flex-wrap: wrap;
 }

 .proto-text {
     flex: 1 1 500px;
 }

 .proto-text h2 {
     font-size: 28px;
     font-weight: bold;
     margin-bottom: 20px;
     color: #1d1d1f;
 }

 .proto-text p {
     font-size: 16px;
     line-height: 1.6;
     color: #333;
     margin-bottom: 20px;
 }

 .proto-link {
     font-weight: bold;
     color: #0070f3;
     text-decoration: none;
 }

 .proto-link:hover {
     text-decoration: underline;
 }

 .proto-image {
     flex: 1 1 500px;
     text-align: center;
 }

 .proto-image img {
     max-width: 100%;
     height: auto;
     border-radius: 10px;
 }

 @media (max-width: 768px) {
     .proto-container {
         flex-direction: column;
         text-align: center;
     }

     .proto-text,
     .proto-image {
         flex: 1 1 100%;
     }
 }

 .fields-section {
     background: #ffffff;
     padding: 60px 20px;
     text-align: center;
     font-family: 'Segoe UI', sans-serif;
 }

 .fields-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 40px;
     color: #1d1d1f;
 }

 .fields-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 20px;
     max-width: 1100px;
     margin: auto;
 }

 .field-card {
     background: #f9f9f9;
     padding: 20px;
     border-radius: 8px;
     display: flex;
     gap: 10px;
     align-items: center;
     justify-content: flex-start;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .field-card:hover {
     background: #eef6ff;
     transform: translateY(-3px);
 }

 .field-card img {
     width: 20px;
     height: 20px;
 }

 .field-card span {
     font-size: 14px;
     color: #333;
     text-align: left;
 }


 .capabilities-section {
     background: #fff;
     padding: 60px 20px;
     font-family: 'Segoe UI', sans-serif;
 }

 .capabilities-title {
     text-align: center;
     font-size: 24px;
     font-weight: bold;
     color: #1d1d1f;
     margin-bottom: 40px;
 }

 .capabilities-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
 }

 .cap-card {
     background: #f9f9f9;
     border-radius: 10px;
     padding: 20px;
     text-align: left;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
     transition: 0.3s ease;
 }

 .cap-card:hover {
     background: #eef6ff;
     transform: translateY(-5px);
 }

 .cap-card img {
     width: 100%;
     height: auto;
     border-radius: 8px;
     margin-bottom: 15px;
 }

 .cap-card h3 {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 5px;
     color: #1a1a1a;
 }

 .cap-card .subtitle {
     font-size: 14px;
     color: #666;
     margin-bottom: 10px;
 }

 .cap-card ul {
     padding-left: 20px;
     margin-bottom: 10px;
 }

 .cap-card ul li {
     font-size: 13px;
     color: #333;
     margin-bottom: 5px;
 }

 .cap-card a {
     font-weight: bold;
     color: #0070f3;
     text-decoration: none;
     font-size: 14px;
 }

 .cap-card a:hover {
     text-decoration: underline;
 }


 .why-section {
     background: #ffffff;
     padding: 60px 20px;
     font-family: 'Segoe UI', sans-serif;
     text-align: center;
 }

 .why-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 40px;
     color: #1d1d1f;
 }

 .why-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 30px;
     max-width: 1100px;
     margin: 0 auto;
 }

 .why-card {
     background: #f9f9f9;
     padding: 25px;
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
     transition: 0.3s;
     text-align: left;
 }

 .why-card:hover {
     background-color: #eef6ff;
     transform: translateY(-4px);
 }

 .why-card img {
     width: 60px;
     height: auto;
     margin-bottom: 15px;
 }

 .why-card h3 {
     font-size: 18px;
     color: #1a1a1a;
     margin-bottom: 10px;
 }

 .why-card p {
     font-size: 14px;
     color: #444;
     margin-bottom: 15px;
 }

 .why-card a {
     font-size: 14px;
     color: #0070f3;
     font-weight: bold;
     text-decoration: none;
 }

 .why-card a:hover {
     text-decoration: underline;
 }

 .materials-section {
     background: #fff;
     padding: 60px 20px;
     font-family: 'Segoe UI', sans-serif;
     text-align: center;
 }

 .materials-container {
     max-width: 1200px;
     margin: auto;
 }

 .materials-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 10px;
     color: #1d1d1f;
 }

 .materials-desc {
     font-size: 14px;
     color: #555;
     margin-bottom: 40px;
 }

 .materials-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
 }

 .material-card {
     background: #f9f9f9;
     padding: 25px;
     border-radius: 10px;
     text-align: left;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }

 .material-card img {
     width: 100%;
     height: auto;
     border-radius: 8px;
     margin-bottom: 15px;
 }

 .material-card h3 {
     font-size: 18px;
     font-weight: bold;
     margin-bottom: 10px;
     color: #1a1a1a;
 }

 .material-card p {
     font-size: 14px;
     line-height: 1.6;
     color: #333;
 }

 .material-card a {
     color: #0070f3;
     text-decoration: none;
     font-weight: bold;
 }

 .material-card a:hover {
     text-decoration: underline;
 }

 .features-section {
     padding: 60px 20px;
     background-color: #f9f9f9;
     font-family: 'Segoe UI', sans-serif;
 }

 .features-container {
     max-width: 1200px;
     margin: auto;
     text-align: center;
 }

 .features-title {
     font-size: 24px;
     font-weight: bold;
     margin-bottom: 40px;
     color: #1d1d1f;
 }

 .features-grid {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
 }

 .feature-box {
     background: #fff;
     border-radius: 10px;
     padding: 30px;
     width: 300px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
     text-align: center;
 }

 .feature-box img {
     width: 60px;
     height: 60px;
     margin-bottom: 15px;
 }

 .feature-box h3 {
     font-size: 18px;
     font-weight: bold;
     color: #1a1a1a;
     margin-bottom: 10px;
 }

 .feature-box p {
     font-size: 14px;
     color: #555;
     line-height: 1.6;
 }

 .faq-item {
     margin-bottom: 15px;
     border-bottom: 1px solid #ddd;
     padding-bottom: 10px;
 }

 .faq-question {
     font-size: 18px;
     font-weight: bold;
     cursor: pointer;
     position: relative;
 }

 .faq-question::after {
     content: '+';
     position: absolute;
     right: 0;
     transition: transform 0.3s;
 }

 .faq-item.active .faq-question::after {
     content: '-';
 }

 .faq-answer {
     display: none;
     padding-top: 10px;
     color: #555;
 }

 .faq-item.active .faq-answer {
     display: block;
 }

 .d-none {
     display: none;
 }

 .force-margin-right {
     margin-right: 10px !important;
 }

 .hero-gradient {
     background: linear-gradient(135deg, rgba(20, 30, 48, 0.9) 0%, rgba(36, 59, 85, 0.9) 100%);
 }

 .hero-gradient h1 {
     color: #fff;
     font-size: 36px;
     margin-bottom: 20px;
 }

 .hero-gradient p {
     color: #ddd;
     font-size: 18px;
 }

 /* S : Menu styles */

 /* لواجهة إنجليزية */
 .faq-question.ltr::after {
     content: '+';
     position: absolute;
     left: unset;
     right: 0 !important;
     transition: transform 0.3s;
 }

 /* لواجهة عربية */
 .faq-question.rtl::after {
     content: '+';
     position: absolute;
     right: unset;
     left: 0 !important;
     transition: transform 0.3s;
 }

 .group:hover .group-hover\\:block {
     display: block;
 }

 .rtl {
     direction: rtl;
     text-align: right;
 }

 i.fas.fa-check.text-green-500.mt-1.mr-2 {
     margin: 0 12px;
 }

 .btn-primary {
     background-color: #2f090c;
     border-color: #410e12;
     color: #fff;
 }

 .accordion-button:not(.collapsed) {
     color: #ffffff;
     /* نص أبيض لتباين أفضل */
     background-color: #2f090c;
     /* اللون الأساسي */
     box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 #2f090c;
     /* نفس اللون للحدود الداخلية */
 }

 .text-primary {
     color: #2f090c !important;
 }

 .bg-primary {
     background-color: #2f090c !important;
 }

 /* Custom CSS for the language switcher */
 .language-switcher-custom {
     direction: ltr;
     /* Ensure correct text direction for layout */
     font-family: Arial, sans-serif;
     /* You can change this font */
 }

 .language-switcher-custom .btn {
     background-color: transparent;
     border: 2px solid #ccc;
     color: #333;
     font-weight: bold;
     padding: 8px 20px;
     position: relative;
     z-index: 1;
     transition: all 0.3s ease;
 }

 .language-switcher-custom .btn:hover {
     background-color: #f0f0f0;
     z-index: 2;
     /* To make it appear above other elements on hover */
 }

 /* Style for the Arabic button (on the right) */
 .language-switcher-custom .btn-ar {
     border-top-right-radius: 20px;
     border-bottom-right-radius: 20px;
     border-left: none;
     margin-right: -10px;
     /* Overlap the buttons */
 }

 /* Style for the English button (on the left) */
 .language-switcher-custom .btn-en {
     border-top-left-radius: 20px;
     border-bottom-left-radius: 20px;
 }

 /* Custom shape for the connecting edges */
 .language-switcher-custom .btn-en::after,
 .language-switcher-custom .btn-ar::before {
     content: "";
     position: absolute;
     top: 0;
     bottom: 0;
     width: 20px;
     background-color: transparent;
     z-index: 1;
 }

 .language-switcher-custom .btn-en::after {
     right: -10px;
     transform: skewX(-20deg);
     background-color: inherit;
     z-index: 2;
 }

 .language-switcher-custom .btn-ar::before {
     left: -10px;
     transform: skewX(-20deg);
     background-color: inherit;
     z-index: 2;
 }

 /* Active button state */
 .language-switcher-custom .btn.active,
 .language-switcher-custom .btn.active:hover {
     background-color: #333;
     color: white;
     border-color: #333;
     z-index: 3;
 }

 /* The angled part of the active button needs to be the same color */
 .language-switcher-custom .btn.active::after,
 .language-switcher-custom .btn.active::before {
     background-color: #333;
 }

 [aria-label="Language switcher"] {
     direction: ltr;
 }

 .ml-2 {
     margin-left: 2px !important;
 }

 .mr-2 {
     margin-right: 2px !important;
 }

 /* Custom styles for the new design */
 .material-card .card-img-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     /* 2 columns */
     grid-template-rows: repeat(2, 120px);
     /* 2 rows, each 120px high */
     gap: 1px;
     /* Small gap between images */
     overflow: hidden;
     /* Ensure images stay within bounds */
     border-top-left-radius: inherit;
     /* Inherit border radius from card */
     border-top-right-radius: inherit;
     /* Inherit border radius from card */
 }

 .material-card .card-img-grid img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Cover the area without distortion */
     display: block;
     /* Remove extra space below images */
 }

 /* Ensure the card's top corners are rounded for the image grid */
 .material-card {
     border-radius: 10px;
     /* Adjust as needed */
     overflow: hidden;
     /* Crucial for internal elements to respect border-radius */
 }

 /* Existing styles for general card appearance (can be adjusted) */
 .card {
     transition: transform 0.2s, box-shadow 0.2s;
 }

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

 .card-body h3 {
     font-size: 1.25rem;
     /* Adjust heading size */
 }

 .card-body p.card-text {
     font-size: 0.95rem;
     /* Adjust text size */
     line-height: 1.6;
 }

 .card-body p.card-text a {
     color: #007bff;
     /* Link color */
     text-decoration: none;
 }

 .card-body p.card-text a:hover {
     text-decoration: underline;
 }

 /* General spacing for the section */
 .container .text-center .mb-5 {
     margin-bottom: 3rem !important;
     /* Increase space below heading/description */
 }

 .row.g-4 {
     --bs-gutter-x: 2rem;
     /* Space between columns */
     --bs-gutter-y: 2rem;
     /* Space between rows (if wrapping) */
 }

 [dir="rtl"] {
     direction: ltr;
     unicode-bidi: bidi-override;
     display: inline-block;
 }

 /* Dark navbar background */
 .navbar-dark {
     background-color: #000 !important;
 }

 /* White hamburger icon */
 .custom-toggler .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
 }

 /* Custom language switcher for desktop */
 .custom-lang-switcher .btn {
     border-radius: 0 !important;
     border: none !important;
     color: #fff !important;
     background-color: transparent !important;
     padding: 0.25rem 0.5rem;
 }

 .custom-lang-switcher .btn:hover {
     background-color: rgba(255, 255, 255, 0.1) !important;
 }

 .custom-lang-switcher .btn.active {
     background-color: #fff !important;
     color: #000 !important;
 }

 /* Hide the flags from the buttons on desktop */
 .custom-lang-switcher .btn img {
     display: none;
 }

 /* Get a Quote button styling */
 .btn-secondary {
     background-color: #9c0000 !important;
     border-color: #9c0000 !important;
     font-weight: bold;
 }

 .btn-secondary:hover {
     background-color: #7a0000 !important;
     border-color: #7a0000 !important;
 }

 /* Custom styling for the dropdown menus */
 .dropdown-menu {
     background-color: #1a1a1a;
     border: none;
     border-radius: 10px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
 }

 .dropdown-item {
     color: #ddd;
 }

 .dropdown-item:hover,
 .dropdown-item:focus {
     background-color: #333;
     color: #fff;
 }

 /* Submenu positioning */
 .dropdown-submenu {
     position: relative;
 }

 .dropdown-submenu>.dropdown-menu {
     top: 0;
     left: 100%;
     margin-top: -1px;
 }

 .bg-custom-dark {
     background-color: #0b181d;
 }

 .bg-custom-dark h2 {
     color: #ffffff;
 }

 .bg-custom-dark-x {
     background-color: #091316;
 }

 .carousel-inner {
     border-radius: 10px;
 }

 .accordion-button.custom-after::after {
     margin-left: unset;
     margin-right: auto;
 }

 [dir="auto"] {
     unicode-bidi: plaintext;
 }

 span.carousel-control-prev-icon,
 span.carousel-control-next-icon {
     border: 2px solid;
     border-radius: 10px;
     padding: 10px;
     width: 40px;
     height: 40px;
 }

 /* اللغة الإنجليزية */
 body.lang-en {
     text-align: left;
 }

 body.lang-en .dropdown-item,
 body.lang-en ul.list-unstyled,
 body.lang-en #dv_footer h4,
 body.lang-en .card-body {
     text-align: left;
 }

 body.lang-en div#faqAccordion * {
     text-align: left;
     direction: ltr;
 }

 /* اللغة العربية */
 body.lang-ar {
     text-align: right;
     width: 100vw !important;
 }

 body.lang-ar .dropdown-item,
 body.lang-ar ul.list-unstyled,
 body.lang-ar #dv_footer h4,
 body.lang-ar .card-body {
     text-align: right;
 }

 body.lang-ar div#faqAccordion * {
     text-align: right;
     direction: rtl;
 }

 body.lang-ar li.mb-2,
 body.lang-ar .mb-3.ps-3,
 body.lang-ar p.card-text.text-secondary.mb-2,
 body.lang-ar .card-text.mb-0 {
     direction: rtl;
 }

 body.lang-ar p.text-white.mb-4 {
     direction: rtl;
 }

 body.lang-ar .ss-container {
     text-align: right;
     direction: rtl;
 }

 .image-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     /* أول صف صورتين */
     gap: 0;
     /* بدون فراغ */
     overflow: hidden;
     border-radius: 16px;
     /* الزوايا كلها */
 }

 .image-grid img {
     width: 100%;
     height: 220px;
     /* ثبّت الطول */
     object-fit: cover;
     /* يخلي الصور تتقص بشكل مرتب */
     display: block;
     margin: 0;
 }

 /* أول صورة: الزاوية العلوية اليسار */
 .image-grid img:first-child {
     border-radius: 0;
     border-top-left-radius: 16px;
     padding-right: 1px;
     padding-bottom: 1px;
 }

 /* ثاني صورة: الزاوية العلوية اليمين */
 .image-grid img:nth-child(2) {
     border-radius: 0;
     border-top-right-radius: 16px;
     padding-left: 1px;
     padding-bottom: 1px;
 }

 /* آخر صورة: تاخذ العرض كامل + الزاويتين السفليتين */
 .image-grid img:last-child {
     grid-column: 1 / -1;
     /* تمتد على العمودين */
     border-radius: 0;
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
     padding-top: 1px;
 }

 .image-grid-vertical {
     display: grid;
     grid-template-columns: 1fr;
     /* عمود واحد */
     gap: 0;
     /* بدون فراغ */
     overflow: hidden;
     border-radius: 16px;
     /* نفس ستايل البوكس */
 }

 .image-grid-vertical img {
     width: 100%;
     height: 220px;
     /* نفس الطول الثابت */
     object-fit: cover;
     display: block;
     margin: 0;
 }

 /* أول صورة: الزاويتين العلويتين */
 .image-grid-vertical img:first-child {
     border-radius: 0;
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
     padding-bottom: 1px;
 }

 /* آخر صورة: الزاويتين السفليتين */
 .image-grid-vertical img:last-child {
     border-radius: 0;
     border-bottom-left-radius: 16px;
     border-bottom-right-radius: 16px;
     padding-top: 1px;
 }

 .text-gray {
     color: #757878;
 }

 .text-gray:hover {
     color: #ffffff;
 }

 @media (max-width: 1547px) {
     .Capabilities a.btn {
         min-height: 62px;
         display: flex;
         /* نخلي الزر flex */
         justify-content: center;
         /* محاذاة أفقية */
         align-items: center;
         /* محاذاة عامودية */
         text-align: center;
         /* لو النص سطرين */
     }
 }

 #dv_contacts {
     color: #fff;
     padding: 18px 0 26px;
     border-top: 1px solid rgba(255, 255, 255, .08);
 }

 #dv_contacts .cwrap {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 16px;
 }

 #dv_contacts .title {
     text-align: center;
     margin: 8px 0 16px;
 }

 #dv_contacts .title h2 {
     margin: 0 0 8px;
     font-weight: 900;
     font-size: clamp(28px, 5vw, 52px);
 }

 #dv_contacts .title .lead {
     margin: 0 auto;
     max-width: 80ch;
     color: #e7eaed;
     font-size: clamp(14px, 2.2vw, 20px);
 }

 #dv_contacts a {
     color: #fff;
     text-decoration: underline;
     text-underline-offset: 2px;
 }

 /* 3 cards desktop -> 1 mobile */
 #dv_contacts .contact-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 18px;
     margin: 26px 0 12px;
 }

 #dv_contacts .card {
     background: rgba(255, 255, 255, .06);
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 16px;
     padding: 22px 18px;
     text-align: center;
 }

 #dv_contacts .card h3 {
     margin: 0 0 8px;
     font-weight: 900;
     font-size: clamp(18px, 2.8vw, 24px);
 }

 #dv_contacts .card .value {
     margin: 4px 0 0;
     font-size: clamp(14px, 2.4vw, 18px);
 }

 /* Office block */
 #dv_contacts .office {
     text-align: center;
     margin: 18px 0 6px;
 }

 #dv_contacts .office h4 {
     margin: 0 0 6px;
     font-size: clamp(18px, 2.6vw, 22px);
 }

 #dv_contacts .office p {
     margin: 2px 0;
     color: #e7eaed;
 }

 /* AR/EN switching by dir (local only) */
 #dv_contacts .en {
     display: none;
 }

 html[dir="ltr"] #dv_contacts .en {
     display: inline;
 }

 html[dir="ltr"] #dv_contacts .ar {
     display: none;
 }

 @media (max-width:1024px) {
     #dv_contacts .contact-grid {
         gap: 14px;
     }
 }

 @media (max-width:780px) {
     #dv_contacts .contact-grid {
         grid-template-columns: 1fr;
     }
 }

 .ss-container {
     max-width: 1200px;
     margin: auto;
     padding: 40px 16px;
     text-align: left;
     direction: ltr;
 }

 .pre-why {
     background: #121212;
     color: var(--muted);
     border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
     padding: 16px 0;
 }

 .pre-why .why-title {
     margin: 0 0 10px;
     font-weight: 700;
     font-size: 16px;
     color: #e8eaed;
 }

 .pre-why .why-grid {
     display: grid;
     gap: 10px;
     list-style: none;
     padding: 0;
     margin: 0
 }

 @media (min-width:700px) {
     .pre-why .why-grid {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 .ok {
     width: 16px;
     height: 16px;
     fill: #66bb6a;
     margin-inline-end: 6px;
     vertical-align: -2px
 }

 .pre-why li {
     font-size: 14px;
     color: white;
     line-height: 1.5;
 }

 .wa {
     display: inline-block;
     background: transparent;
     color: green;
     border: 1px solid green;
     border-radius: 10px;
     padding: 8px 12px;
     text-decoration: none
 }

 .wa:hover {
     background: rgba(37, 211, 102, .08)
 }

 /* Variables for colors */
 #dv_footer {
     --line: rgba(255, 255, 255, 0.15);
     --muted: rgba(255, 255, 255, 0.6);
 }

 /* Accordion (light) + custom arrow */
 #dv_footer details.ss-accordion {
     border-bottom: 1px solid var(--line);
     padding: 8px 0;
 }

 #dv_footer details.ss-accordion>summary {
     cursor: pointer;
     list-style: none;
     font-weight: 600;
     position: relative;
     padding-inline-start: 22px;
     /* مساحة للسهم */
     padding-inline-end: 22px;
     color: #fff;
 }

 /* نخفي الماركر الافتراضي */
 #dv_footer details.ss-accordion>summary::-webkit-details-marker {
     display: none;
 }

 /* السهم الافتراضي */
 #dv_footer details.ss-accordion>summary::after {
     content: "";
     width: 9px;
     height: 9px;
     border-right: 2px solid var(--muted);
     border-bottom: 2px solid var(--muted);
     position: absolute;
     top: 50%;
     transform: translateY(-50%) rotate(-45deg);
     transition: transform 0.2s ease, border-color 0.2s ease;
 }

 /* السهم في اللغة العربية (على أقصى يسار) */
 body.lang-ar #dv_footer details.ss-accordion>summary::after {
     inset-inline-start: auto;
     inset-inline-end: 0;
     /* أقصى يسار */
     margin-left: 8px;
     /* مسافة بين السهم والنص */
     transform: rotate(140deg);
 }
 body.lang-ar #dv_footer details.ss-accordion[open]>summary::after
 {
    transform: translateY(-50%) rotate(45deg);
    border-color: #fff;
}

 /* السهم في اللغة الإنجليزية (على أقصى يمين) */
 body.lang-en #dv_footer details.ss-accordion>summary::after {
     inset-inline-start: 0;
     /* أقصى يسار النص */
     inset-inline-end: auto;
     margin-right: 8px;
     /* مسافة بين السهم والنص */
 }


 #dv_footer details.ss-accordion[open]>summary::after {
     transform: translateY(-50%) rotate(45deg);
     border-color: #fff;
 }

 /* Links list */
 #dv_footer .link-list {
     margin: 10px 0 0;
     padding: 0;
     list-style: none;
 }

 #dv_footer .link-list li {
     margin: 6px 0;
 }

 #dv_footer .link-list a {
     color: var(--muted);
     text-decoration: none;
     font-size: 14px;
 }

 #dv_footer .link-list a:hover {
     color: #fff;
 }

 /* Responsive grid if needed */
 #dv_footer .link-grid {
     display: grid;
     gap: 8px;
     grid-template-columns: 1fr;
 }

 @media (min-width: 600px) {
     #dv_footer .link-grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 .underlines .list-unstyled li {
     border-bottom: 1px solid var(--line);
     padding: 8px 0;
     margin: 0 !important;
 }

 li.nav-item a:hover {
     transition: all 0.2s ease-in-out !important;
     background-color: rgba(255, 255, 255, 0.1) !important;
 }

 nav a.btn.btn-default:hover {
     transition: all 0.2s ease-in-out !important;
     color: black !important;
     font-weight: bold !important;
 }