/* ================================================
   RESPONSIVE CSS FOR SMALL DEVICES
   Fallgard™ - Mobile-First Responsive Design
   ================================================ */

/* Mobile First Approach - Base styles for small screens */
@media (max-width: 480px) {
    /* ===== RESET & BASE STYLES ===== */
    * {
        box-sizing: border-box;
        max-width: 100%;
    }
    
    body {
        font-size: 14px;
        line-height: 1.5;
        overflow-x: hidden;
        max-width: 100vw;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    section {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .row,
    .grid,
    .flex {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    .container {
        max-width: 100%;
        padding: 0 var(--spacing-3);
        margin: 0 auto;
        overflow-x: hidden;
    }
    
    /* ===== TYPOGRAPHY ===== */
    h1 { 
        font-size: 1.8rem; 
        line-height: 1.3;
        margin-bottom: var(--spacing-3);
    }
    
    h2 { 
        font-size: 1.6rem; 
        line-height: 1.3;
        margin-bottom: var(--spacing-3);
    }
    
    h3 { 
        font-size: 1.4rem; 
        line-height: 1.3;
        margin-bottom: var(--spacing-2);
    }
    
    h4 { 
        font-size: 1.2rem; 
        line-height: 1.3;
        margin-bottom: var(--spacing-2);
    }
    
    h5 { 
        font-size: 1.1rem; 
        line-height: 1.3;
        margin-bottom: var(--spacing-2);
    }
    
    h6 { 
        font-size: 1rem; 
        line-height: 1.3;
        margin-bottom: var(--spacing-2);
    }
    
    p {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-3);
    }
    
    .lead {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    /* ===== BUTTONS ===== */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-3) var(--spacing-6);
        border: none;
        border-radius: var(--radius-md);
        font-family: inherit;
        font-size: var(--font-size-base);
        font-weight: 500;
        text-decoration: none;
        cursor: pointer;
        transition: all var(--transition-base);
        gap: var(--spacing-2);
    }
    
    .btn-primary {
        background: linear-gradient(135deg, var(--green-700));
        color: var(--text-inverse);
        box-shadow: var(--shadow);
        transition: var(--transition-base);
    }
    
    .btn-primary:hover {
        background: linear-gradient(135deg, var(--green-800));
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
        transition: var(--transition-base);
    }
    
    .btn-secondary {
        background: rgb(144, 190, 144);
        color: var(--text-inverse);
        transition: var(--transition-base);
    }
    
    .btn-secondary:hover {
        background: rgb(131, 184, 131);
        border-color: var(--green-100);
        transition: var(--transition-base);
        transform: translateY(-3px);
    }
    
    /* ===== NAVIGATION BACKDROP ===== */
    .nav-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(8px);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .nav-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    /* ===== NAVIGATION ===== */
    .navbar,
    .header {
        padding: var(--spacing-2) 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .nav-container,
    .header-container {
        padding: var(--spacing-2) var(--spacing-3);
        flex-direction: row;
        justify-content: space-between;
    }
    
    .nav-brand {
        flex-shrink: 0;
    }
    
    .logo {
        height: 35px;
        width: auto;
    }
    
    .logo-name {
        height: 20px;
        width: auto;
    }
    
    .brand-name {
        font-size: var(--font-size-base);
        font-weight: 600;
    }
    
    .nav-menu {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: auto;
        background: white;
        flex-direction: column;
        padding: var(--spacing-4);
        transition: left 0.3s ease;
        z-index: 999;
        overflow: hidden;
        border: none;
        box-shadow: none;
        outline: none;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-item {
        width: 100%;
        margin-bottom: var(--spacing-2);
    }
    
    .nav-link {
        display: block;
        /* padding: var(--spacing-2); */
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        /* border-radius: var(--radius); */
        /* background: var(--bg-variant); */
        color: var(--green);
        text-decoration: none;
        transition: all var(--transition-base);
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .nav-link:hover,
    .nav-link.active {
        /* background: var(--green-700); */
        color: var(--green-600);
        transform: translateX(5px);
    }
    
    .nav-link::after {
        display: none;
    }
    
    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        gap: 4px;
        z-index: 1000;
    }
    
    .bar {
        width: 25px;
        height: 3px;
        background: var(--text-primary);
        transition: all 0.3s ease;
        border-radius: 2px;
    }
    
    .hamburger.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }
    
    .cta-nav {
        display: block !important;
        margin-top: var(--spacing-2);
        padding: var(--spacing-2) var(--spacing-4);
        font-size: 0.9rem;
        text-align: center;
        border-radius: var(--radius-md);
        background: var(--green-700);
        color: white;
        text-decoration: none;
        transition: all var(--transition-base);
        min-height: 36px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    /* ===== HERO SECTION ===== */
    .highlight {
        padding: var(--spacing-4) 0;
        text-align: center;
        font-size: 1.7rem;
        font-weight: 700;
        color: var(--green);
    }
    .hero {
        padding: 50px 0 var(--spacing-20);
        background: var(--bg-gradient);
        min-height: 70vh;
        display: flex;
        align-items: center;
    }
    
    .hero-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--spacing-4);
    }
    
    .hero-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        align-items: center;
        text-align: center;
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
        font-weight: 200;
        line-height: 1.1;
        margin-bottom: var(--spacing-6);
        color: var(--text-primary);
    }
    
    .hero-description {
        font-size: var(--font-size-xl);
        margin-top: var(--spacing-10);
        margin-bottom: var(--spacing-8);
        color: var(--green-800);
        line-height: 1.7;
    }
    
    .hero-buttons {
        display: flex;
        gap: var(--spacing-4);
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .hero-img {
        width: 100%;
        height: auto;
        max-width: 400px;
        margin: var(--spacing-24) auto 0;
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-xl);
        object-fit: cover;
    }
    
    /* ===== HERO FEATURES SECTION ===== */
    .hero-features {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: var(--spacing-10);
        gap: var(--spacing-12);
        padding: var(--spacing-6);
        border-radius: var(--radius-lg);
        backdrop-filter: blur(3px);
    }
    
    .hero-feature-row {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: var(--spacing-4);
        flex-direction: column;
    }
    
    .hero-feature {
        flex: 1;
        padding-left: var(--spacing-4);
        position: relative;
        border-left: 2px solid var(--green-600);
    }
    
    .hero-feature2 {
        flex: 1;
        padding-left: var(--spacing-4);
        position: relative;
        border-left: 2px solid var(--blue-800);
    }
    
    .hero-feature-content {
        padding: var(--spacing-4) var(--spacing-2);
    }
    
    .hero-feature p {
        margin: 0;
        font-size: var(--font-size-base);
        font-weight: 600;
        color: var(--green-700);
        line-height: 1.4;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
    
    /* ===== PAGE HERO ===== */
    .page-hero {
        padding: 100px 0 var(--spacing-12);
        min-height: 80px;
    }
    
    .page-hero-content h1 {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-3);
    }
    
    .page-hero-content .lead {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .fallgard-header h2 {
        font-size: 2rem;
        margin-bottom: var(--spacing-4);
    }
    
    .fallgard-header p {
        font-size: 1rem;
        margin-bottom: var(--spacing-12);
    }
    
    /* ===== PARTNERS SECTION ===== */
    .partners {
        padding: var(--spacing-10) 0;
        background: var(--bg-surface);
    }
    
    .partners-grid {
        overflow: hidden;
        padding: var(--spacing-4) 0;
    }
    
    .partners-grid marquee {
        display: flex;
        align-items: center;
        white-space: nowrap;
    }
    
    .partners-grid .marquee-content {
        display: flex;
        align-items: center;
        gap: var(--spacing-4);
    }
    
    .partners-grid img {
        height: 60px !important;
        width: auto;
        margin-right: var(--spacing-4) !important;
        object-fit: contain;
        transition: var(--transition-base);
    }
    
    /* ===== FEATURES SECTION ===== */
    .features {
        padding: var(--spacing-16) 0;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .feature-card {
        padding: var(--spacing-6);
        text-align: center;
    }
    
    .feature-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto var(--spacing-4);
        font-size: var(--font-size-xl);
    }
    
    .feature-card h4 {
        font-size: 1.2rem;
        margin-bottom: var(--spacing-3);
    }
    
    .feature-card p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .features-content {
        padding: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }
    
    .features-content h3 {
        font-size: 1.4rem;
        margin-bottom: var(--spacing-4);
    }
    
    .features-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    /* ===== ABOUT SECTION ===== */
    .about {
        padding: var(--spacing-12) 0;
    }

    .col-content ul li{
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-2);
        color: var(--text-secondary);
        list-style-type: disc;
        padding-left: var(--spacing-4);
    }
    
    .about-section {
        flex-direction: column;
        gap: var(--spacing-6);
    }
    
    .about-img,
    .ashish-img {
        max-width: 100%;
        height: auto;
        margin: 0 auto var(--spacing-4);
        display: block;
    }
    
    .about-text {
        padding: var(--spacing-4);
        /* text-align: center; */
    }
    
    .about-title h2 {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-3);
    }
    
    .about-title h4 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-3);
    }
    .about-title p {
        text-align: left;
    }
    
    .about-content {
        font-size: 0.9rem;
        line-height: 1.6;
        text-align: left;
    }
    
    .kartik-veena-section {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        padding: var(--spacing-6) 0;
    }
    
    .veena,
    .kartik {
        margin: 0 var(--spacing-3);
        padding: var(--spacing-4);
    }
    
    .veena-section {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-4);
    }
    
    .veena-img {
        width: 150px;
        height: 180px;
        margin: 0 auto var(--spacing-4);
    }
    
    .bvst-section {
        flex-direction: column;
        /* text-align: center; */
        gap: var(--spacing-4);
    }
    
    .bvst-img {
        max-width: 100%;
        height: auto;
        margin: 0 auto var(--spacing-4);
    }
    
    .bvst-text {
        padding: var(--spacing-4);
    }
    
    .bvst-text h2 {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-3);
    }
    
    .bvst-text p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    /* ===== CHALLENGES SECTION ===== */
    .challenges {
        padding: var(--spacing-16) 0;
        background-color: var(--bg-main);
    }
    
    .challenges-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .challenge-card {
        padding: var(--spacing-6);
        text-align: center;
    }
    
    .challenge-number {
        font-size: 2rem;
        margin-bottom: var(--spacing-3);
    }
    
    .challenge-card h3 {
        font-size: 1.3rem;
        margin-bottom: var(--spacing-3);
    }
    
    .challenge-card p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .episode {
        flex-direction: column;
        padding: var(--spacing-6);
        /* margin-bottom: var(--spacing-16); */
        /* gap: var(--spacing-10); */
        text-align: center;
        background-color: var(--bg-inverse);
    }
    
    .episode-header {
        margin-bottom: var(--spacing-8);
        padding: 0 var(--spacing-3);
    }
    
    .episode-number {
        font-size: 2.5rem;
        margin-bottom: var(--spacing-4);
        text-align: center;
    }
    
    .episode-content {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .episode-content h3 {
        font-size: 1.4rem;
        margin-bottom: var(--spacing-3);
    }
    
    .episode-content p {
        font-size: 0.9rem;
        line-height: 1.6;
        text-align: left;
    }
    
    .episode-img1,
    .episode-img2,
    .episode-img3 {
        width: 100%;
        height: auto;
        max-width: 300px;
        margin: var(--spacing-4) auto 0;
        order: -1;
    }
    
    /* ===== PLATFORM SECTION ===== */
    .platform {
        padding: var(--spacing-16) 0;
    }
    
    .platform-content {
        flex-direction: column;
        gap: var(--spacing-6);
        text-align: center;
        padding: var(--spacing-6);
        align-items: center;
    }
    
    .platform-header {
        font-size: 2rem;
        margin-bottom: var(--spacing-8);
        text-align: center;
    }
    
    .platform-image {
        width: 100%;
        height: auto;
        max-width: 300px;
        margin: 0 auto var(--spacing-4);
        order: 1;
    }
    
    .platform-text {
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
        order: 2;
    }
    
    .platform-text h2 {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-3);
    }
    
    .platform-text p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .platform-img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-lg);
    }
    
    /* ===== CHOOSE US SECTION ===== */
    .choose {
        padding: var(--spacing-16) 0;
    }
    
    .choose-content {
        flex-direction: column;
        gap: var(--spacing-8);
        text-align: center;
    }
    
    .choose h2 {
        font-size: 1.8rem;
        margin-bottom: var(--spacing-4);
    }
    
    .choose p {
        font-size: 0.9rem;
        line-height: 1.6;
        max-width: 100%;
        text-align: start;
        margin-bottom: var(--spacing-10);
        margin-left: var(--spacing-4);
    }
    
    .choose-features {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4);
        margin-top: var(--spacing-6);
    }
    
    .choose-feature {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-3);
    }
    
    .choose-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto var(--spacing-2);
    }

    .choose-icon i{
            font-size: 1rem;
    }
    
    .choose-image {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-4);
        order: -1;
    }
    
    .choose-images {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--spacing-4);
        flex-wrap: wrap;
    }
    
    .choose-image1,
    .choose-image2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-10);
        flex: 1;
        min-width: 140px;
    }
    
    .device-img1,
    .device-img2 {
        max-width: 150px;
        height: auto;
        margin: 0 auto;
    }
    
    .device-img2 {
        margin-left: 0;
    }
    
    /* ===== TEAM SECTION ===== */
    .team {
        padding: var(--spacing-16) 0;
    }
    
    .team-grid1,
    .team-grid2,
    .team-grid3 {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-12);
        margin-bottom: var(--spacing-8);
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .team-member {
        width: 280px;
        height: auto;
        margin: 0 auto;
    }
    
    .team-image-container,
    .team-imageb {
        height: 300px;
    }

    .team-imageb img {
        width: 100%;
        height: 100%;
    }
    
    .team-info {
        height: auto;
        padding: var(--spacing-4);
    }
    
    .team-member h3 {
        font-size: 1.2rem;
        margin-bottom: var(--spacing-2);
    }
    
    .team-member p {
        font-size: 0.9rem;
    }
    
    /* ===== TESTIMONIALS SECTION ===== */
    .testimonials {
        padding: var(--spacing-24) 0;
    }
    
    .testimonial-inner {
        flex-direction: column;
        padding: var(--spacing-6);
        text-align: center;
    }
    
    .testimonial-author-col {
        flex: none;
        padding: 0;
        margin-bottom: var(--spacing-4);
        border-bottom: 1px solid var(--border);
        padding-bottom: var(--spacing-4);
    }
    
    .testimonial-image-container {
        width: 100px;
        height: 100px;
        margin: 0 auto var(--spacing-3);
    }
    
    .testimonial-author-info h3 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-1);
    }
    
    .testimonial-author-info span {
        font-size: 0.8rem;
    }
    
    .testimonial-content p {
        font-size: 0.9rem;
        line-height: 1.6;
        text-align: left;
    }
    
    .testimonial-slider {
        position: relative;
        min-height: 400px;
        overflow: hidden;
    }
    
    .testimonial-card {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transition: all 0.5s ease-in-out;
        transform: translateX(30px);
        display: none;
    }
    
    .testimonial-card.active {
        opacity: 1;
        visibility: visible;
        position: relative;
        transform: translateX(0);
        display: block;
    }
    
    .testimonial-nav {
        display: flex;
        justify-content: center;
        gap: var(--spacing-2);
        margin-top: var(--spacing-4);
    }
    
    .nav-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        background: var(--border);
        cursor: pointer;
        transition: all var(--transition-base);
    }
    
    .nav-dot.active,
    .nav-dot:hover {
        background: var(--green-600);
        transform: scale(1.2);
    }
    
    .testimonial-progress-container {
        width: 100%;
        height: 3px;
        background: var(--border);
        border-radius: var(--radius);
        margin-top: var(--spacing-3);
        overflow: hidden;
    }
    
    .testimonial-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--green-600), var(--green-700));
        border-radius: var(--radius);
        width: 0;
        transition: width 0.3s ease;
    }

    /* ===== CONTACT SECTION ===== */
    .contact {
        padding: var(--spacing-16) 0;
    }

    .contact p{
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-6);
        text-align: center;
    }
    
    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }
    
    .contact-info h2 {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-4);
        text-align: center;
    }
    
    .contact-item {
        /* flex-direction: column; */
        /* text-align: center; */
        padding: var(--spacing-4);
        margin-bottom: var(--spacing-4);
        line-height: var(--spacing-12);
    }
    
    .contact-item-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-2);
        margin-bottom: var(--spacing-3);
    }
    
    .contact-item i {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    
    .contact-item h4 {
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    
    .contact-item p {
        font-size: 0.9rem;
        line-height: 1.6;
        padding-left: var(--spacing-4);
        position: relative;
    }
    
    .contact-item p {
        font-size: 0.9rem;
        line-height: 1.6;
        padding-left: var(--spacing-4);
        position: relative;
    }
    
    .contact-item p::before {
        content: '▶';
        position: absolute;
        left: 0;
        top: 0;
        color: var(--green-700);
        font-size: 0.8rem;
        font-weight: bold;
        transition: all var(--transition-base);
        margin-right: var(--spacing-2);
    }

    
    .contact-form {
        padding: var(--spacing-6);
    }
    
    .form-group {
        margin-bottom: var(--spacing-4);
    }
    
    .form-group input,
    .form-group textarea {
        padding: var(--spacing-3);
        font-size: 1rem;
        border-radius: var(--radius);
        min-height: 48px;
    }
    
    .form-group textarea {
        min-height: 120px;
    }
    
    .map-container {
        margin-top: var(--spacing-6);
        padding: var(--spacing-4);
    }
    
    .map-wrapper iframe {
        height: 250px;
        width: 100%;
    }
    
    /* ===== FOOTER ===== */
    .footer {
        padding: var(--spacing-16) 0 var(--spacing-8);
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
        text-align: center;
    }
    
    .footer-brand {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-3);
        margin-bottom: var(--spacing-4);
    }
    
    .footer-logo {
        height: 50px;
        width: auto;
    }
    
    .footer-brand-name {
        font-size: 1.5rem;
    }
    
    .footer-section {
        margin-bottom: var(--spacing-6);
    }
    
    .footer-section h4 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-3);
    }
    
    .footer-section ul li {
        margin-bottom: var(--spacing-2);
    }
    
    .footer-section ul li a {
        font-size: 0.9rem;
        display: block;
        padding: var(--spacing-2);
    }
    
    .footer-csection {
        text-align: center;
        gap: var(--spacing-3);
    }
    
    .footer-csection h4 {
        font-size: 1rem;
        margin-bottom: var(--spacing-2);
    }
    
    .footer-csection p {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    
    .social-links {
        justify-content: center;
        gap: var(--spacing-3);
        margin-top: var(--spacing-4);
    }
    
    .social-link {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .footer-bottom {
        padding: var(--spacing-4) 0;
        font-size: 0.8rem;
        text-align: center;
    }
    
    /* ===== RESEARCH PAGE ===== */
    .resume {
        padding: var(--spacing-12) 0;
    }
    
    .rm {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .resume-section,
    .member {
        padding: var(--spacing-6);
        max-width: 100%;
        overflow-wrap: break-word;
    }
    
    .resume-header h3 {
        font-size: 1.4rem;
    }
    
    .resume-item {
        padding-left: var(--spacing-3);
        padding-bottom: var(--spacing-4);
        margin-bottom: var(--spacing-4);
    }
    
    .resume-item h4 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-2);
    }
    
    .resume-item p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .research-paper {
        padding: var(--spacing-12) 0;
    }
    
    .paper {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .paper-img {
        order: -1;
    }
    
    .paper-img img {
        width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: cover;
    }
    
    .paper-section1 {
        padding: var(--spacing-6);
        margin-top: var(--spacing-6);
        max-width: 100%;
        overflow-wrap: break-word;
    }
    
    .paper-header {
        font-size: 1.4rem;
        margin-bottom: var(--spacing-4);
    }
    
    .paper-section1 h4 {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-3);
    }
    
    .paper-section1 ul li {
        font-size: 0.9rem;
        padding-left: var(--spacing-4);
        margin-bottom: var(--spacing-2);
    }
    
    .paper-btn {
        position: static;
        transform: none;
        margin-top: var(--spacing-4);
        width: 100%;
        text-align: center;
        padding: var(--spacing-3);
    }
    
    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .blog-card {
        margin-bottom: var(--spacing-4);
    }
    
    .blog-img {
        height: 200px;
    }
    
    .blog-content {
        padding: var(--spacing-4);
    }
    
    .blog-content h3 {
        font-size: 1.2rem;
        margin-bottom: var(--spacing-3);
    }
    
    .blog-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .blog-link {
        font-size: 0.9rem;
        padding: var(--spacing-2) var(--spacing-4);
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    .research-card {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    .research-img,
    .research-img2 {
        width: 100%;
        height: auto;
        /* max-height: 250px; */
    }
    
    .research-img2 {
        height: 100%;
    }
    
    /* ===== CTA SECTION ===== */
    .cta {
        padding: var(--spacing-12) 0;
    }
    
    .cta-content {
        padding: 0 var(--spacing-4);
    }
    
    .cta-content h2 {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-6);
    }
    
    .cta-content p {
        font-size: 1rem;
        text-align: center;
        line-height: 1.6;
        margin-bottom: var(--spacing-10);
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: var(--spacing-4);
    }
    
    /* ===== MISSION SECTION ===== */
    .mission {
        padding: var(--spacing-16) 0;
    }
    
    .mission-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
        text-align: center;
    }

    .mission-content p{
        text-align: start;
    }
    
    .mission-img {
        width: 100%;
        height: auto;
        max-width: 400px;
        margin: 0 auto;
        order: -1;
    }
    
    /* ===== PURPOSE SECTION ===== */
    .purpose {
        padding: var(--spacing-16) 0;
    }
    
    .purpose-content {
        flex-direction: column;
        gap: var(--spacing-6);
        text-align: center;
        padding: 0;
    }

    .purpose-header {
        font-size: 1.6rem;
        margin-bottom: var(--spacing-4);
    }
    
    .purpose-text {
        padding: var(--spacing-4);
    }
    
    .purpose-text h3 {
        font-size: 1.4rem;
        margin-bottom: var(--spacing-3);
    }

    .purpose-text p {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-4);
        text-align: start;
    }
    
    .purpose-img {
        width: 100%;
        height: auto;
        max-width: 300px;
        margin: 0 auto;
        order: -1;
    }
    
    /* ===== EXCEPTIONAL FEATURES ===== */
    .exceptional-features {
        padding: var(--spacing-16) 0;
    }
    
    .tabs label {
        display: block;
        width: 100%;
        margin-bottom: var(--spacing-2);
        padding: var(--spacing-3);
        text-align: center;
        background: var(--bg-variant);
        border-radius: var(--radius);
    }
    
    .feature-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-4);
        text-align: center;
    }
    
    .feature-image-wrapper {
        order: -1;
    }
    
    .exceptional-image {
        width: 100%;
        height: auto;
        max-height: 250px;
        object-fit: cover;
    }
    
    .feature-text {
        padding: var(--spacing-4);
    }
    
    .feature-text h3 {
        font-size: 1.4rem;
        margin: var(--spacing-4);
        color: var(--text-primary);
        font-weight: 600;
    }
    
    .feature-text p {
        font-size: 0.95rem;
        line-height: 1.7;
        color: var(--text-secondary);
        margin-bottom: var(--spacing-3);
        text-align: start;
    }
    
    /* ===== IMPACT SECTION ===== */
    .impact {
        padding: var(--spacing-20) 0;
        background: white;
    }
    
    .impact-content {
        display: flex;
        gap: var(--spacing-16);
        align-items: center;
        flex-direction: column;
    }
    
    .impact-images {
        position: relative;
        flex: 1;
        display: flex;
        gap: var(--spacing-6);
        order: -1;
        margin-bottom: var(--spacing-6);
        padding: 0;
        max-width: 100%;
        overflow: hidden;
    }
    
    .impact-image-main {
        flex: 2;
    }
    
    .impact-image-secondary {
        position: absolute;
        bottom: -20px;
        left: -60px;
        max-width: 50%;
        border: var(--radius-lg) solid white;
        border-radius: var(--radius-md);
        z-index: 2;
    }
    
    .impact-img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-md);
    }
    
    .impact-img-small {
        width: 100%;
        height: auto;
        border-radius: var(--radius-sm);
        display: block;
        opacity: 1;
        visibility: visible;
    }
    
    .impact-text {
        flex: 1;
        padding: var(--spacing-4);
    }
    
    .impact-text h2 {
        font-size: var(--font-size-3xl);
        margin-bottom: var(--spacing-6);
        color: var(--green);
    }
    
    .impact-text p {
        margin-bottom: var(--spacing-4);
        color: var(--text-secondary);
        font-size: var(--font-size-base);
        line-height: 1.7;
    }
    
    /* ===== PARTNERS SECTION - GLOBAL MOBILE STYLES ===== */
    @media (max-width: 768px) {
        .partners {
            padding: var(--spacing-10) 0;
            background: var(--bg-surface);
        }
        
        .partners-grid {
            overflow: hidden;
            padding: var(--spacing-4) 0;
        }
        
        .partners-grid marquee {
            display: flex;
            align-items: center;
            white-space: nowrap;
            background: transparent;
            border: none;
        }
        
        .partners-grid .marquee-content {
            display: flex;
            align-items: center;
            gap: var(--spacing-6);
        }
        
        .partners-grid img {
            height: 80px !important;
            width: auto;
            margin-right: var(--spacing-6) !important;
            object-fit: contain;
            transition: var(--transition-base);
        }
    }

    /* ===== MEDIUM DEVICES (481px - 768px) ===== */
    @media (min-width: 481px) and (max-width: 768px) {
        .hero-img {
            max-width: 500px; /* Larger for medium screens */
        }
        
        .hero-title {
            font-size: 2rem;
        }
        
        .hero-description {
            font-size: 1.2rem;
        }
        
        .hero-buttons {
            flex-direction: row;
            justify-content: center;
        }
        
        .partners-grid img {
            height: 90px !important;
            margin-right: var(--spacing-8) !important;
        }
    }

    /* ===== TABLET AND LARGER SCREENS (769px and up) ===== */
    @media (min-width: 769px) and (max-width: 992px) {
        .impact-content {
            flex-direction: column;
        }
        
        .impact-images {
            width: 100%;
            margin-bottom: var(--spacing-8);
        }
        
        .impact-image-secondary {
            bottom: -30px;
            left: 0;
        }
    }

    /* ===== VERY SMALL SCREENS (320px and below) ===== */
    @media (max-width: 320px) {
        .choose-features {
            grid-template-columns: 1fr;
            gap: var(--spacing-3);
        }
        
        .choose-feature {
            padding: var(--spacing-3);
        }
        
        .choose-icon {
            width: 60px;
            height: 60px;
        }

        .choose-icon i{
            font-size: 2.5rem;
        }
        
        .impact-image-secondary {
            position: static;
            max-width: 90%;
            margin: var(--spacing-3) auto 0;
        }
        
        .impact-images {
            flex-direction: column;
            gap: var(--spacing-3);
        }
    }

    /* ===== ADDITIONAL PLATFORM FIXES ===== */
    
    /* Override any inline styles that might interfere with centering */
    .platform-text {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center !important;
    }
    
    .platform-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 100px !important;
    }
    
    /* ===== IMPACT IMAGES ADDITIONAL FIXES ===== */
    
    /* Ensure impact-img-small is always visible */
    .impact-img-small {
        width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-sm) !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Additional tablet adjustments */
    @media (min-width: 481px) and (max-width: 768px) {
        .impact-image-secondary {
            bottom: -25px;
            left: -40px;
            max-width: 45%;
        }
        
        .platform-text {
            max-width: 500px;
        }
    }
    
    /* Additional mobile adjustments */
    @media (max-width: 480px) {
        .impact-image-secondary {
            position: static;
            max-width: 80%;
            margin: var(--spacing-4) auto 0;
            border: 3px solid white;
        }
        
        .impact-images {
            flex-direction: column;
            gap: var(--spacing-4);
            padding: 0;
        }
        
        .platform-text {
            max-width: 100%;
            padding: 0 var(--spacing-2);
        }
    }

    /* ===== RESEARCH PAGE LIST FIXES ===== */
    .affiliation-list {
        list-style-type: none !important;
        padding: 0;
        margin: 0;
    }
    
    .affiliation-list li {
        font-size: 0.9rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-2);
        padding: var(--spacing-2) 0;
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-2);
    }
    
    .affiliation-list li i {
        color: var(--green-600);
        font-size: 0.8rem;
        margin-top: 2px;
        flex-shrink: 0;
    }
    
    .affiliation-list li br {
        display: none;
    }
    
    .affiliation-group {
        margin-bottom: var(--spacing-6);
    }
    
    .affiliation-title {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-3);
        color: var(--text-primary);
        font-weight: 600;
    }
    
    .affiliation-details {
        margin-bottom: var(--spacing-4);
    }
    
    .affiliation-details p {
        font-size: 0.85rem;
        color: var(--text-secondary);
        line-height: 1.5;
    }
}

