/*==================================================
Project     : Tinni Foundation
Author      : Digicommit
Version     : 1.0
====================================================*/

/*==================================================
Google Fonts
====================================================*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/*==================================================
CSS Variables
====================================================*/
:root {

    /*========== Colors ==========*/

    --primary: #2E7D32;
    --primary-light: #4CAF50;
    --primary-dark: #1B5E20;

    --secondary: #0D47A1;
    --secondary-light: #1976D2;
    --secondary-dark: #0B2E6D;

    --accent: #F57C00;
    --accent-light: #FF9800;

    --pink: #C2185B;

    --dark: #222222;
    --dark-light: #555555;

    --white: #FFFFFF;
    --off-white: #FAFAFA;
    --light: #F8F9FA;
    --border: #E8E8E8;

    --success: #28A745;
    --warning: #FFC107;
    --danger: #DC3545;

    /*========== Typography ==========*/

    --heading-font: 'Cormorant Garamond', serif;
    --body-font: 'Poppins', sans-serif;

    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-24: 24px;
    --fs-30: 30px;
    --fs-36: 36px;
    --fs-42: 42px;
    --fs-48: 48px;
    --fs-56: 56px;
    --fs-64: 64px;

    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;

    --line-height: 1.7;

    /*========== Layout ==========*/

    --container-width: 1320px;

    --section-padding: 80px;
    --section-padding-sm: 80px;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 30px;
    --radius-round: 50%;

    /*========== Shadow ==========*/

    --shadow-sm: 0 5px 20px rgba(0, 0, 0, .05);

    --shadow-md: 0 12px 35px rgba(0, 0, 0, .08);

    --shadow-lg: 0 20px 60px rgba(0, 0, 0, .12);

    /*========== Transition ==========*/

    --transition: .3s ease;
    --transition-lg: .5s ease;

}

/*==================================================
Global Reset
====================================================*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family: var(--body-font);
    font-size: var(--fs-16);
    font-weight: 400;
    color: var(--dark-light);
    line-height: var(--line-height);
    background: var(--white);
    overflow-x: hidden;

}

img {

    max-width: 100%;
    height: auto;
    display: block;

}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {

    text-decoration: none;
    transition: var(--transition);
    color: inherit;

}

button {

    border: none;
    outline: none;
    cursor: pointer;
    transition: var(--transition);

}

input,
textarea,
select {

    outline: none;
    box-shadow: none;

}

section {

    padding: var(--section-padding) 0;

}

.container-custom {

    width: 100%;
    max-width: 1320px;
    margin: auto;
    padding: 0 15px;

}

/*==================================================
Typography
====================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--heading-font);
    color: var(--dark);
    font-weight: 700;
    line-height: 1.2;

}

h1 {

    font-size: 64px;

}

h2 {

    font-size: 43px;

}

h3 {

    font-size: 40px;

}

h4 {

    font-size: 30px;

}

h5 {

    font-size: 24px;

}

h6 {

    font-size: 20px;

}

p {

    margin-bottom: 15px;

}

/*==================================================
Utility Classes
====================================================*/

.bg-light {

    background: var(--light);

}

.bg-primary {

    background: var(--primary);

}

.bg-secondary {

    background: var(--secondary);

}

.text-primary {

    color: var(--primary) !important;

}

.text-secondary {

    color: var(--secondary) !important;

}

.text-white {

    color: var(--white) !important;

}

.text-center {

    text-align: center;

}

.mb-30 {

    margin-bottom: 30px;

}

.mb-50 {

    margin-bottom: 50px;

}

.mt-30 {

    margin-top: 30px;

}

/*==================================================
Buttons
====================================================*/

.theme-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 10px 35px;

    background: var(--primary);

    color: var(--white);

    border-radius: 50px;

    font-weight: 600;

    transition: var(--transition);

}

.theme-btn:hover {

    background: var(--secondary);
    color: #fff;
    transform: translateY(-4px);

}

.outline-btn {

    background: transparent;

    border: 2px solid var(--primary);

    color: var(--primary);

    padding: 10px 35px;
    border-radius: 50px;

}

.outline-btn:hover {

    background: var(--primary);

    color: #fff;

}

/*==================================================
Section Heading
====================================================*/

.section-heading {

    margin-bottom: 60px;

}

.section-subtitle {

    display: inline-block;

    color: var(--pink);

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 15px;

}

.section-title {

    max-width: 700px;

    margin: auto;

}

.section-description {

    max-width: 700px;

    margin: 20px auto 0;

}

/*=========================================
TOP BAR
=========================================*/

.top-bar {

    background: var(--primary);

    color: #fff;

    padding: 10px 0;

    font-size: 14px;

}

.top-contact {

    display: flex;

    gap: 25px;

    align-items: center;

}

.top-contact li {

    display: flex;

    gap: 8px;

    align-items: center;

}

.top-right {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    gap: 20px;

}

.social-icons {

    display: flex;

    gap: 10px;

}

.social-icons a {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .15);

    display: flex;

    justify-content: center;

    align-items: center;

}

.social-icons a:hover {

    background: #fff;

    color: var(--primary);

}

.top-btn {

    padding: 10px 25px;

    font-size: 14px;

}

/*=========================================
HEADER
=========================================*/

/*==========================
HEADER
==========================*/

.main-header {

    background: #fff;

    box-shadow: 0 5px 25px rgba(0, 0, 0, .05);

    position: relative;

    z-index: 999;

}

.header-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 95px;

}

.logo {

    flex: 0 0 140px;

}

.logo img {

    height: 85px;

    width: auto;

}

.main-menu {

    display: flex;

    align-items: center;

    gap: 40px;

    margin: 0;

}

.main-menu li {

    list-style: none;

}

.main-menu a {

    font-size: 16px;

    font-weight: 600;

    color: #222;

    position: relative;

    padding: 36px 0;

}

.main-menu a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 28px;

    width: 0;

    height: 2px;

    background: var(--primary);

    transition: .3s;

}

.main-menu a:hover,

.main-menu a.active {

    color: var(--primary);

}

.main-menu a:hover::after,

.main-menu a.active::after {

    width: 100%;

}

.main-header .theme-btn {

    padding: 10px 28px;

}

/*=========================================
Sticky Header
=========================================*/

.main-header.sticky {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    animation: header .4s ease;

    background: #fff;

}

.main-header.sticky .header-wrapper {

    height: 90px;

}

.main-header.sticky .logo img {

    height: 85px;

}

/*==============================
Mobile Toggle
==============================*/

.mobile-toggle {

    display: none;

    width: 48px;

    height: 48px;

    border: none;

    background: var(--primary);

    color: #fff;

    border-radius: 10px;

    font-size: 20px;

}

.header-right {

    display: flex;

    align-items: center;

    gap: 15px;

}

/*==============================
Offcanvas
==============================*/

.mobile-menu {

    position: fixed;

    top: 0;

    right: -380px;

    width: 350px;

    max-width: 100%;

    height: 100vh;

    background: #fff;

    z-index: 9999;

    transition: .4s;

    padding: 30px;

    overflow: auto;

}

.mobile-menu.active {

    right: 0;

}

.mobile-menu-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .55);

    opacity: 0;

    visibility: hidden;

    transition: .3s;

    z-index: 9998;

}

.mobile-menu-overlay.active {

    opacity: 1;

    visibility: visible;

}

.mobile-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;

}

.mobile-header img {

    height: 55px;

}

.mobile-close {

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: #f4f4f4;

}

.mobile-menu ul {

    padding: 0;

    margin: 0 0 30px;

}

.mobile-menu ul li {

    list-style: none;

}

.mobile-menu ul li a {

    display: block;

    padding: 16px 0;

    border-bottom: 1px solid #eee;

    color: #222;

    font-weight: 600;

}

.mobile-menu ul li a:hover {

    color: var(--primary);

}

.mobile-contact {

    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid #eee;

}

.mobile-contact p {

    margin-bottom: 15px;

}

/*======================================
Hero Section
======================================*/

.hero-section {

    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, #f7fbf5, #ffffff);

    padding: 90px 0;

}

.hero-content {

    max-width: 620px;

}

.hero-subtitle {

    display: inline-block;

    padding: 8px 18px;

    background: rgba(46, 125, 50, .1);

    color: var(--primary);

    border-radius: 50px;

    font-weight: 600;

    margin-bottom: 20px;

}

.hero-content h1 {

    font-size: 60px;

    line-height: 1.15;

    margin-bottom: 25px;

}

.hero-content p {

    font-size: 18px;

    color: #666;

    margin-bottom: 35px;

}

.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}

.hero-image {

    text-align: center;

}

