.send-money-hero {

position: relative;


overflow: hidden;


padding: 110px 0 100px;


background:
    linear-gradient(
        135deg,
        #f8fbff 0%,
        #eef7ff 55%,
        #e7f3ff 100%
    );

}

.send-money-hero::before {

content: "";


position: absolute;


width: 420px;


height: 420px;


top: -220px;


right: -140px;


border-radius: 50%;


background: rgba(59, 130, 246, 0.08);

}

.send-money-hero::after {

content: "";


position: absolute;


width: 300px;


height: 300px;


bottom: -190px;


left: -130px;


border-radius: 50%;


background: rgba(147, 197, 253, 0.09);

}

.send-money-hero .container,
.send-money-features .container,
.send-money-process .container,
.send-money-cta .container {

width: min(
    calc(100% - 40px),
    1180px
);


margin: 0 auto;

}

/* =========================================================
HERO CONTAINER
========================================================= */

.send-money-hero-container {

position: relative;


z-index: 2;


display: grid;


grid-template-columns:
    minmax(0, 1fr)
    minmax(360px, 0.8fr);


align-items: center;


gap: 80px;

}

/* =========================================================
HERO CONTENT
========================================================= */

.send-money-hero-content {

max-width: 650px;

}

.section-label {

display: inline-block;


color: #2563eb;


font-size: 11px;


font-weight: 800;


letter-spacing: 0.7px;


text-transform: uppercase;

}

.send-money-hero-content h1 {

margin: 15px 0 20px;


color: #0f172a;


font-size: clamp(
    42px,
    5vw,
    64px
);


line-height: 1.04;


font-weight: 800;


letter-spacing: -2.8px;

}

.send-money-hero-content h1 span {

display: block;


color: #3b82f6;

}

.send-money-hero-content > p {

max-width: 570px;


margin: 0;


color: #64748b;


font-size: 16px;


line-height: 1.8;

}

/* =========================================================
HERO ACTIONS
========================================================= */

.send-money-actions {

display: flex;


align-items: center;


gap: 12px;


margin-top: 30px;

}

