/* -------------------------------- sangita start -------------------------------------- */

/* ==========================================================================
   Hero Banner Advanced Staggered Entrance Animations
   Sequence on Page Load:
   1. .left_blue section slides down smoothly from top
   2. .right_white section slides in smoothly from right
   3. .bannerTitle heading slides up & fades in
   4. .banT2 subtitle slides up & fades in
   5. .campainButton reveals with smooth rise, subtle pop & interactive hover
   ========================================================================== */

/* Prevent horizontal scrollbars during side animations */
.elementor-element-0caa28c,
.elementor-element-b849c11,
.site {
    overflow-x: clip;
}

/* 1. Left Blue Section: Smooth entrance from top */
.left_blue,
.elementor-element.left_blue {
    opacity: 0;
    animation: heroSlideFromTop 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 2. Right White Section: Smooth entrance from right side */
.right_white,
.elementor-element.right_white {
    opacity: 0;
    animation: heroSlideFromRight 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Subtle image depth reveal inside right_white */
.right_white .bannerMask img,
.elementor-element.right_white .bannerMask img {
    animation: heroImageDepth 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
    will-change: transform;
}

/* 3. Banner Title: Rises & fades in after containers land */
.bannerTitle,
.elementor-element.bannerTitle,
.left_blue .bannerTitle {
    opacity: 0;
    animation: heroTextReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 4. Banner Subtitle (banT2): Rises & fades in after bannerTitle */
.banT2,
.elementor-element.banT2,
.left_blue .banT2,
.left_blue .elementor-widget-heading:not(.bannerTitle) {
    opacity: 0;
    animation: heroTextReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 5. Campaign Button: Pop, rise & fade in after text */
.campainButton,
.elementor-element.campainButton,
.left_blue .campainButton,
.left_blue .elementor-widget-button {
    opacity: 0;
    animation: heroButtonReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Campaign Button Interactive Hover Micro-Interactions */
.campainButton .elementor-button,
.elementor-element.campainButton .elementor-button,
.left_blue .elementor-widget-button .elementor-button {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.3s ease !important;
}

.campainButton .elementor-button:hover,
.elementor-element.campainButton .elementor-button:hover,
.left_blue .elementor-widget-button .elementor-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px -4px rgba(0, 0, 0, 0.2) !important;
}

.campainButton .elementor-button .elementor-button-icon,
.elementor-element.campainButton .elementor-button .elementor-button-icon,
.left_blue .elementor-widget-button .elementor-button .elementor-button-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.campainButton .elementor-button:hover .elementor-button-icon,
.elementor-element.campainButton .elementor-button:hover .elementor-button-icon,
.left_blue .elementor-widget-button .elementor-button:hover .elementor-button-icon {
    transform: translateX(4px);
}

/* ==========================================================================
   Keyframes (Hardware-Accelerated 3D Transforms)
   ========================================================================== */

/* Slide down smoothly from top */
@keyframes heroSlideFromTop {
    0% {
        opacity: 0;
        transform: translate3d(0, -70px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Slide in smoothly from right */
@keyframes heroSlideFromRight {
    0% {
        opacity: 0;
        transform: translate3d(80px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Soft image scale for premium depth */
@keyframes heroImageDepth {
    0% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Soft text fade and upward glide */
@keyframes heroTextReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Button reveal with slight scale pop */
@keyframes heroButtonReveal {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

/* ==========================================================================
   Logo Square Tiles Join Animation Styles
   ========================================================================== */
.hfe-site-logo-container {
    position: relative;
    display: inline-block;
    overflow: visible;
}

/* Initially hidden on page load so logo does NOT show before animation runs */
header .hfe-site-logo-img:not(.logo-tiles-loaded),
.hfe-site-logo-container .hfe-site-logo-img:not(.logo-tiles-loaded) {
    opacity: 0 !important;
}

/* Smoothly revealed once mosaic tiles join together */
header .hfe-site-logo-img.logo-tiles-loaded,
.hfe-site-logo-container .hfe-site-logo-img.logo-tiles-loaded {
    opacity: 1 !important;
    transition: opacity 0.4s ease;
}

.logo-tiles-mosaic {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
    transform-style: preserve-3d;
}

.logo-tile {
    box-sizing: border-box;
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   .left_blue Section Interactive Movement (Mouse 3D Tilt & Scroll Parallax)
   Activated smoothly after entrance animation finishes
   ========================================================================== */
.hero-interactive .left_blue,
.hero-interactive .elementor-element.left_blue {
    transform: translate3d(var(--hero-mouse-x, 0px), calc(var(--hero-mouse-y, 0px) + var(--hero-scroll-y, 0px)), 0px)
               rotateX(var(--hero-rot-x, 0deg))
               rotateY(var(--hero-rot-y, 0deg)) !important;
    transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Internal elements layered parallax depth */
.hero-interactive .left_blue .bannerTitle {
    transform: translate3d(calc(var(--hero-mouse-x, 0px) * 0.35), calc(var(--hero-mouse-y, 0px) * 0.35), 10px);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-interactive .left_blue .banT2 {
    transform: translate3d(calc(var(--hero-mouse-x, 0px) * 0.22), calc(var(--hero-mouse-y, 0px) * 0.22), 6px);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-interactive .left_blue .campainButton {
    transform: translate3d(calc(var(--hero-mouse-x, 0px) * 0.5), calc(var(--hero-mouse-y, 0px) * 0.5), 16px);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Smooth ambient breath on touch screens or when mouse is idle */
@media (hover: none) {
    .hero-interactive .left_blue,
    .hero-interactive .elementor-element.left_blue {
        animation: heroFloatIdle 4.5s ease-in-out infinite alternate !important;
    }
}

@keyframes heroFloatIdle {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, -8px, 0);
    }
}

/* ==========================================================================
   Elementor Editor & Accessibility Overrides
   ========================================================================== */

/* Maintain full visibility and disable animation while editing inside Elementor */
.elementor-editor-active .left_blue,
.elementor-editor-active .right_white,
.elementor-editor-active .bannerTitle,
.elementor-editor-active .banT2,
.elementor-editor-active .campainButton,
.elementor-editor-active .bannerMask img,
.elementor-editor-active .hfe-site-logo-img,
.elementor-editor-active .logo-tiles-mosaic,
.elementor-editor-active .left_blue .elementor-widget-heading,
.elementor-editor-active .left_blue .elementor-widget-button {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================================================
   Section: .whyDirect - 3D Folded Cloth Unfold Reveal Animation
   Triggered on scroll when the .whyDirect image section enters view.
   Simulates luxury fabric/cloth/napkin opening up from folded creases
   into a crisp flat image with realistic perspective, shadows & fabric flutter.
   ========================================================================== */

.whyDirect {
    position: relative;
    perspective: 1400px;
    transform-style: preserve-3d;
}

.whyDirect .elementor-widget-image {
    position: relative;
    perspective: 1400px;
    transform-style: preserve-3d;
    overflow: visible !important;
}

/* Base image state when cloth unfolding is active */
.whyDirect.cloth-unfolding img,
.whyDirect.cloth-unfolding .elementor-widget-image img {
    opacity: 0;
}

/* Fallback pure-CSS 3D cloth unfold animation if JS is delayed */
.whyDirect:not(.cloth-unfolded):not(.cloth-unfolding) img {
    transform-origin: top center;
    backface-visibility: hidden;
}

/* The 3D Cloth Unfold Stage Overlay */
.cloth-unfold-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 15;
    perspective: 1400px;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

/* Individual folding panels */
.cloth-panel {
    position: absolute;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    background-repeat: no-repeat;
    background-color: #f7f2eb;
    overflow: hidden;
    will-change: transform, opacity;
}

/* Top Panel - folds from bottom seam */
.cloth-panel-top {
    top: 0;
    height: 33.334%;
    transform-origin: bottom center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
}

/* Middle Panel - anchored center */
.cloth-panel-mid {
    top: 33.333%;
    height: 33.334%;
    transform-origin: center center;
}

/* Bottom Panel - folds from top seam */
.cloth-panel-bot {
    top: 66.666%;
    height: 33.334%;
    transform-origin: top center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Realistic fabric crease shadow overlay */
.cloth-crease-shadow {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    transition: opacity 0.8s ease;
    will-change: opacity;
}

.cloth-panel-top .cloth-crease-shadow {
    bottom: 0;
    height: 45px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 40%, transparent 100%);
}

.cloth-panel-mid .cloth-crease-shadow-top {
    top: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 100%);
}

.cloth-panel-mid .cloth-crease-shadow-bot {
    bottom: 0;
    height: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 45%, transparent 100%);
}

.cloth-panel-bot .cloth-crease-shadow {
    top: 0;
    height: 50px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 100%);
}

/* Dynamic Silk/Fabric Luminous Sheen */
.cloth-sheen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 25%, rgba(255, 255, 255, 0.45) 50%, transparent 75%);
    background-size: 200% 200%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease, transform 1s ease;
}

/* Finished state of real image */
.whyDirect.cloth-unfolded img {
    transition: opacity 0.4s ease;
    opacity: 1 !important;
}

/* ==========================================================================
   Section: whatWeDoSquare - Unique & Advanced 3D Interactive Grid Animation
   Targets: .whatWeDoSquare, .whatWeDoSquare .elementor-widget-icon-box,
            .elementor-element-5f6a676 .elementor-widget-icon-box,
            .elementor-element-7bfaacd .elementor-widget-icon-box
   Features:
   1. Scroll-triggered 3D origami pop & settle entrance
   2. Perimeter golden laser shimmer sweep beam
   3. Holographic 3D mouse parallax tilt with cursor light spotlight
   4. Luxury editorial watermark index numbers (01 to 06)
   5. Architectural golden corner brackets on hover
   6. Custom micro-animations on each SVG icon
   ========================================================================== */

/* Grid container styling */
.whatWeDoSquare,
.elementor-element-5f6a676 {
    perspective: 1200px;
    transform-style: preserve-3d;
}

/* Base square card styling */
.whatWeDoSquare .elementor-widget-icon-box,
.elementor-element-5f6a676 .elementor-widget-icon-box,
.elementor-element-7bfaacd .elementor-element-5f6a676 .elementor-widget-icon-box {
    position: relative;
    background: #F7F2EB;
    border: 1.5px solid rgba(177, 118, 20, 0.22) !important;
    border-radius: 12px !important;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    perspective: 800px;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.45s ease,
                background-color 0.45s ease;
    will-change: transform, opacity, box-shadow;
}

/* Staggered 3D Entrance: Initial Hidden State (Before in-view) */
.whatWeDoSquare:not(.whatWeDoSquare-visible) .elementor-widget-icon-box,
.elementor-element-7bfaacd:not(.whatWeDoSquare-visible) .elementor-element-5f6a676 .elementor-widget-icon-box {
    opacity: 0;
    transform: perspective(900px) rotateX(28deg) rotateY(-14deg) translate3d(0, 45px, -40px) scale(0.9);
}

/* Entrance Sequence Delays for the 6 Squares */
.whatWeDoSquare-visible .elementor-widget-icon-box:nth-child(1),
.elementor-element-7bfaacd.whatWeDoSquare-visible .elementor-element-5f6a676 .elementor-widget-icon-box:nth-child(1) {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.6s ease 0.05s;
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1);
}
.whatWeDoSquare-visible .elementor-widget-icon-box:nth-child(2),
.elementor-element-7bfaacd.whatWeDoSquare-visible .elementor-element-5f6a676 .elementor-widget-icon-box:nth-child(2) {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, opacity 0.6s ease 0.15s;
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1);
}
.whatWeDoSquare-visible .elementor-widget-icon-box:nth-child(3),
.elementor-element-7bfaacd.whatWeDoSquare-visible .elementor-element-5f6a676 .elementor-widget-icon-box:nth-child(3) {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, opacity 0.6s ease 0.25s;
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1);
}
.whatWeDoSquare-visible .elementor-widget-icon-box:nth-child(4),
.elementor-element-7bfaacd.whatWeDoSquare-visible .elementor-element-5f6a676 .elementor-widget-icon-box:nth-child(4) {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.20s, opacity 0.6s ease 0.20s;
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1);
}
.whatWeDoSquare-visible .elementor-widget-icon-box:nth-child(5),
.elementor-element-7bfaacd.whatWeDoSquare-visible .elementor-element-5f6a676 .elementor-widget-icon-box:nth-child(5) {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.30s, opacity 0.6s ease 0.30s;
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1);
}
.whatWeDoSquare-visible .elementor-widget-icon-box:nth-child(6),
.elementor-element-7bfaacd.whatWeDoSquare-visible .elementor-element-5f6a676 .elementor-widget-icon-box:nth-child(6) {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.40s, opacity 0.6s ease 0.40s;
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) translate3d(0, 0, 0) scale(1);
}

/* Dynamic Cursor Spotlight Glare */
.whatWeDoSquare .elementor-widget-icon-box::before,
.elementor-element-5f6a676 .elementor-widget-icon-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 140px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 190, 11, 0.16), transparent 75%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

.whatWeDoSquare .elementor-widget-icon-box:hover::before,
.elementor-element-5f6a676 .elementor-widget-icon-box:hover::before {
    opacity: 1;
}

/* Luminous Golden Border Shimmer Line on Top */
.whatWeDoSquare .elementor-widget-icon-box::after,
.elementor-element-5f6a676 .elementor-widget-icon-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, transparent, #ffbe0b, #ffe4b8, #ffbe0b, transparent);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.whatWeDoSquare .elementor-widget-icon-box:hover::after,
.elementor-element-5f6a676 .elementor-widget-icon-box:hover::after {
    opacity: 1;
    animation: squareBorderLaser 1.8s ease-in-out infinite;
}

@keyframes squareBorderLaser {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Luxury Editorial Watermark Number (01 to 06) */
.square-watermark {
    position: absolute;
    top: 10px;
    right: 14px;
    font-family: 'bigshouldersbold', 'Big Shoulders Display', sans-serif;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: #b17614;
    opacity: 0.16;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.whatWeDoSquare .elementor-widget-icon-box:hover .square-watermark,
.elementor-element-5f6a676 .elementor-widget-icon-box:hover .square-watermark {
    opacity: 0.55;
    transform: translateY(-2px) scale(1.08);
}

/* Architectural Corner Accent Brackets */
.square-corner-bracket {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #ffbe0b;
    border-style: solid;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.square-corner-tl {
    top: 6px;
    left: 6px;
    border-width: 2px 0 0 2px;
    border-top-left-radius: 4px;
    transform: translate(-4px, -4px);
}

.square-corner-br {
    bottom: 6px;
    right: 6px;
    border-width: 0 2px 2px 0;
    border-bottom-right-radius: 4px;
    transform: translate(4px, 4px);
}

.whatWeDoSquare .elementor-widget-icon-box:hover .square-corner-bracket,
.elementor-element-5f6a676 .elementor-widget-icon-box:hover .square-corner-bracket {
    opacity: 0.9;
    transform: translate(0, 0);
}

/* Hover Elevated Depth and Shadow */
.whatWeDoSquare .elementor-widget-icon-box:hover,
.elementor-element-5f6a676 .elementor-widget-icon-box:hover {
    border-color: rgba(177, 118, 20, 0.65) !important;
    background-color: #fcf9f4 !important;
    box-shadow: 0 18px 36px -8px rgba(177, 118, 20, 0.24),
                0 0 0 1.5px rgba(255, 190, 11, 0.45) !important;
}

/* 3D Parallax Depth for Inner Elements */
.whatWeDoSquare .elementor-icon-box-wrapper,
.elementor-element-5f6a676 .elementor-icon-box-wrapper {
    position: relative;
    z-index: 2;
    transform-style: preserve-3d;
}

.whatWeDoSquare .elementor-icon-box-icon,
.elementor-element-5f6a676 .elementor-icon-box-icon {
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.whatWeDoSquare .elementor-widget-icon-box:hover .elementor-icon-box-icon,
.elementor-element-5f6a676 .elementor-widget-icon-box:hover .elementor-icon-box-icon {
    transform: translateZ(28px) scale(1.08);
}

.whatWeDoSquare .elementor-icon-box-title,
.elementor-element-5f6a676 .elementor-icon-box-title {
    transform: translateZ(0);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}

.whatWeDoSquare .elementor-widget-icon-box:hover .elementor-icon-box-title,
.elementor-element-5f6a676 .elementor-widget-icon-box:hover .elementor-icon-box-title {
    transform: translateZ(16px);
    color: #925f0a !important;
}

/* -------------------------------------------------------------
   Bespoke Micro-Animations for Each Icon on Hover
   ------------------------------------------------------------- */

/* 1. Strategy: Smooth Planetary Gear Rotation & Micro-Pulse */
.elementor-element-e142180:hover .elementor-icon svg {
    animation: squareGearSpin 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes squareGearSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}

/* 2. Creative: Bulb Radiant Glow & Ray Expansion */
.elementor-element-a446058:hover .elementor-icon svg {
    filter: drop-shadow(0 0 10px rgba(255, 190, 11, 0.85));
    animation: squareBulbPulse 1.4s ease-in-out infinite alternate;
}
@keyframes squareBulbPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(255, 190, 11, 0.5)); }
    100% { transform: scale(1.06); filter: drop-shadow(0 0 14px rgba(255, 190, 11, 0.95)); }
}

/* 3. Design: Drafting Pen/Compass Stroke Angle */
.elementor-element-480966e:hover .elementor-icon svg {
    animation: squareDesignSwing 1.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite alternate;
}
@keyframes squareDesignSwing {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(-8deg) translateY(-2px); }
    100% { transform: rotate(6deg) translateY(1px); }
}

/* 4. Printing: Press & Conveyor Paper Feed Motion */
.elementor-element-cb7364f:hover .elementor-icon svg {
    animation: squarePrintFeed 1.5s ease-in-out infinite alternate;
}
@keyframes squarePrintFeed {
    0% { transform: translateY(0); }
    100% { transform: translateY(5px); }
}

/* 5. Postage: Airmail Envelope Gentle Float & Lift */
.elementor-element-a55208f:hover .elementor-icon svg {
    animation: squarePostageFloat 1.8s ease-in-out infinite alternate;
}
@keyframes squarePostageFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-7px) rotate(-3deg); }
}

/* 6. Delivery: Acceleration Rev & Fast Speed Lines */
.elementor-element-a7e3f81:hover .elementor-icon svg {
    animation: squareDeliverySpeed 0.8s ease-in-out infinite alternate;
}
@keyframes squareDeliverySpeed {
    0% { transform: translateX(0) skewX(0deg); }
    100% { transform: translateX(8px) skewX(-4deg); }
}

/* Left side text reveal sync for What we do section */
.elementor-element-7bfaacd .elementor-element-01f24e2 {
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.85s ease;
}
.elementor-element-7bfaacd:not(.whatWeDoSquare-visible) .elementor-element-01f24e2 {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
}
.elementor-element-7bfaacd.whatWeDoSquare-visible .elementor-element-01f24e2 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   Elementor Editor & Accessibility Overrides
   ========================================================================== */

/* Maintain full visibility and disable animation while editing inside Elementor */
.elementor-editor-active .left_blue,
.elementor-editor-active .right_white,
.elementor-editor-active .bannerTitle,
.elementor-editor-active .banT2,
.elementor-editor-active .campainButton,
.elementor-editor-active .bannerMask img,
.elementor-editor-active .hfe-site-logo-img,
.elementor-editor-active .logo-tiles-mosaic,
.elementor-editor-active .left_blue .elementor-widget-heading,
.elementor-editor-active .left_blue .elementor-widget-button,
.elementor-editor-active .whatWeDoSquare .elementor-widget-icon-box,
.elementor-editor-active .elementor-element-5f6a676 .elementor-widget-icon-box,
.elementor-editor-active .whyDirect img,
.elementor-editor-active .cloth-unfold-stage,
.elementor-editor-active .elementor-element-01f24e2,
.elementor-editor-active .textAnimation,
.elementor-editor-active .textAnimation .text-word,
.elementor-editor-active .textAnimation .text-word-wrap,
.elementor-editor-active .below_img,
.elementor-editor-active .below-img-mosaic,
.elementor-editor-active .below-img-tile,
.elementor-editor-active .below-img-bg-layer,
.elementor-editor-active .img_row > *,
.elementor-editor-active .elementor-element-26478ff > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

/* Accessibility: Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
    .left_blue,
    .right_white,
    .bannerTitle,
    .banT2,
    .campainButton,
    .bannerMask img,
    .hfe-site-logo-img,
    .logo-tiles-mosaic,
    .left_blue .elementor-widget-heading,
    .left_blue .elementor-widget-button,
    .whatWeDoSquare .elementor-widget-icon-box,
    .elementor-element-5f6a676 .elementor-widget-icon-box,
    .whyDirect img,
    .cloth-unfold-stage,
    .cloth-panel,
    .elementor-element-01f24e2,
    .textAnimation,
    .textAnimation .text-word,
    .textAnimation .text-word-wrap,
    .img_row > *,
    .elementor-element-26478ff > *,
    .below_img,
    .below-img-mosaic,
    .below-img-tile,
    .below-img-bg-layer {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        filter: none !important;
    }
}

/* ==========================================================================
   Section: whyDirect Image - Unique Holographic Print Registration Hover
   Features:
   1. Dynamic 3D Tactile Card Tilt & Perspective Elevation
   2. Precision Gold Print Crop Registration Brackets (TL, TR, BL, BR) that lock in
   3. Prismatic Holographic Spot-Gloss Foil Sheen that tracks the cursor
   4. Golden Ambient Backlight & Depth Elevation Shadow
   ========================================================================== */

.whyDirect .elementor-widget-image {
    position: relative;
    perspective: 1200px;
    transform-style: preserve-3d;
    cursor: pointer;
}

.whyDirect img,
.whyDirect .elementor-widget-image img {
    border-radius: 12px;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.4s ease;
    will-change: transform, box-shadow;
}

/* 1. Base 3D Lift & Luxury Ambient Glow */
.whyDirect:hover img,
.whyDirect .elementor-widget-image:hover img {
    box-shadow: 0 25px 50px -10px rgba(0, 32, 70, 0.32),
                0 0 28px rgba(255, 190, 11, 0.3) !important;
    filter: contrast(1.04) brightness(1.02);
}

/* 2. Prismatic Holographic Spot-Gloss Foil Sheen Overlay */
.whyDirect-foil-sheen {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    overflow: hidden;
    /* mix-blend-mode: color-dodge; */
    transition: opacity 0.4s ease;
    /* background: radial-gradient(
        circle 220px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(255, 255, 255, 0.7) 0%,
        rgba(255, 220, 130, 0.45) 30%,
        rgba(0, 230, 255, 0.3) 55%,
        rgba(255, 60, 180, 0.2) 75%,
        transparent 90%
    ); */
}

.whyDirect:hover .whyDirect-foil-sheen,
.whyDirect .elementor-widget-image:hover .whyDirect-foil-sheen {
    opacity: 1;
}

/* Diagonal shimmering metallic sweep on hover */
.whyDirect .elementor-widget-image::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -80%;
    width: 260%;
    height: 260%;
    /* background: linear-gradient(
        60deg,
        transparent 40%,
        rgba(255, 255, 255, 0.35) 48%,
        rgba(255, 225, 140, 0.55) 50%,
        rgba(255, 255, 255, 0.35) 52%,
        transparent 60%
    ); */
    transform: rotate(28deg) translateY(-120%);
    transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 7;
    border-radius: 12px;
}

