.bg-darkToneInk {

     background-color: #121212 !important;
 }

 .bg-youngKnight {

     background-color: #232323 !important;
 }

 .text_center {
     text-align: center;
 }

 .services-section-1 {
     background-color: #121212;
 }

 .services-section-2 {
     background-color: #232323 !important;
 }

 .services {
     width: 90%;
     max-width: 1200px;
     margin: auto;
     padding: 80px 0;
 }

 .service-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 24px;
     margin-bottom: 120px;
 }

 .service-row.reverse {
     flex-direction: row-reverse;
 }

 .service-text {
     flex: 2;
 }

 .service-text h2 {
     font-size: 36px;
     margin-bottom: 25px;
 }

 .service-text p {
     color: #cfcfcf;
     line-height: 1.8;
     margin-bottom: 15px;
 }

 .service-img {
     flex: 1;
     width: 100%;
 }

 .service-img img {
     width: 100%;
     height: 380px;
     object-fit: cover;
     border-radius: 14px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
 }


 .section-title {
     font-size: 36px;
     text-align: center;
     margin-bottom: 40px;
 }

 .services-grid {
     display: grid;
     grid-template-columns: 1fr 2fr;
     gap: 40px;
 }

 .service-card {
     text-align: right;
 }

 .service-card img {
     width: 100%;
     height: 170px;
     object-fit: cover;
     border-radius: 12px;
     margin-bottom: 20px;
 }

 .service-card h3 {
     font-size: 20px;
     margin-bottom: 12px;
 }

 .service-card p {
     color: #d0d0d0;
     line-height: 1.7;
     font-size: 15px;
 }


 .ecommerce-steps-section {
     background: #121212;
     padding: 70px 20px;
     color: #fff;

 }

 /* inner container */

 .ecommerce-steps-wrapper {
     max-width: 1280px;
     margin: auto;
 }



 .ecommerce-steps-heading {
     text-align: center;
     font-size: 28px;
     margin-bottom: 50px;
 }



 .row-1 {
     display: grid;
     grid-template-columns: 2fr 1fr;
     column-gap: 24px;
     margin-bottom: 32px;
 }


 .row-2 {
     display: grid;
     grid-template-columns: 1fr 2fr;
     column-gap: 24px;
     margin-bottom: 32px;

 }


 .row-3 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 24px;
     margin-bottom: 32px;

 }

 .row-4 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     column-gap: 24px;
 }

 .row-5 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     column-gap: 24px;
 }

 .minimal-width {
     max-width: 1062px;

 }

 /* step card */

 .ecommerce-step-box {
     position: relative;
     padding: 25px 12px 42px 12px;
     border-radius: 12px;

     background: linear-gradient(180deg, #232323 0%, rgba(18, 18, 18, 0.76) 100%);

     min-height: 80px;

 }



 .features {
     padding: 60px 8%;
     background-color: #232323;
 }

 .feature-wrapper {
     max-width: 1280px;
     margin: auto;
 }

 .title {
     text-align: center;
     font-size: 28px;
     margin-bottom: 40px;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }

 .feature-row-1 {
     grid-template-columns: 1fr 2fr;
     margin-bottom: 32px;
 }

 .feature-card img {
     width: 100%;
     height: 219px;
     border-radius: 12px;
     object-fit: cover;
 }

 .feature-card p {
     margin-top: 20px;
     font-size: 16px;

 }


 /* Custom Section Styles */
 .hero-promo-wrapper {
     background-color: #232323;
     /* Matches the dark background */
     padding: 60px 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 400px;

 }

 .hero-flex-layout {
     display: flex;
     align-items: center;
     gap: 20px;
     max-width: 1200px;
     width: 100%;
 }

 /* Left Side: Image Styling */
 .hero-visual-frame {
     flex: 1;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .hero-visual-frame img {
     max-width: 100%;
     height: 380px;
     border-radius: 15px;

 }

 /* Right Side: Text Styling */
 .hero-text-frame {
     flex: 1;
     direction: rtl;
     /* Sets text direction to Right-to-Left */
 }

 .hero-text-frame p {
     color: #e0e0e0;
     font-size: 18px;
     font-weight: 400;
     margin: 0;
     text-align: justify;
 }


 /* Base container styling */
 .faq-section {
     background-color: #121212;
     color: #ffffff;
     /* Recommend adding an Arabic web font like 'Cairo' or 'Tajawal' */
     padding: 104px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .faq-title {
     font-size: 36px;
     margin-bottom: 40px;
     font-weight: 600;
 }

 .faq-container {
     width: 100%;
     max-width: 1280px;
     display: flex;
     flex-direction: column;
     gap: 32px;
     /* Space between each FAQ block */
 }

 /* Individual FAQ block */
 .faq-item {
     background-color: #242424;
     /* Lighter dark gray for the cards */
     border-radius: 8px;
     overflow: hidden;
     padding-bottom: 10px;
 }

 /* The clickable question button */
 .faq-question {
     width: 100%;
     background: none;
     border: none;
     color: #ffffff;
     padding: 20px;
     font-size: 16px;
     font-family: inherit;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     text-align: right;
 }

 .question-text {
     font-weight: bold;

 }

 /* The arrow icon */
 .faq-icon {}

 /* The hidden answer section */
 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease-out;
     background-color: #242424;
 }

 .answer-content {
     padding: 0 20px 10px 20px;
     color: #A4A4A4;
     /* Slightly dimmed text for the answer */
     line-height: 1.6;
     font-size: 0.95rem;
 }

 /* Active state classes applied via JS */
 .faq-item.active .faq-answer {
     /* Max height is handled dynamically by JS for smooth animation, 
       but you can set a large fixed value here if you prefer a CSS-only fallback */
 }

 .faq-item.faqactive .faq-icon img {
     transform: rotate(180deg);
     /* Flips the arrow upside down */
 }

 .news_letter_subscription {
     text-align: center;

 }

 .ads-photo-section {
     padding: 60px 8%;
 }


 .ads-photo-container {
     max-width: 1280px;

     margin: auto;
 }

 .ads-photo-title {
     text-align: center;
     color: #fff;
     font-size: 28px;
     margin-bottom: 50px;
 }

 .ads-photo-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 25px;
 }

 .ads-photo-card {
     position: relative;
     background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
     border-radius: 12px;
     padding: 25px 30px;
     color: #fff;
     border-right: 4px solid #FEE002;
     display: flex;
     gap: 16px;
 }

 .ads-card-content {
     flex: 1;
 }

 .ads-photo-card h3 {
     margin-bottom: 8px;
     font-size: 18px;
 }

 .ads-photo-card p {
     color: #bdbdbd;
     font-size: 14px;
     line-height: 1.7;
 }

 .ads-photo-icon {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #FEE00215;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .ads-success-section {

     background: #232323;
 }

 .ads-success-container {
     max-width: 1280px;
     margin: auto;
     padding: 60px 20px;
 }

 .ads-success-title {
     text-align: center;
     color: #E6E6E6;
     font-size: 36px;
     margin-bottom: 52px;
 }

 /* layout */

 .ads-success-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 30px;
 }

 /* left cards */

 .ads-success-cases {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 /* right content */

 .ads-success-content {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .ads-success-text {
     color: #d0d0d0;
     font-size: 15px;
     line-height: 1.8;
 }

 /* card */

 .ads-success-card {
     background: #0c0c0c;
     padding: 20px;
     border-radius: 10px;
 }

 .ads-success-card h4 {
     color: #fff;
     margin-bottom: 8px;
     font-size: 16px;
 }

 .ads-success-card p {
     color: #bdbdbd;
     font-size: 14px;
     line-height: 1.7;
 }


 .ad-phtotgrapy_text {
     max-width: 916px;
     margin: 32px 0px;
 }

 .extwdth-card-row-1 {
     grid-template-columns: 2fr 3fr;
 }

 .extwdth-card-row-2 {
     grid-template-columns: 3fr 2fr;
 }

 .extwdth-card-row-3 {
     grid-template-columns: 1fr 1fr;
 }

 .mb-30 {
     margin-bottom: 30px;
 }

 .mt-16 {
     margin-top: 16px;
 }



 .ecommerce-step-box>h4 {
     margin-bottom: 16px;
     font-size: 18px;
     font-weight: 600;
 }

 .ecommerce-step-box>p {

     font-size: 16px;
     font-weight: 400;
 }

 .feature-card>h4 {

     font-size: 24px;
     font-weight: 600;
 }

 /* responsive */

 @media(max-width:1024px) {


     .services-grid {
         grid-template-columns: 1fr 1fr;
     }

     .row-1 {
         grid-template-columns: 1fr 1fr;

     }

     .row-2 {
         grid-template-columns: 1fr 1fr;

     }

     .features-grid {
         grid-template-columns: 1fr 1fr;
     }

     .feature-row-1 {
         grid-template-columns: 1fr 1fr;
     }

     .news_letter_subscription {
         text-align: center;

     }

     .input-group {

         justify-content: center;
     }

     .service-text {
         flex: 1;
     }
 }

 @media(max-width:768px) {

     .service-row {
         flex-direction: column-reverse !important;
     }



     .services-grid {
         grid-template-columns: 1fr;
     }

     .row-1,
     .row-2,
     .row-3,
     .row-4 {
         grid-template-columns: 1fr;

     }



     .features-grid {
         grid-template-columns: 1fr;
     }

     .feature-row-1 {
         grid-template-columns: 1fr;
     }

     .hero-flex-layout {
         flex-direction: column-reverse;
     }

     .news_letter_subscription {
         text-align: center;

     }

     .ads-photo-grid {
         grid-template-columns: 1fr;
     }

     .ads-success-layout {
         grid-template-columns: 1fr;
     }
 }