/*!
Theme Name: Bosa Charity
Theme URI: https://bosathemes.com/bosa-charity
Author: Keon Themes
Author URI: https://keonthemes.com
Description: Bosa Charity is multipurpose charity theme. Bosa Charity is beautiful, fast, lightweight, responsive, extremely customizable theme that you can use as a foundation to build versatile sites such as charity, NGO, non profit, volunteer, fundraising, church, conservation, trust, foundation, donation, welfare activities, campaigns, activism, change in society, community support, social, foundations or a non-profit organisation, charitable institution, helping hands, old age, kids, foster home, caretaker, philanthropy, amnesty, disaster relief, donation camp, hunger index, pandemic relief, eco nature, blog, news, portfolio and preferably ideal for any type of charity sites. Bosa Charity is a child theme of Bosa, a free multipurpose WordPress theme. Bosa Charity works perfectly with Gutenberg and the most popular page builder Elementor that can easily drag-and-drop your ideas from the interface. Bosa Charity is built with SEO, speed, and usability in mind with the multiple Header & Footer layouts, predesigned starter sites includes awesome Home & Inner Pages that is incredibly customizable and powerful enough to take a stand among the crowd. Bosa Charity is compatible with all major plugins like WooCommerce, Yoast, Contact form 7, Mailchimp for WordPress, bbPress, etc. Looking for a Multipurpose Charity theme? Look no further! Browse the demos to see that it's the only theme you will ever need: https://demo.bosathemes.com/bosa/bosa-charity
Version: 1.0.3
Requires PHP: 5.5
Tested up to: 6.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: bosa
Text Domain: bosa-charity
Tags: blog, portfolio, news, grid-Layout, one-column, two-columns, three-columns, flexible-header, left-sidebar, right-sidebar, custom-background, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, post-formats, rtl-language-support, theme-options, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks

Bosa Charity WordPress Theme, Copyright 2022 Keon Themes
Bosa Charity is distributed under the terms of the GNU General Public License v3

Bosa Charity is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.
*/

@import './assets/utils/background_blob.css';

.paragraph-clip {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4 !important;
}

.footer-bg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.footer-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/wp-content/themes/bosa-charity/assets/img/bg-1.jpg);
    background-size: cover;
    filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.bg-gray {
    background: #FAFAFA !important
}
.cursor-pointer{
    cursor:pointer!important
}

.heading_underline {
    position: relative;
    width: 100%;
    padding-bottom: 10px;
}

.heading_underline::before {
    content: '';
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 50%;
    width: 50px;
    margin: 0px auto;
    border-radius: 20px;
    border: 2px solid #ffa026;
}

.bg-custom-primary {
    background: #ffa026 !important;
    color: white !important;
}

.rounded-bl-4 {
    border-bottom-left-radius: var(--bs-border-radius-xl) !important;
}

.bg-custom-primary:hover {
    background: #D97A00 !important;
    color:white!important
}

.text-custom-primary{
    color:#FFA026!important;
}

/* region button with custom-custom-arrow*/
.custom-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #FFA026;
    color: white;
    border: none;
    border-radius: var(--bs-border-radius-pill);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-weight:bold;
    opacity:95%;
    transition: all 0.3s ease;
}
@media (max-width: 576px) {
    .custom-button{
        /*padding: 5px 15px;*/
    }
}

