/*==================================================
Money Transfer Section
==================================================*/

.money-transfer-section{
    position: relative;
    padding:0px 0px;
    background:#ede5dc;
    overflow:hidden;
}

.transfer-stage{
    position:relative;
    width:100%;
    max-width:1400px;
    height:760px;
    margin:0 auto;
}

/*========================================
Sender & Receiver
========================================*/

.sender,
.receiver{
    position:absolute;
    z-index:10;
}

.sender{
    left:0;
    bottom:0;
}

.receiver{
    right:0;
    bottom:0;
}

.person-img{
    display:block;
    width:320px;
    max-width:100%;
    height:auto;
}

/*========================================
Center Title
========================================*/

.transfer-title{
    position:absolute;

    left:50%;
    top:52%;

    transform:translate(-50%,-50%);

    text-align:center;

    width:520px;

    z-index:20;
}

.transfer-title h2{

    font-size:68px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-2px;
    color:#1d1d1d;

    margin:0;
}

/*========================================
Arrow
========================================*/

.transfer-arrow{

    position:absolute;

    left:50%;
    top:150px;

    transform:translateX(-50%);

    width:900px;
    height:auto;

    overflow:visible;

    z-index:1;
}

.transfer-arrow path{

    stroke:#f47c20;

    stroke-width:5;

    fill:none;

    stroke-linecap:round;

    stroke-dasharray:12 12;
}

.transfer-arrow polygon{

    fill:#f47c20;
}

/*==================================================
Transfer Bubbles
==================================================*/

.transfer-bubble{
    position:absolute;
    display:flex;
    align-items:center;
    gap:14px;

    background:#ffffff;
    border-radius:18px;

    padding:16px 20px;

    min-width:240px;

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

    opacity:0;

    transform:scale(.8);

    z-index:30;
}

/* Logo */

.bubble-logo{
    width:48px;
    height:48px;
    border-radius:12px;
    object-fit:cover;
}

/* Text */

.bubble-content h6{
    margin:0;
    font-size:17px;
    font-weight:700;
    color:#222;
}

.bubble-content p{
    margin:3px 0 0;
    font-size:15px;
    color:#666;
}

.bubble-content small{
    display:block;
    margin-top:6px;
    font-size:13px;
    color:#888;
}

/*=========================================
Bubble Positions
=========================================*/

/* Bubble 1 */

.bubble-send{

    left:80px;
    bottom:230px;
    min-width:270px;
}

/* Bubble 2 */

.bubble-account{

    left:34%;
    top:120px;
}

/* Bubble 3 */

.bubble-money{

    right:28%;
    top:150px;
}

/* Bubble 4 */

.bubble-received{

    right:90px;
    bottom:230px;

    min-width:270px;
}

/*=========================================
Received Icon
=========================================*/

.received-icon{

    width:50px;
    height:50px;

    background:#22c55e;

    color:#fff;

    border-radius:50%;

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

    font-size:24px;
    font-weight:bold;

    flex-shrink:0;
}

/*==================================================
Section Decoration
==================================================*/

.money-transfer-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    left:-260px;
    top:-180px;
    border-radius:50%;
    background:rgba(244,124,32,.08);
    filter:blur(60px);
}

.money-transfer-section::after{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    right:-220px;
    bottom:-180px;
    border-radius:50%;
    background:rgba(244,124,32,.08);
    filter:blur(60px);
}


/*==================================================
Floating Effect
==================================================*/

.sender,
.receiver{
    animation:personFloat 4s ease-in-out infinite;
}

.receiver{
    animation-delay:2s;
}

@keyframes personFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}


/*==================================================
Bubble Hover Shadow
==================================================*/

.transfer-bubble{

    transition:.35s;
}

.transfer-bubble:hover{

    transform:translateY(-5px);

    box-shadow:0 30px 60px rgba(0,0,0,.18);

}


/*==================================================
Responsive
==================================================*/

@media(max-width:1200px){

.transfer-stage{

    height:620px;

}

.person-img{

    width:260px;

}

.transfer-title{

    width:420px;

}

.transfer-title h2{

    font-size:52px;

}

.transfer-arrow{

    width:760px;

}

}



@media(max-width:991px){

.transfer-stage{

    height:980px;

}

.sender{

    left:50%;
    top:40px;
    bottom:auto;

    transform:translateX(-50%);

}

.receiver{

    left:50%;
    right:auto;

    bottom:40px;

    transform:translateX(-50%);

}

.transfer-title{

    top:50%;
    width:90%;

}

.transfer-title h2{

    font-size:46px;

}

.transfer-arrow{

    display:none;

}

.transfer-bubble{

    display:none;

}

}



@media(max-width:576px){

.money-transfer-section{

    padding:80px 0;

}

.transfer-stage{

    height:850px;

}

.person-img{

    width:210px;

}

.transfer-title h2{

    font-size:36px;
    line-height:1.15;

}

}

/*==============================
Status Icons
==============================*/

.status-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.sent-icon{
    background:#f47c20;
}

.received-icon{
    background:#22c55e;
}

/*====================================
Account Icon
====================================*/

.account-icon{
    background:#2563eb;
}

.bubble-account{

    left:24%;
    top:80px;
    min-width:280px;

}

/*====================================
Sending Money
====================================*/

.money-icon{
    background:#f59e0b;
}

.bubble-money{

    right:26%;
    top:80px;
    min-width:280px;

}

#transferDot{

    filter:drop-shadow(0 0 12px rgba(244,124,32,.7));

}