.topbar-main{
    background:#2c5e15;
    padding:12px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.contact-list .elementor-icon-list-items{
    display:flex;
    align-items:center;
    gap:30px;
}

.contact-list .elementor-icon-list-item{
    position:relative;
}

.contact-list .elementor-icon-list-item:not(:last-child):after{
    content:'';
    position:absolute;
    right:-15px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:18px;
    background:rgba(255,255,255,.25);
}

.contact-list .elementor-icon-list-text{
    font-size:15px;
    font-weight:500;
}

.contact-list .elementor-icon-list-item:hover{
    transform:translateY(-2px);
    transition:.3s;
}

.topbar-social .elementor-social-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    transition:.3s;
}

.topbar-social .elementor-social-icon:hover{
    transform:translateY(-4px);
}

@media(max-width:768px){

    .topbar-main{
        flex-direction:column;
        gap:10px;
    }

    .contact-list .elementor-icon-list-items{
        flex-direction:column;
        gap:10px;
    }

    .contact-list .elementor-icon-list-item:after{
        display:none;
    }
}


/* ==========================================================================
   5. Right CTA Section
   ========================================================================== */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    white-space: nowrap;
}

.header-right img {
    width: 42px;
    height: 42px;
}

.header-right .elementor-button {
    background: #2f5e12 !important;
    border-radius: 30px;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.header-right .elementor-button:hover {
    background: #1f3f0c !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(47, 94, 18, 0.3);
}

/* ==========================================================================
   6. Responsive Layout Settings
   ========================================================================== */
@media (max-width: 1200px) {
    .header-main { padding: 0 20px; }
    .logo-wrap { flex: 0 0 160px; max-width: 160px; }
    .header-logo img { max-width: 150px; }
    .menu-wrap .elementor-item { font-size: 14px; padding: 10px 10px !important; }
}

@media (max-width: 1024px) {
    /* Elementor standard settings handles mobile menu icon toggles here */
    .menu-wrap { justify-content: flex-end; }
}
/* ==========================================================================
   4. Right CTA & Support Section (Fully Redesigned)
   ========================================================================== */
.header-right {
    display: flex;
    align-items: center;
    gap: 24px; /* Call section aur button ke beech perfect gap */
    white-space: nowrap;
}

/* Support Icon (Earphone) Style */
.header-right img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Hover karne par icon halka sa bounce karega */
.header-right:hover img {
    transform: scale(1.08) rotate(-5deg);
}

/* Call Text Container Alignment */
.call-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px; /* Lines ke beech ka gap */
}

/* "Call support 24/7" Heading Style */
.call-wrap .elementor-heading-title:nth-child(1) {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666666 !important; /* Elegant subtle gray */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 !important;
}

/* Phone Number Heading Style */
.call-wrap .elementor-heading-title:nth-child(2) {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2f5e12 !important; /* Logo ka Dark Green rang */
    margin: 0 !important;
    transition: color 0.3s ease;
}

/* Number par hover effect */
.call-wrap:hover .elementor-heading-title:nth-child(2) {
    color: #8cb72c !important; /* Logo ka Lime Green rang */
}

/* Premium "GET A QUOTE" Button Styling */
.header-right .elementor-button {
    background: #2f5e12 !important; /* Solid Dark Green */
    color: #ffffff !important;
    border-radius: 50px !important; /* Pill shape for modern look */
    padding: 14px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(47, 94, 18, 0.15); /* Soft button glow */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border: none !important;
}

/* Button Hover Style (Inversion Effect) */
.header-right .elementor-button:hover {
    background: #8cb72c !important; /* Smooth switch to Lime Green */
    transform: translateY(-3px); /* Subtle lift up */
    box-shadow: 0 6px 20px rgba(140, 183, 44, 0.4); /* Lime Green glow on hover */
}

/* Button Active/Click Effect */
.header-right .elementor-button:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(140, 183, 44, 0.3);
}

/* ==========================================================================
   Responsive View for Right Section
   ========================================================================== */
