@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 6.9
Requires PHP: 5.6
Version: 2.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

/**
 * SETTINGS
 * File-header..........The file header for the themes style.css file.
 * Fonts................Any font files, if the project needs specific fonts.
 * Global...............Project-specific, globally available variables.
 *
 * TOOLS
 * Functions............Global functions.
 * Mixins...............Global mixins.
 *
 * GENERIC
 * Normalize.css........Normalise browser defaults.
 * Breakpoints..........Mixins and variables for responsive styles
 * Vertical-margins.....Vertical spacing for the main components.
 * Reset................Reset specific elements to make them easier to style in other contexts.
 * Clearings............Clearings for the main components.
 *
 * ELEMENTS
 * Blockquote...........Default blockquote.
 * Forms................Element-level form styling.
 * Headings.............H1–H6
 * Links................Default links.
 * Lists................Default lists.
 * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
 *
 * BLOCKS
 * Audio................Specific styles for the audio block.
 * Button...............Specific styles for the button block.
 * Code.................Specific styles for the code block.
 * Columns..............Specific styles for the columns block.
 * Cover................Specific styles for the cover block.
 * File.................Specific styles for the file block.
 * Gallery..............Specific styles for the gallery block.
 * Group................Specific styles for the group block.
 * Heading..............Specific styles for the heading block.
 * Image................Specific styles for the image block.
 * Latest comments......Specific styles for the latest comments block.
 * Latest posts.........Specific styles for the latest posts block.
 * Legacy...............Specific styles for the legacy gallery.
 * List.................Specific styles for the list block.
 * Media text...........Specific styles for the media and text block.
 * Navigation...........Specific styles for the navigation block.
 * Paragraph............Specific styles for the paragraph block.
 * Pullquote............Specific styles for the pullquote block.
 * Quote................Specific styles for the quote block.
 * Search...............Specific styles for the search block.
 * Separator............Specific styles for the separator block.
 * Table................Specific styles for the table block.
 * Verse................Specific styles for the verse block.
 * Video................Specific styles for the video block.
 * Utilities............Block alignments.
 *
 * COMPONENTS
 * Header...............Header styles.
 * Footer...............Footer styles.
 * Comments.............Comment styles.
 * Archives.............Archive styles.
 * 404..................404 styles.
 * Search...............Search styles.
 * Navigation...........Navigation styles.
 * Footer Navigation....Footer Navigation styles.
 * Pagination...........Pagination styles.
 * Single...............Single page and post styles.
 * Posts and pages......Misc, sticky post styles.
 * Entry................Entry, author biography.
 * Widget...............Widget styles.
 * Editor...............Editor styles.
 *
 * UTILITIES
 * A11y.................Screen reader text, prefers reduced motion etc.
 * Color Palette........Classes for the color palette colors.
 * Editor Font Sizes....Editor Font Sizes.
 * Measure..............The width of a line of text, in characters.
 */

/* Categories 01 to 03 are the basics. */

/* Variables */




.funfact-one__single-inner i {
    font-size: 32px;
}



ul.row.text-center.funfact-one__box.box-jkl {
    align-items: center;
    justify-content: space-between;
}

.jp-footer-contact{
    margin:0;
    padding:0;
    list-style:none;
}

.jp-contact-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:18px;
    color:#fff;
    font-size:16px;
    line-height:1.7;
}

.jp-contact-item i{
    width:22px;
    min-width:22px;
    font-size:18px;
    color:#f5b400; /* NGO Theme Color */
    margin-top:4px;
}

.jp-contact-item span{
    flex:1;
}

.jp-contact-item a{
    color:#ffffff;
    text-decoration:none;
    transition:all .3s ease;
}

.jp-contact-item a:hover{
    color:#f5b400;
}.services-image img {
    border-radius: 20px;
    margin-bottom: 20px;
}


.ml30{
    margin-left: 30px;
}


h1.entry-title {
    display: none;
}


.jan-about-section,
.jan-mission-section,
.jan-services-section,
.jan-values-section,
.jan-why-section{
    padding:80px 0;
}

