/* ═══════════════════════════════════════════════════════════
   TECHZONE — Responsive stylesheet
   Breakpoints aligned with Bootstrap 5:
     ≤ 1199px  (xl down)
     ≤  991px  (lg down)
     ≤  767px  (md down)
     ≤  575px  (sm down / xs)
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   ≤ 1199px
───────────────────────────────────────────────────────── */
@media screen and (max-width: 1199px) {

    /* About */
    .about-illus { height: 360px; }

    /* Footer */
    .footer-main { padding: 64px 0 52px; }
    .footer-cta  { padding-bottom: 90px; }
    .footer-cta__media { height: 170px; }
}


/* ─────────────────────────────────────────────────────────
   ≤ 991px  (tablets + phones)
───────────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {

    /* ── Navigation ── */
    .hamburger          { display: flex; }
    .main_menu,
    .header-contact-btn,
    .hdr-client,
    .btn-lang           { display: none; }
    #header .container  { justify-content: space-between; }

    /* ── Hero ── */
    .section_home   { padding-top: 0; min-height: 70vh; }
    .hero-content   { padding: 50px 20px; gap: 18px; }
    .hero-tagline   { font-size: 1.5rem; }
    .hero-logo-icon { width: 110px; margin-bottom: 24px; }

    /* ── Sections shared ── */
    .sec_head       { margin-bottom: 40px; }
    .sec_head h2    { font-size: 27px; }

    /* ── About ── */
    .about-illus        { height: 300px; }
    .about-bottom-row   { gap: 16px; }
    .txt-about          { margin-bottom: 40px; text-align: center; }

    /* ── Our Projects ── */
    .item-serv              { display: block; }
    .item-serv figure,
    .item-serv figure img   { width: 100%; }
    .option-site            { flex-wrap: wrap; justify-content: center; }
    .option-site li         { width: 100%; margin-top: 10px; }
    .option-site li:first-child { margin: 0; }

    /* ── Portfolio ── */
    .nav-tabs .nav-link { padding: 10px 12px; margin: 0 4px; }
    .item-port          { margin-bottom: 30px; }

    /* ── Testimonials ── */
    .content-testi                          { display: block; padding-left: 0; padding-right: 0; }
    .section_testimonials .sec_head         { width: 100%; text-align: center; margin-bottom: 40px; }
    .section_testimonials .sec_head h2:after{ left: 50%; transform: translateX(-50%); }
    .section_testimonials .owl-carousel     { width: 100%; padding-right: 0; padding-top: 30px; }
    #testi-slider .owl-stage                { padding: 0 !important; }

    /* ── Philosophy (service page) ── */
    .l-arrow:before,
    .about-analysis:after,
    .r-arrow:before     { display: none; }
    .lay-bottom         { padding-top: 0; display: block; }
    .lay-bottom .trans-box,
    .lay-bottom .about-box {
        left: 50%;
        transform: translateX(-50%) !important;
        margin: 5px 0 !important;
    }

    /* ── Blog ── */
    .item-blog { margin-bottom: 30px; }

    /* ── Footer ── */
    .footer-main  { padding: 56px 0 44px; }
    .footer-cta   { margin-top: 24px; padding-bottom: 100px; }
    .footer-cta__btn { align-self: flex-start; }

    /* ── Client portal ── */
    .cp-sidebar { position: static; margin-bottom: 24px; }

    /* ── Misc ── */
    .home_txt   { margin-top: 100px; text-align: center; margin-bottom: 40px; }
    .me-4       { margin: 0 !important; }
    .btn-view   { justify-content: center; }
}


