/* ============================================================
   responsive.css
   Fills breakpoint gaps in style.css for smooth fluid layouts
   Covers: 991px (tablet landscape), 767px (tablet portrait / large phone),
           520px (small phone) additional fixes.
   ============================================================ */

/* ---------------------------------------------------------------
   1.  Viewport meta-equivalent: box-sizing & overflow safety
--------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------
   2.  Tablet landscape  (≤ 991px)
       style.css has almost nothing here – fill the gap.
--------------------------------------------------------------- */
@media screen and (max-width: 991px) {
    /* Navbar fixed 1170px → fluid (handled by #top-bar .site-header__container) */
    .main-titles {
        width: 100%;
        line-height: 1.4;
    }

    /* Banner quote – reduce huge top padding */
    .banner-quote {
        padding: 200px 0 0;
    }

    /* Tech icon sprite bar – reduce side margins to prevent overflow */
    .tech-icons li {
        margin: 0 18px;
    }

    /* Section description – 70% is OK on tablet, just trim it a bit */
    .section-description {
        width: 80%;
        font-size: 17px;
    }

    /* Timelines: already bad at 768px with 24.8% widths – let them wrap */
    .timelines {
        padding: 180px 0 200px 10px;
    }

    /* New-services / domain wrapper background image scale */
    .new-services-wrapper {
        background-size: 340px auto;
    }
    .domain-wrapper {
        background-size: 340px auto;
    }

    /* Tech title text in side panel */
    .tech-title {
        font-size: 30px;
        padding: 200px 0 0 20px;
    }
}

/* ---------------------------------------------------------------
   3.  Tablet portrait / large phone  (≤ 767px)
       style.css jumps from 768px (hamburger only) to 520px.
       This fills the critical 521–767px gap.
--------------------------------------------------------------- */
@media screen and (max-width: 767px) {

    /* --- Navbar: alignment handled in style.css #top-bar rules --- */

    /* --- Sections --- */
    .common-sections {
        padding: 50px 0 30px;
    }

    /* --- Titles & descriptions --- */
    .section-title,
    .small-title {
        font-size: 22px;
    }

    .main-titles {
        width: 100%;
        font-size: 24px;
        line-height: 1.35;
    }

    .section-description {
        width: 100%;
        font-size: 16px;
        line-height: 1.65;
        padding: 0 10px;
        text-align: center;
    }

    /* --- Home banner --- */
    .banner-quote {
        padding: 160px 0 0;
    }

    /* --- Inner-page banner ---
       position:absolute + padding:100px overflows on 300px banner.
       Switch to relative flow so the content breathes naturally.     */
    #inner-banner {
        height: auto;
        min-height: 200px;
        padding-bottom: 24px;
    }

    .inner-quote {
        position: relative;
        padding: 60px 15px 10px;
        top: auto;
        left: auto;
    }

    .inner-quote .main-title {
        font-size: 26px;
        line-height: 1.3;
    }

    .inner-quote .tag-line {
        font-size: 16px;
        line-height: 1.5;
    }

    /* --- Banner tech-icon sprite bar ---
       6 icons × (75px wide + 35px each side) ≈ 870px → overflows.
       Shrink margins so they fit.                                    */
    .tech-icons li {
        margin: 0 10px;
    }

    /* --- Feature icon + text blocks (.ad-blcoks) ---
       Reduce top padding and bottom margin on mobile.              */
    .advantages-block {
        padding: 20px 0 0;
        margin: 0;
    }

    /* Full-width columns on mobile */
    .advantages-block .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .ad-blcoks {
        padding: 0 15px;
        margin: 0 0 30px;
    }

    .ad-blcoks img {
        width: 60px;
    }

    /* --- Technology icons grid (services page) ---
       width:33% + padding:85px 0 on tiny screens = cramped.
       Switch to 2-column with sensible padding.                     */
    .technology-icons li {
        width: 49%;
        padding: 5px;
    }

    .technology-icons a {
        padding: 30px 5px;
        min-height: 150px;
        width: 100%;
    }

    .technology-icons img {
        max-width: 100px;
        width: 100%;
    }

    /* Show tech name label on hover (already in 520px; extend up) */
    .tech-name {
        display: block;
        position: static;
        color: rgba(85, 85, 85, 0.8);
        font-weight: 500;
        font-size: 13px;
    }

    /* --- Service cards (wblcoks) --- */
    .wblcoks {
        min-height: 0;
        margin: 0 0 40px;
    }

    /* --- Tech image on service pages --- */
    .tech-image img {
        max-width: 220px;
    }

    .tech-cnt,
    .commonn-list li {
        font-size: 16px;
    }

    /* --- Testimonials --- */
    .testimonials-block {
        margin: 0 0 40px;
    }

    /* --- Clients logo --- */
    .clients-logo li {
        width: 49%;
        padding: 0 0 20px;
    }

    /* --- Blog cards --- */
    .blog-card h2 {
        font-size: 18px;
    }

    .meta-block {
        font-size: 12px;
    }

    .blog-detail-page h1 {
        font-size: 24px;
    }

    .blog-detail-page img {
        width: 100%;
        height: auto;
    }

    /* --- Company numbers (4 × 25% → 2 × 49%) --- */
    #company-numbers ul li {
        width: 49%;
        padding: 0 0 16px;
    }

    .number-label {
        font-size: 14px;
    }

    /* --- Footer --- */
    .footer-cnt {
        padding: 30px 15px;
    }

    .custom-footer .footer-col .ftitle {
        min-height: 0;
        margin-bottom: 12px;
    }

    .custom-footer .footer-col {
        margin-bottom: 24px;
    }

    .fcenter {
        padding: 15px 0 15px 15px;
    }

    /* --- Technologies / Domains wrappers ---
       Remove large background images; show mobile-tech block instead. */
    .new-services-wrapper,
    .domain-wrapper {
        background: none;
        height: auto;
        padding: 24px 0 0;
    }

    .mobile-tech {
        display: block;
        height: auto;
        min-height: 0;
        padding: 24px 15px;
    }

    .mobile-tech .tech-title {
        padding: 0;
        margin: 0 0 8px;
        font-size: 26px;
        color: #121212;
    }

    /* --- Domain cards --- */
    .odd-domain-cw a,
    .even-domain-cw a {
        padding: 16px;
        height: auto;
        min-height: 0;
        margin: 0 0 16px;
    }

    .odd-domain-cw img,
    .even-domain-cw img {
        display: block;
        margin: 0 auto;
    }

    /* --- New service cards --- */
    .new-service-card a {
        height: 160px;
        padding: 24px 8px 44px;
        box-sizing: border-box;
    }

    .new-service-card h2 {
        font-size: 14px;
        bottom: 14px;
    }

    /* --- Tech title side-panel text --- */
    .tech-title {
        font-size: 26px;
        padding: 0 15px 8px;
    }

    /* --- Product cards --- */
    .product-card {
        margin: 0 0 8px;
    }

    /* --- Tech stack image grid --- */
    .tech-stack-imgs li {
        width: 110px;
        height: 95px;
        margin: 6px;
    }

    /* --- Timeline: collapse to single column --- */
    .timelines {
        padding: 15px 0;
    }

    .timelines li {
        display: block;
        width: 100%;
        margin: 0 0 30px;
    }

    .timeline-outer {
        position: relative;
        top: 0;
        left: 0;
    }

    .timelines li:before,
    .timelines li:after,
    .timelines:before,
    .oddcard:before,
    .evencard:before {
        display: none;
    }

    /* --- CTA link button --- */
    .link-btn {
        margin: 10px 0 0;
    }

    /* --- Utility --- */
    .m-zero {
        padding: 0;
    }
}

