/* ============================================
   IC-CHAMBER MOBILE RESPONSIVE - PROFESSIONAL WEF STYLE
   NO CENTER ALIGN | HORIZONTAL SCROLL | LEFT ALIGNED
   ============================================ */

/* BASE RESET */
* { box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; }

/* ============================================
   MOBILE STYLES (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {

    /* ============================================
       NO CENTER ALIGNMENT - KEEP LEFT/RIGHT
       ============================================ */
    .text-center { text-align: left !important; }
    section h2, .section-title { text-align: left !important; }
    .hero-content { text-align: left !important; }
    .hero-actions { justify-content: flex-start !important; }

    /* ============================================
       CONTAINERS - TIGHT PADDING
       ============================================ */
    .container, .hero-container, .perspectives-container,
    .leading-voices-container, .section-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }

    /* ============================================
       TYPOGRAPHY - SMALLER BUT READABLE
       ============================================ */
    h1, .hero-title {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    h2, .section-title, .perspectives-title, .leading-voices-title {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }
    h3 { font-size: 1.1rem !important; }
    p, .hero-description {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* ============================================
       LOGO - SMALLER, STAYS AT TOP LEFT
       ============================================ */
    .logo, .navbar .logo, .hero-logo-center, .navbar-brand img {
        max-width: 80px !important;
        height: auto !important;
    }
    .logo img, .hero-logo-center {
        max-height: 35px !important;
    }
    .navbar, .india-chamber-nav {
        padding: 0.5rem 1rem !important;
    }

    /* ============================================
       HERO SECTION - MOBILE LAYOUT
       Logo top, Title 2 lines full width, Tagline smaller
       ============================================ */
    .hero-section, .hero {
        padding: 0.5rem 1rem 1rem 1rem !important;
        min-height: auto !important;
    }

    /* Hide global banner on mobile to save space */
    .global-banner {
        display: none !important;
    }

    /* Navbar compact on mobile */
    .india-chamber-nav {
        padding: 0.3rem 0.75rem !important;
    }

    /* Hero section - no padding */
    .hero-section, .hero-section.wef-section-navy-dark {
        padding: 0 1rem !important;
        margin: 0 !important;
        min-height: auto !important;
    }

    /* LOGO AT VERY TOP */
    .hero-top-logo {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0.5rem !important;
        left: 1rem !important;
        transform: none !important;
        z-index: 100 !important;
    }

    .hero-logo-center {
        display: block !important;
        width: 50px !important;
        height: auto !important;
    }

    /* Hero container - remove the 14rem padding */
    .hero-container {
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
    }

    .hero-content-grid {
        margin-bottom: 1rem !important;
        gap: 0.5rem !important;
    }

    /* Hero Title - Full width, 2 lines */
    .hero-title, h1.hero-title {
        font-size: 1.6rem !important;
        line-height: 1.25 !important;
        width: 100% !important;
        margin-bottom: 0.75rem !important;
        text-align: left !important;
    }

    /* Tagline/Description - Smaller than title */
    .hero-description, .hero-tagline, .tagline {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 1rem !important;
    }

    .hero-container {
        padding: 0 !important;
    }

    .hero-content-grid {
        display: block !important;
    }

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

    /* ============================================
       HOW WE DRIVE IMPACT - SMALLER, COMPACT
       ============================================ */
    .hero-tabs-section {
        padding: 1rem 0.75rem !important;
        margin-top: 1rem !important;
    }

    .section-header-tabs h2, .impact-section-title {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .impact-section-subtitle {
        font-size: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    .tabs-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
        justify-content: space-between !important;
        gap: 0.25rem !important;
        padding-bottom: 0.5rem !important;
    }

    .tab-btn {
        flex: 1 1 0 !important;
        font-size: 0.55rem !important;
        padding: 0.25rem 0.2rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        min-width: 0 !important;
        gap: 0 !important;
        letter-spacing: -0.02em !important;
        border-radius: 0.3rem !important;
    }

    /* IMPACT CARDS - SMALLER, HORIZONTAL SCROLL */
    .cards-grid, .impact-grid, .platform-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem !important;
        padding: 0.25rem 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .cards-grid::-webkit-scrollbar,
    .impact-grid::-webkit-scrollbar,
    .platform-grid::-webkit-scrollbar { display: none; }

    .impact-card, .wef-card-navy, .platform-card {
        flex: 0 0 180px !important;
        min-width: 180px !important;
        max-width: 180px !important;
        scroll-snap-align: start;
    }

    .impact-card .card-image img {
        height: 90px !important;
        object-fit: cover;
    }

    .impact-card .card-content {
        padding: 0.5rem !important;
    }

    .impact-card h3 {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    .impact-card p {
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
    }

    /* ============================================
       STRATEGIC AGENDA - SINGLE ROW HORIZONTAL SWIPE
       ============================================ */
    .cards-grid-3x2, .strategic-agenda-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        gap: 1rem !important;
        padding: 0.5rem 1rem !important;
        scrollbar-width: none !important;
    }

    .cards-grid-3x2::-webkit-scrollbar,
    .strategic-agenda-grid::-webkit-scrollbar {
        display: none !important;
    }

    .strategic-impact-card {
        flex: 0 0 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        scroll-snap-align: start !important;
    }

    .strategic-impact-card .card-image img {
        height: 120px !important;
        object-fit: cover;
    }

    .strategic-impact-card h3 {
        font-size: 0.95rem !important;
        padding: 0.5rem !important;
        line-height: 1.3 !important;
    }

    .strategic-impact-card .card-content {
        padding: 0.5rem !important;
    }

    .strategic-impact-card .card-discover {
        display: none !important;
    }

    /* ============================================
       PERSPECTIVES - 3 BOXES HORIZONTAL SCROLL
       ============================================ */
    .perspectives-section {
        padding: 1.5rem 1rem !important;
    }

    .perspectives-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.3rem !important;
        margin-bottom: 1rem !important;
    }

    .perspectives-title {
        font-size: 1.25rem !important;
    }

    .perspectives-subtitle {
        font-size: 0.75rem !important;
    }

    /* PERSPECTIVES GRID - KEEP GRID ON MOBILE */
    .perspectives-main-grid, .perspectives-grid {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr !important;
        grid-template-rows: 1fr 1fr !important;
        gap: 6px !important;
        height: 220px !important;
    }

    .report-card.card-large {
        grid-row: 1 / 3 !important;
        grid-column: 1 !important;
    }

    .report-card.card-medium {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .report-card.card-small {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    .report-card .card-title {
        font-size: 0.65rem !important;
        left: 8px !important;
        bottom: 8px !important;
        right: 8px !important;
    }

    .report-card .cover {
        width: 40% !important;
        height: 55% !important;
    }

    .report-card .cover::after {
        width: 14px !important;
        height: 14px !important;
    }

    /* ============================================
       LEADING VOICES - ONE VIDEO AT A TIME
       ============================================ */
    .leading-voices-section {
        padding: 1.5rem 1rem !important;
    }

    .leading-voices-header {
        margin-bottom: 0.75rem !important;
    }

    .leading-voices-title {
        font-size: 1.25rem !important;
    }

    .leading-voices-subtitle {
        font-size: 0.75rem !important;
    }

    /* Hide carousel arrows on mobile */
    .carousel-nav, .carousel-prev, .carousel-next,
    .carousel-arrow, .nav-arrow {
        display: none !important;
    }

    /* VIDEOS - ONE AT A TIME SCROLL */
    .leading-voices-grid, .videos-grid, .video-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        gap: 1rem !important;
        padding: 0.5rem 0 !important;
        scrollbar-width: none;
    }
    .leading-voices-grid::-webkit-scrollbar,
    .videos-grid::-webkit-scrollbar,
    .video-carousel::-webkit-scrollbar { display: none; }

    /* EACH VIDEO TAKES FULL WIDTH - ONE AT A TIME */
    .voice-card, .video-card, .leading-voice-card {
        flex: 0 0 calc(100vw - 2rem) !important;
        min-width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .voice-video, .video-thumbnail-container {
        height: 180px !important;
    }

    .voice-video video, .voice-video img,
    .video-thumbnail, .voice-video iframe {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover;
    }

    .voice-card h4, .video-card h4 {
        font-size: 0.9rem !important;
        margin-top: 0.5rem !important;
    }

    .voice-card p, .video-card p {
        font-size: 0.75rem !important;
    }

    /* ============================================
       SPOTLIGHT SECTION - SAME GRID AS DESKTOP (JUST SMALLER)
       ============================================ */
    .spotlight-section {
        padding: 1rem 0.5rem !important;
        display: block !important;
        visibility: visible !important;
    }

    .spotlight-container {
        display: block !important;
        padding: 0 0.5rem !important;
        max-width: 100% !important;
    }

    .spotlight-header {
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.5rem !important;
    }

    .spotlight-title {
        font-size: 1rem !important;
        color: #fff !important;
    }

    .spotlight-subtitle {
        font-size: 0.65rem !important;
        margin-bottom: 0.5rem !important;
    }

    .spotlight-more-link {
        font-size: 0.6rem !important;
    }

    /* KEEP ENTANGLED GRID LAYOUT - SAME AS DESKTOP */
    .spotlight-grid {
        display: grid !important;
        grid-template-columns: 1.5fr 1fr !important;
        grid-template-rows: 90px 90px !important;
        gap: 6px !important;
        min-height: 186px !important;
        height: auto !important;
    }

    .spotlight-featured {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        min-height: 186px !important;
    }

    .spotlight-secondary {
        grid-column: 2 !important;
        grid-row: 1 !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        height: 90px !important;
    }

    .spotlight-single {
        grid-column: 2 !important;
        grid-row: 2 !important;
        position: relative !important;
        overflow: hidden !important;
        border-radius: 6px !important;
        height: 90px !important;
    }

    .spotlight-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }

    .spotlight-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .spotlight-content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 0.4rem !important;
        z-index: 10 !important;
        background: linear-gradient(transparent, rgba(0,0,0,0.7)) !important;
    }

    .spotlight-category {
        font-size: 0.5rem !important;
        margin-bottom: 0.25rem !important;
    }

    .spotlight-featured-title {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        color: #fff !important;
    }

    .spotlight-title-text {
        font-size: 0.55rem !important;
        line-height: 1.2 !important;
        color: #fff !important;
    }

    /* insights spotlight grid - separate */
    .insights-spotlight-section {
        padding: 1.5rem 1rem !important;
    }

    .insights-spotlight-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.6rem !important;
        scrollbar-width: none;
    }
    .insights-spotlight-grid::-webkit-scrollbar { display: none; }

    .spotlight-card, .insights-spotlight-card {
        flex: 0 0 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        scroll-snap-align: start;
    }

    .spotlight-card iframe,
    .spotlight-card video,
    .spotlight-card img {
        height: 110px !important;
        width: 100% !important;
        object-fit: cover;
    }

    .spotlight-card h4 {
        font-size: 0.8rem !important;
        padding: 0.4rem !important;
    }

    .spotlight-card p {
        font-size: 0.7rem !important;
    }

    /* ============================================
       REF PAGE - RURAL ECONOMIC FORUM
       ============================================ */
    .ref-hero-mockup, .ref-hero-section {
        padding: 1rem !important;
        min-height: auto !important;
    }

    .ref-hero-container {
        padding: 0.75rem !important;
    }

    .ref-logo {
        max-width: 60px !important;
    }

    .ref-hero-title {
        font-size: 1.25rem !important;
        text-align: left !important;
    }

    .ref-tagline {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    .ref-cards-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 0.6rem !important;
        scrollbar-width: none;
    }
    .ref-cards-grid::-webkit-scrollbar { display: none; }

    .ref-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        scroll-snap-align: start;
        padding: 0.75rem !important;
    }

    .ref-card h3 {
        font-size: 0.85rem !important;
    }

    .ref-card p {
        font-size: 0.7rem !important;
    }

    /* ============================================
       IHD V2 - PILLARS HORIZONTAL SCROLL
       ============================================ */
    .ihd-pillars-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0.75rem !important;
        scrollbar-width: none;
    }
    .ihd-pillars-grid::-webkit-scrollbar { display: none; }

    .ihd-pillar-card {
        flex: 0 0 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
        height: 260px !important;
        scroll-snap-align: start;
    }

    .ihd-pillar-content {
        padding: 1rem !important;
    }

    .ihd-pillar-content h3 {
        font-size: 0.9rem !important;
    }

    .ihd-pillar-content p {
        font-size: 0.75rem !important;
    }

    /* ============================================
       IHD V2 - INSTITUTIONAL FRAMEWORK
       ============================================ */
    .ihd-genesis-scroll-container {
        margin: 0 -1rem !important;
        padding: 0 1rem !important;
    }

    .ihd-genesis-scroll {
        scroll-snap-type: x mandatory !important;
        gap: 1rem !important;
    }

    .ihd-genesis-card {
        min-width: 85vw !important;
        flex: 0 0 85vw !important;
        height: 300px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    .ihd-genesis-card-content {
        padding: 1.5rem !important;
    }

    .ihd-genesis-card h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.5rem !important;
    }

    .ihd-genesis-card p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* ============================================
       IHD V2 - STRATEGIC FRAMEWORK
       ============================================ */
    .ihd-framework-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1rem !important;
        scrollbar-width: none !important;
        padding: 0 !important;
    }
    .ihd-framework-grid::-webkit-scrollbar { display: none !important; }

    .ihd-framework-card {
        flex: 0 0 85vw !important;
        min-width: 85vw !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    .ihd-framework-image {
        height: 180px !important;
    }

    .ihd-framework-content {
        padding: 1.25rem !important;
    }

    .ihd-framework-content h3 {
        font-size: 1.1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .ihd-framework-content p {
        font-size: 0.9rem !important;
    }

    /* ============================================
       IHD V2 - KEY PILLARS
       ============================================ */
    .ihd-pillars-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1rem !important;
        scrollbar-width: none !important;
        padding: 0 !important;
    }
    .ihd-pillars-grid::-webkit-scrollbar { display: none !important; }

    .ihd-pillar-card {
        flex: 0 0 85vw !important;
        min-width: 85vw !important;
        height: 320px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    /* ============================================
       IHD V2 - ROLE OF IHD HORIZONTAL SCROLL
       ============================================ */
    .ihd-role-scroll-container {
        margin: 0 -1rem !important;
        padding: 0 1rem !important;
    }

    .ihd-role-scroll {
        scroll-snap-type: x mandatory !important;
        gap: 1rem !important;
    }

    .ihd-role-card {
        min-width: 85vw !important;
        flex: 0 0 85vw !important;
        padding: 2.5rem !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    .ihd-role-card h3 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
    }

    .ihd-role-card p {
        font-size: 1.15rem !important;
        line-height: 1.8 !important;
    }

    /* ============================================
       IHD V2 - NEWS SECTION
       ============================================ */
    .ihd-news-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1.5rem !important;
        padding-bottom: 1rem !important;
        scrollbar-width: none !important;
    }
    .ihd-news-grid::-webkit-scrollbar { display: none !important; }

    .ihd-news-card {
        min-width: 85vw !important;
        flex: 0 0 85vw !important;
        scroll-snap-align: center !important;
        height: 350px !important;
    }

    .ihd-news-card.ihd-news-featured {
        grid-column: auto !important;
        min-width: 85vw !important;
        flex: 0 0 85vw !important;
        height: 400px !important;
    }

    /* ============================================
       IHD V2 - HERO SECTION
       ============================================ */
    .ihd-hero h1 {
        font-size: 2rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .ihd-hero-subtitle {
        font-size: 0.95rem !important;
    }

    .ihd-hero-badge {
        font-size: 0.7rem !important;
        padding: 0.4rem 1rem !important;
    }

    .ihd-section-title {
        font-size: 1.4rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
    }

    .ihd-container {
        padding: 0 1rem !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ihd-section {
        overflow: hidden !important;
    }

    /* IHD buttons responsive */
    .ihd-btn {
        padding: 0.8rem 1.5rem !important;
        font-size: 0.9rem !important;
    }

    /* IHD CTA section */
    .ihd-cta h2 {
        font-size: 1.8rem !important;
        word-wrap: break-word !important;
    }

    .ihd-cta p {
        font-size: 1rem !important;
    }

    /* IHD Video container */
    .ihd-video-container {
        max-width: 100% !important;
    }

    /* IHD Context grid */
    .ihd-context-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .ihd-context-content {
        padding: 2rem !important;
    }

    .ihd-context-content h3 {
        font-size: 1.6rem !important;
    }

    .ihd-context-content p {
        font-size: 1rem !important;
    }

    /* IHD Vision grid */
    .ihd-vision-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* IHD News section in-template responsive */
    .news-grid-container {
        grid-template-columns: 1fr !important;
    }

    .news-grid-bottom {
        grid-template-columns: 1fr !important;
    }

    .forum-title {
        font-size: 1.5rem !important;
    }

    /* ============================================
       IHD V2 - PLATFORM PARTNERS
       ============================================ */
    .ihd-partners-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.4rem !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .ihd-partner-box {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        min-height: auto !important;
        min-width: auto !important;
        flex: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 0.5rem !important;
    }

    .ihd-partner-box img {
        max-height: 25px !important;
        max-width: 60% !important;
    }

    .ihd-lead-partner {
        padding: 0.6rem !important;
        margin-bottom: 0.4rem !important;
        border-radius: 0.5rem !important;
    }

    .ihd-lead-partner h3 {
        font-size: 0.6rem !important;
        margin-bottom: 0.3rem !important;
    }

    .ihd-lead-partner img {
        max-height: 28px !important;
    }

    /* ============================================
       RURAL FORUM SECTION ON HOME
       ============================================ */
    .rural-economic-forum-section {
        padding: 1rem !important;
    }

    .rural-forum-container {
        padding: 0.75rem !important;
    }

    .rural-forum-title {
        font-size: 1.1rem !important;
    }

    .rural-forum-title img {
        height: 25px !important;
        margin-right: 8px !important;
    }

    .rural-forum-description {
        font-size: 0.75rem !important;
    }

    /* ============================================
       NAVBAR - COMPACT (MOBILE)
       Only show: logo, join button, hamburger
       ============================================ */
    .navbar, .india-chamber-nav {
        padding: 0.4rem 0.75rem !important;
    }

    .menu, .nav-menu, .desktop-menu {
        display: none !important;
    }

    .mobile-menu-button, .hamburger, .menu-toggle {
        display: flex !important;
    }

    /* Hide sign-in/sign-up on mobile navbar */
    .right-icons .auth-btn,
    .right-icons .login-btn,
    .right-icons .signup-btn {
        display: none !important;
    }

    /* Keep join button and hamburger visible */
    .right-icons .join-btn {
        display: inline-flex !important;
        padding: 0.4rem 0.8rem !important;
        font-size: 0.75rem !important;
    }

    .right-icons #hamburger {
        display: flex !important;
    }

    /* ============================================
       SIDEBAR - ALIGN AUTH BUTTONS LIKE BROCHURE
       ============================================ */
    .sidebar .auth-btn,
    .sidebar .login-btn,
    .sidebar .signup-btn {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem 1.25rem !important;
        text-align: center !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        text-decoration: none !important;
        margin-top: 0.5rem !important;
        box-sizing: border-box !important;
    }

    .sidebar .login-btn {
        background: transparent !important;
        border: 2px solid #2563eb !important;
        color: #2563eb !important;
    }

    .sidebar .signup-btn {
        background: #2563eb !important;
        color: #ffffff !important;
        border: 2px solid #2563eb !important;
    }

    .sidebar .download-brochure-sidebar {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem 1.25rem !important;
        text-align: center !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        box-sizing: border-box !important;
    }

    .sidebar .join-btn {
        display: block !important;
        width: 100% !important;
        padding: 0.75rem 1.25rem !important;
        text-align: center !important;
        border-radius: 0.5rem !important;
        font-weight: 600 !important;
        font-size: 0.9rem !important;
        text-decoration: none !important;
        margin-top: 0.75rem !important;
        box-sizing: border-box !important;
        background: #2563eb !important;
        color: #ffffff !important;
        border: 2px solid #2563eb !important;
        border-bottom: none !important;
    }

    /* ============================================
       BUTTONS - SMALLER
       ============================================ */
    .btn, .button, .rural-forum-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.8rem !important;
    }

    /* ============================================
       REF - ABOUT REF SECTION
       ============================================ */
    .ref-about {
        padding: 2rem 0 1rem 0 !important;
        overflow: visible !important;
    }

    .ref-about .ref-section-header {
        margin-bottom: 1.5rem !important;
        padding: 0 1rem !important;
    }

    .ref-about .ref-section-container {
        overflow: visible !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .ref-about-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        gap: 1rem !important;
        padding: 0 1rem 1rem 1rem !important;
        scrollbar-width: none !important;
        max-width: none !important;
        width: 100% !important;
        margin: 0 !important;
        grid-template-columns: none !important;
    }
    .ref-about-grid::-webkit-scrollbar { display: none !important; }

    .ref-about-card {
        flex: 0 0 80vw !important;
        min-width: 80vw !important;
        max-width: 80vw !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        height: 280px !important;
    }

    /* ============================================
       REF - STRATEGIC PILLARS SWIPE
       ============================================ */
    .ref-themes {
        padding: 2rem 0 1rem 0 !important;
        overflow: visible !important;
    }

    .ref-themes .ref-section-header {
        margin-bottom: 1.5rem !important;
        padding: 0 1rem !important;
    }

    .ref-themes .ref-section-container {
        overflow: visible !important;
        max-width: none !important;
        padding: 0 !important;
    }

    .ref-themes-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x !important;
        gap: 1rem !important;
        padding: 0 1rem 1rem 1rem !important;
        scrollbar-width: none !important;
        max-width: none !important;
        width: 100% !important;
        grid-template-columns: none !important;
    }
    .ref-themes-grid::-webkit-scrollbar { display: none !important; }

    .ref-theme-card {
        flex: 0 0 80vw !important;
        min-width: 80vw !important;
        max-width: 80vw !important;
        aspect-ratio: auto !important;
        height: 280px !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
    }

    /* ============================================
       REF - CONSISTENT BUTTON SIZING
       ============================================ */
    .ref-cta-btn,
    .ref-hero-btn,
    .ref-btn,
    .ref-register-btn,
    a[class*="ref"][class*="btn"] {
        padding: 0.6rem 1.2rem !important;
        font-size: 0.85rem !important;
        min-width: 140px !important;
        text-align: center !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* ============================================
       REF AT A GLANCE - CENTER HEADINGS & PARAGRAPHS
       ============================================ */
    .ref-glance-header,
    .ref-carousel-content {
        text-align: center !important;
    }

    .ref-carousel-title {
        text-align: center !important;
        font-size: 1.5rem !important;
    }

    .ref-carousel-description {
        text-align: center !important;
        font-size: 0.95rem !important;
    }

    .ref-carousel-label {
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .ref-carousel-nav {
        justify-content: center !important;
    }

    .ref-glance-carousel {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .ref-carousel-images {
        max-width: 100% !important;
        height: 280px !important;
    }

    /* ============================================
       REF 2025 - DATE OVERFLOW FIX
       ============================================ */
    .ref2025-detail-value {
        white-space: normal !important;
        word-break: break-word !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .ref2025-hero-details {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .ref2025-detail-item {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ============================================
       IHD - IMPACT PATHWAYS MOBILE
       ============================================ */
    .ihd-impact-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
        scrollbar-width: none !important;
    }
    .ihd-impact-grid::-webkit-scrollbar { display: none !important; }

    .ihd-impact-card {
        flex: 0 0 80vw !important;
        min-width: 80vw !important;
        margin-right: 1cm !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        height: 280px !important;
    }

    /* IHD section heading & role card sizes now set in main IHD block above */

    /* ============================================
       POF VISION/MISSION - STACK ON MOBILE
       ============================================ */
    .pof-vision-mission-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .pof-vm-card {
        width: 100% !important;
        min-width: 100% !important;
    }

    .pof-spotlight-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .pof-spotlight-card {
        min-height: 260px !important;
    }

    /* ============================================
       PERSPECTIVES / REPORTS - STACK ON MOBILE
       ============================================ */
    .perspectives-reports-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .perspectives-reports-header p {
        padding: 0 !important;
    }

    .perspectives-report-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: 250px 200px 200px !important;
        height: auto !important;
    }

    .perspectives-report-grid > a:first-child {
        grid-row: span 1 !important;
    }

    /* ============================================
       SECTIONS - LESS PADDING
       ============================================ */
    section {
        padding: 1.5rem 1rem !important;
    }

    /* ============================================
       FOOTER - COMPACT
       ============================================ */
    .footer, footer {
        padding: 1rem !important;
    }

    .footer-content {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .footer p, .footer a {
        font-size: 0.75rem !important;
    }

    /* ============================================
       IMAGES - RESPONSIVE
       ============================================ */
    img {
        max-width: 100%;
        height: auto;
    }

    /* ============================================
       ENGAGEMENT CARDS
       ============================================ */
    .engagement-grid, .engagements-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        gap: 0.75rem !important;
        scrollbar-width: none;
    }
    .engagement-grid::-webkit-scrollbar,
    .engagements-grid::-webkit-scrollbar { display: none; }

    .engagement-card {
        flex: 0 0 240px !important;
        min-width: 240px !important;
        scroll-snap-align: start;
    }

    /* ============================================
       FIX #1: HOMEPAGE HERO/SPOTLIGHT TEXT OVERLAP
       At 425px, perspectives grid overlaps hero content
       ============================================ */
    .perspectives-report-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: 250px 200px 200px !important;
        height: auto !important;
    }

    .perspectives-report-grid > a:first-child {
        grid-row: span 1 !important;
    }

    /* Ensure hero content doesn't get hidden behind absolute logo */
    .hero-text-content {
        padding-top: 2.5rem !important;
    }

    /* ============================================
       FIX #2: HOMEPAGE SECTION SPACING
       Prevent East India Chamber / Leading Voices overlap
       ============================================ */
    .perspectives-reports-section {
        padding: 1.5rem 1rem !important;
        overflow: hidden !important;
    }

    .leading-voices-section {
        margin-top: 0 !important;
        padding-top: 1.5rem !important;
        clear: both !important;
    }

    /* ============================================
       FIX #9: MOBILE NAV BUTTONS BREAKING (~582px)
       Right icons wrap/overflow at narrow widths
       ============================================ */
    .right-icons {
        gap: 4px !important;
    }

    .right-icons .auth-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .right-icons .join-btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.7rem !important;
    }

    #hamburger {
        padding: 6px 10px !important;
        font-size: 16px !important;
    }

    /* ============================================
       FIX #10: FOOTER/INFO FONT SIZES
       Prevent text breaking out of footer on mobile
       ============================================ */
    .footer, footer {
        overflow: hidden !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .footer p, .footer a, .footer span,
    footer p, footer a, footer span {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }

    .footer h3, .footer h4, footer h3, footer h4 {
        font-size: 0.9rem !important;
    }

    /* ============================================
       FIX #11: REF LAYOUT BREAKS (MOBILE)
       Rural Economic Forum sections overflow on mobile
       ============================================ */
    .ref-future-pathways {
        overflow: hidden !important;
        padding: 2rem 0 !important;
    }

    .ref-pathways-scroll-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 !important;
        padding: 0 1rem !important;
    }

    .ref-pathways-grid {
        gap: 1rem !important;
    }

    .ref-pathway-card {
        flex: 0 0 85vw !important;
        min-width: 85vw !important;
        min-height: 380px !important;
        overflow: visible !important;
    }

    .ref-pathway-content {
        position: relative !important;
        z-index: 2 !important;
    }

    .ref-pathway-description {
        overflow: visible !important;
    }

    .ref-pathway-description p {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }

    /* REF partner logos - prevent overflow */
    .ref-partner-logos {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        justify-content: center !important;
    }

    .ref-partner-logo-item {
        min-width: 80px !important;
        padding: 0.5rem !important;
        flex: 0 0 calc(50% - 0.5rem) !important;
    }

    .ref-partner-logo-img {
        height: 35px !important;
        max-width: 80px !important;
        padding: 4px !important;
    }

    /* ============================================
       FIX #12: BOX FONT SIZE CONSISTENCY (MOBILE)
       Normalize card typography across all pages
       ============================================ */
    .impact-card h3,
    .strategic-impact-card h3,
    .ref-card h3,
    .ref-about-card h3,
    .ref-theme-card h3,
    .leadership-card h3 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    .impact-card p,
    .strategic-impact-card p,
    .ref-card p,
    .ref-about-card p,
    .ref-theme-card p,
    .leadership-card p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* ============================================
       INSIGHTS & CONVERSATIONS - MOBILE
       ============================================ */
    .insights-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .insight-card {
        min-height: 240px !important;
    }

    /* ============================================
       IC AT A GLANCE TIMELINE - MOBILE
       Single column, no center line
       ============================================ */
    .ic-timeline-item {
        flex-direction: column !important;
        text-align: left !important;
    }

    .ic-timeline-item > div:first-child,
    .ic-timeline-item > div:last-child {
        width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    .ic-timeline > div:first-child {
        left: 0.5rem !important;
    }

    .ic-timeline-item > div[style*="position: absolute"] {
        left: 0.5rem !important;
    }

} /* END MOBILE STYLES */

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .leading-voices-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .perspectives-main-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   DESKTOP (1024px+) - NORMAL BEHAVIOR
   ============================================ */
@media (min-width: 1024px) {
    .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
    }

    .cards-grid-3x2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
    }

    .perspectives-main-grid {
        display: grid;
        overflow: visible;
    }

    .leading-voices-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        overflow: visible;
    }

    .ihd-pillars-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        overflow: visible !important;
        padding: 0 60px !important;
    }

    .impact-card, .strategic-impact-card, .voice-card, .ihd-pillar-card {
        flex: none;
        min-width: auto;
        max-width: none;
    }

    /* IHD Partners - Desktop */
    .ihd-partners-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
        padding: 0 3cm !important;
        overflow: visible !important;
    }

    .ihd-partner-box {
        flex: none !important;
        min-width: auto !important;
        padding: 3rem !important;
        min-height: 180px !important;
    }

    /* IHD Genesis - Desktop */
    .ihd-genesis-card {
        min-width: 400px !important;
        flex: 0 0 400px !important;
        height: 380px !important;
    }

    /* IHD Framework - Desktop */
    .ihd-framework-grid {
        display: flex !important;
        gap: 1.5rem !important;
        overflow-x: auto !important;
        padding: 0 !important;
    }

    .ihd-framework-card {
        flex: 0 0 393px !important;
        min-width: 393px !important;
    }

    /* IHD Role - Desktop */
    .ihd-role-card {
        min-width: 420px !important;
        padding: 3rem !important;
    }

    /* IHD Impact Pathways - Desktop padding */
    .ihd-impact-grid {
        padding: 0 60px !important;
    }

    /* REF About - Desktop grid */
    .ref-about-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
    }

    .ref-about-card {
        flex: none !important;
        min-width: auto !important;
        max-width: none !important;
    }

    /* REF Strategic Pillars - Desktop grid */
    .ref-themes-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        overflow: visible !important;
    }

    .ref-theme-card {
        flex: none !important;
        min-width: auto !important;
        aspect-ratio: 1 !important;
        height: auto !important;
    }

    /* REF at a Glance - Desktop center */
    .ref-glance-header,
    .ref-carousel-content {
        text-align: center !important;
    }

    .ref-carousel-title {
        text-align: center !important;
    }

    .ref-carousel-description {
        text-align: center !important;
    }

    .ref-carousel-nav {
        justify-content: center !important;
    }

    /* REF 2025 - Date overflow fix */
    .ref2025-detail-value {
        white-space: normal !important;
        overflow: hidden !important;
    }

    .ref2025-detail-item {
        overflow: hidden !important;
    }
}