.hero-image img {

    max-width: 100%;

    animation: floatImage 5s ease-in-out infinite;

}

@keyframes floatImage {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-15px);

    }

    100% {

        transform: translateY(0);

    }

}

/*=============================
Hero Slider
==============================*/
.hero-slider {
    padding: 0;
}

.hero-slider .outline-btn {
    color: #fff;
}

.hero-item {

    position: relative;

    min-height: 750px;

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

}

.hero-item .overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(0, 0, 0, .72) 20%,
            rgba(0, 0, 0, .35) 60%,
            rgba(0, 0, 0, .15) 100%);

}

.hero-content {

    position: relative;

    z-index: 2;

    max-width: 700px;

    color: #fff;

}

.hero-content span {

    display: inline-block;

    background: rgba(255, 255, 255, .15);

    padding: 8px 18px;

    border-radius: 50px;

    margin-bottom: 20px;

    backdrop-filter: blur(5px);

}

.hero-content h1 {

    font-size: 68px;

    color: #fff;

    line-height: 1.1;

    margin-bottom: 25px;

}

.hero-content p {

    font-size: 19px;

    color: #f5f5f5;

    margin-bottom: 35px;

    max-width: 600px;

}

.hero-btns {

    display: flex;

    gap: 20px;

}

.hero-carousel .owl-dots {

    position: absolute;

    bottom: 45px;

    left: 50%;

    transform: translateX(-50%);

}

.hero-carousel .owl-dot span {

    width: 14px;

    height: 14px;

    border-radius: 50%;

}

.hero-carousel .owl-dot.active span {

    background: var(--primary);

}

/*=========================================
Hero Slider Navigation
=========================================*/

.hero-carousel .owl-nav {

    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;

}

.hero-carousel .owl-nav button {

    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .15) !important;
    backdrop-filter: blur(10px);
    color: #fff !important;
    font-size: 22px !important;
    transition: .35s ease;
    pointer-events: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;

}

.hero-carousel .owl-nav button.owl-prev {

    margin-left: 40px;

}

.hero-carousel .owl-nav button.owl-next {

    margin-right: 40px;

}

.hero-carousel .owl-nav button:hover {

    background: var(--primary) !important;
    transform: scale(1.08);

}

.hero-carousel .owl-nav button span {

    display: none;

}

.hero-carousel .owl-nav button i {

    line-height: 1;

}

/*=========================================
ABOUT
=========================================*/

.about-section {

    position: relative;

}

.about-image {

    position: relative;

    padding-right: 80px;

}

.about-image img {

    width: 100%;

    border-radius: 25px;

    box-shadow: var(--shadow-lg);

}

.experience-box {

    position: absolute;

    top: 40px;

    right: 0;

    width: 170px;

    background: var(--primary);

    color: #fff;

    border-radius: 20px;

    padding: 25px;

    text-align: center;

}

.experience-box h3 {

    color: #fff;

    font-size: 42px;

    margin-bottom: 5px;

}

.support-box {

    position: absolute;

    left: 40px;

    bottom: 30px;

    background: #fff;

    border-radius: 18px;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow: var(--shadow-md);

}

.support-box i {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: var(--primary);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

}

.support-box strong {

    display: block;

    color: var(--dark);

    font-size: 22px;

}

.support-box p {

    margin: 0;

}

.about-content {

    padding-left: 40px;

}

.about-content h2 {

    margin: 0px 0 5px;

}

.about-list {

    margin: 35px 0;

}

.about-item {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

}

.about-item i {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(46, 125, 50, .1);

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

}

/*=========================================
IMPACT
=========================================*/

.impact-section {

    position: relative;

    padding: 80px 0;

    background: url('../images/impact-bg.webp') center center/cover;

    overflow: hidden;

}

.impact-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .72);

}

.impact-section .container-custom {

    position: relative;

    z-index: 2;

}

.impact-box {

    background: rgba(255, 255, 255, .08);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, .15);

    border-radius: 20px;

    padding: 45px 30px;

    text-align: center;

    transition: .4s;

    height: 100%;

}

.impact-box:hover {

    transform: translateY(-10px);

    background: var(--primary);

}

.impact-icon {

    width: 80px;

    height: 80px;

    margin: auto;

    border-radius: 50%;

    background: rgba(255, 255, 255, .15);

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 25px;

}

.impact-icon i {

    color: #fff;

    font-size: 34px;

}

.impact-box h3 {

    color: #fff;

    font-size: 50px;

    margin-bottom: 12px;

}

.impact-box h5 {

    color: #fff;

    margin-bottom: 0;

}

/*=========================================
FOCUS AREA
=========================================*/

.focus-section {

    padding: 80px 0;
    background: #f8f9fa;

}

.focus-card {

    position: relative;
    overflow: hidden;
    border-radius: 20px;
    height: 420px;

}

.focus-card img {

    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .6s;

}

.focus-overlay {

    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, .90),
            rgba(0, 0, 0, .15));
    padding: 35px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;

}

.focus-card:hover img {

    transform: scale(1.1);

}

.focus-icon {

    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

}

.focus-icon i {

    font-size: 28px;

}

.focus-overlay h4 {

    color: #fff;
    margin-bottom: 15px;

}

.focus-overlay p {

    color: #eee;
    margin-bottom: 20px;

}

.focus-overlay a {

    color: #fff;
    font-weight: 600;

}

.focus-overlay a i {

    margin-left: 8px;
    transition: .3s;

}

.focus-overlay a:hover i {

    margin-left: 15px;

}

/*=========================================
CTA SECTION
=========================================*/

.cta-section {

    position: relative;
    padding: 140px 0;
    background: url('../images/cta-bg.webp') center center/cover no-repeat;
    overflow: hidden;

}

/* .cta-overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);

} */

.cta-content {

    position: relative;
    z-index: 2;

}

.cta-content h2 {

    color: #fff;
    font-size: 58px;
    margin: 20px 0;

}

.cta-content p {

    color: #ddd;
    max-width: 760px;
    margin: 0 auto 45px;
    font-size: 18px;

}

.cta-buttons {

    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 60px;

}

.light-btn {

    border: 2px solid #fff;
    color: #fff;

}

.light-btn:hover {

    background: #fff;
    color: var(--dark);

}

.cta-info {

    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;

}

.info-item {

    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 600;

}

.info-item i {

    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: .3s;

}

.info-item:hover i {

    background: var(--primary);
    transform: rotate(360deg);

}

/*=========================================
PROJECTS
=========================================*/

.projects-section {

    padding: 80px 0;

}

.project-item {

    margin-bottom: 80px;

}

.project-image {

    overflow: hidden;
    border-radius: 24px;

}

.project-image img {

    width: 100%;
    transition: .6s;

}

.project-image:hover img {

    transform: scale(1.08);

}

.project-content span {

    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;

}

.project-content h3 {

    margin: 15px 0 20px;

    font-size: 42px;

}

.progress-item {

    margin: 35px 0;

}

.progress-title {

    display: flex;

    justify-content: space-between;

    margin-bottom: 12px;

    font-weight: 600;

}

.progress {

    height: 10px;

    border-radius: 30px;

    background: #ececec;

}

.progress-bar {

    border-radius: 30px;

}

/*=========================================
WHY CHOOSE
=========================================*/

.why-section {

    padding: 80px 0;

    background: #f8fbfd;

}

.why-card {

    background: #fff;

    padding: 15px;

    border-radius: 20px;

    margin-bottom: 30px;

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    border: 1px solid #eef2f6;

}

.why-card:last-child {

    margin-bottom: 0;

}

.why-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.why-icon {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    background: rgba(46, 125, 50, .1);

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 0 auto 25px;

    font-size: 34px;

    transition: .4s;

}

.why-card:hover .why-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.why-card h4 {

    margin-bottom: 15px;

}

.why-card p {

    margin: 0;

}

.why-image {

    text-align: center;

}

.why-image img {

    width: 100%;

    max-width: 380px;

    margin: auto;

}

/*=========================================
EVENTS
=========================================*/

.events-section {

    padding: 80px 0;

    background: #fff;

}

.event-card {

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    height: 100%;

}

.event-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.event-image {

    position: relative;

    overflow: hidden;

}

.event-image img {

    width: 100%;

    height: 280px;

    object-fit: cover;

    transition: .6s;

}

.event-card:hover img {

    transform: scale(1.08);

}

.events-section .event-card .event-date {

    position: absolute;

    top: 20px;

    left: 20px;

    width: 80px;

    height: 80px;

    background: var(--primary);

    color: #fff;

    border-radius: 15px;

    text-align: center;

    display: flex;

    flex-direction: column;

    justify-content: center;

}

