/* 
 * Cybersecurity Audits Template - Responsive CSS
 * Mobile-First Responsive Design - Bootstrap 5 Compatible
 */

/* ====== MOBILE FIRST (Default styles for mobile) ====== */

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

.hero-title {
  font-size: 2rem;
}

.hero-subtitle {
  font-size: 1.21rem;
}

.hero-desc {
  font-size: 1rem;
}

/* Section Padding Mobile */
section {
  padding: 2rem 0;
}

/* Typography Mobile */
h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.80rem;
}

h3 {
  font-size: 1.31rem;
}

/* Cards Mobile */
.services-card,
.features-card,
.priceplan-card,
.team-card,
.casestudy-card {
  margin-bottom: 1.62rem;
}

.contact-form {
  padding: 2rem;
}

/* Team Photos Mobile */
.team-photo {
  width: 100px;
  height: 100px;
}

/* Process Steps Mobile */
.process-number {
  width: 50px;
  height: 50px;
  font-size: 1rem;
}

/* ====== TABLET PORTRAIT (768px and up) ====== */
@media (min-width: 768px) {
  
  /* Hero Section Tablet */
  .hero-section {
    min-height: 90vh;
    padding: 3rem 0;
  }
  
  .hero-title {
    font-size: 2.33rem;
  }
  
  .hero-subtitle {
    font-size: 1.23rem;
  }
  
  /* Section Padding Tablet */
  section {
    padding: 3rem 0;
  }
  
  /* Typography Tablet */
  h1 {
    font-size: 2.38rem;
  }
  
  h2 {
    font-size: 1.99rem;
  }
  
  /* Contact Form Tablet */
  .contact-form {
    padding: 2.25rem;
  }
  
  /* Team Photos Tablet */
  .team-photo {
    width: 110px;
    height: 110px;
  }
  
  /* Process Steps Tablet */
  .process-number {
    width: 55px;
    height: 55px;
    font-size: 1.18rem;
  }
}

/* ====== TABLET LANDSCAPE (992px and up) ====== */
@media (min-width: 992px) {
  
  /* Hero Section Desktop */
  .hero-section {
    min-height: 100vh;
    padding: 4rem 0;
  }
  
  .hero-title {
    font-size: var(--font-size-hero);
  }
  
  .hero-subtitle {
    font-size: 1.37rem;
  }
  
  .hero-desc {
    font-size: 1.17rem;
  }
  
  /* Section Padding Desktop */
  section {
    padding: var(--section-padding);
  }
  
  /* Typography Desktop */
  h1 {
    font-size: var(--font-size-hero);
  }
  
  h2 {
    font-size: var(--font-size-section);
  }
  
  h3 {
    font-size: var(--font-size-card);
  }
  
  /* Cards Desktop Spacing */
  .services-card,
  .features-card,
  .priceplan-card,
  .team-card,
  .casestudy-card {
    margin-bottom: 0;
  }
  
  /* Contact Form Desktop */
  .contact-form {
    padding: 2.5rem;
  }
  
  /* Team Photos Desktop */
  .team-photo {
    width: 120px;
    height: 120px;
  }
  
  /* Process Steps Desktop */
  .process-number {
    width: 60px;
    height: 60px;
    font-size: 1.32rem;
  }
  
  /* Hero Image Adjustments */
  .hero-image {
    max-height: 500px;
    object-fit: cover;
  }
}

/* ====== DESKTOP (1200px and up) ====== */
@media (min-width: 1200px) {
  
  /* Enhanced spacing for large screens */
  .hero-section {
    padding: 5rem 0;
  }
  
  section {
    padding: 5rem 0;
  }
  
  /* Larger containers for better spacing */
  .container-lg {
    max-width: 1140px;
  }
  
  /* Hero enhancements */
  .hero-title {
    font-size: 3rem;
  }
  
  .hero-subtitle {
    font-size: 1.45rem;
  }
  
  .hero-desc {
    font-size: 1.17rem;
  }
  
  /* Typography enhancements */
  h1 {
    font-size: 3rem;
  }
  
  h2 {
    font-size: 2.38rem;
  }
  
  /* Card enhancements */
  .services-card,
  .priceplan-card,
  .team-card,
  .casestudy-card {
    padding: 2.5rem;
  }
  
  .features-card {
    padding: 2.5rem 2rem;
  }
  
  /* Contact form enhancements */
  .contact-form {
    padding: 3rem;
  }
}

/* ====== ULTRA WIDE (1400px and up) ====== */
@media (min-width: 1400px) {
  
  /* Ultra wide container */
  .container-xxl {
    max-width: 1320px;
  }
  
  /* Enhanced hero for ultra wide */
  .hero-section {
    padding: 6rem 0;
  }
  
  section {
    padding: 6rem 0;
  }
  
  /* Ultra wide typography */
  .hero-title {
    font-size: 3.64rem;
  }
  
  h1 {
    font-size: 3.64rem;
  }
  
  h2 {
    font-size: 2.57rem;
  }
}

/* ====== ACCESSIBILITY ENHANCEMENTS ====== */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .services-card,
  .features-card,
  .priceplan-card,
  .team-card,
  .reviews-card,
  .faq-card,
  .casestudy-card,
  .career-card,
  .coreinfo-card,
  .blog-card {
    border: 2px solid var(--neutral-slate);
  }
  
  .hero-section::before {
    display: none;
  }
}

/* Dark mode preferences */

/* ====== PRINT STYLES ====== */
@media print {
  .hero-section {
    min-height: auto;
    padding: 2rem 0;
    background: white !important;
    color: black !important;
  }
  
  .hero-section::before {
    display: none;
  }
  
  section {
    padding: 1rem 0;
    page-break-inside: avoid;
  }
  
  .services-card,
  .features-card,
  .priceplan-card,
  .team-card,
  .reviews-card,
  .faq-card,
  .casestudy-card,
  .career-card,
  .coreinfo-card,
  .blog-card {
    background: white !important;
    box-shadow: none !important;
    border: 1px solid #dcc7ca !important;
    page-break-inside: avoid;
  }
  
  /* Hide interactive elements */
  .navbar,
  footer,
  .btn-primary-custom,
  .btn-secondary-custom {
    display: none;
  }
}

/* ====== MOBILE SPECIFIC OPTIMIZATIONS ====== */
@media (max-width: 576px) {
  
  /* Extra small mobile adjustments */
  .hero-title {
    font-size: 1.87rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  h1 {
    font-size: 1.85rem;
  }
  
  h2 {
    font-size: 1.54rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  /* Mobile card padding adjustments */
  .services-card,
  .features-card,
  .priceplan-card,
  .team-card,
  .reviews-card,
  .faq-card,
  .casestudy-card,
  .career-card,
  .coreinfo-card,
  .blog-card {
    padding: 1.5rem;
  }
  
  .contact-form {
    padding: 1.5rem;
  }
  
  /* Mobile team photos */
  .team-photo {
    width: 80px;
    height: 80px;
  }
  
  /* Mobile process steps */
  .process-number {
    width: 45px;
    height: 45px;
    font-size: 0.96rem;
  }
  
  /* Mobile navbar brand */
  .navbar-brand {
    font-size: 1.38rem !important;
  }
}

/* ====== LANDSCAPE PHONE OPTIMIZATIONS ====== */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh;
    padding: 1rem 0;
  }
  
  section {
    padding: 1.5rem 0;
  }
} 

.hero-content {
    padding-top: 200px;
}