/*
Theme Name: Businesity
Theme URI: https://ascendoor.com/themes/businesity/
Author: Ascendoor
Author URI: https://ascendoor.com/
Description: Businesity is a clean free child theme of CharityUp that incorporates features for creating a high-quality website that is easy to use, clean, dynamic, and highly customizable. The Businesity theme is ideal for corporate websites, personal portfolios, and multi-purpose commercial operations. The theme is fully responsive and works with all mobile and tablet devices. The theme is designed to give you more flexibility and simplicity of customization for your next business project. Check the demo at: https://demos.ascendoor.com/businesity/
Version: 1.0.3
Requires at least: 5.0
Requires PHP: 5.6
Tested up to: 6.6
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: charityup
Text Domain: businesity
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, theme-options, footer-widgets, full-width-template, left-sidebar, right-sidebar, blog, portfolio
*/


/*
    Add your custom styles here
*/


/*
    new header
*/

.site-header {
    background: #f3c909;
}

.site-header #search-overlay.block:before {
    content: '';
}

.top-nav .contact-buttons {
    align-items: center;
    justify-content: flex-end;
}

.top-header-contact {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-header-contact .header-contact-inner {
    display: flex;
    padding: 20px;
    flex-direction: column;
    color: rgba(255, 255, 255, 0.8);
}

.top-header-contact .header-contact-inner .contact-details i {
    font-size: 1.1rem;
    margin-inline-end: 10px;
}

@media (max-width: 992px) {
    .top-header-contact .header-contact-inner .contact-details i {
        font-size: 0.9rem;
    }
}

.top-header-contact .header-contact-inner .contact-head span {
    font-size: 0.9rem;
    margin: 0;
    font-weight: bold;
}

.top-header-contact .header-contact-inner .contact-details span a {
    font-size: 1.1rem;
    font-weight: bold;
    word-break: keep-all;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.8);
}

.top-header-contact .header-contact-inner .contact-details span a:hover {
    color: rgba(255, 255, 255, 1);
}

@media (max-width: 992px) {
    .top-header-contact .header-contact-inner .contact-details span a {
        font-size: 0.9rem;
    }
}

.top-nav .top-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    /* background-color: #F0F0F0; */
}

.top-nav .top-icons li {
    padding: 15px 20px;
    padding: 20px 25px;
}

.site-branding .site-title a,
.top-nav .top-icons li a {
    color: rgba(255, 255, 255, 0.8);
}

.site-branding .site-title a:hover,
.top-nav .top-icons li a:hover {
    color: rgba(255, 255, 255, 1);
}

.site-branding .site-description,
.site-branding .site-title a:focus-within,
.top-nav .top-icons li a:focus-within {
    color: rgba(255, 255, 255, 1);
}

.top-nav .top-icons li #search-btn:focus-within {
    outline: 1px dashed #fff;
    color: #fff;
}

.top-nav .top-icons li #search-btn:hover {
    color: #fff;
}

.top-nav .top-icons li:not(:last-child) {
    border-inline-end: 1px solid #d4d4d4;
}

.main-navigation {
    text-align: start;
}

.bottom-nav {
    /* background-color: #c7a716; */
    position: relative;
}

.bottom-nav::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.1;
}

.bottom-nav-wrap {
    align-items: center;
}

@media (min-width: 991px) {
    .main-navigation .menu li {
        padding: 15px 17px;
    }
    .main-navigation .menu>li>a {
        color: rgba(255, 255, 255, 0.8);
    }
    .main-navigation .menu>li>a:hover {
        color: rgba(255, 255, 255, 1);
    }
}

.main-navigation .menu>.menu-item-has-children>a {
    display: flex;
    align-items: center;
}

.main-navigation .menu>.menu-item-has-children>a:after {
    position: unset;
    bottom: inherit;
    right: inherit;
    line-height: 1;
    display: inline-block;
    margin-inline-start: 10px;
}

.main-navigation .menu>li:first-child {
    padding-inline-start: 0;
}

.main-navigation .ham-wrap span {
    background-color: #fff;
}

.main-navigation.toggled .ham-wrap span {
    background-color: #404040;
}

.charity-custom-btn {
    text-align: end;
}

.charity-custom-btn .btn {
    padding: 8px 30px;
}


/*
    new header
*/


/*
    mission vision section
*/

section.mission-vision-section {
    background: #f8f8f8;
}

section.mission-vision-section .inner {
    margin-bottom: 50px;
}

@media (max-width: 768px) {
    section.mission-vision-section .inner .section-title {
        text-align: start;
    }
}

.mission-vision-section .mission-single {
    padding: 30px;
    border-radius: 25px;
    margin-bottom: 30px;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
}

.mission-vision-section .mission-single .mission-img {
    max-width: 70%;
    margin-bottom: 10px;
}

.mission-vision-section .mission-single .mission-title {
    font-size: 24px;
    font-weight: bold;
}

@media (min-width: 991px) {
    .mission-vision-section .mission-column-wrap:nth-child(2) {
        margin-top: 100px;
    }
}


/*
    mission vision section
*/


/*
    case study section
*/

.case-studies-wrapper {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
}

.case-study-single {
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.case-study-single .case-study-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.case-study-single .case-study-img::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.7;
    content: '';
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background-color: #000;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.07) 61%, rgba(0, 0, 0, 1) 100%);
}

.case-study-single:hover .case-study-img::after {
    opacity: 1;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.07) 20%, rgba(0, 0, 0, 1) 100%);
}

