.elementor-176 .elementor-element.elementor-element-2efc28c{--display:flex;}.elementor-176 .elementor-element.elementor-element-87c1dae{--display:flex;}.elementor-176 .elementor-element.elementor-element-88957fb{--display:flex;}.elementor-176 .elementor-element.elementor-element-091bea2{--display:flex;}.elementor-176 .elementor-element.elementor-element-3b1781f{--display:flex;}.elementor-176 .elementor-element.elementor-element-f3ef29a{--display:flex;}.elementor-176 .elementor-element.elementor-element-e6b7193{--display:flex;}@media(min-width:768px){.elementor-176 .elementor-element.elementor-element-87c1dae{--content-width:1600px;}.elementor-176 .elementor-element.elementor-element-e6b7193{--content-width:1600px;}}/* Start custom CSS for html, class: .elementor-element-f71bcf2 *//* -------------------------------------------------------------
   HERO ABOUT SECTION BASE LAYOUT
   ------------------------------------------------------------- */
.df-hero-about-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 40px !important;
  overflow: hidden !important;
}

.df-hero-about-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important; 
  gap: 50px !important;
  align-items: center !important;
  width: 100% !important;
}

/* -------------------------------------------------------------
   LEFT SIDE TYPOGRAPHY & BUTTON STYLES
   ------------------------------------------------------------- */
.df-hero-about-content {
  text-align: left !important;
}

.df-hero-mini-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #4a5568 !important;
  margin-bottom: 24px !important;
}

.df-hero-mini-badge .mini-badge-icon {
  color: #f5b016 !important; 
  font-size: 12px !important;
}

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

.df-hero-main-title .yellow-highlight {
  color: #f5b016 !important; 
}

.df-hero-description {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16.5px !important;
  line-height: 1.6 !important;
  color: #4a5568 !important;
  margin: 0 0 35px 0 !important;
}

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

.df-btn-primary {
  background-color: #f5b016 !important;
  color: #1a1c22 !important;
  text-decoration: none !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 30px !important; 
  transition: all 0.25s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

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

.df-btn-primary .btn-arrow {
  transition: transform 0.2s ease !important;
}

.df-btn-primary:hover .btn-arrow {
  transform: translateX(4px) !important;
}

.df-btn-secondary {
  background-color: #ffffff !important;
  color: #1a1c22 !important;
  border: 1px solid #e2e8f0 !important;
  text-decoration: none !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 30px !important;
  transition: all 0.25s ease !important;
  display: inline-block !important;
}

.df-btn-secondary:hover {
  border-color: #1a1c22 !important;
  background-color: #f8fafc !important;
  transform: translateY(-2px) !important;
}

/* -------------------------------------------------------------
   RIGHT SIDE VISUAL AREA WITH FLOATING TAGS
   ------------------------------------------------------------- */
.df-hero-about-visual {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  width: 100% !important;
}

/* इमेज का बाहरी फ्रेम (प्रीमियम सॉफ्ट येलो शैडो ग्लो) */
.df-visual-card-wrapper {
  position: relative !important;
  background: linear-gradient(135deg, rgba(245, 176, 22, 0.05), rgba(255, 255, 255, 1)) !important;
  border-radius: 32px !important;
  padding: 30px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 440px !important;
  box-shadow: 0 30px 60px rgba(245, 176, 22, 0.04), 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(245, 176, 22, 0.1) !important;
}

/* मुख्य लोगो/ग्राफिक इमेज सेटिंग्स */
.df-hero-main-graphic {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 24px !important;
}

/* फ्लोटिंग टैग्स बेस सेटिंग्स */
.df-floating-tag {
  position: absolute !important;
  background-color: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  padding: 10px 20px !important;
  border-radius: 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1a1c22 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important;
  white-space: nowrap !important;
  z-index: 10 !important;
}

.tag-yellow-dot {
  width: 7px !important;
  height: 7px !important;
  background-color: #f5b016 !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

/* टैग्स की पोजीशन सेटिंग्स (Screenshot के समान) */
.tag-top-left {
  top: 25px !important;
  left: -25px !important;
}

.tag-bottom-left {
  bottom: 60px !important;
  left: -40px !important;
}

.tag-top-right {
  top: 38% !important;
  right: -45px !important;
}

.tag-bottom-right {
  bottom: 25px !important;
  right: -15px !important;
}

/* -------------------------------------------------------------
   PREMIUM SMOOTH FLOATING ANIMATIONS (लगातार तैरने वाला एनीमेशन)
   ------------------------------------------------------------- */
/* प्रत्येक टैग अलग-अलग टाइमिंग पर तैरता है ताकि नेचुरल लुक आए */
.df-anime-float-1 { animation: dfFloatEffectY 3.5s ease-in-out infinite !important; }
.df-anime-float-2 { animation: dfFloatEffectY 4.0s ease-in-out infinite 0.5s !important; }
.df-anime-float-3 { animation: dfFloatEffectY 3.8s ease-in-out infinite 0.2s !important; }
.df-anime-float-4 { animation: dfFloatEffectY 4.2s ease-in-out infinite 0.7s !important; }

@keyframes dfFloatEffectY {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); } /* कोमलता से 8 पिक्सेल ऊपर जाना */
  100% { transform: translateY(0px); }
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (100% रिस्पॉन्सिव इंजन)
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .df-hero-main-title {
    font-size: 42px !important;
  }
}

