/* ============================================
   SS GLOBAL IT – THEME CUSTOMIZATIONS
   Brand Colors extracted from logo:
     Primary Blue : #016be1  (rgb 1, 107, 225)
     Dark Slate   : #243443  (rgb 36, 52, 67)
     Mid Navy     : #1a2633
     Accent Blue  : #4da6ff
   ============================================ */

:root {
    --ssg-blue:    #016be1;
    --ssg-dark:    #243443;
    --ssg-navy:    #1a2633;
    --ssg-accent:  #4da6ff;
    --ssg-text:    #64748b;
    --ssg-heading: #243443;
}

/* --- Sticky Header --- */
.txa_sticky_header.sticky {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
    animation: ssgSlideDown .3s ease;
}
@keyframes ssgSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* --- Header 4 Nav --- */
.tx-header-4 .main-navigation ul > li > a {
    color: var(--ssg-dark) !important;
    font-size: 15px;
    font-weight: 500;
    padding: 26px 15px !important;
    transition: color .3s;
    position: relative;
}
.tx-header-4 .main-navigation ul > li > a:hover,
.tx-header-4 .main-navigation ul > li.current-menu-item > a {
    color: var(--ssg-blue) !important;
}
.tx-header-4 .main-navigation ul li ul {
    background: #fff;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border-top: 3px solid var(--ssg-blue);
    border-radius: 0 0 8px 8px;
}
.tx-header-4 .main-navigation ul li ul li a {
    padding: 10px 20px !important;
    color: #374151 !important;
    font-size: 14px !important;
}
.tx-header-4 .main-navigation ul li ul li a:hover {
    color: var(--ssg-blue) !important;
}

/* --- Mobile nav breakpoint --- */
@media(max-width:1199px) {
    .tx-nav-4 { display:none !important; }
}
@media(max-width:767px) {
    .tx-topbar-area .tx-topbar-right { display:none !important; }
    .d-none.d-md-inline { display:none !important; }
}

/* --- Topbar (dark slate bg) --- */
.tx-topbar-area { background: var(--ssg-dark) !important; }

/* --- Footer --- */
.tx-footer-4-area { background: var(--ssg-navy) !important; }

/* --- Scroll-up button --- */
.scrollup {
    background: var(--ssg-blue) !important;
    border-radius: 8px !important;
}

/* --- Global buttons --- */
.tx-btn-primary {
    background: linear-gradient(135deg, #0155c9, var(--ssg-blue));
    color: #fff;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity .3s;
    border: none;
    cursor: pointer;
}
.tx-btn-primary:hover { opacity: .88; color: #fff; }

.tx-btn-outline {
    background: transparent;
    color: var(--ssg-blue);
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid var(--ssg-blue);
    transition: all .3s;
}
.tx-btn-outline:hover {
    background: var(--ssg-blue);
    color: #fff;
}

/* --- Form focus ring (brand color) --- */
input:focus, textarea:focus, select:focus {
    border-color: var(--ssg-blue) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(1,107,225,0.12);
}

/* --- Card hover lift --- */
.tx-card-hover { transition: transform .3s, box-shadow .3s; }
.tx-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(1,107,225,0.13);
}

/* --- Section headings --- */
h1, h2, h3, h4, h5, h6 { color: var(--ssg-dark); }

/* --- Anchor color --- */
a { color: var(--ssg-blue); }

/* --- Smooth scroll --- */
html { scroll-behavior: smooth; }

/* --- Mobile menu z-index fix --- */
.mobile_menu { z-index: 99999; }

/* --- WOW animation --- */
.wow { visibility: hidden; }

/* --- Hero gradient override --- */
.tx-hero-4 {
    background: linear-gradient(135deg, var(--ssg-dark) 0%, var(--ssg-navy) 60%, #0d1e2e 100%) !important;
}

/* --- Active menu item underline --- */
.tx-header-4 .main-navigation ul > li.current-menu-item > a::after,
.tx-header-4 .main-navigation ul > li > a:hover::after {
    content: '';
    display: block;
    height: 2px;
    background: var(--ssg-blue);
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* --- Page banner base --- */
.tx-page-banner-base {
    background: linear-gradient(135deg, var(--ssg-dark) 0%, var(--ssg-navy) 100%);
    padding: 100px 0 60px;
    text-align: center;
}