/* ============================================
   FIX #3: EXTRA-SMALL MOBILE (max-width: 380px)
   Text misalignment, logo overflow, section hidden
   Targets 320px viewport specifically
   ============================================ */
@media (max-width: 380px) {

    /* FIX #3: Homepage text misalignment at 320px */
    .hero-title, h1.hero-title {
        font-size: 1.2rem !important;
        line-height: 1.25 !important;
        word-break: break-word !important;
    }

    .hero-description, .hero-tagline {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    h2, .section-title {
        font-size: 1.1rem !important;
        word-break: break-word !important;
    }

    h3 {
        font-size: 0.95rem !important;
    }

    p {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
    }

    /* FIX #4: REF MSME logo overflow at 320px */
    .ref-partner-logos {
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
    }

    .ref-partner-logo-item {
        min-width: 70px !important;
        flex: 0 0 calc(50% - 0.4rem) !important;
        padding: 0.4rem !important;
    }

    .ref-partner-logo-img {
        height: 28px !important;
        max-width: 65px !important;
        padding: 3px !important;
    }

    .ref-partner-name {
        font-size: 0.55rem !important;
    }

    /* FIX #5: REF Focus Sectors text cut at 320px */
    .ref-pathway-card {
        flex: 0 0 calc(100vw - 2rem) !important;
        min-width: calc(100vw - 2rem) !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .ref-pathway-image {
        height: 30% !important;
    }

    .ref-pathway-card .ref-pathway-number {
        margin-top: calc(30% + 0.5rem) !important;
        font-size: 2rem !important;
    }

    .ref-pathway-title {
        font-size: 1rem !important;
    }

    .ref-pathway-description p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* FIX #6: Governance Leadership grid hidden at 320px */
    .leadership-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 0.5rem !important;
    }

    .leadership-image-container {
        height: 200px !important;
        overflow: hidden !important;
    }

    .leadership-card {
        overflow: visible !important;
    }

    .leadership-info {
        padding: 1rem !important;
    }

    .leadership-name {
        font-size: 1rem !important;
    }

    .leadership-title {
        font-size: 0.8rem !important;
    }

    .leadership-description {
        font-size: 0.75rem !important;
    }

    /* Governance section header - prevent left padding overflow */
    .section-header {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .section-title {
        font-size: 1.5rem !important;
    }

    .section-subtitle {
        font-size: 0.85rem !important;
    }

    /* Featured officer card - single column at 320px */
    .featured-officer-content {
        grid-template-columns: 1fr !important;
    }

    .featured-officer-image {
        max-width: 100% !important;
        max-height: 250px !important;
    }

    .featured-officer-info {
        padding: 1.5rem 1rem !important;
    }

    .featured-officer-name {
        font-size: 1.5rem !important;
    }

    /* Containers - tighter padding */
    .container, .hero-container, .perspectives-container,
    .leading-voices-container, .section-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    /* Perspectives grid even tighter */
    .perspectives-report-grid {
        grid-template-rows: 200px 160px 160px !important;
    }

    /* Tabs - even smaller */
    .tab-btn {
        font-size: 0.5rem !important;
        padding: 0.2rem 0.15rem !important;
    }

    /* Nav buttons - prevent breaking */
    .right-icons {
        gap: 3px !important;
    }

    .right-icons .join-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6rem !important;
    }

    .right-icons .auth-btn {
        display: none !important;
    }

    #hamburger {
        padding: 5px 8px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   FIX #8: GOVERNANCE TEXT OVERLAP AT TABLET (1024px)
   Leadership grid too tight with 3 columns at 1024px
   ============================================ */
@media (min-width: 768px) and (max-width: 1100px) {
    .leadership-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    .leadership-image-container {
        height: 240px !important;
    }

    /* Governance hero text size for tablet */
    .leadership-hero .hero-title {
        font-size: 2.5rem !important;
    }

    .leadership-hero .hero-description {
        font-size: 1rem !important;
    }

    /* Featured officer - keep side-by-side but smaller */
    .featured-officer-image {
        max-width: 250px !important;
    }

    .featured-officer-name {
        font-size: 1.8rem !important;
    }
}

/* ============================================
   FIX #7: REF 2026 SUMMIT BUTTON SIZE AT ULTRA-WIDE (2560px)
   Buttons too small on large screens
   ============================================ */
@media (min-width: 1920px) {
    .summit-btn-primary,
    .summit-btn-outline {
        padding: 1.25rem 3rem !important;
        font-size: 1.35rem !important;
        min-width: 220px !important;
    }

    .ref-btn-primary,
    .ref-btn-secondary {
        padding: 1.25rem 3rem !important;
        font-size: 1.35rem !important;
    }

    /* REF hero buttons */
    .ref-hero-btn,
    .ref-cta-btn,
    .ref-register-btn {
        padding: 1.25rem 3rem !important;
        font-size: 1.35rem !important;
    }
}

/* ============================================
   FIX #11b: REF LAYOUT BREAKS (TABLET)
   Focus sectors and pathways at tablet width
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .ref-pathway-card {
        flex: 0 0 300px !important;
        min-width: 300px !important;
        min-height: 400px !important;
    }

    .ref-pathways-grid {
        gap: 1.5rem !important;
    }

    /* REF About grid - 2 columns on tablet */
    .ref-about-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* REF themes - 2 columns on tablet */
    .ref-themes-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
}