@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@400;500;600;700;800&display=swap');

/* =============================================
   ELEVENCA CORP — Custom Overrides
   ============================================= */

/* ---- Base typography overrides ---- */
body,
p,
li,
td,
input,
textarea,
select {
   font-family: 'Barlow', 'Montserrat', sans-serif !important;
   font-size: 15px;
   line-height: 1.75;
}

/* All headings: Barlow Condensed — gives DIN-like industrial condensed feel */
h1, h2, h3, h4, h5, h6,
.witr_section_title_inner h2,
.witr_section_title_inner h3,
.witr_service2_title h3,
.em-service-title h3 {
   font-family: 'Barlow Condensed', 'Montserrat', sans-serif !important;
   letter-spacing: 0.5px;
}

/* Nav links: Barlow 600, slightly spaced, uppercase — matches ABS nav style */
.starntile_menu > ul > li > a,
.starntile_menu ul.sub-menu li a {
   font-family: 'Barlow', sans-serif !important;
   font-weight: 600 !important;
   font-size: 13px !important;
   letter-spacing: 1.2px !important;
   text-transform: uppercase !important;
}

/* Section tag labels (e.g. "OUR SERVICES", "ABOUT US") */
.witr_section_title_inner h2 {
   font-family: 'Barlow', sans-serif !important;
   font-weight: 700 !important;
   letter-spacing: 2px !important;
   text-transform: uppercase !important;
   font-size: 12px !important;
}

/* Section main headings */
.witr_section_title_inner h3 {
   font-family: 'Barlow Condensed', sans-serif !important;
   font-weight: 700 !important;
   letter-spacing: 0.5px !important;
   font-size: 36px !important;
}

/* ---- Global nav: replace template's hardcoded #0066a0 blue with Elevenca navy ---- */
.starntile_nav_area {
   background: #013c78 !important;
}
/* Top-level nav list transparent (it also uses class="sub-menu") */
.starntile_menu > ul.sub-menu {
   background: transparent !important;
}
/* ONLY nested dropdowns get navy background */
.starntile_menu > ul.sub-menu > li > ul.sub-menu {
   background: #013c78 !important;
}
.starntile_menu > ul.sub-menu > li > ul.sub-menu li a {
   color: #e0e8f5 !important;
}
.starntile_menu > ul.sub-menu > li > ul.sub-menu li a:hover {
   color: #4db4e6 !important;
}

/* ---- Breadcrumb area ---- */
.breadcumb-area {
   background: #013c78;
   padding: 80px 0 50px;
   position: relative;
}
.breadcumb-area::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, rgba(0,86,179,0.15) 0%, transparent 70%);
   pointer-events: none;
}
.breadcumb-area .brpt h2 {
   color: #fff;
   font-size: 38px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 10px;
}
.breadcumb-area .breadcumb-inner ul {
   padding: 0;
   margin: 0;
   list-style: none;
   display: flex;
   justify-content: center;
   gap: 8px;
}
.breadcumb-area .breadcumb-inner ul li,
.breadcumb-area .breadcumb-inner ul li a {
   color: rgba(255,255,255,0.75);
   font-size: 14px;
}
.breadcumb-area .breadcumb-inner ul li.current,
.breadcumb-area .breadcumb-inner ul li span.current {
   color: #4db4e6;
}

/* ---- Logo sizing in header ---- */
.theme_cr_logo .logo img,
.mobile_menu_logo img,
.home-nav-logo img {
   height: 60px;
   width: auto;
   object-fit: contain;
}

/* ---- Team page ---- */
.team-part {
   margin-bottom: 30px;
}
.witr_team_section {
   overflow: hidden;
   position: relative;
}
.witr_team_section img {
   width: 100%;
   height: 280px;
   object-fit: cover;
   object-position: top center;
   transition: transform 0.4s ease;
}
.team-part:hover .witr_team_section img {
   transform: scale(1.05);
}
.witr_team_content {
   padding: 16px 20px;
}
.witr_team_content h5 {
   font-size: 16px;
   font-weight: 700;
   color: #013c78;
   margin-bottom: 4px;
}
.witr_team_content span {
   font-size: 13px;
   color: #0066a0;
}

/* ---- Values grid (portfolio.html) ---- */
.value-box {
   background: #fff;
   border: 1px solid #e8edf5;
   border-top: 4px solid #0066a0;
   border-radius: 4px;
   padding: 30px 24px;
   margin-bottom: 24px;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.value-box:hover {
   box-shadow: 0 8px 30px rgba(0,86,179,0.12);
   transform: translateY(-4px);
}
.value-box .value-icon {
   font-size: 36px;
   color: #0066a0;
   margin-bottom: 14px;
}
.value-box h4 {
   font-size: 17px;
   font-weight: 700;
   color: #013c78;
   margin-bottom: 10px;
}
.value-box p {
   font-size: 14px;
   color: #666;
   line-height: 1.7;
   margin: 0;
}

/* ---- Stats strip ---- */
.stats-strip {
   background: #013c78;
   padding: 50px 0;
}
.stat-item {
   text-align: center;
   color: #fff;
   padding: 20px;
}
.stat-item .stat-number,
.stat-number {
   font-size: 56px;
   font-weight: 800;
   color: #ffffff;
   line-height: 1;
   display: block;
   margin-bottom: 8px;
}
.stat-item .stat-label,
.stat-label {
   font-size: 15px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: rgba(255,255,255,0.8);
   display: block;
}

/* ── Header top bar — address on one line ───────────────────────────────── */
.creative_header_address_text > p {
   font-size: 13px;
   line-height: 1.4;
   white-space: nowrap;
}

/* ── Inline About stats row ──────────────────────────────────────────────── */
.about-stats-row {
   display: flex;
   gap: 32px;
   margin: 28px 0 32px;
   flex-wrap: wrap;
}
.about-stat {
   display: flex;
   flex-direction: column;
}
.about-stat strong {
   font-size: 32px;
   font-weight: 800;
   color: #013c78;
   line-height: 1;
}
.about-stat span {
   font-size: 13px;
   color: #777;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-top: 4px;
}

/* ---- Contact form adjustments ---- */
.twr_form_box input,
.twr_form_box textarea,
.twr_form_box select {
   background: #f7f9fc;
   border: 1px solid #d0daea;
   color: #333;
}
.twr_form_box input:focus,
.twr_form_box textarea:focus {
   border-color: #0066a0;
   outline: none;
   background: #fff;
}

/* ---- Service page detail ---- */
.service-detail-intro {
   padding: 70px 0 50px;
}
.service-detail-intro .service-img {
   width: 100%;
   height: 380px;
   object-fit: cover;
   border-radius: 4px;
}
.service-detail-intro h3 {
   font-size: 28px;
   font-weight: 700;
   color: #013c78;
   margin-bottom: 16px;
}
.service-detail-intro p {
   font-size: 15px;
   color: #555;
   line-height: 1.8;
   margin-bottom: 14px;
}
.service-feature-list {
   list-style: none;
   padding: 0;
   margin: 20px 0 0;
}
.service-feature-list li {
   padding: 8px 0 8px 28px;
   position: relative;
   color: #444;
   font-size: 14px;
   border-bottom: 1px solid #eef1f7;
}
.service-feature-list li::before {
   content: '\f00c';
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   position: absolute;
   left: 0;
   color: #0066a0;
}

/* ---- Service sidebar ---- */
.service-sidebar {
   background: #f7f9fc;
   border: 1px solid #e0e8f0;
   border-radius: 4px;
   padding: 28px 24px;
}
.service-sidebar h4 {
   font-size: 16px;
   font-weight: 700;
   color: #013c78;
   margin-bottom: 16px;
   padding-bottom: 10px;
   border-bottom: 2px solid #0066a0;
}
.service-sidebar ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
.service-sidebar ul li a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 0;
   color: #444;
   font-size: 14px;
   border-bottom: 1px solid #e8edf5;
   text-decoration: none;
   transition: color 0.2s;
}
.service-sidebar ul li a:hover,
.service-sidebar ul li.active a {
   color: #0066a0;
}
.service-sidebar ul li a i {
   color: #0066a0;
}

