/* ==========================================================================
   OMKAR COMPUTER INSTITUTE - RESPONSIVE STYLESHEET
   ========================================================================== */

/* ==========================================================================
   0. BIG DESKTOPS & ULTRA-WIDE MONITORS (Min width: 1440px)
   ========================================================================== */
@media screen and (min-width: 1440px) {
    /* Expand the layout bounds for comfortable breathing room */
    .container {
        max-width: 1360px;
        margin: 0 auto;
        padding: 0 24px;
    }

    /* Scaling the Secure Portal Card to look structural and premium */
    .secure-portal-card {
        max-width: 1360px;
        padding: 45px 60px;
        margin: 60px auto;
        gap: 18px;
    }

    .secure-portal-card h3 {
        font-size: 26px;
    }

    .secure-portal-card p {
        font-size: 16.5px;
        max-width: 850px; /* Expands line lengths for large viewports */
    }

    /* Scaling typography grids for high-res visibility */
    .hero h1 {
        font-size: 48px;
        line-height: 1.2;
    }

    .hero p {
        font-size: 20px;
    }

    /* Give components room to breathe */
    .features-grid-wrapper {
        gap: 30px;
    }

    .about-container {
        gap: 60px;
    }
}

/* ==========================================================================
   1. LAPTOPS & SMALL DESKTOPS (Max width: 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 16px;
    }

    .navbar {
        padding: 12px 0;
    }

    .logo-title-row h2 {
        font-size: 1.8rem;
    }

    .nav-logo-img {
        height: 64px;
    }

    .brand-subtitle {
        font-size: 16px;
        padding-left: 64px;
    }

    .about-container {
        gap: 30px;
    }

    .about-video-wrapper {
        height: 380px;
    }
}

/* ==========================================================================
   2. TABLETS & IPADS (Max width: 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* Main Layout Framework */
    .main-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding-bottom: 15px;
    }

    .navbar {
        flex-direction: column;
        gap: 16px;
    }

    /* Stack Navigation links vertically if menu icon isn't utilized */
    .nav-links {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    /* Hero Responsive Adaptations */
    .hero {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        font-size: 16px;
    }

    .hero-buttons-group {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 20px auto 0 auto;
    }

    .btn-cta, 
    .hero-btn-primary, 
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
    }

    /* About Section Layout Grid Flattening */
    .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-video-wrapper {
        height: 340px;
        grid-row: 1; /* Pushes video above description content */
    }

    /* Component Grid Structural Adjustments */
    .features-grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
    }

    .contact-container {
        flex-direction: column;
    }

    .contact-info {
        min-width: 100%;
    }
}

/* ==========================================================================
   3. SMARTPHONES & MOBILE DEVICES (Max width: 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
    /* Header & Branding Compact Layouts */
    .logo-title-row h2 {
        font-size: 1.4rem;
    }

    .nav-logo-img {
        height: 50px;
    }

    .brand-subtitle {
        font-size: 13px;
        padding-left: 0;
        text-align: center;
        margin-top: 8px;
    }

    .estd-pill {
        margin-left: 0;
        margin-top: 4px;
    }

    .header-meta-row {
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        text-align: center;
    }

    .portal-btn,
    .professional-portal-btn,
    .btn-login {
        width: 100%;
    }

    /* Hero Text Corrections */
    .hero h1 {
        font-size: 26px;
    }

    /* Highlight Section Frameworks */
    .highlight-metrics-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .about-section {
        padding: 40px 16px;
    }

    /* Centered Secure Portal Card Scaling */
    .secure-portal-card {
        padding: 24px 16px;
        margin: 24px auto;
        gap: 10px;
    }

    .secure-portal-card h3 {
        font-size: 18px;
    }

    .secure-portal-card p {
        font-size: 13.5px;
    }

    /* Hide or minimize floating elements on highly constrained widths */
    .social-popup-sidebar {
        gap: 4px;
    }
    
    .social-item {
        padding: 10px;
        width: 38px;
    }
    
    .social-item:hover {
        width: 38px; /* Restricts expansion on mobile screens to save tap estate */
    }

    .social-text {
        display: none !important;
    }
}