/* ==========================================================================
   Codewraps — Site-wide Modern Design System
   Loaded on every page (via include/head.php) after the legacy stylesheets,
   so it can restyle the shared header/footer/nav/buttons/cards site-wide
   without editing or removing the legacy CSS files those pages still rely
   on for layout. Extends the same tokens established on the homepage
   (home-redesign-saas.css) so the whole site reads as one design language.
   ========================================================================== */

:root {
    --cw-bg: #f6f8fc;
    --cw-bg-soft: #eef2fa;
    --cw-surface: #ffffff;
    --cw-border: #e6eaf3;
    --cw-border-soft: #eef1f8;
    --cw-text: #101a3d;
    --cw-text-dim: #5b6478;
    --cw-text-mute: #8991a8;
    --cw-green: #0abc5f;
    --cw-green-dark: #089248;
    --cw-blue: #304a9d;
    --cw-blue-light: #5677ff;
    --cw-navy: #050748;
    --cw-gradient-green: linear-gradient(135deg, #22e894 0%, #0abc5f 55%, #089248 100%);
    --cw-gradient-blue: linear-gradient(135deg, #5677ff 0%, #304a9d 100%);
    --cw-gradient-text: linear-gradient(90deg, #089248 0%, #0abc5f 45%, #304a9d 100%);
    --cw-radius-lg: 24px;
    --cw-radius-md: 16px;
    --cw-radius-sm: 10px;
    --cw-glow-green: 0 16px 40px -14px rgba(10, 188, 95, .38);
    --cw-shadow-card: 0 20px 50px -28px rgba(16, 26, 61, .18);
    --cw-shadow-soft: 0 8px 24px -12px rgba(16, 26, 61, .1);
    --cw-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- Base typography (site-wide, non-destructive) ---- */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--cw-text);
}

/* ==========================================================================
   Top bar
   ========================================================================== */
.header-main .topbar {
    background: var(--cw-navy) !important;
    padding: 8px 0;
}

.header-main .topbar a {
    color: rgba(255, 255, 255, .82) !important;
    font-size: 13px;
    font-weight: 500;
    transition: color .2s var(--cw-ease);
}

.header-main .topbar a:hover {
    color: #fff !important;
}

.header-main .topbar .text-accent,
.header-main .topbar i.text-accent {
    color: var(--cw-green) !important;
}

/* ==========================================================================
   Main navigation
   ========================================================================== */
.header-main {
    background: #fff;
    box-shadow: 0 1px 0 var(--cw-border);
}

.header-main .navflex {
    align-items: center;
}

.header-main .logo img {
    height: 42px;
    width: auto;
}

.main-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-menu>li>a,
.main-menu>li>a.cool-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cw-text) !important;
    border-radius: var(--cw-radius-sm);
    transition: color .2s var(--cw-ease), background .2s var(--cw-ease);
    text-decoration: none !important;
}

.main-menu>li>a:hover,
.main-menu>li:hover>a.cool-link {
    color: var(--cw-green-dark) !important;
    background: var(--cw-bg-soft);
}

.main-menu>li>a .fas.fa-angle-down {
    font-size: 11px;
    margin-left: 4px;
    opacity: .55;
    transition: transform .2s var(--cw-ease);
}

.main-menu>li:hover>a .fas.fa-angle-down {
    transform: rotate(180deg);
}

/* Dropdown panels */
.main-menu .sub-menu,
.main-menu .full_size_menu {
    background: #fff;
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius-md);
    box-shadow: var(--cw-shadow-card);
    padding: 10px;
    margin-top: 10px !important;
}

.main-menu .sub-menu li a {
    display: block;
    padding: 9px 12px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cw-text-dim) !important;
    border-radius: var(--cw-radius-sm);
    transition: all .18s var(--cw-ease);
}

.main-menu .sub-menu li a:hover {
    background: var(--cw-bg-soft);
    color: var(--cw-green-dark) !important;
    padding-left: 16px;
}