.case-study-single .case-study-img a {
    display: block;
    height: 100%;
}

.case-study-single .case-study-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-study-single .case-study-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    padding-top: 0;
    transition: transform .3s ease;
    transform: translateY(100%) translateZ(0);
    color: #fff;
    z-index: 1;
}

.case-study-single:hover .case-study-content {
    transform: translateY(0) translateZ(0);
}

.case-study-single .case-study-content .case-study-title {
    position: absolute;
    bottom: 100%;
    left: 0;
    padding-inline-start: 20px;
    line-height: 1.5;
    margin: 0;
    margin-bottom: 5px;
    font-size: 24px;
}

.case-study-single .case-study-content p {
    margin-bottom: 10px;
}

.case-study-single .case-study-content a {
    color: #fff;
}

.case-study-single .case-study-content a:hover {
    color: #f3c909;
}

.case-studies-wrapper .case-study-single:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.case-studies-wrapper .case-study-single:nth-child(2) {
    grid-row: span 2;
}

.case-studies-wrapper .case-study-single:nth-child(3) {
    grid-row: span 2;
}

.case-studies-wrapper .case-study-single:nth-child(4) {
    grid-row: span 2;
}

@media (min-width: 766px) {
    .case-studies-wrapper .case-study-single:nth-child(1) {
        min-height: 480px;
    }
}

@media (max-width: 768px) {
    .case-studies-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .case-studies-wrapper {
        grid-template-columns: 1fr;
    }
    .case-studies-wrapper .case-study-single:nth-child(4),
    .case-studies-wrapper .case-study-single:nth-child(3),
    .case-studies-wrapper .case-study-single:nth-child(2),
    .case-studies-wrapper .case-study-single:nth-child(1) {
        grid-column: span 1;
        grid-row: span 1;
    }
}


/*
    case study section
*/


/*
    middle image section
*/

.middle-image-section .image-part {
    margin-bottom: 50px;
    text-align: center;
}

@media (max-width: 768px) {
    .middle-image-section .image-part img {
        max-width: 450px;
        width: 100%;
        margin: 0 auto;
    }
}

.middle-image-section .text-part-single {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-block-end: 50px;
}

.middle-image-section .text-part-single .detail-part h3 {
    font-size: 23px;
    color: #252525;
    line-height: 35px;
    text-align: left;
    font-weight: 700;
    font-style: normal;
}

.middle-image-section .text-part-single .defaut-number {
    font-size: 60px;
    font-weight: bold;
    margin-inline-end: 20px;
    min-width: 36px;
}

@media only screen and (max-width: 768px) and (min-width: 620px) {
    .middle-image-section .feat-text .text-part {
        display: flex;
        gap: 30px;
    }
}


/*
    middle image section
*/


/*
    footer color
*/

footer.site-footer .widget,
footer.site-footer .box li a,
footer.site-footer .widget-title,
footer.site-footer .bottom-footer a,
footer.site-footer .bottom-footer .copyright span,
footer.site-footer .bottom-footer .social-icons li a {
    color: rgba(255, 255, 255, 0.8)
}

footer.site-footer .box {
    padding-left: 0;
}


/*
    footer color
*/


/*
    New hover color
*/

@media (min-width: 992px) {
    .header-contact-inner a:hover,
    .main-navigation .menu>li>a:hover,
    .site-title a:hover {
        color: #fff;
    }
    .charity-custom-btn .btn:hover {
        background-color: #c9a607;
    }
    .header-contact-inner a:focus-within,
    .main-navigation .menu>li>a:focus-within,
    .site-title a:focus-within {
        color: #fff;
    }
    .charity-custom-btn .btn:focus-within {
        background-color: #c9a607;
    }
}


/*
    New hover color
*/


/*
    Media query
*/

@media (max-width: 991px) {
    /* navigation */
    .bottom-nav-wrap {
        padding: 5px 0;
    }
    .site-header .bottom-nav .menu-toggle {
        display: block;
        z-index: 9;
        float: left;
        background: none;
        border: none;
        padding: 0;
        color: #000;
    }
    .site-header .bottom-nav .toggled .menu-toggle {
        position: fixed;
        top: 25px;
        right: 10px;
        padding: 10px 0;
        z-index: 999999;
    }
    .site-header .bottom-nav .toggled .ham-wrap span:first-child {
        display: none;
    }
    .site-header .bottom-nav .toggled .ham-wrap span:nth-child(2) {
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .site-header .bottom-nav .toggled .ham-wrap span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        margin-top: -10px;
    }
    .site-header .bottom-nav .main-menu {
        position: fixed;
        width: 80%;
        height: 100%;
        overflow-y: auto;
        right: -100%;
        top: 0;
        background-color: #fff;
        z-index: 99999;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        padding-top: 60px;
        text-align: left;
        opacity: 0;
        visibility: hidden;
        -webkit-box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.5);
    }
    .site-header .bottom-nav .main-navigation.toggled .main-menu {
        right: 0;
        opacity: 1;
        visibility: visible;
    }
    /* navigation */
    .align-items-center.contact-buttons {
        flex-direction: column;
        align-items: flex-start;
    }
    .top-header-contact {
        display: none;
    }
}

@media (max-width: 600px) {
    .top-nav .top-icons li {
        padding: 10px 15px;
    }
}

@media (max-width: 575px) {
    .site-header #search-overlay.block .centered {
        width: 95%;
    }
    .site-header #search-overlay.block .centered #search-box input[type="text"] {
        padding: 22px 30px 22px 30px;
    }
}