/* ---- CTA banner ---- */
.cta-banner {
   background: linear-gradient(135deg, #013c78 0%, #0066a0 100%);
   padding: 60px 0;
   text-align: center;
}
.cta-banner h3 {
   font-size: 28px;
   font-weight: 700;
   color: #fff;
   margin-bottom: 10px;
}
.cta-banner p {
   font-size: 16px;
   color: rgba(255,255,255,0.85);
   margin-bottom: 24px;
}
.cta-banner .btn-cta {
   display: inline-block;
   background: #fff;
   color: #0066a0;
   font-weight: 700;
   font-size: 14px;
   text-transform: uppercase;
   letter-spacing: 1px;
   padding: 14px 36px;
   border-radius: 2px;
   text-decoration: none;
   transition: background 0.2s, color 0.2s;
}
.cta-banner .btn-cta:hover {
   background: #4db4e6;
   color: #fff;
}

/* ---- Why Choose Us — full-width industrial background ---- */
.why-choose-us {
   background-image: url('assets/images/choose-bg.jpg');
   background-size: cover;
   background-position: center;
   background-attachment: scroll;
   position: relative;
   padding: 80px 0;
   margin-top: 0 !important;  /* override template .st_fea_area { margin-top: -170px } */
}
.why-choose-us::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(10, 25, 47, 0.62);
   z-index: 0;
}
.why-choose-us .container { position: relative; z-index: 1; }
.why-choose-us .witr_section_title_inner h2,
.why-choose-us .witr_section_title_inner h3,
.why-choose-us .witr_feature_13 h2,
.why-choose-us .witr_feature_13 h3,
.why-choose-us .witr_feature_13 p,
.why-choose-us h2, .why-choose-us h3, .why-choose-us p {
   color: #ffffff !important;
}
.why-choose-us .witr_feature_13 {
   border-color: rgba(255,255,255,0.15) !important;
}
.why-choose-us .sub-item img { filter: brightness(0) invert(1); opacity: 0.85; }
/* Icon-font mark used in Why Choose Us cards (replaces icon PNGs) */
.why-choose-us .wcu-icon {
   font-size: 46px;
   line-height: 1;
   color: #4db4e6;
   margin-bottom: 18px;
}
.why-choose-us .wcu-icon i { display: inline-block; }

/* Override template white card backgrounds inside Why Choose Us */
.why-choose-us .witr_feature_13,
.why-choose-us .all_feature_color,
.why-choose-us .sub-border-2 {
   background: rgba(255,255,255,0.08) !important;
   border-color: rgba(255,255,255,0.18) !important;
   box-shadow: none !important;
}
.why-choose-us .witr_feature_13 h3 a,
.why-choose-us .witr_feature_13 h3,
.why-choose-us .witr_feature_13 h2,
.why-choose-us .witr_feature_13 p,
.why-choose-us .all_color_service h3,
.why-choose-us .all_color_service p {
   color: #ffffff !important;
}
/* Accent color for the small h3 label */
.why-choose-us .witr_feature_13 h3 a,
.why-choose-us .witr_feature_13 > .sub-item > h3 {
   color: #4db4e6 !important;
}
/* background-attachment:scroll is now set globally — no mobile override needed */

/* ============================================================
   DARK PHOTO BACKGROUND — Shared section treatment
   Used on: why-choose-us (homepage), who-we-are, vision-and-values
   ============================================================ */
.section-dark-photo {
   background-image: url('assets/images/choose-bg.jpg');
   background-size: cover;
   background-position: center;
   background-attachment: scroll;
   position: relative;
   padding: 80px 0 !important;
}
.section-dark-photo::before {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(10, 25, 47, 0.68);
   z-index: 0;
}
.section-dark-photo .container { position: relative; z-index: 1; }

/* All text */
.section-dark-photo h2,
.section-dark-photo h3,
.section-dark-photo h4,
.section-dark-photo h5,
.section-dark-photo p,
.section-dark-photo li,
.section-dark-photo span:not(.counter) {
   color: #ffffff !important;
}
/* Badge (small h2 label) */
.section-dark-photo .witr_section_title_inner h2 {
   color: #4db4e6 !important;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: 2px;
}
/* Main heading */
.section-dark-photo .witr_section_title_inner h3 {
   color: #ffffff !important;
   font-size: 30px;
}

/* Service / feature items */
.section-dark-photo .em-service2,
.section-dark-photo .all_color_service {
   background: rgba(255,255,255,0.07) !important;
   border: 1px solid rgba(255,255,255,0.15) !important;
   border-radius: 6px;
   padding: 16px !important;
   margin-bottom: 16px;
}
.section-dark-photo .em-service-title h3 {
   color: #ffffff !important;
   font-size: 16px !important;
   font-weight: 600 !important;
}
.section-dark-photo .em-service-desc p {
   color: rgba(255,255,255,0.82) !important;
   font-size: 14px !important;
}
/* Icon circle */
.section-dark-photo .all_icon_color,
.section-dark-photo .em-service-icon {
   background: rgba(77,166,255,0.18) !important;
   border-color: rgba(77,166,255,0.35) !important;
   border-radius: 50% !important;
}
.section-dark-photo .em-service-icon i {
   color: #4db4e6 !important;
}

/* Counter boxes */
.section-dark-photo .witr_counter_single,
.section-dark-photo .all_counter_color {
   background: rgba(255,255,255,0.08) !important;
   border: 1px solid rgba(255,255,255,0.18) !important;
   border-radius: 8px !important;
}
.section-dark-photo .counter,
.section-dark-photo .witr_counter_number_inn h3 {
   color: #4db4e6 !important;
}
.section-dark-photo .witr_counter_number_inn h4 {
   color: rgba(255,255,255,0.85) !important;
}
.section-dark-photo .witr_counter_number_inn span {
   color: #4db4e6 !important;
}
.section-dark-photo .witr_counter_img img {
   filter: brightness(0) invert(1) opacity(0.7);
}

/* Checklist — company profile & general use */
.about_checklist ul { list-style: none; padding: 0; margin: 0; }
.about_checklist li {
   margin-bottom: 12px;
   line-height: 1.6;
   font-size: 15px;
}
.about_checklist li:last-child { margin-bottom: 0; }

/* Checklist on dark photo sections */
.section-dark-photo .about_checklist ul { list-style: none; padding: 0; }
.section-dark-photo .about_checklist li {
   color: rgba(255,255,255,0.88) !important;
   padding: 8px 0;
   border-bottom: 1px solid rgba(255,255,255,0.1);
   font-size: 15px;
}
.section-dark-photo .about_checklist li:last-child { border-bottom: none; }
.section-dark-photo .about_checklist i {
   color: #4db4e6 !important;
   margin-right: 10px;
}

/* CTA button */
.section-dark-photo .witr_btn,
.section-dark-photo a.witr_btn {
   background: #4db4e6 !important;
   color: #fff !important;
   border-color: #4db4e6 !important;
   padding: 12px 28px;
   border-radius: 4px;
   font-weight: 600;
   letter-spacing: 0.5px;
}
.section-dark-photo .witr_btn:hover {
   background: #1f86c4 !important;
   border-color: #1f86c4 !important;
}

