/* Mobile First Responsive Design */

/* Extra Large screens (1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    #hero h1 {
        font-size: 3.5rem;
    }
    
    .service-card {
        padding: 40px;
    }
    
    .team-member img {
        width: 180px;
        height: 180px;
    }
}

/* Large screens (992px and up) */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
  font-size: 12px !important;
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    #hero {
        background-attachment: fixed;
    }
    
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .process-item {
        border-right: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .process-item:last-child {
        border-right: none;
    }
}

/* Medium screens (768px and up) */
@media (min-width: 768px) {
    .section-title {
        margin-bottom: 80px;
    }
    
    .hero-content {
        padding-right: 2rem;
    }
    
    .contact-form {
        padding: 50px;
    }
    
    .timeline-item {
        margin-left: 30px;
    }
    
    .timeline-item::before {
        left: -45px;
    }
    
    .faq-item {
        margin-bottom: 20px;
    }
    
    .gallery-item img {
        height: 300px;
    }
}

/* Small screens and down (767px and below) */
@media (max-width: 767.98px) {
    /* Typography adjustments */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .navbar-brand {
        font-size: 1.1rem !important;
    }
    
    /* Hero section mobile optimizations */
    #hero {
        min-height: 100vh;
        background-attachment: scroll;
        text-align: center;
    }
    
    .hero-content {
        padding: 2rem 0;
        order: 2;
    }
    
    .hero-image {
        order: 1;
        margin-bottom: 2rem;
    }
    
    .decorative-shape {
        display: none;
    }
    
    /* Section padding */
    section {
        padding: 60px 0 !important;
    }
    
    /* Service cards */
    .service-card {
        margin-bottom: 2rem;
        padding: 25px;
    }
    
    .service-card img {
        width: 60px;
        height: 60px;
    }
    
    .service-price {
        font-size: 1.5rem;
    }
    
    /* Feature items */
    .feature-item {
        margin-bottom: 2rem;
        padding: 20px;
    }
    
    .feature-item i {
        font-size: 2.5rem;
    }
    
    /* Price cards */
    .price-card {
        margin-bottom: 2rem;
        padding: 30px 20px;
    }
    
    .price-card .price {
        font-size: 2.5rem;
    }
    
    /* Team members */
    .team-member {
        margin-bottom: 2rem;
        padding: 25px 15px;
    }
    
    .team-member img {
        width: 120px;
        height: 120px;
    }
    
    /* Reviews */
    .review-item {
        margin-bottom: 2rem;
        padding: 25px;
    }
    
    /* Case studies */
    .case-study-item {
        margin-bottom: 2rem;
        padding: 30px;
    }
    
    /* Process items */
    .process-item {
        margin-bottom: 2rem;
        padding: 20px 15px;
    }
    
    .process-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    /* Timeline */
    .timeline-item {
        margin-left: 0;
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .timeline-item::before {
        left: -15px;
        width: 20px;
        height: 20px;
        top: 20px;
    }
    
    /* Career items */
    .career-item {
        padding: 25px;
        margin-bottom: 15px;
    }
    
    /* Core info */
    .core-info-item {
        margin-bottom: 2rem;
        padding: 20px 15px;
    }
    
    .core-info-item i {
        font-size: 2.5rem;
    }
    
    /* Contact form */
    .contact-form {
        padding: 30px 20px;
        margin: 0 15px;
    }
    
    /* Blog items */
    .blog-item {
        margin-bottom: 2rem;
    }
    
    .blog-item img {
        height: 180px;
    }
    
    .blog-content {
        padding: 20px;
    }
    
    /* FAQ */
    .faq-question {
        padding: 15px;
        font-size: 0.9rem;
    }
    
    .faq-answer {
        padding: 15px;
    }
    
    /* Gallery */
    .gallery-item {
        margin-bottom: 20px;
    }
    
    .gallery-item img {
        height: 200px;
    }
    
    /* Footer */
    footer {
        padding: 40px 0 15px;
        text-align: center;
    }
    
    .footer-section {
        margin-bottom: 25px;
    }
    
    /* Navigation */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        border-radius: 10px;
        margin-top: 10px;
        padding: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }
    
    .navbar-nav .nav-link {
  font-size: 12px !important;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }
    
    /* Breadcrumbs */
    .breadcrumb {
        padding: 15px 0;
    }
    
    .breadcrumb-item img {
        width: 16px;
        height: 16px;
    }
    
    /* Buttons */
    .btn-primary {
        padding: 12px 30px;
        font-size: 0.9rem;
    }
    
    /* Section titles */
    .section-title {
        margin-bottom: 40px;
        padding: 0 15px;
    }
    
    .section-title h2::after {
        width: 40px;
        height: 2px;
    }
}

