/* Responsive Design - Mobile First Approach */

/* Extra Small Devices (phones, 576px and down) */
@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: 1.88rem;
    padding-top: 175px;
}
    
    .hero-section p {
        font-size: 1rem;
    }
    
    .navbar-brand {
        font-size: 1rem;
    }
    
    .feature-box,
    .feature-item {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .feature-box i,
    .feature-item i {
        font-size: 2rem;
    }
    
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .pricing-card {
        padding: 1.5rem;
    }
    
    .pricing-card .price {
        font-size: 1.59rem;
    }
    
    .process-step .step-number {
        width: 40px;
        height: 40px;
        font-size: 0.91rem;
    }
    
    .team-member img {
        width: 80px;
        height: 80px;
    }
    
    .timeline {
        padding-left: 2rem;
    }
    
    .timeline::before {
        left: 15px;
    }
    
    .timeline-item {
        padding-left: 40px;
    }
    
    .timeline-item::before {
        left: 15px;
    }
    
    .gallery-item img {
        height: 200px;
    }
    
    .service-card img {
        height: 150px;
    }
    
    .container-fluid {
        padding: 0 0.5rem;
    }
    
    .py-5 {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .py-4 {
        padding-top: 1.60rem;
        padding-bottom: 1.57rem;
    }
    
    .py-3 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .hero-section {
        padding-top: 100px;
        padding-bottom: 2rem;
    }
    
    .breadcrumb-nav {
        margin-top: 56px;
    }
    
    .navbar {
        padding: 0.25rem 0;
    }
    
    .navbar-toggler {
        border: none;
        padding: 0.25rem 0.5rem;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section h1 {
        font-size: 2rem;
    padding-top: 175px;
}
    
    .hero-section p {
        font-size: 1.24rem;
    }
    
    .feature-box,
    .feature-item {
        padding: 1.25rem;
    }
    
    .feature-box i,
    .feature-item i {
        font-size: 2.63rem;
    }
    
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        padding: 1.25rem;
        margin-bottom: 1.61rem;
    }
    
    .pricing-card .price {
        font-size: 1.88rem;
    }
    
    .process-step .step-number {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
    
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    .timeline {
        padding-left: 2.5rem;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        padding-left: 50px;
    }
    
    .timeline-item::before {
        left: 20px;
    }
    
    .gallery-item img {
        height: 220px;
    }
    
    .service-card img {
        height: 180px;
    }
    
    .breadcrumb-nav {
        margin-top: 66px;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section h1 {
        font-size: 2.63rem;
    padding-top: 175px;
}
    
    .hero-section p {
        font-size: 1.29rem;
    }
    
    .feature-box,
    .feature-item {
        padding: 1.5rem;
    }
    
    .feature-box i,
    .feature-item i {
        font-size: 3rem;
    }
    
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .pricing-card .price {
        font-size: 2rem;
    }
    
    .process-step .step-number {
        width: 60px;
        height: 60px;
        font-size: 1.15rem;
    }
    
    .team-member img {
        width: 120px;
        height: 120px;
    }
    
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-item {
        padding-left: 1.5rem;
    }
    
    .timeline-item::before {
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .gallery-item img {
        height: 240px;
    }
    
    .service-card img {
        height: 200px;
    }
    
    .breadcrumb-nav {
        margin-top: 76px;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero-section h1 {
        font-size: 3rem;
    padding-top: 175px;
}
    
    .hero-section p {
        font-size: 1.49rem;
    }
    
    .feature-box,
    .feature-item {
        padding: 2rem;
    }
    
    .feature-box i,
    .feature-item i {
        font-size: 3.64rem;
    }
    
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .pricing-card .price {
        font-size: 2.34rem;
    }
    
    .process-step .step-number {
        width: 70px;
        height: 70px;
        font-size: 1.28rem;
    }
    
    .team-member img {
        width: 140px;
        height: 140px;
    }
    
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-item {
        padding-left: 2rem;
    }
    
    .timeline-item::before {
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .gallery-item img {
        height: 260px;
    }
    
    .service-card img {
        height: 220px;
    }
    
    .breadcrumb-nav {
        margin-top: 76px;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .hero-section h1 {
        font-size: 2.79rem;
    padding-top: 175px;
}
    
    .hero-section p {
        font-size: 1.64rem;
    }
    
    .feature-box,
    .feature-item {
        padding: 2.5rem;
    }
    
    .feature-box i,
    .feature-item i {
        font-size: 4rem;
    }
    
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        padding: 2.5rem;
        margin-bottom: 2rem;
    }
    
    .pricing-card .price {
        font-size: 2.52rem;
    }
    
    .process-step .step-number {
        width: 80px;
        height: 80px;
        font-size: 1.56rem;
    }
    
    .team-member img {
        width: 160px;
        height: 160px;
    }
    
    .timeline::before {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .timeline-item {
        padding-left: 2.5rem;
    }
    
    .timeline-item::before {
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .gallery-item img {
        height: 280px;
    }
    
    .service-card img {
        height: 240px;
    }
    
    .breadcrumb-nav {
        margin-top: 76px;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-section {
        min-height: 100vh;
        padding-top: 80px;
        padding-bottom: 2rem;
    }
    
    .hero-section h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    padding-top: 175px;
}
    
    .hero-section p {
        font-size: 1rem;
        margin-bottom: 1rem;
    }
    
    .navbar {
        padding: 0.25rem 0;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .breadcrumb-nav,
    footer,
    .btn,
    .form-control,
    .form-check-input {
        display: none;
    }
    
    .hero-section,
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        box-shadow: none;
        border: 1px solid #000;
    }
    
    .hero-section {
        background: none;
        color: #000;
    }
    
    .hero-section::before {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: #000;
    }
    
    p, li {
        color: #000;
    }
    
    .container,
    .container-fluid {
        max-width: 100%;
        padding: 0;
    }
    
    .row {
        margin: 0;
    }
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6,
    .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        padding: 0;
    }
    
    .py-1, .py-2, .py-3, .py-4, .py-5 {
        padding-top: 0.68rem;
        padding-bottom: 0.72rem;
    }
    
    .mt-1, .mt-2, .mt-3, .mt-4, .mt-5 {
        margin-top: 0.58rem;
    }
    
    .mb-1, .mb-2, .mb-3, .mb-4, .mb-5 {
        margin-bottom: 0.67rem;
    }
}

/* High Contrast Mode - Responsive Adjustments */
@media (prefers-contrast: high) {
    @media (max-width: 767.98px) {
        .service-card,
        .pricing-card,
        .team-member,
        .review-card,
        .case-study-card,
        .process-step,
        .timeline-item,
        .job-card,
        .info-card,
        .blog-card,
        .faq-card {
            border: 3px solid #000;
        }
    }
}

/* Reduced Motion - Responsive Adjustments */
@media (prefers-reduced-motion: reduce) {
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card,
    .gallery-item {
        transition: none;
    }
    
    .service-card:hover,
    .pricing-card:hover,
    .team-member:hover,
    .review-card:hover,
    .case-study-card:hover,
    .process-step:hover,
    .timeline-item:hover,
    .job-card:hover,
    .info-card:hover,
    .blog-card:hover,
    .faq-card:hover,
    .gallery-item:hover {
        transform: none;
    }
}

/* Touch Device Adjustments */
@media (hover: none) and (pointer: coarse) {
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        padding: 1.5rem;
    }
    
    .btn {
        padding: 1rem 2rem;
        font-size: 1.21rem;
    }
    
    .form-control {
        padding: 1rem;
        font-size: 1.18rem;
    }
    
    .navbar-nav .nav-link {
        padding: 1rem;
    }
}

/* Dark Mode Support */

/* Container Adjustments for Ultra-Wide Screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-section h1 {
        font-size: 3rem;
    padding-top: 175px;
}
    
    .hero-section p {
        font-size: 1.89rem;
    }
    
    .feature-box,
    .feature-item {
        padding: 3rem;
    }
    
    .feature-box i,
    .feature-item i {
        font-size: 4.52rem;
    }
    
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        padding: 3rem;
    }
    
    .pricing-card .price {
        font-size: 3rem;
    }
    
    .process-step .step-number {
        width: 90px;
        height: 90px;
        font-size: 1.86rem;
    }
    
    .team-member img {
        width: 180px;
        height: 180px;
    }
    
    .gallery-item img {
        height: 320px;
    }
    
    .service-card img {
        height: 280px;
    }
}

/* Accessibility Improvements */
@media (prefers-reduced-transparency: reduce) {
    .hero-section::before {
        opacity: 1;
    }
    
    .card,
    .service-card,
    .pricing-card,
    .team-member,
    .review-card,
    .case-study-card,
    .process-step,
    .timeline-item,
    .job-card,
    .info-card,
    .blog-card,
    .faq-card {
        background: #fff;
        border: 1px solid #b5b5b5;
    }
}

/* Focus Indicators for Keyboard Navigation */
@media (prefers-reduced-motion: no-preference) {
    .service-card:focus,
    .pricing-card:focus,
    .team-member:focus,
    .review-card:focus,
    .case-study-card:focus,
    .process-step:focus,
    .timeline-item:focus,
    .job-card:focus,
    .info-card:focus,
    .blog-card:focus,
    .faq-card:focus {
        outline: 2px solid #0c8be9;
        outline-offset: 2px;
    }
}

/* Smooth Scrolling */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Performance Optimizations */
@media (prefers-reduced-data: reduce) {
    .hero-section::before {
        background: none;
    }
    
    .service-card img,
    .team-member img,
    .gallery-item img {
        content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect width="100" height="100" fill="%23ddd"/><text x="50%" y="50%" text-anchor="middle" dy="0.3em" fill="%23999">Image</text></svg>');
    }
}