/* =====================================================================
   RESPONSIVE STANDARD OVERRIDES
   Loaded LAST (after every other stylesheet) on every frontend page.
   Breakpoints used across the whole site:
     Desktop : 992px and up   (no override needed)
     Tablet  : 577px – 991px
     Mobile  : 576px and below
   Safe, additive rules only — nothing here removes existing behaviour,
   it only fills gaps so every section degrades gracefully on
   tablets/phones.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. GLOBAL SAFETY NET
   --------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}
body {
    overflow-x: hidden;
    width: 100%;
}
.container,
.cpp-section .container {
    width: 100%;
}

/* ---------------------------------------------------------------------
   1. SECTION PADDING — big desktop paddings feel huge on small screens
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .cpbp-section,
    .tp-section,
    .cp-section,
    .bp-section,
    .tw-trust-section,
    .tw-awards-section,
    .wcu-section,
    .footer-top {
        padding-top: 64px;
        padding-bottom: 56px;
    }
    .section-pad { padding: 44px 0; }
}
@media (max-width: 575px) {
    .cpbp-section,
    .tp-section,
    .cp-section,
    .bp-section,
    .tw-trust-section,
    .tw-awards-section,
    .wcu-section,
    .footer-top {
        padding-top: 44px;
        padding-bottom: 36px;
    }
    .section-pad { padding: 32px 0; }
    .section-pad-sm { padding: 4px 0; }
    .navbar-inner{
        padding:0;
        max-width:100vw;
        margin: 0 8px;
    }
    .navbar-inner img {
            max-width: 190px !important;
            margin-right : 20px;
    }
    .about-img-accent
    {
        width:80px;
    }
    #reveal,#blog-container,#project-container {grid-template-columns: 1fr !important;}

    .jt-staff{visibility: hidden !important;}
    #contact{padding:20px !important;}
    .cp-social-row {flex-direction: row !important;}
 
}

@media (min-width: 320px) and (max-width: 375px) {
    .navbar-inner{
        padding:0;
        margin: 0 8px;
    }
}
/* Mobile & Tablet */
@media (max-width: 1024px){

    .owl-carousel .owl-stage-outer{
        padding-bottom: 60px !important;
    }

    .owl-carousel .owl-nav{
        position: absolute !important;
        left: 50% !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 12px !important;
        justify-content: center !important;
        width: auto !important;
    }

    .owl-carousel .owl-nav button{
        width: 46px !important;
        height: 46px !important;
        border-radius: 50% !important;
        background: #0F4C81 !important;
        color: #fff !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: .3s;
    }

    .owl-carousel .owl-nav button:hover{
        background: #0A3B63 !important;
    }
}