@media (max-width: 768px) {
  .df-hero-about-section {
    padding: 60px 16px !important;
  }
  
  .df-hero-about-container {
    grid-template-columns: 1fr !important;
    gap: 50px !important;
  }
  
  .df-hero-about-content {
    text-align: center !important;
  }
  
  .df-hero-mini-badge {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .df-hero-main-title {
    font-size: 34px !important;
    letter-spacing: -1px !important;
  }
  
  .df-hero-actions {
    justify-content: center !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  
  .df-btn-primary, .df-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
  
  /* मोबाइल पर एनीमेशन की रेंज थोड़ी कम की गई है ताकि स्क्रीन हिले नहीं */
  .df-visual-card-wrapper {
    padding: 20px !important;
    max-width: 320px !important;
    margin-top: 20px !important;
  }

  .df-floating-tag {
    padding: 7px 14px !important;
    font-size: 12px !important;
  }
  
  .tag-top-left { left: -10px !important; top: 15px !important; }
  .tag-bottom-left { left: -15px !important; bottom: 50px !important; }
  .tag-top-right { right: -20px !important; top: 38% !important; }
  .tag-bottom-right { right: -5px !important; bottom: 20px !important; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e1334b6 *//* -------------------------------------------------------------
   ABOUT/STORY SECTION BASE LAYOUT
   ------------------------------------------------------------- */
.df-story-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 40px !important;
  overflow: hidden !important;
}

.df-story-container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important; /* परफेक्ट 50/50 स्प्लिट लेआउट */
  gap: 60px !important;
  align-items: center !important;
  width: 100% !important;
}

/* -------------------------------------------------------------
   LEFT SIDE VISUAL LAYOUT (कर्व्ड इमेज और फ्लोटिंग बैज)
   ------------------------------------------------------------- */
.df-story-visual-side {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.df-story-img-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 460px !important;
}

/* मुख्य इमेज स्टाइलिंग */
.df-story-main-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 24px !important; /* कोमल घुमावदार कोने */
  box-shadow: 0 30px 70px rgba(245, 176, 22, 0.08), 0 10px 30px rgba(0, 0, 0, 0.03) !important; /* वॉर्म बैकग्राउंड ग्लो */
}

/* इमेज के ऊपर का 'Trusted' फ्लोटिंग बैज (Screenshot के समान नीचे राइट-सेंटर) */
.df-story-floating-badge {
  position: absolute !important;
  bottom: -20px !important;
  right: 30px !important;
  background: linear-gradient(135deg, #ffffff, #fffcf4) !important;
  border: 1px solid rgba(245, 176, 22, 0.2) !important;
  border-radius: 16px !important;
  padding: 12px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 15px 35px rgba(245, 176, 22, 0.12) !important;
  z-index: 5 !important;
  transition: transform 0.3s ease !important;
}

.df-story-floating-badge:hover {
  transform: translateY(-4px) !important;
}

.df-badge-icon-box {
  color: #f5b016 !important; /* आपके ब्रांड का पीला रंग */
  font-size: 20px !important;
}

.df-badge-text-box {
  display: flex !important;
  flex-direction: column !important;
  text-align: left !important;
}

.df-badge-title {
  color: #1a1c22 !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

.df-badge-subtitle {
  color: #718096 !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------
   RIGHT SIDE CONTENT & VERTICAL TIMELINE STYLES
   ------------------------------------------------------------- */
.df-story-text-side {
  text-align: left !important;
  box-sizing: border-box !important;
}

/* छोटा 'Our Story' बैज */
.df-story-mini-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !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;
  font-weight: 700 !important;
  color: #4a5568 !important;
  margin-bottom: 20px !important;
}

.df-story-mini-tag .tag-icon {
  color: #f5b016 !important;
}

/* मुख्य हेडिंग */
.df-story-main-heading {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: #1a1c22 !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -1.5px !important;
}

.df-story-main-heading .yellow-text {
  color: #f5b016 !important;
}

/* विवरण टेक्स्ट */
.df-story-description {
  font-family: -apple-system, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #4a5568 !important;
  margin: 0 0 35px 0 !important;
}

/* -------------------------------------------------------------
   TIMELINE ENGINE (वर्टिकल ट्रैक्स और बिंदु)
   ------------------------------------------------------------- */
.df-story-timeline {
  position: relative !important;
  padding-left: 30px !important; /* टाइमलाइन लाइन के लिए स्पेस */
}

/* वर्टिकल कनेक्टिंग लाइन ट्रैक */
.df-timeline-line {
  position: absolute !important;
  top: 10px !important;
  bottom: 10px !important;
  left: 5px !important;
  width: 2px !important;
  background: linear-gradient(to bottom, #f5b016, #edf2f7 85%) !important; /* ऊपरी हिस्सा पीला नीचे फेड */
}

/* सिंगल टाइमलाइन आइटम रो */
.df-timeline-item {
  position: relative !important;
  margin-bottom: 24px !important;
  display: flex !important;
  align-items: flex-start !important;
}

.df-timeline-item:last-child {
  margin-bottom: 0 !important;
}

/* टाइमलाइन के गोल पीले बिंदु */
.df-timeline-dot {
  position: absolute !important;
  left: -30px !important;
  top: 4px !important;
  width: 12px !important;
  height: 12px !important;
  background-color: #f5b016 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  z-index: 2 !important;
}

/* अंतिम आइटम के लिए कस्टम इन्फिनिटी/बल्ब या इमोजी आइकन */
.df-timeline-item:last-child .df-timeline-dot {
  background-color: #ffffff !important;
  width: 18px !important;
  height: 18px !important;
  left: -33px !important;
  top: 1px !important;
}

/* टाइमलाइन का टेक्स्ट ग्रुप */
.df-timeline-content {
  text-align: left !important;
}

.df-timeline-content h4 {
  font-family: -apple-system, sans-serif !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #1a1c22 !important;
  margin: 0 0 4px 0 !important;
}

.df-timeline-content h4 .yellow-text {
  color: #f5b016 !important;
}

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

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (100% रिस्पॉन्सिवनेस)
   ------------------------------------------------------------- */
@media (max-width: 992px) {
  .df-story-container {
    grid-template-columns: 1fr !important; /* मोबाइल पर दोनों हिस्से ऊपर-नीचे आ जाएंगे */
    gap: 50px !important;
  }
  
  .df-story-visual-side {
    order: 2 !important; /* मोबाइल पर इमेज नीचे और टेक्स्ट ऊपर दिखेगा (बेहतर यूआई) */
  }
  
  .df-story-text-side {
    order: 1 !important;
    text-align: center !important; /* मोबाइल पर टेक्स्ट को सेंटर लुक दिया गया */
  }
  
  .df-story-mini-tag {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .df-story-main-heading {
    font-size: 36px !important;
  }
  
  .df-story-timeline {
    max-width: 400px !important;
    margin: 0 auto !important; /* टाइमलाइन मोबाइल पर बीच में संरेखित रहेगी */
  }
}

@media (max-width: 480px) {
  .df-story-section {
    padding: 60px 16px !important;
  }
  .df-story-main-img {
    border-radius: 18px !important;
  }
  .df-story-floating-badge {
    right: 15px !important;
    padding: 10px 14px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-317fc99 *//* -------------------------------------------------------------
   MISSION & VISION CONTAINER BASE
   ------------------------------------------------------------- */
.df-mv-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;
  overflow: hidden !important;
}

/* बैकग्राउंड पर प्रीमियम लाइट वॉर्म ग्लो */
.df-mv-bg-glow {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(245, 176, 22, 0.04) 0%, transparent 70%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.df-mv-wrapper {
  max-width: 1140px !important;
  margin: 0 auto !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

/* -------------------------------------------------------------
   TOP HEADER TYPOGRAPHY
   ------------------------------------------------------------- */
.df-mv-header {
  text-align: center !important;
  margin-bottom: 70px !important;
}

/* छोटा व्हाट ड्राइव्स अस बैज */
.df-mv-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #4a5568 !important;
  margin-bottom: 16px !important;
  text-transform: none !important;
}

.df-mv-badge .badge-star-icon {
  color: #f5b016 !important;
  font-size: 11px !important;
}

/* मुख्य हेडिंग */
.df-mv-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-mv-title .yellow-text {
  color: #f5b016 !important; /* आपके लोगो का पीला */
}

/* -------------------------------------------------------------
   INTERACTIVE CARDS GRID LAYOUT (डेस्कटॉप स्प्लिट)
   ------------------------------------------------------------- */
.df-mv-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* परफेक्ट 2 कॉलम */
  gap: 40px !important;
  width: 100% !important;
}

/* सिंगल कार्ड प्रीमियम स्टाइल */
.df-mv-card {
  background-color: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 24px !important; /* कोमल कर्व कोना */
  padding: 50px 40px 45px 40px !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* होवर करने पर कार्ड का ऊपर उठना और पीला ग्लो आना */
.df-mv-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(245, 176, 22, 0.06), 0 1px 3px rgba(0, 0, 0, 0.01) !important;
  border-color: rgba(245, 176, 22, 0.15) !important;
}

/* कार्ड के ऊपर का आइकॉन बॉक्स */
.df-card-icon-box {
  position: absolute !important;
  top: -24px !important; /* कार्ड की ऊपरी लाइन पर आधा बाहर */
  left: 40px !important;
  width: 48px !important;
  height: 48px !important;
  background-color: #f5b016 !important; /* ब्रांड पीला */
  color: #1a1c22 !important; /* डार्क आइकॉन */
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  box-shadow: 0 8px 20px rgba(245, 176, 22, 0.25) !important;
  transition: transform 0.4s ease !important;
}

/* होवर करने पर आइकॉन का हल्का सा घूमना */
.df-mv-card:hover .df-card-icon-box {
  transform: scale(1.05) rotate(15deg) !important;
}

/* छोटा लेबल (MISSION / VISION) */
.df-card-meta {
  font-family: -apple-system, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #a0aec0 !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 12px !important;
  margin-top: 5px !important;
}

/* कार्ड के अंदर की हेडिंग */
.df-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #1a1c22 !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.3 !important;
}

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

/* कार्ड का मुख्य पैराग्राफ विवरण */
.df-card-desc {
  font-family: -apple-system, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #4a5568 !important; /* हाई विजिबिलिटी ग्रे */
  margin: 0 !important;
}

/* होवर करने पर नीचे की तरफ एक सुंदर पतली पीली लाइन आना */
.df-card-hover-border {
  position: absolute !important;
  bottom: 0 !important;
  left: 40px !important;
  right: 40px !important;
  height: 3px !important;
  background-color: #f5b016 !important;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  transform: scaleX(0) !important;
  transition: transform 0.3s ease !important;
}

.df-mv-card:hover .df-card-hover-border {
  transform: scaleX(1) !important;
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (100% रिस्पॉन्सिव इंजन)
   ------------------------------------------------------------- */
@media (max-width: 992px) {
  .df-mv-grid {
    grid-template-columns: 1fr !important; /* टैबलेट और मोबाइल पर सिंगल कॉलम */
    gap: 50px !important; /* आइकॉन ओवरलैप न हो इसलिए स्पेस बढ़ाया */
  }
  
  .df-mv-section {
    padding: 70px 16px !important;
  }
  
  .df-mv-title {
    font-size: 36px !important;
  }
  
  .df-mv-header {
    margin-bottom: 60px !important;
  }
}

@media (max-width: 480px) {
  .df-mv-card {
    padding: 45px 24px 35px 24px !important; /* मोबाइल स्क्रीन पर कॉम्पैक्ट पैडिंग */
  }
  
  .df-card-icon-box {
    left: 24px !important; /* आइकॉन को मोबाइल पैडिंग के अलाइन किया */
  }
  
  .df-card-hover-border {
    left: 24px !important;
    right: 24px !important;
  }
  
  .df-card-title {
    font-size: 22px !important;
  }
  
  .df-card-desc {
    font-size: 14.5px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3402aef *//* -------------------------------------------------------------
   MAIN CONTAINER STYLES (साफ़ सफ़ेद बैकग्राउंड)
   ------------------------------------------------------------- */
.df-why-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;
  overflow: hidden !important;
}

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

/* हेडर एरिया */
.df-why-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}

.df-why-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !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;
  font-weight: 700 !important;
  color: #4a5568 !important;
  margin-bottom: 16px !important;
}

.df-why-badge .badge-icon {
  color: #f5b016 !important;
  font-size: 11px !important;
}

.df-why-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-why-title .yellow-text {
  color: #f5b016 !important; /* आपके लोगो का पीला */
}

/* -------------------------------------------------------------
   6 FEATURES GRID LAYOUT (3 कॉलम ग्रिड)
   ------------------------------------------------------------- */
.df-why-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* डेस्कटॉप पर 3 कॉलम */
  gap: 30px !important;
  width: 100% !important;
}

/* सिंगल कार्ड का प्रीमियम क्लीन डिज़ाइन */
.df-why-card {
  background-color: #ffffff !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 24px !important; /* कोमल घुमावदार कोने */
  padding: 40px 35px !important;
  text-align: left !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.01) !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* होवर करने पर कार्ड का इंटरएक्टिव इफ़ेक्ट */
.df-why-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.03) !important;
  border-color: #e2e8f0 !important;
}

/* इमेज की तरह तीसरे नंबर के कार्ड (Affordable Pricing) पर हल्का पीला ग्लो */
.df-why-card.card-highlighted {
  box-shadow: 0 15px 40px rgba(245, 176, 22, 0.04) !important;
  border-color: rgba(245, 176, 22, 0.1) !important;
}

/* -------------------------------------------------------------
   ICON BOX STYLES & INTERACTIVE HOVER ANIMATIONS
   ------------------------------------------------------------- */
.df-why-icon-box {
  width: 44px !important;
  height: 44px !important;
  background-color: #f5b016 !important; /* सॉलिड येलो बैकग्राउंड */
  color: #1a1c22 !important; /* डार्क आइकॉन */
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  margin-bottom: 24px !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* 1. बल्ब आइकॉन एनीमेशन (Creative Solutions) */
.df-why-card:hover .anime-lightbulb i {
  animation: dfGlowPulse 1.2s infinite ease-in-out !important;
}
@keyframes dfGlowPulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; color: #ffffff; }
  100% { transform: scale(1); opacity: 1; }
}

/* 2. शील्ड आइकॉन एनीमेशन (Transparent Process) */
.df-why-card:hover .anime-shield i {
  animation: dfShieldFlip 0.6s ease-in-out !important;
}
@keyframes dfShieldFlip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* 3. वॉलेट आइकॉन एनीमेशन (Affordable Pricing) */
.df-why-card:hover .anime-wallet i {
  animation: dfWalletNod 0.5s ease-in-out infinite alternate !important;
}
@keyframes dfWalletNod {
  0% { transform: translateY(0) rotate(-5deg); }
  100% { transform: translateY(-3px) rotate(5deg); }
}

/* 4. हेडसेट आइकॉन एनी-मेशन (Dedicated Support) */
.df-why-card:hover .anime-headset i {
  animation: dfHeadsetWobble 0.6s ease-in-out infinite alternate !important;
}
@keyframes dfHeadsetWobble {
  0% { transform: translateX(-2px); }
  100% { transform: translateX(2px); }
}

/* 5. चार्ट आइकॉन एनीमेशन (Result Driven) */
.df-why-card:hover .anime-chart i {
  animation: dfChartUp 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
@keyframes dfChartUp {
  0% { transform: scale(0.9) translateY(2px); }
  100% { transform: scale(1.15) translateY(-2px); }
}

/* 6. बिजली/बोल्ट आइकॉन एनीमेशन (Latest Marketing Trends) */
.df-why-card:hover .anime-bolt i {
  animation: dfBoltFlash 0.4s ease-in-out 2 !important;
}
@keyframes dfBoltFlash {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2) skewX(-10deg); color: #ffffff; }
}

/* -------------------------------------------------------------
   CARD TYPOGRAPHY
   ------------------------------------------------------------- */
.df-why-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #1a1c22 !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.3px !important;
}

.df-why-card-desc {
  font-family: -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #4a5568 !important; /* गहरा साफ दिखने वाला ग्रे */
  margin: 0 !important;
}

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

@media (max-width: 680px) {
  .df-why-section {
    padding: 60px 16px !important;
  }
  
  .df-why-grid {
    grid-template-columns: 1fr !important; /* मोबाइल फोन पर 1 बिल्कुल सीधा क्लीन कॉलम */
    gap: 20px !important;
  }
  
  .df-why-card {
    padding: 35px 25px !important;
  }
  
  .df-why-title {
    font-size: 30px !important;
    letter-spacing: -0.5px !important;
  }
  
  .df-why-card-title {
    font-size: 19px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6227b11 *//* -------------------------------------------------------------
   MAIN SECTION CONTAINERS
   ------------------------------------------------------------- */
.df-values-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;
  overflow: hidden !important;
}

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

/* हेडर एरिया */
.df-values-header {
  text-align: center !important;
  margin-bottom: 60px !important;
}

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

.df-values-badge .badge-icon {
  color: #f5b016 !important;
  font-size: 11px !important;
}

.df-values-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-values-title .yellow-text {
  color: #f5b016 !important; /* आपके लोगो का पीला रंग */
}

/* -------------------------------------------------------------
   4 COLUMN PREMIUM DARK CARDS GRID
   ------------------------------------------------------------- */
.df-values-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* डेस्कटॉप पर एक लाइन में 4 कॉलम */
  gap: 25px !important;
  width: 100% !important;
}

/* सिंगल डार्क ग्रेडिएंट कार्ड डिज़ाइन (Screenshot के अनुसार) */
.df-values-card {
  /* प्रीमियम स्मूथ डार्क से लाइट वॉर्म चारकोल ग्रेडिएंट */
  background: linear-gradient(135deg, #1e2026 0%, #252830 50%, #2b2e38 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  border-radius: 24px !important; /* स्मूथ कर्व कोने */
  padding: 45px 30px !important;
  text-align: left !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* होवर करने पर कार्ड का ऊपर उठना और पीछे वॉर्म ग्लो शैडो आना */
.df-values-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(245, 176, 22, 0.08), 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(245, 176, 22, 0.2) !important;
}

/* कार्ड के अंदर का पीला आइकॉन बॉक्स */
.df-value-icon-box {
  width: 44px !important;
  height: 44px !important;
  background-color: #f5b016 !important; /* सॉलिड येलो */
  color: #1a1c22 !important; /* डार्क आइकॉन */
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  margin-bottom: 24px !important;
  transition: transform 0.3s ease !important;
}

/* होवर करने पर आइकॉन का हल्का सा स्केलिंग एनीमेशन */
.df-values-card:hover .df-value-icon-box {
  transform: scale(1.1) !important;
}

/* -------------------------------------------------------------
   CARD TYPOGRAPHY (उच्च स्पष्टता विज़िबिलिटी)
   ------------------------------------------------------------- */
.df-value-card-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #ffffff !important; /* डार्क बैकग्राउंड पर शुद्ध सफ़ेद टेक्स्ट */
  margin: 0 0 10px 0 !important;
  letter-spacing: -0.3px !important;
}

.df-value-card-desc {
  font-family: -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #a0aec0 !important; /* हल्का मखमली सिल्वर ग्रे ताकि पढ़ने में आसानी हो */
  margin: 0 !important;
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (100% रिस्पॉन्सिव इंजन)
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .df-values-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* टैबलेट स्क्रीन पर 2x2 ग्रिड */
    gap: 25px !important;
  }
  .df-values-title {
    font-size: 38px !important;
  }
}