.main-menu .full_size_menu .submenu_header {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cw-navy);
    padding: 8px 10px 8px;
    line-height: 1.4;
    display: block;
}

.main-menu .full_size_menu .i-color {
    color: var(--cw-green) !important;
    margin-right: 6px;
}

/* Free Quote CTA */
.menu-setting .btn.btn-primary-dark {
    background: var(--cw-gradient-green) !important;
    border: none !important;
    border-radius: 999px;
    padding: 11px 22px !important;
    box-shadow: var(--cw-glow-green);
    transition: transform .2s var(--cw-ease), box-shadow .2s var(--cw-ease);
}

.menu-setting .btn.btn-primary-dark:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 44px -14px rgba(10, 188, 95, .48);
}

.menu-setting .btn.btn-primary-dark span {
    color: #fff !important;
    font-weight: 700 !important;
}

/* Give-a-Query floating tab */
.query-modal-container .query_btn {
    background: var(--cw-gradient-blue) !important;
    border-radius: var(--cw-radius-sm) var(--cw-radius-sm) 0 0;
    box-shadow: var(--cw-shadow-card);
}

.query-modal-container .query_btn span {
    color: #fff !important;
    font-weight: 600;
}

/* ==========================================================================
   Mobile header / drawer nav
   ========================================================================== */
.mobile-header.header-main {
    background: #fff;
}

.mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cw-border);
}

.mobile-logo img {
    height: 34px;
}

.mobile-toggle {
    background: var(--cw-bg-soft);
    border: none;
    width: 42px;
    height: 42px;
    border-radius: var(--cw-radius-sm);
    color: var(--cw-navy);
    font-size: 18px;
}

.mobile-nav {
    background: #fff;
    box-shadow: -20px 0 50px -20px rgba(16, 26, 61, .3);
}

.mobile-nav-header {
    background: var(--cw-navy);
    color: #fff;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-header .menu-title {
    font-weight: 700;
    letter-spacing: .02em;
}

.mobile-nav-header .mobile-close {
    background: rgba(255, 255, 255, .12);
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
}

.mobile-menu {
    padding: 8px 0;
}

.mobile-menu>li>a,
.mobile-menu .menu-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cw-text) !important;
    border-bottom: 1px solid var(--cw-border-soft);
    cursor: pointer;
}

.mobile-menu ul a {
    display: block;
    padding: 10px 20px 10px 30px;
    font-size: 13.5px;
    color: var(--cw-text-dim) !important;
}

.mobile-menu .mobile-cta a {
    margin: 14px 20px;
    display: block;
    text-align: center;
    background: var(--cw-gradient-green);
    color: #fff !important;
    font-weight: 700;
    padding: 13px;
    border-radius: 999px;
    box-shadow: var(--cw-glow-green);
}

.mobile-menu .mobile-contact {
    padding: 6px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-menu .mobile-contact a {
    padding: 10px 14px;
    background: var(--cw-bg-soft);
    border-radius: var(--cw-radius-sm);
    font-weight: 600;
    color: var(--cw-text) !important;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    background: var(--cw-navy) !important;
    padding: 3.2rem 0 0;
}

footer h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

footer .address li,
footer .resource li {
    margin-bottom: 10px;
}

footer .address label,
footer .resource a {
    color: rgba(255, 255, 255, .68) !important;
    font-size: 13.5px;
    line-height: 1.6;
    text-decoration: none;
    transition: color .2s var(--cw-ease);
}

footer .resource a:hover {
    color: var(--cw-green) !important;
}

footer .rgt_brder {
    border-right: 1px solid rgba(255, 255, 255, .1) !important;
}

footer .social-icon ul {
    display: flex;
    gap: 10px;
    padding: 0;
    margin: 0;
}

footer .social-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
    transition: all .2s var(--cw-ease);
}

