/* ===== RESPONSIVE DESIGN STYLES ===== */

/* Extra Small Devices (Portrait Phones) */
@media (max-width: 575.98px) {
    /* Hero Section */
    .hero-section {
        padding-top: 60px;
        text-align: center;
    }
    
    .hero-section h1 {
        font-size: var(--text-2xl);
        margin-bottom: 0.68rem;
    padding-top: 125px;
}
    
    .hero-section h2 {
        font-size: var(--text-lg);
        margin-bottom: 0.69rem;
    }
    
    .hero-section p {
        font-size: var(--text-base);
        margin-bottom: 1rem;
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: var(--text-lg);
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 0;
        text-align: center;
    }
    
    /* Sections */
    .section-title {
        font-size: var(--text-xl);
        margin-bottom: 0.62rem;
    }
    
    .section-subtitle {
        font-size: var(--text-lg);
        margin-bottom: 0.69rem;
    }
    
    .section-description {
        font-size: var(--text-sm);
        margin-bottom: 2rem;
    }
    
    /* Cards */
    .feature-box,
    .service-card,
    .pricing-card,
    .review-card,
    .case-study-card,
    .career-card,
    .info-card,
    .blog-card {
        margin-bottom: 1rem;
    }
    
    .feature-box {
        padding: 1rem;
    }
    
    .feature-box i {
        font-size: 2rem;
    }
    
    /* Team Section */
    .team-member {
        margin-bottom: 1rem;
    }
    
    .team-member img {
        width: 80px;
        height: 80px;
    }
    
    /* Process Section */
    .process-step .step-number {
        width: 40px;
        height: 40px;
        font-size: var(--text-base);
    }
    
    /* Contact Form */
    .contact-form {
        padding: 1rem;
    }
    
    /* Footer */
    footer .col-lg-4 {
        text-align: center;
        margin-bottom: 1rem;
    }
    
    /* Timeline */
    .timeline {
        padding-left: 1rem;
    }
    
    .timeline-item {
        padding-left: 1rem;
    }
    
    /* Gallery */
    #gallery .col-lg-3 {
        margin-bottom: 1rem;
    }
    
    /* Additional Pages */
    .item-card, .service-item, .experience-item, .safety-item, .success-item,
    .marketing-item, .tech-item, .creative-item, .partnership-item, .innovation-item {
        padding: 1rem;
        margin-bottom: 1rem;
    }
}

/* Small Devices (Landscape Phones) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Hero Section */
    .hero-section {
        padding-top: 70px;
    }
    
    .hero-section h1 {
        font-size: var(--text-3xl);
    padding-top: 125px;
}
    
    .hero-section h2 {
        font-size: var(--text-xl);
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: var(--text-lg);
    }
    
    /* Sections */
    .section-title {
        font-size: var(--text-2xl);
    }
    
    .section-subtitle {
        font-size: var(--text-xl);
    }
    
    /* Team Section */
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    /* Process Section */
    .process-step .step-number {
        width: 50px;
        height: 50px;
        font-size: var(--text-lg);
    }
    
    /* Contact Form */
    .contact-form {
        padding: 1.5rem;
    }
}

/* Medium Devices (Tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Hero Section */
    .hero-section {
        padding-top: 80px;
    }
    
    .hero-section h1 {
        font-size: var(--text-3xl);
    padding-top: 125px;
}
    
    .hero-section h2 {
        font-size: var(--text-2xl);
    }
    
    /* Navigation */
    .navbar-brand {
        font-size: var(--text-xl);
    }
    
    /* Team Section */
    .team-member img {
        width: 110px;
        height: 110px;
    }
    
    /* Process Section */
    .process-step .step-number {
        width: 55px;
        height: 55px;
        font-size: var(--text-xl);
    }
    
    /* Gallery Grid */
    #gallery .col-md-4 {
        margin-bottom: 1.61rem;
    }
    
    /* Cards spacing */
    .feature-box,
    .service-card,
    .pricing-card,
    .review-card {
        margin-bottom: 1.62rem;
    }
}

/* Large Devices (Desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Hero Section */
    .hero-section h1 {
        font-size: var(--text-4xl);
    padding-top: 125px;
}
    
    .hero-section h2 {
        font-size: var(--text-2xl);
    }
    
    /* Team Section */
    .team-member img {
        width: 120px;
        height: 120px;
    }
    
    /* Process Section */
    .process-step .step-number {
        width: 60px;
        height: 60px;
        font-size: var(--text-xl);
    }
}

