/*=====START GLOBAL CSS=====*/
body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden!important;
}
/* Input type Date placeholder Remove */
input[type=date]::-webkit-datetime-edit-text,
input[type=date]::-webkit-datetime-edit-month-field,
input[type=date]::-webkit-datetime-edit-day-field,
input[type=date]::-webkit-datetime-edit-year-field {
    display: none;
}
/* Input type Date placeholder Remove */

.form-control:focus{
    box-shadow: none!important;
}

.font-13px{
    font-size: 13px!important;
}
.text-green{
    color: #1EB53A;
}
.text-blue{
    color: #0082CE;
}
.bg-blue{
    background: #0082CE;
}
.bg-gray{
    background: #ECECEC;
}
.bg-gradient-blue{
    background: linear-gradient(180deg, #1BAAFD 0%, #00507E 100%);
    border-radius: 8px!important;
}
.bg-gradient-green{
    background: linear-gradient(180deg, #30D54E 0%, #1B882F 100%);
}
button:focus {
    outline: none !important;
}
.z-index{
    z-index: 999!important;
}
footer{
    background: #001626!important;
}
/*=====END GLOBAL CSS=====*/

/*=====NAVBAR CSS=====*/
.navbar {
    background: linear-gradient(180deg, rgba(0, 130, 206, 0.9) 0%, rgba(0, 98, 155, 0.9) 100%);
    box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(7.5px);
}
.navbar .nav-link{
    font-size: 12px!important;
    font-weight: 500;
    display: inline-block;
}

.navbar .btn {
    background: linear-gradient(180deg, #1EB53A 0%, #1B882F 100%);
    border-radius: 25px;
    font-size: 12px!important;
    font-weight: 500;
    padding: 6px 24px!important;
    border-bottom: 0px;
}

.navbar ul li .nav-link.active::after,
.navbar ul li .nav-link:hover::after {
    content: '';
    display: block;
    height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

/*=================== HOME PAGE CSS START =======================*/
/*===BANNER CSS===*/
#banner {
    background: url(../images/banner.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 650px;
    padding: 370px 0px 30px 0px;
    position: relative;
}
#banner .banner-info{
    position: absolute;
    top: 100%;
}
#banner .banner-title{
    font-size: 42px;
    font-weight: bold;
    text-transform: uppercase;
}
#banner .banner-info .title-border{
    display: inline-block;
}
#banner .banner-info .title-border::after{
    content: '';
    display: block;
    height: 5px;
    background: #1EB53A;
    border-radius: 2px;
}
#banner .banner-text{
    font-size: 20px;
}

/*===ICON & WASHIMS Data SEARCH CSS===*/
#icon-data-search .bg-color{
    background: linear-gradient(265.09deg, #004172 -18.03%, #0082CE 105.4%);
}

#icon-data-search .icon img{
    width: 80px;
}

#icon-data-search .icon p{
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0px;
}

.search_wrap .search_box{
	position: relative;
}

.search_wrap .search_box .input{
	position: absolute;
	top: 0;
	left: 0;
	font-size: 12px;
    border-radius: 0px;
    padding-left: 45px;
    font-style: italic;
    height: 40px;
}

.search_wrap .search_box .btn.btn_common .bi-search{
	position: absolute;
    top: 90%;
    left: 7%;
	transform: translate(-50%,-50%);
    color: #ff0000;
    font-size: 16px;
}

.search-btn{
    background: linear-gradient(180deg, #23C641 0%, #1B882F 100%);
    font-size: 14px;
    border-radius: 21px;
    font-weight: 500;
    padding: 9px 26px!important;
    border-bottom: 0px;
    z-index: 999;
}

/*=== WASH IN HOUSE HOLD CSS===*/
#wash-in-household .info{
    padding: 100px;
}
#wash-in-household .info h4{
    font-weight: 600;
}
#wash-in-household .info p{
    font-size: 14px;
}

/* FEATURED RESOURCES CSS */
#featured-resources .img img{
    position: relative;
}
#featured-resources .info{
    position: absolute;
    bottom: 25px;
    left: 0;
    right: 0;
    width: 70%;
}
#featured-resources h6{
    font-size: 14px;
    font-weight: 700;
}

/* SUBSCRIBE */
#subscribe{
    background: linear-gradient(265.09deg, #004172 -18.03%, #0082CE 105.4%);
}

/* FOOTER */
.home-page footer{
    background: #003256!important;
}

#footer-widget .row{
    background: #799DB3;
}
#footer-widget .nav-link{
    font-size: 12px;
    font-weight: 500;
    padding: 1px!important;
    color: #fff!important;
}

#copy-right .row{
    background: #001626;
}

#copy-right .copy-right-text{
    font-size: 13px;
}

#copy-right .nav .nav-link{
    font-size: 10px;
    color: #fff;
}
/*=================== HOME PAGE CSS END =======================*/


/*=================== Resources PAGE CSS START =======================*/
/* ====== Resouces Banner ====== */
#resources-banner .title-bg{
    background: linear-gradient(180deg, #30D54E 0%, #1B882F 100%);
    border-radius: 5px;
    margin-top: 20px;
}
#resources-banner .banner-bg,
    #data-banner .banner-bg{
    background: url(../images/resources-banner.png);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 200px 30px 20px 30px;
}

/* ====== Featured Resouces  ====== */
#featured-resources .page-item .page-link{
    color: #4D4F5C!important;
    font-size: 13px;
}
#featured-resources .page-item.active .page-link{
    background: linear-gradient(180deg, #0197EF 0%, #0552B5 100%);
    color: #fff!important;
}
/* ====== Footer  ====== */

/*=================== Resources PAGE CSS END =======================*/