.event-date h3 {

    color: #fff;

    margin: 0;

    font-size: 30px;

    line-height: 1;

}

.event-date span {

    font-size: 15px;

}

.event-content {

    padding: 30px;

}

.event-category {

    display: inline-block;

    background: rgba(46, 125, 50, .1);

    color: var(--primary);

    padding: 6px 15px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 15px;

}

.event-content h4 {

    margin-bottom: 15px;

}

.event-content ul {

    margin: 25px 0;

}

.event-content ul li {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #666;

}

.event-content ul li i {

    color: var(--primary);

    width: 18px;

}

.read-btn {

    color: var(--primary);

    font-weight: 600;

}

.read-btn i {

    margin-left: 8px;

    transition: .3s;

}

.read-btn:hover i {

    margin-left: 14px;

}

/*=========================================
TESTIMONIALS
=========================================*/

.testimonial-section {

    padding: 80px 0;

    background: url('../images/impact-bg.webp') center center/cover;

    /* background: #f8f9fa; */

}

.testimonial-item {

    max-width: 820px;

    margin: auto;

    background: #fff;

    border-radius: 25px;

    padding: 15px;

    text-align: center;

    box-shadow: var(--shadow-md);

    position: relative;

}

.quote-icon {

    width: 50px;

    height: 50px;

    background: var(--primary);

    color: #fff;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    margin: auto;

    margin-bottom: 25px;

}

.testimonial-image {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    overflow: hidden;

    margin: 0 auto 25px;

    border: 5px solid rgba(46, 125, 50, .12);

}

.testimonial-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.rating {

    color: #f7b500;

    margin-bottom: 25px;

}

.testimonial-item p {

    font-size: 15px;

    line-height: 1.9;

    max-width: 650px;

    margin: auto;

}

.testimonial-item h4 {

    margin-top: 30px;

    margin-bottom: 5px;

}

.testimonial-item span {

    color: var(--primary);

    font-weight: 600;

}

.testimonial-slider .owl-stage {

    display: flex;

}

.testimonial-slider .owl-item {

    display: flex;

}

.testimonial-slider .owl-nav {

    margin-top: 40px;

    display: flex;

    justify-content: center;

    gap: 20px;

}

.testimonial-slider .owl-nav button {

    width: 55px;

    height: 55px;

    border-radius: 50% !important;

    background: #fff !important;

    box-shadow: var(--shadow-sm);

    transition: .3s;

}

.testimonial-slider .owl-nav button:hover {

    background: var(--primary) !important;

    color: #fff !important;

}

/*=========================================
JOIN US
=========================================*/

.join-section {

    padding: 80px 0;

    background: #f8fbfd;

}

.join-content {

    padding-right: 50px;

}

.join-content h2 {

    margin: 20px 0;

}

.join-list {

    margin-top: 40px;

}

.join-list li {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 22px;

    font-weight: 600;

}

.join-list i {

    color: var(--primary);

    font-size: 22px;

}

.join-form {

    background: #fff;

    padding: 45px;

    border-radius: 25px;

    box-shadow: var(--shadow-lg);

}

.join-form .form-control,
.join-form .form-select {

    height: 60px;

    border-radius: 12px;

    border: 1px solid #e5e5e5;

}

.join-form textarea {

    height: auto !important;

    padding-top: 18px;

}

/*=========================================
BLOG
=========================================*/

.blog-section {

    padding: 80px 0;

}

.blog-card {

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    height: 100%;

}

.blog-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.blog-image {

    overflow: hidden;

}

.blog-image img {

    width: 100%;

    height: 260px;

    object-fit: cover;

    transition: .6s;

}

.blog-card:hover img {

    transform: scale(1.08);

}

.blog-content {

    padding: 30px;

}

.blog-category {

    display: inline-block;

    background: rgba(46, 125, 50, .1);

    color: var(--primary);

    padding: 6px 15px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 600;

    margin-bottom: 18px;

}

.blog-content h4 {

    margin-bottom: 18px;

    line-height: 1.4;

}

.blog-meta {

    margin-bottom: 18px;

    color: #777;

    font-size: 14px;

}

.blog-meta i {

    color: var(--primary);

    margin-right: 6px;

}

.blog-content a {

    color: var(--primary);

    font-weight: 600;

}

.blog-content a i {

    margin-left: 8px;

    transition: .3s;

}

.blog-content a:hover i {

    margin-left: 14px;

}

/*=========================================
NEWSLETTER
=========================================*/

.newsletter-section {

    padding: 80px 0;

}

.newsletter-wrapper {

    background: linear-gradient(135deg, #2E7D32, #1B5E20);

    padding: 70px;

    border-radius: 30px;

}

.newsletter-content h2 {

    color: #fff;

    margin: 15px 0;

}

.newsletter-content p {

    color: rgba(255, 255, 255, .85);

}

.newsletter-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.newsletter-form input {

    height: 60px;

    border: none;

    border-radius: 12px;

    padding: 0 20px;

}

.newsletter-form button {

    height: 60px;

    border: none;

    border-radius: 12px;

    background: var(--accent);

    color: #fff;

    font-weight: 600;

    transition: .3s;

}

.newsletter-form button:hover {

    background: #fff;

    color: var(--primary);

}

/*=========================================
FOOTER
=========================================*/

.footer {

    background: #111;

    color: #ddd;

    padding-top: 90px;

}

.footer-logo {

    height: 115px;

    margin-bottom: 25px;

    background: #fff;

    padding: 10px;

    border-radius: 10px;

}

.footer h5 {

    color: #fff;

    margin-bottom: 25px;

}

.footer ul {

    padding: 0;

}

.footer ul li {

    margin-bottom: 14px;

}

.footer a {

    color: #ddd;

}

.footer a:hover {

    color: var(--primary);

}

.footer-social {

    display: flex;

    gap: 12px;

    margin-top: 25px;

}

.footer-social a {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: #222;

    display: flex;

    justify-content: center;

    align-items: center;

}

.footer-social a:hover {

    background: var(--primary);

    color: #fff;

}

.footer-contact i {

    color: var(--primary);

    width: 22px;

}

.footer-bottom {

    margin-top: 70px;

    border-top: 1px solid rgba(255, 255, 255, .1);

    padding: 25px 0;

}

/*=========================================
PAGE BANNER
=========================================*/

.page-banner {

    position: relative;

    height: 420px;

    background: url('../images/breadcrumb.webp') center center/cover no-repeat;

    display: flex;

    align-items: center;

}

.page-banner-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .65);

}

.page-banner-content {

    position: relative;

    z-index: 2;

    text-align: center;

}

.page-banner-content h1 {

    color: #fff;

    font-size: 64px;

    margin: 20px 0;

}

.breadcrumb-nav {

    display: flex;

    justify-content: center;

    gap: 10px;

    color: #fff;

}

.breadcrumb-nav a {

    color: #fff;

}

.breadcrumb-nav a:hover {

    color: var(--accent);

}

/*=========================================
OUR STORY
=========================================*/

.story-section {

    padding: 80px 0;

}

.story-images {

    position: relative;

    padding-right: 80px;

}

.story-main {

    width: 100%;

    border-radius: 24px;

}

.story-small {

    position: absolute;

    right: 0;

    bottom: 40px;

    width: 220px;

    border: 8px solid #fff;

    border-radius: 20px;

    box-shadow: var(--shadow-lg);

}

.story-content {

    padding-left: 30px;

}

.story-content h2 {

    margin: 20px 0;

}

.story-content p {

    margin-bottom: 20px;

}

.story-content blockquote {

    margin-top: 35px;

    border-left: 5px solid var(--primary);

    padding-left: 25px;

    font-size: 22px;

    font-style: italic;

    color: var(--primary);

}

/*=========================================
MISSION & VISION
=========================================*/

.mission-section {

    padding: 80px 0;

    background: #f8fbfd;

}

.purpose-card {

    background: #fff;

    padding: 45px;

    border-radius: 24px;

    text-align: center;

    height: 100%;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    border: 1px solid #eef2f5;

}

.purpose-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.purpose-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    margin: auto;

    margin-bottom: 25px;

    background: rgba(46, 125, 50, .12);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 36px;

    transition: .4s;

}

.purpose-card:hover .purpose-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.purpose-card h3 {

    margin-bottom: 18px;

}

.purpose-image {

    text-align: center;

}

.purpose-image img {

    max-width: 100%;

    width: 100%;

    animation: floatImage 5s ease-in-out infinite;

}

/*=========================================
CORE VALUES
=========================================*/

.values-section {

    padding: 80px 0;

}

.values-wrapper {

    margin-top: 60px;

}

