:root {
    --black-color: #000;
    --theme-color: #274358;
    --white-color: #fff;
    --dark-gray: #274358;
}

#primary {
    width: 100%;

}

#donation-form-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.9);
    width: 100vw;
    height: 100vh;
    padding: 10px 20px;
    display: none;
    justify-content: center;
}

.ast-container {

    padding: 0 !important;

}

.widget-area {

    display: none;

}
.donation-desc {

    font-size: 14px;

}
.form-input {
    font-size: 16px;
    padding: 10px;
    border-radius: 6px;
    border: 0.5px solid #000 !important;

}



.donation-popup-content {

    position: relative;

    background: #fff;

    padding: 20px;

    border-radius: 12px;

    min-width: 360px;

    max-width: 400px;

    max-width: 500px;

    max-height: 100vh;

    overflow-y: auto;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.close-btn {

    cursor: pointer;

    position: absolute;

    right: 10px;

    top: 0px;

}



.donation-section {
    position: relative;
    width: 100%;

    height: 100%;

    max-width: 450px;

    overflow: auto;

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 10px 20px;

    background: #fff;

    align-items: center;

    margin-bottom: 20px;

    .hero-section-header {

        width: 100%;

        height: auto;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 10px;

        .h-s-main {

            display: flex;

            justify-content: center;

            width: 100%;

            .left {

                width: 100%;

                text-align: center;

                .left-heading {

                    font-size: 24px;

                    font-weight: 600;

                    color: var(--theme-color) !important;

                }

                p {

                    text-align: center;

                    margin-bottom: 0 !important;

                }

            }

        }

    }

}



.payment-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

    width: 100%;

    .p-s-heading {

        color: var(--black-color);

        font-size: 24px;

        font-weight: 550;

    }

    hr {

        width: 100%;

    }

    .donation-options {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 18px;

        font-size: 18px;

        width: 100%;

        .top {

            background-color: var(--theme-color);

            border-radius: 6px;

            padding: 12px 10px;

            width: 100%;

            span {

                color: var(--white-color);

                font-size: 18px;

            }

        }

        .bottom {

            display: flex;

            flex-direction: row;

            justify-content: center;

            flex-wrap: wrap;

            gap: 4px;

            width: 100%;

            .input-cover {

                display: flex;
                flex-direction: column;
                justify-content: center;

                width: 100%;

                gap: 10px;
                   &>div{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                   }
                .amount-label {

                    place-content: center;

                    color: var(--black-color);

                    font-size: 18px;

                    font-weight: 600;

                    text-align: center;

                    flex-grow: 1;

                    cursor: pointer;

                    width: 100%;

                    height: 100%;

                    display: block;

                    padding: 10px 0px;

                }          

                .input-cover-child {

                    background-color: var(--white-color);    

                    cursor: pointer;

                    place-content: center;

                    border-radius: 10px;

                    width: 100%;

                    input {

                        z-index: 99;

                        position: relative;

                    }

                }

                .input-cover-child-l {

                    width: 100%;

                    place-content: center;
                    input{
                       width: 100%;
                    }

                }

            }

            .input-cover-child:hover

            {

                background: #fbf09880;

            }      

        }

        .input-cover-child:has(input[type="radio"]:checked) {

            background-color: #fbf09880;

            border: 1px solid #e3cf5a;

            border-radius: 8px;

        }        

    }

}



.billing-info {

    width: 100%;

    .billing-info-form {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }

    .b-i-heading {

        color: var(--black-color);

        font-size: 24px;

        font-weight: 600;

    }

    .b-i-line-flex {

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

        align-items: center;

        width: 100%;

        .lable-inp-cover {

            display: flex;

            flex-direction: column;

            gap: 5px;

            width: 100%;

            .b-i-label {

                font-size: 14px;

                font-weight: 550;

                text-align: left;

            }

        }

    }

}



.submitBtn {

    cursor: pointer;

    background-color: var(--dark-gray);

    font-size: 20px;

    color: #fff;

    padding: 10px 20px;

    border-radius: 10px;

    font-weight: 600;

    border: none;

}



/* banner css  */

.toggle-wrapper {

    display: flex;

    justify-content: center;

    margin-bottom: 20px;

}



.toggle-switch {

    display: flex;

    border-radius: 30px;

    height: 40px;

    background-color: #e7ecf1;

    overflow: hidden;

    width: fit-content;

}



.option {

    font-size: 18px;

    text-align: center;

    place-content: center;

    cursor: pointer;

    color: #1a1a1a;

    width: 120px;

    transition: color 0.3s;

}



.option.selected {

    background-color: var(--dark-gray);

    color: white;

    font-weight: bold;

    width:130px;

    display: flex;

    align-items: center;

    border-radius: 30px;

}



/* .no-scroll {

  overflow: hidden;

} */



@media (max-width:768px) {

    .donation-section { 

        .h-s-main {

            flex-wrap:wrap !important;

        }

    }

}



@media (max-width: 567px) {

    .b-i-line-flex {

        flex-wrap: wrap;

        

    }

}
#close-donation-popup{
    position: absolute;
    right: 3px;
    background: #000;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 20px;
    font-size: 10px;
    cursor: pointer;
    top: 1px;
}