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

/* ---- Tablet: 1024px and below ---- */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hero-visual {
        display: none;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-grid .testimonial-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-grid .blog-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    /* Navbar */
    .nav-links,
    .nav-right .nav-cta {
        display: none;
    }

    .mobile-toggle {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }

    /* Sections */
    .section {
        padding: 80px 0;
    }

    /* Hero */
    .hero {
        padding-top: 100px;
        min-height: auto;
        padding-bottom: 80px;
    }

    .hero-title {
        font-size: 36px;
    }

    .hero-stats {
        gap: 24px;
    }

    /* Grids */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid .testimonial-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-grid .blog-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    /* CTA */
    .cta-content {
        padding: 48px 24px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    /* Scroll indicator */
    .scroll-indicator {
        display: none;
    }
}

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

    .hero-buttons {
        flex-direction: column;
    }

    .hero-stats {
        flex-direction: column;
        gap: 16px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}
/* ========================================
   OUR SERVICES PAGE - RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {

    .services-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .service-detail-grid.reverse {
        direction: ltr;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid::before {
        display: none;
    }

    .tech-categories {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-grid .pricing-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {

    .services-overview-grid { grid-template-columns: 1fr; }
    .process-grid           { grid-template-columns: 1fr; }
    .tech-categories        { grid-template-columns: 1fr; }

    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-grid .pricing-card:last-child {
        grid-column: span 1;
        max-width: 100%;
    }

    .page-hero        { padding: 140px 0 60px; }
    .page-hero-stats  { gap: 24px; }
    .detail-visual-card { min-height: 300px; }
}

@media (max-width: 480px) {
    .page-hero-stats { flex-direction: column; }
}

/* ========================================
   TEAM PAGE - RESPONSIVE
   ======================================== */

@media (max-width: 1100px) {

    .leadership-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hiring-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .culture-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .team-grid          { grid-template-columns: repeat(2, 1fr); }
    .hiring-grid        { grid-template-columns: 1fr; }
    .values-grid        { grid-template-columns: 1fr; }
    .hero-stats         { gap: 28px; }
    .culture-perks      { grid-template-columns: 1fr; }
    .culture-stats-row  { grid-template-columns: repeat(3, 1fr); }

    .leader-card-inner {
        flex-direction: column;
    }

    .leader-avatar-col {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--white-5);
    }

    .leader-info-col {
        border-left: none;
    }
}