.value-card {

    background: #fff;

    border-radius: 22px;

    padding: 35px;

    text-align: center;

    height: 100%;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    border: 1px solid #eef2f5;

}

.value-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.value-icon {

    width: 80px;

    height: 80px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .1);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 30px;

    margin-bottom: 25px;

    transition: .4s;

}

.value-card:hover .value-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.foundation-center {

    display: flex;

    justify-content: center;

    margin: 50px 0;

}

.center-circle {

    width: 240px;

    height: 240px;

    border-radius: 50%;

    background: linear-gradient(135deg, #2E7D32, #1B5E20);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #fff;

    text-align: center;

    box-shadow: 0 20px 50px rgba(46, 125, 50, .25);

}

.center-circle img {

    width: 150px;

    margin-bottom: 15px;

}

.center-circle h5 {

    color: #fff;

    margin: 0;

}

/*=========================================
HOW WE WORK
=========================================*/

.process-section {

    padding: 80px 0;

    background: #f8fbfd;

}

.process-wrapper {

    margin-top: 70px;

}

.process-card {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 25px;

    background: #fff;

    border-radius: 25px;

    padding: 40px;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    height: 100%;

    overflow: hidden;

}

.process-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.process-number {

    position: absolute;

    top: 20px;

    right: 25px;

    font-size: 72px;

    font-weight: 800;

    color: rgba(46, 125, 50, .06);

    line-height: 1;

}

.process-icon {

    width: 85px;

    height: 85px;

    flex-shrink: 0;

    border-radius: 20px;

    background: rgba(46, 125, 50, .10);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 34px;

    transition: .4s;

}

.process-card:hover .process-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.process-content h3 {

    margin-bottom: 15px;

}

.process-content p {

    margin: 0;

}

/*=========================================
CAUSE INTRO
=========================================*/

.causes-intro {

    padding: 80px 0;

}

.intro-image img {

    width: 100%;

    border-radius: 24px;

}

.intro-content {

    padding-left: 40px;

}

.intro-content h2 {

    margin: 20px 0;

}

.intro-content p {

    margin-bottom: 20px;

}

/*=========================================
CAUSE SECTION
=========================================*/

.cause-section {

    padding: 80px 0;

}

.cause-section:nth-child(even) {

    background: #f8fbfd;

}

.cause-image {

    position: relative;

}

.cause-image img {

    width: 100%;

    border-radius: 24px;

    box-shadow: var(--shadow-lg);

}

.cause-number {

    position: absolute;

    top: 25px;

    left: 25px;

    width: 90px;

    height: 90px;

    border-radius: 20px;

    background: var(--primary);

    color: #fff;

    font-size: 40px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 20px 40px rgba(46, 125, 50, .25);

}

.cause-content {

    padding-left: 30px;

}

.cause-content h2 {

    margin: 20px 0;

}

.cause-content p {

    margin-bottom: 20px;

}

.cause-features {

    margin: 35px 0;

}

.feature-item {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

}

.feature-item i {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: rgba(46, 125, 50, .12);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

}

/*=========================================
WHY CAUSES
=========================================*/

.why-cause-section {

    padding: 80px 0;

    background: #f8fbfd;

}

.why-cause-card {

    background: #fff;

    padding: 40px;

    border-radius: 20px;

    text-align: center;

    height: 100%;

    transition: .4s;

    box-shadow: var(--shadow-sm);

    border: 1px solid #eef2f6;

}

.why-cause-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.why-cause-card i {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: rgba(46, 125, 50, .1);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    margin-bottom: 25px;

    font-size: 30px;

    transition: .4s;

}

.why-cause-card:hover i {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.why-cause-card h4 {

    margin-bottom: 15px;

}

/*=========================================
PROJECT INTRO
=========================================*/

.project-intro {

    padding: 80px 0;

}

.project-intro .intro-image img {

    width: 100%;

    border-radius: 24px;

}

.project-intro .intro-content {

    padding-left: 40px;

}

.project-intro .intro-content h2 {

    margin: 20px 0;

}

/*=========================================
FEATURED PROJECT
=========================================*/

.featured-project {

    padding: 80px 0;

    background: #f8fbfd;

}

.featured-wrapper {

    margin-top: 60px;

}

.featured-image {

    position: relative;

}

.featured-image img {

    width: 100%;

    border-radius: 25px;

    box-shadow: var(--shadow-lg);

}

.initiative-badge {

    position: absolute;

    left: 30px;

    bottom: 30px;

    background: var(--primary);

    color: #fff;

    padding: 14px 25px;

    border-radius: 50px;

    font-weight: 600;

}

.featured-content h3 {

    margin-bottom: 25px;

}

.initiative-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    margin: 35px 0;

}

.initiative-list div {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 600;

}

.initiative-list i {

    color: var(--primary);

}

.initiative-roadmap {

    margin-bottom: 40px;

}

.roadmap-item {

    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 18px;

    font-weight: 600;

}

.roadmap-item span {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #ddd;

}

.roadmap-item.active span {

    background: var(--primary);

    box-shadow: 0 0 0 6px rgba(46, 125, 50, .12);

}

/*=========================================
INITIATIVES
=========================================*/

.initiative-section {

    padding: 80px 0;

}

.initiative-timeline {

    max-width: 900px;

    margin: 70px auto 0;

    position: relative;

}

.initiative-timeline:before {

    content: '';

    position: absolute;

    left: 34px;

    top: 0;

    bottom: 0;

    width: 4px;

    background: #E5E7EB;

}

.initiative-item {

    position: relative;

    display: flex;

    gap: 30px;

    margin-bottom: 45px;

}

.initiative-icon {

    width: 70px;

    height: 70px;

    background: var(--primary);

    color: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 28px;

    z-index: 2;

    flex-shrink: 0;

}

.initiative-card {

    flex: 1;

    background: #fff;

    padding: 35px;

    border-radius: 20px;

    box-shadow: var(--shadow-sm);

    transition: .4s;

}

.initiative-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}

.status {

    display: inline-block;

    padding: 6px 16px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 20px;

}

.status.planned {

    background: #E8F5E9;

    color: #2E7D32;

}

.status.upcoming {

    background: #FFF3E0;

    color: #F57C00;

}

.status.progress {

    background: #E3F2FD;

    color: #1976D2;

}

.initiative-card h3 {

    margin-bottom: 15px;

}

/*=========================================
ROADMAP
=========================================*/

.roadmap-section {

    padding: 80px 0;

    background: #f8fbfd;

}

.roadmap-wrapper {

    position: relative;

    margin-top: 80px;

}

.roadmap-line {

    position: absolute;

    left: 0;

    right: 0;

    top: 10px;

    height: 4px;

    background: #E5E7EB;

    z-index: 0;

}

.roadmap-box {

    position: relative;

    text-align: center;

    z-index: 2;

    padding: 0 15px;

}

.roadmap-dot {

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #fff;

    border: 6px solid var(--primary);

    margin: 0 auto 30px;

}

.roadmap-box.active .roadmap-dot {

    background: var(--primary);

}

.roadmap-box h3 {

    color: var(--primary);

    font-size: 36px;

    margin-bottom: 12px;

}

.roadmap-box h5 {

    margin-bottom: 15px;

}

.roadmap-box p {

    font-size: 15px;

    color: #666;

}

/*=========================================
PARTICIPATE
=========================================*/

.participate-section {

    padding: 80px 0;

}

.participate-card {

    background: #fff;

    padding: 40px;

    border-radius: 24px;

    box-shadow: var(--shadow-sm);

    border: 1px solid #eef2f5;

    transition: .4s;

    height: 100%;

    text-align: center;

}

.participate-card:hover {

    transform: translateY(-12px);

    box-shadow: var(--shadow-lg);

}

.participate-card.featured {

    border: 2px solid var(--primary);

    position: relative;

}

.participate-card.featured::before {

    content: "Most Popular";

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--primary);

    color: #fff;

    padding: 8px 18px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.participate-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: rgba(46, 125, 50, .12);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 25px;

    font-size: 34px;

    transition: .4s;

}

.participate-card:hover .participate-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.participate-card h3 {

    margin-bottom: 18px;

}

.participate-card p {

    margin-bottom: 25px;

}

.participate-card ul {

    text-align: left;

    margin-bottom: 30px;

}

.participate-card ul li {

    display: flex;

    gap: 12px;

    align-items: center;

    margin-bottom: 15px;

}

.participate-card ul i {

    color: var(--primary);

}

/*=========================================
FAQ
=========================================*/

.faq-section {

    padding: 80px 0;

    background: #f8fbfd;

}

.faq-content {

    padding-right: 50px;

}

.faq-content h2 {

    margin: 20px 0;

}

