/* ========================================
   RESPONSIVE CSS - MOBILE FIRST APPROACH
   ======================================== */

/* ========================================
   MOBILE FIRST BASE STYLES (320px+)
   ======================================== */

/* Typography Mobile */
:root {
  --font-size-base-mobile: 0.875rem;
  --font-size-sm-mobile: 0.75rem;
  --font-size-lg-mobile: 1rem;
  --font-size-xl-mobile: 1.125rem;
  --font-size-2xl-mobile: 1.25rem;
  --font-size-3xl-mobile: 1.5rem;
  --font-size-4xl-mobile: 1.75rem;
  --section-padding-mobile: 3rem 0;
}

/* Mobile Base Styles */
body {
  font-size: var(--font-size-base-mobile);
}


.section {
  padding: var(--section-padding-mobile);
}

/* Mobile Navigation */
.navbar {
  padding: 0.5rem 0;
}

.navbar-brand {
  font-size: var(--font-size-lg-mobile);
}

.navbar-nav .nav-link {
  font-size: var(--font-size-base-mobile);
  padding: 0.5rem 1rem;
}

.navbar-collapse {
  background: var(--white);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  margin-top: 1rem;
  padding: 1rem;
}

/* Mobile Hero */
.hero {
  min-height: 80vh;
  padding: 2rem 0;
}

.hero h1 {
  font-size: var(--font-size-3xl-mobile);
  margin-bottom: 1rem;
}

.hero p {
  font-size: var(--font-size-lg-mobile);
  margin-bottom: 1.63rem;
}

.hero-content {
  text-align: center;
  margin-bottom: 2rem;
    padding-top: 275px;
}

.hero-image {
  margin-top: 2rem;
}

/* Mobile Buttons */
.btn {
  padding: 0.625rem 1.25rem;
  font-size: var(--font-size-base-mobile);
  width: 100%;
  margin-bottom: 1rem;
}

/* Mobile Section Titles */
.section-title h2 {
  font-size: var(--font-size-2xl-mobile);
}

.section-title p {
  font-size: var(--font-size-base-mobile);
}

/* Mobile Cards */
.feature-card,
.service-card,
.team-card,
.review-card,
.blog-card {
  margin-bottom: 2rem;
}

.service-image,
.blog-image {
  height: 180px;
}

.team-image {
  height: 200px;
}

/* Mobile Process */
.process-step {
  flex-direction: column;
  text-align: center;
}

.process-number {
  margin-right: 0;
  margin-bottom: 1rem;
}

/* Mobile Contact Form */
.contact-form {
  margin-bottom: 2rem;
}

.form-control {
  padding: 0.625rem;
  font-size: var(--font-size-base-mobile);
}

/* Mobile Gallery */
.gallery-layout {
  grid-template-columns: 1fr;
  gap: 1rem;
}

.gallery-item {
  height: 180px;
}

/* Mobile Footer */
.footer {
  padding: 2rem 0 1rem;
}

.footer-content {
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* ========================================
   SMALL MOBILE (576px+)
   ======================================== */
@media (min-width: 576px) {

  
  .hero h1 {
    font-size: var(--font-size-4xl-mobile);
  }
  
  .btn {
    width: auto;
    display: inline-block;
    margin-right: 1rem;
  }
  
  /* Gallery grid removed - using Bootstrap 5 grid */
  
  .service-image,
  .blog-image {
    height: 200px;
  }
  
  .team-image {
    height: 220px;
  }
  
  .gallery-item {
    height: 200px;
  }
}

/* ========================================
   TABLETS (768px+)
   ======================================== */
@media (min-width: 768px) {

  
  /* Typography */
  body {
    font-size: var(--font-size-base);
  }
  
  .section {
    padding: var(--section-padding);
  }
  
  /* Navigation */
  .navbar {
    padding: 1rem 0;
  }
  
  .navbar-brand {
    font-size: var(--font-size-lg);
  }
  
  .navbar-nav .nav-link {
    font-size: var(--font-size-base);
    padding: 0.5rem 1rem;
  }
  
  .navbar-collapse {
    background: transparent;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
  }
  
  /* Hero */
  .hero {
    min-height: 100vh;
  }
  
  .hero h1 {
    font-size: var(--font-size-4xl);
  }
  
  .hero p {
    font-size: var(--font-size-lg);
  }
  
  .hero-content {
    text-align: left;
    margin-bottom: 0;
    padding-top: 275px;
}
  
  .hero-image {
    margin-top: 0;
  }
  
  /* Section Titles */
  .section-title h2 {
    font-size: var(--font-size-3xl);
  }
  
  .section-title p {
    font-size: var(--font-size-lg);
  }
  
  /* Cards Grid - removed, using Bootstrap 5 grid */
  
  /* Process */
  .process-step {
    flex-direction: row;
    text-align: left;
  }
  
  .process-number {
    margin-right: 2rem;
    margin-bottom: 0;
  }
  
  /* Contact */
  .contact-form {
    margin-bottom: 0;
  }
  
  /* Footer */
  .footer {
    padding: 3rem 0 1rem;
  }
  
  /* Footer content grid removed - using Bootstrap 5 grid */
  
  /* Images */
  .service-image,
  .blog-image {
    height: 220px;
  }
  
  .team-image {
    height: 250px;
  }
  
  .gallery-item {
    height: 220px;
  }
}

/* ========================================
   DESKTOP (992px+)
   ======================================== */
@media (min-width: 992px) {

  
  /* Grid Layouts - removed, using Bootstrap 5 grid */
  
  /* Card Hover Effects */
  .feature-card:hover,
  .service-card:hover,
  .team-card:hover,
  .blog-card:hover {
    transform: translateY(-5px);
  }
  
  /* Process Timeline */
  .process-timeline {
    position: relative;
  }
  
  .process-timeline::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
  }
  
  .process-step {
    position: relative;
  }
  
  .process-number {
    position: relative;
    z-index: 2;
  }
}

