/* Mobile-first responsive styles */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .hero-shapes .shape-blob-1 {
        width: 250px;
        height: 250px;
    }
    
    .hero-shapes .shape-blob-2 {
        width: 180px;
        height: 180px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #hero .display-4 {
        font-size: 3rem;
    }
    
    .team-photo {
        width: 180px;
        height: 180px;
    }
    
    .process-step .step-number {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 1.4rem;
    }
    
    .feature-card {
        padding: 2.5rem 1.5rem;
    }
    
    .metric-card {
        padding: 2.5rem;
    }
    
    .enterprise-feature {
        padding: 2.5rem 1.5rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #hero .display-4 {
        font-size: 3.5rem;
    }
    
    .hero-shapes .shape-blob-1 {
        width: 300px;
        height: 300px;
    }
    
    .hero-shapes .shape-blob-2 {
        width: 220px;
        height: 220px;
    }
    
    .feature-icon {
        width: 80px;
        height: 80px;
    }
    
    .team-photo {
        width: 200px;
        height: 200px;
    }
    
    .contact-info {
        padding: 3rem 1rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-shapes .shape-blob-1 {
        width: 350px;
        height: 350px;
    }
    
    .hero-shapes .shape-blob-2 {
        width: 250px;
        height: 250px;
    }
}

/* Mobile-specific styles (max-width: 767px) */
@media (max-width: 767px) {
    /* Disable animations on mobile as per requirements */
    .shape-blob-1,
    .shape-blob-2 {
        animation: none;
    }
    
    .card:hover,
    .feature-card:hover,
    .metric-card:hover,
    .integration-item:hover,
    .enterprise-feature:hover,
    .report-type:hover,
    .info-card:hover {
        transform: none;
    }
    
    .btn-primary:hover {
        transform: none;
    }
    
    #gallery img:hover {
        transform: none;
    }
    
    /* Mobile typography adjustments */
    #hero .display-4 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.4rem;
    }
    
    .lead {
        font-size: 1.1rem;
    }
    
    /* Mobile spacing adjustments */
    .py-5 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .feature-card {
        padding: 1.5rem 1rem;
    }
    
    .metric-card {
        padding: 1.5rem;
    }
    
    .enterprise-feature {
        padding: 1.5rem 1rem;
    }
    
    .security-feature {
        padding: 1.5rem 1rem;
    }
    
    .infrastructure-feature {
        padding: 1.5rem 1rem;
    }
    
    .implementation-step {
        padding: 1.5rem 1rem;
    }
    
    /* Mobile navbar adjustments */
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    /* Mobile hero section */
    #hero {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .hero-shapes {
        display: none; /* Hide decorative shapes on mobile for better performance */
    }
    
    /* Mobile card spacing */
    .card-body {
        padding: 1.25rem;
    overflow-x: hidden;
}
    
    /* Mobile form adjustments */
    .contact-form .form-control {
        padding: 10px 12px;
    }
    
    .btn-primary {
        padding: 10px 25px;
    }
    
    /* Mobile team photos */
    .team-photo {
        width: 120px;
        height: 120px;
    }
    
    /* Mobile process steps */
    .process-step .step-number {
        width: 40px;
        height: 40px;
        line-height: 40px;
        font-size: 1rem;
    }
    
    /* Mobile timeline adjustments */
    .timeline-item {
        padding-left: 20px;
    }
    
    .timeline-year {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
    
    /* Mobile footer adjustments */
    #footer .container .row .col-lg-4 {
        margin-bottom: 2rem;
    }
    
    /* Mobile breadcrumb */
    .breadcrumb-icon {
        width: 20px;
        height: 20px;
    }
}

/* Tablet-specific adjustments (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .feature-card {
        padding: 2rem 1.25rem;
    }
    
    .metric-card {
        padding: 2rem;
    }
    
    .enterprise-feature {
        padding: 2rem 1.25rem;
    }
}

/* Print styles */
@media print {
    .navbar,
    .hero-shapes,
    .btn,
    #footer {
        display: none;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .py-5 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid #000;
    }
    
    .btn-primary {
        border: 2px solid #000;
    }
    
    .form-control {
        border: 2px solid #000;
    }
}

/* Dark mode support */