/* ===== FULLY RESPONSIVE DESIGN (FIXED) ===== */

/* Large Desktop (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero__title {
        font-size: 4.5rem;
    }
    
    .section-title {
        font-size: 3.5rem;
    }
}

/* Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }
    
    .services__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .tech__grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* Large Tablet/Small Desktop (992px - 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
        padding: 0 1.5rem;
    }
    
    .hero__content {
        gap: 3rem;
    }
    
    .services__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .tech__grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
        padding: 0 1rem;
    }
    
    /* FIXED Mobile Navigation (keeping your working version) */
    .nav__toggle {
        display: flex;
        z-index: 1300;
        cursor: pointer;
    }
    
    .nav__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        z-index: 1200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        padding: 2rem;
    }
    
    .nav__menu.active {
        transform: translateX(0);
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    .nav__menu > li {
        width: 100%;
        text-align: center;
        margin: 0;
    }
    
    .nav__link {
        font-size: 1.2rem;
        padding: 1rem;
        display: block;
        width: 100%;
        border-radius: 8px;
        transition: all 0.3s ease;
        background: transparent;
        color: var(--text-primary);
    }
    
    .nav__link:hover {
        background: var(--light-bg);
        color: var(--primary-blue);
    }
    
    .nav__dropdown {
        width: 100%;
        position: relative;
        margin: 0;
    }
    
    .nav__dropdown .dropdown-toggle {
        background: transparent;
        color: var(--text-primary);
        border-radius: 8px;
        margin-bottom: 0;
    }
    
    .nav__dropdown .dropdown-toggle:hover {
        background: var(--light-bg);
        color: var(--primary-blue);
    }
    
    .nav__submenu {
        position: static;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transform: none;
        box-shadow: none;
        background: transparent;
        border-radius: 8px;
        transition: all 0.3s ease;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .nav__dropdown.mobile-open .nav__submenu {
        opacity: 1;
        visibility: visible;
        max-height: 400px;
        padding: 0.5rem 0;
        background: var(--light-bg);
        margin-top: 0.5rem;
    }
    
    .nav__submenu .nav__link {
        font-size: 1rem;
        padding: 0.75rem 1rem;
        margin: 0;
        border-radius: 4px;
        background: transparent;
        color: var(--text-secondary);
    }
    
    .nav__submenu .nav__link:hover {
        background: var(--white);
        color: var(--primary-blue);
    }
    
    /* RESTORED: Missing Hero Responsiveness */
    .hero {
        min-height: 75vh;
        padding: 100px 0 60px;
    }
    
    .hero__content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .hero__visual {
        order: -1;
        height: 300px;
    }
    
    .hero__buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* RESTORED: Missing Services Responsiveness */
    .services__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* RESTORED: Missing About Responsiveness */
    .about__content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .about__video {
        height: 250px;
        order: -1;
    }
    
    /* RESTORED: Missing Stats Responsiveness */
    .stats__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    /* Process - Mobile Styles */
    .process__minimal {
        padding: 2rem 1.5rem;
    }
    
    .process__minimal::before {
        left: 37px;
    }
    
    .process__step-minimal {
        padding: 1.5rem 0;
    }
    
    .process__step-minimal:hover {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin: 0 -1.5rem;
        transform: translateX(5px);
    }
    
    .process__step-number {
        width: 35px;
        height: 35px;
        font-size: 0.9rem;
        margin-right: 1.5rem;
    }
    
    .process__step-content h3 {
        font-size: 1.1rem;
    }
    
    .process__step-content p {
        font-size: 0.9rem;
    }
    
    .process__step-icon {
        font-size: 1.3rem;
        margin-left: 0.5rem;
    }
    
    /* Tech Grid */
    .tech__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    
    .tech__item {
        min-height: 120px;
        padding: 1.5rem 1rem;
    }
    
    .tech__item i {
        font-size: 2.5rem;
    }
    
    .tech__item span {
        font-size: 0.9rem;
    }
    
    /* RESTORED: Missing Testimonials Fix */
    .testimonial {
        padding: 2rem;
    }
    
    .testimonial::before {
        display: none;
    }
    
    .testimonial__content p {
        font-size: 1.2rem;
    }
    
    /* Footer */
    .footer__content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Mobile Large (576px - 767px) */
@media (max-width: 767px) {
    .container {
        padding: 0 1rem;
    }
    
    /* Hero */
    .hero {
        min-height: 70vh;
        padding: 80px 0 50px;
    }
    
    .hero__visual {
        height: 250px;
    }
    
    .hero__buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 1rem;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    /* Mobile Navigation - Smaller screens */
    .nav__menu {
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .nav__link {
        font-size: 1.1rem;
        padding: 0.75rem;
    }
    
    .nav__submenu .nav__link {
        font-size: 0.95rem;
        padding: 0.6rem 0.75rem;
    }
    
    /* Sections */
    .services,
    .about,
    .stats,
    .process,
    .tech,
    .testimonials,
    .cta {
        padding: 4rem 0;
    }
    
    /* Stats */
    .stats__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Process */
    .process {
        padding: 3rem 0;
    }
    
    .process__minimal {
        padding: 1.5rem;
    }
    
    .process__minimal::before {
        left: 32px;
    }
    
    .process__step-minimal {
        align-items: flex-start;
        padding: 1rem 0;
    }
    
    .process__step-number {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
        margin-right: 1rem;
        margin-top: 0.25rem;
    }
    
    .process__step-content {
        margin-right: 0.5rem;
    }
    
    .process__step-content h3 {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    
    .process__step-content p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
    
    .process__step-icon {
        align-self: flex-start;
        margin-top: 0.25rem;
        font-size: 1.2rem;
        width: 20px;
    }
    
    /* Tech Grid */
    .tech__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .tech__item {
        min-height: 100px;
        padding: 1rem;
    }
    
    .tech__item i {
        font-size: 2rem;
    }
    
    .tech__item span {
        font-size: 0.8rem;
    }
    
    /* Clients */
    .clients__slider {
        padding: 1.5rem 0;
    }
    
    .client-logo {
        flex: 0 0 150px;
        height: 80px;
        padding: 1rem;
    }
    
    .client-logo img {
        max-height: 45px;
        max-width: 100px;
    }
    
    /* RESTORED: Testimonials Mobile Fix */
    .testimonial {
        padding: 1.5rem;
        margin-top: 0;
    }
    
    .testimonial::before {
        display: none;
    }
    
    .testimonial__content p {
        font-size: 1.1rem;
        margin-top: 0;
    }
    
    /* Footer - MOBILE REORGANIZATION */
    .footer__content {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: left;
    }
    
    .footer__content .footer__section:nth-child(1) {
        order: 1;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1.5rem;
    }
    
    .footer__logo {
        margin: 0 auto 1rem;
    }
    
    .footer__content .footer__section:nth-child(2) {
        order: 2;
    }
    
    .footer__content .footer__section:nth-child(2) ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem 1rem;
        font-size: 0.85rem;
    }
    
    .footer__content .footer__section:nth-child(3) {
        order: 3;
    }
    
    .footer__content .footer__section:nth-child(3) ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
        font-size: 0.85rem;
    }
    
    .footer__content .footer__section:nth-child(4) {
        order: 4;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 1.5rem;
    }
    
    .footer__contact {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .footer__contact p {
        justify-content: center;
        font-size: 0.85rem;
    }
    
    .footer__social {
        justify-content: center;
        margin-top: 1rem;
        gap: 0.75rem;
    }
    
    .footer__social a {
        width: 35px;
        height: 35px;
    }
}

/* Mobile Small (up to 575px) */
@media (max-width: 575px) {
    .container {
        padding: 0 0.75rem;
    }
    
    /* Hero */
    .hero {
        min-height: 60vh;
        padding: 70px 0 40px;
    }
    
    .hero__title {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .hero__visual {
        height: 200px;
    }
    
    /* Mobile Navigation - Extra small screens */
    .nav__menu {
        gap: 0.75rem;
        padding: 1rem;
    }
    
    .nav__link {
        font-size: 1rem;
        padding: 0.6rem;
    }
    
    .nav__submenu .nav__link {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    /* Sections */
    .services,
    .about,
    .stats,
    .process,
    .tech,
    .testimonials,
    .cta {
        padding: 3rem 0;
    }
    
    .section-header {
        margin-bottom: 2.5rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
    
    .service-card {
        padding: 1.5rem;
    }
    
    .service-card__icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Tech Stack - Horizontal Scroll */
    .tech__grid {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        padding: 1rem 0;
        margin-top: 2rem;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    .tech__item {
        flex: 0 0 100px;
        min-height: 100px;
        padding: 1rem;
    }
    
    .tech__item i {
        font-size: 2rem;
    }
    
    .tech__item span {
        font-size: 0.75rem;
    }
    
    .tech__grid::-webkit-scrollbar {
        height: 4px;
    }
    
    .tech__grid::-webkit-scrollbar-track {
        background: var(--light-bg);
        border-radius: 2px;
    }
    
    .tech__grid::-webkit-scrollbar-thumb {
        background: var(--primary-blue);
        border-radius: 2px;
    }
    
    .client-logo {
        flex: 0 0 120px;
        height: 60px;
    }
    
    .client-logo img {
        max-height: 35px;
        max-width: 80px;
    }
    
    /* RESTORED: Testimonials Extra Mobile Fixes */
    .testimonial {
        padding: 1.25rem;
        margin: 0;
    }
    
    .testimonial__content {
        margin: 0;
        padding: 0;
    }
    
    .testimonial__content p {
        font-size: 1rem;
        margin: 0 0 1.5rem 0;
    }
    
    .stat-card {
        padding: 2rem 1.5rem;
    }
    
    .stat-number {
        font-size: 3rem;
    }
    
    .stat-suffix {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 1rem;
    }
    
    .footer {
        padding: 2.5rem 0 1.5rem;
    }
    
    .footer__content {
        gap: 1rem;
    }
    
    .footer__section h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .footer__section p {
        font-size: 0.8rem;
        line-height: 1.4;
    }
    
    .footer__content .footer__section:nth-child(2) ul {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .footer__content .footer__section:nth-child(3) ul {
        flex-direction: column;
        gap: 0.25rem;
        align-items: center;
    }
    
    .footer__contact p {
        font-size: 0.8rem;
        gap: 0.5rem;
    }
    
    .footer__social a {
        width: 30px;
        height: 30px;
    }
}

/* Ultra Small Mobile (up to 360px) */
@media (max-width: 360px) {
    .container {
        padding: 0 0.5rem;
    }
    
    .hero__title {
        font-size: 1.7rem;
    }
    
    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .service-card {
        padding: 1.25rem;
    }
    
    .tech__item {
        flex: 0 0 90px;
        min-height: 90px;
        padding: 0.75rem;
    }
    
    .tech__item i {
        font-size: 1.5rem;
    }
    
    .tech__item span {
        font-size: 0.7rem;
    }
}


/* ===== ABOUT PAGE RESPONSIVE FIXES ===== */

@media (max-width: 991px) {
    /* Mission & Vision */
    .mission-vision__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .mission-card, .vision-card {
        padding: 2rem;
    }
    
    /* Choose Us Grid */
    .choose-us__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Core Values */
    .values__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 767px) {
    /* Mission & Vision Icons */
    .mission-icon, .vision-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .mission-card, .vision-card {
        padding: 1.5rem;
    }
    
    .mission-card h3, .vision-card h3 {
        font-size: 1.3rem;
    }
    
    /* Choose Us Items */
    .choose-item {
        padding: 1.5rem;
    }
    
    .choose-item__icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    /* Core Values */
    .values__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .value-card {
        padding: 1.5rem;
    }
    
    .value-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 575px) {
    /* Further mobile optimizations */
    .mission-card, .vision-card,
    .choose-item, .value-card {
        padding: 1.25rem;
    }
    
    .mission-icon, .vision-icon,
    .choose-item__icon, .value-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
}


/* About Page Mobile Fixes */
@media (max-width: 991px) {
    .hero {
        padding-top: 140px; /* Extra margin for mobile to prevent cutting */
    }
    
    .hero__visual {
        margin-top: 2rem; /* Additional top margin for illustration */
    }
}

@media (max-width: 767px) {
    .hero {
        padding-top: 120px;
    }
    
    .hero__visual {
        margin-top: 1.5rem;
        height: 280px; /* Adjust height for mobile */
    }
}

@media (max-width: 575px) {
    .hero {
        padding-top: 100px;
    }
    
    .hero__visual {
        margin-top: 1rem;
        height: 250px;
    }
}

/* About Page Hero Mobile Fixes - No Overlapping */
/* ===== CLEAN ABOUT PAGE RESPONSIVE ===== */

/* Hero Section - Simple Mobile Fix */
.hero__visual {
    height: 400px;
    margin: 2rem 0;
}

.hero__illustration svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 991px) {
    .hero {
        padding-top: 140px;
    }
    
    .hero__visual {
        height: 350px;
        margin: 2.5rem 0;
    }
    
    /* Mission & Vision */
    .mission-vision__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .mission-card, .vision-card {
        padding: 2rem;
    }
    
    /* Choose Us Grid */
    .choose-us__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Core Values */
    .values__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 767px) {
    .hero {
        padding-top: 120px;
    }
    
    .hero__visual {
        height: 300px;
        margin: 2rem 0;
    }
    
    /* Mission & Vision Icons */
    .mission-icon, .vision-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .mission-card, .vision-card {
        padding: 1.5rem;
    }
    
    .mission-card h3, .vision-card h3 {
        font-size: 1.3rem;
    }
    
    /* Choose Us Items */
    .choose-item {
        padding: 1.5rem;
    }
    
    .choose-item__icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    /* Core Values */
    .values__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .value-card {
        padding: 1.5rem;
    }
    
    .value-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 575px) {
    .hero {
        padding-top: 100px;
    }
    
    .hero__visual {
        height: 280px;
        margin: 1.5rem 0;
    }
    
    .hero__title {
        font-size: 1.8rem;
    }
    
    .hero__subtitle {
        font-size: 1rem;
    }
    
    /* Further mobile optimizations */
    .mission-card, .vision-card,
    .choose-item, .value-card {
        padding: 1.25rem;
    }
    
    .mission-icon, .vision-icon,
    .choose-item__icon, .value-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
}


/* ===== WEB DEVELOPMENT SERVICE PAGE RESPONSIVE ===== */

@media (max-width: 991px) {
    .service-hero__content {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }
    
    .service-hero__title {
        font-size: 3rem;
    }
    
    .overview__grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .types__grid {
        grid-template-columns: 1fr;
    }
    
    .portfolio__grid {
        grid-template-columns: 1fr;
    }
    
    .tech__grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 767px) {
    .service-hero {
        padding: 6rem 0 4rem;
    }
    
    .service-hero__title {
        font-size: 2.5rem;
    }
    
    .service-hero__subtitle {
        font-size: 1.125rem;
    }
    
    .service-hero__buttons {
        justify-content: center;
    }
    
    .overview-item,
    .type-card {
        padding: 2rem;
    }
    
    .tech-category {
        padding: 2rem;
    }
    
    .portfolio-item__content {
        padding: 1.5rem;
    }
}

@media (max-width: 575px) {
    .service-hero__title {
        font-size: 2rem;
    }
    
    .service-hero__buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .service-hero__buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .overview__grid {
        grid-template-columns: 1fr;
    }
    
    .tech__grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
        gap: 1rem;
    }
    
    .tech-item {
        padding: 1rem;
    }
    
    .tech-item i {
        font-size: 2rem;
    }
}