@media (max-width: 640px) {
  .df-values-section {
    padding: 60px 16px !important;
  }
  
  .df-values-grid {
    grid-template-columns: 1fr !important; /* मोबाइल फोन पर 1 बिलकुल सीधा क्लीन कॉलम */
    gap: 20px !important;
  }
  
  .df-values-card {
    padding: 40px 25px !important;
  }
  
  .df-values-title {
    font-size: 28px !important;
    letter-spacing: -0.5px !important;
  }
  
  .df-value-card-title {
    font-size: 20px !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fb48381 *//* -------------------------------------------------------------
   CAROUSEL BASE SECTION STYLES
   ------------------------------------------------------------- */
.df-carousel-section-v2 {
  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: 90px 0 120px 0 !important; /* नीचे पैडिंग बढ़ाई गई है ताकि नीचे वाले कार्ड्स न कटें */
  overflow: hidden !important;
}

.df-carousel-wrapper-v2 {
  width: 100% !important;
  margin: 0 auto !important;
}

/* -------------------------------------------------------------
   LAPTOP VIEW: LEFT ALIGNED & BIGGER TYPOGRAPHY
   ------------------------------------------------------------- */
.df-carousel-header-v2 {
  max-width: 1200px !important;
  margin: 0 auto 65px auto !important;
  padding: 0 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important; /* बेसलाइन अलाइनमेंट */
  flex-wrap: wrap !important;
  gap: 24px !important;
  text-align: left !important; /* लैपटॉप पर पूरी तरह लेफ्ट अलाइन */
}

.df-brand-heading-v2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 46px !important; /* फॉन्ट साइज को पहले से और बड़ा किया गया */
  font-weight: 800 !important;
  margin: 0 !important;
  letter-spacing: -2px !important;
  line-height: 1.15 !important;
  flex: 1 !important;
  min-width: 400px !important;
}

.df-brand-heading-v2 .text-black {
  color: #1a1c22 !important;
}

.df-brand-heading-v2 .text-yellow {
  color: #f5b016 !important;
}

.df-business-count-v2 {
  font-family: -apple-system, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #4a5568 !important;
  padding-bottom: 6px !important;
}

/* -------------------------------------------------------------
   SLIDER SCROLL ENGINE (Right to Left)
   ------------------------------------------------------------- */
.df-slider-container-v2 {
  overflow: hidden !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  padding: 30px 0 !important; /* ऊपर-नीचे स्पेसिंग */
}

.df-slider-track-v2 {
  display: flex !important;
  width: max-content !important;
  gap: 32px !important;
  animation: dfScrollRightToLeftV2 32s linear infinite !important;
}

.df-slider-container-v2:hover .df-slider-track-v2 {
  animation-play-state: paused !important;
}

@keyframes dfScrollRightToLeftV2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 16px)); }
}

