/*
THEME NAME: Hostbala Non-Profit Organization Theme
AUTHOR COMPANY: Hostbala Technologies Pvt. Ltd. Nepal 
AUTHOR: Subhash Yadav (Web Developer at Hostbala Technologies)
AUTHOR URI: https://kycusa.org
VERSION: 1.0.0
*/


/*
======= Theme Contents =======
1. CSS Resets
2. Reusable Class
3. Bootstrap Resets
4. Google Translator Styling
5. Homepage Start
6. Breadcrumb
7. Footer
8. Media Queries
9. Scrollbar Styling
======= Theme Contents =======
*/



body{
    background: url('../images/backgrounds/1.png');
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Fira Sans Condensed', sans-serif;
    /* --primary: #02796E; */
    --primary: #005193;
    --secondary: #207fce;
    --terniry: #d5fdf2;
    min-height: 100vh;
}

/* ======= CSS Reset ======= */
a, a:hover{
    text-decoration: none;
}
ul{
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
/* ======= CSS Reset ======= */

/* ======= Reusable Class ======= */
.text-terniry{
    color: var(--terniry);
}
.bg-white-1{
    background: url('../images/backgrounds/1.png');
    background-size: cover;
    background-position: center;
}
.bg-white-2{
    background: url('../images/backgrounds/2.png');
    background-size: cover;
    background-position: center;
}
.bg-white-3{
    background: url('../images/backgrounds/3.png');
    background-size: cover;
    background-position: center;
}
.bg-white-4{
    background: url('../images/backgrounds/4.png');
    background-size: cover;
    background-position: center;
}
.bg-img-1{
    background: linear-gradient(#005193cc, #005193d3), url('../images/defaults/about.jpg');
    background-size: cover;
    background-position: center;
}
.bg-img-2{
    background: linear-gradient(#005193cc, #005193d3), url('../images/defaults/img2.jpg');
    background-size: cover;
    background-position: center;
}
.bg-img-3{
    background: linear-gradient(#005193cc, #005193d3), url('../images/defaults/img3.jpg');
    background-size: cover;
    background-position: center;
}
.bg-img-4{
    background: linear-gradient(#005193cc, #005193d3), url('../images/defaults/img4.jpg');
    background-size: cover;
    background-position: center;
}
.bg-img-5{
    background: linear-gradient(#005193cc, #005193d3), url('../images/defaults/img5.jpg');
    background-size: cover;
    background-position: center;
}
/* ======= Reusable Class End ======= */


/* ======= Bootstrap Resets ======= */
.section-hr {
    margin: 0 auto !important;
    width: 100px;
    background: var(--primary);
    border: 2px solid var(--primary) !important;
}
.section-hr.terniry{
    margin: 0 auto !important;
    width: 100px;
    background: var(--terniry);
    border: 2px solid var(--terniry) !important;
}
.footer-hr{
    width: 100px;
    background: #ffffff;
    border: 2px solid #ffffff !important;
}
.btn:focus {
    outline: none !important;
    box-shadow: none !important;
}
.btn-secondary:hover, .btn-secondary:focus{
    background: var(--primary) !important;
    color: var(--secondary) !important;
}
.bg-primary{
    background: var(--primary) !important;
}
.bg-secondary{
    background: var(--secondary) !important;
}
.text-primary{
    color: var(--primary) !important;
}
.text-secondary{
    color: var(--secondary) !important;
}
.text-terniry{
    color: var(--terniry) !important;
}
.btn-primary{
    background: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
}
.btn-primary:hover{
    background: transparent !important;
    color: var(--primary) !important;
}
.btn-primary.hover-bg-white:hover{
    background: #ffffff !important;
    color: var(--primary) !important;
    border: 1px solid #ffffff !important;
}
.btn-primary.not-hover:hover{
    background: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
}
.btn-outline-primary{
    border: 1px solid var(--primary) !important;
    color: var(--primary);
}
.btn-outline-primary:hover{
    border: 1px solid var(--primary) !important;
    background: var(--primary) !important;
    color: #ffffff;
}
.btn-secondary{
    background: var(--secondary) !important;
    color: #ffffff !important;
    border: 1px solid var(--secondary) !important;
}
.btn-secondary:hover{
    background: transparent !important;
    color: var(--secondary) !important;
}
.btn-secondary.hover-bg-white:hover{
    background: #ffffff !important;
    color: var(--secondary) !important;
    border: 1px solid #ffffff !important;
}
.btn-secondary.not-hover:hover{
    background: var(--secondary) !important;
    color: #ffffff !important;
    border: 1px solid var(--secondary) !important;
}
.btn-outline-secondary{
    border: 1px solid var(--secondary) !important;
    color: var(--secondary);
}
.btn-outline-secondary:hover{
    border: 1px solid var(--secondary) !important;
    background: var(--secondary) !important;
    color: #ffffff;
}
.border-primary{
    border: 1px solid var(--primary) !important;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    color: var(--primary) !important;
    border-bottom: 1px solid #00563f78;
}
.dropdown-item.sub-active{
    background: var(--primary) !important;
    color: #ffffff !important;
}
/* ======= Bootstrap Resets Ends ======= */



/* ======= Google Translator Styling ======= */
#google_translate_element{
    height: 35px;
    overflow: hidden;
    text-align: center;
}
.goog-te-combo{
    border: none !important;
    padding: 4px;
    border-radius: 3px;
    background: var(--secondary);
    color: var(--terniry)
}
.goog-te-combo:focus{
    border: none !important;
    outline: none;
}
.goog-logo-link{
    display: none !important;
}
/* ======= Goolge Translator Styling Ends ======= */


/* ======= Homepage Start ======= */
.banner-img{
    height: 532px;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner-img .texts {
    width: 50%;
}
.banner-img .texts h1{
    font-weight: 900;
}
.landing-sidebar{
    border-right: 20px solid #005193dc;
}
#landingSection{
    border-bottom: 20px solid #005193dc;
}
.landing-latest-event{
    min-height: 234px;
}
.date{
    min-width: 60px;
    height: 60px;
    text-align: center;
    padding: 2px;
    overflow: hidden;
}
.date h2{
    margin: 0;
    padding: 0;
    font-weight: 900;
}
.date p {
    display: block;
    margin-top: -6px;
    font-size: 18px;
}
.landing-event-box{
    width: calc(100% - 60px);
}
.wwr-img{
    width: 100%;
    height: fit-content;
    border-radius: 4px;
    background: var(--secondary);
    border: 2px solid var(--terniry);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wwr-img img{
    width: 100%;
}
.counter-col{
    border-right: 1px solid #ffffff8e;
}
.counter-col:nth-last-child(1){
    border-right: none;
}
.counter-col h2{
    color: #ffffff;
    font-weight: 900;
}
.counter-col h4{
    color: #ffffff8e;
}
/* ======= Homepage Ends ======= */


/* ======= Breadcrumb ======= */
#Breadcrumb{
    background-size: cover;
    background-position: center;
    height: 200px;
}
/* ======= Breadcrumb ======= */

.c-member-photo{
    height: 220px;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-member-photo img{
    min-height: 100%;
}


/* ======= Footer Start ======= */
.social-media-icons .icon{
    border: 1px solid var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin: 0 7px;
    background: #ffffff;
    font-size: 18px;
}
.social-media-icons .icon:hover{
    transition: linear .4s;
    transform: rotate(360deg);
}
.social-media-icons .fa-facebook{
    color: #4267B2;
}
.social-media-icons .fa-instagram{
    color: #C13584;
}
.social-media-icons .fa-twitter{
    color: #1DA1F2;
}
/* ======= Footer End ======= */



/* ======= Media Queries Start ======= */
@media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
@media screen and (max-width:786px) {
    .top-header .left{
        text-align: center;
    }
    .top-header .right{
        text-align: center;
    }
    .top-header .right .donate-btn{
        margin-top: 5px;
    }
    .banner-img{
        height: 400px;
    }
    .banner-img .texts {
        width: 90%;
    }
    .btn-group, .btn-group-vertical {
        display: flex !important;
        flex-direction: column !important;
    }
}
@media screen and (max-width:500px) {
    /* topbar */
    .top-bar-col{
        flex-direction: column !important;
    }
    .landing-latest-event{
        min-height: 0px;
    }
    .counter-col{
        border-right: none;
    }
}
/* ======= Media Queries End ======= */


/* ======= Scroll Bar ======= */
::-webkit-scrollbar{
    width: 7px;
}
::-webkit-scrollbar-thumb{
    width: 7px;
    background: var(--primary);
}
/* ======= Scroll Bar ======= */


/*
THEME NAME: Hostbala Non-Profit Organization Theme
AUTHOR COMPANY: Hostbala Technologies Pvt. Ltd. Nepal 
AUTHOR: Subhash Yadav (Web Developer at Hostbala Technologies)
AUTHOR URI: https://kycusa.org
VERSION: 1.0.0
*/