/* Intro paragraph */
.section-dark-photo .witr_section_title_inner p {
   color: rgba(255,255,255,0.78) !important;
   font-size: 15px;
   margin-top: 10px;
}

/* Image inside section */
.section-dark-photo .commitment-image {
   width: 100%;
   border-radius: 6px;
   object-fit: cover;
   max-height: 420px;
   opacity: 0.88;
   border: 2px solid rgba(255,255,255,0.2);
}

@media (max-width: 768px) {
   .section-dark-photo { background-attachment: scroll; }
   .section-dark-photo .commitment-image { margin-bottom: 30px; }
}

/* ============================================================
   WHO WE ARE — Differentiator cards + Stats grid
   ============================================================ */

/* Differentiator row item */
.elevenca-differentiator {
   display: flex;
   align-items: flex-start;
   gap: 20px;
   margin-bottom: 28px;
   padding: 22px 24px;
   background: rgba(255,255,255,0.06);
   border: 1px solid rgba(255,255,255,0.12);
   border-left: 3px solid #4db4e6;
   border-radius: 6px;
   transition: background 0.3s ease, border-color 0.3s ease;
}
.elevenca-differentiator:hover {
   background: rgba(255,255,255,0.1);
   border-left-color: #1f86c4;
}
.differentiator-icon {
   flex-shrink: 0;
   width: 48px;
   height: 48px;
   background: rgba(77,166,255,0.18);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
.differentiator-icon i {
   font-size: 22px;
   color: #4db4e6 !important;
}
.differentiator-text h4 {
   font-size: 16px !important;
   font-weight: 700 !important;
   color: #ffffff !important;
   margin: 0 0 6px !important;
}
.differentiator-text p {
   font-size: 14px !important;
   color: rgba(255,255,255,0.78) !important;
   margin: 0 !important;
   line-height: 1.6;
}

/* Stats 2×2 grid */
.elevenca-stats-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}
.elevenca-stat-card {
   background: rgba(255,255,255,0.07);
   border: 1px solid rgba(255,255,255,0.15);
   border-radius: 10px;
   padding: 32px 24px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   transition: background 0.3s ease, transform 0.3s ease;
}
.elevenca-stat-card:hover {
   background: rgba(77,166,255,0.12);
   transform: translateY(-4px);
}
.stat-big-num {
   font-size: 52px;
   font-weight: 800;
   color: #4db4e6 !important;
   line-height: 1;
   font-family: 'Barlow Condensed', sans-serif;
}
.stat-plus {
   font-size: 32px;
   font-weight: 700;
   color: #4db4e6 !important;
   vertical-align: super;
   line-height: 1;
}
.stat-desc {
   font-size: 13px !important;
   color: rgba(255,255,255,0.75) !important;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: 8px;
   display: block;
}

@media (max-width: 768px) {
   .elevenca-stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
   .stat-big-num { font-size: 38px; }
   .elevenca-differentiator { padding: 16px; }
   .st_chose_area .col-lg-6 { width: 100%; }
   .st_chose_area .col-lg-6:first-child { margin-bottom: 30px; }
}