/* -------------------------------------------------------------
   ZIG-ZAG PATTERN LAYOUT (ऊपर-नीचे इमेजेस सेटिंग्स)
   ------------------------------------------------------------- */
.df-member-card-v2 {
  width: 260px !important;
  background-color: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
  border: 1px solid #edf2f7 !important;
  flex-shrink: 0 !important;
  box-sizing: border-box;
  text-align: left !important;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

/* Odd (1, 3, 5, 7) नंबर वाले कार्ड्स थोड़े ऊपर रहेंगे */
.df-card-odd {
  transform: translateY(-25px) !important;
}

/* Even (2, 4, 6) नंबर वाले कार्ड्स थोड़े नीचे झुकेंगे */
.df-card-even {
  transform: translateY(25px) !important;
}

/* कर्सर/होवर ले जाने पर जिग-जैग पोजीशन को बरकरार रखते हुए स्मूथ रिस्पॉन्स */
.df-card-odd:hover {
  transform: translateY(-35px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(245, 176, 22, 0.07) !important;
}

.df-card-even:hover {
  transform: translateY(15px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(245, 176, 22, 0.07) !important;
}

/* -------------------------------------------------------------
   CARD IMAGE & DETAILS
   ------------------------------------------------------------- */
.df-member-img-box-v2 {
  width: 100% !important;
  height: 280px !important;
  overflow: hidden !important;
}

.df-member-img-box-v2 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: grayscale(100%) !important; /* डिफ़ॉल्ट रूप से पूर्ण ब्लैक एंड व्हाइट */
  transition: filter 0.4s ease, transform 0.4s ease !important;
}

.df-member-card-v2:hover .df-member-img-box-v2 img {
  filter: grayscale(0%) !important; /* होवर पर 100% रंगीन */
}

.df-member-info-v2 {
  padding: 22px 20px !important;
  box-sizing: border-box !important;
}

.df-member-info-v2 h4 {
  font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1a1c22 !important;
  margin: 0 0 4px 0 !important;
}

.df-member-info-v2 p {
  font-family: -apple-system, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #718096 !important;
  margin: 0 !important;
}

/* -------------------------------------------------------------
   MOBILE VIEW: CENTER ALIGNED & OPTIMIZED TYPOGRAPHY
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .df-carousel-section-v2 {
    padding: 60px 0 80px 0 !important;
  }
  
  /* मोबाइल पर पूरी तरह सेंटर अलाइनमेंट */
  .df-carousel-header-v2 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin-bottom: 40px !important;
    padding: 0 20px !important;
    gap: 12px !important;
  }
  
  .df-brand-heading-v2 {
    font-size: 32px !important; /* मोबाइल के लिए परफेक्ट फॉन्ट साइज */
    letter-spacing: -1px !important;
    text-align: center !important;
  }
  
  .df-business-count-v2 {
    font-size: 16px !important;
    text-align: center !important;
    padding-bottom: 0 !important;
  }

  .df-member-card-v2 {
    width: 220px !important; /* मोबाइल स्क्रीन पर कॉम्पैक्ट विड्थ */
  }
  
  .df-member-img-box-v2 {
    height: 240px !important;
  }
  
  /* मोबाइल पर जिग-जैग रेंज को थोड़ा कम किया गया ताकि स्क्रॉलिंग आरामदायक रहे */
  .df-card-odd { transform: translateY(-15px) !important; }
  .df-card-even { transform: translateY(15px) !important; }
  
  .df-card-odd:hover { transform: translateY(-22px) scale(1.02) !important; }
  .df-card-even:hover { transform: translateY(8px) scale(1.02) !important; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e6b7193 *//* -------------------------------------------------------------
   CTA SECTION BASE LAYOUT (साफ़ सफेद पेज बैकग्राउंड)
   ------------------------------------------------------------- */
.df-cta-banner-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: 60px 24px !important; /* बाहरी आउटर पैडिंग */
  overflow: hidden !important;
}

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

/* -------------------------------------------------------------
   PREMIUM CAPSULE BOX DESIGN (Screenshot के समान वॉर्म सेंटर ग्लो)
   ------------------------------------------------------------- */
.df-cta-capsule-box {
  /* मुख्य डार्क चारकोल बैकग्राउंड और इसके ठीक बीच में आपके ब्रांड का स्मूथ पीला रेडियल ग्लो इफ़ेक्ट */
  background: #1a1c22 radial-gradient(circle at 50% 50%, rgba(245, 176, 22, 0.22) 0%, transparent 65%) !important;
  border-radius: 36px !important; /* इमेज के अनुसार कोमल गहरे घुमावदार कैप्सूल कोने */
  padding: 80px 40px !important; /* अंदरूनी पैडिंग */
  text-align: center !important; /* पूरा कंटेंट सेंटर अलाइन */
  box-sizing: border-box !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
  position: relative !important;
}

/* -------------------------------------------------------------
   HIGH-VISIBILITY TYPOGRAPHY STYLES
   ------------------------------------------------------------- */
/* मुख्य विशाल हेडिंग */
.df-cta-main-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: #ffffff !important; /* शुद्ध सफेद मुख्य टेक्स्ट */
  margin: 0 0 16px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -1.5px !important;
}