footer .social-icon a:hover {
    background: var(--cw-gradient-green);
    transform: translateY(-2px);
}

footer .resource-inline {
    color: rgba(255, 255, 255, .45) !important;
    font-size: 12.5px;
}

footer .last_footer {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 8px;
}

footer .last_footer p,
footer .last_footer a {
    color: rgba(255, 255, 255, .55) !important;
    font-size: 13px;
}

footer .last_footer a:hover {
    color: var(--cw-green) !important;
}

/* Pre-footer consultation CTA strip */
.consultation.consultation-item {
    background: var(--cw-gradient-blue) !important;
    padding: 2.2rem 0;
}

.consultation.consultation-item h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: 4px;
}

.consultation.consultation-item a[data-toggle="modal"] {
    display: inline-flex;
    align-items: center;
    background: var(--cw-gradient-green) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 12px 26px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: var(--cw-glow-green);
    transition: transform .2s var(--cw-ease);
}

.consultation.consultation-item a[data-toggle="modal"]:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   Generic buttons/cards used across inner pages
   ========================================================================== */
.btn-primary,
.button-animation {
    background: var(--cw-gradient-green) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--cw-glow-green);
    font-weight: 700 !important;
}

/* ==========================================================================
   Inner-page hero / breadcrumb banner (.bg-cover, used by ~24 pages)
   ========================================================================== */
.bg-cover {
    background-image: var(--cw-gradient-blue) !important;
    background: var(--cw-gradient-blue) !important;
    min-height: 260px !important;
}

.bg-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(5, 7, 72, .55) 0%, rgba(48, 74, 157, .35) 100%);
}

.bg-cover .bg-text {
    position: relative;
    z-index: 1;
    width: 100%;
}

.bg-cover .bg-text h1,
.bg-cover .bg-text h2 {
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    text-shadow: none !important;
}

.bg-cover .breadcrumb-wrapper-inner {
    margin-top: 6px;
}

.bg-cover .breadcrumb-wrapper-inner span,
.bg-cover .breadcrumb-wrapper-inner a {
    color: rgba(255, 255, 255, .8) !important;
    font-size: 13.5px;
    font-weight: 500;
}

.bg-cover .breadcrumb-wrapper-inner .current-item {
    color: #fff !important;
    font-weight: 700;
}

/* Floating stat-counter card that overlaps the hero bottom edge */
.bg-cover .project_counter {
    position: relative;
    z-index: 2;
    margin-top: 30px;
}

.project_counter>.container,
.project_counter .container {
    background: #fff !important;
    border-radius: var(--cw-radius-md) !important;
    box-shadow: var(--cw-shadow-card) !important;
    padding: 26px 20px !important;
}

.project_counter .counter-column figure {
    background: var(--cw-gradient-green) !important;
    box-shadow: none !important;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 10px;
}

.project_counter h4 {
    color: var(--cw-navy) !important;
    font-weight: 800 !important;
}

.project_counter h5 {
    color: var(--cw-text-dim) !important;
    font-weight: 600;
}

/* ==========================================================================
   Section intros (.section_title — used across many inner pages)
   ========================================================================== */
.section_title h5 {
    display: inline-block;
    color: var(--cw-green-dark) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--cw-bg-soft);
    padding: 5px 14px;
    border-radius: 999px;
}

.section_title h4 {
    color: var(--cw-navy) !important;
    font-weight: 800 !important;
    margin-top: 12px;
}

