@font-face {
    font-family: 'Minecraft';
    /* Using the new WOFF2 file instead of the TTF */
    src: url('../Home/Fonts/Minecraft.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* ========================================= */
/* GLOBAL FIX FOR OVERFLOW                   */
/* ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

.body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
    font-family: 'Minecraft', monospace;
}

.bg-video{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    animation-play-state: running;
}

header{
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:1000;
}

.navbar {
    position: relative;
    left: 50%;
    top: 0;
    width: 97%;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    transform: translateX(-50%);
    background-color: #c6c6c6;
    border: 3px solid #000000;
    box-shadow: 
        inset 3px 3px 0px #ffffff, 
        inset -3px -3px 0px #5b5b5b,
        0 10px 30px rgba(0,0,0,0.8);
    padding: 2px 8px 8px 8px;
    display: flex;
    z-index: 999;
    
    /* Anti-aliasing tweak so pixel fonts stay crisp */
    -webkit-font-smoothing: none;
}

.logo img {
    height: 60px;
    margin-left: -20px;
    z-index: 10;
}

.nav-desktop {
    display: flex;
    justify-content: center;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
}

/* ========================================= */
/* MINECRAFT NAVBAR BUTTONS                  */
/* ========================================= */

.nav-desktop li a {
    text-decoration: none;
    color: #000000; /* Black text by default */
    font-family: 'Minecraft', monospace;
    font-size: 20px;
    font-weight: bold;
    
    /* NEW: Minecraft Button Shape & Colors */
    display: inline-block;
    background-color: #a0a0a0; /* Classic Minecraft button grey */
    padding: 8px 20px; /* Gives the button some width and height */
    border: 2px solid #000000; /* The hard black outline */
    
    /* This creates the 3D pop-out effect! */
    box-shadow: 
        inset 3px 3px 0px #ffffff,   /* White highlight on top/left */
        inset -3px -3px 0px #555555; /* Dark grey shadow on bottom/right */
        
    cursor: pointer;
    transition: background-color 0s; /* Minecraft buttons snap instantly, no smooth fade! */
}

/* THE HOVER STATE */
.nav-desktop li a:hover {
    background-color: #3ca340; /* Authentic Minecraft Green */
    color: #ffffff; /* Text turns white */

    /* We have to update the 3D bevels to match the green background */
    box-shadow:
        inset 3px 3px 0px #5cbf60,   /* Lighter green highlight */
        inset -3px -3px 0px #276b29; /* Darker green shadow */

    /* Adds the classic hard block shadow behind the white text */
    text-shadow: 2px 2px 0px #000000;
}

/* ========================================= */
/* MINECRAFT MENU BUTTON                     */
/* ========================================= */

.menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #a0a0a0;
    border: 3px solid #000000;
    box-shadow:
        inset 3px 3px 0px #ffffff,
        inset -3px -3px 0px #555555;
    cursor: pointer;
    transition: all 0.1s ease;
    padding: 0;
    margin-left: 20px;
}

.menu-button:hover {
    background-color: #3ca340;
    box-shadow:
        inset 3px 3px 0px #5cbf60,
        inset -3px -3px 0px #276b29;
}

.menu-button:active {
    transform: translateY(2px);
    box-shadow:
        inset 3px 3px 0px #555555,
        inset -3px -3px 0px #ffffff;
}

.menu-icon {
    font-size: 28px;
    color: #000000;
    font-weight: bold;
    line-height: 1;
    text-shadow: 1px 1px 0px #ffffff;
}

.menu-button:hover .menu-icon {
    color: #ffffff;
    text-shadow: 2px 2px 0px #000000;
}

/* ========================================= */
/* MINECRAFT VERTICAL DROPDOWN MENU          */
/* ========================================= */