/*=================== LOGIN PAGE CSS Start =======================*/
/* ====== Login Banner ====== */

#login-banner{
    background: url(../images/login-bg.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100vh;
    position: relative;
}
#login-banner .banner-overlay{
    background: linear-gradient(0deg, rgba(20, 20, 20, 0.8) -5.01%, rgba(20, 20, 20, 0) 98.38%)!important;
    min-height: 100vh;
}

#login-banner .form-info{
    background: rgba(252, 252, 252);
    border-radius: 20px;
    backdrop-filter: blur(11px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
}
#login-banner .form-info p{
    font-size: 9px;
    color: #0072C6;
    font-weight: 500;
}
#login-banner .form-info h6{
    font-size: 12px;
    color: #E91A1A;
    font-weight: 500;
}
#login-banner form{
    position: relative;
}
#login-banner form label.email,
#login-banner form label.password{
    font-size: 12px;
    position: absolute;
    top: -9px;
    left: 12px;
    background-color: rgba(252, 252, 252);
    padding: 0px 10px;
}
#login-banner form label.password{
    top: 47.5px;
}
#login-banner form input{
    background: transparent;
    border: 2px solid #929292;
    font-size: 12px;
    color: #000;
    height: 40px;
}
#login-banner form input:focus-visible{
    border-color: #1EB53A!important;
}
#login-banner form input:focus-visible #login-banner form label.password{
    color: #1EB53A!important;
}
#login-banner form .btn{
    background: linear-gradient(360deg, #004172 -37.04%, #0082CE 117.59%);
    color: #fff;
}
/*=================== LOGIN PAGE CSS END =======================*/


/*============ MEDIA QUERY CSS FOR RESPONSIVE =============*/

@media screen and (max-width: 1200px) {
/*======= HOME PAGE MEDIA QUERY CSS  ========*/

    /*=== WASH IN HOUSE HOLD CSS===*/
    #wash-in-household .info{
        padding: 80px;
    }

    /*=================== Login PAGE MEDIA QUERY CSS =======================*/
    /* ====== Login Form ====== */
    #login-banner .form-info{
        width: 40%;
    }
}


@media screen and (max-width: 1023.98px) {
/*======= HOME PAGE MEDIA QUERY CSS  ========*/

    /*===BANNER CSS===*/
    #banner {
        height: 550px;
        padding-top: 300px;
    }
    #banner .banner-title{
        font-size: 35px;
    }
    #banner .banner-text{
        font-size: 17px;
    }

    /*=== WASH IN HOUSE HOLD CSS===*/
    #wash-in-household .info{
        padding: 40px;
    }
    #wash-in-household .info h4{
        font-size:20px;
    }


/*=================== Resources PAGE MEDIA QUERY CSS =======================*/
    /* ====== Resouces Banner ====== */
    #resources-banner .banner-title,
    #data-banner .banner-title{
        font-size: 40px;
    }

/*=================== Login PAGE MEDIA QUERY CSS =======================*/
    /* ====== Login Form ====== */
    #login-banner .form-info{
        width: 50%;
    }

}
@media screen and (max-width: 991.98px) {
/*======= HOME PAGE MEDIA QUERY CSS  ========*/

    /*=== WASH IN HOUSE HOLD CSS===*/
    #wash-in-household .info{
        padding: 0px;
    }
    


/*=================== Login PAGE MEDIA QUERY CSS =======================*/
    /* ====== Login Form ====== */
    #login-banner .form-info{
        width: 50%;
    }

}

@media screen and (max-width: 767.98px) {
/*======= HOME PAGE MEDIA QUERY CSS  ========*/

    /*===BANNER CSS===*/
    #banner {
        height: 420px;
        padding-top: 200px;
    }
    #banner .banner-title{
        font-size: 27px;
    }
    #banner .banner-text{
        font-size: 13px;
    }

/*=================== Resources PAGE MEDIA QUERY CSS =======================*/
    /* ====== Resouces Banner ====== */
    #resources-banner .banner-bg,
    #data-banner .banner-bg{
        padding-top: 140px;
    }
    #resources-banner .banner-title,
    #data-banner .banner-title{
        font-size: 34px;
    }


/*=================== Login PAGE MEDIA QUERY CSS =======================*/
    /* ====== Login Form ====== */
    #login-banner .form-info{
        width: 60%;
    }

}


@media screen and (max-width: 575.98px) {
/*======= HOME PAGE MEDIA QUERY CSS  ========*/

    /*=== Featured Resources ===*/
    #featured-resources .info{
        width: 40%;
    }

/*=================== Login PAGE MEDIA QUERY CSS =======================*/
    /* ====== Login Form ====== */
    #login-banner .form-info{
        width: 75%;
    }
}
@media screen and (max-width: 425.98px) {
/*======= HOME PAGE MEDIA QUERY CSS  ========*/

    /*===BANNER CSS===*/
    #banner {
        height: 350px;
        padding-top: 120px;
    }
    #banner .banner-info{
        position: static;
        top: 0;
    }
    #banner .banner-title{
        font-size: 20px;
    }

    /*=== Featured Resources ===*/
    #featured-resources .info{
        width: 60%;
    }

/*=================== Resources PAGE MEDIA QUERY CSS =======================*/
    /* ====== Resouces Banner ====== */
    #resources-banner .banner-bg{
        padding-top: 90px;
    }
    #resources-banner .banner-title,
    #data-banner .banner-title{
        font-size: 29px;
    }

/*=================== Login PAGE MEDIA QUERY CSS =======================*/
    /* ====== Login Form ====== */
    #login-banner .form-info{
        width: 90%;
    }
    
}