.custom-faq .accordion-item {

    border: none;

    margin-bottom: 20px;

    border-radius: 16px !important;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.custom-faq .accordion-button {

    font-size: 18px;

    font-weight: 600;

    padding: 22px 25px;

    background: #fff;

}

.custom-faq .accordion-button:not(.collapsed) {

    background: var(--primary);

    color: #fff;

    box-shadow: none;

}

.custom-faq .accordion-button:focus {

    box-shadow: none;

}

.custom-faq .accordion-body {

    padding: 25px;

    line-height: 1.8;

}

/*=========================================
GET INVOLVED INTRO
=========================================*/

.involved-intro {

    padding: 80px 0;

}

.involved-intro .intro-image img {

    width: 100%;

    border-radius: 24px;

    box-shadow: var(--shadow-lg);

}

.involved-intro .intro-content {

    padding-left: 40px;

}

.involved-intro .intro-content h2 {

    margin: 20px 0;

}

/*=========================================
OPPORTUNITIES
=========================================*/

.opportunity-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.opportunity-card {

    background: #fff;

    border-radius: 24px;

    padding: 45px 30px;

    text-align: center;

    height: 100%;

    position: relative;

    overflow: hidden;

    transition: .4s;

    border: 1px solid #eef2f5;

}

.opportunity-card:hover {

    transform: translateY(-12px);

    box-shadow: var(--shadow-lg);

}

.opportunity-card.active {

    border: 2px solid var(--primary);

}

.opportunity-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    color: var(--primary);

    margin-bottom: 30px;

    transition: .4s;

}

.opportunity-card:hover .opportunity-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.opportunity-card h4 {

    margin-bottom: 18px;

}

.opportunity-card p {

    margin-bottom: 30px;

}

.opportunity-card a {

    color: var(--primary);

    font-weight: 600;

}

.opportunity-card a i {

    margin-left: 8px;

    transition: .3s;

}

.opportunity-card:hover a i {

    transform: translateX(6px);

}

/*=========================================
VOLUNTEER OPPORTUNITIES
=========================================*/

.volunteer-opportunities {

    padding: 80px 0;

}

.volunteer-card {

    background: #fff;

    border-radius: 24px;

    padding: 35px;

    border: 1px solid #eef2f5;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    height: 100%;

}

.volunteer-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.volunteer-icon {

    width: 80px;

    height: 80px;

    border-radius: 18px;

    background: rgba(46, 125, 50, .10);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 30px;

    margin-bottom: 25px;

    transition: .4s;

}

.volunteer-card:hover .volunteer-icon {

    background: var(--primary);

    color: #fff;

}

.volunteer-meta {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-bottom: 18px;

}

.volunteer-meta span {

    background: #F2F8F3;

    color: var(--primary);

    padding: 6px 14px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.volunteer-card h4 {

    margin-bottom: 15px;

}

.volunteer-card p {

    margin-bottom: 25px;

}

/*=========================================
CSR PARTNERSHIP
=========================================*/

.partnership-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.partnership-content h2 {

    margin: 20px 0;

}

.partnership-content p {

    margin-bottom: 20px;

}

.partnership-list {

    margin-top: 35px;

}

.partnership-list div {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

    font-weight: 600;

}

.partnership-list i {

    color: var(--primary);

}

.partnership-card {

    background: #fff;

    padding: 45px;

    border-radius: 25px;

    box-shadow: var(--shadow-lg);

    border: 1px solid #eef2f5;

}

.partnership-card h3 {

    margin-bottom: 35px;

}

.benefit-item {

    display: flex;

    gap: 20px;

    margin-bottom: 30px;

}

.benefit-item i {

    width: 65px;

    height: 65px;

    border-radius: 16px;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    flex-shrink: 0;

}

.benefit-item h5 {

    margin-bottom: 8px;

}

/*=========================================
HOW IT WORKS
=========================================*/

.process-section {

    padding: 80px 0;

}

.journey-wrapper {

    position: relative;

    margin-top: 70px;

}

.journey-line {

    position: absolute;

    top: 65px;

    left: 12%;

    right: 12%;

    height: 3px;

    background: #E6E6E6;

    z-index: 0;

}

.journey-card {

    position: relative;

    background: #fff;

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    height: 100%;

    z-index: 2;

}

.journey-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.journey-number {

    position: absolute;

    top: 20px;

    right: 20px;

    font-size: 42px;

    font-weight: 700;

    color: rgba(46, 125, 50, .08);

}

.journey-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 34px;

    margin-bottom: 25px;

    transition: .4s;

}

.journey-card:hover .journey-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.journey-card h4 {

    margin-bottom: 15px;

}

.journey-card p {

    margin-bottom: 0;

}

/*=========================================
VOLUNTEER FORM
=========================================*/

.volunteer-form-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.volunteer-form-wrapper {

    margin-top: 60px;

    background: #fff;

    padding: 60px;

    border-radius: 30px;

    box-shadow: var(--shadow-lg);

}

.form-title {

    font-size: 24px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 10px;

    padding-bottom: 15px;

    border-bottom: 2px solid #eef2f5;

}

.form-control,

.form-select {

    height: 58px;

    border-radius: 12px;

    border: 1px solid #E4E8EC;

    padding: 15px 20px;

    box-shadow: none;

}

textarea.form-control {

    height: auto;

    min-height: 160px;

    resize: none;

}

.form-control:focus,

.form-select:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .2rem rgba(46, 125, 50, .15);

}

.form-check {

    margin-top: 10px;

}

.form-check-input:checked {

    background: var(--primary);

    border-color: var(--primary);

}

/*=========================================
GET INVOLVED FAQ
=========================================*/

.involved-faq {

    padding: 80px 0;

}


.involved-faq .accordion-item {

    margin-bottom: 20px;

    border: none;

    border-radius: 18px !important;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.involved-faq .accordion-button {

    font-size: 18px;

    font-weight: 600;

    padding: 24px;

}

.involved-faq .accordion-button:not(.collapsed) {

    background: var(--primary);

    color: #fff;

}

.involved-faq .accordion-button:focus {

    box-shadow: none;

}

.involved-faq .accordion-body {

    padding: 24px;

    line-height: 1.9;

}

/*=========================================
GET INVOLVED CTA
=========================================*/

.get-involved-cta {

    position: relative;

    padding: 140px 0;

    background: url('../images/impact-bg.webp') center center/cover;

    overflow: hidden;

}

.get-involved-cta .cta-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, .72);

}

.get-involved-cta .cta-content {

    position: relative;

    z-index: 2;

}

.get-involved-cta h2 {

    color: #fff;

    font-size: 56px;

    margin: 20px 0;

}

.get-involved-cta p {

    color: #f3f3f3;

    max-width: 760px;

    margin: auto;

    margin-bottom: 45px;

    line-height: 1.9;

}

.cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.cta-buttons .theme-btn,

.cta-buttons .outline-btn {

    min-width: 220px;

}

/*=========================================
DONATE INTRO
=========================================*/

.donate-intro {

    padding: 80px 0;

}

.donate-intro .intro-image img {

    width: 100%;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);

}

.donate-intro .intro-content {

    padding-left: 40px;

}

.donate-intro .intro-content h2 {

    margin: 20px 0;

}

.donate-intro .theme-btn {

    margin-top: 15px;

}

/*=========================================
SUPPORT SECTION
=========================================*/

.support-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.support-card {

    background: #fff;

    border-radius: 24px;

    padding: 35px;

    text-align: center;

    height: 100%;

    transition: .4s;

    box-shadow: var(--shadow-sm);

    border: 1px solid #eef2f5;

}

.support-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.support-icon {

    width: 85px;

    height: 85px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    margin-bottom: 25px;

    transition: .4s;

}

.support-card:hover .support-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.support-card h4 {

    margin-bottom: 15px;

}

.support-progress {

    margin-top: 25px;

}

.support-progress .progress {

    height: 8px;

    border-radius: 20px;

    background: #e9ecef;

}

.support-progress .progress-bar {

    background: var(--primary);

    border-radius: 20px;

}

.support-progress span {

    display: block;

    margin-top: 10px;

    font-size: 14px;

    color: #777;

    font-weight: 600;

}

/*=========================================
DONATION OPTIONS
=========================================*/

.donation-options-section {

    padding: 80px 0;

}

.donation-card {

    background: #fff;

    border-radius: 25px;

    padding: 45px 35px;

    box-shadow: var(--shadow-sm);

    border: 1px solid #eef2f5;

    position: relative;

    transition: .4s;

    height: 100%;

}

.donation-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.donation-card.featured {

    border: 2px solid var(--primary);

}