/* ─────────────────────────────────────────────────────────
   ≤ 767px  (phones)
───────────────────────────────────────────────────────── */
@media screen and (max-width: 767px) {

    /* ── Navigation ── */
    .hamburger          { display: flex; }
    .main_menu,
    .header-contact-btn,
    .hdr-client,
    .btn-lang           { display: none; }
    .section_home       { padding-top: 0; }

    /* ── Hero ── */
    .hero-logo-icon { width: 90px;  margin-bottom: 18px; }
    .hero-logo-txt  { width: 220px; }
    .hero-tagline   { font-size: 1.25rem; }
    .hero-content   { padding: 40px 16px; gap: 14px; }

    /* ── Sections shared ── */
    .sec_head    { margin-bottom: 30px; }
    .sec_head h2 { font-size: 24px; margin-bottom: 24px; }
    .sec_head p  { font-size: 15px; }

    /* ── About ── */
    .about-illus        { height: 240px; }
    .about-photo-wrap   { max-height: 240px; }
    .about-bottom-row   { flex-direction: column; align-items: stretch; }
    .about-bottom-row .about-stats { width: 100%; border-inline-end: none; }
    .about-btn          { width: 100%; justify-content: center; }

    /* ── Services ── */
    #services img { width: 50%; }

    /* ── Portfolio ── */
    #button-all     { text-align: center; margin-right: 0; }
    .item-port > a  { height: 260px; }
    .filter-port    { overflow-x: auto; padding-bottom: 4px; }
    .nav-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ── Philosophy (hidden on phones — see service.blade.php d-lg-block) ── */
    .section_philosophy { display: none; }

    /* ── Footer ── */
    footer .pe-5    { padding-right: 0 !important; }
    #footer-img-center { text-align: center; }
    .footer-main    { padding: 48px 0 36px; }
    .footer-desc    { max-width: 100%; }
    .footer-social  { justify-content: center; }
    .footer-cta     { margin-top: 28px; }
    .footer-links-grid { padding-top: 24px; }

    /* ── Our Projects text ── */
    .item-serv .txt-serv h4 { text-align: center; }
    .item-serv .txt-serv p  { text-align: center; height: auto; }

    /* ── Service / inner page ── */
    .txt-page       { text-align: center; }
    .text-height    { height: auto; }

    /* ── Service section boxes ── */
    .section_features { padding: 60px 0; }

    /* ── Blog cards (welcome page — override inline 220px) ── */
    .bcard__img { height: 170px !important; }

    /* ── Service cards image area ── */
    .serv-card__img { max-height: 130px; }

    /* ── Testimonials — override inline height:90px ── */
    .item-testi > p { height: auto !important; max-height: 110px; overflow: hidden; }

    /* ── About: image above text on mobile ── */
    .section_about .about-photo-wrap { order: -1; }

    /* ── Prevent iOS auto-zoom (inputs < 16px font trigger zoom) ── */
    input, select, textarea { font-size: 16px !important; }

    /* ── Aside contact panel ── */
    .aside-contact { width: 85vw !important; right: -85vw; padding: 80px 24px 32px; }
    .show-aside    { transform: translateX(-85vw); }
}


/* ─────────────────────────────────────────────────────────
   ≤ 575px  (small phones)
───────────────────────────────────────────────────────── */
@media screen and (max-width: 575px) {

    /* ── Hero ── */
    .section_home   { min-height: auto; padding-top: 80px; padding-bottom: 30px; }
    .hero-logo-icon { width: 70px;  margin-bottom: 12px; }
    .hero-logo-txt  { width: 180px; }
    .hero-tagline   { font-size: 1rem; }
    .hero-content   { padding: 28px 14px; gap: 10px; }

    /* ── About stats ── */
    .about-stats { flex-direction: column; gap: 16px; }
    .about-stat:not(:last-child) {
        border-inline-end: none;
        border-bottom: 1px solid rgba(40, 118, 171, .12);
        padding-bottom: 16px;
    }

    /* ── Inner page header ── */
    .header-pages { padding: 50px 0 36px; }

    /* ── Sections shared ── */
    .sec_head h2 { font-size: 21px; }

    /* ── Portfolio ── */
    .item-port > a { height: 210px; }

    /* ── Pricing ── */
    .pric-box-top .pric-box .usd { font-size: 48px; }

    /* ── Service section boxes ── */
    .box-serv-four {
        flex-direction: column;
        text-align: center;
    }
    .box-serv-four figure   { margin: 0 auto 14px !important; }
    .box-serv-four .txt-feat-serv { width: 100%; }

    /* ── Client portal dashboard stats ── */
    .cpd-stats { grid-template-columns: 1fr 1fr; }

    /* ── Footer CTA ── */
    .footer-cta     { padding: 28px 20px 100px; }
    .footer-cta__btn { align-self: center; }

    /* ── Forms on pages (join / contact) ── */
    .form-join:before { display: none; }
}