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

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    html {
        font-size: 60%;
    }

    .hero-title {
        font-size: 5.5rem;
    }

    .hero-subtitle {
        font-size: 2.8rem;
    }

    .page-title {
        font-size: 5.5rem;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    html {
        font-size: 58%;
    }

    .hero-title {
        font-size: 5rem;
    }

    .hero-subtitle {
        font-size: 2.6rem;
    }

    .page-title {
        font-size: 5rem;
    }

    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
        margin-bottom: 5rem;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image {
        max-width: 500px;
        margin: 0 auto;
    }

    .about-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .about-image {
        max-width: 500px;
        margin: 0 auto 5rem;
    }

    .about-stats {
        justify-content: center;
    }

    .about-buttons {
        justify-content: center;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .contact-info {
        max-width: 600px;
        margin: 0 auto;
    }

    .timeline::before {
        left: 30px;
    }

    .timeline-dot {
        left: 30px;
    }

    .timeline-content {
        width: calc(100% - 80px);
        left: 80px !important;
    }

    .timeline-item:nth-child(odd) .timeline-content::after,
    .timeline-item:nth-child(even) .timeline-content::after {
        left: -10px;
        right: auto;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    html {
        font-size: 56%;
    }

    .section {
        padding: 8rem 0;
    }

    .hero-title {
        font-size: 4.5rem;
    }

    .hero-subtitle {
        font-size: 2.4rem;
    }

    .page-title {
        font-size: 4.5rem;
    }

    .section-title {
        font-size: 3.5rem;
    }

    .featured-grid,
    .services-grid,
    .links-grid {
        grid-template-columns: 1fr;
    }

    .featured-card,
    .service-card,
    .link-card {
        max-width: 450px;
        margin: 0 auto;
    }

    .skills-container {
        grid-template-columns: 1fr;
    }

    .testimonial-card {
        padding: 3rem 2rem;
    }

    .faq-question {
        padding: 1.5rem 2rem;
    }

    .faq-question h3 {
        font-size: 1.6rem;
    }

    .faq-item.active .faq-answer {
        padding: 0 2rem 1.5rem;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    html {
        font-size: 54%;
    }

    .hero-title {
        font-size: 4rem;
    }

    .hero-subtitle {
        font-size: 2.2rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1.5rem;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .page-title {
        font-size: 4rem;
    }

    .about-buttons {
        flex-direction: column;
        gap: 1.5rem;
    }

    .about-buttons .btn {
        width: 100%;
    }

    .about-stats {
        flex-direction: column;
        gap: 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .social-icons {
        justify-content: center;
    }

    .filter-tags {
        gap: 0.8rem;
    }

    .filter-tag {
        padding: 0.6rem 1.5rem;
        font-size: 1.2rem;
    }

    .contact-form-container {
        padding: 3rem 2rem;
    }

    .info-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .social-title {
        text-align: center;
    }

    .timeline-content {
        padding: 2rem 1.5rem;
    }
}