/* ================================================
   KNOW US PAGE STYLES
   ================================================ */    /* ===== KNOW US PAGE RESPONSIVE STYLES ===== */
    
    /* Know Us main section */
    .knowus {
        margin: var(--spacing-4) var(--spacing-2) !important;
    }
    
    /* About sections */
    .about {
        padding: var(--spacing-3) var(--spacing-2) !important;
        margin-bottom: var(--spacing-6) !important;
    }
    
    .about-section {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-3) !important;
        text-align: center !important;
    }
    
    /* About images */
    .about-img {
        max-width: 280px !important;
        width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-md) !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    .ashish-img {
        max-width: 280px !important;
        width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-md) !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    /* About text content */
    .about-text {
        padding: var(--spacing-2) !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .about-title h2 {
        font-size: 1.4rem !important;
        margin-bottom: var(--spacing-2) !important;
    }
    
    .about-title h4 {
        font-size: 1rem !important;
        margin-bottom: var(--spacing-3) !important;
    }
    
    .about-content {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }
    
    .about-content ul {
        margin-bottom: var(--spacing-3) !important;
    }
    
    .about-content li {
        margin-bottom: var(--spacing-2) !important;
        text-align: left !important;
    }
    
    .about-content p {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: var(--spacing-3) !important;
        text-align: left !important;
    }
    
    /* Kartik and Veena section */
    .kartik-veena-section {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--spacing-4) !important;
        padding: var(--spacing-4) 0 !important;
    }
    
    .veena, .kartik {
        margin-left: var(--spacing-2) !important;
        margin-right: var(--spacing-2) !important;
        padding: var(--spacing-3) !important;
        width: 100% !important;
    }
    
    .veena-section {
        display: flex !important;
        flex-direction: column !important;
        /* align-items: center !important; */
        gap: var(--spacing-3) !important;
        text-align: center !important;
    }
    
    .veena-img {
        width: 200px !important;
        height: 250px !important;
        max-width: 100% !important;
        border-radius: var(--radius-md) !important;
        object-fit: cover !important;
        margin-bottom: var(--spacing-2) !important;
    }
    
    /* Column content */
    .col-content {
        padding: 0 var(--spacing-2) !important;
    }
    
    .col-content ul {
        margin-bottom: var(--spacing-3) !important;
    }
    
    .col-content li {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: var(--spacing-2) !important;
        text-align: left !important;
    }
    
    /* Research button */
    .research-btn {
        padding: var(--spacing-2) var(--spacing-4) !important;
        font-size: 0.9rem !important;
        margin-top: var(--spacing-3) !important;
        display: inline-block !important;
        text-align: center !important;
    }