/* ---------------------------------------------------------------
   4.  Small phones  (≤ 520px)
       Additional refinements on top of what style.css already has.
--------------------------------------------------------------- */
@media screen and (max-width: 520px) {

    /* Inner quote – tighten further */
    .inner-quote {
        padding: 48px 15px 10px;
    }

    .inner-quote .main-title {
        font-size: 22px;
        line-height: 1.3;
    }

    .inner-quote .tag-line {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Feature icon blocks – compact */
    .ad-blcoks {
        padding: 0 10px;
        margin: 0 0 24px;
    }

    .ad-blcoks img {
        width: 52px;
    }

    /* Technology icon single-column fallback */
    .technology-icons a {
        height: 120px;
        padding: 8px;
    }

    /* Domain card images */
    .odd-domain-cw img,
    .even-domain-cw img {
        width: 70px;
        padding: 0 0 14px;
    }

    /* Tech title in mobile-tech banner */
    .mobile-tech .tech-title {
        font-size: 22px;
    }

    /* Company info icons – prevent float misalignment on tiny screens */
    .comapny-info li label {
        float: none;
        display: inline-block;
        vertical-align: middle;
        width: auto;
        margin-right: 6px;
    }

    /* Social icons compact */
    .social-icons a i.fa {
        width: 40px;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
    }

    /* Tech stack tighter */
    .tech-stack-imgs li {
        width: 90px;
        height: 80px;
        margin: 4px;
    }

    /* CTA button */
    .link-btn {
        font-size: 14px;
        padding: 8px 18px;
        margin-top: 8px;
    }

    /* Section description text-align */
    .section-description {
        text-align: justify;
    }

    /* Wblock card link button – static position */
    .wblcoks .link {
        position: static;
        bottom: auto;
    }
}

/* ---------------------------------------------------------------
   5.  Very small phones  (≤ 340px) — micro adjustments
--------------------------------------------------------------- */
@media screen and (max-width: 340px) {
    .inner-quote .main-title {
        font-size: 19px;
    }

    .section-title {
        font-size: 18px;
    }

    .technology-icons li {
        width: 100%;
    }

    .technology-icons a {
        height: 100px;
    }

    #company-numbers ul li {
        width: 100%;
    }
}