.jan-subtitle{
    color:#0d6efd;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.jan-about-content h2,
.jan-services-section h2,
.jan-values-section h2,
.jan-why-section h2,
.jan-cta-section h2{
    font-size:40px;
    font-weight:700;
    margin-bottom:20px;
}

.jan-about-img{
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.jan-card,
.jan-service-box,
.jan-value-box{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    height:100%;
    transition:.4s;
}

.jan-card:hover,
.jan-service-box:hover,
.jan-value-box:hover{
    transform:translateY(-8px);
}

.jan-card h3{
    color:#0d6efd;
    margin-bottom:15px;
}

.jan-service-box h4,
.jan-value-box h4{
    margin-bottom:15px;
    font-weight:600;
}

.jan-services-section{
    background:#f8f9fa;
}

.jan-values-section{
    background:#ffffff;
}

.jan-list{
    list-style:none;
    padding:0;
}

.jan-list li{
    padding:15px 0;
    border-bottom:1px solid #eee;
    font-size:18px;
}

.jan-list li:before{
    content:"✓";
    color:#198754;
    font-weight:bold;
    margin-right:10px;
}

.jan-cta-section{
    background:linear-gradient(135deg,#0d6efd,#198754);
    color:#fff;
    padding:90px 0;
}

.jan-btn{
    background:#fff;
    color:#0d6efd;
    padding:12px 35px;
    border-radius:50px;
    font-weight:600;
    margin-top:15px;
}

.jan-btn:hover{
    background:#f1f1f1;
}

@media(max-width:767px){

.jan-about-content h2,
.jan-services-section h2,
.jan-values-section h2,
.jan-why-section h2,
.jan-cta-section h2{
    font-size:30px;
}

.jan-about-section,
.jan-mission-section,
.jan-services-section,
.jan-values-section,
.jan-why-section{
    padding:60px 0;
}

}






      .volunteer-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9f5e9 100%);
            padding: 100px 0;
            position: relative;
            overflow: hidden;
        }
        
        .volunteer-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://picsum.photos/1920/1080?blur=5') center/cover no-repeat;
            opacity: 0.08;
            z-index: 0;
        }
        
        .volunteer-content {
            position: relative;
            z-index: 1;
        }
   .section-title {
    font-size: 3.2rem;
    font-weight: 700;
    background: linear-gradient(90deg, #9bca41, #709727);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1.2rem;
}
        
.section-subtitle {
    font-size: 1.25rem;
    color: #303030;
    max-width: 700px;
    margin: 0 auto 3rem;
}
        .opportunities-title {
            font-size: 2.1rem;
            font-weight: 600;
            color: #1b5e20;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .opportunities-title::after {
            content: '';
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, #4caf50, #81c784);
            display: block;
            margin: 12px auto;
            border-radius: 2px;
        }
        
        .volunteer-card {
            background: white;
            border-radius: 20px;
            padding: 2rem 1.5rem;
            height: 100%;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        }
        
        .volunteer-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 25px 50px rgba(46, 125, 50, 0.15);
        }
        
        .card-icon {
            font-size: 3.2rem;
            width: 85px;
            height: 85px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 50%;
            transition: all 0.3s ease;
        }
        
        .volunteer-card:hover .card-icon {
            background: linear-gradient(135deg, #4caf50, #66bb6a);
            color: white;
            transform: scale(1.1);
        }
        
        .volunteer-card h5 {
            font-size: 1.35rem;
            font-weight: 600;
            color: #1b5e20;
            margin-bottom: 1rem;
            text-align: center;
        }
        
        .volunteer-card p {
            color: #666;
            text-align: center;
            font-size: 1rem;
        }
        
        .btn-volunteer {
            background: linear-gradient(90deg, #2e7d32, #4caf50);
            color: white;
            border: none;
            padding: 12px 35px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-volunteer:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(46, 125, 50, 0.3);
            color: white;
        }




section.volunteer-section button {
    color: white;
}




.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: #1c7c54;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon i {
    font-size: 36px;
    color: #fff;
}

.jan-service-box {
    background: #fff;
    padding: 30px;
    text-align: center;
    border-radius: 15px;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .3s;
}

.jan-service-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}



.jan-mission-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.jan-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    border-top: 4px solid #1c7c54;
}

.jan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}


.jan-card h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}





.jan-values-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.jan-value-box {
    background: #fff;
    padding: 35px 25px;
    text-align: center;
    border-radius: 15px;
    height: 100%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.4s ease;
    border-bottom: 4px solid #1c7c54;
}

.jan-value-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.value-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #1c7c54, #2ca36c);
    border-radius: 50%;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon i {
    color: #fff;
    font-size: 34px;
}

.jan-value-box h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}



.jan-commitment-section {
    padding: 90px 0;
    background: #f8f9fa;
}

.jan-commitment-section h2 {
    font-size: 42px;
    font-weight: 700;
    color: #222;
    margin-bottom: 15px;
}

.title-line {
    width: 80px;
    height: 4px;
    background: #1c7c54;
    margin: 0 auto;
    border-radius: 50px;
}

.commitment-box {
    position: relative;
    max-width: 950px;
    margin: auto;
    padding: 60px 50px;
    background: linear-gradient(135deg,#1c7c54,#2ca36c);
    border-radius: 20px;
    text-align: center;
    color: #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    transition: all .4s ease;
}

.commitment-box:hover {
    transform: translateY(-8px);
}

.commitment-box::before {
    content: "\201C";
    position: absolute;
    top: -40px;
    left: 20px;
    font-size: 180px;
    color: rgba(255,255,255,0.08);
    font-family: Georgia, serif;
}

.commitment-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commitment-icon i {
    font-size: 40px;
    color: #fff;
}

.commitment-box p {
    font-size: 22px;
    line-height: 1.9;
    margin: 0;
    font-weight: 400;
}

.commitment-box strong {
    color: #fff;
    font-weight: 700;
}

@media (max-width: 768px) {

    .commitment-box {
        padding: 40px 25px;
    }

    .commitment-box p {
        font-size: 18px;
        line-height: 1.8;
    }

    .jan-commitment-section h2 {
        font-size: 32px;
    }
}





.jan-cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg,#1c7c54,#2ca36c);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.jan-cta-section::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    top: -120px;
    left: -100px;
}

.jan-cta-section::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    background: rgba(255,255,255,0.05);
    border-radius: 50%;
    bottom: -100px;
    right: -80px;
}

.cta-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 25px;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-icon i {
    font-size: 40px;
    color: #fff;
}

.jan-cta-section h2 {
    font-size: 46px;
    font-weight: 700;
    margin-bottom: 20px;
}

.jan-cta-section p {
    max-width: 850px;
    margin: 0 auto 20px;
    font-size: 18px;
    line-height: 1.9;
}

.cta-highlight {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 35px !important;
}

.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.jan-btn {
    background: #fff;
    color: #1c7c54;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    transition: all .3s ease;
}

.jan-btn:hover {
    transform: translateY(-3px);
    color: #1c7c54;
}

.jan-btn-outline {
    border: 2px solid #fff;
    color: #fff;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    transition: all .3s ease;
}

.jan-btn-outline:hover {
    background: #fff;
    color: #1c7c54;
}

@media (max-width:768px) {

    .jan-cta-section h2 {
        font-size: 34px;
    }

    .cta-highlight {
        font-size: 18px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}