.section_title h4 span {
    background: var(--cw-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Checklists (.flexiable, .why-point)
   ========================================================================== */
.flexiable ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: var(--cw-bg-soft);
    border-radius: var(--cw-radius-sm);
    font-weight: 500;
    color: var(--cw-text);
}

.flexiable ul li img {
    width: 20px;
    height: 20px;
}

.why-point i.fa-check {
    background: var(--cw-gradient-green) !important;
    color: #fff !important;
}

.why-point p {
    color: var(--cw-text);
    font-weight: 500;
}

/* ==========================================================================
   "Expertise" 2x2 icon grid + techno-points panel
   ========================================================================== */
.Expertise {
    background: var(--cw-navy) !important;
    background-image: none !important;
}

.Expertise .servce_menu {
    border-color: rgba(255, 255, 255, .15) !important;
    transition: background .2s var(--cw-ease);
}

.Expertise .servce_menu:hover {
    background: rgba(255, 255, 255, .06);
}

.Expertise .servce_menu h5 {
    color: #fff !important;
    font-weight: 700;
    margin-top: 10px;
}

.techno-points h3 {
    color: #fff !important;
    font-weight: 800 !important;
}

.techno-points h5 {
    background: none !important;
    color: rgba(255, 255, 255, .75) !important;
    padding: 0 !important;
    width: auto !important;
}

ul.techno-list li {
    color: rgba(255, 255, 255, .85) !important;
}

.techno_buttons a.techno-points-buttons {
    display: inline-flex;
    align-items: center;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none !important;
    margin: 4px 6px 4px 0;
    transition: transform .2s var(--cw-ease);
}

.techno_buttons a.techno-points-buttons:first-child {
    background: var(--cw-gradient-green) !important;
    color: #fff !important;
}

.techno_buttons a.techno-points-buttons:last-child {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .25);
}

.techno_buttons a.techno-points-buttons:hover {
    transform: translateY(-2px);
}

/* ==========================================================================
   "How it works" 3-card strip
   ========================================================================== */
.how-it-works {
    background: var(--cw-bg) !important;
    background-image: none !important;
    padding: 3.5rem 0;
}

.how_content {
    background: #fff !important;
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius-md) !important;
    box-shadow: var(--cw-shadow-soft);
    transition: transform .25s var(--cw-ease), box-shadow .25s var(--cw-ease);
}

.how_content:hover {
    transform: translateY(-6px);
    box-shadow: var(--cw-shadow-card);
}

.how_content h5 {
    color: var(--cw-navy) !important;
    font-weight: 700;
}

.how_content a {
    background: var(--cw-gradient-green) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    border: none !important;
}

/* ==========================================================================
   Client logo grid (.our_clients_wrapper)
   ========================================================================== */
.our_clients_wrapper .our_clients_item {
    background: #fff;
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius-sm);
    transition: box-shadow .2s var(--cw-ease), transform .2s var(--cw-ease);
}

.our_clients_wrapper .our_clients_item:hover {
    box-shadow: var(--cw-shadow-soft);
    transform: translateY(-3px);
}

/* ==========================================================================
   Generic dark CTA button (.btn-primary-dark — contact form, sidebar modal)
   ========================================================================== */
.btn-primary-dark {
    background: var(--cw-gradient-green) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: var(--cw-glow-green) !important;
    font-weight: 700 !important;
    transition: transform .2s var(--cw-ease) !important;
}

.btn-primary-dark:hover {
    transform: translateY(-2px);
    color: #fff !important;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.sec-title .title {
    color: var(--cw-green-dark) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.contact-page-section .inner-container {
    border-radius: var(--cw-radius-lg) !important;
    box-shadow: var(--cw-shadow-card) !important;
    border: none !important;
    overflow: hidden;
}

.contact-page-section .special-title {
    color: var(--cw-navy) !important;
}

.social_media_links h5 {
    color: var(--cw-navy);
    font-weight: 700;
}

.social_media_links .btn {
    background: var(--cw-bg-soft) !important;
    color: var(--cw-navy) !important;
    border-radius: 50% !important;
    transition: all .2s var(--cw-ease) !important;
}

.social_media_links .btn:hover {
    background: var(--cw-gradient-green) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

.contact-form .form-control {
    border: 1px solid var(--cw-border) !important;
    border-radius: var(--cw-radius-sm) !important;
    padding: 12px 14px !important;
    transition: border-color .2s var(--cw-ease), box-shadow .2s var(--cw-ease);
}

.contact-form .form-control:focus {
    border-color: var(--cw-green) !important;
    box-shadow: 0 0 0 3px rgba(10, 188, 95, .12) !important;
}

/* Office branch cards */
.office_branches .card {
    border-radius: var(--cw-radius-md) !important;
    box-shadow: var(--cw-shadow-soft) !important;
    transition: transform .25s var(--cw-ease), box-shadow .25s var(--cw-ease);
}

.office_branches .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cw-shadow-card) !important;
}

