input[ type="text"] {
    background-color: #EEEE !important;

}

::placeholder {
    color: gray !important;
    font-size: 13px !important;
    font-weight: 300 !important;
}

.header_banner_div {
    position: relative;
    width: 100%;
    height: 215px;
    text-align: center;
    overflow: hidden;
}

.header_banner_div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../images/common/volunteer_banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(0.6);
    /* Apply brightness only to the background */
    z-index: -1;
}

.header_banner_img {
    height: 100%;
    width: 100%;
}

.banner_txt {
    color: #ffff;
    /* display: flex;
     align-items: center; justify-content: center; */
    position: relative;
    top: 35px;
    font-size: 25px;

}

.header_banner_div ol {
    padding: 26px 0px 0px 90px;
}

.header_banner_div li a {
    text-decoration: none;
    color: #ffff;
}

.yellow_txt {
    color: #FBBC05;
}

.volunteer_div_1 {
    margin-left: 93px;
    margin-right: 93px;
}

.volunteer_div_2 {
    background-color: #E7F0FF;
    padding: 50px 12vw 50px 12vw;
}

.volunteer_form_txt {
    color: #ffff;
}

.volunteer_reg_form {
    background-color: #4285F4;
    padding: 20px;
    border-radius: 10px;
}

.volunteer_reg_form h2 {
    text-align: center;
}

.form_part1 {
    padding: 25px 55px 10px 50px;
}

.submit_button {
    background-color: #FBBC05;
    padding: 13px 60px 15px 60px;
    border-radius: 30px;
    /* color: #0000; */
    border: none;
    box-shadow: 1px 1px 14px #FBBC05;
    transition: all 0.3s ease-in-out;
}

.submit_button:hover {
    background-color: #ffcd38;
    padding: 13px 60px 15px 60px;
    border-radius: 30px;
    color: #ffff;
    /* border: 3px solid #Ffff; */
    box-shadow: 1px 1px 14px #ffcd38;
    transform: scale(1.1);
}

.volunteer_img {
    height: 100%;
    width: 100%;
    position: relative;
    top: -32px;
}

.vol_img {
    width: 302px;
    height: 317px;
    margin-right: 70px;
}

/* .final_div {} */

.custom-control-input:checked ::before {
    background-color: #28a745;
    border-color: #28a745;

    }.form-check-input[type="radio"]:checked {
        background-color: #FBBC05;
        border-color: #FBBC05;

        }.form-check-input[type="radio"]:focus {
            box-shadow: 0 0 0 0.2rem rgba(251, 188, 5, 0.25);
        }

        .error-message {
            color: #dc3545;
            font-size: 14px;
            margin-top: 5px;
        }

        .volunteer_nav {
            background-color: #ffcc00;
            color: #ffffff;
            border-radius: 40px;
        }

        .input-group-append {
            cursor: pointer;
        }

        input::placeholder {
            color: gray;
            opacity: 10;
        }

        .callogo {
            position: absolute;
            right: 42px;
            top: 56px;
            transform: translateY(-50%);
            height: 20px;
            width: 20px;
            cursor: pointer;
        }


        /* Alert Box Styles */
        .alert {
            display: none;
            /* Hidden by default, can be toggled */
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #ffdddd;
            color: #d8000c;
            padding: 20px;
            width: 80%;
            max-width: 400px;
            border-radius: 8px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
            font-family: Arial, sans-serif;
            text-align: center;
            z-index: 1000;
            /* Above other elements */
        }

        /* Close Button */
        .alert .close-btn {
            color: #d8000c;
            font-size: 20px;
            font-weight: bold;
            float: right;
            margin-left: 15px;
            cursor: pointer;
        }

        /* Animation */
        .alert.show {
            display: block;
            animation: fadeIn 0.5s;
        }

        .heading {
            color: #ffff;
        }


        @keyframes fadeIn {
            from {
                opacity: 0;
                top: 0;
            }

            to {
                opacity: 1;
                top: 20px;
            }
        }

        .dateInp {
            cursor: pointer;
            padding-right: 12.5rem;
        }

        .pfont {
            line-height: 33px;
                font-weight: 500;
                text-align: justify;
                font-size: 20px;
        }

        @media(min-Width:769px ) and (max-width:1341px){

            .header_banner_div ol {
                padding: 70px 0px 0px 39px;
            }
            .volunteer_div_1{
                margin-left: 30px;
                margin-right: 30px;
            }
            .form_part1{
                padding: 25px 0px 10px 0px;
            }.volunteer_img{
                top:10px;
            }
            .dateInp{
                padding-right: 9.5rem;
            }
        }

        @media(max-width:768px){
            .header_banner_div ol {
                padding: 70px 0px 0px 39px;
            }
            .volunteer_div_1{
                margin-left: 30px;
                margin-right: 30px;
            }
            .form_part1{
                padding: 25px 0px 10px 0px;
            }.volunteer_img{
                top:10px;
            }
            .dateInp{
                padding-right: 9.5rem;
            }
        }
        @media(max-width:576px) {
            ::placeholder {
                color: gray !important;
                font-size: 10px !important;
                font-weight: 400 !important;
            }
            .header_banner_div::before {
                background-image: url('../../images/common/vhmw.png');
            }

            .header_banner_div ol {
                padding-left: 18px;
                padding-top: 67px;
                font-size: 12px;
            }

            .banner_txt {
                font-size: 14px;
            }

            .volunteer_div_1 {
                margin: 10px 15px 10px 15px;
            }

            .volunteer_div_2 {
                padding: 10px;

            }

            .form_part1 {
                padding: 0px;
            }

            .dateInp {
                padding: 8px 76px 8px 8px;
            }

            .volunteer_img {
                top: 11px;
            }

            .vol_img {
                margin-right: 0px;
            }

            .pfont {
                line-height: 1.5;
                font-weight: 500;
                text-align: justify;
                text-indent: 4rem;
                font-size: 15px;
            }

            .volunteer_form_txt {
                font-size: 12px;
            }

            .callogo {
                top: 52px;
            }

            .caa {
                margin-right: 20px;
            }

            .alert {
                top: 56px;
            }

            .heading {
                font-size: 22px;
            }

        }