.menu-dropdown {
    position: absolute;
    top: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: #c6c6c6;
    border: 3px solid #000000;
    box-shadow:
        inset 3px 3px 0px #ffffff,
        inset -3px -3px 0px #5b5b5b,
        0 10px 30px rgba(0,0,0,0.8);
    padding: 8px;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.menu-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-dropdown-item {
    text-decoration: none;
    color: #000000;
    font-family: 'Minecraft', monospace;
    font-size: 16px;
    font-weight: bold;
    background-color: #a0a0a0;
    padding: 10px 20px;
    border: 2px solid #000000;
    box-shadow:
        inset 3px 3px 0px #ffffff,
        inset -3px -3px 0px #555555;
    cursor: pointer;
    transition: all 0.1s ease;
    white-space: nowrap;
}

.menu-dropdown-item:hover {
    background-color: #3ca340;
    color: #ffffff;
    box-shadow:
        inset 3px 3px 0px #5cbf60,
        inset -3px -3px 0px #276b29;
    text-shadow: 2px 2px 0px #000000;
    transform: translateY(-2px);
}

.menu-dropdown-item:active {
    transform: translateY(1px);
    box-shadow:
        inset 3px 3px 0px #555555,
        inset -3px -3px 0px #ffffff;
}

.hero-section {
    position: relative;
    height: 100vh;
}

.hero-box {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: 25%;
    min-height: 250px; 
    width: 800px; 
    background: transparent;
    padding: 20px; 
    display: flex;
    flex-direction: column; /* Centers items vertically when combined with justify-content */
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
    z-index: 99;
}

/* Styling the text container */
.hero-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-box h1 {
    font-size: 35px; /* Slightly larger for the main welcome */
    padding: 0;
    margin: 0; 
    font-weight: bold; /* Made bold as requested */
    color: #ffffff;
    /* Minecraft 3D Box Effect */
    text-shadow: 
        4px 4px 0px #3a3a3a,      /* Main shadow */
        -2px -2px 0px #5a5a5a,    /* Top-left highlight */
        2px -2px 0px #3a3a3a,     /* Top-right shadow */
        -2px 2px 0px #3a3a3a,     /* Bottom-left shadow */
        0px 4px 0px #2a2a2a,      /* Bottom depth */
        0px 5px 0px #1a1a1a;      /* Extra depth */
    letter-spacing: 2px;
}

.hero-box h2 {
    font-size: 30px; /* Big and bold for the Prerna name */
    margin: 15px 0 0 0; 
    padding: 0;
    font-weight: bold; /* Made bold as requested */
    color: #ffffff;
    /* Minecraft 3D Box Effect - White version */
    text-shadow: 
        4px 4px 0px #3a3a3a,      /* Main shadow */
        -2px -2px 0px #5a5a5a,    /* Top-left highlight */
        2px -2px 0px #3a3a3a,     /* Top-right shadow */
        -2px 2px 0px #3a3a3a,     /* Bottom-left shadow */
        0px 4px 0px #2a2a2a,      /* Bottom depth */
        0px 5px 0px #1a1a1a;      /* Extra depth */
    letter-spacing: 3px;
}

.hero-box h3 {
    font-size: 20px;
    margin: 15px 0 0 0; 
    padding: 0;
    font-weight: bold; /* Changed to bold for 3D effect */
    color: #ffffff;
    /* Minecraft 3D Box Effect - Smaller white version */
    text-shadow: 
        3px 3px 0px #3a3a3a,      /* Main shadow */
        -1px -1px 0px #5a5a5a,    /* Top-left highlight */
        1px -1px 0px #3a3a3a,     /* Top-right shadow */
        -1px 1px 0px #3a3a3a,     /* Bottom-left shadow */
        0px 3px 0px #2a2a2a,      /* Bottom depth */
        0px 4px 0px #1a1a1a;      /* Extra depth */
    letter-spacing: 2px;
}

.mc-cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ========================================= */
/* INFO SECTION STYLES                       */
/* ========================================= */

.info-section {
    position: relative;
    background-color: #ffffff; /* Light clean background from your reference */
    padding: 80px 10%; /* Adds breathing room around the edges */
}

.info-content {
    display: flex;
    flex-direction: row; /* Puts items side-by-side */
    align-items: center; /* Centers them vertically */
    justify-content: space-between;
    gap: 50px; /* Space between text and image */
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff;
}

.info-text {
    flex: 1; /* Takes up 50% of the space */
    text-align: left; /* Aligns text exactly like your photo */
}

.info-text h2 {
    font-family: 'Minecraft'; /* Or keep 'Minecraft' if you prefer */
    font-size: 38px;
    font-weight: bold;
    color: #111;
    margin: 0 0 15px 0;
}

.info-text p {
    font-family: 'Minecraft'; /* Clean font for the paragraph */
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 30px;
}

.info-image {
    justify-content: flex-end;
}

/* Base Section Setup */
.featuring-section {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 60px 20px;
    min-height: 50vh;
    font-family: 'Minecraft', monospace; /* retro feel */
}

.featuring-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Title Styling with Minecraft Shadow */
.featuring-title {
    text-align: center;
    color: #ffffff;
    font-size: 32px;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Classic 8-bit text shadow */
    text-shadow: 2px 2px 0 #3a3a3a, -2px -2px 0 #3a3a3a, 2px -2px 0 #3a3a3a, -2px 2px 0 #3a3a3a;
}

/* Swapped from Flexbox to CSS Grid */
.featuring-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Forces exactly 4 equal columns */
    gap: 25px;
}