.office_branches .card-title {
    color: var(--cw-navy) !important;
    font-weight: 700;
}

.office_branches .card-content i {
    color: var(--cw-green) !important;
}

/* ==========================================================================
   Service page banner CTA + headings + FAQ accordion
   (shared by all 8 CMS service pages: software/web/php/mobile/android/
   ios-development, SEO, digital-marketing)
   ========================================================================== */
.btn_slide {
    border-radius: 999px !important;
    border: none !important;
    background: var(--cw-gradient-green) !important;
    color: #fff !important;
    letter-spacing: .04em;
    padding: 11px 28px !important;
    box-shadow: var(--cw-glow-green);
}

.btn_slide::before {
    display: none;
}

.btn_slide:hover {
    background: var(--cw-gradient-green) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

.service_banner ul.breadcrumb {
    padding: 0;
    margin-top: 18px;
    display: flex;
    gap: 8px;
    list-style: none;
}

.service_banner ul.breadcrumb li,
.service_banner ul.breadcrumb li a {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 13px;
}

/* FAQ styling lives in assests/css/faq-redesign.css (loaded sitewide). */

/* ==========================================================================
   Portfolio filter tabs (.project-cat — portfolio/app-portfolio/seo-portfolio)
   ========================================================================== */
.project-cat {
    border: 1px solid var(--cw-border) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--cw-text-dim) !important;
    font-weight: 600;
    padding: 9px 20px !important;
    transition: all .2s var(--cw-ease) !important;
}

.project-cat:hover {
    border-color: var(--cw-green) !important;
    color: var(--cw-green-dark) !important;
}

.project-cat.active {
    background: var(--cw-gradient-green) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--cw-glow-green);
}

/* ==========================================================================
   "Key Benefits" cards (.benefit-box — shared across all 11 hire-* pages)
   ========================================================================== */
.benefit {
    padding: 3.5rem 0;
}

.benefit h2 {
    color: var(--cw-navy) !important;
    font-weight: 800;
}

.benefit-box.bg-white {
    border: 1px solid var(--cw-border) !important;
    border-radius: var(--cw-radius-md) !important;
    box-shadow: var(--cw-shadow-soft) !important;
    padding: 2rem !important;
    position: relative;
    transition: transform .25s var(--cw-ease), box-shadow .25s var(--cw-ease);
}

.benefit-box.bg-white::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--cw-gradient-green);
    border-radius: var(--cw-radius-md) 0 0 var(--cw-radius-md);
}

.benefit-box.bg-white:hover {
    transform: translateY(-4px);
    box-shadow: var(--cw-shadow-card) !important;
}

.benefit-content h3 {
    color: var(--cw-navy) !important;
    font-weight: 700;
    font-size: 20px;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.benefit-content h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--cw-gradient-green);
    margin-top: 10px;
    border-radius: 2px;
}

/* ==========================================================================
   Technology page feature list (.service_items — shared across ~19 pages:
   laravel, wordpress, codeigniter, symfony, cake-php, mysql, mongodb, etc.)
   ========================================================================== */
.services_wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 0 !important;
}

.service_items {
    width: auto !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid var(--cw-border);
    border-radius: var(--cw-radius-md);
    box-shadow: var(--cw-shadow-soft);
    padding: 1.8rem !important;
    transition: transform .25s var(--cw-ease), box-shadow .25s var(--cw-ease);
    display: flex;
    align-items: flex-start;
}

