/* Start custom CSS for html, class: .elementor-element-d21629c *//* -------------------------------------------------------------
   HERO SECTION CONTAINER & BASE
   ------------------------------------------------------------- */
.df-hero-section-clean {
  background-color: #ffffff !important; /* क्लीन सफेद बैकग्राउंड */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  padding: 120px 40px !important;
  overflow: hidden !important;
}

/* -------------------------------------------------------------
   PURE SQUARE BOX PATTERN (केवल चौकोर बक्से वाला ग्रिड)
   ------------------------------------------------------------- */
.df-pure-grid-pattern {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-size: 45px 45px !important; /* 45px स्क्वायर बॉक्स साइज */
  background-image: 
    linear-gradient(to right, rgba(245, 176, 22, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 176, 22, 0.07) 1px, transparent 1px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------
   ZOOMING & FADING CIRCLES EFFECT (सर्कल्स बेस सेटिंग्स)
   ------------------------------------------------------------- */
.df-zoom-fade-circle {
  position: absolute !important;
  width: 6px !important;
  height: 6px !important;
  background-color: #f5b016 !important; /* Duck Folder Yellow */
  border-radius: 50% !important;
  z-index: 1 !important;
  animation: dfZoomAndFade 5s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  opacity: 0;
}

/* -------------------------------------------------------------
   40 CIRCLES RANDOM POSITIONS & DELAYS (45px ग्रिड के अनुसार बिल्कुल सटीक अलाइन)
   ------------------------------------------------------------- */
/* Left Side - (Text Column Area) */
.c-1  { top: 45px;  left: 90px;  animation-delay: 0.0s !important; }
.c-2  { top: 90px;  left: 315px; animation-delay: 1.5s !important; }
.c-3  { top: 135px; left: 135px; animation-delay: 3.2s !important; }
.c-4  { top: 180px; left: 495px; animation-delay: 0.8s !important; }
.c-5  { top: 225px; left: 270px; animation-delay: 2.1s !important; }
.c-6  { top: 270px; left: 90px;  animation-delay: 4.0s !important; }
.c-7  { top: 315px; left: 405px; animation-delay: 1.3s !important; }
.c-8  { top: 360px; left: 180px; animation-delay: 2.7s !important; }
.c-9  { top: 405px; left: 495px; animation-delay: 4.5s !important; }
.c-10 { top: 450px; left: 135px; animation-delay: 0.4s !important; }
.c-11 { top: 495px; left: 360px; animation-delay: 1.9s !important; }
.c-12 { top: 540px; left: 225px; animation-delay: 3.5s !important; }

/* Middle / Center Area - (Between Text and Form) */
.c-13 { top: 45px;  left: 630px; animation-delay: 2.4s !important; }
.c-14 { top: 135px; left: 540px; animation-delay: 0.2s !important; }
.c-15 { top: 225px; left: 675px; animation-delay: 4.1s !important; }
.c-16 { top: 315px; left: 585px; animation-delay: 1.7s !important; }
.c-17 { top: 405px; left: 720px; animation-delay: 3.0s !important; }
.c-18 { top: 495px; left: 540px; animation-delay: 0.9s !important; }
.c-19 { top: 585px; left: 630px; animation-delay: 2.6s !important; }

/* Right Side - (Form Column Area) */
.c-20 { top: 45px;  right: 180px; animation-delay: 1.1s !important; }
.c-21 { top: 90px;  right: 405px; animation-delay: 3.6s !important; }
.c-22 { top: 135px; right: 270px; animation-delay: 0.5s !important; }
.c-23 { top: 180px; right: 90px;  animation-delay: 2.2s !important; }
.c-24 { top: 225px; right: 495px; animation-delay: 4.7s !important; }
.c-25 { top: 270px; right: 225px; animation-delay: 1.4s !important; }
.c-26 { top: 315px; right: 360px; animation-delay: 3.1s !important; }
.c-27 { top: 360px; right: 90px;  animation-delay: 0.3s !important; }
.c-28 { top: 405px; right: 450px; animation-delay: 2.5s !important; }
.c-29 { top: 450px; right: 180px; animation-delay: 4.3s !important; }
.c-30 { top: 495px; right: 315px; animation-delay: 1.0s !important; }
.c-31 { top: 540px; right: 495px; animation-delay: 3.8s !important; }

/* Bottom Area / Extra Spread */
.c-32 { bottom: 45px;  left: 180px;  animation-delay: 0.7s !important; }
.c-33 { bottom: 90px;  left: 450px;  animation-delay: 2.3s !important; }
.c-34 { bottom: 135px; left: 315px;  animation-delay: 4.6s !important; }
.c-35 { bottom: 45px;  left: 765px;  animation-delay: 1.6s !important; }
.c-36 { bottom: 90px;  right: 225px;  animation-delay: 3.3s !important; }
.c-37 { bottom: 135px; right: 405px;  animation-delay: 0.1s !important; }
.c-38 { bottom: 45px;  right: 90px;   animation-delay: 2.0s !important; }
.c-39 { bottom: 180px; left: 90px;   animation-delay: 3.9s !important; }
.c-40 { bottom: 225px; right: 180px;  animation-delay: 1.2s !important; }

/* ज़ूम और फ़ेड का स्पेशल CSS एनीमेशन (सॉफ्ट लुक) */
@keyframes dfZoomAndFade {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  15% {
    opacity: 0.45; /* थोड़ा-थोड़ा धीमा चमकेगा ताकि टेक्स्ट पढ़ने में दिक्कत न हो */
    box-shadow: 0 0 6px rgba(245, 176, 22, 0.4);
  }
  55% {
    transform: scale(2.6); /* यहाँ बिंदु बड़ा (Zoom) होगा */
    opacity: 0.12;
  }
  100% {
    transform: scale(4.5); /* बहुत बड़ा होकर फ़ेड हो जाएगा */
    opacity: 0; /* गायब */
  }
}

/* -------------------------------------------------------------
   CONTENT LAYOUT
   ------------------------------------------------------------- */
.df-hero-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.12fr 0.88fr !important;
  gap: 60px !important;
  align-items: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2;
}

/* -------------------------------------------------------------
   LEFT SIDE CONTENT (Screenshot के समान)
   ------------------------------------------------------------- */
.df-hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: #4a5568 !important;
  font-weight: 500 !important;
  margin-bottom: 25px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

.df-hero-tag .tag-icon {
  color: #f5b016 !important;
  margin-right: 6px !important;
}

.df-hero-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 68px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  color: #1a1c20 !important;
  margin: 0 0 25px 0 !important;
  letter-spacing: -2px !important;
}