/* ---- Vendor / Alliance Logos section ---- */
.ec_vendors_area {
   background: #f5f5f5;
   padding: 70px 0 60px;
   border-top: 1px solid #e0e8f0;
}
.vendor-grid {
   justify-content: center;
   margin-top: 24px;
   gap: 0;
}
/* New logo card style */
.alliance-logo {
   background: #fff;
   border: 1px solid #dde6f0;
   border-radius: 6px;
   padding: 16px 12px;
   text-align: center;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 80px;
   transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.alliance-logo:hover {
   box-shadow: 0 6px 20px rgba(0,86,179,0.12);
   border-color: #0066a0;
   transform: translateY(-3px);
}
.alliance-logo img {
   height: 52px;
   width: auto;
   max-width: 140px;
   object-fit: contain;
   filter: grayscale(100%) opacity(0.75);
   transition: filter 0.3s ease;
}
.alliance-logo:hover img {
   filter: grayscale(0%) opacity(1);
}
.alliance-logo .vendor-text {
   font-size: 13px;
   font-weight: 700;
   color: #013c78;
   letter-spacing: 0.8px;
   text-transform: uppercase;
}
/* Legacy vendor-item (fallback) */
.vendor-item {
   background: #fff;
   border: 1px solid #dde6f0;
   border-radius: 4px;
   padding: 18px 10px;
   text-align: center;
   font-size: 13px;
   font-weight: 700;
   color: #013c78;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   margin-bottom: 16px;
   transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.vendor-item:hover {
   box-shadow: 0 4px 16px rgba(0,86,179,0.1);
   border-color: #0066a0;
   color: #0066a0;
}

/* ===================================================
   RESPONSIVE STYLES
   =================================================== */

/* ---- Large tablets (≤1024px) ---- */
@media (max-width: 1024px) {
   .witr_swiper_height { min-height: 500px !important; }
   .witr_swiper_content h2 { font-size: 28px !important; }
   .witr_swiper_content h3 { font-size: 22px !important; }
}

/* ---- Tablets (≤991px) ---- */
/* Note: template responsive.css already hides .starntile-main-menu and shows .mobile_logo_area */
@media (max-width: 991px) {
   /* Hero */
   .witr_swiper_height { min-height: 420px !important; }
   .witr_swiper_content h2 { font-size: 24px !important; }
   .witr_swiper_content h3 { font-size: 18px !important; }
   .witr_swiper_content p { font-size: 14px !important; }

   /* Stack two-col layouts */
   .st_faq_area .faq_left { margin-bottom: 30px; }
   .count2_inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
   .witr_counter_single { flex: 0 0 calc(50% - 16px); margin-bottom: 0 !important; }
   .witr_counter_single.mar_left { margin-left: 0 !important; }

   /* Team cards */
   .witr_team_section img { height: 220px; }

   /* Service detail */
   .service-detail-intro .col-lg-8,
   .service-detail-intro .col-md-8 { width: 100%; margin-bottom: 30px; }
   .service-detail-intro .col-lg-4,
   .service-detail-intro .col-md-4 { width: 100%; }

   /* Value boxes */
   .value-box { margin-bottom: 20px; }

   /* Stats strip */
   .stat-item { margin-bottom: 24px; }

   /* About image */
   .ab_img { margin-bottom: 30px; }
}

/* ---- Mobile (≤767px) ---- */
@media (max-width: 767px) {
   /* Breadcrumb */
   .breadcumb-area { padding: 60px 0 36px; }
   .breadcumb-area .brpt h2 { font-size: 24px; }

   /* Hero slider */
   .witr_swiper_height { min-height: 320px !important; }
   .witr_swiper_content { padding: 20px 16px; }
   .witr_swiper_content h2 { font-size: 20px !important; }
   .witr_swiper_content h3 { font-size: 15px !important; }
   .witr_swiper_content p { display: none; }
   .witr_btn { padding: 10px 18px; font-size: 12px; }

   /* Section titles */
   .witr_section_title_inner h2 { font-size: 13px; }
   .witr_section_title_inner h3 { font-size: 22px; }

   /* Core goals */
   .witr_feature_13 { margin-bottom: 20px; }
   .witr_feature_13.fea_midd { border-left: none; border-right: none; border-top: 1px solid #e0e8f5; border-bottom: 1px solid #e0e8f5; }

   /* About mini counters */
   .coun_inner { display: flex; gap: 16px; }
   .coun_inner .witr_counter_single { flex: 1; }

   /* Team grid — 2 cols on mobile */
   .st_team_area .col-lg-3,
   .st_team_area .col-md-4 { width: 50%; }
   .team_page_team .col-lg-3,
   .team_page_team .col-md-4 { width: 50%; }
   .witr_team_section img { height: 180px; }
   .witr_team_content h5 { font-size: 13px; }
   .witr_team_content span { font-size: 11px; }

   /* Services — 1 col on small mobile */
   .st_ser_area .col-lg-4 { width: 100%; }

   /* Stats strip */
   .stats-strip .col-lg-3,
   .stats-strip .col-md-6 { width: 50%; margin-bottom: 24px; }
   .stat-item .stat-number { font-size: 42px; }
   .stat-item .stat-label { font-size: 13px; }
   .about-stats-row { gap: 20px; }
   .about-stat strong { font-size: 26px; }

   /* Why choose us counters */
   .count2_inner { display: flex; flex-wrap: wrap; gap: 12px; }
   .witr_counter_single { flex: 0 0 calc(50% - 12px); }

   /* Markets accordion */
   .ec_markets_area .col-lg-6 { width: 100%; }
   .faq_left { display: none; }

   /* Vendors */
   .vendor-item { font-size: 11px; padding: 14px 6px; }
   .ec_vendors_area .col-6 { width: 50%; }

   /* Footer */
   .footer-middle .col-lg-3 { width: 100%; margin-bottom: 24px; }
   .footer-bottom .col-lg-6 { width: 100%; text-align: center !important; }
   .footer-menu ul.text-right { text-align: center !important; }
   .footer-menu ul { justify-content: center; display: flex; flex-wrap: wrap; gap: 4px; }

   /* Contact page */
   .st_cont_area .col-lg-6 { width: 100%; }
   .cont_witr { margin-top: 30px; }

   /* Service detail */
   .service-detail-intro { padding: 40px 0 30px; }
   .service-detail-intro .service-img { height: 200px; }
   .service-sidebar { margin-top: 0; }

   /* Values grid */
   .value-box { padding: 22px 18px; }
   .value-box .value-icon { font-size: 28px; }

   /* CTA banner */
   .cta-banner { padding: 40px 16px; }
   .cta-banner h3 { font-size: 22px; }
   .cta-banner p { font-size: 14px; }
}

/* ---- Small mobile (≤480px) ---- */
@media (max-width: 480px) {
   .st_team_area .col-lg-3,
   .st_team_area .col-md-4,
   .team_page_team .col-lg-3,
   .team_page_team .col-md-4 { width: 100%; }
   .witr_team_section img { height: 260px; object-fit: cover; }

   .witr_swiper_content h2 { font-size: 18px !important; }
   .witr_swiper_content h3 { font-size: 14px !important; }

   .breadcumb-area .brpt h2 { font-size: 20px; }

   .vendor-grid .col-6 { width: 50%; }
   .ec_vendors_area .col-6 { width: 50%; }

   .stats-strip .col-lg-3 { width: 50%; }
}

/* ===================================================
   HOMEPAGE — Full-Viewport Hero (atlantic-bearing style)
   Scoped to body.home so inner pages are unaffected
   =================================================== */

/* Hide the utility top bar (address/social links strip) */
.home .starntile-header-top { display: none !important; }
/* Hide the logo + contact info bar — we'll inline a logo in the nav */
.home .starntile_header_top_two { display: none !important; }

/* Fix the entire header wrapper so it overlays the slider */
.home .em40_header_area_main {
   position: fixed !important;
   top: 0; left: 0; width: 100%;
   z-index: 9999;
   background: transparent !important;
   background-color: transparent !important;
   box-shadow: none !important;
   transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* Over-hero state: subtle dark gradient behind the transparent nav so the white
   logo and nav links stay readable on any hero slide (light or dark). */
.home .em40_header_area_main:not(.header-scrolled) {
   background: linear-gradient(to bottom, rgba(2,12,38,0.62) 0%, rgba(2,12,38,0.28) 55%, rgba(2,12,38,0) 100%) !important;
}
/* Scrolled state: solid navy */
.home .em40_header_area_main.header-scrolled {
   background: #013c78 !important;
   background-color: #013c78 !important;
   box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
}

/* ---- Kill the scrollToFixed plugin's spacer placeholder ----
   The jQuery scrollToFixed plugin injects a classless <div> inside
   em40_header_area_main to preserve layout space. Since we already
   have the container position:fixed this spacer just adds dead height. */
.home .em40_header_area_main > div:not([class]) {
   display: none !important;
   height: 0 !important;
   overflow: hidden !important;
   padding: 0 !important;
   margin: 0 !important;
   min-height: 0 !important;
}

/* ---- Shrinking nav on scroll ---- */
/* Keep the logo size transition smooth when scrolling. */
.home-nav-logo img {
   transition: height 0.35s ease;
}
/* Light globe with the original blue banner, directly over the hero. */
.home .home-nav-logo .logo-blue { display: none; }
.home .home-nav-logo .logo-white { display: inline-block; height: 50px; }
.home .em40_header_area_main.header-scrolled .home-nav-logo .logo-white { height: 44px; }
/* Override template's 20px top/bottom margin on nav links
   (style.css sets: .starntile_menu > ul > li > a { margin: 20px 11px })
   Normal state: compact but open; scrolled state: tight */
.home .starntile_menu > ul.sub-menu > li > a {
   margin-top: 10px !important;
   margin-bottom: 10px !important;
   padding-top: 8px !important;
   padding-bottom: 8px !important;
}
.home .em40_header_area_main.header-scrolled .starntile_menu > ul.sub-menu > li > a {
   font-size: 11px !important;
   margin-top: 4px !important;
   margin-bottom: 4px !important;
   padding-top: 5px !important;
   padding-bottom: 5px !important;
}
/* Nav bar inner padding tightens */
.home .starntile-main-menu {
   transition: padding 0.35s ease;
   padding: 4px 0;
   /* Let height be driven by link padding, not by witr_h_h18 */
   height: auto !important;
   min-height: 0 !important;
}
.home .em40_header_area_main.header-scrolled .starntile-main-menu {
   padding: 8px 0 !important;
}

/* Nuke every possible background inside the header — cover all JS-added classes */
.home .starntile-main-menu,
.home .starntile_nav_area,
.home .starntile_nav_area.postfix,
.home .starntile_nav_area.prefix,
.home .starntile_nav_area.scroll_fixed,
.home .starntile_nav_area.scroll-to-fixed-fixed,
.home div[class*="starntile_nav"] {
   position: static !important;
   background: transparent !important;
   background-color: transparent !important;
   box-shadow: none !important;
   border: none !important;
}

/* Anchor the logo left while keeping the navigation centered. */
.home-nav-logo {
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   z-index: 1;
   background: transparent;
   border-radius: 0;
   padding: 9px 18px;
   box-shadow: none;
   transition: padding 0.35s ease;
}
.home .em40_header_area_main.header-scrolled .home-nav-logo {
   padding: 7px 15px;
   box-shadow: none;
}
/* Nav container: logo pinned left, nav links truly centered across full width */
.home .tx_menu_together {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   position: relative !important;
}
/* Nav takes only its natural width so justify-content:center puts it dead-center */
.home .tx_menu_together .starntile_menu {
   flex: 0 0 auto !important;
}
/* Also center the UL and LI items inside */
.home .starntile_menu > ul.sub-menu {
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}
.home .starntile_menu > ul.sub-menu > li {
   float: none !important;
}

/* Nav links: white in transparent mode */
.home .starntile_menu > ul > li > a {
   color: #fff !important;
   text-shadow: 0 1px 5px rgba(0,0,0,0.55);
}
.home .starntile_menu > ul > li > a:hover,
.home .starntile_menu > ul > li.current_page_item > a {
   color: #4db4e6 !important;
}

/* Homepage dropdowns only (NOT the top-level nav list) */
.home .starntile_menu > ul.sub-menu > li > ul.sub-menu {
   background: #013c78 !important;
}
.home .starntile_menu > ul.sub-menu > li > ul.sub-menu li a {
   color: #fff !important;
   text-shadow: none !important;
}
.home .starntile_menu > ul.sub-menu > li > ul.sub-menu li a:hover {
   color: #4db4e6 !important;
}

/* ---- Full-viewport slider ---- */
.home .witr_swiper_height {
   min-height: 100vh !important;
   height: 100vh !important;
}

/* Overlay: dark at top so transparent mobile header logo is always readable,
   then darkens again in the text zone */
.home .witr_swiper_height::before {
   content: '' !important;
   position: absolute !important;
   inset: 0 !important;
   background:
      /* top-to-bottom: dark at very top (logo / nav area), then darkens for text */
      linear-gradient(
         to bottom,
         rgba(0,0,0,0.65)   0%,
         rgba(0,0,0,0.30)  15%,
         rgba(5,15,35,0.10) 28%,
         rgba(5,15,35,0.55) 45%,
         rgba(5,15,35,0.72) 65%,
         rgba(5,15,35,0.50) 100%
      ),
      /* left-to-right: darker on left for text readability */
      linear-gradient(
         to right,
         rgba(5,15,35,0.45) 0%,
         rgba(5,15,35,0.0)  65%
      ) !important;
   z-index: 1 !important;
   pointer-events: none !important;
}

/* ── Fix 1: Top gradient on all photo hero sections ──────────────────────
   Applied to .hero-section elements (breadcumb-area with photo backgrounds)
   so the logo and nav remain readable regardless of image brightness.       */
.hero-section {
   position: relative;
   background-size: cover !important;
   background-position: center center !important;
   background-repeat: no-repeat !important;
}
.hero-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 180px;
   background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.30) 60%,
      rgba(0, 0, 0, 0)   100%
   );
   z-index: 2;
   pointer-events: none;
}
/* Overlay: full dark tint for photo-based hero backgrounds */
.hero-section::after {
   content: '';
   position: absolute;
   inset: 0;
   background: rgba(10, 25, 47, 0.60);
   z-index: 1;
   pointer-events: none;
}
/* Hero content must sit above both overlays */
.hero-section > * {
   position: relative;
   z-index: 3;
}

/* Ensure slide content sits above the overlay */
.home .witr_sw_text_area {
   position: relative !important;
   z-index: 2 !important;
}

/* Larger, bolder slide headings — Barlow Condensed, DIN-style */
.home .witr_swiper_content h2 {
   font-family: 'Barlow Condensed', sans-serif !important;
   font-size: 72px !important;
   font-weight: 800 !important;
   letter-spacing: 3px !important;
   text-transform: uppercase !important;
   line-height: 1.0 !important;
   text-shadow: 0 3px 16px rgba(0,0,0,0.5) !important;
   margin-bottom: 16px !important;
}
.home .witr_swiper_content h3 {
   font-family: 'Barlow', sans-serif !important;
   font-size: 22px !important;
   font-weight: 400 !important;
   letter-spacing: 1px !important;
   color: rgba(255,255,255,0.88) !important;
   text-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
}
.home .witr_swiper_content p {
   font-family: 'Barlow', sans-serif !important;
   font-size: 17px !important;
   font-weight: 400 !important;
   max-width: 560px !important;
   line-height: 1.75 !important;
   text-shadow: 0 1px 6px rgba(0,0,0,0.4) !important;
}

/* ---- Mobile nav: positioning only (background handled by @media block) ---- */
.home .mobile_logo_area {
   position: fixed !important;
   top: 0 !important; left: 0 !important; width: 100% !important;
   z-index: 9999 !important;
}

/* ---- Responsive hero overrides (homepage only) ---- */
@media (max-width: 1024px) {
   .home .witr_swiper_content h2 { font-size: 46px !important; }
}
@media (max-width: 991px) {
   .home .witr_swiper_height { min-height: 100vh !important; height: 100vh !important; }
   .home .witr_swiper_content h2 { font-size: 36px !important; }
   .home .witr_swiper_content p  { font-size: 15px !important; }
   /* Slide background: centered + no-repeat overrides template's center-left */
   .home .witr_swiper_height,
   .home .swiper-slide.witr_swiper_height {
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
   }
}
@media (max-width: 767px) {
   .home .witr_swiper_height { min-height: 100svh !important; height: 100svh !important; }
   .home .witr_swiper_content h2 { font-size: 28px !important; }
   .home .witr_swiper_content p  { display: block !important; font-size: 14px !important; max-width: 100% !important; }
   /* Re-state cover+center at this breakpoint — responsive.css resets it here */
   .home .witr_swiper_height,
   .home .d1.witr_swiper_height,
   .home .t1.witr_swiper_height,
   .home .m1.witr_swiper_height {
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
   }
}
@media (max-width: 480px) {
   .home .witr_swiper_content h2 { font-size: 22px !important; }
   .home .witr_swiper_content h3 { font-size: 16px !important; }
}

/* =============================================
   SERVICES PAGE — Service Icon Cards
   ============================================= */
.service-icon-card {
   background: #fff;
   border-left: 4px solid #013c78;
   border-radius: 4px;
   padding: 36px 28px 32px;
   margin-bottom: 28px;
   box-shadow: 0 2px 12px rgba(26,45,79,0.07);
   transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.service-icon-card:hover {
   border-left-color: #015a92;
   box-shadow: 0 6px 28px rgba(26,45,79,0.16);
   transform: translateY(-3px);
}
.sic-icon {
   font-size: 52px;
   color: #013c78;
   margin-bottom: 14px;
   line-height: 1;
   transition: color 0.25s ease;
}
.service-icon-card:hover .sic-icon {
   color: #015a92;
}
.sic-label {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: #015a92;
   margin-bottom: 8px;
}
.service-icon-card h4 {
   font-size: 19px;
   font-weight: 700;
   color: #013c78;
   margin: 0 0 12px;
   line-height: 1.3;
}
.service-icon-card p {
   font-size: 14px;
   color: #555;
   line-height: 1.75;
   margin: 0;
}

/* ============================================================
   OUR SERVICES (icon cards) — Homepage section
   ============================================================ */
.ec-service-icon-card {
   background: #fff;
   border: 1px solid #dde6f0;
   border-top: 3px solid #013c78;
   border-radius: 6px;
   padding: 28px 24px;
   height: 100%;
   transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.ec-service-icon-card:hover {
   border-top-color: #0066a0;
   box-shadow: 0 6px 24px rgba(0,86,179,0.12);
   transform: translateY(-3px);
}
.ec-sic-icon {
   width: 52px;
   height: 52px;
   background: #eef3fa;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
}
.ec-sic-icon i {
   font-size: 24px;
   color: #013c78;
}
.ec-service-icon-card h4 {
   font-size: 16px;
   font-weight: 700;
   color: #013c78;
   margin: 0 0 10px;
}
.ec-service-icon-card p {
   font-size: 14px;
   color: #555;
   line-height: 1.6;
   margin: 0 0 14px;
}
.ec-service-icon-card a {
   font-size: 13px;
   font-weight: 600;
   color: #0066a0;
   text-decoration: none;
   transition: color 0.2s;
}
.ec-service-icon-card a:hover { color: #013c78; }

/* ============================================================
   WHO WE SERVE — Industry chip grid (homepage)
   ============================================================ */
.ec-industry-chip {
   background: #fff;
   border: 1px solid #dde6f0;
   border-radius: 8px;
   padding: 18px 12px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
   cursor: default;
}
.ec-industry-chip:hover {
   border-color: #0066a0;
   box-shadow: 0 4px 16px rgba(0,86,179,0.10);
   transform: translateY(-2px);
}
.ec-industry-chip i {
   font-size: 28px;
   color: #013c78;
}
.ec-industry-chip span {
   font-size: 12px;
   font-weight: 600;
   color: #013c78;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   text-align: center;
   line-height: 1.3;
}

/* ── About section photo fill ───────────────────────────────────────────── */
.st_ab_area .row {
   align-items: stretch;
}
.st_ab_area .ab_img {
   height: 100%;
   margin-bottom: 0;
}
.st_ab_area .ab_img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   min-height: 420px;
   border-radius: 4px;
   display: block;
}

/* ── Industries Served — pill tags on product pages ─────────────────────── */
.ec-industries-served {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
   padding: 0;
}
.ec-industry-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: #eef3fa;
   border: 1px solid #c8d9ef;
   border-radius: 20px;
   padding: 5px 13px;
   font-size: 11.5px;
   font-weight: 600;
   color: #013c78;
   text-transform: uppercase;
   letter-spacing: 0.4px;
   white-space: nowrap;
   transition: background 0.2s, border-color 0.2s;
}
.ec-industry-tag:hover {
   background: #d8e8f8;
   border-color: #0066a0;
}
.ec-industry-tag i {
   font-size: 13px;
   color: #0066a0;
}

/* ── Who We Serve section — prevent overflow into next section ───────────── */
.ec-who-serve-area {
   position: relative;
   z-index: 1;
   overflow: hidden;
   padding-bottom: 80px !important;
}
.ec-who-serve-area + div,
.ec-who-serve-area + section {
   position: relative;
   z-index: 2;
   margin-top: 0;
}
/* Uniform chip height in Who We Serve grid */
.ec-industry-chip {
   min-height: 130px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 20px 12px;
}
/* Icon wrapper uniform sizing (Fix 1) */
.icon-wrap {
   width: 64px;
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(0, 86, 179, 0.10);
   margin: 0 auto 16px;
}
.icon-wrap i,
.icon-wrap svg {
   font-size: 28px;
   color: #0066a0;
}
/* Section z-index stacking — prevent chip overlap */
.why-choose-us,
.stats-strip,
.witr_alliances_area {
   position: relative;
   z-index: 2;
}

/* ── Section background alternation ─────────────────────────────────────── */
/* Homepage alternation is handled inline or via existing template colors.
   For inner pages, product pages alternate white / #f5f5f5 via these helpers */
.ec-bg-white  { background: #ffffff; }
.ec-bg-gray   { background: #f5f5f5; }

/* ── Card uniformity (box-shadow, radius, hover) ─────────────────────────── */
.witr_service2_single,
.ec-service-icon-card,
.industry-card {
   border-radius: 8px !important;
   box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
   transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.witr_service2_single:hover,
.ec-service-icon-card:hover,
.industry-card:hover {
   transform: translateY(-4px) !important;
   box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* ── Global button style ─────────────────────────────────────────────────── */
.btn-primary {
   background: #0066a0;
   color: #fff;
   padding: 12px 28px;
   border-radius: 6px;
   font-weight: 600;
   font-size: 15px;
   border: none;
   cursor: pointer;
   transition: background 0.3s ease, transform 0.2s ease;
   display: inline-block;
   text-decoration: none;
}
.btn-primary:hover {
   background: #0066a0;
   color: #fff;
   transform: translateY(-2px);
}

/* ── Mobile responsiveness ───────────────────────────────────────────────── */
@media (max-width: 768px) {
   .ec-who-serve-area {
      padding-bottom: 50px !important;
   }
   .st_ab_area .ab_img img {
      min-height: 280px;
   }
   .section-dark-photo {
      padding: 50px 0 !important;
   }
}

/* ── Footer contact info — links & icons white on dark navy background ───── */
.footer-sociala-icon,
.footer-sociala-icon i {
   color: #a8c4e0;
}
.footer-sociala-info,
.footer-sociala-info p {
   color: #ccdaed;
}
.footer-sociala-info p a {
   color: #ffffff;
   text-decoration: none;
   transition: color 0.2s;
}
.footer-sociala-info p a:hover {
   color: #4db4e6;
   text-decoration: underline;
}
/* Also ensure the phone link in the description widget is white */
.starntile-description-area .phone a {
   color: #ffffff;
   text-decoration: none;
}
.starntile-description-area .phone a:hover {
   color: #4db4e6;
}

/* ── Company Profile — intro image ──────────────────────────────────────── */
.company-intro-image {
   width: 100%;
   height: 480px;
   object-fit: cover;
   border-radius: 8px;
   display: block;
}
@media (max-width: 768px) {
   .company-intro-image {
      height: 280px;
      margin-bottom: 32px;
   }
}

/* ── Testimonial cards ───────────────────────────────────────────────────── */
.testimonial-card {
   background: #ffffff;
   border-radius: 8px;
   padding: 32px;
   box-shadow: 0 4px 16px rgba(0,0,0,0.08);
   border-left: 4px solid #0066a0;
   position: relative;
   height: 100%;
}
.testimonial-card::before {
   content: '\201C';
   font-size: 64px;
   color: #0066a0;
   opacity: 0.2;
   position: absolute;
   top: 12px;
   left: 16px;
   line-height: 1;
   font-family: Georgia, serif;
}
.testimonial-text {
   font-size: 15px;
   line-height: 1.8;
   color: #555;
   font-style: italic;
   margin-bottom: 16px;
}
.testimonial-author {
   font-size: 13px;
   font-weight: 600;
   color: #013c78;
}

/* ── Trust badges strip ─────────────────────────────────────────────────── */
.trust-badges {
   background: #013c78;
   padding: 48px 0;
   margin-top: 60px;
}
.trust-badge-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 24px;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 24px;
}
@media (max-width: 768px) {
   .trust-badge-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}
.trust-badge-item {
   text-align: center;
   color: #ffffff;
}
.trust-badge-label {
   font-size: 16px;
   font-weight: 700;
   display: block;
   margin-bottom: 4px;
}
.trust-badge-sub {
   font-size: 13px;
   opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — Full Audit
   Breakpoints: 1440 / 1280 / 1024 / 768 / 575 / 480 / 375 / 320
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Global foundations: prevent horizontal overflow ─────────────────── */
html,
body {
   overflow-x: hidden;
   max-width: 100%;
}
*,
*::before,
*::after {
   box-sizing: border-box;
}
img {
   max-width: 100%;
   height: auto;
}

/* ── 2. Inner-page top bar: hide on mobile (≤767px) ─────────────────────── */
/* Homepage already hides it via .home .starntile-header-top.                */
/* Inner pages: hide the full address/phone strip on small screens —         */
/* the mobile nav covers navigation, and the stacked bar is too cluttered.   */
@media (max-width: 767px) {
   .starntile_header_top_two,
   .starntile-header-top,
   .em40_header_area_main .starntile-header-top {
      display: none !important;
   }
}

/* ── 3. Mobile hamburger: minimum 44 px tap target ──────────────────────── */
.mobile_menu_o {
   min-height: 44px;
   display: flex;
   align-items: center;
   cursor: pointer;
}
.mobile_menu_inner .mobile_menu_content a,
.mobile_menu_inner nav ul li a {
   min-height: 44px;
   display: flex !important;
   align-items: center;
   padding-top: 4px !important;
   padding-bottom: 4px !important;
}

/* ── 4. Stats bar: keep all 3 on one row at every width ─────────────────── */
/* Bootstrap's col-6 gives 2-per-row at xs, leaving 1 orphan.               */
/* Force 33.33 % so all three stats stay on a single row.                    */
@media (max-width: 575px) {
   .stats-strip [class*="col-"] {
      width: 33.33% !important;
      flex: 0 0 33.33% !important;
      max-width: 33.33% !important;
   }
   .stat-item {
      padding: 12px 6px;
   }
   .stat-item .stat-number,
   .stat-number {
      font-size: 36px;
   }
   .stat-item .stat-label,
   .stat-label {
      font-size: 11px;
      letter-spacing: 0;
   }
}

/* ── 5. About inline stats: compact at 375 px ───────────────────────────── */
@media (max-width: 375px) {
   .about-stats-row {
      gap: 14px;
   }
   .about-stat strong {
      font-size: 22px;
   }
   .about-stat span {
      font-size: 11px;
   }
}

/* ── 6. CTA banner: full-width button on mobile ─────────────────────────── */
@media (max-width: 767px) {
   .cta-banner {
      padding: 48px 16px;
   }
   .cta-banner .btn-cta {
      display: block;
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      text-align: center;
      min-height: 48px;
      line-height: 1;
      padding: 14px 24px;
   }
}

/* ── 7. Contact form: fields full-width, button tappable ────────────────── */
@media (max-width: 767px) {
   .twr_form_box input,
   .twr_form_box textarea,
   .twr_form_box select {
      width: 100%;
      min-height: 44px;
   }
   .st_cont_area .witr_btn,
   .twr_form_box .witr_btn {
      width: 100%;
      min-height: 48px;
      display: block;
      text-align: center;
      line-height: 1;
      padding: 14px 24px;
   }
}

/* ── 8. Testimonial cards: tighter padding on mobile ────────────────────── */
@media (max-width: 767px) {
   .testimonial-card {
      padding: 28px 20px;
      margin-bottom: 20px;
   }
   .testimonial-card::before {
      font-size: 48px;
      top: 8px;
      left: 12px;
   }
   .testimonial-text {
      font-size: 14px;
   }
}

/* ── 9. Trust badges: compact grid at 480 px ────────────────────────────── */
@media (max-width: 480px) {
   .trust-badges {
      padding: 32px 0;
      margin-top: 32px;
   }
   .trust-badge-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      padding: 0 16px;
   }
   .trust-badge-label {
      font-size: 14px;
   }
   .trust-badge-sub {
      font-size: 12px;
   }
}

/* ── 10. Industry chips: size down on mobile ─────────────────────────────── */
@media (max-width: 480px) {
   .ec-industry-chip {
      min-height: 100px;
      padding: 14px 8px;
   }
   .ec-industry-chip i {
      font-size: 22px;
   }
   .ec-industry-chip span {
      font-size: 11px;
   }
}

/* ── 11. Vendor / alliance logos: scale at mobile ───────────────────────── */
@media (max-width: 480px) {
   .alliance-logo {
      min-height: 70px;
      padding: 12px 8px;
   }
   .alliance-logo img {
      height: 40px;
   }
}

/* ── 12. Container side padding on very small screens ───────────────────── */
@media (max-width: 480px) {
   .container {
      padding-left: 16px !important;
      padding-right: 16px !important;
   }
}

/* ── 13. Section vertical padding: reduce on mobile ─────────────────────── */
/* Inline styles use !important to override style="padding:70px 0 60px"     */
@media (max-width: 767px) {
   .ec-services-area {
      padding-top: 48px !important;
      padding-bottom: 40px !important;
   }
   .ec-who-serve-area {
      padding-top: 48px !important;
      padding-bottom: 40px !important;
   }
   .ec_vendors_area {
      padding-top: 48px !important;
      padding-bottom: 40px !important;
   }
   .why-choose-us {
      padding: 60px 0 !important;
   }
   .stats-strip {
      padding: 40px 0;
   }
   .trust-badges {
      margin-top: 40px;
   }
}
@media (max-width: 480px) {
   .ec-services-area {
      padding-top: 36px !important;
      padding-bottom: 30px !important;
   }
   .ec-who-serve-area {
      padding-top: 36px !important;
      padding-bottom: 30px !important;
   }
   .ec_vendors_area {
      padding-top: 36px !important;
      padding-bottom: 30px !important;
   }
   .stats-strip {
      padding: 32px 0;
   }
}

/* ── 14. Hero slider: center text on very small phones ──────────────────── */
@media (max-width: 480px) {
   .home .witr_swiper_content {
      text-align: center;
   }
   .home .witr_swiper_content p {
      margin-left: auto;
      margin-right: auto;
   }
   .slider_btn .witr_btn_sinner {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
   }
   .slider_btn .witr_btn {
      width: 100%;
      max-width: 200px;
      text-align: center;
      justify-content: center;
   }
}

/* ── 15. About section image: reduce min-height on small phones ─────────── */
@media (max-width: 480px) {
   .st_ab_area .ab_img img {
      min-height: 240px;
   }
}

/* ── 16. Section headings: scale down at 480 px ─────────────────────────── */
@media (max-width: 480px) {
   .witr_section_title_inner h3 {
      font-size: 22px !important;
   }
}

/* ── 17. Breadcrumb: very small screens ─────────────────────────────────── */
@media (max-width: 375px) {
   .breadcumb-area {
      padding: 50px 0 30px;
   }
   .breadcumb-area .brpt h2 {
      font-size: 18px;
      letter-spacing: 0.5px;
   }
}

/* ── 18. Company intro image: reduce height at 480 px ───────────────────── */
@media (max-width: 480px) {
   .company-intro-image {
      height: 220px;
   }
}

/* ── 19. Service icon cards (ec-services-area): ensure no overflow ───────── */
.ec-service-icon-card {
   overflow: hidden;
}

/* ── 20. Footer logo: constrain on mobile ───────────────────────────────── */
@media (max-width: 767px) {
   .starntile-description-area .logo {
      max-height: 50px !important;
      width: auto !important;
   }
}

/* ── 21. Product page: main+sidebar stack properly at ≤576px ────────────── */
@media (max-width: 576px) {
   .service-detail-intro .col-md-8,
   .service-detail-intro .col-md-4 {
      width: 100%;
   }
   .service-detail-intro .service-img {
      margin-bottom: 24px;
      height: 200px;
   }
}

/* ── 22. Why Choose Us: force single column at ≤575px ───────────────────── */
@media (max-width: 575px) {
   .why-choose-us .col-md-6 {
      width: 100% !important;
      flex: 0 0 100% !important;
      max-width: 100% !important;
   }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION — Full-Screen Overlay Menu
   Option A from elevenca-mobile-nav-fix.md
   Desktop nav (>991px) is completely untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

   /* ── Mobile header bar: fixed at top on ALL pages ───────────────────── */
   .mobile_logo_area {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 9998 !important;
      background: #013c78 !important;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
      transition: background 0.35s ease, box-shadow 0.35s ease;
   }

   /* Homepage: transparent at top of page, same as desktop behaviour */
   .home .mobile_logo_area {
      background: transparent !important;
      box-shadow: none !important;
   }
   /* Once user scrolls past hero (JS adds .mobile-scrolled) → go solid */
   .home .mobile_logo_area.mobile-scrolled {
      background: #013c78 !important;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45) !important;
   }

   /* Push inner-page content below the fixed mobile bar */
   body:not(.home) {
      padding-top: 70px;
   }

   /* Compact bar height */
   .mobilemenu_con {
      padding: 10px 0;
      min-height: 60px;
      align-items: center;
   }
   .mobile_menu_logo img {
      height: 48px !important;
      width: auto !important;
      transition: filter 0.35s ease;
   }
   /* Homepage transparent bar: white glow so dark-grey logo is readable over hero */
   .home .mobile_logo_area:not(.mobile-scrolled) .mobile_menu_logo img {
      filter:
         drop-shadow(0 0 2px rgba(255, 255, 255, 1))
         drop-shadow(0 0 8px rgba(255, 255, 255, 0.7))
         drop-shadow(0 2px 14px rgba(0, 0, 0, 0.9)) !important;
   }
   /* Once scrolled to solid navy, remove glow — natural colours look clean on dark bg */
   .home .mobile_logo_area.mobile-scrolled .mobile_menu_logo img {
      filter: none !important;
   }

   /* Hamburger icon: white on navy bar */
   .mobile_menu_o i.openclass {
      color: #ffffff !important;
      font-size: 26px !important;
   }

   /* ── Full-screen overlay panel ────────────────────────────────────────
      Override template's 300px right-side slide panel.
      Transition: opacity fade instead of translateX slide.           */
   .mobile_menu_inner.mobile_p {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: auto !important;
      width: 100% !important;
      height: 100vh !important;
      height: 100svh !important;
      background: #013c78 !important;
      /* Cancel the template's slide transform */
      transform: none !important;
      -webkit-transform: none !important;
      /* Fade in / out */
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease !important;
      -webkit-transition: opacity 0.3s ease, visibility 0.3s ease !important;
      /* Centre content vertically */
      display: flex !important;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 80px 24px 48px !important;
      z-index: 10000 !important;
      box-shadow: none !important;
   }

   /* Open state: fade in (template adds .tx-s-open) */
   .mobile_menu_inner.mobile_p.tx-s-open {
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      -webkit-transform: none !important;
   }

   /* Hide the dark backdrop — the full-screen panel IS the overlay now */
   .mobile_overlay {
      display: none !important;
   }

   /* ── Content wrapper inside the overlay ──────────────────────────── */
   .mobile_menu_content {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   /* Logo at top of overlay */
   .mobile_menu_content .mobile_menu_logo {
      margin-bottom: 28px;
   }
   .mobile_menu_content .mobile_menu_logo img {
      height: 52px !important;
      width: auto !important;
   }

   /* ── Close ✕ button (top-right corner of overlay) ────────────────── */
   .mobile_cicon {
      position: absolute !important;
      top: 16px !important;
      right: 20px !important;
      left: auto !important;
      cursor: pointer;
      z-index: 10001;
      min-width: 44px;
      min-height: 44px;
      display: flex !important;
      align-items: center;
      justify-content: center;
   }
   .mobile_cicon i.closeclass {
      font-size: 26px !important;
      color: #ffffff !important;
   }

   /* ── meanmenu container ───────────────────────────────────────────── */
   .menu_area.mobile-menu {
      width: 100%;
   }

   /* meanmenu puts .mean-nav INSIDE .mean-bar — hide only the hamburger
      button, NOT the whole bar (which would hide the nav too).         */
   .mean-container .mean-bar > a.meanmenu-reveal {
      display: none !important;
   }
   /* Suppress "Menu" / "MENU" pseudo-elements injected by meanmenu CSS */
   .mean-container .mean-bar::before,
   .mean-container .mean-bar::after {
      display: none !important;
      content: none !important;
   }
   /* Strip mean-bar background/padding — it now acts as a plain wrapper */
   .mean-container .mean-bar {
      background: transparent !important;
      min-height: 0 !important;
      padding: 0 !important;
      float: none !important;
      position: static !important;
      width: 100% !important;
   }

   /* Force top-level nav list visible — meanmenu sets display:none inline;
      JS (elevenca-mobile-nav.js) removes that inline style on open.      */
   .mean-container .mean-nav > ul {
      display: block !important;
   }

   /* mean-nav: transparent, full-width */
   .mean-container .mean-nav {
      background: transparent !important;
      width: 100% !important;
      float: none !important;
   }

   /* ── Top-level list items ──────────────────────────────────────────── */
   .mean-container .mean-nav > ul > li {
      background: transparent !important;
      border-top: none !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
      float: none !important;
      width: 100% !important;
      position: relative;
   }
   .mean-container .mean-nav > ul > li:last-child {
      border-bottom: none !important;
   }

   /* ── Top-level nav links ──────────────────────────────────────────── */
   .mean-container .mean-nav > ul > li > a:not(.mean-expand) {
      background: transparent !important;
      color: #ffffff !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      font-family: 'Barlow Condensed', sans-serif !important;
      letter-spacing: 2px !important;
      text-transform: uppercase !important;
      text-align: center !important;
      padding: 16px 44px 16px 0 !important;
      width: 100% !important;
      border: none !important;
      display: block !important;
      float: none !important;         /* plugin sets float:left — override */
      transition: color 0.2s ease;
   }
   .mean-container .mean-nav > ul > li > a:not(.mean-expand):hover {
      color: #4db4e6 !important;
   }

   /* ── Expand toggle (▾ / ▴ arrow for dropdowns) ────────────────────── */
   .mean-container .mean-nav ul li a.mean-expand {
      background: transparent !important;
      border: none !important;
      color: rgba(255, 255, 255, 0.55) !important;
      font-size: 22px !important;
      font-weight: 300 !important;
      line-height: 1 !important;
      padding: 0 !important;
      width: 44px !important;
      height: 52px !important;  /* matches parent link height (16+~20+16) */
      top: 0 !important;
      right: 0 !important;
      transform: none !important;
      position: absolute !important;
      text-align: center !important;
      display: flex !important;
      align-items: center;
      justify-content: center;
   }
   .mean-container .mean-nav ul li a.mean-expand:hover {
      background: transparent !important;
      color: #4db4e6 !important;
   }

   /* ── Submenu container ────────────────────────────────────────────── */
   .mean-container .mean-nav ul li ul {
      background: rgba(0, 0, 0, 0.22) !important;
      border-radius: 4px;
      overflow: hidden;
   }

   /* Submenu list items */
   .mean-container .mean-nav ul li li {
      background: transparent !important;
      border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
      float: none !important;
      width: 100% !important;
   }
   .mean-container .mean-nav ul li li:first-child {
      border-top: none !important;
   }

   /* Submenu links */
   .mean-container .mean-nav ul li li a:not(.mean-expand) {
      background: transparent !important;
      color: rgba(255, 255, 255, 0.78) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      font-family: 'Barlow', sans-serif !important;
      letter-spacing: 0.5px !important;
      text-transform: none !important;
      text-align: center !important;
      padding: 12px 16px !important;
      width: 100% !important;
      border: none !important;
      display: block !important;
      float: none !important;
      transition: color 0.2s ease;
   }
   .mean-container .mean-nav ul li li a:not(.mean-expand):hover {
      color: #4db4e6 !important;
   }

} /* end @media (max-width: 991px) */

/* =============================================
   FOOTER — Copyright & Developer Credit
   ============================================= */

.copyright-text {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
   margin-top: 24px;
}

.developer-credit {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.45);
   margin-top: 6px;
   letter-spacing: 0.3px;
}

.developer-credit a {
   color: rgba(255, 255, 255, 0.65);
   text-decoration: none;
   transition: color 0.2s ease;
}

.developer-credit a:hover {
   color: #0066a0;
   text-decoration: underline;
}

/* Contact page: override template's white-text defaults for the details panel */
.cont_witr .em-service-title h3,
.cont_witr .em-service-title h3 a {
   color: #013c78;
}
.cont_witr .em-service-desc p {
   color: #555;
}
.cont_witr .witr_section_title_inner h2,
.cont_witr .witr_section_title_inner h3 {
   color: #013c78;
}
.cont_witr .witr_section_title_inner p {
   color: #555;
}