/*
Theme Name: Qi Child
Theme URI: https://qodeinteractive.com/qi-theme
Template: qi
Author: Qode Interactive
Author URI: https://qodeinteractive.com
Description: Qi theme is the latest free offering developed by Qode Interactive, winners of multiple awards and accolades in the fields of web design and development and one of bestselling WordPress theme creators. We approached Qi the same way we do when we develop premium themes - this means that the theme features comprehensive modules for your portfolio, shop, blog, a beautiful selection of contemporary premade inner page templates great for a wide array of purposes, and all the options and functionalities you may ever need to set up a professional website the easy way. Qi theme features 100 beautifully designed starter sites for all types of modern websites. Alongside stunningly designed websites for all types of businesses including spa, beauty salon, medical, SaaS, marketing, gym, and dentist websites, just to name a few, Qi also has a huge collection of sites great for personal uses. Do you wish to create a new CV or a resume, or perhaps you are a restaurant owner, a videographer or an SEO expert? Or maybe you’re just looking for a captivating yet simple way to announce your wedding? Whatever it might be, Qi has you covered! Top all this off with the authentic design style that Qode Interactive collective is known for, and you get a true creative powerhouse that’s fast, reliable and comes with virtually limitless customization options!
Tags: food-and-drink,e-commerce,portfolio,grid-layout,one-column,two-columns,three-columns,four-columns,left-sidebar,right-sidebar,featured-images,custom-logo,custom-menu,footer-widgets,post-formats,full-width-template,sticky-post,threaded-comments,translation-ready,editor-style
Version: 1.3.1756994875
Updated: 2025-09-04 14:07:55

*/

/*projects single page*/

/* Project Single Page Styles */

.sbn-project-single {
    background: #fff;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Hero Section - Featured Image */
.project-hero {
    width: 100%;
    margin-bottom: 0;
}

.project-featured-image {
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.project-featured-image .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Main Section with Two Columns */
.project-main-section {
    padding: 60px 0;
}

.project-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Left Sidebar - 40% Width */
.project-sidebar {
    width: 40%;
    flex-shrink: 0;
}

.sidebar-widget {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.widget-title {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid #f96039;
}

/* Gallery in Sidebar */
.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    aspect-ratio: 1;
}

.gallery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Join Us & CTA Widget */
.cta-widget {
    background: #19b46a;
    color: #fff;
}

.cta-widget .widget-title {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.3);
}

.join-us-text {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #fff;
}

.donate-box {
    margin-top: 20px;
}

.btn-donate-sidebar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 30px;
    background: #fff;
    color: #f9603a;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.btn-donate-sidebar:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    background: #f8f9fa;
}

.donate-icon {
    font-size: 20px;
}

/* Right Content Area - 60% Width */
.project-main-content {
    width: 60%;
    flex-grow: 1;
}

/* Project Icon */
.project-icon-wrapper {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 25px;
}

.project-icon {
    width: 200px;
    height: 200px;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 25px rgb(250 96 55 / 8%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;

}

/* Project Title */
.project-title {
    font-size: 42px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 30px 0;
    line-height: 1.3;
}

/* Content */
.content-wrapper {
    font-size: 17px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 40px;
}

.content-wrapper p {
    margin-bottom: 20px;
}

.content-wrapper h2,
.content-wrapper h3 {
    margin-top: 35px;
    margin-bottom: 18px;
    color: #2c3e50;
    font-weight: 600;
}

.content-wrapper h2 {
    font-size: 28px;
}

.content-wrapper h3 {
    font-size: 22px;
}

.content-wrapper ul,
.content-wrapper ol {
    margin-bottom: 20px;
    padding-left: 30px;
}

.content-wrapper li {
    margin-bottom: 10px;
}

/* Main Donate Button */
.donate-button-main {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 2px solid #e9ecef;
}

.btn-donate-main {
    display: inline-block;
    padding: 18px 50px;
    background: linear-gradient(135deg, #fc6238 0%, #f06143 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
}

.btn-donate-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .project-layout {
        flex-direction: column-reverse;
    }
    
    .project-sidebar,
    .project-main-content {
        width: 100%;
    }
    
    .project-gallery-grid {
        /*grid-template-columns: repeat(3, 1fr);*/
    }
}

@media (max-width: 768px) {
    .project-featured-image {
        height: 300px;
    }
    
    .project-title {
        font-size: 32px;
    }
    
    .project-icon {
        width: 80px;
        height: 80px;
    }
    
    .content-wrapper {
        font-size: 16px;
    }
    
    .project-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sidebar-widget {
        padding: 20px;
    }
    
    .widget-title {
        font-size: 20px;
    }
    
    .btn-donate-main {
        padding: 15px 40px;
        font-size: 16px;
        display: block;
        text-align: center;
    }
    
    .project-main-section {
        padding: 40px 0;
    }
}

@media (max-width: 480px) {
    .project-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .project-title {
        font-size: 26px;
    }
    
    .project-icon {
        width: 70px;
        height: 70px;
    }
}