.whyDirect:hover .elementor-widget-image::after,
.whyDirect .elementor-widget-image:hover::after {
    transform: rotate(28deg) translateY(120%);
    opacity: 1;
}

/* 3. Precision Print Registration Crop-Marks (⌜ ⌝ ⌞ ⌟) */
.whyDirect-crop-mark {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
    z-index: 8;
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, border-color 0.4s ease;
}

.whyDirect-crop-tl {
    top: 14px;
    left: 14px;
    border-top: 3px solid #ffbe0b;
    border-left: 3px solid #ffbe0b;
    transform: translate(-10px, -10px);
}

.whyDirect-crop-tr {
    top: 14px;
    right: 14px;
    border-top: 3px solid #ffbe0b;
    border-right: 3px solid #ffbe0b;
    transform: translate(10px, -10px);
}

.whyDirect-crop-bl {
    bottom: 14px;
    left: 14px;
    border-bottom: 3px solid #ffbe0b;
    border-left: 3px solid #ffbe0b;
    transform: translate(-10px, 10px);
}

.whyDirect-crop-br {
    bottom: 14px;
    right: 14px;
    border-bottom: 3px solid #ffbe0b;
    border-right: 3px solid #ffbe0b;
    transform: translate(10px, 10px);
}

/* Lock into place with crisp snap & golden glow on hover */
.whyDirect:hover .whyDirect-crop-mark,
.whyDirect .elementor-widget-image:hover .whyDirect-crop-mark {
    opacity: 1;
    transform: translate(0, 0);
    filter: drop-shadow(0 0 6px rgba(255, 190, 11, 0.8));
}
/* ==========================================================================
   Section: handleSection - Section 1 Particles Background Canvas
   Zero design alteration: preserves all original Elementor fonts, colors & layout
   ========================================================================== */

