.elementor-22 .elementor-element.elementor-element-6f93fb75:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-6f93fb75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://humanitariandiplomacy.space/wp-content/uploads/2024/04/IMG_1773-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:100% auto;}.elementor-22 .elementor-element.elementor-element-6f93fb75 > .elementor-container{min-height:67vh;}.elementor-22 .elementor-element.elementor-element-6f93fb75{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:30px 0px 30px 0px;}.elementor-22 .elementor-element.elementor-element-6f93fb75 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-22 .elementor-element.elementor-element-2a831345.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-22 .elementor-element.elementor-element-2a831345.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-22 .elementor-element.elementor-element-2a831345 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-ac79fc0 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-22 .elementor-element.elementor-element-bd33b52{width:auto;max-width:auto;bottom:20px;}body:not(.rtl) .elementor-22 .elementor-element.elementor-element-bd33b52{left:-50px;}body.rtl .elementor-22 .elementor-element.elementor-element-bd33b52{right:-50px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-22 .elementor-element.elementor-element-3668064{width:auto;max-width:auto;}.elementor-22 .elementor-element.elementor-element-3668064 > .elementor-widget-container{background-color:#FFFFFF;margin:17px 0px 0px 0px;padding:10px 20px 10px 20px;}.elementor-22 .elementor-element.elementor-element-3668064 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;}.elementor-22 .elementor-element.elementor-element-2c9bdb4{width:auto;max-width:auto;}.elementor-22 .elementor-element.elementor-element-2c9bdb4 > .elementor-widget-container{background-color:#FFFFFF;margin:17px 0px 0px 0px;padding:10px 20px 10px 20px;}.elementor-22 .elementor-element.elementor-element-2c9bdb4 .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;}.elementor-22 .elementor-element.elementor-element-c0499db{width:auto;max-width:auto;}.elementor-22 .elementor-element.elementor-element-c0499db > .elementor-widget-container{background-color:#FFFFFF;margin:17px 0px 0px 0px;padding:10px 20px 10px 20px;}.elementor-22 .elementor-element.elementor-element-c0499db .elementor-heading-title{font-family:"Cormorant Garamond", Sans-serif;font-weight:600;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-decoration:var( --e-global-typography-accent-text-decoration );line-height:var( --e-global-typography-accent-line-height );}.elementor-22 .elementor-element.elementor-element-398c0ba .elementor-button:hover, .elementor-22 .elementor-element.elementor-element-398c0ba .elementor-button:focus{background-color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-22 .elementor-element.elementor-element-398c0ba > .elementor-widget-container{margin:60px 0px 0px 15px;}.elementor-22 .elementor-element.elementor-element-398c0ba .elementor-button{font-family:"Lato", Sans-serif;font-size:17px;font-weight:500;text-decoration:none;line-height:1em;border-radius:0px 0px 0px 0px;padding:15px 38px 15px 38px;}@media(max-width:1024px) and (min-width:768px){.elementor-22 .elementor-element.elementor-element-2a831345{width:100%;}}@media(min-width:1025px){.elementor-22 .elementor-element.elementor-element-6f93fb75:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-6f93fb75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-22 .elementor-element.elementor-element-6f93fb75:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-6f93fb75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-22 .elementor-element.elementor-element-6f93fb75{padding:0px 20px 0px 20px;}.elementor-22 .elementor-element.elementor-element-2a831345 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-22 .elementor-element.elementor-element-3668064 .elementor-heading-title{font-size:60px;}.elementor-22 .elementor-element.elementor-element-2c9bdb4 .elementor-heading-title{font-size:60px;}.elementor-22 .elementor-element.elementor-element-c0499db .elementor-heading-title{font-size:60px;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-22 .elementor-element.elementor-element-398c0ba > .elementor-widget-container{margin:60px 0px 0px 0px;}}@media(max-width:767px){.elementor-22 .elementor-element.elementor-element-6f93fb75 > .elementor-container{min-height:81vh;}.elementor-22 .elementor-element.elementor-element-6f93fb75:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-6f93fb75 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-132px -66px;}.elementor-bc-flex-widget .elementor-22 .elementor-element.elementor-element-2a831345.elementor-column .elementor-widget-wrap{align-items:flex-end;}.elementor-22 .elementor-element.elementor-element-2a831345.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:flex-end;align-items:flex-end;}.elementor-22 .elementor-element.elementor-element-2a831345 > .elementor-element-populated{margin:0px 0px 80px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-22 .elementor-element.elementor-element-3668064 > .elementor-widget-container{padding:10px 10px 10px 10px;}.elementor-22 .elementor-element.elementor-element-3668064 .elementor-heading-title{font-size:29px;}.elementor-22 .elementor-element.elementor-element-2c9bdb4 > .elementor-widget-container{padding:10px 10px 10px 10px;}.elementor-22 .elementor-element.elementor-element-2c9bdb4 .elementor-heading-title{font-size:29px;}.elementor-22 .elementor-element.elementor-element-c0499db > .elementor-widget-container{padding:10px 10px 10px 10px;}.elementor-22 .elementor-element.elementor-element-c0499db .elementor-heading-title{font-size:29px;}.elementor-widget-button .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );}.elementor-22 .elementor-element.elementor-element-398c0ba > .elementor-widget-container{margin:20px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-398c0ba .elementor-button{padding:12px 25px 12px 25px;}}/* Start custom CSS *//* ============================================ PROFESSIONAL ANIMATION OVERHAUL All animations synchronized & optimized ============================================ */ /* STEP 1: DISABLE CONFLICTING PARALLAX MOTION EFFECTS */ .elementor-motion-effects-element { --motion-effects-translateY: 0 !importantimportant; --motion-effects-translateX: 0 !imporimportantimportant background-attachment: unset !iimportantimportant} /* ============================================ LAYOUT FIX: Image and Text AlignmenLet Ensure proper vertical alignment in About sectioelementor-motion-effects-element ============================================ */ /* Fix column alignment for about section *FIX.elementor-column elementor-motion-effects-element display: flexDUPLICATE align-items: centerabout justify-content: centerjank} /* Ensure text columns align with images *elementor-motion-effects-element.elementor-column > .elementor-widget-wrap elementor-motion-effects-element width: 100%with display: flexDUPLICATE flex-direction: columnflexDUPLICATE justify-content: centerjustify-content} /* Fix heading and text display in columns *flex-direction.elementor-column .elementor-heading-titleelementor-motion-effects-element.elementor-column .elementor-text-editor elementor-heading-titleelementor-motion-effects-element width: 100%with} /* Ensure proper spacing *elementor-motion-effects-element.elementor-section elementor-motion-effects-element display: flexDUPLICATE flex-wrap: wrapflexDUPLICATE align-items: stretchANIMATION} /* Gallery/Image alignment fix *GPU.elementor-widget-image img elementor-motion-effects-element max-width: 100%Material height: autoheading} /* ============================================ */ .elementor-motion-effects-element .elementor-motion-effects-container { transform: none !importaimportantimportant} /* STEP 2: REMOVE DUPLICATE ANIMATION CONFLICTS */ /* Consolidate all fade animations to single definitions */ .animated, .animated-fast { animation-fill-mode: both !imporimportantimportant animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !importantimportant; /* Material Design easing */ will-change: transform, opacity !importantiimportantimportant perspective: 1000px !importantimportant; } /* STEP 3: FIX ANIMATION DELAYS - NOW PROPERLY APPLIED */ /* Hero section heading animations - perfect stagger */ .elementor-element-3668064 { /* "Let's begin with a" *elementor-element-3668064 animation-delay: 0s !importantimportant; } .elementor-element-2c9bdb4 { /* "conversation about your" */ animation-delay: 0.15s !impimportantimportant} .elementor-element-c0499db { /* "vision and challenges!" */ animation-delay: 0.30s !iimportantimportant} /* Start Here button */ .elementor-element-398c0ba { /* Butbutton animation-delay: 0.45s !impoimportantimportant} /* Profile image - left side */ .elementor-element-bd33b52 { /* Profile image */ animation-delay: 0.2s !iimportantimportant} /* STEP 4: OPTIMIZE ANIMATION DURATION & TIMING *transform/* Increase duration for smoother, more elegant feeelementor-motion-effects-element.elemelementor-element-3668064.elemeelementor-element-2c9bdb4.elementor-element-c0499db, .elementor-element-398c0ba { animation-duration: 1.1s !imimportantimportant} .elementor-element-bd33b52 { animation-duration: 1.2s !imimportantimportant} /* STEP 5: UNIFIED KEYFRAME ANIMATanimation-duration/* Remove all conflicting aam-* versions, use single defindefinitions @keyframes fadeIn { frfeeelementor-motion-effects-element opacity: 00s } to transform opacity: 1; } } @keyframes fadeIfadeIn from { opacity: 000s transform: translate3d(0, 40px, 0); will-change: transform, opacityopacity } to transform opacity: 11s transform: translate3d(0, 0, 0); will-change: auto; } } @keyframes fadeInLeft { frfrom opacity: 0; transform: translate3d(-40px, 0, 0); will-change: transform, opacity; } to { opacity: 111s transform: translate3d(0, 0, 0); will-change: auauto } } @keyframes fadeInRight { from { opacity: 0000s transform: translate3d(40px, 0, 0); will-change: transform, opacopacity } to { opacity: 1111s transform: translate3d(0, 0, 0); will-change: auto; } } /* STEP 6: REMOVE AAM DUPLICATE ANIMATIONS */ .animated.aam-fadeUp, .animated.aam-fadeIn, .animated.aam-fadeLeft, .animated.aam-fadeRight { animation-name: inherit !importantimportant; } /* Force standard animations only */ .animated.fadeInUp { animation-name: fadeInUp !importantimportant; } .animated.fadeIn { animation-name: fadeIn !importantimportantaccent-color: } .animated.fadeInLeft animation-name animation-name: fadeInLeft !importantimportantanimation-name} .animated.fadeInRight animation-name animation-name: fadeInRight !importantimportantanimation-name} /* STEP 7: SMOOTH SCROLLING ANIMATIONS *standard/* Apply to sections for elegant scroll-in effect *ANIMATIONS.elementor-section effect animation-fill-mode: bothANIMATIONS} /* STEP 8: DISABLE GPU BOTTLENECKS - REDUCE ANIMATED ELEMENTS */ /* Only animate key elements, not every widget */ .elementor-widget { animation: none !importantimportant; } /* Re-enable animations only for specific widgets */ .elementor-element-3668064, .eelementor-element-2c9bdb4.elementor-element-c0499db, .elementor-element-398c0ba, .elementor-element-bd33b52 { animation: var(--animation-name) var(--animation-duration, 1.1s) cubic-bezier(0.4, 0.0, 0.2, 1) var(--animation-delay, 0s) var(--animation-fill-mode, both) !imimportantimportant} /* STEP 9: ENSURE TRANSFORM CONSISTENCY */ /* Prevent transform stack overflow */ .elementor-element { transform: translate3d(0, 0, 0); /* GPU acceleration */ } .animated[class*="fadeIn"] { backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* STEP 10: BROWSER PERFORMANCE OPTIMIZATION */ /* Reduce jank and stuttering */ .animated { box-sizing: border-box; contain: layout style paint; } /* STEP 11: SMOOTH MOTION FOR PARALLAX-FREE SECTIONS */ .elementor-section-items-stretch { will-change: contents; } /* STEP 12: BUTTON HOVER ANIMATIONS - ADD ELEGANCE */ .elementor-button { transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) !iimportantimportant position: relative; } .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !importantimportant; } /* ============================================ RESULTS: Professional, Elegant, SSMOOTH - All delays properly aAPPLIED - No conflicting transforms - Optimized duration for ELEGANCE - GPU acceleration enabled - Zero jank or stuttering ============================================ */ } } } } } } } } } } } } } } } } } } } } } } } /* ============================================ PREMIUM REDESIGN: Core Expertise & Insightproperly World-Class Quality - Professional Gradwill-change ============================================ */ /* Hide old collaboration section *hover.elementor-element-6f93fb75 Expertise display: none !importantimportantduration} /* ============================================ PREMIUM SECTION 1: CORE EXPERTISE STATProfessional ============================================ */ /* Create premium stats section after About *CORE.elementor-element-6f93fb75::after EXPERTISE content: ''CORE display: blockdisplay height: 600pxhover background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)blockdisplay padding: 80px 20pxpremium} /* Premium expertise cards styling *padding.premium-expertise-section padding background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)blockdisplay padding: 100px 0padding position: relativepadding overflow: hiddenold} .premium-expertise-section::before position content: ''cards position: absoluteposition top: 0transforms left: 0linear-gradient right: 0relativepadding height: 4pxhiddenold background: linear-gradient(90deg, #c83864 0%, #e95a7e 100%)before} .expertise-container e95a7e max-width: 1200pxMOTION margin: 0 automax-width padding: 0 40pxposition} .expertise-header e95a7e text-align: centertop margin-bottom: 80pxmargin animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) bothautomax-width} .expertise-header h2 e95a7e font-size: 48pxfadeInUp font-weight: 700font-size color: #1a1a1acubic-bezier margin-bottom: 20pxmargin-bottom letter-spacing: -1pxlinear-gradient} .expertise-header .subtitle e95a7e font-size: 18pxfont-weight color: #666color font-weight: 300font-size max-width: 600pxmargin-bottom margin: 0 automax-width} .expertise-cards e95a7e display: griddisplay grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))griddisplay gap: 40pxgriddisplay margin-bottom: 60pxminmax} .expertise-card e95a7e background: whitebothautomax-width border-radius: 16pxbackground padding: 50px 40pxpadding text-align: centertext-align position: relativepadding overflow: hiddenoverflow box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08)border-radius transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1)text-align animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) bothall} .expertise-card:nth-child(1) { animation-delayANIMATIONS.expertise-card:nth-child(2) { animation-delay: 0.2s; expertise-card.expertise-card:nth-child(3) { animation-delay: 0.3s; empty-cells: .expertise-card:nth-child(4) { animation-delay: 0.4s; empty-cells .expertise-card::before empty-cells content: ''cubic-bezier position: absoluteposition top: 0text-align left: 0letter-spacing right: 0rgba height: 3pxhiddenoverflow background: linear-gradient(90deg, #c83864, #e95a7e)before transform: scaleX(0)top transform-origin: lefttop transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)transform-origin} .expertise-card:hover e95a7e transform: translateY(-12px)transform-origin box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12)before} .expertise-card:hover::before e95a7e transform: scaleX(1)transform-origin} .expertise-card-icon e95a7e font-size: 56pxfadeInUp margin-bottom: 30pxmargin-bottom display: inline-blockdisplay animation: fadeInScale 0.8s ease-out bothabsoluteposition} @keyframes fadeInScale key from fadeInScale opacity: 0overflow transform: scale(0.8)transform-origin } to transform-origin opacity: 1opacity transform: scale(1)transform-origin } } .expertiexpertise-card-icon font-size: 42pxfadeInScale font-weight: 700font-size color: #c83864cubic-bezier margin-bottom: 15pxmargin-bottom font-family: 'Playfair Display', seriffont-weight letter-spacing: -1pxlefttop} .expertise-card-title expertiexpertise-card-icon font-size: 20pxfont-family font-weight: 700font-size color: #1a1a1ac83864cubic-bezier margin-bottom: 15pxmargin-bottom} .expertise-card-description expertiexpertise-card-icon font-size: 15pxfont-weight color: #666color line-height: 1.8letter-spacing font-weight: 300font-size} /* CTA Section *color.expertise-cta expertiexpertise-card-icon text-align: centertransform-origin padding: 60px 40pxPlayfair background: linear-gradient(135deg, #c83864 0%, #e95a7e 100%)bothabsoluteposition border-radius: 16pxbothabsoluteposition color: whitec83864 margin-top: 60pxmargin-bottom animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.5s bothanimation} .expertise-cta h3 e95a7e font-size: 32pxfadeInUp font-weight: 700font-size margin-bottom: 20pxmargin-top} .expertise-cta p e95a7e font-size: 16pxfont-weight margin-bottom: 30pxmargin-bottom opacity: 0.95opacity max-width: 600pxmargin-bottom margin-left: automax-width margin-right: automargin-left} .expertise-cta-button e95a7e display: inline-blockDisplay padding: 15px 45pxpadding background: whitebothanimation color: #c83864cubic-bezier border-radius: 50pxbackground font-weight: 700font-size font-size: 15pxfont-weight text-decoration: nonetext-align transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)text-decoration box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)border-radius} .expertise-cta-button:hover e95a7e transform: translateY(-3px)text-decoration box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25)border-radius} /* ============================================ RESPONSIVE DESIGN - Premium Qualitrgba ============================================ */ @media (max-width: 768px) margin-right .expertise-header h2 e95a7e font-size: 36pxfont-size } .expertise-cards e95a7e grid-template-columns: 1frgap gap: 30pxgrid-template-columns } .expertise-card e95a7e padding: 40px 30pxPremium } .expertise-container e95a7e padding: 0 20pxpadding } .expertise-header e95a7e margin-bottom: 60pxmargin-right } } /* ============================================ *//* End custom CSS */