@media (max-width: 1140px) {
    .header-right {
        gap: 15px;
    }
    .call-wrap .elementor-heading-title:nth-child(2) {
        font-size: 14px !important;
    }
    .header-right .elementor-button {
        padding: 11px 22px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   1. MAIN PREMIUM MEGA MENU DROPDOWN PANEL
   ========================================================================== */
.md-services-menu {
    background: #ffffff !important;
    border-radius: 20px !important; /* Premium curved corners */
    padding: 35px 40px !important; /* More breathing room */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important; /* Super soft executive shadow */
    border-top: 4px solid #2f5e12 !important; /* Logo Dark Green top bar */
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Container Grid Layout Fix */
.md-services-menu .elementor-container {
    gap: 30px !important; /* Balanced distance between columns */
}

/* ==========================================================================
   2. CLEAN & MINIMALIST SERVICE LINKS (RE-DESIGNED)
   ========================================================================== */
.md-services-menu .elementor-icon-list-item {
    background: transparent !important; /* Heavy background boxes removed */
    border: none !important; /* Outlines removed for clean look */
    border-bottom: 1px dashed #eef2ed !important; /* Premium subtle separator line */
    border-radius: 0 !important;
    padding: 10px 0 !important; /* Perfect vertical list gaps */
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Last link ki border-line hatane ke liye */
.md-services-menu .elementor-icon-list-item:last-child {
    border-bottom: none !important;
}

/* Service Link Typography */
.md-services-menu .elementor-icon-list-text {
    font-size: 15px !important;
    font-weight: 500 !important; /* Medium weight for premium look */
    color: #444444 !important; /* Sophisticated deep gray */
    line-height: 1.2 !important;
    transition: all 0.25s ease !important;
}

/* ==========================================================================
   3. ATTRACTIVE MICRO-INTERACTION HOVER EFFECTS
   ========================================================================== */
.md-services-menu .elementor-icon-list-item:hover {
    background: transparent !important; /* Background colored boxes avoided */
    padding-left: 10px !important; /* Smooth soft nudge animation to the right */
    border-bottom-color: #8cb72c !important; /* Dashed line turns Lime Green on hover */
}

/* Hover karne par text color dynamic change hoga */
.md-services-menu .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: #2f5e12 !important; /* Text smoothly turns to Dark Green */
    font-weight: 600 !important;
}

/* Optional: Ek tiny professional left dot marker hover par lane ke liye */
.md-services-menu .elementor-icon-list-item::before {
    content: '•';
    color: #8cb72c; /* Lime Green Dot */
    font-size: 16px;
    margin-right: 8px;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.25s ease;
    display: inline-block;
}
.md-services-menu .elementor-icon-list-item:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   4. MAIN TOP HEADER MENU NAVBAR
   ========================================================================== */
.md-mega-menu .elementor-item {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    color: #333333 !important;
    transition: all 0.3s ease !important;
    position: relative;
}

/* Top Navbar Links Hover and Active State */
.md-mega-menu .elementor-item:hover,
.md-mega-menu .current-menu-item > a,
.md-mega-menu .elementor-item-active {
    color: #2f5e12 !important; /* Brand Dark Green */
}

/* Active Menu Indicator Line */
.md-mega-menu .elementor-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: #8cb72c; /* Lime Green bottom underline */
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.md-mega-menu .elementor-item:hover::after,
.md-mega-menu .elementor-item-active::after {
    transform: scaleX(1);
}
/* ==========================================================================
   ELEMENTORKIT NAV MENU - THE ULTIMATE MOBILE ALIGNMENT FIX
   ========================================================================== */

/* 1. Pure text row ko functional click area banana aur structure align karna */
.md-mobile-menu .elementskit-menu-container .ekit-menu-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 15px !important;
    cursor: pointer !important;
}

/* ElementsKit click restriction override for raw text links */
.md-mobile-menu .elementskit-menu-container .menu-item-has-children > a {
    pointer-events: auto !important; 
}

/* 2. Mobile Alignment & Container Reset (Bikhra hua layout theek karne ke liye) */
.md-mobile-menu .md-services-menu {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 5px 0 15px 15px !important; /* Left indentation control */
    margin: 0 !important;
    width: 100% !important;
}

/* Grid layout bypass to pure stacked list */
.md-mobile-menu .md-services-menu .elementor-container,
.md-mobile-menu .md-services-menu .elementor-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.md-mobile-menu .md-services-menu .elementor-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Ultra-Attractive Sub-menu Link Rows */
.md-mobile-menu .md-services-menu .elementor-icon-list-items {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.md-mobile-menu .md-services-menu .elementor-icon-list-item {
    background: #ffffff !important; /* Pure clean card back */
    border: 1px solid #f0f4ee !important; /* Extremely thin subtle borders */
    border-left: 4px solid #2f5e12 !important; /* Premium brand identity accent line */
    border-radius: 6px !important;
    margin-bottom: 8px !important; /* Space between rows */
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 95% !important; /* Aligning inside the mobile viewport container safely */
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important; /* Super fine elegant modern shadow */
    transform: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Typography settings for high readability */
.md-mobile-menu .md-services-menu .elementor-icon-list-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    text-align: left !important;
}

/* 4. Touch Feedbacks on Click/Tap */
.md-mobile-menu .md-services-menu .elementor-icon-list-item:active,
.md-mobile-menu .md-services-menu .elementor-icon-list-item:hover {
    background: #f4f9f1 !important; /* Light green tint backdrop feedback */
    border-color: #2f5e12 !important;
    padding-left: 20px !important; /* Fluid response slide nudge */
}

.md-mobile-menu .md-services-menu .elementor-icon-list-item:active .elementor-icon-list-text,
.md-mobile-menu .md-services-menu .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: #2f5e12 !important;
}

/* 5. Micro structural layout cleanup */
.md-mobile-menu .md-services-menu .elementor-icon-list-item::before {
    display: none !important;
}
/* ==========================================================================
   1. MAIN MOBILE HEADER BAR (STRICT VERTICAL ALIGNMENT & SHADOW)
   ========================================================================== */
.md-hfe-mobile-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    /* Perfect professional compact mobile height barrier */
    height: 75px !important;
    min-height: 75px !important;
    max-height: 75px !important;
    
    background: #ffffff !important; /* Premium Crisp White Backdrop */
    
    /* Strict layout rules to balance left and right sides in one single line */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important; /* Locks logo and hamburger on the exact vertical baseline */
    justify-content: space-between !important; 
    
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    
    /* Clean, solid drop shadow right below the 75px boundary line */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    border-bottom: 1px solid #eaeaea !important;
    z-index: 99999 !important;
}

/* Fix for Body Content overlap */
body {
    padding-top: 75px !important;
}

/* ==========================================================================
   2. LEFT SIDE LOGO (BIGGER SIZE & PERFECT VERTICAL CENTER)
   ========================================================================== */
.md-hfe-logo-box {
    height: 100% !important;
    width: auto !important;
    max-width: 65% !important; /* Allowed more space for text inside logo */
    display: flex !important;
    align-items: center !important; /* Centers logo inside the 75px column */
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset for Elementor inner wrapper nodes that push layout upward */
.md-hfe-logo-box .elementor-widget-image,
.md-hfe-logo-box .elementor-widget-container,
.md-hfe-logo-box .elementor-image {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Premium size increase for your business logo */
.md-hfe-logo-box .elementor-widget-image img {
    height: 52px !important; /* Increased from 46px for maximum clear crisp view */
    max-height: 52px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   3. RIGHT SIDE HFE NAVIGATION HAMBURGER ICON
   ========================================================================== */
.md-hfe-menu-box {
    height: 100% !important;
    width: auto !important;
    max-width: 35% !important;
    display: flex !important;
    align-items: center !important; /* Centers hamburger button vertically */
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force HFE wrapper to center line instantly */
.md-hfe-menu-box .elementor-widget-hfe-nav-menu,
.md-hfe-menu-box .hfe-nav-menu,
.md-hfe-menu-box .hfe-nav-menu__toggle {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Customizing HFE SVG Hamburger Icon Color to match your logo identity */
.md-hfe-menu-box .hfe-nav-menu__toggle svg,
.md-hfe-menu-box .hfe-nav-menu__toggle i {
    color: #2f5e12 !important; /* Core Dark Green */
    font-size: 26px !important; /* Sharp readable toggle size */
    transition: transform 0.2s ease !important;
}

/* Tap feedback active responsive trigger */
.md-hfe-menu-box .hfe-nav-menu__toggle:active svg {
    transform: scale(0.9) !important;
}

/* ==========================================================================
   4. HFE DROPDOWN EXPANDED SERVICE LIST CARDS UI
   ========================================================================== */
/* Styling main mobile links list row items */
.md-hfe-menu-box .hfe-nav-menu__layout-vertical .hfe-menu-item {
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    border-bottom: 1px solid #f6f8f5 !important;
}

/* Targeting the clean services menu layout block inside dropdown */
.md-hfe-menu-box .md-services-menu {
    background: #f7faf6 !important;
    padding: 15px 12px !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Column collapse helper rules */
.md-hfe-menu-box .md-services-menu .elementor-container,
.md-hfe-menu-box .md-services-menu .elementor-row,
.md-hfe-menu-box .md-services-menu .elementor-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Directory Style Micro Floating Cards for Services */
.md-hfe-menu-box .md-services-menu .elementor-icon-list-item {
    background: #ffffff !important;
    border: 1px solid #eef3ed !important;
    border-left: 4px solid #2f5e12 !important; /* Premium branding border stripe */
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-shadow: 0 4px 10px rgba(47, 94, 18, 0.02) !important;
}

.md-hfe-menu-box .md-services-menu .elementor-icon-list-text {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #444444 !important;
}

/* Touch active backdrop change on tap clicks */
.md-hfe-menu-box .md-services-menu .elementor-icon-list-item:active {
    background: #eef6ea !important;
    border-color: #2f5e12 !important;
}
.md-hfe-menu-box .md-services-menu .elementor-icon-list-item:active .elementor-icon-list-text {
    color: #2f5e12 !important;
}

/* Disabling default bullet icons layout settings */
.md-hfe-menu-box .md-services-menu .elementor-icon-list-item::before {
    display: none !important;
}
/* ==========================================================================
   ONEROOF SOLAR STYLE - PREMIUM BUTTON WITH GLOWING OVERLAY SHADOW
   ========================================================================== */

.md-premium-btn .elementor-button {
    background-color: #8cb72c !important; /* Base Brand Lime Green */
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    
    /* Perfect wide professional padding - Oneroof Solar Style */
    padding: 16px 40px !important; 
    border-radius: 50px !important; /* Forces perfect rounded pill-shape */
    
    /* Elegant ambient glowing shadow under the green button */
    box-shadow: 0 8px 22px rgba(140, 183, 44, 0.35) !important; 
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Smooth transition physics for fluid response */
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 2. PREMIUM HOVER STATE (SMOOTH SHIFT TO DARK BRAND GREEN) */
.md-premium-btn .elementor-button:hover {
    background-color: #24490e !important; /* Rich Dark Green color change */
    color: #ffffff !important;
    
    /* Micro interaction nudge - slightly pops up on hover */
    transform: translateY(-3px) !important; 
    
    /* Shadow expands and turns dark green simultaneously for real depth */
    box-shadow: 0 14px 30px rgba(36, 73, 14, 0.5) !important; 
}

/* 3. TACTILE CLICK/TAP FEEDBACK */
.md-premium-btn .elementor-button:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 15px rgba(36, 73, 14, 0.35) !important;
}
/* ==========================================================================
   ONLY BACKGROUND IMAGE FULL VIEW FOR MOBILE CONTAINER
   ========================================================================== */
@media (max-width: 1024px) {
    .md-perfect-mobile-bg {
        position: relative !important;
        
        /* Image ko pure frame mein fit karne ke liye background properties */
        background-size: cover !important; 
        background-position: center bottom !important; /* Staff ki image niche se poori dikhegi */
        background-repeat: no-repeat !important;
        
        /* Mobile par image ko khulne ke liye strict space */
        min-height: 580px !important; 
        
        /* Elementor ke content widgets ko alignment balance dene ke liye */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }
}
/* ==========================================================================
   ONEROOF SOLAR STYLE - EXPERTISE SECTION GRID & TYPOGRAPHY
   ========================================================================== */

/* 1. MAIN SECTION WITH AMBIENT GLOW BACKDROP */
.md-expertise-section {
    position: relative !important;
    background-color: #ffffff !important; /* Pure professional white canvas */
    padding: 50px 0 !important;
    overflow: hidden;
}

/* Left side dynamic soft green glowing blob/reflection */
.md-expertise-section::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(140, 183, 44, 0.08) 0%, rgba(255, 255, 255, 0) 70%) !important;
    z-index: 1;
    pointer-events: none;
}

/* Ensuring contents sit safely on top of ambient shadow */
.md-expertise-section .elementor-container {
    position: relative !important;
    z-index: 2 !important;
}

/* 2. PREMIUM FLOATING BADGE (OUR EXPERTISE) - FIXED INTERNAL DOT */
.md-expertise-badge {
    margin-bottom: 18px !important;
    width: fit-content !important;
}

.md-expertise-badge .elementor-heading-title,
.md-expertise-badge .elementor-icon-list-text {
    font-size: 13px !important; /* Font size increased from 11px to 13px for premium readability */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: #3b4d37 !important; /* Elegant corporate dark slate green */
    
    /* Clean rounded pill layout shell border */
    background: #ffffff !important;
    padding: 8px 22px !important; /* Padding adjusted for bigger font */
    border-radius: 50px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    
    /* Strict inline positioning to force the dot inside the border caps */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Left green dot perfectly centered inside the badge capsule box */
.md-expertise-badge .elementor-heading-title::before,
.md-expertise-badge .elementor-icon-list-item::before {
    content: '' !important; /* Standard text bullet reset to sharp vector circle */
    background-color: #8cb72c !important; /* Pure brand lime green */
    width: 8px !important; /* Exact crisp circle dimensions */
    height: 8px !important;
    border-radius: 50px !important;
    
    /* Strict margins to push text away safely inside the border box */
    margin-right: 10px !important; 
    margin-left: -2px !important;
    
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 3. DUAL-LINE STACKED TITLE (COMPLETE ENERGY SOLUTIONS) */
.md-expertise-title .elementor-heading-title {
    font-size: 50px !important; /* Slightly enhanced size scale */
    font-weight: 800 !important; /* Ultra bold premium look */
    line-height: 1.15 !important;
    color: #0c1a07 !important; /* Deep organic almost black font color */
    letter-spacing: -1px !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Split next line word highlight controller */
.md-expertise-title .elementor-heading-title span {
    color: #8cb72c !important; /* Vibrant high-contrast lime green secondary row text */
    display: block !important; /* Forces the green word to wrap to the next line cleanly */
    margin-top: 6px !important;
}
/* 3. DUAL-LINE STACKED TITLE (COMPLETE ENERGY SOLUTIONS) */
.md-expertise-titlewhite .elementor-heading-title {
    font-size: 30px !important; /* Slightly enhanced size scale */
    font-weight: 800 !important; /* Ultra bold premium look */
    line-height: 1.15 !important;
    color: #ffffff !important; /* Deep organic almost black font color */
    letter-spacing: -1px !important;
    margin: 0 !important;
    text-align: left !important;
    
    /* Forces mouse cursor to change into a hand pointer */
    cursor: pointer !important; 
    
    /* Smooth timing physics for the color change transition */
    transition: color 0.3s ease-in-out !important; 
}
.md-expertise-titlewhite .elementor-heading-title:hover {
    color: #275b02 !important; /* Your exact custom brand dark green */
}

/* Split next line word highlight controller */
.md-expertise-titlewhite .elementor-heading-title span {
    color: #8cb72c !important; /* Vibrant high-contrast lime green secondary row text */
    display: block !important; /* Forces the green word to wrap to the next line cleanly */
    margin-top: 6px !important;
}

.md-expertise-titlewhitehow .elementor-heading-title {
    font-size: 55px !important; /* Slightly enhanced size scale */
    font-weight: 800 !important; /* Ultra bold premium look */
    line-height: 1.15 !important;
    color: #ffffff !important; /* Deep organic almost black font color */
    letter-spacing: -1px !important;
    margin: 0 !important;
    text-align: left !important;
    
    /* Forces mouse cursor to change into a hand pointer */
    cursor: pointer !important; 
    
    /* Smooth timing physics for the color change transition */
    transition: color 0.3s ease-in-out !important; 
}
.md-expertise-titlewhitehow .elementor-heading-title:hover {
    color: #275b02 !important; /* Your exact custom brand dark green */
}

/* Split next line word highlight controller */
.md-expertise-titlewhitehow .elementor-heading-title span {
    color: #8cb72c !important; /* Vibrant high-contrast lime green secondary row text */
    display: block !important; /* Forces the green word to wrap to the next line cleanly */
    margin-top: 6px !important;
}

/* ==========================================================================
   UPDATED CARD HEADING WITH INTERACTIVE HOVER & HAND CURSOR
   ========================================================================== */
.md-expertise-titlesub .elementor-heading-title {
    font-size: 30px !important; /* Slightly enhanced size scale */
    font-weight: 800 !important; /* Ultra bold premium look */
    line-height: 1.15 !important;
    color: #0c1a07 !important; /* Deep organic almost black font color */
    letter-spacing: -1px !important;
    margin: 0 !important;
    text-align: left !important;
    
    /* Forces mouse cursor to change into a hand pointer */
    cursor: pointer !important; 
    
    /* Smooth timing physics for the color change transition */
    transition: color 0.3s ease-in-out !important; 
}

/* TEXT HOVER STATE CHANGES TO RICH DARK GREEN */
.md-expertise-titlesub .elementor-heading-title:hover {
    color: #275b02 !important; /* Your exact custom brand dark green */
}

/* Split next line word highlight controller */
.md-expertise-titlesub .elementor-heading-title span {
    color: #8cb72c !important; /* Vibrant high-contrast lime green secondary row text */
    display: block !important; /* Forces the green word to wrap to the next line cleanly */
    margin-top: 6px !important;
}
/* ==========================================================================
   4. RESPONSIVE SUPPORT VIEWPADS (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 1024px) {
    .md-expertise-section { padding: 60px 24px !important; }
    .md-expertise-title .elementor-heading-title { font-size: 38px !important; }
}

@media (max-width: 767px) {
    .md-expertise-section { padding: 50px 16px !important; }
    .md-expertise-title .elementor-heading-title { font-size: 32px !important; letter-spacing: -0.5px !important; }
    .md-expertise-badge .elementor-heading-title { font-size: 12px !important; padding: 6px 16px !important; }
}
/* ==========================================================================
   ONEROOF SOLAR STYLE - PREMIUM CARD ICON DESIGN
   ========================================================================== */

/* Icon ke outer box widget container ko restyle karne ke liye */
.md-premium-card-icon .elementor-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Perfect dimensions for the premium icon capsule box */
    width: 64px !important;
    height: 64px !important;
    
    /* Reference site jaisa subtle soft organic light green background tint */
    background-color: #f3f8f1 !important; 
    
    /* Dynamic curved edges */
    border-radius: 16px !important; 
    
    padding: 0 !important;
    margin-bottom: 25px !important; /* Content heading se professional distance padding */
    transition: all 0.3s ease-in-out !important;
}

/* Inside FontAwesome / SVG Icon alignment and sizing */
.md-premium-card-icon .elementor-icon,
.md-premium-card-icon .elementor-icon svg,
.md-premium-card-icon .elementor-icon i {
    font-size: 26px !important; /* Perfect sleek corporate dimensions */
    line-height: 1 !important;
    
    /* Icon color changed to match your corporate logo's Lime Green accent */
    color: #8cb72c !important; 
    fill: #8cb72c !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modern Hover Interaction: Pure micro shadow transition */
.md-premium-card-icon:hover .elementor-icon-wrapper {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(140, 183, 44, 0.15) !important;
}
/* Icon ke outer box widget container ko restyle karne ke liye */
.md-premium-card-iconcolor .elementor-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Perfect dimensions for the premium icon capsule box */
    width: 64px !important;
    height: 64px !important;
    
    /* Reference site jaisa subtle soft organic light green background tint */
    background-color: #434341 !important; 
    
    /* Dynamic curved edges */
    border-radius: 16px !important; 
    
    padding: 0 !important;
    margin-bottom: 25px !important; /* Content heading se professional distance padding */
    transition: all 0.3s ease-in-out !important;
}

/* Inside FontAwesome / SVG Icon alignment and sizing */
.md-premium-card-iconcolor .elementor-icon,
.md-premium-card-iconcolor .elementor-icon svg,
.md-premium-card-iconcolor .elementor-icon i {
    font-size: 26px !important; /* Perfect sleek corporate dimensions */
    line-height: 1 !important;
    
    /* Icon color changed to match your corporate logo's Lime Green accent */
    color: #8cb72c !important; 
    fill: #8cb72c !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Modern Hover Interaction: Pure micro shadow transition */
.md-premium-card-iconcolor:hover .elementor-icon-wrapper {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(140, 183, 44, 0.15) !important;
}
/* ==========================================================================
   GLOBAL STRUCTURE RESET FOR MD GARDEN EXPERTISE GRID
   ========================================================================== */

/* Main layout inner grid spacing */
.mdg-grid-main-parent .elementor-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important; /* FIXED: Black box ko stretch hone se rokega, content ke hisab se height lega */
    gap: 24px !important;
}

/* Force parent containers to show shadow and not clip them */
.mdg-grid-main-parent,
.mdg-grid-main-parent .elementor-column,
.mdg-grid-main-parent .elementor-widget-wrap {
    overflow: visible !important; /* Shadow ko cut hone se rokega */
}

/* Common dynamic engineering for hover smoothness and curves */
.mdg-box-big-white, .mdg-box-top-dark, .mdg-box-bottom-white, .mdg-box-bottom-green {
    border-radius: 24px !important; 
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    top: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-sizing: border-box !important;
}

/* Micro-interaction professional hover physics */
.mdg-box-big-white:hover, .mdg-box-top-dark:hover, .mdg-box-bottom-white:hover, .mdg-box-bottom-green:hover {
    transform: translateY(-6px) !important;
}

/* ==========================================================================
   INDIVIDUAL CARDS CONFIGURATIONS (DESKTOP MODE)
   ========================================================================== */

/* Card 1: Left Big White Card (Height Increased via Padding + Fixed Shadow) */
.mdg-box-big-white {
    padding: 60px 40px 90px 40px !important; /* Extra bottom padding se height badhayein jaise reference mein hai */
    height: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    
    /* Reference Style: Wide, prominent ambient box shadow */
   
}
.mdg-box-big-white:hover {
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.15) !important; 
    border-color: rgba(0, 0, 0, 0) !important;
}

/* Card 2: Right-Top Dark Box (Strict Content-Based Height) */
.mdg-box-top-dark {
    padding: 40px 35px !important;
    height: auto !important; /* Locks height strictly to text content only */
}
.mdg-box-top-dark:hover {
    box-shadow: 0 30px 60px rgba(12, 26, 7, 0.35) !important; 
}

/* Card 3: Bottom Left Small White Card (Shadow Fixed) */
/* ==========================================================================
   EXCLUSIVE FIXED SHADOW FOR SMALL WHITE CARD
   ========================================================================== */
.mdg-box-bottom-white {
    padding: 35px 30px !important;
    height: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    
    /* Soft, deep and highly visible wide-spread custom layout box-shadow */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14) !important; 
    
    /* Strict overflow reset to force the container to display outer shadows */
    overflow: visible !important; 
    position: relative !important;
    z-index: 9 !important;
}

/* DEEP FLOATING SHADOW ON HOVER FOR SMALL WHITE CARD */
.mdg-box-bottom-white:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14) !important; 
    border-color: rgba(0, 0, 0, 0) !important;
}
.mdg-box-bottom-white .elementor-widget-wrap,
.mdg-box-bottom-white .elementor-child-container {
    overflow: visible !important;
}
/* Card 4: Bottom Right Small Green Card */
.mdg-box-bottom-green {
    padding: 35px 30px !important;
    height: auto !important;
}
.mdg-box-bottom-green:hover {
    box-shadow: 0 30px 60px rgba(47, 94, 18, 0.28) !important;
}

/* Spacing fix inside widget wrappers */
.mdg-grid-main-parent .elementor-widget-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 16px !important;
}

/* ==========================================================================
   CRITICAL RESPONSIVE BREAKDOWN (STRICT FORCED MOBILE STACK) - UNTOUCHED
   ========================================================================== */
@media (max-width: 1024px) {
    .mdg-grid-main-parent .elementor-container,
    .mdg-grid-main-parent {
        display: flex !important;
        flex-direction: column !important; 
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .mdg-grid-main-parent .elementor-column,
    .mdg-grid-main-parent .elementor-child-container,
    .mdg-grid-main-parent .elementor-widget-wrap,
    .mdg-grid-main-parent .e-con,
    .mdg-grid-main-parent .e-con-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .mdg-box-big-white, 
    .mdg-box-top-dark, 
    .mdg-box-bottom-white, 
    .mdg-box-bottom-green {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto !important; 
        min-height: 0 !important;
        flex: 1 1 100% !important;
    }

    .mdg-box-big-white { padding: 35px 25px !important; }
    .mdg-box-top-dark { padding: 35px 25px !important; }
    .mdg-box-bottom-white { padding: 30px 22px !important; }
    .mdg-box-bottom-green { padding: 30px 22px !important; }
}
Bhai, inspect panel ko dhyan se dekhne par samajh aa gaya ki abhi is list item par koi custom shape ya geometry framework nahi chal raha hai.

Elementor ke default layout mein icon aur text aapas mein ekdum chipke hue hain aur icon upar ki taraf bhag raha hai (align-items: start).

Humein isko theek karne ke liye Kisi bhi custom class ki zaroorat nahi padegi! Maine aapke inspect element mein chal rahe default tags (.elementor-icon-box-wrapper, .elementor-icon-box-icon) ko directly target karke perfect corporate alignment aur hover box state ready kar diya hai.

Aap is structural code ko apne main container ke Custom CSS box mein daal dijiye:
CSS

/* ==========================================================================
   DIRECT ELEMENTOR OVERRIDE - NO CLASS REQUIRED FOR ICON BOX LIST
   ========================================================================== */

/* 1. ROW WRAPPER VERTICAL CENTER ALIGNMENT */
.elementor-icon-box-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; /* Proper layout line framework */
    gap: 20px !important; /* Perfect uniform breathing gap between icon box and text */
    margin-bottom: 32px !important; /* Balanced row block spacing */
    background: transparent !important;
}

/* 2. ICON BOX SYSTEM (IDLE STATE: CLEAN IMMACULATE CAPSULE BOX) */
.elementor-icon-box-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 52px !important;  /* Strict accurate scale matrix */
    max-width: 52px !important;
    height: 52px !important;
    
    background-color: #f3f8f1 !important; /* Light organic brand backdrop tint */
    border-radius: 14px !important; /* Professional rounded sleek square corners */
    margin: 0 !important; /* Clears Elementor's bad default spacing offsets */
    padding: 0 !important;
    
    /* Super smooth timing transition delay physics */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Specific SVG vector core graphic configuration */
.elementor-icon-box-icon svg,
.elementor-icon-box-icon i {
    width: 22px !important;
    height: 22px !important;
    font-size: 22px !important;
    color: #275b02 !important; /* Your Exact Brand Logo Rich Dark Green */
    fill: #275b02 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================================
   3. THE EXCLUSIVE LOCALIZED HOVER INTERACTION
   ========================================================================== */

/* TRIGGER: When cursor touches ONLY the icon box area, turn it solid brand color */
.elementor-icon-box-icon:hover {
    background-color: #275b02 !important; /* Fills beautifully with logo green */
    box-shadow: 0 8px 22px rgba(39, 91, 2, 0.24) !important; /* Premium organic glow */
}

/* TRIGGER: Turning inside vector graphic shape into pure crisp white */
.elementor-icon-box-icon:hover svg,
.elementor-icon-box-icon:hover i {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ==========================================================================
   4. CONTENT TEXT TYPE SETTING (ALIGNMENT BALANCING)
   ========================================================================== */
.elementor-icon-box-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0c1a07 !important; /* Deep organic corporate text tone */
    margin-bottom: 8px !important;
}

.elementor-icon-box-description {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #555555 !important; /* Highly readable subtle charcoal grey */
}

/* ==========================================================================
   ONEROOF SOLAR STYLE - PREMIUM OUTLINE CALL BUTTON
   ========================================================================== */
.mdg-why-call-btn .elementor-button {
    background-color: transparent !important; /* Removes the solid lime green color */
    color: #444444 !important; /* Elegant slate corporate dark grey text */
    
    /* Elegant subtle outline frame configuration */
    border: 1px solid #e2e8f0 !important; /* Soft premium light gray border */
    border-radius: 30px !important; /* Perfect matching pill shape curved pills */
    
    padding: 16px 32px !important; /* Balanced professional padding */
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    
    /* Clears any unwanted dynamic box shadows from elementor global defaults */
    box-shadow: none !important;
    position: relative;
    top: 0;
    
    /* Ultra smooth physics for text & border color transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ==========================================================================
   INTERACTIVE HOVER STATE (SMOOTH BORDER SHIFT & CONTRAST MIGRATION)
   ========================================================================== */
.mdg-why-call-btn .elementor-button:hover {
    background-color: transparent !important; /* Stays clean transparent on hover */
    color: #111111 !important; /* Text shifts to high contrast sharp dark black/grey */
    border-color: #cbd5e1 !important; /* Border gets slightly darker for realistic pressing depth */
    
    box-shadow: none !important;
}

/* Fixes the inside arrow icon tracking properties */
.mdg-why-call-btn .elementor-button-icon {
    color: #444444 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mdg-why-call-btn .elementor-button:hover .elementor-button-icon {
    color: #111111 !important;
}

/* ==========================================================================
   HOW IT WORKS - MASTER GLOBAL BACKGROUND LINE CONNECTION (PERFECT SYNC)
   ========================================================================== */

/* 1. PARENT SECTION GRADIENT LAYERING WITH ABSOLUTE FIXED PATH TRACK */
.mdg-process-section {
    background: radial-gradient(circle at 50% -20%, #22291d 0%, #0f120d 75%, #080a07 100%) !important;
    position: relative;
    overflow: visible !important; /* Vital: Keeps all shifted frames unclipped */
    padding-top: 60px !important;
    padding-bottom: 140px !important; /* Space buffer for down cards */
}

/* ----------------======================================================
   THE TRUE MASTER CONNECTING WIRE ENGINE (GLOBAL DESKTOP BACKGROUND LINE)
   ----------------====================================================== */
@media (min-width: 1025px) {
    /* We create a single, continuous professional line right across the entire section */
    .mdg-process-section::after {
        content: "" !important;
        position: absolute;
        
        /* Spans right across from the first card zone to the fourth card zone */
        width: 68% !important; 
        height: 2px !important; /* Ultra thin crisp razor line vector */
        
        /* Centered perfectly relative to the row axis layout */
        top: 52% !important; 
        left: 50% !important;
        transform: translateX(-50%) !important;
        
        /* Base background track (Clean soft transparent brand accent tint) */
        background-color: rgba(140, 183, 44, 0.15) !important;
        transition: background-color 0.4s ease-in-out, height 0.3s ease !important;
        pointer-events: none;
        z-index: 0 !important; /* Sits cleanly behind the cards, visible ONLY in gaps! */
    }

    /* Ignite global line into rich high-impact brand green when section is active */
    .mdg-process-section:hover::after {
        background-color: rgba(140, 183, 44, 0.35) !important;
        height: 3px !important;
    }
}

/* FORCES THE ELEMENTOR CORE BOXES TO ALLOW UNIFORM GAP SPACING */
.mdg-process-section .elementor-container,
.mdg-process-section .e-con-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 32px !important; /* Strict gap rendering between cards */
    position: relative;
    z-index: 2; /* Content blocks sit nicely on top of the line */
}

/* 2. ROOT CARD DESIGN: ELITE BRAND GLASS */
.mdg-step-one, .mdg-step-two, .mdg-step-three, .mdg-step-four {
    background: linear-gradient(145deg, #183307, #0e2003) !important;
    border: 1px solid rgba(140, 183, 44, 0.18) !important;
    border-radius: 28px !important;
    padding: 45px 32px !important;
    position: relative !important; 
    overflow: visible !important;
    width: 25% !important; /* Spreads out equal structural column blocks */
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Clean up card pseudo elements to prevent old line coordinates from rendering */
.mdg-step-one::after, .mdg-step-two::after, .mdg-step-three::after, .mdg-step-four::after {
    display: none !important;
}

/* Premium Card Hover Glow Engine */
.mdg-step-one:hover, .mdg-step-two:hover, .mdg-step-three:hover, .mdg-step-four:hover {
    background: linear-gradient(145deg, #1d3c09, #112805) !important;
    border-color: rgba(140, 183, 44, 0.5) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
    z-index: 5 !important;
}

/* ==========================================================================
   3. DESKTOP ENGINE: TRUE ALTERNATE SHIFTING LAYOUT (ZIG-ZAG FIXED)
   ========================================================================== */
@media (min-width: 1025px) {
    /* BOX 02 AND 04 PUSHED DOWNWARD CLEARLY BY 50PX */
    .mdg-step-two, .mdg-step-four {
        transform: translateY(50px) !important;
    }

    /* Hover Lift for top axis layers (01 and 03) */
    .mdg-step-one:hover, .mdg-step-three:hover {
        transform: translateY(-10px) !important;
    }

    /* Hover Lift from the pushed base axis layer (02 and 04) */
    .mdg-step-two:hover, .mdg-step-four:hover {
        transform: translateY(40px) !important; /* Beautiful elastic feedback shift */
    }
}

/* ==========================================================================
   4. MANUAL BACKGROUND STEP GHOST NUMBERS (01 - 04)
   ========================================================================== */
.mdg-step-one::before, .mdg-step-two::before, .mdg-step-three::before, .mdg-step-four::before {
    position: absolute;
    top: -10px;
    right: -5px;
    font-size: 115px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.025) !important;
    transition: all 0.4s ease-in-out !important;
    z-index: 0;
    pointer-events: none;
}

.mdg-step-one::before   { content: "01" !important; }
.mdg-step-two::before   { content: "02" !important; }
.mdg-step-three::before { content: "03" !important; }
.mdg-step-four::before  { content: "04" !important; }

.mdg-step-one:hover::before, .mdg-step-two:hover::before, .mdg-step-three:hover::before, .mdg-step-four:hover::before {
    color: rgba(140, 183, 44, 0.06) !important;
}

/* ==========================================================================
   5. INNER TYPOGRAPHY SYSTEMS
   ========================================================================== */
.mdg-step-one h3, .mdg-step-two h3, .mdg-step-three h3, .mdg-step-four h3,
.mdg-step-one .elementor-heading-title, .mdg-step-two .elementor-heading-title, .mdg-step-three .elementor-heading-title, .mdg-step-four .elementor-heading-title {
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    position: relative;
    z-index: 2;
}

.mdg-step-one p, .mdg-step-two p, .mdg-step-three p, .mdg-step-four p,
.mdg-step-one .elementor-text-editor, .mdg-step-two .elementor-text-editor, .mdg-step-three .elementor-text-editor, .mdg-step-four .elementor-text-editor {
    color: #cbd5e1 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   6. PERFECT RESPONSIVE PIPELINE (FLATTENS GRIDS ON MOBILE VIEWPORTS)
   ========================================================================== */
@media (max-width: 1024px) {
    .mdg-process-section {
        padding-bottom: 60px !important;
    }
    
    .mdg-process-section .elementor-container,
    .mdg-process-section .e-con-inner {
        flex-direction: column !important;
        align-items: center !important;
        gap: 28px !important;
        padding: 10px 20px !important;
    }
    
    /* Disables shifts on mobile screens and flattens grid layouts */
    .mdg-step-one, .mdg-step-two, .mdg-step-three, .mdg-step-four {
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 35px 25px !important;
    }
    
    /* Kills global background connecting line completely on mobile screens */
    .mdg-process-section::after {
        display: none !important;
    }
    
    .mdg-step-one::before, .mdg-step-two::before, .mdg-step-three::before, .mdg-step-four::before {
        font-size: 90px !important;
        top: -5px;
        right: 0;
    }
}
//testimonial
.elementor-testimonial-item,
.testimonial-item{
    background:#ffffff;
    border-radius:16px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    border-left:5px solid #8cc63f;
    transition:.3s;
}

.elementor-testimonial-item:hover,
.testimonial-item:hover{
    transform:translateY(-8px);
}

.elementor-testimonial-meta,
.testimonial-meta{
    margin-top:25px;
}

.elementor-testimonial-content,
.testimonial-content{
    font-size:18px;
    line-height:1.8;
    color:#444;
}

.elementor-testimonial-rating{
    margin-bottom:20px;
}
.testimonial-item,
.elementor-testimonial-item{
    border-left:8px solid #4F73FF !important;
    border-radius:12px;
    background:#f5f5f5;
}

//faq

.faq-modern{
    counter-reset:faq;
}

.faq-modern .e-n-accordion-item{
    counter-increment:faq;

    background:#ffffff;
    border:1px solid #edf0ea;

    border-radius:22px;

    margin-bottom:14px;

    overflow:hidden;

    transition:all .35s ease;

    box-shadow:
    0 2px 8px rgba(0,0,0,.02),
    0 8px 24px rgba(0,0,0,.02);
}

/* Hover Effect */
.faq-modern .e-n-accordion-item:hover{
    transform:translateY(-2px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.05),
    0 4px 12px rgba(0,0,0,.04);

    border-color:#dfe7d3;
}

/* Active */
.faq-modern .e-n-accordion-item[open]{

    border:1px solid #c8de9d;

    box-shadow:
    0 15px 40px rgba(0,0,0,.04);

    background:#fff;
}

/* Header */
.faq-modern .e-n-accordion-item-title{

    position:relative;

    padding:22px 75px 22px 92px !important;

    min-height:72px;

    display:flex;
    align-items:center;

    transition:.3s;
}

/* Number Circle */
.faq-modern .e-n-accordion-item-title:before{

    content:counter(faq, decimal-leading-zero);

    position:absolute;

    left:22px;
    top:50%;

    transform:translateY(-50%);

    width:38px;
    height:38px;

    border-radius:50%;

    border:1px solid #dfe5e0;

    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:15px;
    font-weight:700;

    color:#8391a7;

    transition:.3s;
}

/* Active Number */
.faq-modern .e-n-accordion-item[open] .e-n-accordion-item-title:before{

    background:#97c93d;
    border-color:#97c93d;

    color:#fff;

    box-shadow:
    0 8px 20px rgba(151,201,61,.30);
}

/* Question */
.faq-modern .e-n-accordion-item-title-text{

    font-size:17px !important;

    font-weight:700;

    color:#0f172a;

    line-height:1.4;
}

/* Arrow */
.faq-modern .e-n-accordion-item-title-icon{

    position:absolute;

    right:24px;
    top:50%;

    transform:translateY(-50%);

    width:34px;
    height:34px;

    border-radius:50%;

    border:1px solid #e4e8e2;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.3s;
}

/* Hover Arrow */
.faq-modern .e-n-accordion-item:hover .e-n-accordion-item-title-icon{

    border-color:#c8de9d;

    background:#fafdf6;
}

/* Open Arrow */
.faq-modern .e-n-accordion-item[open] .e-n-accordion-item-title-icon{

    border-color:#c8de9d;

    background:#fafdf6;
}

/* Answer Area */
.faq-modern .e-con{

    padding:0 35px 28px 92px !important;
}

/* Answer Text */
.faq-modern .e-con p{

    font-size:18px;

    line-height:1.8;

    color:#4f5d73;

    margin:0;
}
/* Mobile FAQ Fix */
@media (max-width: 767px){

    .faq-modern .e-n-accordion-item-title{
        min-height:70px !important;
        padding:18px 55px 18px 70px !important;
    }

    .faq-modern .e-n-accordion-item-title:before{
        width:32px;
        height:32px;
        left:18px;
        font-size:13px;
    }

    .faq-modern .e-n-accordion-item-title-text{
        font-size:15px !important;
        line-height:1.5;
        padding-right:10px;
    }

    .faq-modern .e-n-accordion-item-title-icon{
        width:28px;
        height:28px;
        right:15px;
    }

    .faq-modern .e-con{
        padding:0 20px 20px 20px !important;
    }

    .faq-modern .e-con p{
        font-size:14px;
        line-height:1.7;
    }

    /* Smooth Open/Close */
    .faq-modern .e-n-accordion-item{
        transition:all .35s ease;
        will-change:transform;
    }

    .faq-modern .e-n-accordion-item[open]{
        transform:translateY(0);
    }
}
.faq-section{
    background:linear-gradient(
        90deg,
        #f5f7f9 0%,
        #f5f7f9 55%,
        #f7faf4 75%,
        #f2f7ec 100%
    );
}

/* ==========================================================================
   SECONDARY BUTTON - PREMIUM TRANS-GLASS BORDER CLONE
   ========================================================================== */
.mdg-cta-btn-secondary .elementor-button,
.mdg-cta-btn-secondary a {
    background-color: transparent !important; /* Pure clear backdrop mask */
    
    /* Exact thin, sharp border ring from reference */
    border: 1px solid rgba(255, 255, 255, 0.25) !important; 
    border-radius: 100px !important; /* Complete pill shape curve configuration */
    
    padding: 16px 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    transition: all 0.3s ease-in-out !important;
}

/* Text Element Vectoring */
.mdg-cta-btn-secondary .elementor-button .elementor-button-text,
.mdg-cta-btn-secondary a span {
    color: #ffffff !important; /* Premium clean solid white font */
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
}

/* Smooth Premium Lighting Hover Effect */
.mdg-cta-btn-secondary .elementor-button:hover,
.mdg-cta-btn-secondary a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important; /* Soft premium glow fill on mouse hover */
    border-color: rgba(255, 255, 255, 0.5) !important; /* Brightens up the border trace ring */
}
/* ==========================================================================
   PRIMARY BUTTON - HIGH-GLOW GREEN GRADIENT REPLICA
   ========================================================================== */
.mdg-cta-btn-primary .elementor-button,
.mdg-cta-btn-primary a {
    /* Exact vibrant lime-green to emerald-cyan gradient flow from reference */
    background: linear-gradient(90deg, #8bc63f 0%, #00bc79 100%) !important;
    
    border: none !important;
    border-radius: 100px !important; /* Complete clean pill shape curvature */
    padding: 16px 32px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    
    /* Subtle premium ambient shadow depth under the button */
    box-shadow: 0 8px 24px rgba(139, 198, 63, 0.25) !important;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* Typography and Font Weight Vectors */
.mdg-cta-btn-primary .elementor-button .elementor-button-text,
.mdg-cta-btn-primary a span {
    color: #080f06 !important; /* Deep organic dark-charcoal color for pure contrast text */
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px !important;
}

/* Handling arrow symbol properties seamlessly if added in text or icon tab */
.mdg-cta-btn-primary .elementor-button-icon,
.mdg-cta-btn-primary .elementor-button i {
    color: #080f06 !important;
    margin-left: 8px !important;
    transition: transform 0.25s ease !important;
}

/* Smooth Interactive Glow Hover Effect */
.mdg-cta-btn-primary .elementor-button:hover,
.mdg-cta-btn-primary a:hover {
    /* Slightly shifts the light reflection dynamic and deepens shadow */
    background: linear-gradient(90deg, #96d647 0%, #00cc83 100%) !important;
    box-shadow: 0 12px 30px rgba(0, 188, 121, 0.4) !important;
    transform: translateY(-1px) !important; /* Micro liftoff like reference interaction */
}

/* Subtle arrow push micro-interaction on mouse hover */
.mdg-cta-btn-primary .elementor-button:hover .elementor-button-icon,
.mdg-cta-btn-primary .elementor-button:hover i {
    transform: translateX(3px) !important;
}
/* ==========================================================================
   ELEMENTOR INNER GRID - 4 SEPARATE CARDS WITH INTEGRATED BUTTON & HALF IMAGE
   ========================================================================== */

/* 1. PARENT CONTAINER AXIS - BECOMES THE REAL SEPARATE WHITE CARD BACKGROUND */
.mdg-service-card {
    background-color: #ffffff !important; /* Pure distinct white background for each card */
    border: 1px solid #eef2f6 !important; /* Pristine premium light grey line */
    border-radius: 28px !important; /* Thick elegant luxury curvature caps */
    overflow: hidden !important; /* Strictly clamps image zoom within border limits */
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; 
    align-items: stretch !important;
    height: 100% !important; /* Perfect parallel row height logic */
    
    /* Elegant smooth base bottom shadow profile - Visible on normal state */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06) !important; 
    
    /* High-end cinematic ease transition for shadow & borders */
    transition: box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important,
                border-color 0.5s ease !important;
}

/* 2. DYNAMIC HOVER LAYER - SHADOW EXPANSION ON ACTIVE SELECTION ONLY */
.mdg-service-card:hover {
    border-color: rgba(140, 183, 44, 0.25) !important; /* Subtle signature brand green trace tint */
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.14) !important; /* Shadow expands smoothly and becomes deeper */
}

/* 3. HALF IMAGE CASING RATIO MATRIX (EXACT REFERENCE CLONE) */
.mdg-service-card .elementor-image-box-img {
    margin: 0 !important; /* Wipes Elementor layout space leaks completely */
    overflow: hidden !important; /* Masks image zoom overflow perfectly */
    width: 100% !important;
}

.mdg-service-card .elementor-image-box-img img {
    width: 100% !important;
    height: 220px !important; /* Strict locked half-image horizontal crop frame height */
    object-fit: cover !important; /* Prevents stretching and crops cleanly like reference */
    
    /* Curved top corners to match card, bottom remains sharp (0) */
    border-radius: 28px 28px 0px 0px !important; 
    
    /* Ultra-slow elegant cubic-bezier physics timeline for zoom-in/out */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 4. THE CRISP ZOOM-IN ANIMATION EFFECT ON ACTIVE SELECTION ONLY */
.mdg-service-card:hover .elementor-image-box-img img {
    transform: scale(1.08) !important; /* Pure organic deep zoom inside the static card frame */
}

/* 5. TEXT METADATA AREA HANDLING (CLEAN PADDING AND SPACING) */
.mdg-service-card .elementor-image-box-content {
    /* Top=28px, Right=25px, Bottom=15px, Left=25px (Perfect breathing space) */
    padding: 28px 25px 15px 25px !important; 
    text-align: left !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important; /* Transparent background to maintain uniform card skin */
}



/* ==========================================================================
   6. SEPARATE BUTTON WIDGET INTERCEPTOR LOCK (STRICTLY FIXED INSIDE WHITE CARD)
   ========================================================================== */
.mdg-service-card .elementor-widget-button {
    margin-top: auto !important; /* Button ko automatic card ke bheetar sabse niche push karega */
    padding: 0px 25px 35px 25px !important; /* Card ke left/right/bottom se perfect boundary lock karega */
    background: transparent !important;
}

.mdg-service-card .elementor-button-wrapper {
    text-align: left !important; /* Pill shape button ko left side align rakhega jaisa text h */
    display: block !important;
}

.mdg-service-card .elementor-button {
    display: inline-flex !important;
    width: auto !important; /* Button ko pill mode me rakhta h full width nahi hone deta */
}

/* ==========================================================================
   7. RESPONSIVE PIPELINE SCALING DOWN ON MOBILE PHONE VIEWPORTS
   ========================================================================== */
@media (max-width: 767px) {
    .mdg-service-card {
        margin-bottom: 24px !important; /* Mobile list stacking me cards ke beech gap banayega */
    }
    .mdg-service-card .elementor-image-box-img img {
        height: 190px !important; /* Android/iPhone par proper grid compression ratio */
    }
    .mdg-service-card .elementor-image-box-content {
        padding: 24px 20px 10px 20px !important;
    }
    .mdg-service-card .elementor-widget-button {
        padding: 0px 20px 30px 20px !important;
    }
}