/* .handleSection,
.elementor-element-26c26ba {
    position: relative !important;
}


.handleSection #particles-js,
.handleSection-particles-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

.handleSection .particles-js-canvas-el {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    display: block !important;
}

.handleSection > .e-con-inner,
.handleSection > *:not(#particles-js) {
    position: relative !important;
    z-index: 1 !important;
} */

/* ==========================================================================
   Section: textAnimation - Universal Standard Kinetic Text Animation
   Universal reveal animation for any element or widget bearing .textAnimation
   Features:
   - Masked upward word cascade with smooth optical de-blur & opacity fade
   - Smooth Apple/Linear cubic-bezier ease-out curve
   - Synchronized accent-line expansion (e.g. .fancyheadright span:before)
   - Robust fallbacks for accessibility, non-JS, and Elementor editor
   ========================================================================== */

/* Base container: gentle entrance if word-splitting is not used or while loading */
.textAnimation {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    filter: blur(4px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.textAnimation.text-animated {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter: blur(0px) !important;
}

/* Once split into words, let individual words handle the masked animation */
.textAnimation.text-split-done {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Word Mask Wrapper: clips the upward sliding word */
.textAnimation .text-word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: inherit;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

/* Individual animated word item */
.textAnimation .text-word {
    display: inline-block;
    transform: translate3d(0, 115%, 0);
    opacity: 0;
    filter: blur(3px);
    transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--w-idx, 0) * 0.045s);
    will-change: transform, opacity, filter;
}

.textAnimation.text-animated .text-word {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    filter: blur(0px);
}

/* Accent lines expansion (e.g. .fancyheadright span:before, .fancyheadright span:after) */
.textAnimation.fancyheadright span:before,
.textAnimation.fancyheadright span:after,
.textAnimation .fancyheadright span:before,
.textAnimation .fancyheadright span:after {
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--total-words, 3) * 0.045s + 0.12s);
}

