/*
 * Logic Three – Comprehensive Responsive Overrides
 * Breakpoints used (matching Bootstrap 5 + existing style.css):
 *   xs : < 480px   (small phones)
 *   sm : 480–767px (phones / large phones)
 *   md : 768–991px (portrait tablets)
 *   lg : 992–1199px (landscape tablets / small laptops)
 *   xl : 1200px+  (desktops) ← default
 */

/* ─────────────────────────────────────────────────
   0. GLOBAL RESETS
───────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

/* ─────────────────────────────────────────────────
   1. HEADER / NAVBAR
───────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .header-one {
        padding: 14px 0;
    }
    .header-wrapper-main {
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .header-one {
        padding: 12px 0;
    }
}

@media (max-width: 767px) {
    .header-one {
        padding: 10px 0;
    }
    .logo-area img {
        height: 32px !important;
    }
}

/* ─────────────────────────────────────────────────
   2. HERO SECTION
───────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .rts-banner-area-three {
        padding-top: 80px;
        padding-bottom: 60px;
    }
}

@media (max-width: 991px) {
    .rts-banner-area-three {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .rts-banner-content-three h1 {
        font-size: 38px !important;
    }

    .thumbnail-large-iamge-banner-three {
        min-height: 380px !important;
    }
}

@media (max-width: 767px) {
    .rts-banner-area-three {
        padding-top: 50px;
        padding-bottom: 30px;
        text-align: center;
    }

    .rts-banner-content-three h1 {
        font-size: 30px !important;
    }

    .rts-banner-content-three p.disc {
        font-size: 15px;
        text-align: center !important;
    }

    .rts-banner-content-three .button-group {
        justify-content: center;
        display: flex;
    }

    .thumbnail-large-iamge-banner-three {
        min-height: 300px !important;
    }
}

@media (max-width: 479px) {
    .rts-banner-content-three h1 {
        font-size: 24px !important;
    }

    .rts-banner-content-three .button-group .rts-btn {
        width: 100%;
        text-align: center;
    }

    .thumbnail-large-iamge-banner-three {
        min-height: 240px !important;
    }
}

/* ─────────────────────────────────────────────────
   3. SECTION GAPS & SPACING
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .rts-section-gap {
        padding: 70px 0 !important;
    }

    .rts-section-gapBottom {
        padding-bottom: 70px !important;
    }

    .rts-section-gapTop {
        padding-top: 70px !important;
    }
}

@media (max-width: 767px) {
    .rts-section-gap {
        padding: 50px 0 !important;
    }

    .rts-section-gapBottom {
        padding-bottom: 50px !important;
    }

    .rts-section-gapTop {
        padding-top: 50px !important;
    }
}

@media (max-width: 479px) {
    .rts-section-gap {
        padding: 40px 0 !important;
    }

    .rts-section-gapBottom {
        padding-bottom: 40px !important;
    }

    .rts-section-gapTop {
        padding-top: 40px !important;
    }
}

/* ─────────────────────────────────────────────────
   4. TYPOGRAPHY
───────────────────────────────────────────────── */
@media (max-width: 1199px) {
    h2.title,
    h2.title.rts-text-anime-style-1 {
        font-size: 36px !important;
    }
}

@media (max-width: 991px) {
    h2.title,
    h2.title.rts-text-anime-style-1 {
        font-size: 30px !important;
    }

    h3.title {
        font-size: 24px !important;
    }
}

@media (max-width: 767px) {
    h2.title,
    h2.title.rts-text-anime-style-1 {
        font-size: 26px !important;
    }

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

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

    .pre {
        font-size: 13px;
    }
}

