/* 
 * responsive.css
 * Media queries for mobile/tablet responsive adaptations.
 * Info Pluto Media Works Pvt. Ltd.
 */

/* Medium Devices (Tablets, Laptops below 1024px) */
@media (max-width: 1024px) {
    :root {
        --section-spacing: 80px;
    }
    
    .container {
        padding: 0 30px;
    }
    
    /* Hero */
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.5rem;
    }
    
    /* Verticals Section */
    .verticals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* What We Do Section */
    .whatwedo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Why Choose Us Section */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .why-grid .why-card:nth-child(5),
    .why-grid .why-card:nth-child(6) {
        grid-column: span 1;
    }
    
    /* Footer Layout */
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    /* About */
    .vision-mission-grid {
        gap: 25px;
    }
}

/* Small Devices (Tablets, large phones below 768px) */
@media (max-width: 768px) {
    :root {
        --section-spacing: 70px;
    }
    
    /* Floating mobile navbar override */
    .navbar {
        top: 16px !important;
        width: calc(100% - 32px) !important;
        height: 70px !important;
        border-radius: 35px !important;
    }

    .navbar.scrolled {
        top: 10px !important;
        height: 60px !important;
        border-radius: 30px !important;
    }

    /* Navigation burger drawer */
    .nav-toggle {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 96px;
        left: 16px;
        width: calc(100% - 32px);
        height: auto;
        max-height: calc(100vh - 120px);
        background-color: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 24px;
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
        gap: 30px;
        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    }
    
    .navbar.scrolled .nav-menu {
        top: 80px;
    }
    
    .nav-menu.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 25px;
    }
    
    .nav-link {
        font-size: 1.2rem;
        display: block;
        width: 100%;
    }
    
    .nav-cta-container {
        width: 100%;
    }
    
    .nav-cta {
        width: 100%;
    }
    
    /* Burger Active Animation */
    .nav-toggle.open .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    
    .nav-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.open .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    
    /* Hero Grid collapse */
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    
    .hero-content {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .hero-buttons {
        justify-content: center;
    }
    
    .hero-visual {
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Who We Are collapse */
    .whoweare-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .whoweare-visual {
        aspect-ratio: 16/10;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Verticals collapse */
    .verticals-grid {
        grid-template-columns: 1fr;
    }
    
    .verticals-grid .vertical-card:nth-child(5) {
        grid-column: span 1;
    }
    
    /* What We Do collapse */
    .whatwedo-grid {
        grid-template-columns: 1fr;
    }
    
    /* Flagship collapse */
    .flagship-card {
        padding: 40px;
    }
    
    .flagship-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Why Choose Us collapse */
    .why-grid {
        grid-template-columns: 1fr;
    }
    
    /* CTA layout */
    .cta-wrapper {
        padding: 60px 30px;
    }
    
    .cta-wrapper h2 {
        font-size: 2.2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* About */
    .vision-mission-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline-container {
        padding-left: 20px;
    }
    
    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .contact-form-container {
        padding: 30px;
    }
}

/* Mobile Phones below 480px */
@media (max-width: 480px) {
    :root {
        --section-spacing: 50px;
    }
    
    .container {
        padding: 0 20px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .page-hero-title {
        font-size: 2.6rem;
    }
    
    .hero-title {
        font-size: 2.4rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .flagship-content h2 {
        font-size: 2.2rem;
    }
    
    .why-counter {
        font-size: 2.6rem;
    }
    
    .form-group-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}