/* Responsive CSS - EcoPackage Pro Template */

/* Tablet Styles */
@media (max-width: 991.98px) {
    .hero-section h1 {
        font-size: 2rem;
    padding-top: 225px;
}
    
    .hero-section p {
        font-size: 1rem;
    }
    
    section {
        padding: 60px 0;
    }
    
    section h2 {
        font-size: 2rem;
    }
    
    .timeline::before {
        left: 30px;
    }
    
    .timeline-item {
        padding-left: 60px;
        padding-right: 1rem;
        text-align: left;
    }
    
    .timeline-item:nth-child(odd) {
        padding-right: 1rem;
        padding-left: 60px;
        text-align: left;
    }
    
    .timeline-item:nth-child(even) {
        padding-left: 60px;
        padding-right: 1rem;
        text-align: left;
    }
    
    .timeline-year {
        left: 30px;
    }
    
    .team-member img {
        width: 100px;
        height: 100px;
    }
    
    .price-card.featured {
        transform: none;
    }
    
    .price-card.featured:hover {
        transform: translateY(-5px);
    }
    
    .process-step {
        margin-bottom: 2rem;
    }
}

/* Mobile Styles */
@media (max-width: 767.98px) {
    .hero-section {
        padding-top: 100px;
    }
    
    .hero-section h1 {
        font-size: 1.82rem;
        margin-bottom: 1rem;
    padding-top: 225px;
}
    
    .hero-section p {
        font-size: 1.07rem;
    }
    
    .hero-buttons {
        margin-top: 1.64rem;
    }
    
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.62rem;
    }
    
    section {
        padding: 40px 0;
    }
    
    section h2 {
        font-size: 1.89rem;
    }
    
    section h3 {
        font-size: 1.29rem;
    }
    
    .navbar-brand {
        font-size: 1.36rem;
    }
    
    .feature-card {
        padding: 1.5rem;
        margin-bottom: 1.65rem;
    }
    
    .service-card {
        margin-bottom: 1.64rem;
    }
    
    .feature-item {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .price-card {
        padding: 1.5rem;
        margin-bottom: 1.62rem;
    }
    
    .price-value {
        font-size: 2rem;
    }
    
    .team-member {
        margin-bottom: 1.66rem;
    }
    
    .team-member img {
        width: 80px;
        height: 80px;
    }
    
    .testimonial-card {
        margin-bottom: 1.74rem;
    }
    
    .testimonial-card .card-body {
        padding: 1.5rem;
    }
    
    .case-study-card {
        margin-bottom: 1.74rem;
    }
    
    .timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        padding-left: 50px;
        padding-right: 0;
    }
    
    .timeline-item:nth-child(odd) {
        padding-left: 50px;
        padding-right: 0;
    }
    
    .timeline-item:nth-child(even) {
        padding-left: 50px;
        padding-right: 0;
    }
    
    .timeline-year {
        left: 20px;
        font-size: 0.96rem;
        padding: 0.25rem 0.75rem;
    }
    
    .job-card {
        margin-bottom: 1.56rem;
    }
    
    .job-card .card-body {
        padding: 1.5rem;
    }
    
    .info-card {
        padding: 1.5rem;
        margin-bottom: 1.56rem;
    }
    
    .blog-card {
        margin-bottom: 1.58rem;
    }
    
    .blog-card .card-body {
        padding: 1.25rem;
    }
    
    .faq-card {
        margin-bottom: 1rem;
    }
    
    .faq-card .card-body {
        padding: 1.25rem;
    }
    
    .contact-info {
        padding: 1.5rem;
        margin-bottom: 1.63rem;
    }
    
    .contact-form .form-control {
        padding: 0.625rem 0.875rem;
    }
    
    .step-number {
        width: 50px;
        height: 50px;
        font-size: 1.27rem;
    }
    
    .process-step {
        padding: 1rem;
        margin-bottom: 1.74rem;
    }
    
    .innovation-card,
    .material-card,
    .impact-card,
    .trend-card,
    .partnership-card,
    .strategy-card,
    .cert-card,
    .rd-card,
    .supply-card,
    .responsibility-card {
        padding: 1.5rem;
        margin-bottom: 1.61rem;
    }
    
    .breadcrumb-nav {
        padding: 0.75rem 0;
        margin-top: 60px;
    }
    
    .breadcrumb-icon {
        width: 16px;
        height: 16px;
    }
    
    footer {
        text-align: center;
    }
    
    footer .col-lg-4 {
        margin-bottom: 2rem;
    }
}

/* Extra Small Mobile Styles */
@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: 1.51rem;
    padding-top: 225px;
}
    
    .hero-section p {
        font-size: 0.98rem;
    }
    
    section h2 {
        font-size: 1.62rem;
    }
    
    section h3 {
        font-size: 1.27rem;
    }
    
    .navbar-brand {
        font-size: 1.27rem;
    }
    
    .feature-card {
        padding: 1.25rem;
    }
    
    .service-card .card-body {
        padding: 1.25rem;
    }
    
    .price-card {
        padding: 1.25rem;
    }
    
    .price-value {
        font-size: 1.84rem;
    }
    
    .team-member img {
        width: 70px;
        height: 70px;
    }
    
    .testimonial-card .card-body {
        padding: 1.25rem;
    }
    
    .timeline-year {
        font-size: 0.81rem;
        padding: 0.2rem 0.5rem;
    }
    
    .job-card .card-body {
        padding: 1.25rem;
    }
    
    .info-card {
        padding: 1.25rem;
    }
    
    .blog-card .card-body {
        padding: 1rem;
    }
    
    .faq-card .card-body {
        padding: 1rem;
    }
    
    .contact-info {
        padding: 1.25rem;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .process-step {
        padding: 0.75rem;
    }
    
    .innovation-card,
    .material-card,
    .impact-card,
    .trend-card,
    .partnership-card,
    .strategy-card,
    .cert-card,
    .rd-card,
    .supply-card,
    .responsibility-card {
        padding: 1.25rem;
    }
    
    .hero-buttons .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.93rem;
    }
    
    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.98rem;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .service-card img,
    .blog-card img,
    .case-study-card img,
    .team-member img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Print Styles */
@media print {
    .navbar,
    .hero-buttons,
    .btn,
    .contact-form,
    footer {
        display: none;
    }
    
    .hero-section {
        background: none;
        color: #000;
    }
    
    .hero-section h1,
    .hero-section p {
        color: #000;
    }
    
    section {
        padding: 20px 0;
    }
    
    .service-card,
    .feature-card,
    .price-card,
    .testimonial-card,
    .blog-card,
    .faq-card {
        box-shadow: none;
        border: 1px solid #d4c9cb;
    }
    
    .case-study-card img,
    .service-card img,
    .blog-card img,
    .hero-image img {
        max-height: 200px;
    }
}