@media (max-width: 560px) {

    .team-grid { grid-template-columns: 1fr; }

    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }

    .dept-tabs  { gap: 8px; }

    .dept-tab {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* ========================================
   PORTFOLIO PAGE - RESPONSIVE
   ======================================== */

@media (max-width: 1100px) {

    .feat-card {
        grid-template-columns: 1fr;
    }

    .feat-img { min-height: 260px; }

    .port-grid { grid-template-columns: repeat(2, 1fr); }

    .port-grid.list-view .pcard {
        grid-template-columns: 1fr;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-grid::before { display: none; }

    .clients-grid { grid-template-columns: repeat(3, 1fr); }
    .test-grid    { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {

    .port-grid    { grid-template-columns: 1fr; }
    .clients-grid { grid-template-columns: repeat(3, 1fr); }
    .test-grid    { grid-template-columns: 1fr; }

    .stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .stats-row .stat-item:nth-child(4),
    .stats-row .stat-item:nth-child(5) {
        border-right: none;
    }

    .feat-results { grid-template-columns: repeat(3, 1fr); }
    .hstats       { gap: 28px; }
    .cta-body     { padding: 48px 24px; }

    .filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {

    .clients-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: 1fr; }

    .cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .hstats {
        flex-direction: column;
        gap: 20px;
    }
}
/* ========================================
   BLOG POST PAGE - RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {

    .art-layout-inner {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .rel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .abar {
        flex-direction: column;
        align-items: flex-start;
    }

    .sgrid { grid-template-columns: repeat(2, 1fr); }

    .ctable          { font-size: 13px; }
    .ctable th,
    .ctable td       { padding: 10px 12px; }

    .cf-row          { grid-template-columns: 1fr; }
    .abio            { flex-direction: column; }
    .cmt-nested      { margin-left: 24px; }
    .rel-grid        { grid-template-columns: 1fr; }
    .cta-body        { padding: 48px 24px; }
}

@media (max-width: 480px) {

    .art-title { font-size: 26px; }
    .sgrid     { grid-template-columns: 1fr; }

    .cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .share-btns,
    .s-share { align-items: stretch; }

    .ssbtn { justify-content: center; }
}

/* ========================================
   REVIEWS PAGE - RESPONSIVE
   ======================================== */

@media (max-width: 1100px) {

    .reviews-grid    { grid-template-columns: repeat(2, 1fr); }
    .platform-cards  { grid-template-columns: repeat(2, 1fr); }

    .breakdown-grid  { grid-template-columns: 1fr; gap: 48px; }

    .featured-body {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .featured-right {
        display: flex;
        gap: 32px;
        justify-content: flex-start;
        text-align: left;
    }

    .write-inner { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {

    .reviews-grid   { grid-template-columns: 1fr; }
    .platform-cards { grid-template-columns: repeat(2, 1fr); }
    .video-grid     { grid-template-columns: 1fr; }

    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .stats-row .stat-item:nth-child(4),
    .stats-row .stat-item:nth-child(5) { border-right: none; }

    .category-ratings { grid-template-columns: 1fr 1fr; }
    .form-row          { grid-template-columns: 1fr; }

    .write-card  { padding: 32px 24px; }
    .cta-body    { padding: 48px 24px; }

    .filter-wrap { flex-direction: column; align-items: flex-start; }

    .rating-showcase { gap: 28px; }
    .rs-divider      { display: none; }

    .featured-card { padding: 32px 24px; }
}

@media (max-width: 540px) {

    .platform-cards { grid-template-columns: 1fr 1fr; }

    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .stats-row .stat-item { border-right: 1px solid var(--white-5); }
    .stats-row .stat-item:nth-child(even) { border-right: none; }

    .category-ratings { grid-template-columns: 1fr; }

    .cta-btns { flex-direction: column; align-items: center; }
}
/* ========================================
   CONTACT PAGE - RESPONSIVE
   ======================================== */

@media (max-width: 1100px) {

    .contact-grid { grid-template-columns: 1fr; }
    .map-inner    { grid-template-columns: 1fr; }

    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid::before { display: none; }
}

@media (max-width: 768px) {

    .service-selector { grid-template-columns: repeat(2, 1fr); }
    .social-grid      { grid-template-columns: 1fr; }
    .frow             { grid-template-columns: 1fr; }
    .form-card        { padding: 28px 24px; }
    .process-grid     { grid-template-columns: 1fr 1fr; }
    .hstats           { gap: 28px; }
    .cta-body         { padding: 48px 24px; }
}

@media (max-width: 480px) {

    .service-selector { grid-template-columns: repeat(2, 1fr); }
    .budget-row       { gap: 8px; }
    .process-grid     { grid-template-columns: 1fr; }

    .hstats   { flex-direction:column; gap:20px; }
    .cta-btns { flex-direction:column; align-items:center; }
}
/* ========================================
   BLOG DETAIL PAGE - RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .art-layout-inner { grid-template-columns: 1fr; }
    .sidebar          { position: static; }
    .related-grid     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .author-bar  { flex-direction: column; align-items: flex-start; }
    .stats-grid  { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: 1fr; }
    .cf-row      { grid-template-columns: 1fr; }
    .author-bio  { flex-direction: column; }
    .cm-nested   { margin-left: 24px; }
    .cta-body    { padding: 48px 24px; }

    .comp-table     { font-size: 13px; }
    .comp-table th,
    .comp-table td  { padding: 10px 12px; }
}

@media (max-width: 480px) {
    .art-title    { font-size: 26px; }
    .stats-grid   { grid-template-columns: 1fr; }
    .cta-btns     { flex-direction: column; align-items: center; }
    .share-btns   { flex-direction: column; align-items: center; }
}