.df-highlight {
  position: relative !important;
  display: inline-block !important;
  z-index: 1 !important;
}

.df-highlight::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 8px !important;
  width: 100% !important;
  height: 12px !important;
  background-color: #f5b016 !important;
  z-index: -1 !important;
}

.df-hero-subtitle {
  font-family: -apple-system, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #4a5568 !important;
  max-width: 520px !important;
  margin: 0 0 40px 0 !important;
}

.df-hero-buttons {
  display: flex !important;
  gap: 15px !important;
  align-items: center !important;
}

.df-btn-primary {
  background-color: #f5b016 !important;
  color: #1a1c20 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 16px 32px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: 0 4px 14px rgba(245, 176, 22, 0.2) !important;
  transition: all 0.2s ease !important;
}

.df-btn-primary:hover {
  background-color: #1a1c20 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
}

.df-btn-secondary {
  background-color: transparent !important;
  color: #1a1c20 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 16px 32px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

.df-btn-secondary:hover {
  background-color: #ffffff !important;
  border-color: #1a1c20 !important;
}

/* -------------------------------------------------------------
   RIGHT SIDE FORM BOX
   ------------------------------------------------------------- */
.df-hero-form-container {
  display: flex !important;
  justify-content: center !important;
}

.df-lead-form-box {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  padding: 35px !important;
  border-radius: 20px !important;
  width: 100% !important;
  max-width: 440px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

.df-lead-form-box h3 {
  font-family: sans-serif !important;
  color: #1a1c20 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  margin: 0 0 10px 0 !important;
}

.df-lead-form-box p {
  color: #64748b !important;
  font-size: 14px !important;
  margin: 0 0 25px 0 !important;
}

.df-form-group {
  margin-bottom: 18px !important;
}

.df-form-group label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  margin-bottom: 6px !important;
}

.df-form-group input {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  background-color: #f8fafc !important;
  box-sizing: border-box !important;
  transition: all 0.2s !important;
}

.df-form-group input:focus {
  border-color: #f5b016 !important;
  background-color: #ffffff !important;
  outline: none !important;
}

.df-form-submit-btn {
  width: 100% !important;
  background-color: #1a1c20 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}

.df-form-submit-btn:hover {
  background-color: #f5b016 !important;
  color: #1a1c20 !important;
}

/* -------------------------------------------------------------
   ENTRANCE FADE ANIMATION
   ------------------------------------------------------------- */
.df-animate-fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: dfFadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.df-animate-fade-up.delay-1 {
  animation-delay: 0.2s;
}

@keyframes dfFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (मोबाइल रिस्पॉन्सिवनेस)
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .df-hero-title { font-size: 50px; }
  .df-hero-container { gap: 40px; }
}

@media (max-width: 768px) {
  .df-hero-section-clean { padding: 60px 20px !important; }
  .df-hero-container { grid-template-columns: 1fr !important; gap: 50px !important; }
  .df-hero-title { font-size: 40px !important; letter-spacing: -1px !important; }
  .df-hero-subtitle { font-size: 16px !important; }
  .df-hero-buttons { flex-direction: column !important; align-items: stretch !important; }
  .df-btn-primary, .df-btn-secondary { justify-content: center !important; width: 100% !important; }
  
  /* मोबाइल स्क्रीन छोटी होती है, इसलिए वहाँ 40 में से चुनिंदा सर्कल्स ही दिखेंगे ताकि डिज़ाइन साफ़ रहे */
  .df-zoom-fade-circle { animation-duration: 6s !important; }
  .c-2, .c-4, .c-6, .c-8, .c-10, .c-12, .c-14, .c-16, .c-18, .c-20, .c-22, .c-24, .c-26, .c-28, .c-30, .c-32, .c-34, .c-36, .c-38, .c-40 { 
    display: none !important; 
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-94f0883 *//* -------------------------------------------------------------
   INFINITE TEXT MARQUEE SECTION (Zero Margin & Full Width)
   ------------------------------------------------------------- */
.df-marquee-wrapper {
  background-color: #2d3139 !important; /* Screenshot जैसा डार्क ग्रे बैकग्राउंड */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  padding: 24px 0 !important; /* ऊपर-नीचे की पैडिंग */
  overflow: hidden !important; /* स्क्रीन से बाहर की चीज़ें छुपाने के लिए */
  display: flex !important;
}

/* मुख्य कंटेनर जो दोनों ग्रुप्स को एक लाइन में रखेगा */
.df-marquee-content {
  display: flex !important;
  overflow: hidden !important;
  user-select: none !important;
  gap: 0 !important;
  width: 100% !important;
}

/* टेक्स्ट ग्रुप का लेआउट */
.df-marquee-group {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  min-width: 100% !important;
  gap: 40px !important; /* शब्दों के बीच की दूरी */
  padding-right: 40px !important;
  
  /* एनीमेशन: 25 सेकंड में राइट से लेफ्ट जाएगा, लीनियर और इनफिनिटी */
  animation: dfScrollRightToLeft 25s linear infinite !important;
}

/* -------------------------------------------------------------
   HOVER EFFECT (माउस ले जाने पर रुकने वाला फीचर)
   ------------------------------------------------------------- */
.df-marquee-wrapper:hover .df-marquee-group {
  animation-play-state: paused !important; /* यह कोड एनीमेशन को वहीं रोक देगा */
  cursor: pointer !important;
}

/* टेक्स्ट स्टाइलिंग */
.df-marquee-group span {
  color: #ffffff !important; /* शुद्ध सफेद रंग का टेक्स्ट */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 32px !important; /* बड़ा और बोल्ड टेक्स्ट आकार */
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: -0.5px !important;
}

/* चमकते सितारे (✦ Star Icons) का स्टाइल */
.df-marquee-star {
  color: #f5b016 !important; /* Duck Folder लोगो वाला पीला/नारंगी रंग */
  font-size: 28px !important;
  display: inline-block !important;
  padding: 0 10px !important;
}

/* -------------------------------------------------------------
   RIGHT TO LEFT ANIMATION KEYFRAMES
   ------------------------------------------------------------- */
@keyframes dfScrollRightToLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (मोबाइल के लिए स्क्रीन साइजिंग)
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .df-marquee-wrapper {
    padding: 16px 0 !important; /* मोबाइल पर पट्टी थोड़ी पतली हो जाएगी */
  }
  
  .df-marquee-group span {
    font-size: 22px !important; /* मोबाइल स्क्रीन पर टेक्स्ट का आकार */
  }
  
  .df-marquee-star {
    font-size: 18px !important;
  }
  
  .df-marquee-group {
    gap: 25px !important;
    padding-right: 25px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f51a2bb *//* -------------------------------------------------------------
   SERVICES SECTION BASE (क्लीन सफेद बैकग्राउंड थीम)
   ------------------------------------------------------------- */
.df-services-section-light {
  background-color: #ffffff !important; /* शुद्ध सफेद मुख्य बैकग्राउंड */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  padding: 100px 24px !important;
}

.df-services-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* -------------------------------------------------------------
   HEADER STYLES (Our Services Text)
   ------------------------------------------------------------- */
.df-services-header {
  text-align: center !important;
  margin-bottom: 60px !important;
  max-width: 700px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.df-services-tag {
  display: inline-block !important;
  background-color: rgba(245, 176, 22, 0.1) !important; /* हल्का पीला पारदर्शी टैग */
  color: #f5b016 !important; /* लोगो का पीला रंग */
  padding: 6px 18px !important;
  border-radius: 20px !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(245, 176, 22, 0.2) !important;
}

.df-services-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #1a1c22 !important; /* आपके लोगो वाला डार्क ग्रे टेक्स्ट */
  margin: 0 0 16px 0 !important;
  letter-spacing: -1px !important;
}

.df-services-title .yellow-text {
  color: #f5b016 !important; /* पीला टेक्स्ट हाइलाइट */
}

.df-services-desc {
  font-family: -apple-system, sans-serif !important;
  color: #64748b !important; /* मखमली ग्रे शेड */
  font-size: 16px !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------
   SERVICES GRID LAYOUT (4 Columns Desktop)
   ------------------------------------------------------------- */
.df-services-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 30px !important;
  width: 100% !important;
}

/* -------------------------------------------------------------
   SERVICE CARD UNIFORM STYLE (सभी 8 बक्से एक जैसे लाइट ग्रे)
   ------------------------------------------------------------- */
.df-service-card {
  background-color: #f8fafc !important; /* कोमल ऑफ-व्हाइट कार्ड्स */
  border: 1px solid #edf2f7 !important;
  border-radius: 16px !important;
  padding: 35px 30px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}

/* सभी कार्ड्स का एक समान होवर इफेक्ट */
.df-service-card:hover {
  transform: translateY(-6px) !important;
  background-color: #ffffff !important; /* होवर होने पर शुद्ध सफ़ेद */
  border-color: rgba(245, 176, 22, 0.4) !important; /* पीला सॉफ्ट बॉर्डर */
  box-shadow: 0 15px 35px rgba(245, 176, 22, 0.08) !important; /* कोमल पीला ग्लो */
}

/* -------------------------------------------------------------
   LOGO BASED ICON BOX (सभी के लिए सामान पीला आइकॉन बॉक्स)
   ------------------------------------------------------------- */
.df-icon-box {
  width: 52px !important;
  height: 52px !important;
  background-color: #f5b016 !important; /* आपके लोगो का पीला रंग */
  color: #1a1c22 !important; /* डार्क ग्रे आइकॉन कलर */
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  margin-bottom: 26px !important;
  box-shadow: 0 6px 15px rgba(245, 176, 22, 0.15) !important;
}

/* -------------------------------------------------------------
   CARD TEXT & LINKS TYPOGRAPHY
   ------------------------------------------------------------- */
.df-service-card h3 {
  font-family: -apple-system, sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a1c22 !important; /* डार्क ग्रे टाइटल */
  margin: 0 0 14px 0 !important;
}

.df-service-card p {
  font-family: -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #64748b !important; /* कोमल ग्रे बॉडी टेक्स्ट */
  margin: 0 0 26px 0 !important;
  flex-grow: 1 !important; /* बटन्स को नीचे एक लाइन में रखने के लिए */
}

/* Learn More लिंक्स */
.df-learn-more {
  font-family: -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1c22 !important; /* डार्क लिंक */
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s !important;
  width: max-content !important;
}

.df-learn-more .arrow {
  transition: transform 0.2s ease !important;
}

.df-learn-more:hover {
  color: #f5b016 !important; /* होवर करने पर लोगो का पीला रंग */
}

.df-learn-more:hover .arrow {
  transform: translateX(5px) !important;
}

/* -------------------------------------------------------------
   MOBILE & TABLET OPTIMIZATION (मोबाइल रिस्पॉन्सिवनेस)
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .df-services-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* टैबलेट पर 2 कॉलम */
    gap: 24px !important;
  }
  .df-services-title {
    font-size: 34px !important;
  }
}

@media (max-width: 640px) {
  .df-services-section-light {
    padding: 60px 16px !important;
  }
  .df-services-grid {
    grid-template-columns: 1fr !important; /* मोबाइल पर 1 साफ़ कॉलम */
    gap: 20px !important;
  }
  .df-services-title {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
  }
  .df-service-card {
    padding: 30px 24px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4d8903f *//* -------------------------------------------------------------
   PROCESS SECTION BASE & DUAL GLOW BACKGROUND
   ------------------------------------------------------------- */
.df-process-section {
  /* Screenshot 2026-06-07 at 2.48.14 AM.jpg जैसा डार्क ग्रे बैकग्राउंड और लेफ्ट साइड में पीला ग्लो */
  background: radial-gradient(circle at 10% 40%, rgba(245, 176, 22, 0.12), transparent 45%),
              #1a1c22 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  padding: 100px 40px !important;
  overflow: hidden !important;
}

.df-process-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* -------------------------------------------------------------
   HEADER STYLES (Our Process Tag & Title)
   ------------------------------------------------------------- */
.df-process-header {
  margin-bottom: 60px !important;
  text-align: left !important;
}

.df-process-tag {
  display: inline-flex !important;
  align-items: center !important;
  background-color: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: #cccccc !important;
  font-weight: 500 !important;
  margin-bottom: 20px !important;
}

.df-process-tag .tag-dot {
  width: 6px !important;
  height: 6px !important;
  background-color: #f5b016 !important; /* Duck Folder Yellow */
  border-radius: 50% !important;
  margin-right: 8px !important;
  display: inline-block !important;
}

.df-process-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  margin: 0 !important;
  letter-spacing: -1px !important;
}

.df-process-title .yellow-text {
  color: #f5b016 !important;
}

/* -------------------------------------------------------------
   DESKTOP STEP LAYOUT (स्थिर 5 कॉलम ग्रिड)
   ------------------------------------------------------------- */
.df-process-slider-container {
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

.df-process-track {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important; /* डेस्कटॉप पर 5 बराबर कॉलम */
  gap: 30px !important;
  position: relative !important;
  width: 100% !important;
}

/* स्टेप्स को जोड़ने वाली बारीक लाइन (केवल डेस्कटॉप पर दिखेगी) */
.df-connecting-line {
  position: absolute !important;
  top: 35px !important; /* नंबर बॉक्स के बिल्कुल बीच में */
  left: 35px !important;
  right: 35px !important;
  height: 1px !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* -------------------------------------------------------------
   STEP CARD STYLES (01, 02, 03... बॉक्सेस और टेक्स्ट)
   ------------------------------------------------------------- */
.df-process-card {
  position: relative !important;
  z-index: 2 !important;
  text-align: left !important;
}

/* पीले रंग का चौकोर नंबर बॉक्स (Smooth Rounded Squares) */
.df-step-number {
  width: 70px !important;
  height: 70px !important;
  background-color: #f5b016 !important; /* लोगो का पीला रंग */
  color: #1a1c22 !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 20px !important; /* इमेज जैसा स्मूथ कर्व कोना */
  margin-bottom: 25px !important;
  box-shadow: 0 10px 20px rgba(245, 176, 22, 0.15) !important;
}

.df-step-title {
  font-family: -apple-system, sans-serif !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 12px 0 !important;
}

.df-step-desc {
  font-family: -apple-system, sans-serif !important;
  color: #94a3b8 !important; /* Faded सिल्वर टेक्स्ट */
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------
   MOBILE & TABLET OPTIMIZATION (एनिमेटेड राइट-टू-लेफ्ट स्लाइडर)
   ------------------------------------------------------------- */
@media (max-width: 992px) {
  
  .df-process-section {
    padding: 60px 20px !important;
  }
  
  .df-process-title {
    font-size: 34px !important;
  }

  /* कनेक्टिंग लाइन को मोबाइल पर छुपा देना */
  .df-connecting-line {
    display: none !important;
  }

  /* कंटेनर सेटिंग्स ताकि स्वाइप और स्लाइड स्मूथ हो सके */
  .df-process-slider-container {
    overflow-x: hidden !important; /* बाहर भागते हिस्से को छुपाने के लिए */
    width: 100% !important;
  }

  /* ट्रैक को मोबाइल पर फ्री-फ्लोइंग फ्लेक्स रो (Flex Row) में बदलना */
  .df-process-track {
    display: flex !important;
    grid-template-columns: none !important;
    width: max-content !important; /* सारे कार्ड्स एक लाइन में खिंच जाएंगे */
    gap: 40px !important;
    padding: 10px 0 !important;
    
    /* एनीमेशन: 18 सेकंड में दाएं से बाएं जाएगा, लगातार (Infinite) */
    animation: dfProcessScrollLeft 18s linear infinite !important;
  }

  /* मोबाइल पर हर कार्ड की चौड़ाई फिक्स करना */
  .df-process-card {
    width: 240px !important;
    flex-shrink: 0 !important;
  }

  /* -------------------------------------------------------------
     TOUCH & HOVER PAUSE EFFECT (उंगली रखने या माउस ले जाने पर रुकना)
     ------------------------------------------------------------- */
  .df-process-slider-container:hover .df-process-track,
  .df-process-slider-container:active .df-process-track {
    animation-play-state: paused !important; /* एनीमेशन को यहीं स्टॉप कर देगा */
    cursor: grab !important;
  }

  /* मोबाइल पर नंबर बॉक्स थोड़ा सा छोटा */
  .df-step-number {
    width: 60px !important;
    height: 60px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
    margin-bottom: 20px !important;
  }
}

/* -------------------------------------------------------------
   RIGHT TO LEFT MARQUEE ANIMATION KEYFRAMES
   ------------------------------------------------------------- */
@keyframes dfProcessScrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 5 कार्ड्स + गैप की पूरी चौड़ाई के अनुसार लेफ्ट शिफ्ट होना */
    transform: translateX(-55%); 
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9e0ce7c *//* -------------------------------------------------------------
   TESTIMONIAL SECTION BASE (क्लीन व्हाइट थीम)
   ------------------------------------------------------------- */
.df-review-section {
  background-color: #ffffff !important; /* शुद्ध सफेद बैकग्राउंड */
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  padding: 100px 0 !important; /* साइड पैडिंग 0 ताकि क्युसेल्स कोनों तक फैलें */
  overflow: hidden !important;
}

.df-review-wrapper {
  width: 100% !important;
}

/* -------------------------------------------------------------
   HEADER STYLES (Loved by founders)
   ------------------------------------------------------------- */
.df-review-header {
  text-align: center !important;
  margin-bottom: 50px !important;
  padding: 0 24px !important;
}

.df-review-tag {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: #4a5568 !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.df-review-tag .tag-dot {
  width: 6px !important;
  height: 6px !important;
  background-color: #f5b016 !important; /* Duck Folder पीला */
  border-radius: 50% !important;
  margin-right: 8px !important;
  display: inline-block !important;
}

.df-review-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  color: #1a1c22 !important; /* डार्क ग्रे/ब्लैक टेक्स्ट */
  margin: 0 !important;
  letter-spacing: -1.5px !important;
}

.df-review-title .yellow-text {
  color: #f5b016 !important;
}

/* -------------------------------------------------------------
   INFINITE MARQUEE ROW (दाएं से बाएं चलने वाला ट्रैक)
   ------------------------------------------------------------- */
.df-review-marquee {
  overflow: hidden !important;
  display: flex !important;
  width: 100% !important;
  position: relative !important;
}

.df-review-track {
  display: flex !important;
  width: max-content !important;
  gap: 30px !important;
  padding: 20px 0 !important;
  /* 30 सेकंड में पूरी एक रोटेशन राइट से लेफ्ट होगी */
  animation: dfReviewScrollLeft 30s linear infinite !important;
}

/* -------------------------------------------------------------
   HOVER & TOUCH PAUSE EFFECT (माउस लाने पर रुकने की सेटिंग)
   ------------------------------------------------------------- */
.df-review-marquee:hover .df-review-track,
.df-review-marquee:active .df-review-track {
  animation-play-state: paused !important; /* एनीमेशन स्टॉप हो जाएगा */
  cursor: pointer !important;
}

/* -------------------------------------------------------------
   REVIEW CARD STYLE (सफेद कोमल घुमावदार बक्से हल्के शैडो के साथ)
   ------------------------------------------------------------- */
.df-review-card {
  background-color: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 20px !important; /* इमेज की तरह कोमल कोने */
  padding: 35px !important;
  width: 400px !important; /* परफेक्ट चौड़ाई */
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  /* कोमल और प्यारी परछाई */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.3s, box-shadow 0.3s !important;
}

/* कार्ड होवर होने पर हल्का सा उठेगा */
.df-review-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 15px 40px rgba(245, 176, 22, 0.06) !important;
  border-color: rgba(245, 176, 22, 0.2) !important;
}

/* पीले रेटिंग सितारे */
.df-stars {
  color: #f5b016 !important; /* आपके लोगो का ब्राइट पीला */
  font-size: 16px !important;
  margin-bottom: 20px !important;
  letter-spacing: 2px !important;
}

/* मुख्य रिव्यू टेक्स्ट */
.df-review-text {
  font-family: -apple-system, sans-serif !important;
  color: #4a5568 !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  margin: 0 0 25px 0 !important;
  font-weight: 500 !important;
}

/* यूजर प्रोफाइल सेक्शन (निचला हिस्सा) */
.df-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* गोल प्रोफाइल आइकॉन (लोगो थीम बेस्ड) */
.df-avatar {
  width: 44px !important;
  height: 44px !important;
  background-color: #f5b016 !important; /* आपके लोगो का पीला बैकग्राउंड */
  color: #1a1c22 !important; /* डार्क इनर टेक्स्ट */
  font-family: -apple-system, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

.df-user-details {
  text-align: left !important;
}

.df-user-details h4 {
  font-family: -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1c22 !important;
  margin: 0 0 3px 0 !important;
}

.df-user-details p {
  font-family: -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: #718096 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------
   KEYFRAMES FOR INFINITE RIGHT-TO-LEFT SCROLL
   ------------------------------------------------------------- */
@keyframes dfReviewScrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    /* आधे ट्रैक (पहले 5 कार्ड्स) के पार होते ही बिना रुके रीसेट होना */
    transform: translateX(-50%); 
  }
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (मोबाइल के लिए सेटिंग्स)
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .df-review-section {
    padding: 60px 0 !important;
  }
  
  .df-review-title {
    font-size: 32px !important;
    letter-spacing: -0.5px !important;
  }
  
  .df-review-card {
    width: 320px !important; /* मोबाइल स्क्रीन के लिए कार्ड की चौड़ाई थोड़ी कम */
    padding: 24px !important;
  }
  
  .df-review-text {
    font-size: 14px !important;
  }
  
  .df-review-track {
    gap: 20px !important;
    /* मोबाइल पर स्वाइप को और बेहतर फील देने के लिए स्पीड को थोड़ा तेज़ किया */
    animation-duration: 22s !important; 
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-47a5e86 *//* -------------------------------------------------------------
   FAQ SECTION BASE (Clean White Theme)
   ------------------------------------------------------------- */
.df-faq-section {
  background-color: #ffffff !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
  padding: 100px 24px !important;
}

.df-faq-wrapper {
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

/* -------------------------------------------------------------
   FAQ HEADER STYLES (Questions, answered.)
   ------------------------------------------------------------- */
.df-faq-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}

.df-faq-tag {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 13px !important;
  color: #4a5568 !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
}

.df-faq-tag .tag-dot {
  width: 6px !important;
  height: 6px !important;
  background-color: #f5b016 !important; /* Duck Folder Yellow */
  border-radius: 50% !important;
  margin-right: 8px !important;
  display: inline-block !important;
}

.df-faq-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: #1a1c22 !important;
  margin: 0 !important;
  letter-spacing: -1.5px !important;
}

.df-faq-title .yellow-text {
  color: #f5b016 !important;
}

/* -------------------------------------------------------------
   2 COLUMN QNA GRID LAYOUT
   ------------------------------------------------------------- */
.df-faq-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* 2 कॉलम (बायाँ और दायाँ) */
  gap: 0 40px !important;
  align-items: start !important;
}

/* -------------------------------------------------------------
   ACCORDION CARD STYLE (Screenshot के समान गोल कोमल बक्से)
   ------------------------------------------------------------- */
.df-faq-item {
  background-color: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 24px !important; /* इमेज की तरह कोमल गोल कोणीय बक्से */
  margin-bottom: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.3s ease !important;
}

/* प्रश्न बार (Header Block) */
.df-faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 24px 30px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #1a1c22 !important;
  margin: 0 !important;
  transition: color 0.3s ease !important;
}

/* दाहिनी ओर का छोटा एरो आइकन */
.df-faq-arrow {
  font-size: 11px !important;
  color: #a0aec0 !important;
  transition: transform 0.3s ease !important;
}

/* उत्तर ब्लॉक (डिफ़ॉल्ट रूप से छुपा हुआ) */
.df-faq-answer {
  max-height: 0; /* JS द्वारा कंट्रोल होगा */
  overflow: hidden !important;
  transition: max-height 0.3s ease-in-out !important; /* स्मूथ स्लाइड ओपन एनीमेशन */
  padding: 0 30px !important;
}

.df-faq-answer p {
  font-family: -apple-system, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
  margin: 0 0 24px 0 !important;
}

/* -------------------------------------------------------------
   ACTIVE DROPDOWN STATES (जब जावास्क्रिप्ट क्लास जोड़ेगा)
   ------------------------------------------------------------- */
/* जब सवाल खुला हो तो उसका रंग और एरो बदल जाना */
.df-faq-item.is-open .df-faq-question {
  color: #f5b016 !important; /* खुला होने पर टाइटल का रंग पीला */
}

.df-faq-item.is-open .df-faq-arrow {
  transform: rotate(180deg) !important; /* एरो का ऊपर घूम जाना */
  color: #f5b016 !important;
}

/* होवर करने पर कोमल इफ़ेक्ट */
.df-faq-item:hover {
  border-color: rgba(245, 176, 22, 0.3) !important;
  box-shadow: 0 10px 20px rgba(245, 176, 22, 0.03) !important;
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (मोबाइल रिस्पॉन्सिव सेटिंग्स)
   ------------------------------------------------------------- */
@media (max-width: 992px) {
  .df-faq-grid {
    grid-template-columns: 1fr !important; /* मोबाइल पर दोनों कॉलम ऊपर-नीचे सिंगल लाइन में आ जाएंगे */
    gap: 0 !important;
  }
  
  .df-faq-title {
    font-size: 34px !important;
    letter-spacing: -0.5px !important;
  }
}

@media (max-width: 640px) {
  .df-faq-section {
    padding: 60px 16px !important;
  }
  
  .df-faq-item {
    border-radius: 18px !important;
  }

  .df-faq-question {
    padding: 20px 22px !important;
    font-size: 15.5px !important;
  }

  .df-faq-answer {
    padding: 0 22px !important;
  }
}/* End custom CSS */