/* The "Modern Minecraft" Card */
.mc-card {
    /* Removed the flex property. Grid handles the width now. */
    width: 100%; 
    box-sizing: border-box; /* Ensures padding doesn't break the grid math */
    
    background-color: rgba(139, 139, 139, 0.4); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    
    border: 3px solid #1a1a1a; 
    box-shadow: 
        inset 4px 4px 0px rgba(255, 255, 255, 0.6), 
        inset -4px -4px 0px rgba(55, 55, 55, 0.8);  
        
    padding: 25px 20px;
    color: #ffffff;
    text-align: left;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

/* Bonus: Mobile Responsiveness! 
  You don't want 4 squished columns on a phone screen. 
*/
@media (max-width: 1024px) {
    .featuring-grid {
        grid-template-columns: repeat(2, 1fr); /* Makes it a 2x2 grid on tablets/smaller laptops */
    }
}

@media (max-width: 600px) {
    .featuring-grid {
        grid-template-columns: 1fr; /* Stacks them vertically on mobile phones */
    }
}

/* Text inside the cards */
.mc-card h3 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 2px 2px 0px #222;
}

.mc-card p {
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    text-shadow: 1px 1px 0px #222;
}

/* The Hover State: "Pressing" the Button */
.mc-card:hover {
    background-color: rgba(139, 139, 139, 0.6); /* Slightly more opaque on hover */
    transform: scale(0.98) translateY(2px); /* Physically presses down slightly */
    /* Invert the shadows to look pressed in */
    box-shadow: 
        inset 4px 4px 0px rgba(55, 55, 55, 0.8), 
        inset -4px -4px 0px rgba(255, 255, 255, 0.2); 
}

/* Base Section Setup */
/* Container & Title Setup */
.achievements-section {
    position: relative;
    background-color: #1a1a1a; 
    padding: 80px 0; /* Removed side padding so the loop goes edge-to-edge */
    font-family: 'Minecraft', monospace; 
}

.achievements-title {
    text-align: center;
    color: #ffffff;
    font-size: 36px;
    margin-bottom: 60px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
}

/* --- THE INFINITE MARQUEE --- */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0; /* Gives room for the cards to pop up on hover */
    /* Fades the left and right edges smoothly */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 25px; /* Space between each card */
    /* 35 seconds for a full loop. Lower the number to make it faster */
    animation: scrollAchievements 35s linear infinite; 
}

/* Pause the scrolling when hovering over the track */
.marquee-track:hover {
    animation-play-state: paused;
}

/* The math to make it loop seamlessly (Translates left by 50% + half the gap) */
@keyframes scrollAchievements {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12.5px)); } 
}

/* --- THE GAMER CARDS --- */
.achievement-card {
    width: 260px; /* Fixed width so they stay uniform in the track */
    border: 3px solid #000000; 
    background-color: #2c2c2c; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.4); 
    transition: all 0.3s ease; 
    cursor: pointer;
    flex-shrink: 0; /* Prevents flexbox from squishing the cards */
}

