﻿/* ==========================================================================
   VITRO SCIENTIFIC INTERNATIONAL PVT LTD - RESPONSIVE STYLESHEET
   Breakpoints: 1920px, 1440px, 1200px, 992px, 768px, 576px, 375px, 320px
   ========================================================================== */

/* 1. Large Displays (>= 1440px) */
@media (min-width: 1440px) {
  .container, .container-lg, .container-xl, .container-xxl {
    max-width: 1360px;
  }
  .hero-section {
    min-height: 720px;
    padding: 6.5rem 0 7rem;
  }
  .three-canvas-wrapper {
    height: 560px;
  }
}

/* 2. Desktop Standard (< 1200px) */
@media (max-width: 1199.98px) {
  .section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .hero-title {
    font-size: 2.85rem;
  }
  .three-canvas-wrapper {
    height: 480px;
  }
  .stat-number {
    font-size: 1.95rem;
  }
}

/* 3. Medium & Tablet Screens (< 992px) */
@media (max-width: 991.98px) {
  .section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .hero-section {
    padding: 3.5rem 0 4.5rem;
    text-align: center;
  }
  .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .hero-cert-row {
    justify-content: center;
  }
  .three-canvas-wrapper {
    height: 420px;
    margin-top: 2rem;
  }
  .process-timeline-line {
    display: none;
  }
  .process-step-node {
    margin-bottom: 2rem;
  }
  .stats-strip {
    margin-top: 1rem;
  }
  .cta-banner-wrapper {
    padding: 3rem 2rem;
    text-align: center;
  }
  .cta-btn-group {
    justify-content: center;
    margin-top: 1.5rem;
  }
}

/* 4. Small Tablets (< 768px) */
@media (max-width: 767.98px) {
  .section-padding {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .section-title {
    font-size: 2rem;
  }
  .hero-title {
    font-size: 2.25rem;
  }
  .three-canvas-wrapper {
    height: 380px;
  }
  .three-controls-overlay {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .three-model-selector {
    justify-content: center;
  }
  .three-color-picker {
    justify-content: center;
  }
  .stat-item {
    border-bottom: 1px solid var(--color-slate-100);
    padding-bottom: 1rem;
    margin-bottom: 0.5rem;
  }
  .stat-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .sustainability-banner {
    padding: 2.5rem 1.5rem;
  }
}

/* 5. Mobile Devices (< 576px) */
@media (max-width: 575.98px) {
  .hero-title {
    font-size: 1.85rem;
  }
  .hero-lead {
    font-size: 1rem;
  }
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }
  .three-canvas-wrapper {
    height: 320px;
  }
  .floating-spec-badge {
    display: none;
  }
  .product-image-container {
    height: 210px;
    min-height: 210px;
    padding: 0 !important;
  }
  .stats-card-inner {
    padding: 1.5rem 1.25rem;
  }
  .contact-card-info {
    padding: 2rem 1.5rem;
  }
  .top-bar-location {
    display: none;
  }
  .detail-stage-wrapper {
    min-height: 280px;
    padding: 1.25rem 1rem;
  }
  .detail-primary-img {
    max-height: 250px;
  }
  .detail-thumb-bar {
    gap: 0.4rem;
  }
  .detail-thumb-btn img {
    height: 48px;
  }
  .detail-thumb-btn span {
    font-size: 0.6rem;
  }
  .detail-metric-card {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
  }
  .detail-metric-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 1rem;
  }
  .detail-metric-val {
    font-size: 0.95rem;
  }
  .detail-nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .detail-nav-tabs .nav-link {
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
  }
  .specs-table th, .specs-table td {
    padding: 0.7rem 0.85rem;
    font-size: 0.825rem;
  }
}

/* 6. Very Small Screens (< 375px) */
@media (max-width: 374.98px) {
  .brand-title {
    font-size: 1.1rem;
  }
  .brand-icon-box {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
  }
  .hero-title {
    font-size: 1.65rem;
  }
  .btn-brand-primary,
  .btn-brand-outline {
    font-size: 0.875rem;
    padding: 0.65rem 1.25rem;
  }
  .detail-thumb-btn img {
    height: 40px;
  }
  .detail-primary-img {
    max-height: 210px;
  }
  .detail-stage-wrapper {
    min-height: 230px;
  }
}

