@media (min-width: 1920px) {
    .container {
        max-width: 90%;
        margin: auto;
    }
}

@media (max-width: 1536px) {
    .container {
        max-width: 1440px;
    }

    .recognition-text {
        font-size: 22px;
        font-weight: 400;
    }

    .hero-content h1,
    .banner-title {
        font-size: 66px;
    }

    .hero-content p {
        max-width: 70%;
        font-size: 23px;
    }

    .teams-overlay h2 {
        font-size: 58px;
    }

    .section-title,
    .events-section-title {
        font-size: 46px;
    }

    .event-card {
        padding: 15px;
    }
    .event-meta i, .event-details-meta i {
        font-size: 25px;
    }

    .event-body h5 {
        font-size: 22px;
    }

    .event-body p {
        font-size: 18px;
    }

    .event-meta {
        gap: 10px;
    }

    .center-circle {
        width: 770px;
        height: 770px;
        border: 12px solid var(--secondary-color);
    }

    .bottom-center {
        bottom: -180px;
    }

    .service-diagram {
        transform: scale(0.96);
        transform-origin: top center;
    }

    .service-area {
        padding-bottom: 210px;
    }

    .mission-card, .vision-card {
        padding: 60px;
    }

    .section-title {
        padding-bottom: 0;
    }

    .card-details-inner {
        padding: 15px 15px;
    }

    .card-details h5 {
        font-size: 20px;
        margin-bottom: 10px;
        line-height: 1.4;
    }

    .card-details .role {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .card-details p {
        font-size: 16px;
    }

    .video-card iframe,
    .video-section iframe {
        min-height: 480px;
    }

    .map-content div {
        padding: 0 60px;
    }
}

@media (max-width: 1399.98px) {
    .hero-content h1,
    .banner-title {
        font-size: 60px;
    }

    .hero-content p,
    .recognition-text,
    .recognition-title,
    .about-content p,
    .section-subtitle,
    .featured-overlay p,
    .mini-article a,
    .mini-article h6,
    .info-box h6,
    .program-card p,
    .event-link,
    .blog-meta,
    .footer-contact li,
    .footer-links a {
        font-size: 18px;
    }

    .teams-overlay h2 {
        font-size: 52px;
    }

    .service-diagram {
        transform: scale(0.88);
        transform-origin: top center;
    }

    .service-area {
        padding-bottom: 220px;
    }

    .video-card iframe,
    .video-section iframe {
        min-height: 420px;
    }
}

@media (max-width: 1199.98px) {
    .navbar-nav {
        gap: 14px;
    }

    .navbar-light .navbar-nav .nav-link,
    .btn-red,
    .btn-outline,
    .btn-read-more,
    .filter-select,
    .filter-btn {
        font-size: 17px;
    }

    .btn-red,
    .btn-outline {
        padding: 12px 36px;
    }

    .hero-slide {
        height: auto;
        min-height: 760px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-content h1,
    .banner-title {
        font-size: 52px;
    }

    .hero-content p {
        max-width: 80%;
        font-size: 20px;
    }

    .recovered-img img {
        max-width: 260px;
    }

    .recognition-bar img {
        height: 32px;
    }

    .teams-image-card,
    .teams-card {
        height: 100%;
        min-height: 280px;
    }

    .mission-card,
    .vision-card {
        padding: 50px 80px;
    }

    .section-title,
    .events-section-title {
        font-size: 42px;
    }

    .card-content h3,
    .featured-overlay h4,
    .blog-body h5,
    .event-body h5,
    .program-card h1 {
        font-size: 28px;
    }

    .service-area {
        padding-bottom: 120px;
    }

    .service-area .section-title {
        margin-bottom: 50px;
    }

    .service-diagram {
        height: auto;
        transform: none;
    }

    .center-circle {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: min(100%, 620px);
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0 auto 40px;
    }

    .service-box,
    .left-top,
    .left-middle,
    .left-bottom,
    .right-top,
    .right-middle,
    .right-bottom,
    .bottom-center {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin-bottom: 18px;
    }

    .service-diagram {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
    }

    .service-diagram .center-circle {
        grid-column: 1 / -1;
    }

    .featured-article {
        min-height: 520px;
    }

    .mini-article {
        border-radius: 22px;
    }

    .mini-article img {
        max-width: 180px;
    }

    .program-banner-section p,
    .program-cards .section-subtitle,
    .contact-section .section-subtitle {
        width: 100% !important;
    }

    .video-card {
        margin-left: 0;
        margin-top: 24px;
    }

    .gallerySwiper .swiper-slide {
        width: 320px;
    }

    .connect-left {
        padding: 60px 30px;
    }

    .recommended-item img {
        width: 120px;
        height: 92px;
    }

    .recommended-item span,
    .featured-list li,
    .sidebar-inner-box h5 {
        font-size: 20px;
    }
}

@media (max-width: 991.98px) {
    .navbar {
        padding: 12px 0;
    }

    .navbar-brand img {
        max-height: 58px;
    }

    .navbar-toggler {
        padding: 8px 12px;
    }

    .navbar-collapse {
        margin-top: 18px;
        padding: 18px;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
    }

    .navbar-nav {
        gap: 8px;
        margin-bottom: 18px !important;
    }

    .navbar-light .navbar-nav .nav-link {
        font-size: 18px;
        padding: 10px 0;
    }

    .hero-slide {
        min-height: 680px;
    }

    .hero-slide .container {
        align-items: center !important;
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .hero-content {
        text-align: center;
        margin-inline: auto;
    }

    .hero-content h1,
    .banner-title {
        font-size: 44px;
    }

    .hero-content p {
        max-width: 100%;
        margin-inline: auto;
        font-size: 18px;
    }

    .recovered-img {
        margin: 35px auto 0;
    }

    .recognition-bar {
        padding: 24px 0;
    }

    .recognition-title {
        margin-right: 0;
        margin-bottom: 8px;
    }

    .recognition-img-section {
        gap: 16px;
    }

    .about-hero-section,
    .who-we-help,
    .events-section,
    .insights-section,
    .contact-section,
    .program-banner-section,
    .program-cards,
    .support-section,
    .faq-section,
    .blog-section {
        padding: 70px 0;
    }

    .about-content,
    .about-image,
    .contact-info,
    .sidebar-box {
        margin-top: 24px;
    }

    .mission-section {
        padding: 70px 0;
    }

    .mission-card,
    .vision-card {
        border-radius: 30px;
        padding: 40px 30px;
    }

    .vision-card {
        margin-top: 20px;
    }

    .leadership-section {
        padding: 70px 0 50px;
    }

    .leader-card,
    .card-img-wrap,
    .card-details {
        min-height: unset;
    }

    .hover-cards {
        flex-direction: column;
        height: auto;
    }

    .hover-card,
    .hover-card.active {
        flex: 1 1 auto;
        height: 360px;
    }

    .card-content,
    .hover-card.active .card-content {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .vertical-title {
        display: none;
    }

    .featured-article {
        min-height: 420px;
    }

    .featured-overlay,
    .mini-article-body,
    .blog-body,
    .event-body,
    .contact-card,
    .contact-info {
        padding: 24px;
    }

    .mini-article {
        flex-direction: column;
    }

    .mini-article img {
        width: 100%;
        max-width: 100%;
        height: 240px;
    }

    .instagram-section {
        padding: 70px 0;
    }

    .insta-item {
        height: 280px;
    }

    .contact-section .section-subtitle {
        width: 100%;
    }

    .info-box {
        padding: 14px 18px;
    }

    .program-banner-section h2,
    .program-banner-section p,
    .program-cards .section-subtitle {
        width: 100%;
    }

    .banner-media {
        row-gap: 24px;
    }

    .video-card iframe,
    .video-section iframe,
    .map-section iframe {
        min-height: 320px;
    }

    .program-item {
        margin-bottom: 36px;
    }

    .program-list .program-card {
        padding: 28px 24px;
    }

    .date-badge {
        width: auto;
        padding: 12px 20px;
    }

    .filter-bar .btn,
    .filter-bar a.btn {
        width: 100% !important;
    }

    .event-details-meta,
    .contact-card,
    .sidebar-box {
        margin-top: 24px;
    }

    .footer-subscribe {
        flex-direction: column;
        gap: 12px;
    }
}

@media (max-width: 767.98px) {
    .container {
        width: calc(100% - 24px);
    }

    .btn-red,
    .btn-outline,
    .btn-read-more,
    .btn-subscribe,
    .filter-btn {
        width: 100%;
        text-align: center;
        padding: 12px 18px;
        font-size: 16px;
    }

    .hero-slide {
        min-height: 620px;
    }

    .hero-content h1,
    .banner-title {
        font-size: 36px;
    }

    .hero-content p,
    .banner-breadcrumb,
    .section-subtitle,
    .section-desc,
    .featured-overlay p,
    .event-meta,
    .blog-meta,
    .contact-card,
    .contact-info,
    .info-box p,
    .footer-text,
    .footer-links a,
    .footer-contact li {
        font-size: 16px;
    }

    .section-title,
    .events-section-title,
    .instagram-header .section-title {
        font-size: 32px;
    }

    .teams-overlay h2,
    .card-content h3,
    .featured-overlay h4,
    .blog-body h5,
    .event-body h5,
    .program-card h1,
    .contact-info h5,
    .sidebar-inner-box h5 {
        font-size: 24px;
    }

    .teams-card,
    .event-card,
    .blog-card,
    .contact-card,
    .contact-info,
    .sidebar-box,
    .info-card {
        border-radius: 18px;
    }

    .teams-card,
    .event-body,
    .blog-body,
    .sidebar-box,
    .contact-card,
    .contact-info,
    .info-card,
    .featured-overlay,
    .mini-article-body {
        padding: 20px;
    }

    .about-content .d-flex,
    .program-banner-section .d-flex,
    .filter-bar form,
    .footer-social,
    .social-icons {
        gap: 12px !important;
    }

    .about-content .d-flex,
    .program-banner-section .d-flex {
        flex-direction: column;
    }

    .service-diagram {
        grid-template-columns: 1fr;
    }

    .center-circle {
        width: min(100%, 380px);
        border-width: 10px;
    }

    .service-box {
        padding: 28px 16px 16px;
        font-size: 16px;
    }

    .service-box img {
        max-height: 44px;
    }

    .featured-meta,
    .blog-meta,
    .event-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .recommended-item {
        align-items: center;
    }

    .recommended-item img {
        width: 90px;
        height: 78px;
    }

    .recommended-item span,
    .featured-list li {
        font-size: 17px;
    }

    .featured-list li {
        gap: 12px;
        align-items: center;
    }

    .faq-tabs {
        gap: 10px;
    }

    .faq-tabs .nav-link,
    .faq-accordion .accordion-button,
    .faq-accordion .accordion-body {
        font-size: 16px;
    }

    .faq-accordion .accordion-item {
        border-radius: 22px;
        padding: 8px 14px;
    }

    .info-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .program-list .program-card h1 {
        padding-right: 0;
        margin-top: 20px;
    }

    .program-list .date-badge {
        position: static;
        display: inline-block;
        margin-bottom: 16px;
    }

    .gallerySwiper .swiper-slide,
    .gallerySwiper .swiper-slide img {
        width: 100%;
        height: 260px;
    }

    .video-card iframe,
    .video-section iframe,
    .map-section iframe,
    .event-details-meta iframe {
        min-height: 260px;
    }

    .image-circle {
        margin-top: 24px;
        text-align: center;
    }

    .footer-logo {
        max-width: 180px;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand img {
        max-height: 48px;
    }

    .navbar-collapse {
        padding: 16px;
    }

    .hero-slide .container {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .hero-content h1,
    .banner-title {
        font-size: 30px;
    }

    .hero-content p,
    .recognition-text,
    .about-content p,
    .section-subtitle,
    .section-desc,
    .featured-overlay p,
    .event-body p,
    .blog-body p,
    .mini-article p,
    .program-card p,
    .contact-card,
    .contact-info,
    .custom-input,
    .footer-links a,
    .footer-contact li,
    .footer-text {
        font-size: 15px;
    }

    .section-title,
    .events-section-title,
    .instagram-header .section-title {
        font-size: 28px;
    }

    .teams-overlay h2,
    .card-content h3,
    .featured-overlay h4,
    .blog-body h5,
    .event-body h5,
    .program-card h1,
    .contact-info h5,
    .sidebar-inner-box h5,
    .info-box h6 {
        font-size: 22px;
    }

    .hero-slide,
    .banner {
        min-height: auto;
    }

    .recognition-bar,
    .teams-card,
    .event-card,
    .blog-card,
    .contact-card,
    .contact-info,
    .sidebar-box,
    .featured-article,
    .mini-article,
    .info-card {
        border-radius: 16px;
    }

    .recognition-bar {
        margin-top: 0;
    }

    .teams-image-card,
    .hover-card,
    .hover-card.active,
    .featured-article {
        height: 280px;
    }

    .mini-article img,
    .blog-card img,
    .event-image img {
        height: 220px;
    }

    .insta-item {
        height: 180px;
    }

    .contact-section,
    .events-section,
    .insights-section,
    .program-banner-section,
    .program-cards,
    .program-list,
    .support-section,
    .faq-section,
    .blog-section,
    .instagram-section,
    .mission-section,
    .who-we-help,
    .about-hero-section {
        padding: 56px 0;
    }

    .filter-bar {
        padding-bottom: 28px;
    }

    .filter-bar .col-md-2,
    .filter-bar .col-md-4 {
        width: 100%;
    }

    .search-box {
        flex-direction: column;
    }

    .search-box button {
        width: 100%;
        min-height: 48px;
    }

    .banner-breadcrumb {
        line-height: 1.5;
    }

    .footer-bottom {
        font-size: 14px;
    }
}