/*
 Theme Name:     Born To Give Child Theme
 Theme URI:      https://demo.imithemes.com/born-to-give
 Description:    Born To Give Child Theme
 Author:         imithemes
 Author URI:     http://www.imithemes.com
 Template: 		 born-to-give
 Version:        1.0
*/

/* =Theme customization starts here
------------------------------------------------------- */
@media (min-width: 768px) {
    .col-sm-15 {
            width: 20%;
            float: left;
        }
        
    
    }
    
    @media (min-width: 992px) {
        .col-md-15 {
            width: 20%;
            float: left;
        }
        
    }
    @media (min-width: 1200px) {
        .col-lg-15 {
            width: 20%;
            float: left;
        }
        
        
    }
    /*
    @media (max-width: 1199px) {
        .fa-bars{
            display: -webkit-inline-box !important;
        }
     
        .dd-menu {
             display: none;
        }
    */
     
    
    
    #header{
    margin: 0 auto;
    }
    
    .col-xs-15,
    .col-sm-15,
    .col-md-15,
    .col-lg-15 {
        position: relative;
        min-height: 1px;
    }
    .col-xs-15 {
        width: 20%;
        float: left;
    }
    
    .left {float:left;}
    
    .footerSocial {display: inline-block;
        border:2px solid #ccc;
        border-radius: 50%;
        width: 51px;
        height: 51px;
        text-align: center;
        padding:9px;}
        
    .footerSocial:hover, .footerSocial > i:hover {border-color: #0f4b91;}
    
    /* Custom 
    .widgettitle {
        margin-bottom: 50px;
        
        position: fixed;
    }
    h2 a {
        color: #4da174;
        text-decoration: none;
        font-weight: bold;
    }
    
    h3 a {
        color: #4da174;
        text-decoration: none;
        font-weight: bold;
        font-size:large;
    }
     */
    .subFootercustom {
        padding:0px;
    }
    .donate-button {
        padding-left: 20px;
        padding-right: 20px;
        visibility: hidden;
    }
    
     .boxShadow {
      box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    }
    
     .boxShadow:hover {
      box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }
    
    .Button {
        color: #ffffff;
        background: #0f4b91;
        border: 0px;
        width: 35px;
        height: 30px;
        padding-top: 3px;
        position: relative;
    }
    
    .home .sort-destination .grid-item-cont {max-height: 393px;}
    
    /* Nav Bar */
    ul.sub-menu{
        left:-44.5px !important; 
    }
    
    /*Donate Button */
    
    #menu-main-menu > li.menu-item-897.DonateNav.menu-item.menu-item-type-custom.menu-item-object-custom > a {
        color: #fff !important;
        border-radius:5px;
        background-color: #ee632f;
        font-weight: 900;
        padding: 0 8px;
        margin-bottom: 3.75px;
    }
    
    #menu-main-menu > li.menu-item-897.DonateNav.menu-item.menu-item-type-custom.menu-item-object-custom > a:hover {
        border-radius:5px;
        color: #fff !important;
        background-color: #ee922f;
        font-weight: 900;
        padding: 0 8px;
        margin-bottom: 3.75px;
    }
    
    #s {
        margin-top: 1px;
    }
    
    /*Popup Box 
    #headline-1075 {
        font-family:"Playfair Display";
    }
    
    #subText1, #btnDonateNow {
        font-family:"Playfair Display";
    }
    
    #btnDonateNow {
        font-size:5vw;
    }*/

    /* Replace Twitter icon with X */
.topbar .fa-twitter:before {
    content: "\e61b"; /* Unicode for the X icon in Font Awesome 6 */
    font-family: "Font Awesome 6 Brands";
}

/* Make the X icon black when its parent list item is hovered */
.topbar li:hover .fa-twitter {
    color: #000000;
}

/* Explanation:
   1) We set width/height to 20px (same as your other icons).
   2) We use -webkit-mask and mask with center/contain to position the SVG.
   3) background-color is #fff by default (white icon).
   4) On hover, background-color becomes #1183fc (blue).
*/

.fa-bluesky {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    -webkit-mask: url('../svg/bluesky-brands-solid.svg') center / 14px 14px no-repeat;
    mask: url('../svg/bluesky-brands-solid.svg') center / 14px 14px no-repeat;
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.topbar li:hover .fa-bluesky {
    background-color: #1183fc;
}

.page-banner img { /* If the banner uses an <img> tag */
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    padding: 0;
}

.page-banner { /* If the banner uses a background image */
    width: 100%;
    height: auto;
    background-size: cover; /* Or contain, depending on your preference */
    margin: 0;
    padding: 0;
}