/**
 * Responsive Design Styles
 * Mobile-first responsive design for GMD Solutions website
 * Breakpoints: Mobile (320-767px), Tablet (768-1023px), Desktop (1024px+)
 */

/* ===== BASE STYLES (Mobile First) ===== */

/* Prevent horizontal overflow */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

/* Container adjustments */
.container {
  padding-left: 15px;
  padding-right: 15px;
}

/* ===== MOBILE STYLES (320px - 767px) ===== */

@media (max-width: 767px) {
  /* Typography */
  body {
    font-size: 14px;
    line-height: 1.6;
  }

  h1 {
    font-size: 24px;
    line-height: 1.3;
  }

  h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  h3 {
    font-size: 18px;
    line-height: 1.4;
  }

  h4 {
    font-size: 16px;
  }

  /* Header */
  #header {
    padding: 15px 0;
    height: auto;
  }

  #header .container-fluid {
    padding: 0 15px;
  }

  #logo .logo-text a {
    font-size: 24px;
  }

  /* Navigation */
  #nav-menu-container {
    margin-top: 10px;
  }

  .nav-menu {
    flex-direction: column;
    width: 100%;
  }

  .nav-menu li {
    width: 100%;
    text-align: center;
    padding: 10px 0;
  }

  /* Hero Section */
  #intro {
    height: auto;
    min-height: 500px;
  }

  .carousel-content h1,
  .carousel-content h2 {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 15px;
  }

  .hero-subtitle {
    font-size: 14px;
    margin-bottom: 20px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
  }

  .stat-item {
    width: 100%;
  }

  .stat-number {
    font-size: 32px;
  }

  .stat-label {
    font-size: 12px;
  }

  .hero-cta {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
  }

  /* About Section */
  #about .about-cols .col-md-4 {
    margin-bottom: 30px;
  }

  /* Services Section */
  #services {
    padding: 40px 0;
  }

  #services .row {
    gap: 20px;
  }

  .service-card {
    margin-bottom: 20px;
  }

  .service-title {
    font-size: 18px;
  }

  .service-description {
    font-size: 13px;
  }

  .service-technologies {
    gap: 6px;
  }

  .tech-badge {
    font-size: 11px;
    padding: 5px 10px;
  }

  .service-benefits li {
    font-size: 13px;
    padding: 6px 0 6px 25px;
  }

  .service-cta {
    padding: 10px 20px;
    font-size: 13px;
  }

  /* Skills Section */
  #skills {
    padding: 40px 0;
  }

  .progress {
    margin-bottom: 15px;
  }

  .skill {
    font-size: 13px;
  }

  /* Portfolio Section */
  #portfolio {
    padding: 40px 0;
  }

  .portfolio-filters {
    margin-bottom: 25px;
  }

  .portfolio-filter-btn {
    padding: 8px 15px;
    font-size: 12px;
    margin: 3px;
  }

  .portfolio-item {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }

  .portfolio-image {
    height: 200px;
  }

  .portfolio-title {
    font-size: 16px;
  }

  /* Team Section */
  #team {
    padding: 40px 0;
  }

  #team .member {
    margin-bottom: 25px;
  }

  #team .member img {
    height: 250px;
  }

  #team .member-info h3 {
    font-size: 18px;
  }

  #team .member-title {
    font-size: 13px;
  }

  #team .member-role {
    font-size: 14px;
  }

  #team .experience-badge {
    font-size: 12px;
    padding: 6px 15px;
  }

  #team .member-specialties {
    padding: 12px;
  }

  #team .member-specialties h5 {
    font-size: 13px;
  }

  #team .member-specialties li {
    font-size: 12px;
  }

  #team .cert-badge {
    font-size: 10px;
    padding: 5px 10px;
  }

  /* Contact Section */
  #contact {
    padding: 40px 0;
  }

  .contact-info .col-md-4 {
    margin-bottom: 20px;
  }

  .form-row {
    flex-direction: column;
  }

  .form-group {
    margin-bottom: 15px;
  }

  .form-control {
    font-size: 14px;
    padding: 10px;
  }

  textarea.form-control {
    min-height: 120px;
  }

  button[type="submit"] {
    width: 100%;
    padding: 12px;
    font-size: 14px;
  }

  .whatsapp-contact {
    margin-top: 20px;
  }

  .btn-whatsapp {
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
  }

  /* Footer */
  #footer {
    padding: 30px 0 20px;
  }

  #footer .footer-top {
    padding: 30px 0;
  }

  #footer .col-lg-3 {
    margin-bottom: 25px;
  }

  #footer h4 {
    font-size: 16px;
    margin-bottom: 15px;
  }

  #footer ul li {
    font-size: 13px;
    padding: 5px 0;
  }

  .social-links a {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  /* Modal Responsive */
  #portfolio-modal {
    padding: 10px;
  }

  .modal-content-wrapper {
    margin: 10px;
  }

  .modal-header {
    padding: 15px;
  }

  .modal-header h2 {
    font-size: 18px;
  }

  .modal-body {
    padding: 15px;
  }

  .project-section h3 {
    font-size: 16px;
  }

  .project-section p {
    font-size: 14px;
  }

  .tech-badge-large {
    padding: 8px 12px;
    font-size: 11px;
  }
}

