.donation-container {
    display: grid;
    grid-template-columns: 44% 54%;
    gap: 20px;
    border-radius: var(--radius);
}

.donation-box {
    width: 100%;
    height: 100%;
    padding: 30px 40px;
    background-color: #fff;
    border-radius: 32px;
    /* display: grid; */
    /* gap: 15px; */
}

.donation-container .donation-box:nth-child(1) {
    background-color: #d1e4fc;
}
.donation-container .donation-box:nth-child(2) {
    background-color: #fff;
    box-shadow: 0 5px 30px rgba(58, 58, 58, 0.15);
}

.action-box {
    display: grid;
    gap: 18px;
}

.donation-item-box {
    display: grid;
    grid-template-columns: 41% 56%;
    align-items: center;
    gap: 20px;
    /* margin-top: 30px; */
}

.donation-item {
    background: var(--secondary-color);
    padding: 30px 30px;
    border-radius: 32px;
    position: relative;

    &::before {
        content: "";
        position: absolute;
        width: 49px;
        height: 1px;
        background: var(--primary-color);
        border-radius: 50px;
        top: 50%;
        left: -25px;
        /* opacity: 0.7; */
    }
}

.donation-item-tit {
    font-family: 'SB-Aggro';
    font-weight: 400;
    font-size: var(--font-xxxl);
    color: #032b5c;
}
.donation-item-text {
    color: #032b5ccc;
    font-size: var(--font-m);
    font-weight: 500;
    line-height: 1.6;
    margin-top: 15px;
}

.donation-item .donation-purpose {
	margin-top: 30px;
    display: flex;
    font-size: var(--font-l);
    font-weight: 600;
    color: #032b5c;
    span {
        font-size: var(--font-4xl);
        color: var(--primary-color);
    }

    &::before {
        content: "";
        width: 3px;
        height: 55px;
        background-color: #cbd1e0;
        margin-right: 15px;
        margin-top: 7px;
        border-radius: 50px;
    }
}

.pie-chart {
    width: 280px;
    height: 280px;
    position: relative;
    display: grid;
    /*gap: 10px;*/
    justify-items: center;
    place-content: center;
    font-size: 21px;
    font-weight: 600;
    color: #667085;
    border-radius: 50%;

    span {
        margin-top: 10px;
        color: var(--primary-color);
    }

    .percent-text {
        font-size: 50px;
        color: #000;
        position: relative;
    }
    .percent-text::after {
        content: "";
        position: absolute;
        display: block;
        background-color: #cfd5e4;
        left: -5px;
        width: 160px;
        height: 1px;
    }

    &:before {
        --line: 25px;
        --color: var(--c, #444);

        content: "";
        position: absolute;
        border-radius: 50%;
        inset: 0;
        background: conic-gradient(var(--color) calc(var(--p) * 1%), #e0e0e0 0);
        mask: radial-gradient(farthest-side, transparent calc(93% - var(--line)), #000 calc(94% - var(--line)));
    }

    &:after {
        content: "";
        font-size: 14px;
        margin-right: -4px;
    }
}

.submit-btn {
    width: 100%;
    height: 80px;
    background: var(--primary-color);
    color: #fff;
    font-size: var(--font-l);
    border: none;
    border-radius: 50px;
    cursor: pointer;
}
.select-wrapper {
    position: relative;
    display: inline-block;
}
.donation-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: var(--font-l);
    width: 100%;
    height: 70px;
    border: none;
    border-radius: 50px;
    background-color: #fff;
    color: #111111;
    font-weight: 600;
    background-image: url("/resources/ottcms/newImg/arrow_blk.png");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 24px 24px;
    padding: 0 30px;
}

.input-wrapper {
    position: relative;
    display: inline-block;
    align-items: center;
}

.input-wrapper input {
    width: 100%;
    height: 70px;
    border: none;
    font-size: var(--font-l);
    border-radius: 50px;
    color: #111111;
    font-weight: 600;
    padding: 0 30px;
}

.input-wrapper .donation-amount-display {
    width: 100%;
    min-height: 70px;
    border: none;
    border-radius: 50px;
/*     color: #b8b8b8; */
	color: #444547;
/*     background-color: #fff; */
    font-size: var(--font-l);
/*     font-weight: 600; */
    padding: 0 30px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    background-color: #e9e9e9;
}

/* Responsive Screens */
@media (max-width: 1800px) {
    .donation-box {
        padding: 80px 70px;
    }
}
@media (max-width: 1680px) {
    .donation-container {
        grid-template-columns: 100%;
        gap: 30px;
    }
    .donation-box {
        padding: 70px;
    }
    .donation-item {
        padding: 40px;
    }
}
@media (max-width: 1024px) {
    .donation-container {
        grid-template-columns: 100%;
        gap: 30px;
    }
    .donation-box {
        padding: 50px;
    }
    .donation-item-box {
        grid-template-columns: 40% 58%;
    }
    .donation-item {
        padding: 30px;
    }
    .pie-chart {
        width: 250px;
        height: 250px;
        font-size: 15px;

        .percent-text {
            font-size: 40px;
        }
        .percent-text::after {
            width: 120px;
        }
    }
}

@media (max-width: 768px) {
    .donation-container {
        grid-template-columns: 100% !important;
    }
    .donation-box {
        padding: 30px;
    }
    .action-box {
        gap: 20px;
    }
    .donation-item-box {
        grid-template-columns: 100%;
        align-items: center;
        justify-items: center;
        gap: 20px;
    }

    .donation-item .donation-purpose {
        &::before {
            height: 45px;
        }
    }

    .donation-item {
        padding: 30px;
        &::before {
            content: "";
            height: 49px;
            width: 1px;
            top: -25px;
            left: 50%;
        }
    }

    .input-wrapper .donation-amount-display {
        min-height: 70px;
        padding: 12px 20px;
        font-size: var(--font-m);
        line-height: 1.4;
        align-items: flex-start;
    }
}

@media (max-width: 350px) {
    .donation-item {
        padding: 30px 20px;
    }
    .pie-chart {
        width: 200px;
        height: 200px;
        font-size: 14px;

        .percent-text {
            font-size: 30px;
        }
        .percent-text::after {
            width: 120px;
        }
    }
}