/* Extra small screens (575px and below) */
@media (max-width: 575.98px) {
    /* Further typography adjustments */
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.35rem;
    }
    
    h3 {
        font-size: 1.15rem;
    }
    
    /* Container padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Hero adjustments */
    #hero {
        min-height: 90vh;
    }
    
    .hero-content {
        padding: 1.5rem 0;
    }
    
    /* Service price */
    .service-price {
        font-size: 1.25rem;
    }
    
    /* Price card price */
    .price-card .price {
        font-size: 2rem;
    }
    
    /* Contact form */
    .contact-form {
        margin: 0 10px;
        padding: 25px 15px;
    }
    
    /* Form controls */
    .form-control {
        padding: 12px !important;
        font-size: 14px !important;
    }
    
    /* Blog content */
    .blog-content {
        padding: 15px;
    }
    
    /* FAQ styling */
    .faq-question {
        padding: 12px;
        font-size: 0.85rem;
    }
    
    .faq-answer {
        padding: 12px;
        font-size: 0.9rem;
    }
    
    /* Gallery images */
    .gallery-item img {
        height: 150px;
    }
    
    /* Navbar brand */
    .navbar-brand {
        font-size: 1rem !important;
    }
    
    /* Section padding */
    section {
        padding: 40px 0 !important;
    }
    
    /* Button adjustments */
    .btn-primary {
        padding: 10px 25px;
        font-size: 0.85rem;
    }
}

/* Swiper mobile optimizations */
@media (max-width: 767.98px) {
    /* Disable autoplay and effects on mobile */
    .swiper {
        --swiper-navigation-size: 35px;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        height: 35px;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 16px;
    }
    
    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
    
    /* Reviews slider mobile */
    #reviews .swiper-slide {
        padding: 15px;
    }
    
    /* Testimonials slider mobile */
    .testimonial-slider .swiper-slide {
        padding: 10px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .breadcrumb,
    footer,
    .btn,
    .swiper-navigation,
    .swiper-pagination {
        display: none !important;
    }
    
    section {
        padding: 20px 0 !important;
        break-inside: avoid;
    }
    
    .container {
        max-width: 100% !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3 {
        color: #000 !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .service-card,
    .price-card,
    .team-member,
    .review-item,
    .case-study-item,
    .blog-item,
    .faq-item,
    .gallery-item {
        border: 2px solid var(--primary-dark);
    }
    
    .btn-primary {
        border: 2px solid var(--primary-dark);
    }
    
    .form-control {
        border: 2px solid var(--primary-dark) !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-dark: #ffffff;
        --primary-gray: #e0e0e0;
        --primary-silver: #b0bec5;
    }
    
    body {
        background-color: #121212;
        color: #ffffff;
    }
    
    .navbar {
        background: rgba(18, 18, 18, 0.95) !important;
    }
    
    .service-card,
    .price-card,
    .team-member,
    .blog-item,
    .contact-form {
        background: #1e1e1e !important;
        color: #ffffff;
    }
    
    .form-control {
        background: #2a2a2a !important;
        border-color: #404040 !important;
        color: #ffffff !important;
    }
}

/* Focus styles for accessibility */
.btn:focus,
.form-control:focus,
.nav-link:focus,
.faq-question:focus {
    outline: 3px solid var(--primary-orange);
    outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-red);
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 9999;
}

.skip-link:focus {
    top: 6px;
}