/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: var(--space-3xl);
    }
    
    .intro__title {
        font-size: var(--font-size-2xl);
    }
    
    .hero__profile {
        margin-bottom: var(--space-2xl);
    }
    
    .services__grid {
        flex-direction: column;
        align-items: center;
    }
    
    .service-card {
        width: 100%;
        max-width: 400px;
    }
    
    .testimonials__grid {
        flex-direction: column;
        align-items: center;
    }
    
    .testimonial-card {
        width: 100%;
        max-width: 400px;
    }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {

    

    .hamburger-menu {
        display: flex;
    }
    
    .navigation__close-btn {
        display: flex;
    }
    
    .navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.15);
        padding: 90px 25px 40px;
        transition: right 0.4s var(--transition-bounce);
        z-index: var(--z-index-fixed);
        border-left: 1px solid var(--glass-border);
        overflow-y: auto;
    }
    
    .navigation.active {
        right: 0;
    }
    
    .navigation__list {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    
    .navigation__item {
        margin: var(--space-xs) 0;
    }
    
    .navigation__link {
        padding: var(--space-md) var(--space-lg);
        border-radius: var(--radius-md);
        margin: var(--space-xs) 0;
        text-align: right;
        font-size: var(--font-size-base);
        font-weight: 600;
        border: 1px solid transparent;
        transition: all var(--transition-normal);
    }
    
    .navigation__link:hover {
        background: rgba(99, 102, 241, 0.15);
        border-color: var(--color-primary-light);
        transform: translateX(-5px);
    }
    
    .navigation__link--active {
        background: rgba(99, 102, 241, 0.2);
        color: var(--color-primary);
        border-color: var(--color-primary-light);
    }
    
    .navigation__link::after {
        display: none;
    }
    
    .intro__title {
        font-size: var(--font-size-xl);
    }
    
    .profile-image__img {
        width: 200px;
        height: 200px;
    }
    
    .profile-image::before {
        width: 220px;
        height: 220px;
    }
    
    .intro__tagline {
        font-size: var(--font-size-base);
        padding: var(--space-sm) var(--space-lg);
    }
    
    .intro__description {
        font-size: var(--font-size-base);
        text-align: right;
    }
    
    .section-title, .testimonials__title {
        font-size: var(--font-size-xl);
    }
    
    .service-card {
        padding: var(--space-xl) var(--space-lg);
    }
    
    .service-card__icon {
        width: 70px;
        height: 70px;
        font-size: var(--font-size-xl);
    }
    
    .testimonials {
        padding: var(--space-3xl) 0;
        border-radius: var(--radius-lg);
        margin: var(--space-2xl) 0;
    }
    
    .contact {
        padding: var(--space-3xl) 0;
    }
    
    .footer__content {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }
    
    .footer__links {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-md);
    }
    
    .logo {
        font-size: var(--font-size-xl);
    }
    
    .intro__title {
        font-size: var(--font-size-lg);
    }
    
    .profile-image__img {
        width: 180px;
        height: 180px;
    }
    
    .profile-image::before {
        width: 200px;
        height: 200px;
    }
    
    .btn {
        padding: var(--space-sm) var(--space-lg);
        font-size: var(--font-size-base);
    }
    
    .social-links__link {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-lg);
    }
    
    .navigation {
        width: 90%;
        padding: 85px 20px 40px;
    }
    
    .navigation__link {
        padding: var(--space-md) var(--space-md);
        font-size: var(--font-size-base);
    }
    
    .navigation__close-btn {
        top: var(--space-lg);
        left: var(--space-lg);
        width: 36px;
        height: 36px;
    }
}