/* Responsive.css - Responsive styles for Noohra Technology Solutions */

/* Base styles for mobile first (below 640px) */
@media (max-width: 639px) {
  /* Hero Section on mobile */
  .hero-content {
    flex-direction: column;
    text-align: center;
  }
  
  .hero-text {
    max-width: 100%;
    text-align: center;
    order: 0;
  }
  
  .hero-text h1 {
    font-size: calc(var(--font-xxl) * 1.2);
    line-height: 1.3;
  }
  
  .hero-text p {
    font-size: var(--font-base);
  }
  
  .hero-image {
    order: 1;
    margin-top: var(--spacing-lg);
  }
  
  .cta-button {
    display: inline-block;
    margin: 0 auto;
    font-size: var(--font-base);
    padding: 0.5rem 1rem;
  }
}

/* Small devices (mobiles, 640px and up) */
@media (min-width: 640px) {
  /* Typography */
  .section-title {
    font-size: var(--font-xxxl);
  }
  
  /* Hero Section */
  .hero-text h1 {
    font-size: var(--font-xxxl);
  }
  
  /* About Section */
  .features-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Footer */
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }
  
  .footer-column h4::after {
    left: 0;
    margin-left: 0;
  }
  
  .contact-item {
    justify-content: flex-start;
  }
  
  .footer-logo img {
    margin: 0;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  /* Layout */
  .container {
    padding: 0 var(--spacing-lg);
  }
  
  /* Hero Section */
  .hero-content {
    gap: var(--spacing-xxl);
  }
  
  /* Product Cards */
  .product-card {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-xl);
  }
  
  .product-card.reverse {
    flex-direction: row-reverse;
  }
  
  .product-image,
  .product-info {
    flex: 1;
  }
}

/* Large devices (desktops, 1024px and up) */
@media (min-width: 1024px) {
  /* Layout */
  .container {
    padding: 0 var(--spacing-xl);
  }
  
  /* Navigation */
  .main-nav {
    display: block;
  }
  
  .mobile-menu-btn {
    display: none;
  }
  
  /* Hero Section */
  .hero-content {
    flex-direction: row;
    text-align: left;
    gap: var(--spacing-xxl);
  }
  
  /* About Section */
  .features-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Footer */
  .footer-columns {
    grid-template-columns: repeat(4, 1fr);
  }
}