/*=============================================
XXL Desktop
=============================================*/
@media (min-width:1600px) {}

/*=============================================
Laptop
=============================================*/
@media (max-width:1399px) {}

/*=============================================
Large Laptop
=============================================*/
@media (max-width:1199px) {

    .main-menu {

        gap: 22px;

    }

    .main-menu a {

        font-size: 15px;

    }

    .logo {

        flex: 0 0 170px;

    }

    .logo img {

        height: 60px;

    }

    .theme-btn {

        padding: 12px 24px;

    }

    .main-menu {

        display: none;

    }

    .header-right .theme-btn {

        display: none;

    }

    .mobile-toggle {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .header-wrapper {

        height: 75px;

    }

    .logo img {

        height: 55px;

    }

    .hero-item {

        min-height: 650px;

    }

    .hero-content {

        max-width: 600px;

    }

    .hero-content h1 {

        font-size: 56px;

    }

}

/*=============================================
Tablet
=============================================*/
@media (max-width:991px) {
    .top-bar {

        display: none;

    }

    .main-header {

        padding: 12px 0;

    }

    .header-wrapper {

        height: auto;

    }

    .logo img {

        height: 55px;

    }

    .hero-item {

        min-height: 600px;

    }

    .hero-content {

        text-align: center;

        margin: auto;

    }

    .hero-content h1 {

        font-size: 44px;

    }

    .hero-content p {

        font-size: 17px;

    }

    .hero-btns {

        justify-content: center;

    }

    .hero-carousel .owl-nav {

        display: none;

    }

    .about-image {

        padding-right: 0;

        margin-bottom: 50px;

    }

    .about-content {

        padding-left: 0;

    }

    .experience-box {

        right: 20px;

    }

    .impact-section {

        padding: 90px 0;

    }

    .impact-box {

        padding: 35px 25px;

    }

    .focus-section {

        padding: 90px 0;

    }

    .focus-card {

        height: 380px;

    }

    .cta-section {

        padding: 100px 0;

    }

    .cta-content h2 {

        font-size: 46px;

    }

    .project-item {

        margin-bottom: 80px;

    }

    .project-content {

        text-align: center;

    }

    .project-content h3 {

        font-size: 34px;

    }

    .why-section {

        padding: 90px 0;

    }

    .why-image {

        margin: 40px 0;

    }

    .why-card {

        margin-bottom: 25px;

    }

    .events-section {

        padding: 90px 0;

    }

    .testimonial-item {

        padding: 45px;

    }

    .join-content {

        padding-right: 0;

        margin-bottom: 50px;

    }

    .blog-section {

        padding: 90px 0;

    }

    .newsletter-section {

        padding: 90px 0;

    }

    .newsletter-content {

        margin-bottom: 40px;

    }

    .newsletter-wrapper {

        padding: 50px;

    }

    .page-banner {

        height: 320px;

    }

    .page-banner-content h1 {

        font-size: 46px;

    }

    .story-section {

        padding: 90px 0;

    }

    .story-images {

        padding-right: 0;

        margin-bottom: 50px;

    }

    .story-small {

        width: 180px;

    }

    .story-content {

        padding-left: 0;

    }

    .mission-section {

        padding: 90px 0;

    }

    .purpose-image {

        margin: 45px 0;

    }

    .values-section {

        padding: 90px 0;

    }

    .center-circle {

        width: 200px;

        height: 200px;

    }

    .process-section {

        padding: 90px 0;

    }

    .process-card {

        padding: 35px;

    }

    .intro-content {

        padding-left: 0;

        margin-top: 40px;

    }

    .cause-section {

        padding: 90px 0;

    }

    .cause-content {

        padding-left: 0;

        margin-top: 40px;

    }

    .project-intro {

        padding: 90px 0;

    }

    .project-intro .intro-content {

        padding-left: 0;

        margin-top: 40px;

    }

    .featured-project {

        padding: 90px 0;

    }

    .featured-content {

        margin-top: 40px;

    }

    .roadmap-section {

        padding: 90px 0;

    }

    .roadmap-line {

        display: none;

    }

    .roadmap-box {

        margin-bottom: 50px;

    }

    .participate-section {

        padding: 90px 0;

    }

    .faq-section {

        padding: 90px 0;

    }

    .faq-content {

        padding-right: 0;

        margin-bottom: 50px;

    }

    .involved-intro {

        padding: 90px 0;

    }

    .involved-intro .intro-content {

        padding-left: 0;

        margin-top: 40px;

    }

    .opportunity-section {

        padding: 90px 0;

    }

    .volunteer-opportunities {

        padding: 90px 0;

    }

    .partnership-section {

        padding: 90px 0;

    }

    .partnership-card {

        margin-top: 30px;

    }

    .process-section {

        padding: 90px 0;

    }

    .journey-line {

        display: none;

    }

    .journey-card {

        margin-bottom: 30px;

    }

    .volunteer-form-section {

        padding: 90px 0;

    }

    .volunteer-form-wrapper {

        padding: 40px;

    }

    .get-involved-cta {

        padding: 100px 0;

    }

    .get-involved-cta h2 {

        font-size: 42px;

    }

    .donate-intro {

        padding: 90px 0;

    }

    .donate-intro .intro-content {

        padding-left: 0;
        margin-top: 40px;

    }

    .support-section {

        padding: 90px 0;

    }

    .donation-options-section {

        padding: 60px 0;

    }

    .impact-section {

        padding: 90px 0;

    }

    .donation-form-section {

        padding: 90px 0;

    }

    .donation-info {

        padding-right: 0;

    }

    .donation-form-card {

        margin-top: 40px;

    }

    .transparency-section {

        padding: 90px 0;

    }

    .transparency-box {

        margin-top: 40px;

    }

    .donate-cta {

        padding: 100px 0;

    }

    .donate-cta-content h2 {

        font-size: 42px;

    }

    .volunteer-intro {

        padding: 90px 0;

    }

    .volunteer-intro .intro-content {

        padding-left: 0;

        margin-top: 40px;

    }

    .volunteer-opportunities-section {

        padding: 90px 0;

    }

    .volunteer-opportunity {

        flex-direction: column;

        text-align: center;

    }

    .opportunity-right {

        margin-top: 20px;

    }

    .volunteer-benefits {

        padding: 90px 0;

    }

    .volunteer-journey {

        padding: 50px 0;

    }

    .journey-timeline::before {

        left: 25px;

    }

    .journey-item {

        width: 100%;

        left: 0 !important;

        padding-left: 70px;

        padding-right: 0;

    }

    .journey-item::after {

        left: 14px !important;

    }

    .volunteer-skills {

        padding: 50px 0;

    }

    .volunteer-registration {

        padding: 50px 0;

    }

    .registration-wrapper {

        padding: 30px;

    }

    .volunteer-cta {

        padding: 50px 0;

    }

    .volunteer-cta-content h2 {

        font-size: 42px;

    }

    .contact-info-section {

        padding: 50px 0;

    }

    .contact-form-section {

        padding: 50px 0;

    }

    .contact-form-card {

        padding: 30px;

    }

    .contact-side-card {

        margin-top: 10px;

    }

    .why-contact-section {

        padding: 50px 0;

    }

    .find-us-section {

        padding: 50px 0;

    }

    .map-card {

        min-height: 450px;

    }

    .office-card {

        margin-top: 10px;

    }

    .upcoming-events-section {

        padding: 50px 0;

    }

    .event-categories-section {

        padding: 50px 0;

    }

    .annual-calendar-section {

        padding: 50px 0;

    }

    .join-events-section {

        padding: 50px 0;

    }

    .join-event-content {

        padding-left: 0;

        margin-top: 40px;

    }

    .featured-blog-section {

        padding: 50px 0;

    }

    .featured-blog-content {

        padding: 40px;

    }

    .featured-blog-image img {

        min-height: 350px;

    }

    .blog-details-section {

        padding: 50px 0;

    }

    .blog-title {

        font-size: 38px;

    }




}

/*=============================================
Large Mobile
=============================================*/
@media (max-width:767px) {
    .hero-item {

        min-height: 520px;

    }

    .hero-content h1 {

        font-size: 36px;

    }

    .hero-content p {

        font-size: 16px;

    }

    .hero-content span {

        font-size: 14px;

    }

    .hero-btns {

        flex-direction: column;

    }

    .hero-btns a {

        width: 220px;

    }

    .experience-box {

        width: 130px;

        padding: 18px;

    }

    .experience-box h3 {

        font-size: 32px;

    }

    .support-box {

        left: 15px;

        bottom: 15px;

        padding: 15px;

    }

    .about-content h2 {

        font-size: 36px;

    }

    .impact-section {

        padding: 70px 0;

    }

    .impact-box h3 {

        font-size: 40px;

    }

    .impact-icon {

        width: 65px;
        height: 65px;

    }

    .impact-icon i {

        font-size: 28px;

    }

    .focus-section {

        padding: 70px 0;

    }

    .focus-card {

        height: 340px;

    }

    .focus-overlay {

        padding: 25px;

    }

    .cta-section {

        padding: 80px 0;

    }

    .cta-content h2 {

        font-size: 34px;

    }

    .cta-content p {

        font-size: 16px;

    }

    .cta-buttons {

        flex-direction: column;
        align-items: center;

    }

    .cta-buttons .theme-btn,
    .cta-buttons .outline-btn {

        width: 240px;

    }

    .cta-info {

        gap: 20px;
        flex-direction: column;

    }

    .projects-section {

        padding: 80px 0;

    }

    .project-item {

        margin-bottom: 60px;

    }

    .project-content h3 {

        font-size: 30px;

    }

    .why-section {

        padding: 70px 0;

    }

    .why-image img {

        max-width: 280px;

    }

    .events-section {

        padding: 70px 0;

    }

    .event-image img {

        height: 240px;

    }

    .event-content {

        padding: 25px;

    }

    .testimonial-section {

        padding: 70px 0;

    }

    .testimonial-item {

        padding: 30px;

    }

    .testimonial-item p {

        font-size: 16px;

    }

    .join-section {

        padding: 70px 0;

    }

    .join-form {

        padding: 30px;

    }

    .blog-section {

        padding: 70px 0;

    }

    .blog-image img {

        height: 220px;

    }

    .blog-content {

        padding: 25px;

    }

    .newsletter-section {

        padding: 70px 0;

    }

    .newsletter-wrapper {

        padding: 35px 25px;

    }

    .newsletter-content {

        text-align: center;

    }

    .footer {

        text-align: center;

    }

    .footer-social {

        justify-content: center;

    }

    .footer-bottom {

        text-align: center;

    }

    .footer-bottom .text-md-end {

        text-align: center !important;

        margin-top: 10px;

    }

    .page-banner {

        height: 260px;

    }

    .page-banner-content h1 {

        font-size: 34px;

    }

    .story-section {

        padding: 70px 0;

    }

    .story-small {

        width: 130px;

        bottom: 20px;

    }

    .story-content {

        text-align: center;

    }

    .story-content blockquote {

        font-size: 18px;

    }

    .mission-section {

        padding: 70px 0;

    }

    .purpose-card {

        padding: 30px;

    }

    .purpose-image img {

        width: 250px;

    }

    .values-section {

        padding: 70px 0;

    }

    .foundation-center {

        margin: 40px 0;

    }

    .center-circle {

        width: 170px;

        height: 170px;

    }

    .center-circle img {

        width: 55px;

    }

    .center-circle h5 {

        font-size: 18px;

    }

    .process-section {

        padding: 70px 0;

    }

    .process-card {

        flex-direction: column;

        text-align: center;

        align-items: center;

        padding: 30px;

    }

    .process-number {

        font-size: 50px;

    }

    .process-icon {

        width: 70px;

        height: 70px;

        font-size: 28px;

    }

    .causes-intro {

        padding: 70px 0;

    }

    .cause-section {

        padding: 70px 0;

    }

    .cause-number {

        width: 70px;

        height: 70px;

        font-size: 30px;

    }

    .cause-content {

        text-align: center;

    }

    .feature-item {

        justify-content: center;

    }

    .why-cause-section {

        padding: 70px 0;

    }

    .why-cause-card {

        padding: 30px;

    }

    .project-intro {

        padding: 70px 0;

    }

    .featured-project {

        padding: 70px 0;

    }

    .initiative-list {

        grid-template-columns: 1fr;

    }

    .initiative-badge {

        left: 15px;

        bottom: 15px;

        padding: 10px 18px;

        font-size: 14px;

    }

    .initiative-section {

        padding: 70px 0;

    }

    .initiative-timeline:before {

        display: none;

    }

    .initiative-item {

        flex-direction: column;

        text-align: center;

    }

    .initiative-icon {

        margin: auto;

    }

    .roadmap-section {

        padding: 70px 0;

    }

    .roadmap-box h3 {

        font-size: 28px;

    }

    .participate-section {

        padding: 70px 0;

    }

    .participate-card {

        padding: 30px;

    }

    .faq-section {

        padding: 70px 0;

    }

    .custom-faq .accordion-button {

        font-size: 16px;

        padding: 18px;

    }

    .custom-faq .accordion-body {

        padding: 20px;

    }

    .involved-intro {

        padding: 70px 0;

    }

    .opportunity-section {

        padding: 70px 0;

    }

    .opportunity-card {

        padding: 35px 25px;

    }

    .opportunity-icon {

        width: 75px;

        height: 75px;

        font-size: 28px;

    }

    .volunteer-opportunities {

        padding: 70px 0;

    }

    .volunteer-card {

        padding: 28px;

    }

    .volunteer-icon {

        width: 70px;

        height: 70px;

        font-size: 26px;

    }

    .partnership-section {

        padding: 70px 0;

    }

    .partnership-card {

        padding: 30px;

    }

    .benefit-item {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .partnership-list div {

        align-items: flex-start;

    }

    .process-section {

        padding: 70px 0;

    }

    .journey-card {

        padding: 30px 25px;

    }

    .journey-icon {

        width: 70px;

        height: 70px;

        font-size: 28px;

    }

    .journey-number {

        font-size: 34px;

    }

    .volunteer-form-section {

        padding: 70px 0;

    }

    .volunteer-form-wrapper {

        padding: 25px;

    }

    .form-title {

        font-size: 20px;

    }

    .form-control,

    .form-select {

        height: 54px;

    }

    .involved-faq {

        padding: 70px 0;

    }

    .involved-faq .accordion-button {

        font-size: 16px;

        padding: 18px;

    }

    .get-involved-cta {

        padding: 80px 0;

    }

    .get-involved-cta h2 {

        font-size: 32px;

    }

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .donate-intro {

        padding: 70px 0;

    }

    .support-section {

        padding: 70px 0;

    }

    .support-card {

        padding: 28px;

    }

    .support-icon {

        width: 70px;

        height: 70px;

        font-size: 28px;

    }

    .donation-options-section {

        padding: 70px 0;

    }

    .donation-card {

        padding: 35px 25px;

    }

    .amount-list {

        grid-template-columns: 1fr;

    }

    .impact-section {

        padding: 70px 0;

    }

    .impact-card {

        padding: 30px 25px;

    }

    .impact-icon {

        width: 75px;

        height: 75px;

        font-size: 28px;

    }

    .impact-amount {

        font-size: 28px;

    }

    .impact-message-inner {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .donation-form-section {

        padding: 70px 0;

    }

    .donation-form-card {

        padding: 25px;

    }

    .donation-amounts {

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

    }

    .trust-item {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .transparency-section {

        padding: 70px 0;

    }

    .trust-card {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .transparency-note {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .donate-faq {

        padding: 70px 0;

    }

    .donate-faq .accordion-button {

        font-size: 16px;

        padding: 18px;

    }

    .donate-cta {

        padding: 80px 0;

    }

    .donate-cta-content h2 {

        font-size: 32px;

    }

    .donate-cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .volunteer-intro {

        padding: 40px 0;

    }

    .volunteer-opportunities-section {

        padding: 70px 0;

    }

    .volunteer-opportunity {

        padding: 25px;

    }

    .opportunity-icon {

        width: 75px;

        height: 75px;

        font-size: 28px;

    }

    .volunteer-benefits {

        padding: 40px 0;

    }

    .benefit-card {

        padding: 30px 25px;

    }

    .benefit-icon {

        width: 75px;

        height: 75px;

        font-size: 28px;

    }

    .volunteer-journey {

        padding: 40px 0;

    }

    .journey-content {

        padding: 28px;

    }

    .step-no {

        font-size: 30px;

    }

    .journey-icon {

        width: 65px;

        height: 65px;

        font-size: 24px;

    }

    .volunteer-skills {

        padding: 40px 0;

    }

    .skill-card {

        padding: 30px 25px;

    }

    .skill-icon {

        width: 75px;

        height: 75px;

        font-size: 28px;

    }

    .skills-note {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .volunteer-registration {

        padding: 40px 0;

    }

    .registration-wrapper {

        padding: 25px;

    }

    .form-heading {

        font-size: 20px;

    }

    .registration-wrapper .form-control,

    .registration-wrapper .form-select {

        height: 54px;

    }

    .registration-wrapper .theme-btn {

        width: 100%;

    }

    .volunteer-faq {

        padding: 40px 0;

    }

    .volunteer-faq .accordion-button {

        font-size: 16px;

        padding: 18px;

    }

    .volunteer-cta {

        padding: 80px 0;

    }

    .volunteer-cta-content h2 {

        font-size: 32px;

    }

    .volunteer-cta-content p {

        font-size: 16px;

    }

    .volunteer-cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .volunteer-cta-buttons .theme-btn,

    .volunteer-cta-buttons .outline-btn {

        width: 240px;

    }

    .contact-info-section {

        padding: 40px 0;

    }

    .contact-card {

        padding: 30px 25px;

    }

    .contact-icon {

        width: 70px;

        height: 70px;

        font-size: 26px;

    }

    .contact-form-section {

        padding: 40px 0;

    }

    .contact-form-card,

    .contact-side-card {

        padding: 25px;

    }

    .help-item {

        align-items: flex-start;

    }

    .response-box {

        flex-direction: column;

        text-align: center;

        align-items: center;

    }

    .why-contact-section {

        padding: 40px 0;

    }

    .contact-feature-card {

        padding: 30px 25px;

    }

    .feature-icon {

        width: 75px;

        height: 75px;

        font-size: 28px;

    }

    .feature-number {

        font-size: 34px;

    }

    .find-us-section {

        padding: 40px 0;

    }

    .office-card {

        padding: 30px 25px;

    }

    .office-item {

        align-items: flex-start;

    }

    .map-card {

        min-height: 350px;

    }

    .map-btn {

        left: 20px;

        bottom: 20px;

    }

    .contact-social {

        justify-content: center;

    }

    .upcoming-events-section {

        padding: 40px 0;

    }

    .event-content {

        padding: 25px;

    }

    .event-image img {

        height: 220px;

    }

    .event-categories-section {

        padding: 40px 0;

    }

    .event-category-card {

        padding: 30px 25px;

    }

    .category-icon {

        width: 75px;

        height: 75px;

        font-size: 28px;

    }

    .annual-calendar-section {

        padding: 40px 0;

    }

    .calendar-wrapper::before {

        left: 32px;

    }

    .calendar-item {

        gap: 20px;

    }

    .calendar-month {

        width: 60px;

        height: 60px;

        font-size: 15px;

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

    }

    .calendar-content {

        padding: 22px;

    }

    .calendar-content:hover {

        transform: none;

    }

    .join-events-section {

        padding: 40px 0;

    }

    .join-benefits {

        grid-template-columns: 1fr;

    }

    .join-buttons {

        flex-direction: column;

    }

    .join-buttons .theme-btn,

    .join-buttons .outline-btn {

        width: 100%;

        text-align: center;

    }

    .featured-blog-section {

        padding: 40px 0;

    }

    .featured-blog-content {

        padding: 25px;

    }

    .blog-meta {

        flex-direction: column;

        gap: 10px;

    }

    .blog-details-section {

        padding: 40px 0;

    }

    .blog-title {

        font-size: 30px;

    }

    .blog-details-meta {

        gap: 15px;

    }

    .blog-quote {

        padding: 25px;

        font-size: 20px;

    }





}

/*=============================================
Small Mobile
=============================================*/
@media (max-width:575px) {
    .hero-item {

        min-height: 480px;

    }

    .hero-content {

        padding: 0 15px;

    }

    .hero-content h1 {

        font-size: 30px;

        line-height: 1.3;

    }

    .hero-content p {

        margin-bottom: 25px;

    }

    .hero-carousel .owl-dots {

        bottom: 20px;

    }

    .hero-btns a {
        width: 100%;
    }

    .about-content {

        text-align: center;

    }

    .about-item {

        justify-content: center;

    }

    .support-box {

        position: relative;

        left: auto;

        bottom: auto;

        margin-top: 20px;

    }

    .experience-box {

        top: -90px;

        right: 20px;

        width: 140px;
        padding: 10px;

    }

    .impact-box {

        padding: 30px 20px;

    }

    .focus-card {

        height: 320px;

    }

    .focus-icon {

        width: 60px;
        height: 60px;

    }

    .focus-icon i {

        font-size: 22px;

    }

    .cta-content h2 {

        font-size: 30px;

    }

    .info-item {

        justify-content: center;

    }

    .project-content h3 {

        font-size: 26px;

    }

    .progress-title {

        font-size: 14px;

    }

    .why-card {

        padding: 25px;

    }

    .why-icon {

        width: 70px;

        height: 70px;

        font-size: 28px;

    }

    .event-date {

        width: 70px;

        height: 70px;

    }

    .event-date h3 {

        font-size: 24px;

    }

    .event-content {

        padding: 20px;

    }

    .testimonial-item {

        padding: 25px 20px;

    }

    .testimonial-image {

        width: 80px;

        height: 80px;

    }

    .quote-icon {

        width: 60px;

        height: 60px;

        font-size: 22px;

    }

    .join-form {

        padding: 20px;

    }

    .blog-content {

        padding: 20px;

    }

    .blog-content h4 {

        font-size: 22px;

    }

    .purpose-icon {

        width: 70px;

        height: 70px;

        font-size: 28px;

    }

    .value-card {

        padding: 28px;

    }

    .value-icon {

        width: 65px;

        height: 65px;

        font-size: 24px;

    }

    .process-card {

        padding: 25px;

    }

    .cause-number {

        top: 15px;

        left: 15px;

        width: 60px;

        height: 60px;

        font-size: 24px;

    }



}

/*=============================================
Extra Small Mobile
=============================================*/
@media (max-width:425px) {}