/* ==========================================================================
   Global Overrides
   ========================================================================== */

/* 1 & 2. Change primary color from yellow to blue */
:root, body, .elementor-kit-4 {
    --e-global-color-primary: #0B2B3F !important;
    --e-global-color-primary_hover: #092638 !important;
}

/* Force elements using .c-primary to fallback to our blue just in case */
.c-primary, .color-primary {
    color: #0B2B3F !important;
}

/* Fix mobile menu icon color */
.menu-mobile-nav-button, .elementor-menu-toggle {
    background-color: var(--e-global-color-primary) !important;
}
.menu-mobile-nav-button i, .menu-mobile-nav-button svg, 
.elementor-menu-toggle i, .elementor-menu-toggle svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Standardize Hero Text Font */
.hero-main-title {
    font-family: inherit !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
}

/* 6. Standardize Typography */
h1, h2, h3, h4, h5, h6, 
.elementor-heading-title {
    color: #111;
}

/* Desktop sizing */
h2.elementor-heading-title, h2 {
    font-size: 36px !important;
}
h3.elementor-heading-title, h3,
h4.elementor-heading-title, h4 {
    font-size: 24px !important;
}
p, .elementor-widget-text-editor {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Mobile sizing */
@media (max-width: 767px) {
    h2.elementor-heading-title, h2 {
        font-size: 28px !important;
    }
    h3.elementor-heading-title, h3,
    h4.elementor-heading-title, h4 {
        font-size: 20px !important;
    }
}

/* 5. Social Media Icons - Remove Background Grid and restore brand colors */
.elementor-social-icon {
    background-color: transparent !important;
    border-radius: 0 !important;
}
/* Facebook */
.elementor-social-icon-facebook i, .elementor-social-icon-facebook svg { fill: #3b5998 !important; color: #3b5998 !important; }
/* Instagram */
.elementor-social-icon-instagram i, .elementor-social-icon-instagram svg { fill: #E1306C !important; color: #E1306C !important; }
/* X (Twitter) */
.elementor-social-icon-x-twitter i, .elementor-social-icon-x-twitter svg { fill: #000000 !important; color: #000000 !important; }
/* YouTube */
.elementor-social-icon-youtube i, .elementor-social-icon-youtube svg { fill: #FF0000 !important; color: #FF0000 !important; }


/* ==========================================================================
   Service Cards Updates (Card Redesign)
   ========================================================================== */

/* Structure & Hover */
.service-item.service-style-1 .service-inner {
    flex-direction: column !important;
    background: #fff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    position: relative; /* Ensure the stretched link works */
}
.service-item.service-style-1:hover .service-inner {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.12) !important;
}

/* Image Section */
.service-item.service-style-1 .service-post-thumbnail {
    position: relative !important;
    padding-top: 0 !important;
    min-height: 200px !important; /* Reduced image height */
    height: 200px !important;
    opacity: 1 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.service-item.service-style-1 .service-post-thumbnail:before {
    display: none !important; /* Remove dark gradient overlay */
}
.service-item.service-style-1 .service-post-thumbnail img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}
.service-item.service-style-1:hover .service-post-thumbnail img {
    transform: scale(1.05) !important; /* Image zoom on hover */
}

/* Text Section */
.service-item.service-style-1 .service-content {
    position: relative !important;
    padding: 25px 25px 30px !important; /* Slight padding tweak */
    background: #fff !important;
    flex-grow: 1 !important;
    z-index: 2 !important;
    height: auto !important; /* Remove absolute 100% height */
}

/* Text Colors & Sizing */
.service-item.service-style-1 .service-title a {
    color: #111 !important;
    background-image: none !important;
    font-size: 20px !important; /* Reduced heading size */
}
.service-item.service-style-1:hover .service-title a {
    color: var(--e-global-color-primary) !important;
    background-image: none !important;
}
.service-item.service-style-1 .description p {
    color: #555 !important;
}

/* Hide Buttons completely as requested */
.service-item.service-style-1 .service-button-wrap {
    display: none !important;
}

/* Service Icon Filter */
.service-item.service-style-1 .icon-wrap {
    background: transparent !important;
    margin-bottom: 15px; /* Give it some breathing room */
}
.service-item.service-style-1 .service-icon {
    /* Apply a CSS filter to approximate #0B2B3F */
    filter: invert(14%) sepia(30%) saturate(1637%) hue-rotate(167deg) brightness(28%) contrast(98%) !important;
}
.service-item.service-style-1:hover .icon-wrap {
    background: transparent !important;
}

/* Stretched Link - make sure it sits above image and covers the whole card */
.service-item.service-style-1 .service-title,
.service-item.service-style-1 .service-title a {
    position: static !important;
}
.service-item.service-style-1 .service-title a::after {
    position: absolute;
    top: -200px !important; /* Offset by image height to reach top of card */
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 100 !important; /* Above everything inside .service-inner */
    content: "";
}

/* ==========================================================================
   Why Choose Cards
   ========================================================================== */
.why-choose-grid > div {
    padding: 20px 15px !important;
    border: 1px solid #eaeaea !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02) !important;
    border-radius: 10px !important;
    transition: box-shadow 0.3s ease !important;
}
.why-choose-grid > div:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* ==========================================================================
   Career Section
   ========================================================================== */
.explore-btn {
    color: #ffffff !important;
}


/* ==========================================================================
   Career Page Layout Optimizations
   ========================================================================== */

/* 1. Reduce excessive padding on main containers */
.page-id-254 .e-con {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}

/* Fix any inner containers that were squished by the above if needed, but usually this is safe.
   Wait, let's target parent containers only to avoid collapsing nested containers too much. */
.page-id-254 .e-con.e-parent {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}
.page-id-254 .e-con.e-child {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* 2. Cap oversized spacer widgets */
.page-id-254 .elementor-spacer-inner {
    height: 30px !important; 
}

/* 3. Hide large absolute decorative images that push the layout */
.page-id-254 .elementor-widget-image.elementor-absolute {
    display: none !important;
}

/* 4. Tighten up headings and dividers */
.page-id-254 .elementor-widget-heading {
    margin-bottom: 15px !important;
}
.page-id-254 .elementor-widget-divider {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 5. Reduce grid gap in the career listings */
.page-id-254 .untex-career-box .d-grid {
    gap: 20px !important;
}
.page-id-254 .untex-career-box {
    margin-top: 20px !important;
}

/* Hide broken white block ONLY in career page hero banner */
.elementor-page-254 .elementor-element-c4209b7 { display: none !important; }

/* ==========================================================================
   Pinpointed Career Page Spacing Fixes
   ========================================================================== */

/* 1. Fix 170px gap in Culture grid */
.elementor-page-254 .elementor-element-5140ac3,
.elementor-page-254 .elementor-element-e7cd8da,
.elementor-page-254 .elementor-element-66bbdf4,
.elementor-page-254 .elementor-element-ac38afb {
    --margin-bottom: 15px !important;
}

/* 2. Fix massive empty zones around 'Why Work With Us' */
.elementor-page-254 .elementor-element-8ade833,
.elementor-page-254 .elementor-element-0688409 {
    --margin-top: 0px !important;
    --margin-bottom: 20px !important;
}

/* 3. Strip massive margin from bottom gray footer box */
.elementor-page-254 .elementor-element-ef60cad {
    --padding-top: 20px !important;
    --padding-bottom: 20px !important;
}
.elementor-page-254 .elementor-element-8d3da40 {
    --margin-top: 0px !important;
    --margin-bottom: 0px !important;
}

/* ==========================================================================
   Comprehensive Responsive Overrides
   ========================================================================== */

/* Typography Scaling with Clamp */
h1, h1.elementor-heading-title {
    font-size: clamp(32px, 5vw, 48px) !important;
}
h2, h2.elementor-heading-title {
    font-size: clamp(28px, 4vw, 36px) !important;
}
h3, h3.elementor-heading-title {
    font-size: clamp(22px, 3vw, 28px) !important;
}
p, .elementor-widget-text-editor {
    font-size: clamp(16px, 1.5vw, 18px) !important;
}

/* Extra Small Mobile (Phones, 480px and down) */
@media (max-width: 480px) {
    .service-item.service-style-1 .service-post-thumbnail {
        height: auto !important;
        min-height: 150px !important;
    }
    .elementor-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

/* Tablets (min-width: 768px, max-width: 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .service-item.service-style-1 .service-post-thumbnail {
        height: 180px !important;
    }
    .elementor-container {
        max-width: 90% !important;
    }
}

/* Laptops (min-width: 992px, max-width: 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .elementor-container {
        max-width: 960px !important;
    }
}

/* Large Desktops (min-width: 1200px) */
@media (min-width: 1200px) {
    .elementor-container {
        max-width: 1140px !important;
    }
}

/* Safari clip-path fix for MacBook M4 */
.path-wrap-yes {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform, clip-path;
}