.send-money-btn {

min-height: 48px;


display: inline-flex;


align-items: center;


justify-content: center;


gap: 8px;


padding: 0 21px;


border-radius: 10px;


font-size: 13px;


font-weight: 700;


text-decoration: none;


transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.send-money-btn-primary {

border: 1px solid #3b82f6;


background: #3b82f6;


color: #ffffff;


box-shadow:
    0 12px 25px
    rgba(59, 130, 246, 0.15);

}

.send-money-btn-primary:hover {

border-color: #2563eb;


background: #2563eb;


color: #ffffff;


transform: translateY(-2px);


box-shadow:
    0 15px 30px
    rgba(59, 130, 246, 0.20);

}

.send-money-btn-secondary {

border: 1px solid #dbe3ee;


background: #ffffff;


color: #334155;

}

.send-money-btn-secondary:hover {

border-color: #bfdbfe;


background: #eff6ff;


color: #2563eb;


transform: translateY(-2px);

}

/* =========================================================
HERO NOTE
========================================================= */

.send-money-note {

display: flex;


align-items: center;


gap: 8px;


margin-top: 20px;


color: #64748b;


font-size: 11px;

}

.send-money-note i {

color: #3b82f6;


font-size: 16px;

}

/* =========================================================
HERO VISUAL
========================================================= */

.send-money-visual {

position: relative;


min-height: 440px;


display: flex;


align-items: center;


justify-content: center;

}

/* =========================================================
TRANSFER CARD
========================================================= */

.transfer-card {

position: relative;


width: min(
    100%,
    390px
);


min-height: 355px;


padding: 30px;


overflow: hidden;


border: 1px solid #bfdbfe;


border-radius: 28px;


background:
    linear-gradient(
        145deg,
        #ffffff 0%,
        #f1f8ff 100%
    );


box-shadow:
    0 30px 70px
    rgba(37, 99, 235, 0.11);


transform: rotate(-2deg);

}

.transfer-card::before {

content: "";


position: absolute;


width: 240px;


height: 240px;


top: -110px;


right: -80px;


border-radius: 50%;


background:
    rgba(59, 130, 246, 0.07);

}

.transfer-card-header {

position: relative;


z-index: 1;


display: flex;


align-items: center;


justify-content: space-between;


color: #64748b;


font-size: 11px;


font-weight: 700;

}

.transfer-card-header i {

color: #94a3b8;

}

/* =========================================================
TRANSFER USER
========================================================= */

.transfer-user {

display: flex;


align-items: center;


gap: 13px;


margin-top: 50px;

}

.transfer-avatar {

width: 54px;


height: 54px;


display: flex;


align-items: center;


justify-content: center;


flex-shrink: 0;


border-radius: 50%;


background: #dbeafe;


color: #2563eb;


font-size: 18px;


font-weight: 800;

}

.transfer-user > div:last-child {

display: flex;


flex-direction: column;

}

.transfer-user span {

color: #94a3b8;


font-size: 10px;

}

.transfer-user strong {

margin-top: 4px;


color: #0f172a;


font-size: 13px;

}

/* =========================================================
TRANSFER AMOUNT
========================================================= */

.transfer-amount {

margin-top: 36px;

}

.transfer-amount span {

display: block;


color: #94a3b8;


font-size: 10px;

}

.transfer-amount strong {

display: block;


margin-top: 5px;


color: #0f172a;


font-size: 31px;


line-height: 1.1;


font-weight: 800;


letter-spacing: -1px;

}

.transfer-divider {

width: 100%;


height: 1px;


margin: 26px 0 18px;


background: #dbe3ee;

}

/* =========================================================
TRANSFER DETAILS
========================================================= */

.transfer-details {

display: flex;


align-items: center;


justify-content: space-between;

}

.transfer-details > div {

display: flex;


flex-direction: column;

}

.transfer-details span {

color: #94a3b8;


font-size: 10px;

}

.transfer-details strong {

margin-top: 3px;


color: #475569;


font-size: 12px;

}

.transfer-details > i {

color: #3b82f6;


font-size: 19px;

}

/* =========================================================
FLOATING STATUS
========================================================= */

.transfer-status {

position: absolute;


right: 0;


bottom: 30px;


display: flex;


align-items: center;


gap: 11px;


padding: 14px 17px;


border: 1px solid #e2e8f0;


border-radius: 14px;


background: #ffffff;


box-shadow:
    0 18px 40px
    rgba(15, 23, 42, 0.09);

}

.transfer-status-icon {

width: 39px;


height: 39px;


display: flex;


align-items: center;


justify-content: center;


border-radius: 10px;


background: #eff6ff;


color: #3b82f6;


font-size: 16px;

}

.transfer-status > div:last-child {

display: flex;


flex-direction: column;

}

.transfer-status strong {

color: #0f172a;


font-size: 12px;

}

.transfer-status span {

margin-top: 3px;


color: #94a3b8;


font-size: 10px;

}

/* =========================================================
FEATURES
========================================================= */

.send-money-features {

padding: 100px 0;


background: #ffffff;

}

.section-heading {

max-width: 650px;


margin-bottom: 45px;

}

.section-heading h2 {

margin: 12px 0 14px;


color: #0f172a;


font-size: clamp(
    32px,
    4vw,
    44px
);


line-height: 1.12;


font-weight: 800;


letter-spacing: -1.6px;

}

.section-heading p {

margin: 0;


color: #64748b;


font-size: 15px;


line-height: 1.75;

}

/* =========================================================
FEATURE GRID
========================================================= */

.send-money-feature-grid {

display: grid;


grid-template-columns:
    repeat(
        3,
        minmax(0, 1fr)
    );


gap: 18px;

}

.send-money-feature-card {

padding: 30px;


border: 1px solid #e2e8f0;


border-radius: 20px;


background: #ffffff;


transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.send-money-feature-card:hover {

transform: translateY(-5px);


border-color: #bfdbfe;


box-shadow:
    0 20px 45px
    rgba(37, 99, 235, 0.07);

}

.send-money-feature-icon {

width: 52px;


height: 52px;


display: flex;


align-items: center;


justify-content: center;


border-radius: 14px;


background: #eff6ff;


color: #3b82f6;


font-size: 21px;

}

.send-money-feature-card h3 {

margin: 22px 0 9px;


color: #0f172a;


font-size: 18px;


font-weight: 800;

}

.send-money-feature-card p {

margin: 0;


color: #64748b;


font-size: 13px;


line-height: 1.75;

}

/* =========================================================
PROCESS
========================================================= */

.send-money-process {

padding: 100px 0;


background: #f8fbff;

}

.send-money-process-grid {

display: grid;


grid-template-columns:
    repeat(
        3,
        minmax(0, 1fr)
    );


gap: 18px;

}

.send-money-process-card {

position: relative;


padding: 30px;


border: 1px solid #e2e8f0;


border-radius: 20px;


background: #ffffff;

}

.process-number {

position: absolute;


top: 21px;


right: 22px;


color: #dbeafe;


font-size: 12px;


font-weight: 800;

}

.process-icon {

width: 52px;


height: 52px;


display: flex;


align-items: center;


justify-content: center;


border-radius: 14px;


background: #eff6ff;


color: #3b82f6;


font-size: 21px;

}

.send-money-process-card h3 {

margin: 22px 0 9px;


color: #0f172a;


font-size: 17px;


font-weight: 800;

}

.send-money-process-card p {

margin: 0;


color: #64748b;


font-size: 13px;


line-height: 1.75;

}

/* =========================================================
CTA
========================================================= */

.send-money-cta {

padding: 90px 0;


background: #ffffff;

}

.send-money-cta-card {

display: flex;


align-items: center;


justify-content: space-between;


gap: 30px;


padding: 45px 50px;


border: 1px solid #bfdbfe;


border-radius: 25px;


background:
    linear-gradient(
        135deg,
        #eaf4ff 0%,
        #f6faff 100%
    );

}

.send-money-cta-content {

max-width: 650px;

}

.send-money-cta-content span {

color: #2563eb;


font-size: 11px;


font-weight: 800;

}

.send-money-cta-content h2 {

margin: 9px 0;


color: #0f172a;


font-size: clamp(
    28px,
    4vw,
    40px
);


line-height: 1.15;


font-weight: 800;


letter-spacing: -1px;

}

.send-money-cta-content p {

margin: 0;


color: #64748b;


font-size: 14px;


line-height: 1.7;

}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 950px) {

.send-money-hero-container {


    grid-template-columns: 1fr;


    gap: 65px;


}




.send-money-hero-content {


    max-width: 700px;


}




.send-money-visual {


    min-height: 410px;


}




.send-money-feature-grid,
.send-money-process-grid {


    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );


}




.send-money-feature-card:last-child,
.send-money-process-card:last-child {


    grid-column: 1 / -1;


}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

.send-money-hero {


}




.send-money-feature-grid,
.send-money-process-grid {


    grid-template-columns: 1fr;


}




.send-money-feature-card:last-child,
.send-money-process-card:last-child {


    grid-column: auto;


}




.send-money-feature-card,
.send-money-process-card {


    padding: 24px;


    border-radius: 17px;


}




.send-money-cta {


    padding: 60px 0;


}




.send-money-cta-card {


    flex-direction: column;


    align-items: stretch;


    padding: 30px 24px;


    border-radius: 21px;


}




.send-money-cta-content h2 {


    font-size: 29px;


}




.send-money-cta-content p {


    font-size: 13px;


}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

.send-money-hero .container,


    min-height: 320px;


}




.transfer-card {


    width:
        calc(100% - 18px);


    min-height: 285px;


    padding: 20px;


}




.transfer-user {


    margin-top: 30px;


}




.transfer-avatar {


    width: 45px;


    height: 45px;


    font-size: 16px;


}




.transfer-amount {


    margin-top: 22px;


}




.transfer-amount strong {


    font-size: 24px;


}




.transfer-status {


    padding: 10px 12px;


}




.transfer-status-icon {


    width: 33px;


    height: 33px;


}




.send-money-feature-card,
.send-money-process-card {


    padding: 22px;


}