.textAnimation.text-animated.fancyheadright span:before,
.textAnimation.text-animated.fancyheadright span:after,
.textAnimation.text-animated .fancyheadright span:before,
.textAnimation.text-animated .fancyheadright span:after {
    transform: scaleX(1);
}


/* 3D carousel effect on existing Elementor row */
.img_row {
    perspective: 1000px !important;
    transform-style: preserve-3d !important;
}

/* Target the actual image boxes */
.img_row .elementor-widget-image-box {
    transform-style: preserve-3d;
    transition: 0.5s;
    filter: brightness(1);
}

/* Apply the 3D movement to the image itself */
.img_row .elementor-widget-image-box .elementor-image-box-img {
    transform-style: preserve-3d;
    transition: 0.5s;
}

/* Hovered image */
.img_row .elementor-widget-image-box:hover
.elementor-image-box-img {
    filter: brightness(1);
    transform: translateZ(170px);
}

/* First item to the right */
.img_row .elementor-widget-image-box:hover
+ .elementor-widget-image-box
.elementor-image-box-img {
    filter: brightness(0.6);
    transform: translateZ(120px) rotateY(25deg);
}

/* Second item to the right */
.img_row .elementor-widget-image-box:hover
+ .elementor-widget-image-box
+ .elementor-widget-image-box
.elementor-image-box-img {
    filter: brightness(0.4);
    transform: translateZ(50px) rotateY(15deg);
}