/* ---------------------------------------------------------------------
   2. HEADINGS / HERO TEXT — scale down so nothing wraps awkwardly
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    h1 { font-size: clamp(1.7rem, 4.4vw, 2.4rem); }
    h2, .wcu-title, .bp-title, .cp-head h2, .tw-heading { font-size: clamp(1.4rem, 3.6vw, 2rem); }
}
@media (max-width: 575px) {
    h1 { font-size: 1.6rem; line-height: 1.25; }
    h2, .wcu-title, .bp-title, .cp-head h2, .tw-heading { font-size: 1.35rem; line-height: 1.3; }
    h3 { font-size: 1.15rem; }
    .section-label, .cp-badge, .bp-badge, .tw-badge, .wcu-badge, .cpbp-blueprint { font-size: .68rem; }
}

/* ---------------------------------------------------------------------
   3. GRID CATCH-ALL — force every known content grid to a single
      column on phones, whatever breakpoint each file already used.
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .about-grid,
    .stats-grid,
    .projects-grid,
    .services-grid,
    .blog-grid,
    .contact-grid,
    .form-grid,
    .events-grid,
    .footer-grid,
    .wcu-grid,
    .cpbp-grid,
    .cpbp-stats,
    .tp-grid,
    .cp-grid,
    .cp-form-grid,
    .bp-grid,
    .bp-featured,
    .tw-grid,
    .tw-award-grid,
    .video-grid,
    .cpb-grid,
    .cpf-grid,
    .award-grid,
    .award-grid-3,
    .sv-trust-grid,
    .director-grid {
        grid-template-columns: 1fr !important;
    }
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ---------------------------------------------------------------------
   4. TABLET (577-991px) — sensible 2-column layout where a file jumps
      straight from desktop to 1-column, skipping a tablet step.
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .wcu-grid, .cpbp-stats, .tw-award-grid, .cpbp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------
   5. HERO / CTA BUTTON GROUPS — stack full-width on mobile
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .hero-btns,
    .wcu-cta-actions,
    .cpbp-cta-actions,
    .cp-social-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hero-btns .btn,
    .wcu-cta-btn,
    .cpbp-btn,
    .cp-submit {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* ---------------------------------------------------------------------
   6. FORMS — full-width fields, comfortable tap targets
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .cp-field input,
    .cp-field textarea,
    .cp-field select,
    input, textarea, select {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
    }
    .cp-form-card, .contact-form-wrap {
        padding: 22px !important;
    }
}

/* ---------------------------------------------------------------------
   7. DECORATIVE BACKGROUND ELEMENTS — large fixed-px blobs/orbits/
      skylines should shrink on small screens so they don't dominate
      the viewport (their sections already clip overflow, this just
      keeps the visual balance sensible).
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .cpbp-blob, .tw-blob, .tw-orbit, .tw-awards-blob,
    .bp-blob, .bp-mesh, .bp-skyline, .cp-blob, .cp-skyline,
    .cpp-glow, .cpp-ring, .cpp-skyline, .cpp-mesh,
    .hero-glow-orb {
        transform: scale(.55);
    }
}

/* ---------------------------------------------------------------------
   8. FOOTER — center columns, tidy bottom bar (tablet + mobile)
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .footer-grid > div { text-align: center; }
    .footer-about .logo { justify-content: center; }
    .footer-about p { margin-left: auto; margin-right: auto; }
    .footer-socials { justify-content: center; flex-wrap: wrap; }
    .footer-links { align-items: center; }
    .footer-col h4 { text-align: center; }
    .footer-col h4::after { left: 50%; transform: translateX(-50%); }
    .footer-contact-item { justify-content: center; text-align: left; }
    .footer-bottom-links { flex-wrap: wrap; justify-content: center; }
}

/* ---------------------------------------------------------------------
   9. TESTIMONIAL / TRUST-AWARDS CARDS on very small screens
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    .tp-card, .tw-award-card, .tw-card, .bp-featured-content, .cp-form-card {
        padding: 22px 18px !important;
    }
    .tp-avatar-wrap, .tp-avatar { width: 56px !important; height: 56px !important; }
}

/* ---------------------------------------------------------------------
   10. TABLES (if any content table appears in blog/about content)
   --------------------------------------------------------------------- */
@media (max-width: 575px) {
    table { font-size: .85rem; }
}

/* ---------------------------------------------------------------------
   11. NAVBAR — logo left, theme-toggle + hamburger menu right (tablet + mobile)
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .navbar-inner {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* ---------------------------------------------------------------------
   12. "OUR PROJECTS" SLIDER — make owl nav/dots fully visible on
       tablet/mobile (the section clips overflow, which was cutting
       the nav buttons off).
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    #projects {
        overflow: visible !important;
    }
    .projects-grid.owl-carousel {
        position: relative;
        overflow: visible;
        margin-bottom: 24px;
    }
    .projects-grid .owl-stage-outer {
        overflow: visible;
    }
    .projects-grid .owl-nav {
        z-index: 5;
    }
}

/* ---------------------------------------------------------------------
   13. "WHY CHOOSE US" CARDS — swipeable slider on tablet/mobile
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .wcu-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 18px;
        padding: 4px 4px 16px;
        scrollbar-width: none;
    }
    .wcu-grid::-webkit-scrollbar { display: none; }
    .wcu-grid .wcu-card {
        flex: 0 0 82%;
        scroll-snap-align: center;
    }
}
@media (max-width: 575px) {
    .wcu-grid .wcu-card { flex: 0 0 88%; }
}

/* ---------------------------------------------------------------------
   14. BLOG PREVIEW CARDS — swipeable slider on tablet/mobile
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
    .bp-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 18px;
        padding: 4px 4px 16px;
        scrollbar-width: none;
    }
    .bp-grid::-webkit-scrollbar { display: none; }
    .bp-grid .bp-card {
        flex: 0 0 82%;
        scroll-snap-align: center;
    }
}
@media (max-width: 575px) {
    .bp-grid .bp-card { flex: 0 0 88%; }
}