.recommended {

    position: absolute;

    top: -15px;

    left: 50%;

    transform: translateX(-50%);

    background: var(--primary);

    color: #fff;

    padding: 8px 20px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.donation-icon {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: auto;

    margin-bottom: 25px;

    font-size: 34px;

    color: var(--primary);

    transition: .4s;

}

.donation-card:hover .donation-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.donation-card h3 {

    text-align: center;

    margin-bottom: 18px;

}

.donation-card p {

    text-align: center;

    margin-bottom: 30px;

}

.amount-list {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    margin-bottom: 30px;

}

.amount-list button {

    border: none;

    background: #F4F8F5;

    color: var(--primary);

    padding: 14px;

    border-radius: 12px;

    font-weight: 600;

    transition: .3s;

}

.amount-list button:hover {

    background: var(--primary);

    color: #fff;

}

.cause-list {

    list-style: none;

    padding: 0;

    margin: 0 0 30px;

}

.cause-list li {

    padding: 12px 0;

    border-bottom: 1px solid #eef2f5;

    font-weight: 500;

}

.cause-list li:last-child {

    border-bottom: none;

}

/*=========================================
YOUR IMPACT
=========================================*/

.impact-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.impact-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    height: 100%;

    transition: .4s;

    box-shadow: var(--shadow-sm);

    border: 1px solid #eef2f5;

}

.impact-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.impact-card.featured {

    border: 2px solid var(--primary);

}

.impact-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 34px;

    margin-bottom: 25px;

    transition: .4s;

}

.impact-card:hover .impact-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.impact-amount {

    font-size: 34px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 18px;

}

.impact-card h4 {

    margin-bottom: 18px;

}

.impact-message {

    margin-top: 60px;

}

.impact-message-inner {

    background: #fff;

    border-left: 5px solid var(--primary);

    border-radius: 16px;

    padding: 25px 30px;

    display: flex;

    gap: 20px;

    align-items: flex-start;

    box-shadow: var(--shadow-sm);

}

.impact-message-inner i {

    font-size: 26px;

    color: var(--primary);

    margin-top: 2px;

}

.impact-message-inner p {

    margin: 0;

}

/*=========================================
DONATION FORM
=========================================*/

.donation-form-section {

    padding: 80px 0;

}

.donation-info {

    padding-right: 40px;

}

.donation-info h2 {

    margin: 20px 0;

}

.trust-box {

    margin: 40px 0;

}

.trust-item {

    display: flex;

    gap: 18px;

    margin-bottom: 30px;

}

.trust-item i {

    width: 60px;

    height: 60px;

    border-radius: 16px;

    background: rgba(46, 125, 50, .1);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    flex-shrink: 0;

}

.payment-methods {

    margin-top: 40px;

}

.payment-icons {

    display: flex;

    gap: 15px;

    margin-top: 20px;

    flex-wrap: wrap;

}

.payment-icons span {

    width: 60px;

    height: 60px;

    border-radius: 15px;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: var(--shadow-sm);

    font-size: 26px;

    color: var(--primary);

}

.donation-form-card {

    background: #fff;

    padding: 45px;

    border-radius: 25px;

    box-shadow: var(--shadow-lg);

}

.donation-form-card .form-label {

    font-weight: 600;

    margin-bottom: 10px;

}

.donation-amounts {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 10px;

}

.donation-amounts button {

    border: none;

    background: #F5F8F6;

    padding: 14px;

    border-radius: 10px;

    font-weight: 600;

    transition: .3s;

}

.donation-amounts button:hover,

.donation-amounts button.active {

    background: var(--primary);

    color: #fff;

}

/*=========================================
TRANSPARENCY
=========================================*/

.transparency-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.transparency-content h2 {

    margin: 20px 0;

}

.transparency-content>p {

    margin-bottom: 40px;

}

.trust-grid {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.trust-card {

    display: flex;

    gap: 20px;

    background: #fff;

    padding: 24px;

    border-radius: 18px;

    box-shadow: var(--shadow-sm);

    transition: .35s;

}

.trust-card:hover {

    transform: translateX(8px);

    box-shadow: var(--shadow-lg);

}

.trust-card i {

    width: 65px;

    height: 65px;

    border-radius: 18px;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    flex-shrink: 0;

}

.trust-card h5 {

    margin-bottom: 8px;

}

.transparency-box {

    background: #fff;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: var(--shadow-lg);

}

.transparency-image img {

    width: 100%;

    display: block;

}

.transparency-note {

    padding: 35px;

    display: flex;

    gap: 20px;

}

.transparency-note i {

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    flex-shrink: 0;

}

.transparency-note h5 {

    margin-bottom: 10px;

}

/*=========================================
DONATE FAQ
=========================================*/

.donate-faq {

    padding: 80px 0;

}



.donate-faq .accordion-item {

    border: none;

    margin-bottom: 20px;

    border-radius: 18px !important;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.donate-faq .accordion-button {

    font-size: 18px;

    font-weight: 600;

    padding: 22px 25px;

}

.donate-faq .accordion-button:not(.collapsed) {

    background: var(--primary);

    color: #fff;

}

.donate-faq .accordion-button:focus {

    box-shadow: none;

}

.donate-faq .accordion-body {

    padding: 25px;

}

/*=========================================
DONATE CTA
=========================================*/

.donate-cta {

    position: relative;

    padding: 140px 0;

    background: url('../images/impact-bg.webp') center center/cover no-repeat;

    overflow: hidden;

}

.donate-cta .cta-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(rgba(0, 0, 0, .75),
            rgba(0, 0, 0, .70));

}

.donate-cta-content {

    position: relative;

    z-index: 2;

}

.donate-cta-content h2 {

    color: #fff;

    font-size: 56px;

    margin: 20px 0;

}

.donate-cta-content p {

    color: #f4f4f4;

    max-width: 760px;

    margin: 0 auto 45px;

    line-height: 1.9;

}

.donate-cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.donate-cta-buttons .theme-btn,

.donate-cta-buttons .outline-btn {

    min-width: 220px;

}

.light-btn {

    border: 2px solid #fff;

    color: #fff;

}

.light-btn:hover {

    background: #fff;

    color: var(--primary);

}

/*=========================================
VOLUNTEER INTRO
=========================================*/

.volunteer-intro {

    padding: 80px 0;

}

.volunteer-intro .intro-image img {

    width: 100%;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);

}

.volunteer-intro .intro-content {

    padding-left: 40px;

}

.volunteer-intro .intro-content h2 {

    margin: 20px 0;

}

.volunteer-intro .theme-btn {

    margin-top: 15px;

}

/*=========================================
VOLUNTEER OPPORTUNITIES
=========================================*/

.volunteer-opportunities-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.volunteer-opportunity-list {

    margin-top: 70px;

}

.volunteer-opportunity {

    display: flex;

    align-items: center;

    gap: 30px;

    background: #fff;

    padding: 35px;

    border-radius: 24px;

    margin-bottom: 30px;

    box-shadow: var(--shadow-sm);

    transition: .4s;

    border: 1px solid #eef2f5;

}

.volunteer-opportunity:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}

.opportunity-left {

    flex-shrink: 0;

}

.opportunity-icon {

    width: 90px;

    height: 90px;

    border-radius: 22px;

    background: rgba(46, 125, 50, .1);

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--primary);

    font-size: 34px;

    transition: .4s;

}

.volunteer-opportunity:hover .opportunity-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.opportunity-center {

    flex: 1;

}

.opportunity-center h3 {

    margin: 15px 0;

}

.opportunity-tags {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

}

.opportunity-tags span {

    background: #F1F8F3;

    color: var(--primary);

    padding: 6px 14px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.opportunity-right {

    flex-shrink: 0;

}

/*=========================================
VOLUNTEER BENEFITS
=========================================*/

.volunteer-benefits {

    padding: 80px 0;

    background: #F8FBFD;

}

.benefit-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px 35px;

    text-align: center;

    height: 100%;

    border: 1px solid #eef2f5;

    transition: .4s;

    box-shadow: var(--shadow-sm);

}

.benefit-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.benefit-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    margin-bottom: 30px;

    transition: .4s;

}

.benefit-card:hover .benefit-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.benefit-card h4 {

    margin-bottom: 18px;

}

.benefit-card p {

    margin-bottom: 0;

}

/*=========================================
VOLUNTEER JOURNEY
=========================================*/

.volunteer-journey {

    padding: 80px 0;

}

.journey-timeline {

    position: relative;

    max-width: 1100px;

    margin: 80px auto 0;

}

.journey-timeline::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    background: linear-gradient(var(--primary),
            #DCEFD9);

}

.journey-item {

    position: relative;

    width: 50%;

    padding: 0 60px 60px;

}