/* First item to the left */
.img_row .elementor-widget-image-box:has(
    + .elementor-widget-image-box:hover
) .elementor-image-box-img {
    filter: brightness(0.6);
    transform: translateZ(120px) rotateY(-25deg);
}

/* Second item to the left */
.img_row .elementor-widget-image-box:has(
    + .elementor-widget-image-box
    + .elementor-widget-image-box:hover
) .elementor-image-box-img {
    filter: brightness(0.4);
    transform: translateZ(50px) rotateY(-15deg);
}

/* Smooth transitions for images */
.img_row .elementor-image-box-img img {
    transition: filter 0.5s;
}


/* ==========================================================================
   Section: img_row - 3D Perspective Coverflow Carousel Hover Animation
   Preserves all existing Elementor typography, card dimensions, layout & colors
   ========================================================================== */

.img_row,
.elementor-element-26478ff {
    display: var(--display, grid) !important;
    grid-template-columns: var(--e-con-grid-template-columns, repeat(4, 1fr)) !important;
    gap: var(--gap, 12px) !important;
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
}

/* Individual Card Items */
.img_row > .elementor-widget-image-box,
.img_row > *,
.elementor-element-26478ff > .elementor-widget-image-box {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.5s ease;
    will-change: transform, filter;
    cursor: pointer;
    filter: brightness(1);
    position: relative;
}