.custom-button__outline{
    display: inline-block;
    padding: 10px 20px;
    background-color: white;
    border: 2px solid #FFA026;
    color: #FFA026;
    border-radius: var(--bs-border-radius-pill);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-weight:bold;
    opacity:95%;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.custom-button__outline:hover{
    display: inline-block;
    padding: 10px 20px;
    background-color: #FFA026;
    border: 2px solid #FFA026;
    color: white;
    border-radius: var(--bs-border-radius-pill);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-weight:bold;
    opacity:95%;
    transition: all 0.3s ease;
}

.custom-button:hover {
    background-color: #FFA026;
}

.custom-arrow {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.custom-button:hover .custom-arrow {
    transform: translateY(-50%) rotate(45deg);
}

.custom-button__outline:hover .custom-arrow {
    transform: translateY(-50%) rotate(45deg);
}

.custom-button__outline .custom-button__text{
    color:#FFA026!important
}

.custom-button__outline .custom-arrow{
    color:#FFA026!important
}

.custom-button__outline:hover .custom-button__text{
    color:#ffffff!important
}
.custom-button__outline .custom-arrow{
    /*color:#fff!important*/
}
.custom-button:hover{
    opacity:100%;
    background: #D97A00 !important;
}
.custom-button__text{
    margin-right:16px;
    font-size:1rem;
    color:white!important;
}

.custom-link {
    display: inline-block;
    padding-top: 10px;
    padding-right: 20px;
    padding-left:5px;
    color: #FFA026;
    border: none;
    border-radius: var(--bs-border-radius-pill);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    font-weight:bold;
    opacity:95%;
    transition: all 0.3s ease;
}

.custom-link__custom-arrow {
    position: absolute;
    top: 60%;
    right: 10px;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.custom-link:hover .custom-link__custom-arrow {
    transform: translateY(-50%) rotate(45deg);
}
.custom-link__button-text{
    margin-right:16px;
    color:#FFA026!important;
}

.masthead {
    width: 100%;
    transition: top 0.3s;
    background: #efefef!important;
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 0;
    padding-top: 0;
    z-index: 1000;
    background:white!important;
}

/*endregion*/

/*donation progress*/
/* Container for the pill */
.pill-container {
    position: relative;
    height: 15px; /* Adjust height as needed */
    overflow: hidden; /* Hide overflow */
    border-radius:10px
}

/* Pill before pseudo element */
.pill-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: gray; /* Gray background */
    /*z-index: -1; !* Behind the pill *!*/
}

/* Actual pill div */
.pill {
    position: relative;
    height: 100%;
    background-color: orange; /* Orange background */
    width: 0; /* Initial width */
    transition: width 2s; /* Transition for width */
}

/* When the pill div expands */
.pill.expanded {
    width: 100%; /* Expand to 100% width */
}


.image__container .post-image{
    height: auto;
    transition: transform 0.6s ease;
    -webkit-transition: -webkit-transform 0.6s ease;
}
.image__container:hover .post-image{
    transform: scale(1.1)!important;
    -webkit-transform: scale(1.1);
}

.feature-posts-image__container .feature-posts-image{
    height: auto;
    transition: transform 0.6s ease;
    -webkit-transition: -webkit-transform 0.6s ease;
}
.feature-posts-image__container:hover .feature-posts-image{
    transform: scale(1.1)!important;
    -webkit-transform: scale(1.1);
}


/* Custom Styles */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    border-radius: 8px; /* Rounded corners */
    background-color: #ffffff; /* White background */
    padding: 10px; /* Padding for input fields */
    width: 100%; /* Full width */
    border: 1px solid #dddddd; /* Border color */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    margin-bottom: 15px; /* Spacing between fields */
}

.contact-form textarea {
    min-height: 150px; /* Minimum height for the textarea */
}

/*.contact-form input[type="submit"] {*/
/*    background-color: #007bff; !* Button background color *!*/
/*    color: #ffffff; !* Button text color *!*/
/*    border: none; !* No border *!*/
/*    padding: 12px 20px; !* Padding for button *!*/
/*    cursor: pointer; !* Cursor style *!*/
/*    border-radius: 8px; !* Rounded corners *!*/
/*}*/

.contact-form input[type="submit"]:hover {
    /*background-color: #0056b3; !* Button hover background color *!*/
}

/* Optional: Adjust the width of the form container */
.contact-form {
    max-width: 600px; /* Adjust width as needed */
    margin: 0 auto; /* Center align the form */
    padding: 20px; /* Padding around the form */
    background-color: #f9f9f9; /* Form background color */
    border-radius: 10px; /* Rounded corners for the form */
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); /* Box shadow for a subtle effect */
}

/* Basic styling for grid items */
.grid-item {
    position: relative;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    overflow: hidden; /* Ensure content doesn't overflow */
}

.grid-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Animation for first column (move down indefinitely) */
.grid-item:nth-child(odd) {
    animation: moveDown 20s linear infinite; /* Adjust animation duration as needed */
}

@keyframes moveDown {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* Animation for second column (move up indefinitely) */
.grid-item:nth-child(even) {
    animation: moveUp 20s linear infinite; /* Adjust animation duration as needed */
}

@keyframes moveUp {
    0% { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* Hover effect */
.grid-item:hover img {
    transform: scale(1.1); /* Zoom effect on hover */
}

.gradient-text-container {
    display: inline-block!important;
    z-index:3;
    background: linear-gradient(to right, #ffb03a, #fc6849)!important;
    -webkit-background-clip: text!important;
    background-clip: text!important;
    color: transparent!important;
    overflow:hidden!important;
}

.gradient-text {
    font-size: 48px;
    font-weight: bold;
    display: inline;
}


.button_with_icon__outline{

}
/*end elementor progress*/

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.font-inter {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif !important;
}

body {
    color: #444444;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif !important
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #3a3a3a;
    font-family: 'Open Sans', serif;
    font-weight: 600;
}

.wp-block-quote {
    padding: 30px 30px 30px 50px;
    margin: 30px 0 30px 30px;
}

.site-header .site-branding .site-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
}

.main-navigation ul.menu > li > a {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
}

.section-banner .banner-content .entry-title {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: capitalize;
}

.section-banner .banner-content .entry-text p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    text-transform: initial;
}

.feature-posts-content-wrap .feature-posts-content .feature-posts-title {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: capitalize;
}

.post .feature-posts-content .cat-links a {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
}

#primary article .entry-title {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: capitalize;
}

.highlight-post-slider .post .entry-content .entry-title {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: capitalize;
}

.highlight-post-slider .post .cat-links a {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}

.sidebar .widget .widget-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
}

.page-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 800;
    text-transform: capitalize;
}

.site-footer .site-info,
.post .entry-meta,
.attachment .entry-meta,
.banner-content .entry-meta,
.site-footer .site-info,
.site-footer .footer-menu ul li a,
.post .feature-posts-content .entry-meta a,
.highlight-post-slider .post .entry-meta a {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

#bosa-ngo-callback-form .wpcf7 input[type=text],
#bosa-ngo-callback-form .wpcf7 input[type=email],
#bosa-ngo-callback-form .wpcf7 textarea {
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    height: 50px;
    padding-left: 20px;
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.85);
    border: none;
}

#bosa-ngo-callback-form .wpcf7 input[type=submit] {
    background-color: #FFA026;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    font-size: 16px;
    padding: 17px 32px 16px;
    margin-top: 5px;
}

#bosa-ngo-callback-form .wpcf7 input[type=submit]:hover,
#bosa-ngo-callback-form .wpcf7 input[type=submit]:active,
#bosa-ngo-callback-form .wpcf7 input[type=submit]:focus {
    background-color: #D97A00;
}

.custom-logo {
    width: 48px !important;
    height: 48px !important;
    display:inline-block;
}