/* ===== TABLET RESPONSIVE STYLES (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    /* Know Us page tablet styles */
    .knowus {
        margin: var(--spacing-6) var(--spacing-4) !important;
    }
    
    .about {
        padding: var(--spacing-4) var(--spacing-3) !important;
    }
    
    .about-section {
        flex-direction: row !important;
        /* align-items: flex-start !important; */
        text-align: left !important;
        gap: var(--spacing-4) !important;
    }
    
    .about-img, .ashish-img {
        max-width: 300px !important;
        flex-shrink: 0 !important;
    }
    
    .about-text {
        flex: 1 !important;
        padding: var(--spacing-3) !important;
    }
    
    .about-title h2 {
        font-size: 1.6rem !important;
    }
    
    .about-title h4 {
        font-size: 1.1rem !important;
    }
    
    .about-content, .about-content p {
        font-size: 0.95rem !important;
        text-align: left !important;
    }
    
    /* Kartik and Veena section - keep them side by side on tablet */
    .kartik-veena-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--spacing-4) !important;
        padding: var(--spacing-6) 0 !important;
    }
    
    .veena, .kartik {
        margin-left: var(--spacing-4) !important;
        margin-right: var(--spacing-4) !important;
    }
    
    .veena-section {
        flex-direction: column !important;
        /* align-items: center !important; */
        /* text-align: center !important; */
    }
    
    .veena-img {
        width: 180px !important;
        height: 220px !important;
    }
}

/* ===== DESKTOP RESPONSIVE STYLES (769px+) ===== */
@media (min-width: 769px) {
    /* Know Us page desktop styles - minor adjustments */
    .knowus {
        margin: var(--spacing-8) var(--spacing-6) !important;
    }
    
    .about {
        padding: var(--spacing-4) var(--spacing-4) !important;
    }
    
    .about-section {
        flex-direction: row !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: var(--spacing-4) !important;
    }
    
    .about-img, .ashish-img {
        max-width: 400px !important;
        flex-shrink: 0 !important;
    }
    
    .about-text {
        flex: 1 !important;
        padding: var(--spacing-4) !important;
    }
    
    /* Kartik and Veena section - restore original grid layout */
    .kartik-veena-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--spacing-6) !important;
        padding: var(--spacing-8) 0 !important;
    }
    
    .veena, .kartik {
        margin-left: var(--spacing-10) !important;
        margin-right: var(--spacing-10) !important;
    }
    
    .veena-section {
        flex-direction: row !important;
        /* align-items: flex-start !important; */
        text-align: left !important;
    }
    
    .veena-img {
        width: 200px !important;
        height: 250px !important;
    }
}