/* ==========================================================================
   DOLLOP INFOTECH - COMPREHENSIVE MOBILE RESPONSIVE FIX
   Covers all pages: 320px, 360px, 375px, 390px, 414px, 430px+
   Author: Kiro AI - Complete Mobile Audit & Fix
   ========================================================================== */

/* --------------------------------------------------------------------------
   GLOBAL RESETS - PREVENT HORIZONTAL SCROLL ON ALL DEVICES
   -------------------------------------------------------------------------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

*, *::before, *::after {
    box-sizing: border-box !important;
}

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

/* --------------------------------------------------------------------------
   TYPOGRAPHY - FLUID SCALING WITH CLAMP
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .font-95 { font-size: clamp(40px, 10vw, 70px) !important; }
    .font-55 { font-size: clamp(20px, 5.5vw, 38px) !important; }
    .font-50 { font-size: clamp(20px, 5.5vw, 36px) !important; }
    .font-45 { font-size: clamp(20px, 5vw, 34px) !important; }
    .font-40 { font-size: clamp(18px, 4.5vw, 30px) !important; }
    .font-35 { font-size: clamp(16px, 4vw, 28px) !important; }
    .font-32 { font-size: clamp(16px, 4vw, 26px) !important; }
    .font-22 { font-size: clamp(14px, 3.5vw, 20px) !important; }
    .font-20 { font-size: clamp(14px, 3.5vw, 18px) !important; }
    .font-18 { font-size: clamp(13px, 3vw, 16px) !important; }
    .font-16 { font-size: 14px !important; }
    h4.front_tittle { font-size: clamp(20px, 5vw, 32px) !important; }
}

/* --------------------------------------------------------------------------
   HEADER & NAVIGATION MOBILE FIX
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Logo sizing */
    .navbar-brand img,
    .drawer-logo img {
        max-height: 38px !important;
        width: auto !important;
    }

    /* Ensure header doesn't overlap content */
    body.inner-page {
        padding-top: 70px !important;
    }

    /* Fix navbar container padding */
    .container-fluid.px-30 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Header bar height */
    .dollop_header {
        padding: 10px 0 !important;
        min-height: 60px;
    }

    /* Hamburger button touch target */
    .navbar-toggler {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 575px) {
    body.inner-page {
        padding-top: 65px !important;
    }
    .dollop_header {
        padding: 8px 0 !important;
    }
    .navbar-brand img,
    .drawer-logo img {
        max-height: 32px !important;
    }
}

/* --------------------------------------------------------------------------
   HERO SECTION FIX (index.php)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .hero_image {
        padding-top: 70px !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .main_heading {
        font-size: clamp(22px, 6vw, 40px) !important;
        line-height: 1.3 !important;
    }

    span.hero_stripe {
        width: 80px !important;
        height: auto !important;
    }

    /* Prevent hero section overflow */
    section.hero_image .container,
    section.hero_image .container-fluid {
        overflow: hidden !important;
    }
}

@media (max-width: 575px) {
    .hero_image {
        padding-top: 65px !important;
    }
    .main_heading {
        font-size: clamp(20px, 5.5vw, 32px) !important;
    }
    span.hero_stripe {
        width: 65px !important;
    }
    .hero-stats {
        gap: 10px !important;
    }
    .stat-box {
        padding: 12px 14px !important;
        gap: 10px !important;
    }
}