@media (max-width: 479px) {
    h2.title,
    h2.title.rts-text-anime-style-1 {
        font-size: 22px !important;
    }

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

/* ─────────────────────────────────────────────────
   5. BUTTONS
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .rts-btn {
        padding: 14px 24px;
        font-size: 14px;
    }

    .button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ─────────────────────────────────────────────────
   6. TITLE LAYOUT (between title and right text)
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .title-area-between {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .title-area-between .right-area {
        width: 100%;
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────────────
   7. ABOUT SECTION (HOME)
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .rts-about-area .col-xl-3,
    .rts-about-area .col-xl-6,
    .rts-about-area .col-xl-3:last-child {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    .about-cybar-mid .title-area-between .title {
        text-align: center;
    }

    .rts-about-area .thumbnail-right-about-cyber {
        height: 160px !important;
    }

    .rts-about-area .cyber-security-about-left .bottom-iamge {
        height: 160px !important;
    }
}

/* ─────────────────────────────────────────────────
   8. SERVICES SECTION (feature-area-three)
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .single-feature-area-three {
        margin-bottom: 10px;
    }

    .feature-area-left-three {
        margin-bottom: 30px;
    }
}

/* ─────────────────────────────────────────────────
   9. WORK / PROCESS SECTION
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .rts-work-process-area .pr--70 {
        padding-right: 15px !important;
    }

    .work-process-content .thumbnail-plunning-service-detials {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .work-process-content {
        margin-bottom: 30px;
    }
}

/* ─────────────────────────────────────────────────
   10. COMPANY VALUES
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .single-values-in-action,
    .single-company-value-area {
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }
}

/* ─────────────────────────────────────────────────
   11. TECHNOLOGIES / FACILITIES
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .facilities-area-left {
        margin-bottom: 30px;
    }

    .thumbnail-area-facilities img {
        max-width: 100%;
    }
}

/* ─────────────────────────────────────────────────
   12. FEATURED WORKS / PROJECTS
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .single-project-area-digital-agency {
        margin-bottom: 20px;
    }
}

/* ─────────────────────────────────────────────────
   13. TESTIMONIALS
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .testimonials-left-one {
        margin-bottom: 30px;
    }

    .floating-div {
        margin-top: 0 !important;
    }
}

@media (max-width: 767px) {
    .swiper-btn-area {
        display: none;
    }
}

/* ─────────────────────────────────────────────────
   14. PRODUCTS SWIPER SECTION
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .single-case-style-one .inner-content {
        padding: 14px;
    }
}

/* ─────────────────────────────────────────────────
   15. CONTACT SECTION
───────────────────────────────────────────────── */
/* Two-column inputs stack on mobile */
@media (max-width: 767px) {
    .contact-form-main-wrapper-contact .single-input-wrapper {
        flex-direction: column;
        gap: 0;
    }

    .contact-form-main-wrapper-contact .single-input-wrapper .single-input {
        width: 100%;
        margin-bottom: 20px;
    }

    .rts-contact-area.mt--100 {
        margin-top: 40px !important;
    }

    .contact-form-content-left-wrapper {
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .signle-contact-card {
        padding: 18px 16px !important;
    }

    .signle-contact-card .top-area .title {
        font-size: 17px !important;
    }

    .contact-form-main-wrapper-contact {
        padding: 20px 16px !important;
    }
}

/* ─────────────────────────────────────────────────
   16. FOOTER
───────────────────────────────────────────────── */
/* Logo column: center-align on mobile */
@media (max-width: 767px) {
    .rts-footer-one .left-wiget {
        text-align: center;
    }

    .rts-footer-one .left-wiget .social-wrapper {
        justify-content: center;
    }
}

/* Footer widget columns: 2-col on tablet, 1-col on mobile */
@media (max-width: 991px) {
    .footer-wized-wrapper {
        flex-wrap: wrap !important;
        gap: 28px !important;
        justify-content: flex-start !important;
    }

    .footer-wized-wrapper .single {
        width: calc(50% - 14px) !important;
        min-width: unset !important;
    }
}

@media (max-width: 575px) {
    .footer-wized-wrapper .single {
        width: 100% !important;
        min-width: unset !important;
    }

    .footer-wized-wrapper {
        gap: 22px !important;
    }
}

/* Footer logo size */
.footer-logo-img {
    height: 90px;
    width: auto;
}

@media (max-width: 991px) {
    .footer-logo-img {
        height: 75px;
    }
}

@media (max-width: 767px) {
    .footer-logo-img {
        height: 65px;
    }
}

/* Copyright row */
@media (max-width: 767px) {
    .rts-footer-one .copyright-area .copyright-1 ul {
        gap: 16px !important;
    }
}

/* ─────────────────────────────────────────────────
   17. ABOUT PAGE SECTIONS
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .rts-work-process-area .working-process-list-wrapper {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .rts-about-area-two .test-img {
        max-width: 100%;
        height: auto;
        clip-path: none !important;
        border-radius: 12px;
        overflow: hidden;
        margin-top: 24px;
    }
}

/* ─────────────────────────────────────────────────
   18. CONTACT PAGE MAP
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .google-map-area-contact iframe {
        height: 280px;
    }
}

/* ─────────────────────────────────────────────────
   19. AUTH PAGES (Login / Register)
───────────────────────────────────────────────── */
@media (max-width: 575px) {
    .lt-auth-card {
        padding: 28px 18px 24px !important;
        border-radius: 14px !important;
    }

    .lt-auth-title {
        font-size: 20px !important;
    }

    .lt-auth-sub {
        font-size: 13px !important;
    }

    .lt-auth-wrapper {
        padding: 24px 12px !important;
    }
}

/* ─────────────────────────────────────────────────
   20. CONSULTING STEPS (About page)
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .consulting-step {
        padding: 0 10px;
    }

    .single-consulting-one {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .container-consulting {
        overflow-x: hidden;
    }
}

/* ─────────────────────────────────────────────────
   21. GENERIC CONTAINER PADDING
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 479px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* ─────────────────────────────────────────────────
   22. ROW GUTTERS ON MOBILE
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .row.g-5 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }
}

/* ─────────────────────────────────────────────────
   23. SWIPER BUTTONS / NAV
───────────────────────────────────────────────── */
@media (max-width: 575px) {
    .swiper-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ─────────────────────────────────────────────────
   24. SIDEBAR (mobile nav panel)
───────────────────────────────────────────────── */
@media (max-width: 479px) {
    #side-bar {
        width: 280px !important;
    }
}

/* ─────────────────────────────────────────────────
   25. MISC OVERFLOWS
   Note: overflow-x is NOT applied to individual
   sections here because it implicitly locks
   overflow-y, which clips CSS hover transforms
   (e.g. scale/translateY on service cards).
   Horizontal scroll is prevented at the html/body
   level in section 30 below.
───────────────────────────────────────────────── */
.rts-banner-area-three,
.rts-about-area {
    overflow-x: hidden;
}

/* ─────────────────────────────────────────────────
   26. SERVICE / PRODUCT DETAIL PAGES
       (rts-banner-saas-landing is fixed 930px tall)
───────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .rts-banner-saas-landing {
        height: auto !important;
        padding-top: 100px;
        padding-bottom: 60px;
    }
}

@media (max-width: 991px) {
    .rts-banner-saas-landing {
        padding-top: 80px;
        padding-bottom: 50px;
    }

    .rts-banner-saas-landing .banner-content-two-style .title {
        font-size: 32px !important;
    }
}

@media (max-width: 767px) {
    .rts-banner-saas-landing {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .rts-banner-saas-landing .banner-content-two-style .title {
        font-size: 26px !important;
    }

    .rts-banner-saas-landing .banner-content-two-style .desc {
        font-size: 14px;
        max-width: 100%;
    }

    .rts-banner-saas-landing .section-inner .image-area img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 479px) {
    .rts-banner-saas-landing .banner-content-two-style .title {
        font-size: 22px !important;
    }
}

/* ─────────────────────────────────────────────────
   27. BREADCRUMB / ABOUT PAGE HERO
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .rts-service-details-breadcrumb-area {
        padding: 60px 0 40px;
    }

    .breadcrumb-area h1.title {
        font-size: 32px !important;
    }
}

@media (max-width: 767px) {
    .rts-service-details-breadcrumb-area {
        padding: 50px 0 30px;
        text-align: center;
    }

    .breadcrumb-area h1.title {
        font-size: 26px !important;
    }

    .breadcrumb-area .disc {
        font-size: 14px;
    }

    .large-iamage-partner img {
        border-radius: 10px;
    }
}

/* ─────────────────────────────────────────────────
   28. CONTACT PAGE
───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .title-area-contact-page {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .title-area-contact-page h2 {
        font-size: 26px !important;
    }
}

/* ─────────────────────────────────────────────────
   29. PRODUCT DETAIL – KEY FEATURES / PRICING GRID
───────────────────────────────────────────────── */
@media (max-width: 767px) {
    .single-pricing-table {
        margin-bottom: 24px;
    }

    .faq-style-one {
        margin-bottom: 0;
    }
}

/* ─────────────────────────────────────────────────
   30. UTILITY: prevent horizontal scroll site-wide
───────────────────────────────────────────────── */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* ─────────────────────────────────────────────────
   31. SERVICE CARDS: touch-device active feedback
───────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    .single-feature-area-three:active {
        border-color: var(--color-primary, #2563eb) !important;
        transform: scale(0.97) !important;
        transition: transform 0.15s ease, border-color 0.15s ease !important;
    }
}