.conin{
    background-color: #216D57;
    text-align: center;
    padding: 3rem;
    color: white;
    font-family: 'League Spartan', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;
}

.conin .btn-donate{
    background-color: #D9D9D9;
    color: #216D57;

}



:root {
    --clr-theme: #216D57;
    --font-theme: "League Spartan", serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.msg__container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.msg__wrapper {
    --img-size: 2.5rem;
    --padding: 2rem;

    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    /* isolation: isolate; */
}

.msg__container.wavy>.msg__wrapper:nth-child(odd) {
    margin-left: 10%;
}

.msg__container.wavy>.msg__wrapper:nth-child(even) {
    margin-left: 20%;
}

.msg__container.wavy>.msg__wrapper:nth-child(odd):not(:last-child)::after {
    content: '';
    background-image: url("../assets/llline.svg");
    background-repeat: no-repeat;
    position: absolute;
    width: 150px;
    height: 55px;
    transform: rotate(55deg) translate(20px, 75px);
    z-index: -1;
}

.msg__container.wavy>.msg__wrapper:nth-child(even):not(:last-child)::after {
    content: '';
    background-image: url("../assets/llline.svg");
    background-repeat: no-repeat;
    position: absolute;
    width: 150px;
    height: 55px;
    transform: rotate(110deg) translate(70px, 85px);
    z-index: -1;
}

.msg__wrapper .rel {
    position: relative;
    /* isolation: isolate; */
    width: clamp(250px, 75%, 100%);
}

.msg__wrapper .msg__ico {
    position: absolute;
    z-index: 9;
    background-color: #D9D9D9;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid hsl(220, 13%, 72%);
    text-align: center;
    padding: var(--padding);
}

.connector {
    position: absolute;
    border: 2px solid red;
    z-index: 99;
}

.msg__wrapper .msg__ico.size1 {
    --img-size: 1px;
    /* height: calc(var(--img-size) + calc(2 * var(--padding))); */
}

.msg__wrapper .msg__ico.size2 {
    --img-size: 4rem;
}

.msg__wrapper .msg__ico.pos1 {
    top: 0;
    left: 0;
    transform: translate(-50%, calc(var(--padding) * -1 / 2));
}

.msg__wrapper .msg__ico.pos2 {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.msg__wrapper .msg__ico.pos3 {
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}

.msg__ico img {
    height: var(--img-size);
    aspect-ratio: 1;
    object-fit: contain;
}

.msg__txt {
    font-family: var(--font-theme);
    background-color: var(--clr-theme);
    color: #fff;
    margin: 0;
    padding: 0 0 0 5rem;
    border-radius: 12px;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: calc(var(--img-size) + var(--padding));
    text-wrap: nowrap;
}

.msg__wrapper .msg__ico.size2~.msg__txt {
    display: flex;
    /* Enable flexbox */
    align-items: center;
    /* Center vertically */
    justify-content: center;
    /* Center horizontally */
    text-align: center;
    /* Ensure text alignment is centered */
    line-height: 2rem;
    /* Reset line-height for consistent spacing */
    height: 100%;
    /* Ensure the element takes the full height of the container */
    padding: 1rem;
    /* Optional: Add padding for better spacing */
}

/* Media Query for Mobile Screens (max-width: 430px) */
@media screen and (max-width: 430px) {
    :root {
        --img-size: 2rem;
        /* Scaled-down icon size */
        --padding: 0.8rem;
        /* Adjust padding for icons */
    }

    .msg__container {
        gap: 1.5rem;
        /* Reduce spacing between elements */
        padding: 3rem;
        /* Add padding for container */
        width: 100%;
        /* Ensure container fits the screen */
        overflow-x: hidden;
        /* Prevent horizontal overflow */
    }

    .msg__wrapper {
        flex-direction: row;
        /* Keep items in a row */
        align-items: center;
        /* Vertically center icon and text */
        gap: 1rem;
        /* Add spacing between icon and text */
        text-align: left;
        /* Keep text aligned to the left */
        width: 100%;
        /* Ensure the wrapper doesn’t overflow */
    }

    .msg__ico {
        margin: 0;
        /* Remove additional margins */
        padding: var(--padding);
        /* Adjust padding for smaller size */
        width: calc(var(--img-size) + var(--padding));
        /* Dynamically adjust width */
        height: calc(var(--img-size) + var(--padding));
        /* Dynamically adjust height */
        box-sizing: border-box;
        /* Ensure padding is included in the width/height */
    }

    .msg__ico img {
        height: var(--img-size);
        /* Adjust image size within icon */
        width: var(--img-size);
        /* Keep width consistent */
        object-fit: contain;
        /* Maintain aspect ratio */
    }

    .msg__txt {
        font-size: 1rem;
        /* Scale down text size */
        line-height: 1.4rem;
        /* Adjust line spacing */
        padding: 0.5rem 1rem;
        /* Add padding for readability */
        border-radius: 8px;
        /* Slightly smaller rounded corners */
        overflow-wrap: break-word;
        /* Ensure text breaks correctly */
    }

    .msg__container.wavy>.msg__wrapper:nth-child(odd),
    .msg__container.wavy>.msg__wrapper:nth-child(even) {
        margin-left: 0;
        /* Remove left margin */
    }

    .msg__container.wavy>.msg__wrapper:nth-child(odd):not(:last-child)::after,
    .msg__container.wavy>.msg__wrapper:nth-child(even):not(:last-child)::after {
        display: none;
        /* Hide decorative lines for simplicity */
    }

    /* Ensure modal content is well contained on small screens */
    #modalMessageContent {
        word-wrap: break-word;
        /* Ensure long error messages do not overflow */
    }
}