/* Desktop & Tablet 3D Fan / Coverflow Animation */
@media (min-width: 768px) {
    /* Hovered Card: pops forward along Z-axis */
    .img_row > .elementor-widget-image-box:hover,
    .img_row > *:hover,
    .elementor-element-26478ff > .elementor-widget-image-box:hover,
    .img_row > .elementor-widget-image-box.is-3d-hovered,
    .elementor-element-26478ff > .elementor-widget-image-box.is-3d-hovered {
        filter: brightness(1) !important;
        transform: translateZ(170px) !important;
        z-index: 10 !important;
    }

    /* 1 Item to the Right (+ *) */
    .img_row > .elementor-widget-image-box:hover + .elementor-widget-image-box,
    .img_row > *:hover + *,
    .elementor-element-26478ff > .elementor-widget-image-box:hover + .elementor-widget-image-box,
    .img_row > .elementor-widget-image-box.is-3d-next-1,
    .elementor-element-26478ff > .elementor-widget-image-box.is-3d-next-1 {
        filter: brightness(0.6) !important;
        transform: translateZ(120px) rotateY(25deg) !important;
        z-index: 8 !important;
    }

    /* 2 Items to the Right (+ * + *) */
    .img_row > .elementor-widget-image-box:hover + .elementor-widget-image-box + .elementor-widget-image-box,
    .img_row > *:hover + * + *,
    .elementor-element-26478ff > .elementor-widget-image-box:hover + .elementor-widget-image-box + .elementor-widget-image-box,
    .img_row > .elementor-widget-image-box.is-3d-next-2,
    .elementor-element-26478ff > .elementor-widget-image-box.is-3d-next-2 {
        filter: brightness(0.4) !important;
        transform: translateZ(50px) rotateY(15deg) !important;
        z-index: 6 !important;
    }

    /* 3 Items to the Right (+ * + * + *) */
    .img_row > .elementor-widget-image-box:hover + .elementor-widget-image-box + .elementor-widget-image-box + .elementor-widget-image-box,
    .img_row > *:hover + * + * + *,
    .elementor-element-26478ff > .elementor-widget-image-box:hover + .elementor-widget-image-box + .elementor-widget-image-box + .elementor-widget-image-box,
    .img_row > .elementor-widget-image-box.is-3d-next-3,
    .elementor-element-26478ff > .elementor-widget-image-box.is-3d-next-3 {
        filter: brightness(0.35) !important;
        transform: translateZ(20px) rotateY(8deg) !important;
        z-index: 4 !important;
    }

    /* 1 Item to the Left (:has(+ *:hover)) */
    .img_row > .elementor-widget-image-box:has(+ .elementor-widget-image-box:hover),
    .img_row > *:has(+ *:hover),
    .elementor-element-26478ff > .elementor-widget-image-box:has(+ .elementor-widget-image-box:hover),
    .img_row > .elementor-widget-image-box.is-3d-prev-1,
    .elementor-element-26478ff > .elementor-widget-image-box.is-3d-prev-1 {
        filter: brightness(0.6) !important;
        transform: translateZ(120px) rotateY(-25deg) !important;
        z-index: 8 !important;
    }

    /* 2 Items to the Left (:has(+ * + *:hover)) */
    .img_row > .elementor-widget-image-box:has(+ .elementor-widget-image-box + .elementor-widget-image-box:hover),
    .img_row > *:has(+ * + *:hover),
    .elementor-element-26478ff > .elementor-widget-image-box:has(+ .elementor-widget-image-box + .elementor-widget-image-box:hover),
    .img_row > .elementor-widget-image-box.is-3d-prev-2,
    .elementor-element-26478ff > .elementor-widget-image-box.is-3d-prev-2 {
        filter: brightness(0.4) !important;
        transform: translateZ(50px) rotateY(-15deg) !important;
        z-index: 6 !important;
    }

    /* 3 Items to the Left (:has(+ * + * + *:hover)) */
    .img_row > .elementor-widget-image-box:has(+ .elementor-widget-image-box + .elementor-widget-image-box + .elementor-widget-image-box:hover),
    .img_row > *:has(+ * + * + *:hover),
    .elementor-element-26478ff > .elementor-widget-image-box:has(+ .elementor-widget-image-box + .elementor-widget-image-box + .elementor-widget-image-box:hover),
    .img_row > .elementor-widget-image-box.is-3d-prev-3,
    .elementor-element-26478ff > .elementor-widget-image-box.is-3d-prev-3 {
        filter: brightness(0.35) !important;
        transform: translateZ(20px) rotateY(-8deg) !important;
        z-index: 4 !important;
    }
}