/* "Amazing" शब्द के लिए पीला हाइलाइट */
.df-cta-main-title .yellow-highlight {
  color: #f5b016 !important; /* आपके लोगो का परफेक्ट ब्राइट येलो */
}

/* छोटा सब-डिस्क्रिप्शन पैराग्राफ */
.df-cta-subtext {
  font-family: -apple-system, sans-serif !important;
  font-size: 16px !important;
  color: #cbd5e1 !important; /* डार्क बैकग्राउंड पर साफ़ दिखने वाला मखमली सिल्वर-सफेद */
  margin: 0 0 35px 0 !important;
  opacity: 0.85 !important;
  font-weight: 500 !important;
}

/* -------------------------------------------------------------
   DOUBLE ACTION BUTTONS (सॉलिड और आउटलाइन)
   ------------------------------------------------------------- */
/* बटन्स का मुख्य फ्लेक्स कंटेनर */
.df-cta-btn-group {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* 1. मुख्य पीला सॉलिड बटन */
.df-cta-btn-solid {
  background-color: #f5b016 !important; /* ब्रांड पीला */
  color: #1a1c22 !important; /* डार्क बोल्ड टेक्स्ट */
  text-decoration: none !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 30px !important; /* गोल पिल-शेप कोने */
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
  box-shadow: 0 8px 20px rgba(245, 176, 22, 0.2) !important;
}

/* सॉलिड बटन होवर इफ़ेक्ट */
.df-cta-btn-solid:hover {
  background-color: #ffffff !important;
  color: #1a1c22 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 25px rgba(255, 255, 255, 0.2) !important;
}

.df-cta-arrow {
  transition: transform 0.2s ease !important;
  display: inline-block !important;
}

.df-cta-btn-solid:hover .df-cta-arrow {
  transform: translateX(4px) !important; /* तीर का हल्का सा आगे खिसकना */
}

/* 2. ट्रांसपेरेंट आउटलाइन बटन (Contact Us) */
.df-cta-btn-outline {
  background-color: transparent !important;
  color: #ffffff !important; /* सफेद टेक्स्ट */
  border: 1px solid rgba(255, 255, 255, 0.25) !important; /* पतली कोमल सफेद बॉर्डर */
  text-decoration: none !important;
  font-family: -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border-radius: 30px !important;
  display: inline-block !important;
  transition: all 0.25s ease !important;
}

/* आउटलाइन बटन होवर इफ़ेक्ट */
.df-cta-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: #ffffff !important;
  transform: translateY(-2px) !important;
}