@media (max-width: 991.98px) {
    .services_wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .services_wrapper {
        grid-template-columns: 1fr;
    }
}

.service_items:hover {
    transform: translateY(-5px);
    box-shadow: var(--cw-shadow-card);
}

.service_items>i.fa-cogs {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cw-bg-soft);
    color: var(--cw-green-dark) !important;
    font-size: 18px !important;
}

.service_items h3 {
    color: var(--cw-navy) !important;
    font-weight: 700;
    font-size: 18px;
}

.service_items p {
    color: var(--cw-text-dim);
    text-align: left !important;
}

/* ==========================================================================
   Blog listing + blog post detail (blog.php, details.php)
   ========================================================================== */
.blog_search .form-control {
    border: 1px solid var(--cw-border) !important;
    border-radius: 999px 0 0 999px !important;
    padding: 11px 16px !important;
}

.blog_search .btn {
    background: var(--cw-gradient-green) !important;
    color: #fff !important;
    border-radius: 0 999px 999px 0 !important;
    border: none !important;
    padding: 0 18px !important;
}

.sidebar-column .card,
.blog-list-card {
    border: 1px solid var(--cw-border) !important;
    border-radius: var(--cw-radius-md) !important;
    box-shadow: var(--cw-shadow-soft) !important;
}

.sidebar-column h3 {
    color: var(--cw-navy) !important;
    font-weight: 700;
}

.sidebar-column ul li {
    border-bottom: 1px solid var(--cw-border-soft);
    padding: 10px 0;
}

.sidebar-column ul li a,
.sidebar-column ul li {
    color: var(--cw-text-dim) !important;
    transition: color .2s var(--cw-ease);
}

.sidebar-column ul li:hover {
    color: var(--cw-green-dark) !important;
}

.sidebar-column .fa-angle-double-right,
.sidebar-column i.fa {
    color: var(--cw-green) !important;
}

.card.border-0.shadow {
    border-radius: var(--cw-radius-md) !important;
    box-shadow: var(--cw-shadow-soft) !important;
    overflow: hidden;
}

/* ==========================================================================
   Dropdown menus — single source of truth.
   style.css, custom.css and responsive.css each define their own
   show/hide mechanism for the same .sub-menu/.full_size_menu elements
   (some via display:none/block, one via opacity+pointer-events inside a
   min-width:768px media query, one via a leftover 1100px flex mega-menu
   that no longer matches this design). Those conflicting rules are why
   the dropdown's actual visibility was gated ONLY by native :hover and
   never responded to the .menu-open class a JS hover-intent grace period
   added — the class was toggling only the (already-irrelevant) display
   property while opacity/pointer-events, the real gatekeeper, ignored it.
   This block is the one place that now controls visibility, responds to
   EITHER native :hover (zero-JS fallback) or .menu-open (JS grace period,
   see the mouseenter/mouseleave handler in include/header.php), and wins
   over the older rules via !important without deleting them (they still
   apply harmlessly on other pages/components that reuse the same class
   names in unrelated contexts).
   ========================================================================== */
.main-menu>li>.sub-menu,
.main-menu>li>.full_size_menu {
    /* was margin-top:10px — that gap was the actual cause of the dropdown
       closing while the pointer crossed from the trigger to the panel */
    margin-top: 0 !important;
    display: block !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
}

/* .sub-menu (Company, Hire Developers, Products, Packages, Portfolio) is a
   plain narrow single-column list that always fits under its own trigger,
   so it can stay simply left-aligned. .full_size_menu (Services,
   Technology) is deliberately NOT !important here — style.css's leftover
   left:-350px still applies as the fallback, but the JS in header.php
   sets an inline left (px, computed relative to whichever trigger opened
   it) that overrides it, because the panel is wide enough that neither a
   fixed offset nor a simple left/right flip keeps it on-screen from every
   trigger position; see the comment in openThis() in header.php. */