/* Mobile: clean upward elevation without horizontal rotation */
@media (max-width: 767px) {
    .img_row > .elementor-widget-image-box:hover,
    .img_row > *:hover,
    .elementor-element-26478ff > .elementor-widget-image-box:hover {
        transform: translateY(-8px) scale(1.02) !important;
        filter: brightness(1) !important;
    }
}


/* Button arrow animation */
.campainButton .elementor-button-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.35s ease;
}

/* Arrow moves right on hover */
.campainButton .elementor-button:hover .elementor-button-icon {
    animation: campaignArrowMove 0.65s ease-in-out;
}

/* Arrow movement */
@keyframes campaignArrowMove {
    0% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(8px);
    }
    65% {
        transform: translateX(-3px);
    }
    100% {
        transform: translateX(0);
    }
}

/* Optional: subtle button lift */
.campainButton .elementor-button {
    transition: transform 0.3s ease;
}

.campainButton .elementor-button:hover {
    transform: translateY(-2px);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .campainButton .elementor-button,
    .campainButton .elementor-button-icon {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Section: below_img - Background Image Square Tiles Join Animation
   Modeled precisely after .hfe-site-logo-img logo tiles mosaic entrance
   ========================================================================== */

.below_img,
.elementor-element-f29ae12 {
    position: relative !important;
    overflow: hidden !important;
    min-height: 376px;
}

/* Default background image fallback */
.below_img,
.elementor-element-f29ae12 {
    background-image: url("https://dreamlogodesign.net/dev/mailkinggroup/wp-content/uploads/2026/10/bottom-footerbg.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Seamless underlying background layer for clean crossfade handoff */
.below-img-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://dreamlogodesign.net/dev/mailkinggroup/wp-content/uploads/2026/10/bottom-footerbg.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

.below_img.below-img-assembled .below-img-bg-layer,
.below_img.below-img-loaded .below-img-bg-layer {
    opacity: 1 !important;
}

/* Ensure inner content remains crisp, clickable, and elevated above the background mosaic */
.below_img > .e-con-inner,
.below_img > *:not(.below-img-mosaic):not(.below-img-bg-layer),
.elementor-element-f29ae12 > .e-con-inner {
    position: relative !important;
    z-index: 5 !important;
}

/* 3D Mosaic Grid Stage */
.below-img-mosaic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    perspective: 800px;
    overflow: hidden;
}

/* Individual Background Tiles */
.below-img-tile {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    background-repeat: no-repeat;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
/* -------------------------------- sangita end ---------------------------------------- */