/* Mobile First Responsive Design */

/* Small devices (phones, up to 576px) */
@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .hero-section h2 {
        font-size: 1.22rem;
    }
    
    section h2 {
        font-size: 2rem;
    }
    
    section h3 {
        font-size: 1.23rem;
    }
    
    #process .col-md-2:not(:last-child)::after {
        display: none;
    }
    
    #timeline .col-md-2 {
        margin-bottom: 2rem;
    }
    
    #team .col-md-2 {
        margin-bottom: 3rem;
    }
    
    .navbar-brand {
        font-size: 1.30rem;
    }
    
    .card-img-top {
        height: 150px;
    }
    
    #contacts .col-md-8,
    #contacts .col-md-4 {
        margin-bottom: 2rem;
    }
}

/* Medium devices (tablets, 576px to 767.98px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section h1 {
        font-size: 2.55rem;
    }
    
    section h2 {
        font-size: 2.21rem;
    }
    
    #process .col-md-2:not(:last-child)::after {
        content: '↓';
        right: 50%;
        top: 100%;
        transform: translateX(50%);
    }
    
    .card-img-top {
        height: 180px;
    }
}

/* Large devices (desktops, 768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section h1 {
        font-size: 2.82rem;
    }
    
    section h2 {
        font-size: 2.40rem;
    }
    
    .card-img-top {
        height: 190px;
    }
}

/* Extra large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
    .hero-section {
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .card-img-top {
        height: 200px;
    }
}

/* Ultra-wide screens (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
    
    .hero-section h1 {
        font-size: 3.54rem;
    }
    
    section h2 {
        font-size: 3rem;
    }
}

/* Print styles */
@media print {
    .navbar,
    footer,
    #contacts,
    .btn {
        display: none !important;
    }
    
    .hero-section {
        background: white !important;
        color: black !important;
        min-height: auto !important;
    }
    
    .card {
        box-shadow: none !important;
        border: 1px solid #c9bcbd !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid var(--text-dark);
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}