.journey-item.left {

    left: 0;

}

.journey-item.right {

    left: 50%;

}

.journey-content {

    background: #fff;

    border-radius: 24px;

    padding: 35px;

    position: relative;

    box-shadow: var(--shadow-sm);

    transition: .35s;

    border: 1px solid #eef2f5;

}

.journey-content:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow-lg);

}

.step-no {

    position: absolute;

    top: 20px;

    right: 25px;

    font-size: 42px;

    font-weight: 700;

    color: rgba(46, 125, 50, .08);

}

.journey-icon {

    width: 80px;

    height: 80px;

    border-radius: 20px;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 30px;

    margin-bottom: 25px;

    transition: .35s;

}

.journey-content:hover .journey-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.journey-content h4 {

    margin-bottom: 15px;

}

.journey-item::after {

    content: "";

    position: absolute;

    top: 45px;

    width: 22px;

    height: 22px;

    background: var(--primary);

    border: 6px solid #fff;

    border-radius: 50%;

    box-shadow: 0 0 0 4px rgba(46, 125, 50, .15);

}

.journey-item.left::after {

    right: -11px;

}

.journey-item.right::after {

    left: -11px;

}

/*=========================================
VOLUNTEER SKILLS
=========================================*/

.volunteer-skills {

    padding: 80px 0;

    background: #F8FBFD;

}

.skill-card {

    background: #fff;

    border-radius: 24px;

    padding: 40px 30px;

    text-align: center;

    height: 100%;

    border: 1px solid #edf2f4;

    transition: .35s;

    box-shadow: var(--shadow-sm);

}

.skill-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.skill-card.featured {

    background: linear-gradient(135deg, #2E7D32, #3FAF4A);

    color: #fff;

}

.skill-icon {

    width: 90px;

    height: 90px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;

    margin-bottom: 25px;

    transition: .4s;

}

.skill-card.featured .skill-icon {

    background: rgba(255, 255, 255, .20);

    color: #fff;

}

.skill-card:hover .skill-icon {

    transform: scale(1.08) rotateY(180deg);

}

.skill-card h4 {

    margin-bottom: 15px;

}

.skills-note {

    margin-top: 60px;

    background: #fff;

    border-left: 5px solid var(--primary);

    border-radius: 18px;

    padding: 30px;

    display: flex;

    align-items: flex-start;

    gap: 20px;

    box-shadow: var(--shadow-sm);

}

.skills-note i {

    font-size: 26px;

    color: var(--primary);

    margin-top: 2px;

}

/*=========================================
VOLUNTEER REGISTRATION
=========================================*/

.volunteer-registration {

    padding: 80px 0;

    background: #F8FBFD;

}

.registration-wrapper {

    margin-top: 60px;

    background: #fff;

    padding: 60px;

    border-radius: 30px;

    box-shadow: var(--shadow-lg);

}

.form-heading {

    font-size: 24px;

    font-weight: 700;

    color: var(--primary);

    padding-bottom: 15px;

    border-bottom: 2px solid #edf2f4;

    margin-bottom: 15px;

}

.registration-wrapper label {

    font-weight: 600;

    margin-bottom: 10px;

    display: block;

}

.registration-wrapper .form-control,

.registration-wrapper .form-select {

    height: 58px;

    border-radius: 12px;

    border: 1px solid #E4E8EC;

    padding: 15px 18px;

    box-shadow: none;

}

.registration-wrapper textarea.form-control {

    height: auto;

    min-height: 160px;

    resize: vertical;

}

.registration-wrapper .form-control:focus,

.registration-wrapper .form-select:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .2rem rgba(46, 125, 50, .15);

}

.registration-wrapper .form-check {

    margin-top: 10px;

}

.registration-wrapper .theme-btn {

    min-width: 260px;

}

/*=========================================
VOLUNTEER FAQ
=========================================*/

.volunteer-faq {

    padding: 80px 0;

}



.volunteer-faq .accordion-item {

    border: none;

    margin-bottom: 20px;

    border-radius: 18px !important;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.volunteer-faq .accordion-button {

    font-size: 18px;

    font-weight: 600;

    padding: 22px 25px;

}

.volunteer-faq .accordion-button:not(.collapsed) {

    background: var(--primary);

    color: #fff;

}

.volunteer-faq .accordion-button:focus {

    box-shadow: none;

}

.volunteer-faq .accordion-body {

    padding: 24px;

    line-height: 1.9;

}

/*=========================================
VOLUNTEER CTA
=========================================*/

.volunteer-cta {

    position: relative;

    padding: 140px 0;

    background: url('../images/impact-bg.webp') center center/cover no-repeat;

    overflow: hidden;

}

.volunteer-cta .cta-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(rgba(0, 0, 0, .72),
            rgba(0, 0, 0, .65));

}

.volunteer-cta-content {

    position: relative;

    z-index: 2;

}

.volunteer-cta-content h2 {

    color: #fff;

    font-size: 56px;

    line-height: 1.2;

    margin: 20px 0;

}

.volunteer-cta-content p {

    max-width: 760px;

    margin: 0 auto 45px;

    color: #F2F2F2;

    font-size: 18px;

    line-height: 1.9;

}

.volunteer-cta-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.volunteer-cta-buttons .theme-btn,

.volunteer-cta-buttons .outline-btn {

    min-width: 220px;

}

.light-btn {

    border: 2px solid #fff;

    color: #fff;

}

.light-btn:hover {

    background: #fff;

    color: var(--primary);

}

/*=========================================
CONTACT INFO
=========================================*/

.contact-info-section {

    padding: 80px 0;

}

.contact-card {

    background: #fff;

    padding: 40px 30px;

    border-radius: 24px;

    text-align: center;

    height: 100%;

    border: 1px solid #edf2f4;

    transition: .35s;

    box-shadow: var(--shadow-sm);

}

.contact-card:hover {

    transform: translateY(-10px);

    box-shadow: var(--shadow-lg);

}

.contact-icon {

    width: 85px;

    height: 85px;

    margin: auto;

    border-radius: 50%;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    margin-bottom: 25px;

    transition: .35s;

}

.contact-card:hover .contact-icon {

    background: var(--primary);

    color: #fff;

    transform: rotateY(180deg);

}

.contact-card h4 {

    margin-bottom: 15px;

}

.contact-card p {

    margin-bottom: 10px;

    font-weight: 600;

}

.contact-card span {

    color: #777;

    font-size: 14px;

}

/*=========================================
CONTACT FORM
=========================================*/

.contact-form-section {

    padding: 80px 0;

    background: #F8FBFD;

}

.contact-form-card {

    background: #fff;

    padding: 50px;

    border-radius: 30px;

    box-shadow: var(--shadow-lg);

    height: 100%;

}

.section-title-left {

    margin-bottom: 40px;

}

.section-title-left h2 {

    margin: 20px 0;

}

.contact-form-card label {

    font-weight: 600;

    margin-bottom: 10px;

    display: block;

}

.contact-form-card .form-control,

.contact-form-card .form-select {

    height: 58px;

    border-radius: 12px;

    border: 1px solid #E5E8EB;

    padding: 15px 18px;

    box-shadow: none;

}

.contact-form-card textarea.form-control {

    height: auto;

    resize: none;

}

.contact-form-card .form-control:focus,

.contact-form-card .form-select:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 .2rem rgba(46, 125, 50, .15);

}

.contact-side-card {

    background: #fff;

    padding: 45px 35px;

    border-radius: 30px;

    height: 100%;

    box-shadow: var(--shadow-lg);

}

.contact-side-card h3 {

    margin: 18px 0;

}

.contact-help-list {

    margin: 35px 0;

}

.help-item {

    display: flex;

    gap: 18px;

    margin-bottom: 28px;

}

.help-item i {

    width: 60px;

    height: 60px;

    border-radius: 16px;

    background: rgba(46, 125, 50, .10);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

}

.help-item h5 {

    margin-bottom: 6px;

}

.help-item span {

    color: #777;

    font-size: 14px;

}

.response-box {

    display: flex;

    gap: 18px;

    background: #F5F9F5;

    padding: 25px;

    border-radius: 18px;

    border-left: 4px solid var(--primary);

}

.response-box i {

    color: var(--primary);

    font-size: 26px;

    margin-top: 4px;

}

.response-box p {

    margin: 6px 0 0;

}

/*=========================================
WHY CONTACT
=========================================*/

.why-contact-section{

    padding:80px 0;

}

.contact-feature-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:40px 30px;

    text-align:center;

    height:100%;

    border:1px solid #eef2f5;

    box-shadow:var(--shadow-sm);

    transition:.4s;

    overflow:hidden;

}