.achievement-inner {
    padding: 25px 15px;
    border: 3px solid #5d5d5d; 
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}

.achievement-icon {
    width: 200px;
    height: 150px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000; 
    border: 2px solid #5d5d5d;
}

.achievement-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
}

.achievement-card h3 {
    font-size: 16px;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 12px;
    text-shadow: 1px 1px 0px #000;
}

.achievement-card p {
    font-size: 14px;
    color: #aaaaaa; 
    margin: 0;
    line-height: 1.4;
    text-shadow: 1px 1px 0px #000;
}

/* --- THE UNIQUE GLOW EFFECTS --- */
.achievement-card:hover {
    transform: translateY(-8px) scale(1.02); 
}

.achievement-limca:hover {
    box-shadow: 0 10px 25px rgba(255, 215, 0, 0.6); 
    border-color: #ffd700;
}

.achievement-paralympic:hover {
    box-shadow: 0 10px 25px rgba(0, 191, 255, 0.6);
    border-color: #00bfff;
}

.achievement-contributor:hover {
    box-shadow: 0 10px 25px rgba(50, 205, 50, 0.6);
    border-color: #32cd32;
}

.achievement-innovation:hover {
    box-shadow: 0 10px 25px rgba(255, 69, 0, 0.6);
    border-color: #ff4500;
}

.achievement-unesco:hover {
    box-shadow: 0 10px 25px rgba(230, 230, 250, 0.6);
    border-color: #e6e6fa;
}