@media (max-width: 360px) {
    .main_heading {
        font-size: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   ABOUT SECTION - TABS (index.php, about.php)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .about_section {
        overflow: hidden !important;
    }

    /* Vertical tabs → horizontal scrollable on mobile */
    .dollop_about_tabs {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .theme_tabs_ui {
        flex-direction: column !important;
    }

    .dollop_about_button {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .dollop_about_button::-webkit-scrollbar { display: none !important; }

    .dollop_about_button .nav-link {
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        min-width: auto !important;
    }

    /* Tab content */
    .all_container_satisfy {
        flex-direction: column !important;
        height: auto !important;
    }

    .client_stisfied_details {
        width: 100% !important;
        padding: 16px !important;
    }

    .tab_box_image {
        width: 100% !important;
        transform: none !important;
        margin-top: 16px !important;
    }

    .tab_details_image {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 575px) {
    .tab_details_image {
        height: 160px !important;
    }
    h2.tab_background_latter {
        font-size: 100px !important;
    }
    h3.tab_main_heading {
        font-size: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   FEATURE SECTION - TOOL TABS (index.php)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .tools_userd {
        flex-direction: column !important;
    }

    .tool_tabs_tittle {
        margin-bottom: 16px !important;
        width: 100% !important;
    }

    .tools_tabs_details {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 8px !important;
        width: 100% !important;
    }
    .tools_tabs_details::-webkit-scrollbar { display: none !important; }

    .tools_tabs .tools_tabs_details li.nav-item {
        min-width: 80px !important;
        height: 80px !important;
        flex-shrink: 0 !important;
    }

    .tools_tabs .tools_tabs_details li button {
        padding: 10px !important;
        margin-left: 4px !important;
        margin-bottom: 4px !important;
    }

    span.horizontal_line {
        display: none !important;
    }

    h4.tittle_tool_tab {
        font-size: clamp(15px, 3.5vw, 20px) !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
}

@media (max-width: 575px) {
    .tools_tabs .tools_tabs_details li.nav-item {
        min-width: 65px !important;
        height: 65px !important;
    }
}

/* --------------------------------------------------------------------------
   TECHNOLOGY GRID / CUSTOMGRID (index.php, services.php)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .dollop_technologies_grid {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        width: 100% !important;
        padding: 20px 8px !important;
        gap: 8px !important;
    }

    .customgrid_20 {
        width: calc(33.33% - 8px) !important;
        min-width: 90px !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 575px) {
    .customgrid_20 {
        width: calc(50% - 8px) !important;
    }

    .tech_image {
        width: 72px !important;
        height: 60px !important;
        padding: 10px !important;
    }
}

@media (max-width: 360px) {
    .customgrid_20 {
        width: calc(50% - 6px) !important;
    }
}

/* Technology service cards */
@media (max-width: 767px) {
    .singal_tech {
        height: auto !important;
        min-height: 160px !important;
    }

    .tech_images {
        height: 120px !important;
    }

    .tech_img {
        width: 100% !important;
        height: 120px !important;
        object-fit: cover !important;
    }

    .tech_descriptions {
        margin: 8px !important;
    }

    .tech_details {
        font-size: clamp(13px, 3vw, 16px) !important;
    }
}

/* --------------------------------------------------------------------------
   COUNTER SECTION (index.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .counter_space {
        margin-top: 40px !important;
    }

    .tech_count {
        height: auto !important;
        padding: 16px !important;
        text-align: center !important;
    }

    .tech_count h4 {
        font-size: clamp(30px, 7vw, 50px) !important;
    }
}

@media (max-width: 575px) {
    /* Stack counters 2 per row */
    .tech_count {
        flex-direction: column !important;
        align-items: center !important;
    }
}

/* --------------------------------------------------------------------------
   TESTIMONIAL SECTION (index.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .feedback_section {
        overflow: hidden !important;
    }

    .testimonial_globe {
        display: none !important;
    }

    .testimonial_slider .swiper-wrapper {
        padding-left: 0 !important;
    }

    .testimonial_slider .swiper-slide.swiper-slide-active {
        transform: none !important;
    }

    .swiper-pagination {
        padding: 12px 0 !important;
        position: relative !important;
    }

    .testimonial_slider .swiper-container-1 .swiper-button-prev.my_prev,
    .testimonial_slider .swiper-container-1 .swiper-button-next.my_next {
        bottom: 4px !important;
    }

    .testimonial_slider .swiper-container-1 .swiper-button-prev.my_prev {
        left: 30% !important;
    }

    .testimonial_slider .swiper-container-1 .swiper-button-next.my_next {
        left: 55% !important;
    }
}

/* --------------------------------------------------------------------------
   NEWSLETTER SECTION (footer.php / all pages)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .newsletter_Sec_bg_container {
        padding: 24px 16px !important;
    }

    .newsletter_Sec_title h3 {
        font-size: clamp(22px, 6vw, 35px) !important;
    }

    .newsletter_Sec_input {
        margin-top: 16px !important;
    }

    .input_group_newsletter {
        flex-direction: column !important;
    }

    input.subscribe_form {
        width: 100% !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
    }

    .news_submit {
        width: 100% !important;
        border-radius: 8px !important;
        padding: 12px !important;
    }
}

@media (max-width: 575px) {
    .subtitle_sec p {
        font-size: 13px !important;
    }
    img.news_latter_arrow {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   FOOTER SECTION
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .footer_scetion {
        padding-bottom: 80px !important;
        margin-bottom: 0 !important;
    }

    .footer_scetion .row > div {
        margin-bottom: 24px !important;
    }

    p.footer_content {
        width: 100% !important;
    }

    .dollop_copy_write {
        padding: 16px 0 !important;
    }
}

@media (max-width: 575px) {
    .footer_scetion .col-md-2.offset-md-1 {
        margin-left: 0 !important;
    }
    .footer_scetion .col-6 {
        width: 50% !important;
    }
    .quick_link ul li a {
        font-size: 13px !important;
    }
}

/* --------------------------------------------------------------------------
   ABOUT PAGE (about.php) - KEYCUT CARDS GRID
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .about_section .row > .col-md-6 {
        width: 100% !important;
    }

    .keycut,
    .keycut_imgage,
    .top_view {
        margin-bottom: 16px !important;
    }

    .keycut_tittle {
        font-size: clamp(14px, 3.5vw, 18px) !important;
    }

    .keycut_description {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    /* Stack the two 6-col columns */
    section.about_section .col-md-6 {
        padding-top: 0 !important;
    }

    .pt_90 {
        padding-top: 30px !important;
    }

    .pt_50 {
        padding-top: 16px !important;
    }
}

@media (max-width: 575px) {
    /* 2x2 grid for keycut cards */
    .about_section .col-md-6 .row .col-md-6 {
        width: 50% !important;
        float: left !important;
    }

    .about_section .col-md-6 .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .keycut img,
    .top_view img {
        height: 140px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   ABOUT PAGE - MISSION & VISION SECTION
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .mission_vission_section {
        padding-top: 30px !important;
    }

    .mission {
        margin-bottom: 30px !important;
    }

    .mission_mainheading {
        font-size: clamp(20px, 5vw, 32px) !important;
        margin-top: 16px !important;
    }

    .content_image {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    img.mission_content_image {
        width: 100% !important;
        max-width: 180px !important;
        margin: 0 auto !important;
    }
}

/* --------------------------------------------------------------------------
   ABOUT PAGE - SECURE SECTION CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .secure_row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 0 !important;
    }

    .col-md-3.develop_component {
        width: 50% !important;
        padding: 8px !important;
    }

    .single_componet {
        padding: 16px 12px !important;
        min-height: auto !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .componet_image {
        margin-bottom: 12px !important;
    }

    .componet_heading {
        font-size: 15px !important;
    }

    .comp_details {
        font-size: 12px !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 430px) {
    .col-md-3.develop_component {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   ABOUT PAGE - GLOBAL MAP SECTION
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .global_section {
        overflow: hidden !important;
    }

    .project_map {
        width: 100% !important;
        height: auto !important;
    }

    .full-detail-anime {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   SERVICES PAGE (services.php) - SERVICE GRID CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .service_section {
        overflow: hidden !important;
    }

    .technology_galary .row {
        margin: 0 !important;
    }

    /* col-6 already on mobile - make sure images don't overflow */
    .technology_galary .col-md-3.col-6 {
        padding: 6px !important;
    }

    .singal_tech {
        border-radius: 8px !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }

    .tech_logo {
        width: 40px !important;
        height: 40px !important;
        border-radius: 6px !important;
    }

    .tech_logos {
        width: 22px !important;
        height: 22px !important;
    }
}

@media (max-width: 430px) {
    .technology_galary .col-md-3.col-6 {
        padding: 4px !important;
    }
}

/* --------------------------------------------------------------------------
   SERVICE DETAIL PAGES (service_details.php, ios_service_details.php, etc.)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Feature cards on service detail pages */
    .single_feature {
        flex-direction: column !important;
        align-items: flex-start !important;
        min-height: auto !important;
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    .feature_img {
        margin-bottom: 12px !important;
        margin-right: 0 !important;
        width: 70px !important;
        height: 60px !important;
    }

    .features_details {
        width: 100% !important;
    }

    .features_heading {
        font-size: clamp(15px, 3.5vw, 18px) !important;
    }

    /* Android app services */
    .android_app_services {
        padding: 20px 20px 20px 40px !important;
        margin-bottom: 16px !important;
    }

    .number {
        width: 48px !important;
        height: 48px !important;
        left: -10px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .single_feature {
        flex-direction: row !important;
    }
    .feature_img {
        flex-shrink: 0 !important;
        margin-right: 12px !important;
        margin-bottom: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   CONTACT PAGE (contact_us.php) - FORM & ADDRESS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Contact form container */
    .get_quote {
        padding: 16px !important;
        border-radius: 12px !important;
    }

    /* Form inputs stacking */
    .user_details .row .col-md-6 {
        margin-bottom: 8px !important;
    }

    /* Service selection radio cards */
    .plans {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .plan {
        width: calc(50% - 4px) !important;
    }

    .plan .plan-content {
        padding: 10px 8px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .plan-details {
        width: 100% !important;
        text-align: center !important;
    }

    span.radio_label_box {
        width: 38px !important;
        height: 38px !important;
        margin-bottom: 6px !important;
    }

    /* Address section */
    .address {
        margin-bottom: 24px !important;
    }

    .telephone {
        margin-bottom: 16px !important;
    }

    .telephone h5 {
        font-size: 14px !important;
        word-break: break-word !important;
    }

    .map_location {
        max-width: 60px !important;
    }

    /* Contact section title */
    .comman_tittle.d-flex.align-items-end h3.background_tittle {
        font-size: 80px !important;
    }

    /* Submit button */
    button.btn.btn-width {
        width: 100% !important;
    }
}

@media (max-width: 430px) {
    .plan {
        width: calc(50% - 4px) !important;
    }
    .plan-details span {
        font-size: 10px !important;
    }
}

@media (max-width: 360px) {
    .plan {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   CONTACT PAGE - CLIENT LOGOS GRID
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .mb_img_vcenter {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px !important;
        margin-bottom: 8px !important;
    }

    .mb_img_vcenter img {
        max-width: 100px !important;
        max-height: 60px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 430px) {
    .mb_img_vcenter img {
        max-width: 80px !important;
        max-height: 50px !important;
    }
}

/* --------------------------------------------------------------------------
   PORTFOLIO PAGE (portfolio.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Portfolio tabs */
    .portfolio_tabs_details {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
    }
    .portfolio_tabs_details::-webkit-scrollbar { display: none !important; }

    .portfolio_tabs_details .nav-item {
        flex: 0 0 auto !important;
        width: auto !important;
    }

    .single_portfolio_tab {
        padding: 8px 12px !important;
    }

    .port_horizontal,
    .app_square_blue,
    .app_square_left,
    .app_square {
        display: none !important;
    }

    /* Portfolio app details */
    .app_details {
        min-height: auto !important;
        padding-top: 20px !important;
    }

    .app_icon_name {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .app_icon {
        width: auto !important;
        flex-shrink: 0 !important;
    }

    .app_icon img {
        max-width: 60px !important;
        max-height: 60px !important;
    }

    .app_name {
        margin-bottom: 16px !important;
    }

    .app_description {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* Images - force full width on mobile */
    .img_app_left-desktop,
    .img_app_right-desktop,
    .img_app_left,
    .img_app_right {
        position: static !important;
        width: 100% !important;
        max-height: 260px !important;
        object-fit: contain !important;
        margin-bottom: 16px !important;
    }

    .laptop_img {
        width: 100% !important;
    }

    /* App store badges */
    img.store {
        max-width: 130px !important;
        margin-bottom: 8px !important;
    }

    .app_locate {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Collapse button */
    .portfolio_btn {
        min-height: 44px !important;
    }

    .app_icon_arrow {
        width: 24px !important;
    }

    .job_apply_btn,
    .app_icon_arrow {
        width: 24px !important;
    }

    /* Order fix for alternating rows on mobile */
    .col-md-6.order-md-1,
    .col-md-6.order-md-2 {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   CAREER / JOIN PAGE (join.php) - ACCORDION
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .curent_openings.pt_142 {
        padding-top: 30px !important;
    }

    /* Position title header */
    .position_tittle {
        flex-wrap: wrap !important;
        margin-bottom: 16px !important;
        margin-top: 16px !important;
        gap: 8px !important;
    }

    .position_image img {
        width: 32px !important;
        height: 32px !important;
    }

    .position_name {
        font-size: clamp(14px, 3.5vw, 18px) !important;
    }

    /* Accordion items */
    .jobs_accordian .accordion-item {
        border-radius: 8px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .accordion-button {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 16px !important;
        gap: 10px !important;
    }

    .tech_logo {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
    }

    .tech_logos {
        width: 22px !important;
        height: 22px !important;
    }

    .opening_main_tittle h3 {
        font-size: clamp(14px, 3.5vw, 18px) !important;
    }

    .opening_main_tittle h5 {
        font-size: clamp(12px, 2.5vw, 14px) !important;
    }

    /* Skill boxes inside accordion */
    .skill_box {
        margin-bottom: 16px !important;
    }

    .skill_box h3 {
        font-size: 14px !important;
    }

    .skills li,
    .Responsibilities li,
    .profile li {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    /* Apply button */
    button.btn-width {
        width: 100% !important;
        margin-top: 16px !important;
        min-height: 48px !important;
    }
}

@media (max-width: 575px) {
    .jobs_accordian .col-md-4 {
        width: 100% !important;
    }

    .accordion-button {
        flex-direction: row !important;
        align-items: center !important;
    }
}

/* --------------------------------------------------------------------------
   WHY DOLLOP PAGE (why_dollop.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .capablity_img {
        margin-bottom: 20px !important;
    }

    .capablity_img img {
        width: 100% !important;
        border-radius: 8px !important;
    }

    .why_overlay {
        border-radius: 8px !important;
    }

    .main_heading_why_dollop {
        font-size: clamp(18px, 4.5vw, 28px) !important;
        text-align: left !important;
    }

    .sub_heading_why_dollop {
        font-size: 14px !important;
        text-align: left !important;
    }

    /* Dashed borders */
    span.dashed_border,
    span.common_dashed_border,
    span.common_dashed_borde_right {
        display: none !important;
    }

    /* Why Dollop sections - each row stacks */
    .why_dollop_sec .row.pt_90 {
        padding-top: 24px !important;
    }
}

/* --------------------------------------------------------------------------
   INDUSTRIES PAGE (industries.php)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .industry_card {
        height: 220px !important;
    }
}

@media (max-width: 767px) {
    .industry_card {
        height: 180px !important;
    }

    .detail_panel_body {
        grid-template-columns: 1fr !important;
    }

    .industries_grid_container .col-md-4,
    .industries_grid_container .col-md-3 {
        width: 50% !important;
    }
}

@media (max-width: 430px) {
    .industry_card {
        height: 160px !important;
    }

    .industries_grid_container .col-md-4,
    .industries_grid_container .col-md-3 {
        width: 50% !important;
    }
}

@media (max-width: 375px) {
    .industries_grid_container .col-md-4,
    .industries_grid_container .col-md-3 {
        width: 100% !important;
    }
    .industry_card {
        height: 150px !important;
    }
}

/* --------------------------------------------------------------------------
   COMMON TITLE SECTION (all pages)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .comman_tittle {
        margin: 30px 0 !important;
    }

    .comman_tittle h3.background_tittle {
        display: none !important;
    }

    .comman_tittle .other_tittle {
        position: static !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    h4.front_tittle.font-55 {
        font-size: clamp(20px, 5vw, 30px) !important;
    }

    p.tittle_description {
        font-size: 14px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    img.red_image,
    img.red_image_left,
    img.red_image_right,
    img.white_image,
    img.red_image_left_feedback,
    img.red_image_about,
    img.red_image_about-2,
    img.red_image_about-3 {
        max-width: 60px !important;
    }
}

/* --------------------------------------------------------------------------
   SECTION SPACING FIXES (all pages)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .pt_90 { padding-top: 30px !important; }
    .pt_142 { padding-top: 30px !important; }
    .pt_50 { padding-top: 16px !important; }
    .py_50 { padding-top: 30px !important; padding-bottom: 30px !important; }
    .mb-95 { margin-bottom: 40px !important; }
    .mb_mt_80 { margin-top: 40px !important; margin-bottom: 40px !important; }
    .mt_50 { margin-top: 24px !important; }
    .mt_40 { margin-top: 20px !important; }
    .mb-30 { margin-bottom: 16px !important; }
}

@media (max-width: 430px) {
    .pt_90 { padding-top: 20px !important; }
    .pt_142 { padding-top: 20px !important; }
    .mb_mt_80 { margin-top: 30px !important; margin-bottom: 30px !important; }
}

/* --------------------------------------------------------------------------
   DECORATIVE / BACKGROUND ELEMENTS (all pages - prevent overflow)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    img.ellips_2,
    img.ellips_3,
    img.ellips_60,
    img.ellips_61,
    img.ellipse-4,
    img.ellipse-8,
    img.ellipse-14,
    img.ellipse_about4,
    img.ellipse_24,
    img.Ellipse_115,
    img.ellipse_129,
    img.about_line,
    img.side_image,
    img.red_image_services_details,
    img.red_image_services_technology,
    img.Ellipse_164,
    img.ellipse_4,
    img.ellipse_163 {
        display: none !important;
    }

    img.ellips_7 {
        width: 120px !important;
        height: 120px !important;
        opacity: 0.3 !important;
    }

    /* Keep pattern backgrounds visible but constrained */
    img.side_image { display: none !important; }
}

/* --------------------------------------------------------------------------
   FLOATING CONTACT BUTTON - MOBILE FIX
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .floating-contact {
        right: 14px !important;
        bottom: 16px !important;
    }

    .fc-toggle, .fc-circle {
        width: 52px !important;
        height: 52px !important;
        font-size: 20px !important;
    }

    .fc-ring {
        inset: -4px !important;
    }

    .fc-actions {
        right: 4px !important;
        bottom: 66px !important;
    }

    /* When menu is open - prevent overlap with nav drawer */
    body.no-scroll .floating-contact {
        z-index: 99990 !important;
    }
}

/* --------------------------------------------------------------------------
   HISTORY / LEADERSHIP SECTIONS (about.php, why_dollop.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    section.history {
        height: auto !important;
        padding: 40px 16px !important;
    }

    .overview_sec {
        padding: 30px 0 !important;
        height: auto !important;
    }

    .overview_sec .font-90 {
        font-size: clamp(40px, 10vw, 70px) !important;
    }

    .overview_sec .font-32 {
        font-size: clamp(18px, 4vw, 26px) !important;
    }

    .leadership .font-55 {
        font-size: clamp(18px, 4.5vw, 28px) !important;
    }
}

/* --------------------------------------------------------------------------
   GLOBAL CONTACT SECTION (contact_us.php, about.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .global_contact_sec {
        padding: 30px 0 !important;
    }

    .global_contact_sec img:not(.team_images) {
        width: 36px !important;
    }

    .global_contact_sec img.team_images {
        width: 100% !important;
        margin-top: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   TECHNOLOGY STACK SLIDER (service_details.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .technology_stack_slider {
        padding: 20px 0 !important;
    }

    .technology_stack_slider:after {
        width: 80px !important;
        left: -8px !important;
    }

    .swiper-button-next.my_next_tech {
        right: 85% !important;
    }
}

/* --------------------------------------------------------------------------
   TESTIMONIAL SLIDER BUTTONS (index.php)
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .swiper-button-next,
    .swiper-button-prev {
        bottom: 10px !important;
    }
    .my_prev_tech span,
    .my_next_tech span {
        font-size: 28px !important;
    }
}

/* --------------------------------------------------------------------------
   MODAL - APPLY / CONTACT FORM MODAL (join.php, contact_us.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .modal-dialog {
        margin: 8px auto !important;
        max-width: calc(100% - 16px) !important;
    }

    .modal-content {
        border-radius: 12px !important;
    }

    .modal-body {
        padding: 16px !important;
    }

    .modal-header {
        padding: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   LOCATION PAGES (bangalore.php, delhi.php, mumbai.php, pune.php, hyderabad.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* These pages share structure with service pages */
    .service_section .row .col-md-6 {
        margin-bottom: 16px !important;
    }

    .section_img {
        width: 20px !important;
        flex-shrink: 0 !important;
    }

    .ml-16 {
        margin-left: 10px !important;
    }

    .telephone {
        align-items: flex-start !important;
    }

    .place_location {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
}

/* --------------------------------------------------------------------------
   PRIVACY POLICY & TERMS OF SERVICE (privacy_policy.php, terms_of_services.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .privacy_content h4,
    .terms_content h4 {
        font-size: clamp(16px, 4vw, 20px) !important;
    }

    .privacy_content p,
    .terms_content p,
    .privacy_content li,
    .terms_content li {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
}

/* --------------------------------------------------------------------------
   CITY PAGES BREADCRUMB / INNER BANNER
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .breadcrumb_section {
        padding: 30px 0 !important;
        text-align: center !important;
    }

    img.breadcrumb-shape {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   PORTFOLIO DETAIL PAGES (can_boy_web.php, connekton_web.php, etc.)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Full-width screenshots */
    .portfolio_detail_img {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .portfolio_detail_screen {
        flex-direction: column !important;
    }

    /* Color swatches */
    .app_locate .color-1,
    .app_locate .color-2,
    .app_locate .color-3,
    .app_locate .color-4,
    .app_locate .color-5 {
        width: 40px !important;
        height: 40px !important;
    }
}

/* --------------------------------------------------------------------------
   HOMEPAGE SLIDE NUMBERS / TABS (index.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .tabs_numbers {
        width: 30% !important;
    }

    .nav-pills li .slider_tabs {
        width: 100% !important;
        padding: 8px 4px 4px !important;
        height: 58px !important;
    }

    span.slid_no {
        font-size: 22px !important;
    }

    span.slid_text {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 430px) {
    .nav-pills li .slider_tabs {
        height: 52px !important;
    }
    span.slid_no {
        font-size: 18px !important;
    }
}

/* --------------------------------------------------------------------------
   EMS / SMART TRACKO / SPECIFIC PRODUCT PAGES
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Any full-width image sections */
    .product_banner img,
    .product_section img {
        width: 100% !important;
        height: auto !important;
    }

    /* Product feature grids */
    .product_feature_grid .col-md-3,
    .product_feature_grid .col-md-4 {
        width: 50% !important;
        margin-bottom: 16px !important;
    }
}

@media (max-width: 430px) {
    .product_feature_grid .col-md-3,
    .product_feature_grid .col-md-4 {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   TOUCH TARGET IMPROVEMENTS (interactive elements only)
   Only apply min-height to actual buttons/CTAs, NOT inline text links
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    button,
    .btn,
    .fc-toggle,
    .navbar-toggler,
    .nav-link,
    .accordion-button,
    .plan,
    .single_portfolio_tab {
        min-height: 44px !important;
    }

    /* Exception: inline text links, footer links, and small utility links */
    a.explore_more,
    a.portfolio_details,
    .footer_scetion a,
    .quick_link a,
    .accordion-body a,
    .foot_social_icon,
    p a,
    span a,
    li a:not(.nav-link):not(.btn),
    .fc-item {
        min-height: unset !important;
        min-width: unset !important;
    }

    /* Form inputs - prevent iOS zoom */
    input.form-control,
    textarea.form-control,
    select.form-control {
        min-height: 44px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }

    textarea.form-control {
        min-height: 88px !important;
    }
}

/* --------------------------------------------------------------------------
   SPECIFIC WIDTH BREAKPOINTS: 320px
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .main_heading {
        font-size: 18px !important;
    }

    h4.front_tittle {
        font-size: 18px !important;
    }

    .font-55 { font-size: 18px !important; }
    .font-45 { font-size: 18px !important; }

    .navbar-brand img {
        max-height: 28px !important;
    }

    .fc-toggle, .fc-circle {
        width: 46px !important;
        height: 46px !important;
    }

    .customgrid_20 {
        width: 50% !important;
    }

    .col-md-3.develop_component,
    .plan {
        width: 100% !important;
    }

    .single_componet {
        min-height: auto !important;
    }
}

/* --------------------------------------------------------------------------
   SPECIFIC WIDTH: 360px
   -------------------------------------------------------------------------- */
@media (min-width: 321px) and (max-width: 360px) {
    .main_heading {
        font-size: 20px !important;
    }

    .font-55 { font-size: 20px !important; }
    .font-45 { font-size: 20px !important; }
}

/* --------------------------------------------------------------------------
   SPECIFIC WIDTH: 375px - 390px (iPhone)
   -------------------------------------------------------------------------- */
@media (min-width: 361px) and (max-width: 390px) {
    .main_heading {
        font-size: 22px !important;
    }
}

/* --------------------------------------------------------------------------
   SPECIFIC WIDTH: 414px - 430px (iPhone Plus/Max)
   -------------------------------------------------------------------------- */
@media (min-width: 391px) and (max-width: 430px) {
    .main_heading {
        font-size: 24px !important;
    }
}

/* --------------------------------------------------------------------------
   MAIN HEADING FIXED HEIGHT FIX (all mobile)
   The desktop main_heading has height:155px which breaks mobile layouts
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .main_heading {
        height: auto !important;
        min-height: auto !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   PORTFOLIO DETAIL PAGES (can_boy.php, connekton_web.php, the_blu_box_web.php,
   digitalsignage_web.php, can_boy_web.php, global_supermarket.php,
   live_line.php, ems.php, road_watch.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Stack alternating columns properly */
    .portfolio_detail_img,
    .app_screenshot {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* App detail info panels */
    .app_details .row > .col-md-6,
    .app_details .row > .col-md-5,
    .app_details .row > .col-md-7 {
        width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* App info cards layout */
    .app_info_card {
        padding: 16px !important;
        margin-bottom: 16px !important;
    }

    /* Technology tags wrap properly */
    .app_locate {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Collapse button full width */
    .portfolio_btn,
    .collapse_btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Desktop-only decorative elements */
    .app_square,
    .app_square_blue,
    .app_square_left {
        display: none !important;
    }
}

@media (max-width: 430px) {
    .app_icon img {
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .app_name h4 {
        font-size: clamp(16px, 4vw, 22px) !important;
    }

    .app_description {
        font-size: 12px !important;
    }

    img.store {
        max-width: 110px !important;
    }
}

/* --------------------------------------------------------------------------
   INDUSTRIES PAGE DETAIL PANEL - NARROW SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .industry_detail_panel.open {
        padding: 20px 14px !important;
        max-height: 1200px !important;
    }

    .detail_panel_header {
        flex-direction: column !important;
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .detail_panel_title {
        gap: 12px !important;
    }

    .detail_panel_title h3 {
        font-size: 20px !important;
    }

    .detail_panel_icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
    }

    .detail_panel_icon i {
        font-size: 24px !important;
    }

    .detail_section {
        padding: 20px 16px !important;
    }

    .detail_section h4 {
        font-size: 16px !important;
    }

    .detail_section p,
    .detail_section li {
        font-size: 13px !important;
    }

    .tech_tag {
        font-size: 11px !important;
        padding: 6px 12px !important;
    }

    .detail_cta_btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 430px) {
    .industries_grid_container {
        padding: 30px 0 !important;
    }

    .industry_card {
        margin-bottom: 16px !important;
        border-radius: 12px !important;
    }

    .industry_card_content {
        padding: 16px !important;
    }

    .industry_icon_wrapper {
        width: 40px !important;
        height: 40px !important;
        top: 12px !important;
        right: 12px !important;
        border-radius: 10px !important;
    }

    .industry_icon_wrapper i {
        font-size: 18px !important;
    }

    .industry_card_title {
        font-size: 15px !important;
    }

    .industry_card_description {
        font-size: 11px !important;
        -webkit-line-clamp: 1 !important;
    }
}

/* --------------------------------------------------------------------------
   CONTACT FORM - EXTREME NARROW (320px)
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
    .plans {
        flex-direction: column !important;
    }

    .plan {
        width: 100% !important;
    }

    .get_quote {
        padding: 12px !important;
    }

    button.btn.btn-width {
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    .comman_tittle .other_tittle {
        text-align: left !important;
    }
}

/* --------------------------------------------------------------------------
   JOIN PAGE - MODAL / APPLY FORM (join.php)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Ensure modal is scrollable */
    .modal {
        overflow-y: auto !important;
    }

    .modal-dialog {
        margin: 10px !important;
        max-width: calc(100vw - 20px) !important;
    }

    .modal-body {
        padding: 16px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    .modal-header {
        padding: 14px 16px !important;
    }

    .modal-header .modal-title {
        font-size: clamp(16px, 4vw, 20px) !important;
    }

    /* File upload area */
    .file-upload-area,
    .resume_upload {
        padding: 16px !important;
    }

    /* Job accordion content */
    .accordion-body {
        padding: 16px !important;
    }

    /* Skills, responsibilities lists */
    .skills ul,
    .Responsibilities ul,
    .profile ul {
        padding-left: 16px !important;
    }
}

@media (max-width: 430px) {
    .modal-body {
        max-height: 65vh !important;
    }

    .accordion-button {
        padding: 12px !important;
    }

    .opening_main_tittle h3 {
        font-size: 14px !important;
    }

    .opening_main_tittle h5 {
        font-size: 11px !important;
    }
}

/* --------------------------------------------------------------------------
   FOOTER SOCIAL ICONS - NARROW SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .footer_scetion .col-md-3 {
        width: 100% !important;
    }

    .footer_scetion .col-6 {
        width: 50% !important;
    }

    .footer_scetion .col-md-2.offset-md-1 {
        margin-left: 0 !important;
        width: 50% !important;
    }

    .foot_social_icon {
        width: 28px !important;
        height: 28px !important;
    }

    .social_icon {
        width: 14px !important;
        height: 14px !important;
    }

    .quick_link ul li a {
        font-size: 12px !important;
        padding: 4px 0 !important;
    }

    .footer_heading {
        font-size: 15px !important;
    }

    p.footer_content {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 320px) {
    .footer_scetion .col-6,
    .footer_scetion .col-md-2.offset-md-1 {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   FLOATING CONTACT BUTTON - Z-INDEX SAFETY
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .floating-contact {
        z-index: 99990 !important;
    }

    /* When mobile menu is open, hide floating contact */
    body.no-scroll .floating-contact {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.2s ease !important;
    }
}

/* --------------------------------------------------------------------------
   ADDITIONAL SPACING FIXES (mb_mt_80, mt_120, mt_90)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .mb_mt_80 {
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    .mt_120 {
        margin-top: 40px !important;
    }

    .mt_90 {
        margin-top: 30px !important;
    }

    .mt_32 {
        margin-top: 16px !important;
    }

    .mb-130 {
        margin-bottom: 40px !important;
    }

    .mb-50 {
        margin-bottom: 24px !important;
    }

    .mt-74 {
        margin-top: 30px !important;
    }

    .pb-50 {
        padding-bottom: 24px !important;
    }
}

@media (max-width: 430px) {
    .mb_mt_80 {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .mt_120 {
        margin-top: 30px !important;
    }

    .mt_90 {
        margin-top: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   SERVICE DETAIL PAGES - TECHNOLOGY STACK & FEATURES (all variants)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Services overview text sections */
    .service_section .row > .col-md-6 {
        width: 100% !important;
    }

    /* Technology number */
    .techo_number .font-95 {
        font-size: clamp(40px, 10vw, 70px) !important;
    }

    .techo_number .techs {
        font-size: clamp(24px, 6vw, 40px) !important;
    }

    /* Tech horizontal line */
    span.tech_horizontal {
        width: 60px !important;
    }

    /* Feature section image + text stacking */
    .feature_section .row > .col-md-4,
    .feature_section .row > .col-md-8 {
        width: 100% !important;
    }

    /* Android app services numbered list */
    .android_app_services {
        margin-left: 12px !important;
    }
}

@media (max-width: 430px) {
    .single_feature {
        padding: 12px !important;
    }

    .feature_img {
        width: 50px !important;
        height: 42px !important;
    }

    .features_heading {
        font-size: 14px !important;
    }

    .features_details p {
        font-size: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   WHY DOLLOP PAGE - SECTION FIXES
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .capablity_img img {
        border-radius: 8px !important;
    }

    .main_heading_why_dollop {
        font-size: 18px !important;
    }

    .sub_heading_why_dollop {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
}

/* --------------------------------------------------------------------------
   NEWSLETTER SECTION - EXTREME NARROW
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .newsletter_Sec_bg_container {
        padding: 20px 12px !important;
        border-radius: 12px !important;
    }

    .newsletter_Sec_title h3 {
        font-size: 20px !important;
    }

    input.subscribe_form {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .news_submit {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* --------------------------------------------------------------------------
   GLOBAL CONTAINER PADDING FIX - ALL MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 360px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   LOCATION PAGES - CITY SPECIFIC FIXES
   (bangalore.php, delhi.php, mumbai.php, pune.php, hyderabad.php)
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .telephone h5 {
        font-size: 13px !important;
    }

    .map_location {
        max-width: 50px !important;
    }

    .place_location {
        font-size: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   PRIVACY POLICY & TERMS - NARROW SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .privacy_content h4,
    .terms_content h4 {
        font-size: 16px !important;
    }

    .privacy_content p,
    .terms_content p {
        font-size: 13px !important;
    }

    .privacy_content li,
    .terms_content li {
        font-size: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   ABOUT PAGE - TEAM & LEADERSHIP CARDS
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .keycut img,
    .top_view img {
        height: 120px !important;
    }

    .keycut_tittle {
        font-size: 14px !important;
    }

    .keycut_description {
        font-size: 11px !important;
    }

    section.history {
        padding: 24px 12px !important;
    }
}

/* --------------------------------------------------------------------------
   SWIPER / OWL CAROUSEL - MOBILE OVERFLOW PREVENTION
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .swiper-container,
    .owl-carousel {
        overflow: hidden !important;
    }

    .swiper-wrapper {
        overflow: visible !important;
    }
}

/* --------------------------------------------------------------------------
   FONT SIZE CLASSES - 430px AND BELOW
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .font-95 { font-size: clamp(36px, 9vw, 60px) !important; }
    .font-90 { font-size: clamp(36px, 9vw, 60px) !important; }
    .font-55 { font-size: clamp(18px, 5vw, 32px) !important; }
    .font-50 { font-size: clamp(18px, 5vw, 30px) !important; }
    .font-45 { font-size: clamp(18px, 4.5vw, 28px) !important; }
    .font-40 { font-size: clamp(16px, 4vw, 26px) !important; }
    .font-35 { font-size: clamp(15px, 3.5vw, 24px) !important; }
    .font-32 { font-size: clamp(15px, 3.5vw, 22px) !important; }
    .font-22 { font-size: clamp(14px, 3vw, 18px) !important; }
    .font-20 { font-size: clamp(13px, 3vw, 17px) !important; }
    .font-18 { font-size: clamp(12px, 2.8vw, 15px) !important; }
    .font-175 { font-size: clamp(50px, 15vw, 100px) !important; }
    .font-100 { font-size: clamp(40px, 12vw, 70px) !important; }
}

/* --------------------------------------------------------------------------
   OVERFLOW SAFETY - ALL SECTIONS
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    section {
        overflow-x: hidden !important;
    }

    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}
/* Global overflow fix - prevents offcanvas menus and absolute ellipses from causing horizontal scroll */

html, body {

    overflow-x: hidden !important;

    width: 100%;

    max-width: 100vw;

}




/* ==========================================================================
   SERVICES MODULE - COMPLETE QA FIX
   Production audit pass — all critical, high, and medium issues resolved
   ========================================================================== */

/* --------------------------------------------------------------------------
   SERVICE SECTION — OVERFLOW CONTAINMENT (all service detail pages)
   .service_section, .services_sec, .technology_sec all need overflow:hidden
   to contain absolutely-positioned decorative elements
   -------------------------------------------------------------------------- */
.service_section {
    overflow: hidden;
}

.services_sec {
    overflow: hidden;
    position: relative;
}

.technology_sec {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   CRITICAL FIX: span.tech_horizontal — causes horizontal scroll on services.php
   Width 549px with right: -27.4% extends far beyond viewport
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    span.tech_horizontal {
        width: 100%;
        right: 0;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   CRITICAL FIX: .opening_text padding-top: 137px — never overridden on mobile
   The right-column tagline block in all service detail pages
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .opening_text {
        padding-top: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   CRITICAL FIX: text-nowrap on tagline paragraphs
   CSS override since we cannot remove class from HTML without breaking other uses
   Affects: prodct_service_details.php, iot_service_details.php, wordpress_services.php
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .service_section .opening_text p.text-nowrap,
    .service_section .opening_text .techs.text-nowrap {
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* --------------------------------------------------------------------------
   HIGH PRIORITY: .mt_120 — never overridden on mobile (120px top margin on slider)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .mt_120 {
        margin-top: 40px !important;
    }
}

@media (max-width: 575px) {
    .mt_120 {
        margin-top: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   HIGH PRIORITY: .mb-130 — never overridden on mobile (130px bottom margin)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .mb-130 {
        margin-bottom: 50px !important;
    }
}

@media (max-width: 575px) {
    .mb-130 {
        margin-bottom: 30px !important;
    }
}

/* --------------------------------------------------------------------------
   SERVICE SECTION HERO — RESPONSIVE LAYOUT FIXES
   Top intro row: left text + right tagline
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Stack left and right columns vertically */
    .service_section > .container > .row > .col-md-6 {
        width: 100%;
    }

    .service_section .other_tittle.start_align {
        padding-top: 20px !important;
    }

    .service_section .opening_text.start_align {
        padding-top: 16px !important;
    }

    /* Tagline paragraph responsive font */
    .service_section .opening_text h4.front_tittle {
        font-size: clamp(22px, 5.5vw, 36px) !important;
    }

    .service_section .opening_text p.techs {
        font-size: clamp(18px, 4.5vw, 30px) !important;
    }

    /* The decorative gradient underline span */
    .join_horizontal.app_devlopment {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        top: auto !important;
        right: auto !important;
        margin-top: 6px;
        border-radius: 2px;
    }
}

@media (max-width: 575px) {
    .service_section .opening_text h4.front_tittle {
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    .service_section .opening_text p.techs {
        font-size: clamp(16px, 4.5vw, 24px) !important;
    }
}

@media (max-width: 360px) {
    .service_section .opening_text h4.front_tittle {
        font-size: 18px !important;
    }
    .service_section .opening_text p.techs {
        font-size: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   SERVICE SECTION — curent_openings top padding
   pt_142 already reduced in mobile-fix.css but double confirm here
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .service_section .curent_openings.pt_142 {
        padding-top: 24px !important;
    }
}

/* --------------------------------------------------------------------------
   FEATURE CARDS (.single_feature) — Complete mobile QA fix
   -------------------------------------------------------------------------- */

/* Make feature cards fill container, auto height, no fixed min-height */
@media (max-width: 991px) {
    .single_feature {
        min-height: auto !important;
        height: auto !important;
    }

    /* Add col-sm-6 behaviour via CSS for tablets (576–767px) */
    .curent_openings .row .col-md-4 {
        width: 50%;
        float: left;
    }
}

@media (max-width: 575px) {
    /* Single column on phones */
    .curent_openings .row .col-md-4 {
        width: 100%;
        float: none;
    }

    .single_feature {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    .single_feature .feature_img {
        width: 60px !important;
        height: 60px !important;
        min-width: 60px !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }

    .single_feature .features_details {
        width: auto !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .features_heading {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .features_subheading {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 360px) {
    .single_feature .feature_img {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
    }
}

/* Clearfix for the float-based tablet grid */
@media (min-width: 576px) and (max-width: 991px) {
    .curent_openings .row::after {
        content: '';
        display: table;
        clear: both;
    }
}

/* --------------------------------------------------------------------------
   SERVICES_SEC — "Why Choose Dollop" section
   android_app_services cards + number badge
   -------------------------------------------------------------------------- */

/* Contain the number badge so it doesn't cause scroll */
.android_app_services {
    overflow: hidden;
}

@media (max-width: 991px) {
    .android_app_services {
        min-height: auto !important;
        padding: 24px 20px 24px 36px !important;
        margin-bottom: 16px !important;
    }

    .number {
        width: 48px !important;
        height: 48px !important;
        left: -8px !important;
        top: 12px !important;
        font-size: 14px !important;
    }

    .number h4.font-45 {
        font-size: 18px !important;
    }
}

@media (max-width: 575px) {
    .android_app_services {
        padding: 20px 16px 20px 32px !important;
    }

    .number {
        width: 40px !important;
        height: 40px !important;
        left: -6px !important;
    }

    .android_man_head {
        font-size: 15px !important;
    }

    .android_sub_head {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }
}

/* comman_tittle inside services_sec — constrain absolutely positioned heading */
@media (max-width: 767px) {
    .services_sec .comman_tittle {
        min-height: auto !important;
        padding: 20px 0 !important;
    }

    .services_sec .comman_tittle .mt_32.text-center.position-absolute {
        position: static !important;
        width: 100% !important;
        padding: 0 16px !important;
    }

    .services_sec .comman_tittle h3.background_tittle {
        display: none !important;
    }

    .services_sec .comman_tittle p.tittle_description {
        font-size: clamp(14px, 3.5vw, 18px) !important;
    }

    .services_sec .comman_tittle h4.front_tittle {
        font-size: clamp(18px, 4.5vw, 26px) !important;
    }

    img.red_image_services_details {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   TECHNOLOGY_SEC — Slider section complete fix
   path_tech + ellipse_163 + Ellipse_164 overflow between 768–1199px
   -------------------------------------------------------------------------- */

/* Hide overflow-causing decoratives from tablet breakpoint too (not just 767px) */
@media (max-width: 1199px) {
    img.path_tech {
        display: none !important;
    }

    img.ellipse_163 {
        display: none !important;
    }

    img.Ellipse_164 {
        display: none !important;
    }

    img.red_image_services_technology {
        display: none !important;
    }

    .technology_stack_slider:after {
        display: none !important;
    }
}

/* Technology section title: contain absolute positioned heading */
@media (max-width: 767px) {
    .technology_sec .comman_tittle {
        min-height: auto !important;
        padding: 24px 0 !important;
    }

    .technology_sec .comman_tittle .mt_32.text-center.position-absolute {
        position: static !important;
        width: 100% !important;
    }

    .technology_sec .comman_tittle h3.background_tittle {
        display: none !important;
    }

    .technology_sec .comman_tittle h4.front_tittle {
        font-size: clamp(18px, 4.5vw, 26px) !important;
    }
}

/* Swiper tech slider — fix button positioning */
@media (max-width: 991px) {
    .technology_stack_slider {
        padding: 30px 0 !important;
    }

    /* Replace problematic right:88% positioning with flex-based nav */
    .swiper-button-next.my_next_tech,
    .swiper-button-prev.my_prev_tech {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        bottom: auto !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 40px !important;
        height: 40px !important;
        margin-top: 16px;
    }

    /* Wrap the nav buttons in a flex row */
    .slider_tech {
        position: relative;
    }

    /* Show navigation buttons below the slider on mobile */
    .swiper.swiper-container-logo,
    .swiper.swiper-four-container-logo {
        padding-bottom: 60px !important;
    }

    .swiper-button-next.my_next_tech {
        position: absolute !important;
        bottom: 0 !important;
        left: 60px !important;
        top: auto !important;
        right: auto !important;
    }

    .swiper-button-prev.my_prev_tech {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        top: auto !important;
        right: auto !important;
    }

    .my_prev_tech span,
    .my_next_tech span {
        font-size: 28px !important;
    }
}

@media (max-width: 575px) {
    .swiper.swiper-container-logo,
    .swiper.swiper-four-container-logo {
        padding-bottom: 50px !important;
    }

    .tech_img img {
        max-width: 80px !important;
        max-height: 60px !important;
        object-fit: contain !important;
    }

    .tech_img h4 {
        font-size: 13px !important;
        margin-top: 6px !important;
    }
}

/* Android/iOS pages: col-md-4 app image + col-md-8 slider */
@media (max-width: 767px) {
    .technology_sec .col-md-4.slider-image-col {
        display: none !important;
    }

    .app_images {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   SERVICES.PHP LISTING PAGE — tech_horizontal span fix
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .techo_number {
        padding-top: 16px !important;
    }

    .techo_number h4.font-95 {
        font-size: clamp(40px, 10vw, 60px) !important;
    }

    .techo_number p.techs {
        font-size: clamp(18px, 4.5vw, 28px) !important;
        white-space: normal !important;
    }

    /* Already fixed above but ensure this spans correctly */
    .techo_number span.tech_horizontal {
        width: 100% !important;
        right: 0 !important;
        position: relative !important;
        display: block !important;
    }
}

/* Services grid cards — singal_tech on listing page */
@media (max-width: 767px) {
    .technology_galary {
        padding-top: 16px !important;
    }

    /* Each card: 2-per-row already from col-6, ensure image scales properly */
    .singal_tech .tech_images {
        height: 140px !important;
    }

    .singal_tech .tech_img {
        height: 140px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    /* Overlay description at bottom of card */
    .singal_tech .tech_descriptions {
        padding: 8px !important;
        margin: 0 !important;
    }

    .singal_tech .tech_logo {
        width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
    }

    .singal_tech .tech_logos {
        width: 18px !important;
        height: 18px !important;
    }

    .singal_tech h5.tech_details {
        font-size: 12px !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 430px) {
    .singal_tech .tech_images {
        height: 120px !important;
    }

    .singal_tech .tech_img {
        height: 120px !important;
    }
}

@media (max-width: 360px) {
    .singal_tech .tech_images {
        height: 100px !important;
    }

    .singal_tech .tech_img {
        height: 100px !important;
    }

    .singal_tech h5.tech_details {
        font-size: 10px !important;
    }
}

/* --------------------------------------------------------------------------
   MISSING FONT-SIZE OVERRIDES: font-100, font-90, font-65
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .font-100 { font-size: clamp(36px, 8vw, 60px) !important; }
    .font-90  { font-size: clamp(32px, 7.5vw, 55px) !important; }
    .font-65  { font-size: clamp(24px, 6vw, 40px) !important; }
}

/* --------------------------------------------------------------------------
   FOOTER — inline style overrides for ISO/MSME logos
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .footer_scetion .col-md-3 img[style*="width: 83px"] {
        width: 64px !important;
        height: 70px !important;
        margin-left: 6px !important;
        padding-top: 6px !important;
    }
}

/* --------------------------------------------------------------------------
   NEWSLETTER — input group flex direction fix
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .input_group_newsletter {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .newsletter_input_wrap {
        width: 100% !important;
    }

    input.subscribe_form {
        width: 100% !important;
        border-radius: 8px !important;
        margin-right: 0 !important;
    }

    .news_submit {
        width: 100% !important;
        border-radius: 8px !important;
        margin-top: 0 !important;
    }
}


/* --------------------------------------------------------------------------
   COMMAN_TITTLE HEIGHT FIX - PREVENT COLLAPSE (all pages with section titles)
   ROOT CAUSE: Both children are position:absolute, causing parent collapse
   -------------------------------------------------------------------------- */
.comman_tittle {
    min-height: 180px;
    margin-bottom: 60px;
}

@media (max-width: 991px) {
    .comman_tittle {
        min-height: 140px;
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) {
    .comman_tittle {
        min-height: auto !important;
        margin: 30px 0 !important;
    }
}