.main-menu>li>.sub-menu {
    left: 0 !important;
}

/* Services/Technology (.full_size_menu) are the two multi-category
   dropdowns (4 heading groups each). This overrides it to a 4-column grid,
   which is display:grid regardless of open/closed state — layout is
   computed either way, only opacity/pointer-events (above) gate
   visibility, so this doesn't need its own show/hide toggle.
   --cw-menu-w is set inline by the JS in header.php to match the nav's
   own .container width, so the panel lines up with the header's own
   left/right edges (logo/CTA) rather than a fixed px value; the width
   here is just the pre-JS/no-JS fallback. */
.main-menu>li>.full_size_menu {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(200px, 1fr)) !important;
    gap: 4px 28px;
    width: var(--cw-menu-w, 1000px) !important;
    max-width: calc(100vw - 40px) !important;
    align-items: start;
}

.main-menu .full_size_menu>ul {
    width: auto !important;
}

/* style.css forces white-space:nowrap on these, which is what was cutting
   off longer headings like "Digital Marketing Services" instead of
   wrapping them inside their column */
.main-menu .full_size_menu .submenu_header,
.main-menu .full_size_menu ul li a {
    white-space: normal !important;
}

.main-menu .full_size_menu .inner-submenu {
    width: 100%;
}

.main-menu>li:hover>.sub-menu,
.main-menu>li:hover>.full_size_menu,
.main-menu>li.menu-open>.sub-menu,
.main-menu>li.menu-open>.full_size_menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* --cw-menu-x: set inline by the JS in header.php to keep the wide
       Services/Technology panel on-screen (see openThis() there for why
       transform is used instead of left — a left/right box-model offset
       on this element was mysteriously not taking effect, so positioning
       moved to the compositor stage instead, which sidesteps it entirely
       and is unaffected by any of the left/right/width rules elsewhere).
       Defaults to 0 for the plain .sub-menu items, which never set it. */
    transform: translateX(var(--cw-menu-x, 0px)) translateY(0) !important;
}

/* ==========================================================================
   Our Team page (our-team.php) — the stock clip-art banner image (jumping
   silhouette figures) clashed badly with the rest of the site; replaced
   with the same premium gradient used elsewhere, keeping the existing
   .team-center card/heading markup untouched.
   ========================================================================== */
.team-banner {
    background: var(--cw-gradient-blue) !important;
    margin: 0 !important;
    padding: 70px 20px !important;
}

.team-banner::before {
    opacity: 0.06 !important;
}

.team-center {
    background: rgba(255, 255, 255, .96) !important;
}

.team-center .highlight {
    color: var(--cw-green-dark) !important;
}

.people-header {
    background: var(--cw-navy) !important;
}

.people-header .underline {
    background: var(--cw-gradient-green) !important;
}

/* ==========================================================================
   Header spacing — matches the live site's balanced "logo · comfortable
   gap · menu · comfortable gap · CTA" layout instead of the current
   ~19px logo-to-menu and menu-to-CTA gaps (measured via
   getBoundingClientRect against the live site's ~60-80px). .navflex uses
   justify-content:space-between across 3 children (logo, main-menu,
   menu-setting), which only distributes *leftover* space — with the menu
   itself this wide there was barely any left to split into two gaps. Frees
   room by tightening the menu's own item spacing slightly (site.css/
   custom.css set an gap up to 22px and 14px side padding per link
   elsewhere; both are reduced here) and gives that room back as explicit
   margins on the two edges instead.
   ========================================================================== */
.main-menu {
    gap: 8px !important;
    margin-left: 44px !important;
}

.main-menu>li>a,
.main-menu>li>a.cool-link {
    padding: 10px 10px !important;
}

.menu-setting {
    margin-left: 44px !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991.98px) {
    .header-main .logo img {
        height: 34px;
    }
}