/* ========================================
   LARGE DESKTOP (1200px+)
   ======================================== */
@media (min-width: 1200px) {

  
  /* Gallery and Footer grids removed - using Bootstrap 5 grid */
  
  /* Spacing */
  .section {
    padding: 6rem 0;
  }
  
  /* Hero */
  .hero h1 {
    font-size: 3rem;
  }
}

/* ========================================
   EXTRA LARGE DESKTOP (1400px+)
   ======================================== */
@media (min-width: 1400px) {

  
  /* Typography */
  .hero h1 {
    font-size: 3.62rem;
  }
  
  .section-title h2 {
    font-size: 2.52rem;
  }
  
  /* Gallery grid removed - using Bootstrap 5 grid */
  
  /* Cards */
  .service-image,
  .blog-image {
    height: 250px;
  }
  
  .team-image {
    height: 280px;
  }
  
  .gallery-item {
    height: 250px;
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .navbar,
  .footer,
  .btn,
  .hero {
    display: none !important;
  }
  

  
  .section {
    padding: 1rem 0 !important;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  .page-break {
    page-break-before: always;
  }
}

/* ========================================
   REDUCED MOTION SUPPORT
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .hero,
  .feature-card,
  .service-card,
  .team-card,
  .review-card,
  .blog-card,
  .gallery-item {
    transition: none !important;
  }
  
  .hero::before {
    animation: none !important;
  }
  
  .process-step,
  .timeline-item {
    animation: none !important;
  }
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */
@media (prefers-contrast: high) {
  :root {
    --primary-green: #000000;
    --primary-blue: #0015ff;
    --primary-orange: #ff8200;
    --primary-purple: #730264;
    --primary-teal: #00877b;
    --gray-600: #000000;
    --gray-700: #000000;
    --gray-800: #000000;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
  
  .form-control {
    border: 2px solid currentColor;
  }
  
  .navbar,
  .footer {
    border: 2px solid currentColor;
  }
}

/* ========================================
   DARK MODE SUPPORT (if needed)
   ======================================== */

/* ========================================
   ORIENTATION CHANGES
   ======================================== */
@media (orientation: landscape) and (max-height: 600px) {
  .hero {
    min-height: 90vh;
  }
  
  .navbar {
    padding: 0.5rem 0;
  }
  
  .section {
    padding: 2rem 0;
  }
}

/* ========================================
   CUSTOM BREAKPOINTS
   ======================================== */

/* Medium phones */
@media (min-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }
  
  .btn {
    padding: 0.75rem 1.5rem;
  }
  
  /* Gallery grid removed - using Bootstrap 5 grid */
}

/* Small tablets */
@media (min-width: 640px) {

  
  /* Features and Gallery grids removed - using Bootstrap 5 grid */
}

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

/* Display utilities */
@media (max-width: 575px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-flex { display: flex !important; }
}

@media (max-width: 767px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-flex { display: flex !important; }
}

@media (max-width: 991px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-flex { display: flex !important; }
}

@media (max-width: 1199px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-inline-block { display: inline-block !important; }
  .d-xl-flex { display: flex !important; }
}

/* Text alignment utilities */
@media (max-width: 575px) {
  .text-sm-center { text-align: center !important; }
  .text-sm-left { text-align: left !important; }
  .text-sm-right { text-align: right !important; }
}

@media (max-width: 767px) {
  .text-md-center { text-align: center !important; }
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
}

@media (max-width: 991px) {
  .text-lg-center { text-align: center !important; }
  .text-lg-left { text-align: left !important; }
  .text-lg-right { text-align: right !important; }
}

/* Spacing utilities for mobile */
@media (max-width: 575px) {
  .mb-sm-0 { margin-bottom: 0 !important; }
  .mb-sm-1 { margin-bottom: 0.48rem !important; }
  .mb-sm-2 { margin-bottom: 0.64rem !important; }
  .mb-sm-3 { margin-bottom: 1rem !important; }
  .mb-sm-4 { margin-bottom: 1.72rem !important; }
  .mb-sm-5 { margin-bottom: 3rem !important; }
  
  .mt-sm-0 { margin-top: 0 !important; }
  .mt-sm-1 { margin-top: 0.40rem !important; }
  .mt-sm-2 { margin-top: 0.57rem !important; }
  .mt-sm-3 { margin-top: 1rem !important; }
  .mt-sm-4 { margin-top: 1.71rem !important; }
  .mt-sm-5 { margin-top: 3rem !important; }
  
  .py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-sm-1 { padding-top: 0.50rem !important; padding-bottom: 0.32rem !important; }
  .py-sm-2 { padding-top: 0.69rem !important; padding-bottom: 0.60rem !important; }
  .py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .py-sm-4 { padding-top: 1.65rem !important; padding-bottom: 1.70rem !important; }
  .py-sm-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  
  .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-sm-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
  .px-sm-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
  .px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .px-sm-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .px-sm-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
}