/* ===== TABLET STYLES (768px - 1023px) ===== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Typography */
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 22px;
  }

  /* Hero Section */
  .carousel-content h1,
  .carousel-content h2 {
    font-size: 28px;
  }

  .hero-stats {
    gap: 20px;
  }

  .stat-number {
    font-size: 36px;
  }

  /* Services */
  .service-card {
    min-height: 500px;
  }

  /* Portfolio */
  .portfolio-item {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Team */
  #team .member img {
    height: 300px;
  }

  /* Contact Form */
  .form-row {
    display: flex;
    gap: 15px;
  }

  .form-group {
    flex: 1;
  }
}

/* ===== DESKTOP STYLES (1024px+) ===== */

@media (min-width: 1024px) {
  /* Container max-width */
  .container {
    max-width: 1140px;
  }

  /* Hero Section */
  .carousel-content {
    max-width: 800px;
  }

  .hero-stats {
    justify-content: center;
    gap: 40px;
  }

  /* Services Grid */
  #services .row {
    justify-content: space-between;
  }

  .service-card {
    min-height: 550px;
  }

  /* Portfolio Grid */
  .portfolio-item {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }

  /* Team Grid */
  #team .row {
    justify-content: center;
  }

  /* Contact Form */
  .form {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ===== LARGE DESKTOP (1200px+) ===== */

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }

  /* Hero Section */
  .carousel-content h1,
  .carousel-content h2 {
    font-size: 42px;
  }

  .hero-subtitle {
    font-size: 18px;
  }

  .stat-number {
    font-size: 48px;
  }

  .stat-label {
    font-size: 14px;
  }
}

/* ===== EXTRA LARGE DESKTOP (1400px+) ===== */

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

/* ===== LANDSCAPE ORIENTATION ===== */

@media (max-height: 600px) and (orientation: landscape) {
  #intro {
    min-height: 400px;
  }

  .carousel-content {
    padding: 20px 0;
  }

  .hero-stats {
    margin: 15px 0;
  }

  .stat-item {
    padding: 10px;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  /* Hide non-essential elements */
  #header,
  #nav-menu-container,
  .back-to-top,
  .social-links,
  .btn-primary,
  .btn-secondary,
  .service-cta,
  .portfolio-filter-btn,
  .whatsapp-contact {
    display: none;
  }

  /* Optimize for print */
  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }

  h1 {
    font-size: 24pt;
  }

  h2 {
    font-size: 20pt;
  }

  h3 {
    font-size: 16pt;
  }

  /* Page breaks */
  section {
    page-break-inside: avoid;
  }

  .service-card,
  .portfolio-card,
  .member {
    page-break-inside: avoid;
  }

  /* Remove shadows and transitions */
  * {
    box-shadow: none !important;
    transition: none !important;
  }

  /* Ensure links are visible */
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
}

/* ===== UTILITY CLASSES ===== */

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}

/* Hide on desktop */
@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

/* Show only on mobile */
.show-mobile {
  display: none !important;
}

@media (max-width: 767px) {
  .show-mobile {
    display: block !important;
  }
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive videos */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Responsive tables */
@media (max-width: 767px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}