/* Base Footer Setup */
.prerna-footer {
    background-color: #000000; /* Deep black to match the reference */
    padding: 60px 20px 0 20px;
    font-family: 'Courier New', Courier, monospace;
    color: #ffffff;
    border-top: 4px solid #333333;
    font-family: 'Minecraft', monospace;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* 2-Column Layout */
.footer-split {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}

.footer-contact, .footer-recognized {
    flex: 1;
}

/* Adds the vertical divider line visible in the screenshot */
.footer-recognized {
    border-left: 1px solid #444444; 
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-heading {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 25px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0px #333;
}

/* Contact Blocks Formatting */
.contact-block {
    margin-bottom: 20px;
}

.contact-label {
    font-weight: bold;
    font-size: 14px;
    color: #cccccc;
    display: block;
    margin-bottom: 5px;
}

.contact-block p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #dddddd;
}

/* Functional Links (Phone & Email) */
.action-link {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.action-link:hover {
    color: #ffff55; /* Minecraft Yellow */
    border-bottom: 1px solid #ffff55;
    text-shadow: 0px 0px 8px rgba(255, 255, 85, 0.4);
}

/* Single Image Handling */
.recognized-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 10px;
}

/* Social Buttons (3D Block Style) */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.mc-social {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #2c2c2c;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #000;
    box-shadow: 
        inset 2px 2px 0px #555, 
        inset -2px -2px 0px #111;
    transition: all 0.1s ease;
}

.mc-social i {
    font-size: 18px;
}

.mc-social:hover {
    background-color: #3c3c3c;
    transform: translateY(2px);
    box-shadow: 
        inset 2px 2px 0px #111, 
        inset -2px -2px 0px #555;
    color: #ffd700;
}

/* Bottom Bar */
.footer-bottom-bar {
    text-align: center;
    border-top: 1px solid #333333;
    padding: 20px 0;
}

.footer-bottom-bar p {
    margin: 0;
    font-size: 14px;
    color: #888888;
    letter-spacing: 2px;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .footer-split {
        flex-direction: column;
        gap: 40px;
    }
    
    .footer-recognized {
        border-left: none; /* Removes line on mobile */
        border-top: 1px solid #444444; /* Moves line to the top */
        padding-left: 0;
        padding-top: 30px;
        align-items: center;
        text-align: center;
    }

    .contact-block, .footer-heading {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* ====================================================
   MOBILE RESPONSIVENESS MASTER BLOCK (UPGRADED)
   (Always keep this at the bottom of your CSS file)
   ==================================================== */

/* --- EXTRA SMALL SCREENS (Max Width: 320px) --- */
@media (max-width: 320px) {
    .navbar {
        width: 100%;
        padding: 10px 5px;
    }
    
    .logo img {
        height: 40px;
        margin-left: 0;
    }
    
    .nav-desktop {
        display: none;
    }
    
    .menu-button {
        display: flex;
        width: 40px;
        height: 40px;
    }
    
    .menu-icon {
        font-size: 24px;
    }
    
    .menu-dropdown {
        right: -5px;
        width: 180px;
    }
    
    .menu-dropdown-item {
        font-size: 12px;
        padding: 10px 12px;
    }
    
    .hero-box {
        width: 95%;
        top: 20%;
    }
    .hero-box h1 { 
        font-size: 18px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    .hero-box h2 { 
        font-size: 16px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    .hero-box h3 { 
        font-size: 12px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    
    .info-section {
        padding: 40px 5%;
    }
    .info-text h2 { font-size: 20px; }
    .info-text p { font-size: 12px; }
    
    .featuring-section {
        padding: 40px 10px;
    }
    .featuring-title { font-size: 18px; }
    .mc-card h3 { font-size: 14px; }
    .mc-card p { font-size: 11px; }
    
    .achievements-section {
        padding: 30px 0;
    }
    .achievements-title { font-size: 18px; }
    .achievement-card { width: 180px; }
    .achievement-icon { width: 40px; height: 40px; }
    .achievement-card h3 { font-size: 11px; }
    .achievement-card p { font-size: 10px; }
    
    .prerna-footer {
        padding: 40px 10px 0 10px;
    }
    .footer-heading { font-size: 16px; }
    .contact-label { font-size: 11px; }
    .contact-block p { font-size: 11px; }
    .mc-social { 
        width: 32px; 
        height: 32px;
    }
    
    .mc-social i {
        font-size: 16px;
    }
}

/* --- SMALL SCREENS (Max Width: 480px) --- */
@media (max-width: 480px) {
    .navbar {
        width: 98%;
        padding: 12px 8px;
    }
    
    .logo img {
        height: 45px;
        margin-left: 0;
    }
    
    .nav-desktop {
        display: none;
    }
    
    .menu-button {
        display: flex;
        margin-left: auto;
    }
    
    .menu-dropdown {
        right: -8px;
        width: 190px;
    }
    
    .menu-dropdown-item {
        font-size: 13px;
        padding: 11px 14px;
    }
    
    .hero-box {
        width: 90%;
        top: 22%;
    }
    .hero-box h1 { 
        font-size: 20px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    .hero-box h2 { 
        font-size: 18px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    .hero-box h3 { 
        font-size: 14px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    
    .info-section {
        padding: 50px 8%;
    }
    .info-text h2 { font-size: 24px; }
    .info-text p { font-size: 13px; }
    
    .featuring-section {
        padding: 50px 15px;
    }
    .featuring-title { font-size: 22px; }
    .featuring-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .mc-card h3 { font-size: 16px; }
    .mc-card p { font-size: 12px; }
    
    .achievements-section {
        padding: 40px 0;
    }
    .achievements-title { font-size: 22px; }
    .achievement-card { width: 200px; }
    .achievement-icon { width: 50px; height: 50px; }
    .achievement-card h3 { font-size: 12px; }
    .achievement-card p { font-size: 11px; }
    
    .prerna-footer {
        padding: 50px 15px 0 15px;
    }
    .footer-heading { font-size: 18px; }
    .contact-label { font-size: 12px; }
    .contact-block p { font-size: 12px; }
}

/* --- SMARTPHONES (Max Width: 600px) --- */
@media (max-width: 600px) {
    /* Hide desktop nav on mobile, show menu button */
    .nav-desktop {
        display: none;
    }

    .menu-button {
        display: flex;
        margin-left: auto;
    }

    /* Adjust dropdown for mobile */
    .menu-dropdown {
        right: -10px;
        width: 200px;
    }

    .menu-dropdown-item {
        font-size: 14px;
        padding: 12px 15px;
    }

    /* Hero adjustments */
    .hero-box {
        width: 90%;
        top: 25%;
    }
    .hero-box h1 { 
        font-size: 22px; 
        text-shadow: 
            3px 3px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 3px 0px #2a2a2a,
            0px 4px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    .hero-box h2 { 
        font-size: 18px; 
        text-shadow: 
            3px 3px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 3px 0px #2a2a2a,
            0px 4px 0px #1a1a1a;
        letter-spacing: 2px;
    }
    .hero-box h3 { 
        font-size: 14px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }

    /* Global Adjustments: Shrink titles and reduce empty space */
    .featuring-title, .achievements-title, .info-text h2 {
        font-size: 24px; 
        margin-bottom: 30px;
        letter-spacing: 1px;
    }
    
    .featuring-section, .prerna-footer, .info-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .achievements-section {
        padding: 40px 0; 
    }

    /* Featuring Section: Stack everything into 1 single column */
    .featuring-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Achievements Section: Slightly shrink the moving cards */
    .achievement-card {
        width: 220px; 
    }
    
    .achievement-inner {
        padding: 20px 10px;
    }
    
    .achievement-icon {
        width: 60px;
        height: 60px;
    }

    .achievement-card h3 {
        font-size: 14px;
    }

    /* Footer Adjustments: Scale down text for small screens */
    .footer-heading {
        font-size: 20px;
    }
    
    .contact-label {
        font-size: 13px;
    }
    
    .contact-block p {
        font-size: 14px;
    }
    
    .recognized-img {
        max-width: 90%; 
    }
}

/* --- TABLETS & SMALLER SCREENS (Max Width: 768px) --- */
@media (max-width: 768px) {
    .navbar {
        width: 98%;
        padding: 15px 10px;
    }
    
    .logo img {
        height: 50px;
        margin-left: 0;
    }
    
    .nav-desktop {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .nav-desktop li a {
        font-size: 14px;
        padding: 6px 12px;
    }
    
    .menu-button {
        display: flex;
    }
    
    .hero-box {
        width: 85%;
        max-width: 500px;
        top: 20%;
    }
    .hero-box h1 { 
        font-size: 26px; 
        text-shadow: 
            3px 3px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 3px 0px #2a2a2a,
            0px 4px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    .hero-box h2 { 
        font-size: 22px; 
        text-shadow: 
            3px 3px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 3px 0px #2a2a2a,
            0px 4px 0px #1a1a1a;
        letter-spacing: 2px;
    }
    .hero-box h3 { 
        font-size: 16px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }
    
    .info-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .info-text {
        text-align: center;
    }
    .info-image img {
        max-width: 100%;
        height: auto;
    }
    
    .featuring-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .footer-split {
        flex-direction: column;
        gap: 30px;
    }
    
    .footer-recognized {
        border-left: none;
        border-top: 1px solid #444444;
        padding-left: 0;
        padding-top: 25px;
        align-items: center;
        text-align: center;
    }
}

/* --- TABLETS & SMALLER SCREENS (Max Width: 1024px) --- */
@media (max-width: 1024px) {
    /* Featuring Section: Switch from 4 columns to 2 columns */
    .featuring-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Info Section: Stack text and image vertically */
    .info-content {
        flex-direction: column;
        text-align: center;
        gap: 25px;
    }
    .info-text {
        text-align: center;
    }
    .info-image img {
        max-width: 100%;
        height: auto;
    }
}

/* --- TABLET PORTRAIT & LARGE PHONES (Max Width: 900px) --- */
@media (max-width: 900px) {
    /* Navbar: Stack logo and wrap links */
    .navbar {
        padding: 2px 10px;
    }
    .logo img {
        margin-left: 0;
        margin-bottom: 15px;
    }
    .nav-desktop {
        gap: 15px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-desktop li a {
        font-size: 16px;
        padding: 6px 15px;
    }

    /* Hero Section: Remove hardcoded width and scale text */
    .hero-box {
        width: 100%;
        max-width: 600px;
    }
    .hero-box h1 { 
        font-size: 28px; 
        text-shadow: 
            3px 3px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 3px 0px #2a2a2a,
            0px 4px 0px #1a1a1a;
        letter-spacing: 2px;
    }
    .hero-box h2 { 
        font-size: 24px; 
        text-shadow: 
            3px 3px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 3px 0px #2a2a2a,
            0px 4px 0px #1a1a1a;
        letter-spacing: 2px;
    }
    .hero-box h3 { 
        font-size: 18px; 
        text-shadow: 
            2px 2px 0px #3a3a3a,
            -1px -1px 0px #5a5a5a,
            1px -1px 0px #3a3a3a,
            -1px 1px 0px #3a3a3a,
            0px 2px 0px #2a2a2a,
            0px 3px 0px #1a1a1a;
        letter-spacing: 1px;
    }

    /* Footer: Stack the contact info and the recognized image vertically */
    .footer-split {
        flex-direction: column;
        gap: 40px;
    }
    
    .footer-recognized {
        border-left: none;
        border-top: 1px solid #444444;
        padding-left: 0;
        padding-top: 30px;
        align-items: center;
        text-align: center;
    }

    .contact-block, .footer-heading {
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

/* --- LARGE SCREENS (Min Width: 1200px) --- */
@media (min-width: 1200px) {
    .navbar {
        width: 95%;
    }
    
    .hero-box {
        width: 800px;
    }
    
    .featuring-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .info-content {
        max-width: 1200px;
    }
    
    .mc-social {
        width: 45px;
        height: 45px;
    }
    
    .mc-social i {
        font-size: 22px;
    }
}

/* --- EXTRA LARGE SCREENS (Min Width: 1440px) --- */
@media (min-width: 1440px) {
    .navbar {
        width: 90%;
    }
    
    .hero-box {
        width: 900px;
    }
    
    .featuring-container, .info-content, .footer-container {
        max-width: 1400px;
    }
    
    .nav-desktop {
        gap: 70px;
    }
    
    .nav-desktop li a {
        font-size: 22px;
        padding: 10px 25px;
    }
}

/* --- ULTRA WIDE SCREENS (Min Width: 1920px) --- */
@media (min-width: 1920px) {
    .navbar {
        width: 85%;
    }
    
    .hero-box {
        width: 1000px;
    }
    
    .hero-box h1 { 
        font-size: 45px; 
        text-shadow: 
            5px 5px 0px #3a3a3a,
            -2px -2px 0px #5a5a5a,
            2px -2px 0px #3a3a3a,
            -2px 2px 0px #3a3a3a,
            0px 5px 0px #2a2a2a,
            0px 6px 0px #1a1a1a;
        letter-spacing: 3px;
    }
    .hero-box h2 { 
        font-size: 40px; 
        text-shadow: 
            5px 5px 0px #3a3a3a,
            -2px -2px 0px #5a5a5a,
            2px -2px 0px #3a3a3a,
            -2px 2px 0px #3a3a3a,
            0px 5px 0px #2a2a2a,
            0px 6px 0px #1a1a1a;
        letter-spacing: 4px;
    }
    .hero-box h3 { 
        font-size: 28px; 
        text-shadow: 
            4px 4px 0px #3a3a3a,
            -2px -2px 0px #5a5a5a,
            2px -2px 0px #3a3a3a,
            -2px 2px 0px #3a3a3a,
            0px 4px 0px #2a2a2a,
            0px 5px 0px #1a1a1a;
        letter-spacing: 2px;
    }
    
    .featuring-container, .info-content, .footer-container {
        max-width: 1600px;
    }
    
    .featuring-title, .achievements-title {
        font-size: 42px;
    }
    
    .info-text h2 {
        font-size: 48px;
    }
    
    .info-text p {
        font-size: 18px;
    }
    
    .mc-card {
        padding: 35px 30px;
    }
    
    .mc-card h3 {
        font-size: 24px;
    }
    
    .mc-card p {
        font-size: 18px;
    }
}