/*
 * responsive.css — BrrSoftwares Website
 * Single source of truth for all mobile/tablet responsive overrides.
 * This file is loaded LAST so its rules take priority.
 *
 * Breakpoints:
 *   xs  : < 576px   (phones)
 *   sm  : 576-767px (large phones / small tablets)
 *   md  : 768-991px (tablets)
 *   lg  : 992px+    (desktops — mostly untouched)
 */

/* ============================================================
   0. GLOBAL — fluid base resets
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* === GLOBAL OVERFLOW FIX ===
   overflow-x: clip prevents horizontal scrollbar without creating a
   Block Formatting Context (which overflow-x:hidden does, causing left-clipping).
   Supported in Chrome 90+, Firefox 81+, Safari 16+. */
html {
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

/* === GLOBAL ROW MARGIN FIX (mobile) ===
   Bootstrap .row has margin: 0 -15px which causes ALL sections to overflow
   by 15px on each side. On mobile, zero them out globally so no section
   bleeds past the viewport edges. Columns retain their own padding for spacing. */
@media (max-width: 991px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Keep inner column spacing via padding instead of row gutters */
    .row>[class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ============================================================
   0. GLOBAL TYPOGRAPHY & SPACING
   ============================================================ */

/* Scale down large headings on mobile */
@media (max-width: 767px) {
    h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    h3 {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    h4 {
        font-size: 20px !important;
    }

    .section-tittle h2 {
        font-size: 28px !important;
        margin-bottom: 20px;
    }

    /* Add spacing between stacked columns */
    .row>[class*="col-"] {
        margin-bottom: 20px;
    }

    .row:last-child>[class*="col-"]:last-child {
        margin-bottom: 0;
    }
}

/* ============================================================
   1. HEADER / NAVIGATION
   ============================================================ */

/* Logo: desktop — col-xl-3 gives ~285px; allow the logo to fill it */
@media (min-width: 992px) {
    .logo img {
        max-width: 300px;
        width: auto;
        height: 100px;
        max-height: 100px;
    }
}


/* Header bottom: ensure flex children don't overflow */
.header-bottom .container {
    position: relative;
}

/* Mobile hamburger menu area — give breathing room */
@media (max-width: 991px) {
    .header-bottom {
        padding: 10px 0;
    }

    .logo img {
        max-width: 252px;
    }

    /* Keep logo and hamburger on ONE line — prevent Bootstrap row from wrapping. */
    .header-bottom .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        position: relative !important;
    }

    /* Hide the desktop nav column because it's empty/hidden on mobile */
    .header-bottom [class*="col-lg-9"],
    .header-bottom [class*="col-xl-9"] {
        display: none !important;
    }

    /* Logo column: shrink to its content (logo image width) */
    .header-bottom [class*="col-lg-3"],
    .header-bottom [class*="col-xl-3"] {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 70% !important;
        padding: 0 !important;
    }

    /* Nav column: target the .col-12 that contains the mobile_menu. */
    .header-bottom .col-12 {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 0 !important;
    }

    /* Mobile Menu Customization */
    .mobile_menu {
        position: relative !important;
        /* Let flexbox handle it */
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        width: auto !important;
        margin-left: auto !important;
    }

    .slicknav_menu {
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .slicknav_btn {
        background: #EB903C !important;
        /* Orange Hamburger Box */
        padding: 8px !important;
        border-radius: 4px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 40px !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 10000 !important;
        margin: 0 !important;
    }

    .slicknav_icon {
        margin: 0 !important;
        width: 24px !important;
        height: 18px !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .slicknav_icon-bar {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background-color: #ffffff !important;
        /* White bars on orange */
        margin: 0 !important;
        border-radius: 2px !important;
    }

    /* Left-side Sidebar Drawer */
    .slicknav_nav {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 280px !important;
        height: 100vh !important;
        margin: 0 !important;
        background: #0d2d3e !important;
        /* Dark Blue Theme */
        z-index: 9999 !important;
        padding: 80px 20px 30px !important;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
        overflow-y: auto;
        display: none;
        /* Slicknav toggles this */
        transition: none !important;
        /* Prevent conflicts with Slicknav toggle */
    }

    .slicknav_nav li a {
        color: #fff !important;
        font-size: 18px !important;
        padding: 15px 10px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        text-transform: capitalize;
    }

    .slicknav_nav li a:hover {
        color: #EB903C !important;
        background: transparent !important;
    }

    /* Ensure menu items stretch and text doesn't clip */
    .slicknav_nav li,
    .slicknav_nav a {
        width: 100% !important;
        display: block !important;
        white-space: normal !important;
        /* Wrap long text like "Software Development" */
        word-break: break-word !important;
        padding-right: 20px !important;
    }

    /* Submenu Toggle Icons (+) — Fix alignment and size */
    .slicknav_menu .slicknav_nav .slicknav_arrow {
        float: right !important;
        font-size: 22px !important;
        color: #eb903c !important;
        /* Brand orange */
        font-weight: bold !important;
        top: 0 !important;
        margin-top: 0 !important;
        margin-right: 15px !important;
        position: relative !important;
        opacity: 1 !important;
    }
}



@media (max-width: 575px) {
    .logo img {
        max-width: 217px;
    }
}


/* ============================================================
   2. HERO / SLIDER SECTION (index.html)
   ============================================================ */

/* Slider height — reduce on smaller screens */
@media (max-width: 991px) {
    .slider-height {
        min-height: 400px !important;
        height: auto !important;
        padding: 80px 0 60px !important;
    }
}

@media (max-width: 767px) {
    .slider-height {
        min-height: 340px !important;
        padding: 70px 0 50px !important;
    }
}

@media (max-width: 575px) {
    .slider-height {
        min-height: 300px !important;
        padding: 80px 0 40px !important;
    }
}

/* Hero caption: make ALL slider columns full-width on mobile */
@media (max-width: 767px) {

    .single-slider .col-xl-8,
    .single-slider .col-lg-7,
    .single-slider .col-md-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Use SAME specificity as style.css so !important works cleanly */

    /* THE KEY FIX: span has padding-left:100px for the decorative line.
       On mobile this pushes text off-screen. Shrink it. */
    .slider-area .hero__caption span {
        font-size: 13px !important;
        padding-left: 50px !important;
        /* was 100px — causes overflow */
    }

    .slider-area .hero__caption span::before {
        width: 35px !important;
        /* shrink decorative line proportionally */
    }

    .slider-area .hero__caption h1 {
        font-size: 26px !important;
        line-height: 1.25 !important;
        margin-bottom: 14px !important;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .slider-area .hero__caption p {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
}

@media (max-width: 575px) {

    .slider-area .hero__caption span {
        padding-left: 46px !important;
    }

    .slider-area .hero__caption span::before {
        width: 30px !important;
    }

    .slider-area .hero__caption h1 {
        font-size: 22px !important;
    }
}




/* ============================================================
   3. SECTION HEADINGS & PADDING
   ============================================================ */

@media (max-width: 767px) {
    .section-tittle h2 {
        font-size: 1.6rem !important;
        line-height: 1.3;
    }

    .section-tittle span {
        font-size: 13px;
    }

    /* Reduce big top/bottom padding on sections */
    .section-padding {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .section-padding30 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .section-padding2 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .pt-100 {
        padding-top: 60px !important;
    }

    .pb-100 {
        padding-bottom: 60px !important;
    }

    .mb-70 {
        margin-bottom: 35px !important;
    }

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

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

@media (max-width: 575px) {
    .section-tittle h2 {
        font-size: 1.35rem !important;
    }

    .section-padding {
        padding-top: 45px !important;
        padding-bottom: 45px !important;
    }

    .pt-100 {
        padding-top: 45px !important;
    }

    .pb-100 {
        padding-bottom: 45px !important;
    }
}


/* ============================================================
   4. SERVICE / CATEGORY CARDS (index.html — .single-cat)
   ============================================================ */

@media (max-width: 575px) {

    /* On very small phones go 1-column */
    .col-sm-6.col-lg-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .single-cat {
        padding: 20px 15px !important;
    }

    .cat-icon span {
        font-size: 32px !important;
    }
}

@media (min-width: 576px) and (max-width: 767px) {

    /* 2-column grid on sm landscape phones */
    .single-cat {
        padding: 20px 12px;
    }
}


/* ============================================================
   5. ABOUT / SUPPORT SECTION (index.html — .support-company-area)
   ============================================================ */

@media (max-width: 991px) {
    .support-company-area {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .support-location-img {
        margin-bottom: 30px;
        text-align: center;
    }

    .support-location-img img {
        max-width: 80%;
    }
}

@media (max-width: 767px) {

    /* Stack image above text */
    .support-company-area .col-xl-6,
    .support-company-area .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .right-caption {
        padding-top: 20px;
    }

    .right-caption .section-tittle h2 {
        font-size: 1.4rem !important;
    }
}


/* ============================================================
   6. BREADCRUMB / PAGE BANNER (inner page hero, .slider-area2)
   ============================================================ */

@media (max-width: 767px) {
    .slider-height2 {
        min-height: 160px !important;
        height: auto !important;
        padding: 50px 0 !important;
    }

    .hero-cap h2,
    .hero-cap2 h2 {
        font-size: 1.6rem !important;
        margin-bottom: 8px;
    }

    .hero-cap p,
    .hero-cap2 p {
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .slider-height2 {
        min-height: 130px !important;
        padding: 40px 0 !important;
    }

    .hero-cap h2,
    .hero-cap2 h2 {
        font-size: 1.3rem !important;
    }
}


/* ============================================================
   7. BLOG LISTING PAGE (.blog_item, .blog_item_img)
   ============================================================ */

@media (max-width: 767px) {
    .blog_item_img img {
        width: 100%;
        height: auto;
    }
}


/* ============================================================
   8. BLOG DETAIL PAGES — main content + sidebar
   ============================================================ */

/* Sidebar: stacks below main content thanks to Bootstrap col,
   but add top spacing when stacked */
@media (max-width: 991px) {
    .blog_right_sidebar {
        margin-top: 40px;
    }
}

/* Blog detail image */
@media (max-width: 767px) {
    .single-post .feature-img img {
        width: 100% !important;
        height: auto !important;
    }

    /* Article text */
    .blog_details p {
        font-size: 14px;
        line-height: 1.7;
    }

    .blog_details h2 {
        font-size: 1.2rem;
    }

    /* Navigation arrows between posts */
    .single-post-area .navigation-area {
        margin-top: 30px;
    }
}

/* Blog sidebar widget: constrain within stacked layout */
@media (max-width: 991px) {
    .blog_right_sidebar .single_sidebar_widget {
        padding: 20px !important;
    }
}


/* ============================================================
   9. GCC PAGE — specific fixes
   ============================================================ */

/* Calculator card */
@media (max-width: 767px) {
    .calculator-card {
        padding: 24px 16px !important;
    }

    .savings-amount {
        font-size: 1.8rem !important;
    }
}

/* Process steps */
@media (max-width: 767px) {
    .process-step {
        padding: 20px !important;
        margin-bottom: 20px !important;
    }
}

/* FAQ card */
@media (max-width: 575px) {
    .faq-header {
        padding: 14px !important;
        font-size: 14px;
    }

    .faq-body {
        padding: 0 14px 14px !important;
        font-size: 13px;
    }
}

/* GCC badge pills — wrap on mobile */
@media (max-width: 575px) {
    .hero__btn+.mt-30 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .badge {
        font-size: 11px;
        margin-bottom: 6px;
        white-space: normal;
    }
}


/* ============================================================
   10. CONTACT / CONNECT PAGE
   ============================================================ */

@media (max-width: 767px) {

    /* Stack map and form */
    .contact-section .col-lg-7,
    .contact-section .col-lg-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Full-width inputs */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100% !important;
    }
}


/* ============================================================
   11. FOOTER
   ============================================================ */

/* Footer columns: full-width on small phones */
@media (max-width: 575px) {
    .single-footer-caption {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 30px;
    }

    /* Prevent email from overflowing */
    .footer-pera .info1 {
        word-break: break-all;
        font-size: 13px;
    }

    /* Footer column text size */
    .footer-tittle h4 {
        font-size: 16px;
    }

    .footer-tittle ul li a {
        font-size: 13px;
    }
}

/* Footer bottom row: stack on mobile */
@media (max-width: 767px) {

    .footer-bottom .col-xl-8,
    .footer-bottom .col-lg-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center;
        margin-bottom: 15px;
    }

    .footer-bottom .col-xl-4,
    .footer-bottom .col-lg-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        text-align: center;
    }

    .footer-social.f-right {
        float: none !important;
        text-align: center;
    }

    /* Footer newsletter form */
    .footer-form input[type="email"] {
        width: 100% !important;
    }
}

/* Footer copy text */
@media (max-width: 575px) {
    .footer-copy-right p {
        font-size: 12px;
        text-align: center;
    }
}


/* ============================================================
   12. GENERAL BUTTONS — min tap target (48px) on touch screens
   ============================================================ */

@media (max-width: 767px) {

    .btn,
    .boxed-btn,
    .post-btn,
    .more-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}


/* ============================================================
   13. TABLES — make them scrollable horizontally on mobile
   ============================================================ */

@media (max-width: 767px) {
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ============================================================
   14. SLICKNAV MOBILE MENU — style fixes
   ============================================================ */

.slicknav_menu {
    display: none;
    /* hidden by default; JS shows it on mobile */
}

@media (max-width: 991px) {
    .slicknav_menu {
        display: block;
        background: #14435c;
        /* Reset the original slicknav.css padding: 0 so our nav controls spacing */
        padding: 0;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* slicknav.css has .mobile_menu { position:absolute; right:10px; width:96% }
       This shifts the whole menu 10px from right, making its left edge overflow and get clipped.
       Fix: full-width, no offset. */
    .mobile_menu {
        position: relative !important;
        right: auto !important;
        width: 100% !important;
        z-index: 99;
    }

    .slicknav_btn {
        background: transparent;
        margin-top: 0;
        top: auto;
    }

    .slicknav_icon-bar {
        background: #fff !important;
    }

    /* slicknav.css has .slicknav_nav { float:right; padding:19px; background:#fff }
       float:right causes left-edge overflow and first-letter clipping.
       Fix: clear float, full-width, brand dark bg. */
    .slicknav_nav {
        float: none !important;
        background: #0d2d3e !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .slicknav_nav a {
        color: #fff !important;
        padding: 12px 20px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 14px;
        display: block;
    }

    .slicknav_nav a:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #eb903c !important;
        border-radius: 0 !important;
    }

    .slicknav_nav .slicknav_item a {
        padding: 0 !important;
        margin: 0 !important;
        border: none;
        display: inline;
    }

    .slicknav_nav .slicknav_row {
        padding: 12px 20px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .slicknav_nav .slicknav_row:hover {
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 0 !important;
        color: #eb903c !important;
    }

    .slicknav_nav .slicknav_arrow {
        color: rgba(255, 255, 255, 0.7) !important;
        float: right;
        position: static;
        top: auto;
        font-size: 16px;
    }
}



/* ============================================================
   15. MISC FIXES
   ============================================================ */

/* Fix any iframe / embed overflow (e.g., YouTube, Maps) */
@media (max-width: 767px) {
    iframe {
        max-width: 100%;
    }

    .map-wrapper iframe {
        height: 250px;
    }
}

/* Counter / stat numbers — keep readable */
@media (max-width: 575px) {

    .counter-single h2,
    .achievement-counter h2 {
        font-size: 2rem !important;
    }
}

/* Section title spacing fix on mobile */
@media (max-width: 575px) {
    .section-tittle {
        margin-bottom: 25px !important;
    }

    h2 {
        word-break: break-word;
    }
}

/* Fix post-btn on mobile */
@media (max-width: 575px) {
    .post-btn {
        padding: 14px 24px !important;
        font-size: 13px !important;
    }
}