/* Extra Large Devices (Large Desktops) */
@media (min-width: 1200px) {
    /* Hero Section */
    .hero-section h1 {
        font-size: var(--text-4xl);
    padding-top: 125px;
}
    
    .hero-section h2 {
        font-size: var(--text-2xl);
    }
    
    /* Container adjustments */
    .container {
        max-width: 1200px;
    }
    
    /* Team Section */
    .team-member img {
        width: 120px;
        height: 120px;
    }
    
    /* Process Section */
    .process-step .step-number {
        width: 60px;
        height: 60px;
        font-size: var(--text-xl);
    }
    
    /* Enhanced spacing for larger screens */
    .py-5 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 500px) {
    .hero-section {
        padding-top: 60px;
        min-height: 100vh;
    }
    
    .hero-section .container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* Print Styles */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    
    .navbar,
    .breadcrumb,
    .btn,
    .accordion-button,
    .contact-form,
    footer {
        display: none !important;
    }
    
    .hero-section,
    .section {
        page-break-inside: avoid;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    p {
        orphans: 3;
        widows: 3;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure crisp images and icons on high DPI screens */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .hero-section,
    .feature-box,
    .service-card,
    .pricing-card,
    .review-card,
    .case-study-card,
    .career-card,
    .info-card,
    .blog-card,
    .item-card,
    .service-item,
    .experience-item,
    .safety-item,
    .success-item,
    .marketing-item,
    .tech-item,
    .creative-item,
    .partnership-item,
    .innovation-item {
        transition: none !important;
        transform: none !important;
    }
    
    .hero-section:hover,
    .feature-box:hover,
    .service-card:hover,
    .pricing-card:hover,
    .review-card:hover,
    .case-study-card:hover,
    .career-card:hover,
    .info-card:hover,
    .blog-card:hover,
    .item-card:hover,
    .service-item:hover,
    .experience-item:hover,
    .safety-item:hover,
    .success-item:hover,
    .marketing-item:hover,
    .tech-item:hover,
    .creative-item:hover,
    .partnership-item:hover,
    .innovation-item:hover {
        transform: none !important;
    }
    
    #gallery img:hover {
        transform: none !important;
    }
}

/* Dark Mode Support (Optional) */

/* Focus Styles for Accessibility */
@media (min-width: 768px) {
    .navbar-nav .nav-link:focus,
    .btn:focus,
    .form-control:focus,
    .accordion-button:focus {
        outline: 2px solid var(--primary-blue);
        outline-offset: 2px;
    }
}

/* Hover Effects for Touch Devices */
@media (hover: none) {
    .feature-box:hover,
    .service-card:hover,
    .pricing-card:hover,
    .review-card:hover,
    .case-study-card:hover,
    .career-card:hover,
    .info-card:hover,
    .blog-card:hover,
    .item-card:hover,
    .service-item:hover,
    .experience-item:hover,
    .safety-item:hover,
    .success-item:hover,
    .marketing-item:hover,
    .tech-item:hover,
    .creative-item:hover,
    .partnership-item:hover,
    .innovation-item:hover {
        transform: none;
    }
    
    #gallery img:hover {
        transform: none;
    }
}

/* Custom Breakpoints */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Specific Section Responsiveness */
.hero-section .row {
    align-items: center;
}

@media (max-width: 991.98px) {
    .hero-section .row {
        text-align: center;
    }
    
    .hero-section .col-lg-6:last-child {
        margin-top: 2rem;
    }
}

/* Service Cards Responsive Grid */
@media (max-width: 767.98px) {
    .service-card {
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .service-card {
        max-width: 100%;
    }
}

/* Pricing Cards Responsive */
@media (max-width: 767.98px) {
    .pricing-card {
        margin-bottom: 2rem;
    }
}

/* FAQ Responsive */
@media (max-width: 767.98px) {
    .accordion-button {
        font-size: var(--text-sm);
        padding: 0.75rem;
    }
    
    .accordion-body {
        font-size: var(--text-sm);
    }
}

/* Contact Form Responsive */
@media (max-width: 767.98px) {
    .contact-form .row .col-md-6 {
        margin-bottom: 1rem;
    }
}

/* Gallery Responsive */
@media (max-width: 575.98px) {
    #gallery .col-lg-3 {
        margin-bottom: 0.55rem;
    }
}

/* Timeline Responsive */
@media (max-width: 767.98px) {
    .timeline::before {
        left: 0.5rem;
    }
    
    .timeline-item::before {
        left: -0.25rem;
        width: 8px;
        height: 8px;
    }
    
    .timeline-item {
        padding-left: 1.5rem;
    }
}

/* Additional Page Content Responsive */
@media (max-width: 767.98px) {
    .item-card h4, .service-item h4, .experience-item h4, .safety-item h4, .success-item h4,
    .marketing-item h4, .tech-item h4, .creative-item h4, .partnership-item h4, .innovation-item h4 {
        font-size: var(--text-sm);
    }
    
    .item-card p, .service-item p, .experience-item p, .safety-item p, .success-item p,
    .marketing-item p, .tech-item p, .creative-item p, .partnership-item p, .innovation-item p {
        font-size: var(--text-xs);
    }
}

/* Breadcrumb Responsive */
@media (max-width: 767.98px) {
    .breadcrumb-item img {
        width: 16px;
        height: 16px;
    }
}

/* Space Page Responsive */
@media (max-width: 767.98px) {
    #space {
        padding: 2rem 0;
    }
}

/* Utility Classes for Responsive Design */
.d-block-xs { display: block; }
.d-none-xs { display: none; }

@media (min-width: 576px) {
    .d-block-sm { display: block; }
    .d-none-sm { display: none; }
}

@media (min-width: 768px) {
    .d-block-md { display: block; }
    .d-none-md { display: none; }
}

@media (min-width: 992px) {
    .d-block-lg { display: block; }
    .d-none-lg { display: none; }
}

@media (min-width: 1200px) {
    .d-block-xl { display: block; }
    .d-none-xl { display: none; }
}