.contact-feature-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.contact-feature-card.active{

    border:2px solid var(--primary);

}

.feature-number{

    position:absolute;

    top:20px;

    right:22px;

    font-size:42px;

    font-weight:700;

    color:rgba(46,125,50,.08);

}

.feature-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:rgba(46,125,50,.10);

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:25px;

    transition:.4s;

}

.contact-feature-card:hover .feature-icon{

    background:var(--primary);

    color:#fff;

    transform:rotateY(180deg);

}

.contact-feature-card h4{

    margin-bottom:18px;

}

.contact-feature-card p{

    margin-bottom:30px;

}

.contact-feature-card a{

    color:var(--primary);

    font-weight:600;

}

.contact-feature-card a i{

    margin-left:8px;

    transition:.3s;

}

.contact-feature-card:hover a i{

    transform:translateX(6px);

}

/*=========================================
FIND US
=========================================*/

.find-us-section{

    padding:80px 0;

    background:#F8FBFD;

}

.map-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    height:100%;

    min-height:550px;

    box-shadow:var(--shadow-lg);

}

.map-card iframe{

    width:100%;

    height:100%;

}

.map-btn{

    position:absolute;

    left:30px;

    bottom:30px;

}

.office-card{

    background:#fff;

    border-radius:24px;

    padding:45px;

    height:100%;

    box-shadow:var(--shadow-lg);

}

.office-card h3{

    margin-bottom:20px;

}

.office-card>p{

    margin-bottom:35px;

}

.office-item{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}

.office-item i{

    width:58px;

    height:58px;

    border-radius:15px;

    background:rgba(46,125,50,.10);

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    flex-shrink:0;

}

.office-item strong{

    display:block;

    margin-bottom:6px;

}

.office-item span{

    color:#777;

    line-height:1.7;

}

.contact-social{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.contact-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#F4F8F5;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.contact-social a:hover{

    background:var(--primary);

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
UPCOMING EVENTS
=========================================*/

.upcoming-events-section{

    padding:80px 0;

}

.event-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:.4s;

    height:100%;

    border:1px solid #edf2f4;

}

.event-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.event-card.featured{

    border:2px solid var(--primary);

}

.event-image{

    position:relative;

    overflow:hidden;

}

.event-image img{

    width:100%;

    height:260px;

    object-fit:cover;

    transition:.5s;

}

.event-card:hover .event-image img{

    transform:scale(1.08);

}

.event-card .event-date{

    position:absolute;

    top:20px;

    left:20px;

    background:var(--primary);

    color:#fff;

    padding:8px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;
    height: unset;
    width: 135px;

}

.event-content{

    padding:30px;

}

.event-category{

    display:inline-block;

    background:#F2F8F3;

    color:var(--primary);

    padding:6px 16px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.event-content h3{

    margin-bottom:18px;

    font-size:24px;

}

.event-meta{

    list-style:none;

    padding:0;

    margin:25px 0;

}

.event-meta li{

    margin-bottom:12px;

    color:#666;

}

.event-meta i{

    color:var(--primary);

    margin-right:10px;

}

/*=========================================
EVENT CATEGORIES
=========================================*/

.event-categories-section{

    padding:120px 0;

    background:#F8FBFD;

}

.event-category-card{

    background:#fff;

    padding:40px 30px;

    border-radius:24px;

    text-align:center;

    height:100%;

    border:1px solid #EEF2F5;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.event-category-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.event-category-card.featured{

    background:linear-gradient(135deg,#2E7D32,#47A84A);

    color:#fff;

}

.category-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(46,125,50,.10);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    transition:.35s;

}

.event-category-card.featured .category-icon{

    background:rgba(255,255,255,.18);

    color:#fff;

}

.event-category-card:hover .category-icon{

    transform:rotateY(180deg);

}

.event-category-card h4{

    margin-bottom:18px;

}

.event-category-card p{

    margin-bottom:0;

}

/*=========================================
ANNUAL COMMUNITY CALENDAR
=========================================*/

.annual-calendar-section{

    padding:80px 0;

}

.calendar-wrapper{

    max-width:1000px;

    margin:70px auto 0;

    position:relative;

}

.calendar-wrapper::before{

    content:"";

    position:absolute;

    left:35px;

    top:0;

    width:4px;

    height:100%;

    background:linear-gradient(var(--primary),#D8ECD9);

}

.calendar-item{

    display:flex;

    gap:40px;

    position:relative;

    margin-bottom:35px;

}

.calendar-month{

    width:70px;

    height:70px;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:18px;

    flex-shrink:0;

    position:relative;

    z-index:2;

    box-shadow:0 0 0 8px #fff;

}

.calendar-content{

    flex:1;

    background:#fff;

    border-radius:24px;

    padding:30px;

    border:1px solid #EEF2F5;

    box-shadow:var(--shadow-sm);

    transition:.35s;

}

.calendar-content:hover{

    transform:translateX(10px);

    box-shadow:var(--shadow-lg);

}

.calendar-tag{

    display:inline-block;

    background:#F3F9F4;

    color:var(--primary);

    padding:6px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:15px;

}

.calendar-content h4{

    margin-bottom:15px;

}

.calendar-item:last-child{

    margin-bottom:0;

}

/*=========================================
JOIN EVENTS
=========================================*/

.join-events-section{

    padding:80px 0;

}

.join-event-image{

    position:relative;

}

.join-event-image img{

    width:100%;

    border-radius:24px;

    box-shadow:var(--shadow-lg);

}

.join-event-content{

    padding-left:40px;

}

.join-event-content h2{

    margin:20px 0;

}

.join-event-content>p{

    margin-bottom:35px;

}

.join-benefits{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:40px;

}

.join-item{

    display:flex;

    align-items:center;

    gap:12px;

    background:#F8FBFD;

    padding:15px 18px;

    border-radius:14px;

    transition:.3s;

}

.join-item:hover{

    background:rgba(46,125,50,.08);

}

.join-item i{

    color:var(--primary);

    font-size:18px;

}

.join-item span{

    font-weight:500;

}

.join-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

/*=========================================
FEATURED BLOG
=========================================*/

.featured-blog-section{

    padding:80px 0;

}

.featured-blog-card{

    margin-top:70px;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    box-shadow:var(--shadow-lg);

}

.featured-blog-image{
    height: 450px;
    padding: 20px;

}

.featured-blog-image img{

    width:100%;

    height:100%;

    min-height:350px;

    object-fit:cover;
    border-radius: 30px;

}

.featured-blog-content{

    padding:60px;

}

.blog-category{

    display:inline-block;

    background:#F3F9F4;

    color:var(--primary);

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.featured-blog-content h2{

    margin-bottom:20px;

}

.featured-blog-content p{

    margin-bottom:25px;

}

.blog-meta{

    display:flex;

    gap:25px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.blog-meta span{

    color:#666;

}

.blog-meta i{

    color:var(--primary);

    margin-right:8px;

}

/*=========================================
BLOG DETAILS
=========================================*/

.blog-details-section{

    padding:80px 0;

}

.blog-title{

    font-size:48px;

    margin:25px 0;

    line-height:1.25;

}

.blog-details-meta{

    display:flex;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:35px;

    color:#666;

}

.blog-details-meta i{

    color:var(--primary);

    margin-right:8px;

}

.blog-featured-image{

    margin-bottom:40px;

}

.blog-featured-image img{

    width:100%;

    border-radius:24px;

    height: 550px;

    object-fit: cover;

}

.blog-share{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.blog-share a{

    width:42px;

    height:42px;

    border-radius:50%;

    background:#F5F8F5;

    color:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;

}

.blog-share a:hover{

    background:var(--primary);

    color:#fff;

}

.blog-content{

    line-height:2;

}

.blog-content h2,

.blog-content h3{

    margin-top:45px;

    margin-bottom:20px;

}

.blog-content img{

    max-width:100%;

    border-radius:20px;

    margin:25px 0;

}

.blog-content ul{

    padding-left:20px;

}

.blog-content li{

    margin-bottom:10px;

}

.blog-quote{

    margin:60px 0;

    padding:40px;

    border-left:5px solid var(--primary);

    background:#F8FBFD;

    border-radius:20px;

    font-size:24px;

    font-style:italic;

    position:relative;

}

.blog-quote i{

    color:var(--primary);

    font-size:42px;

    margin-bottom:20px;

}

.blog-tags{

    margin-top:50px;

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;

}

.blog-tags a{

    padding:8px 18px;

    border-radius:30px;

    background:#F5F8F5;

    color:var(--primary);

    transition:.3s;

}

.blog-tags a:hover{

    background:var(--primary);

    color:#fff;

}