@import 'base/variables.css';
@import 'base/reset.css';
@import 'components/buttons.css';
@import 'components/navbar.css';
@import 'components/footer.css';
@import 'components/hero.css';
@import 'components/clients.css';
@import 'components/industries.css';
@import 'components/tech.css';
@import 'components/cta.css';

/* 1. Import Inter Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* 2. Configure Baseline Styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  background-color: #ffffff;
  color: #0F172A;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ==========================================
   GLOBAL DESKTOP SECTION SPACING
   ========================================== */
.hero-section,
.clients-section,
.industries-section,
.tech-section,
.cta-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.hero-section {
  padding-top: 40px !important;
}

/* Constrain Service Card Images */
.service-image-container,
.service-card img,
.service-img {
  width: 100% !important;
  max-width: 450px !important;
  max-height: 280px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  display: block;
}

/* ==========================================
   GLOBAL MOBILE RESPONSIVE OVERRIDES (Max 768px)
   ========================================== */
@media screen and (max-width: 768px) {
  .hero-section,
  .clients-section,
  .industries-section,
  .tech-section,
  .cta-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .container,
  .industries-container,
  .tech-container,
  .cta-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Prevent headings from breaking on phones */
  h1, h2, .industries-heading, .tech-heading, .cta-title {
    font-size: 1.85rem !important;
    line-height: 1.3 !important;
  }

  p, .industries-subheading, .tech-subheading {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
  }

  /* Ensure card images fit inside phone bounds */
  .service-image-container,
  .service-card img,
  .service-img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ------------------------------------------
     SOLID WHITE MOBILE NAVIGATION DROPDOWN
     ------------------------------------------ */
   /* .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
    background-color: #ffffff !important;
  }

  .logo-img {
    max-height: 36px !important;
    width: auto !important;
  }

  /* Hide navigation menu by default on mobile */
  #nav-menu,
  .nav-menu {
    display: none !important;
  }

  /* Open mobile drawer as a solid white overlay */
  #nav-menu.is-open,
  .nav-menu.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important; /* Solid background covers hero text */
    z-index: 999999 !important;
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15) !important;
    padding: 12px 20px 20px 20px !important;
    border-bottom: 2px solid #E2E8F0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  .nav-menu.is-open li {
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
  }

  .nav-menu.is-open .nav-link,
  .nav-menu.is-open a {
    display: block !important;
    width: 100% !important;
    padding: 14px 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #F1F5F9 !important;
    text-decoration: none !important;
  }

  .nav-menu.is-open li:last-child .nav-link,
  .nav-menu.is-open li:last-child a {
    border-bottom: none !important;
  }  
   


  /* ------------------------------------------
     2-COLUMN COMPACT GRID: INDUSTRIES
     ------------------------------------------ */
  .industries-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .industry-card {
    padding: 16px 12px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .industry-icon-box {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

  .industry-icon-box svg,
  .industry-icon-box i {
    width: 18px !important;
    height: 18px !important;
  }

  .industry-title {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    font-weight: 800 !important;
  }

  .industry-desc {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }

  .industry-link {
    margin-top: auto !important;
  }

  .industry-link svg,
  .industry-link i {
    width: 14px !important;
    height: 14px !important;
  }

  /* ------------------------------------------
     2-COLUMN COMPACT GRID: TECHNOLOGIES
     ------------------------------------------ */
  .tech-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .tech-card {
    padding: 16px 12px !important;
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .tech-icon-box {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 10px !important;
    border-radius: 8px !important;
  }

  .tech-icon-box svg {
    width: 18px !important;
    height: 18px !important;
  }

  .tech-card-title {
    font-size: 0.95rem !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
    font-weight: 800 !important;
  }

  .tech-list {
    padding-left: 0 !important;
    margin-bottom: 12px !important;
  }

  .tech-list li {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }

  .bullet {
    width: 4px !important;
    height: 4px !important;
    margin-right: 6px !important;
  }

  .tech-learn-more {
    font-size: 0.75rem !important;
    margin-top: auto !important;
  }
}

/* ==========================================
   BALANCED SIDE-BY-SIDE MOBILE MISSION & VISION
   ========================================== */
@media screen and (max-width: 768px) {
  .mission-vision-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .mission-vision-card {
    padding: 14px 10px !important;
    border-radius: 12px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  .mission-vision-card h3 {
    font-size: 0.9rem !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
  }

  .mission-vision-card p {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  /* Compact icon box to save vertical space */
  .mission-vision-card div:first-child {
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
  }

  .mission-vision-card div:first-child svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* ==========================================
   FINAL MOBILE 2-COLUMN FIX FOR CARDS (<= 768px)
   ========================================== */
@media screen and (max-width: 768px) {
  /* Industries 2-Column Grid */
  .industries-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    border: none !important;
  }

  .industry-card {
    padding: 14px 10px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .industry-title {
    font-size: 0.9rem !important;
    margin-bottom: 4px !important;
  }

  .industry-desc {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  /* Technologies 2-Column Grid */
  .tech-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  .tech-card {
    padding: 14px 10px !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    height: 100% !important;
    box-sizing: border-box !important;
  }

  .tech-card-title {
    font-size: 0.9rem !important;
    margin-bottom: 8px !important;
  }

  .tech-list {
    margin-bottom: 10px !important;
  }

  .tech-list li {
    font-size: 0.75rem !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
  }
}
 /* ==========================================
   COMPACT MOBILE 2-COLUMN SERVICES GRID
   ========================================== */
@media screen and (max-width: 992px) {
  /* 2-Column Grid Layout */
  .services-list-section .container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  /* Compact Card Layout */
  .service-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    padding: 12px 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    height: 100% !important;
    background: #FFFFFF !important;
  }

  .service-row.row-reverse {
    flex-direction: column !important;
  }

  /* Neat Image Thumbnail */
  .service-mockup-col {
    width: 100% !important;
  }

  .service-mockup-col img {
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }

  /* Compact Content Styling */
  .service-content-col {
    width: 100% !important;
  }

  .service-number {
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    margin-bottom: 4px !important;
  }

  .service-title {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  /* Hide long paragraphs and bulky checklists on mobile to keep it sleek */
  .service-desc,
  .service-feature-list {
    display: none !important;
  }
}
/* ==========================================
   COMPACT & READABLE MOBILE 2-COLUMN PRODUCTS
   ========================================== */
@media screen and (max-width: 992px) {
  /* Force the products grid into 2 side-by-side columns */
  .products-grid-section .container > div:first-of-type {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }

  /* Compact card styling with descriptions enabled */
  .real-product-card {
    padding: 12px 10px !important;
    border-radius: 10px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }

  /* Small icon box */
  .real-product-card > div:first-of-type {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 8px !important;
    border-radius: 6px !important;
  }

  .real-product-card > div:first-of-type svg,
  .real-product-card > div:first-of-type i {
    width: 16px !important;
    height: 16px !important;
  }

  /* Neat title */
  .real-product-card h3 {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  /* Scaled-down description text for mobile readability */
  .real-product-card p {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
    margin-bottom: 8px !important;
    color: #475569 !important;
    display: block !important; /* Keeps the description visible */
  }

  /* Compact link text */
  .real-product-card a {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    display: inline-block !important;
  }
}
/* ==========================================
   COMPACT MOBILE CTA BANNER
   ========================================== */
@media screen and (max-width: 992px) {
  /* Target the CTA section/container wrapper */
  .cta-section, 
  .cta-banner,
  section:has(.cta-box), 
  [class*="cta"] {
    padding: 20px 12px !important;
  }

  /* Reduce the inner dark card padding and dimensions */
  [class*="cta"] > div,
  .cta-card,
  .cta-box {
    padding: 24px 16px !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    border-radius: 16px !important;
  }

  /* Scale down sub-headline (LET'S BUILD TOGETHER) */
  [class*="cta"] span,
  [class*="cta"] .cta-subtitle {
    font-size: 0.65rem !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.05em !important;
  }

  /* Scale down main title */
  [class*="cta"] h2,
  [class*="cta"] h3 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }

  /* Scale down description paragraph */
  [class*="cta"] p {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 16px !important;
  }

  /* Compact button sizing */
  [class*="cta"] .btn,
  [class*="cta"] a.button,
  [class*="cta"] button {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
  }
}