/* -------------------------------------------------------------
   MOBILE OPTIMIZATION (100% रिस्पॉन्सिव इंजन)
   ------------------------------------------------------------- */
@media (max-width: 992px) {
  .df-cta-capsule-box {
    padding: 70px 30px !important;
    border-radius: 28px !important;
  }
  
  .df-cta-main-title {
    font-size: 38px !important;
  }
}

@media (max-width: 600px) {
  .df-cta-banner-section {
    padding: 40px 16px !important; /* मोबाइल पर कॉम्पैक्ट आउटर स्पेस */
  }
  
  .df-cta-capsule-box {
    padding: 55px 20px !important;
    border-radius: 22px !important;
    /* मोबाइल के लिए छोटे रेडियल ग्लो का एडजस्टमेंट */
    background: #1a1c22 radial-gradient(circle at 50% 40%, rgba(245, 176, 22, 0.18) 0%, transparent 70%) !important;
  }
  
  .df-cta-main-title {
    font-size: 28px !important; /* मोबाइल फ्रेंडली फॉन्ट साइज */
    letter-spacing: -0.8px !important;
    line-height: 1.25 !important;
  }
  
  .df-cta-subtext {
    font-size: 14.5px !important;
    margin-bottom: 30px !important;
  }
  
  .df-cta-btn-group {
    flex-direction: column !important; /* मोबाइल फोन पर बटन्स एक के नीचे एक पूरे चौड़े हो जाएंगे */
    width: 100% !important;
    gap: 12px !important;
  }
  
  .df-cta-btn-solid, 
  .df-cta-btn-outline {
    width: 100% !important; /* फुल विड्थ बटन्स */
    justify-content: center !important;
    box-sizing: border-box !important;
    padding: 14px 0 !important;
  }
}/* End custom CSS */