/* Mega Services Menu */
/* Legacy mega menu (will be overridden by new card grid) */
.services-mega .dropdown-menu.mega-services-menu { min-width: 780px; max-width: 100%; border-radius: 12px; background: #ffffff; position: absolute; }
@media (max-width: 991.98px){
    .services-mega .dropdown-menu.mega-services-menu { position: static; min-width: unset; border-radius: 0; box-shadow:none; }
}
.mega-services-menu h6 { letter-spacing: .5px; font-size: .72rem; }
.mega-link-group li { margin-bottom: .35rem; }
.mega-service-link { display: flex; align-items: center; font-size: .9rem; padding: .35rem .5rem; border-radius: 6px; color: #2c3e50; text-decoration: none; transition: background .15s, color .15s; }
.mega-service-link i { width: 18px; text-align: center; font-size: .85rem; }
.mega-service-link:hover, .mega-service-link:focus { background: #f2f6ff; color: var(--primary-color); text-decoration: none; }
.mega-menu-footer { font-size: .7rem; }
.nav-modern .dropdown-menu.mega-services-menu { animation: fadeIn .18s ease-in; }
@keyframes fadeIn { from { opacity:0; transform: translateY(4px);} to { opacity:1; transform: translateY(0);} }

/* New Card Grid Mega Menu */
.mega-services-menu { width: 100%; max-width: 1050px; border-radius: 16px; background: #ffffff; padding: 0; overflow: hidden; }
/* Hover Submenu Variant (300px max width) */
.mega-services-menu.hover-panel { width:auto; min-width:220px; padding:8px 0; border-radius:0; box-shadow:0 8px 24px rgba(0,0,0,.15); border:1px solid #e1eaf2; background:#fff; display:none; position:absolute; top:100%; left:0; z-index:1050; }
.services-mega:hover .mega-services-menu.hover-panel { display:block; animation:fadeIn .18s ease-in; }
.services-sub-list { list-style:none; padding:0; }
.mega-sub-link { display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:.82rem; text-decoration:none; color:#1e2a38; line-height:1.2; transition:background .18s,color .18s; position:relative; border-radius:0; }
.mega-sub-link:hover, .mega-sub-link:focus { background: var(--menu-hover); color: var(--accent-color); }
.mega-sub-link:hover i, .mega-sub-link:focus i { color: var(--accent-color); }
.mega-sub-link i { font-size:.9rem; width:18px; text-align:center; color:#4c6475; transition:color .18s ease; }
.mega-sub-link.active-selection { background:#002a4d; color:#ffffff; }
.mega-sub-link.active-selection i { color:#ffffff; }
.all-services-link { background:#f8fafc; border-radius:0 0 10px 10px; }
.all-services-link:hover { background:#e9f3fb; }
.services-mega { position:relative; }
.services-mega:focus-within .mega-services-menu.hover-panel { display:block; }
@media (max-width: 991.98px){ .mega-services-menu.hover-panel { position:static; max-width:100%; width:100%; box-shadow:none; border-radius:0; border:none; display:block; } .all-services-link { border-radius:0; } }
.mega-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 8px; padding: 14px 14px 6px 14px; }
.mega-card { position: relative; display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(135deg,#ffffff,#f9fbff); border: 1px solid #e6ecf5; padding: 14px 16px 12px 16px; border-radius: 12px; text-decoration: none; color: #1e2a38; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: all .25s ease; min-height: 120px; }
.mega-card:focus { outline: 3px solid #1d72b8; outline-offset: 2px; }
.mega-card:hover { transform: translateY(-4px); border-color: #d0dae5; box-shadow: 0 6px 18px -3px rgba(0,0,0,.12); background: linear-gradient(135deg,#ffffff,#eef6ff); }
.mega-card h6 { margin: 0 0 4px 0; font-size: .85rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: #0b3c63; }
.mega-card p { margin: 0; font-size: .75rem; line-height: 1.3; color: #455a6b; }
.mega-icon { flex: 0 0 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; box-shadow: 0 4px 10px -2px rgba(0,0,0,.15); }
.mega-arrow { position: absolute; right: 10px; bottom: 10px; font-size: .75rem; color: #6c8295; opacity: 0; transform: translateX(-6px); transition: all .25s ease; }
.mega-card:hover .mega-arrow { opacity: 1; transform: translateX(0); }
.mega-icon.gradient-tech { background: linear-gradient(135deg,#0066ff,#4facfe); }
.mega-icon.gradient-device { background: linear-gradient(135deg,#ff512f,#f09819); }
.mega-icon.gradient-cool { background: linear-gradient(135deg,#00b4db,#0083b0); }
.mega-icon.gradient-civil { background: linear-gradient(135deg,#667db6,#0082c8); }
.mega-icon.gradient-demo { background: linear-gradient(135deg,#7f00ff,#e100ff); }
.mega-icon.gradient-pallet { background: linear-gradient(135deg,#11998e,#38ef7d); }
.mega-icon.gradient-recycle { background: linear-gradient(135deg,#56ab2f,#a8e063); }
.mega-icon.gradient-tax { background: linear-gradient(135deg,#ffb347,#ffcc33); }
.mega-menu-footer.alt { background: #f5f9fd; border-top: 1px solid #e1eaf2; }
.mega-menu-footer.alt .btn-outline-primary { --bs-btn-color:#0b3c63; --bs-btn-border-color:#0b3c63; --bs-btn-hover-bg:#0b3c63; --bs-btn-hover-border-color:#0b3c63; --bs-btn-hover-color:#fff; }
@media (max-width: 991.98px){ .mega-services-menu { position: static; max-width: 100%; border-radius: 0; } .mega-grid { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); padding: 10px 10px 4px 10px; } .mega-card { min-height: 100px; padding: 12px 12px 10px 12px; } }
@media (prefers-reduced-motion: reduce){ .mega-card, .mega-arrow { transition: none; } }
/* Keyboard navigation helper (JS will toggle .mega-nav-active) */
.mega-card.mega-nav-active { box-shadow: 0 0 0 2px #1d72b8 inset; }
:root {
    --primary-color: #002147;        /* Dark navy blue from screenshot */
    --secondary-color: #003366;      /* Slightly lighter navy */
    --accent-color: #FFD700;        /* Gold accent color */
    --text-color: #333333;
    --light-bg: #f8f9fa;
    --dark-bg: #002147;
    --bs-link-color-rgb: 255, 215, 0;
    --menu-bg: #002147;             /* Solid dark navy for menu */
    --menu-active: #FFD700;         /* Gold for active state */
    --menu-hover: rgba(255, 215, 0, 0.1);
    --gradient-start: #001533;      /* Darker navy */
    --gradient-end: #002147;        /* Main navy */
    --header-height: 80px;          /* Standard header height */
    --text-white: #ffffff;
    --border-light: rgba(255, 255, 255, 0.1);
    --whatsapp-green: #25D366;
}

/* 1. Support/Quick Help Floating Button (Bottom - 30px - Most Accessible) */
.quick-help-float {
    position: fixed;
    right: 30px;
    bottom: 310px;
    background-color: #ff6b35;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    cursor: pointer;
}

.quick-help-float:hover {
    background-color: #ff5722;
    transform: scale(1.1);
}

.quick-help-tooltip {
    position: absolute;
    right: 70px;
    background-color: #333;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.quick-help-float:hover .quick-help-tooltip {
    opacity: 1;
    right: 80px;
}

/* 2. Donation Floating Button (100px from bottom) */
.donation-float {
    position: fixed;
    bottom: 100px;
    right: 30px;
    background-color: #2ecc71;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    cursor: pointer;
}

.donation-float:hover {
    background-color: #27ae60;
    transform: scale(1.1);
}

.donation-tooltip {
    position: absolute;
    right: 70px;
    background-color: #333;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.donation-float:hover .donation-tooltip {
    opacity: 1;
    right: 80px;
}

/* 3. Email Help Floating Button (170px from bottom) */
.email-help-float {
    position: fixed;
    bottom: 170px;
    right: 30px;
    background-color: #e74c3c;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 24px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    cursor: pointer;
}

.email-help-float:hover {
    background-color: #c0392b;
    transform: scale(1.1);
}

.email-help-tooltip {
    position: absolute;
    right: 70px;
    background-color: #333;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.email-help-float:hover .email-help-tooltip {
    opacity: 1;
    right: 80px;
}

/* 4. WhatsApp Floating Button (Top - 240px from bottom) */
.whatsapp-float {
    position: fixed;
    bottom: 240px;
    right: 30px;
    background-color: var(--whatsapp-green);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
}

/* 5. Scroll Navigation Buttons (Up/Down) */
.scroll-nav-btn {
    position: fixed;
    right: 0px;
    width: 30px;
    height: 90px;
    border-radius: 2px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    z-index: 980;
    background: linear-gradient(135deg, #002147, #003366);
    color: #FFD700;
    box-shadow: 0 6px 18px -4px rgba(0,0,0,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
}
.scroll-nav-btn:hover, .scroll-nav-btn:focus {
    background: linear-gradient(135deg, #003366, #002147);
    color: #ffffff;
    outline: none;
    box-shadow: 0 8px 22px -4px rgba(0,0,0,.45);
}
.scroll-nav-btn:active { transform: scale(.92); }
.scroll-nav-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }

.scroll-up { bottom: 220px; }
.scroll-down { bottom: 320px; }

@media (max-width: 768px) {
    .scroll-nav-btn { right: 0px; width: 30px; height: 30px; font-size: 18px; }
    .scroll-up { bottom: 220px; }
    .scroll-down { bottom: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-nav-btn { transition: none; }
}

/* ===== Contact Page India Map Styles ===== */
.contact-india-map { width:100%; height:540px; border:2px solid #e1eaf2; border-radius:14px; box-shadow:0 4px 18px rgba(0,0,0,.08); }
@media (max-width:768px){ .contact-india-map { height:420px; } }
.map-legend { display:flex; gap:18px; flex-wrap:wrap; background:#f8fafc; padding:8px 14px; border:1px solid #e1eaf2; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.map-legend .legend-item { display:flex; align-items:center; gap:6px; }
.legend-dot { width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow:0 0 0 2px #fff inset, 0 0 0 1px rgba(0,0,0,.25); }
.legend-dot.served { background:rgb(31, 241, 31); }
.legend-dot.upcoming { background:#0d6efd; }
.served-cities-details { background:#f9fbff; border:1px solid #e1eaf2; border-radius:10px; padding:12px 18px; }
.served-cities-details summary { cursor:pointer; }
.served-cities-list { columns:3; column-gap:32px; padding-left:18px; }
@media (max-width:992px){ .served-cities-list { columns:2; } }
@media (max-width:576px){ .served-cities-list { columns:1; } }
.map-marker-pin { font-size:20px; line-height:1; transform:translateY(-4px); filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.map-marker-pin.served { color:#25D366; }
.map-marker-pin.upcoming { color:var(--primary-color); }
/* Ensure SVG inside pin inherits animation transform */
.map-marker-pin .pin-svg { display:block; }
.map-marker-pin.served .pin-svg { filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)) drop-shadow(0 0 4px rgba(37,211,102,.45)); }
.map-marker-pin.upcoming .pin-svg { filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)) drop-shadow(0 0 4px rgba(0,51,102,.35)); }
/* Legend dots updated to match new colors */
.map-legend .legend-dot { display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:4px; vertical-align:middle; }
.map-legend .legend-dot.served { background:#25D366; box-shadow:0 0 0 2px rgba(37,211,102,.35); }
.map-legend .legend-dot.upcoming { background:var(--primary-color); box-shadow:0 0 0 2px rgba(0,51,102,.35); }

/* Drop-in animation for map pins */
@keyframes pinDropIn {
    0% { transform:translateY(-30px) scale(0.4); opacity:0; filter:drop-shadow(0 0 0 rgba(0,0,0,0)); }
    55% { transform:translateY(4px) scale(1.08); opacity:1; }
    70% { transform:translateY(-3px) scale(0.96); }
    85% { transform:translateY(2px) scale(1.02); }
    100% { transform:translateY(0) scale(1); opacity:1; }
}
.map-marker-pin.animated-drop-in { animation: pinDropIn .85s cubic-bezier(.25,.9,.35,1.25) forwards; }
.map-marker-pin.served.animated-drop-in { text-shadow:0 0 6px rgba(37,211,102,.65); }
.map-marker-pin.upcoming.animated-drop-in { text-shadow:0 0 6px rgba(0,51,102,.55); }
.leaflet-popup-content { font-size:.8rem; }
@media (prefers-reduced-motion: reduce){ .contact-india-map, .map-legend { transition:none; } }

/* City Badges List */
.city-badge-wrapper { background:#f9fbff; border:1px solid #e1eaf2; border-radius:12px; padding:16px 18px; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.city-badges { display:flex; flex-wrap:wrap; gap:10px; }
.city-badge { 
    background: var(--primary-color);
    color: #fff;
    font-size:.7rem;
    letter-spacing:.4px;
    font-weight:600;
    padding:8px 14px 7px 14px;
    border:none;
    border-radius:50px;
    cursor:default;
    position:relative;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.city-badge.served { background: var(--whatsapp-green); color:#052b15; }
.city-badge.upcoming { background: var(--primary-color); }
.city-badge.served::after,
.city-badge.upcoming::after { content:''; position:absolute; inset:0; border-radius:50px; box-shadow:0 0 0 2px rgba(255,255,255,.25) inset; pointer-events:none; }
.city-badge:hover { transform:translateY(-4px); box-shadow:0 6px 14px -4px rgba(0,0,0,.25); }
.city-badge:focus-visible { outline:3px solid var(--accent-color); outline-offset:2px; }
@media (max-width:576px){ .city-badge { font-size:.65rem; padding:7px 12px 6px 12px; } }

.whatsapp-float:hover {
    background-color: #1da851;
    color: white;
    transform: scale(1.1);
}

.whatsapp-float i {
    margin-top: 2px;
}

.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    background-color: #333;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    right: 80px;
}

/* Email Help Popup */
.email-help-popup {
    position: fixed;
    bottom: 20px;
    right: 100px;
    width: 320px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.email-help-header {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.email-help-header h6 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.email-help-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.email-help-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.email-help-body {
    padding: 20px;
}

.email-help-body p {
    color: #666;
    font-size: 14px;
}

.email-option {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: all 0.2s ease;
    gap: 12px;
}

.email-option:hover {
    border-color: #e74c3c;
    background: #fff5f5;
    color: #e74c3c;
    transform: translateX(-5px);
}

.email-option i {
    font-size: 24px;
    width: 30px;
}

.email-option span {
    font-weight: 500;
    font-size: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .email-help-popup {
        right: 100px;
        width: calc(100% - 30px);
        max-width: 320px;
    }

    .email-help-float {
        right: 15px;
    }
}

.qr-code-container {
    background-color: white;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.donation-qr {
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0;
}

/* Quick Help Modal Styles */
#quickHelpModal .modal-content {
    border-radius: 15px;
    border: none;
}
#quickHelpModal .quick-help-dialog { max-width:70% !important; width:70% !important; margin:55px auto 0; }
#quickHelpModal .modal-content { height:80vh; display:flex; flex-direction:column; }
#quickHelpModal .modal-header, #quickHelpModal .modal-footer { flex:0 0 auto; }
#quickHelpModal .modal-body { flex:1 1 auto; overflow-y:auto; }
@media (max-width: 991.98px){ #quickHelpModal .quick-help-dialog { width:95% !important; max-width:95% !important; margin:25px auto 0; } #quickHelpModal .modal-content { height:85vh; } }

#quickHelpModal .modal-header {
    background-color: #ff6b35;
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#quickHelpModal .btn-close {
    filter: brightness(0) invert(1);
}

#quickHelpModal .form-label {
    font-weight: 500;
}

#quickHelpModal .btn-primary {
    background-color: #ff6b35;
    border-color: #ff6b35;
}

#quickHelpModal .btn-primary:hover {
    background-color: #ff5722;
    border-color: #ff5722;
}

/* Donation Modal Styles */
#donationModal .modal-content {
    border-radius: 15px;
    border: none;
}

#donationModal .modal-header {
    background-color: #2ecc71;
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#donationModal .btn-close {
    filter: brightness(0) invert(1);
}

/* Global Styles */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    padding-top: 90px;
}

/* Modern Header and Navigation */
.modern-header {
    background-color: var(--primary-color);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1);
    height: var(--header-height);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.nav-modern {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0;
    background: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

.nav-modern > .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.navbar-nav {
    gap: 0.5rem;
    margin-left: auto;
    align-items: center;
    padding-right: 70px !important;
}

.logo-container {
    margin-top: -14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: white;
    border-radius: 90px;
    position: relative;
    z-index: 1031;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.logo-img {
    height: 45px !important;
    width: 45px !important;
    background: transparent;
    padding: 0;
    border-radius: 4px;
}

.navbar-brand {
    width: 600px !important;
   font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-white) !important;
    transition: all 0.3s ease;
    padding: 0;
    display: flex;
    align-items: center;
    margin-right: 1.5rem; /* create separation from nav items */
}

.navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
}

.navbar-brand .company-name {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    white-space: normal; /* allow wrap to prevent collision */
}

.navbar-brand .tagline {
    font-size: 0.75rem;
    font-weight: 400;
    color: #FFD700;
    text-transform: none;
    letter-spacing: 0.3px;
    margin-top: 2px;
    font-style: italic;
    white-space: normal;
}

.navbar-brand span {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.container {
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 1400px;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text-white) !important;
    transition: all 0.3s ease;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-brand img {
    height: 40px;
    width: auto;
}

/* Constrain nav width so company name can occupy more horizontal space */
#navbarMain .navbar-nav { max-width: 540px; }
#navbarMain .navbar-nav.admin-nav { max-width: 540px; }

.nav-link {
    color: var(--text-white) !important;
    font-weight: 500;
    padding: 0.5rem 0.75rem !important; /* reduced horizontal padding to narrow menu width */
    margin: 0;
    transition: all 0.2s ease;
    position: relative;
    font-size: 0.95rem;
    height: var(--header-height);
    display: flex;
    align-items: center;
    border: none;
    background: transparent;
    white-space: nowrap;
}

.nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.nav-link:hover {
    color: var(--accent-color) !important;
    background: var(--menu-hover);
}

.nav-link:hover:after {
    transform: scaleX(1);
}

.nav-link.active {
    color: var(--accent-color) !important;
    background: var(--menu-hover);
}

.nav-link.active:after {
    transform: scaleX(1);
}

.navbar-toggler {
    border: none;
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: none;
    position: relative;
    width: 24px;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
    transform: translateY(-8px);
}

.navbar-toggler-icon::after {
    transform: translateY(8px);
}

/* Update hero slider gradient to match new color scheme */
.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 33, 71, 0.95),
        rgba(0, 33, 71, 0.85) 50%,
        rgba(0, 33, 71, 0.75)
    );
    z-index: 1;
}

/* Update button styles to match new color scheme */
.btn-primary.btn-lg {
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

.btn-primary.btn-lg:hover {
    background: linear-gradient(45deg, var(--gradient-end), var(--gradient-start));
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5);
}

/* Modern Footer */
.modern-footer {
    background: var(--dark-bg);
    color: white;
    padding: 3rem 0 1rem;
}

.modern-footer h5 {
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.modern-footer .social-links a {
    color: rgba(var(--bs-link-color-rgb), 1) !important;
    margin-right: 1.5rem;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    opacity: 1;
}

.modern-footer .social-links a:hover {
    color: rgba(var(--bs-link-color-rgb), 0.8) !important;
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(var(--bs-link-color-rgb), 0.3);
}

.modern-footer ul li {
    margin-bottom: 0.75rem;
}

.modern-footer ul li a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.modern-footer ul li a:hover {
    color: white !important;
}

/* Responsive Navigation */
@media (max-width: 991.98px) {
    body {
        padding-top: 70px;
    }

    .modern-header {
        height: auto;
        min-height: 60px;
    }

    .nav-modern {
        height: auto;
        padding: 0.5rem 0;
    }

    .navbar-brand span {
        font-size: 0.85rem;
        max-width: 200px;
        white-space: normal;
        line-height: 1.3;
    }

    .navbar-brand .company-name {
        font-size: 0.85rem;
        max-width: 200px;
        white-space: normal;
        line-height: 1.3;
    }

    .navbar-brand .tagline {
        font-size: 0.65rem;
        margin-top: 1px;
    }

    .logo-container {
        margin-top: 0;
    }

    .logo-img {
        height: 40px !important;
        width: 40px !important;
    }

    .navbar-collapse {
        background: var(--primary-color);
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .navbar-nav {
        padding-right: 0 !important;
        gap: 0;
    }

    .nav-link {
        padding: 0.75rem 1rem !important;
        height: auto;
        border-left: 3px solid transparent;
        margin: 0.25rem 0;
    }

    .nav-link:hover {
        border-left-color: var(--accent-color);
        background: var(--menu-hover);
    }

    .nav-link.active {
        border-left-color: var(--accent-color);
        background: var(--menu-hover);
    }

    .nav-link:after {
        display: none;
    }

    .language-selector {
        position: relative;
        top: auto;
        right: auto;
        margin: 0.5rem 0;
    }

    .language-button {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1rem !important;
        height: auto;
    }

    .language-dropdown {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 0.5rem;
        width: 100%;
    }

    .modern-footer {
        padding: 2rem 0 1rem;
    }

    /* Floating buttons - smaller on mobile */
    .whatsapp-float,
    .email-help-float,
    .donation-float,
    .quick-help-float {
        width: 50px;
        height: 50px;
        font-size: 20px;
        right: 5px;
    }

    .quick-help-float { bottom: 310px; }
    .whatsapp-float { bottom: 220px; }
    .email-help-float { bottom: 110px; }
    .donation-float { bottom: 0px; }

    /* Hide tooltips on mobile */
    .whatsapp-tooltip,
    .email-help-tooltip,
    .donation-tooltip,
    .quick-help-tooltip {
        display: none;
    }

    /* Hero slider adjustments */
    .hero-slide {
        height: 400px;
    }

    .slide-content h1 {
        font-size: 1.8rem;
    }

    .slide-content p {
        font-size: 1rem;
    }
}

/* Extra small devices */
@media (max-width: 575.98px) {
    .navbar-brand span {
        font-size: 0.75rem;
        max-width: 150px;
    }

    .hero-slide {
        height: 350px;
    }

    .slide-content h1 {
        font-size: 1.5rem;
    }

    .slide-content p {
        font-size: 0.9rem;
    }

    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Navbar toggler animation */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-color: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Ensure text is always visible on all backgrounds */
.nav-link {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Improve mobile menu visibility */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-item {
        width: 100%;
    }

    .admin-login-icon {
        justify-content: flex-start;
        padding-left: 1rem !important;
    }
}
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
}

/* Modern Header */
.modern-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Navigation */
.nav-modern {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.1);
}

/* Modern Hero Slider */
.carousel {
    margin-top: 5px;
    position: relative;
    background-color: var(--primary-color);
}

.hero-slide {
    height: 600px;
    min-height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    color: white;
    overflow: hidden;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 32, 76, 0.95),
        rgba(0, 32, 76, 0.8) 40%,
        rgba(0, 32, 76, 0.4)
    );
    z-index: 1;
}

.slide-1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/slider-1.jpg');
}

.slide-2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/slider-2.jpg');
}

.slide-3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('../images/slider-3.jpg');
}

.slide-content {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: 800px;
    margin: 0;
    text-align: left;
}

.slide-content h1 {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--text-white);
    animation: fadeInLeft 0.8s ease;
}

.slide-content p {
    font-size: 1.2rem;
    font-weight: 400;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    animation: fadeInRight 0.8s ease 0.2s;
    max-width: 600px;
    line-height: 1.6;
}

.carousel-indicators {
    bottom: 30px;
    z-index: 3;
    margin-bottom: 0;
}

.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 6px;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    transition: all 0.3s ease;
    opacity: 1;
}

.carousel-indicators button.active {
    background-color: var(--accent-color);
    transform: scale(1.2);
}

.carousel-control-prev,
.carousel-control-next {
    z-index: 3;
    width: 10%;
    opacity: 0;
    transition: all 0.3s ease;
}

.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next {
    opacity: 0.8;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 32, 76, 0.7);
    border-radius: 50%;
    background-size: 50%;
}

.btn-primary.btn-lg {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    background: var(--accent-color);
    border: none;
    border-radius: 4px;
    color: var(--primary-color);
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease 0.4s;
}

.btn-primary.btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.6);
    background: linear-gradient(45deg, #1976d2, #1565c0);
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Services Page Styles */
.services-hero {
    background-color: var(--light-bg);
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.services-hero .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.services-hero .row {
    margin-bottom: 0 !important;
}

.services-hero h1 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.services-hero h4 {
    margin-bottom: 0.5rem !important;
}

.services-hero p.lead {
    margin-bottom: 0 !important;
}

/* Product Slider Styles */
.product-showcase {
    padding: 1rem 0 4rem 0 !important;
    background: white;
    margin-top: 0 !important;
}

.product-showcase .container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.product-slider {
    padding: 0 !important;
    margin-top: 0 !important;
    position: relative;
}

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.product-image {
    position: relative;
    padding-top: 66%;
    overflow: hidden;
    background: #f8f9fa;
}

.product-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08);
}

.product-overlay {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.product-overlay .badge {
    background: var(--accent-color);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.product-info {
    padding: 2rem;
    text-align: left;
}

.product-info h3 {
    color: var(--primary-color);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.product-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.product-features span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    font-size: 0.9rem;
}

.product-features i {
    color: var(--accent-color);
    font-size: 1rem;
}

.product-info p {
    color: var(--text-color);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    opacity: 0.85;
}

.product-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.product-actions .btn {
    flex: 1;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.product-actions .btn-outline-primary {
    border-width: 2px;
}

.product-actions .btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.view-details {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 4px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.view-details:hover {
    background: var(--primary-color);
    color: white;
}

/* Swiper Navigation Styles */
.swiper-button-next,
.swiper-button-prev {
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.2rem;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--primary-color);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--primary-color);
}

/* Feature Cards */
.feature-card {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--light-bg);
    border-radius: 50%;
    color: var(--primary-color);
}

.icon-wrapper i {
    font-size: 1.8rem;
}

.feature-card h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
}

.feature-card p {
    color: var(--text-color);
    font-size: 0.95rem;
    opacity: 0.8;
    margin: 0;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

.service-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.service-card h3 {
    color: var(--dark-bg);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.service-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.service-features li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.service-features li:last-child {
    border-bottom: none;
}

/* Features Section */
.feature-list {
    margin-top: 2rem;
}

.feature-item {
    display: flex;
    align-items: start;
    margin-bottom: 2rem;
}

.feature-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 1rem;
    margin-top: 0.25rem;
}

.feature-item h4 {
    margin-bottom: 0.5rem;
    color: var(--dark-bg);
}

.feature-image img {
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 4rem 0;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

/* Animations */
@keyframes slideInDown {
    from {
        transform: translateY(-100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(100px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Service Cards */
.service-card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.service-card:hover {
    transform: translateY(-5px);
}

/* Contact Form */
.contact-form {
        background: #ffffff;
        padding: 1.5rem 1.5rem 1.25rem;
        border-radius: 14px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        border:1px solid #e3e8ee;
        position:relative;
}
.contact-form::before { content:''; position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg,#ffffff,#f9fbff); z-index:-1; }
.contact-form h2, .contact-info-wrapper h3 { font-weight:600; letter-spacing:.5px; }
.contact-form .form-label { font-size:.78rem; text-transform:uppercase; letter-spacing:.6px; font-weight:600; color:#0b3c63; }
.contact-form .form-control { border-radius:10px; border:1px solid #ccd6e1; background:#fdfefe; font-size:.85rem; }
.contact-form .form-control:focus { border-color: var(--accent-color); box-shadow:0 0 0 3px rgba(255,215,0,.25); }
.contact-form button[type=submit] { padding:.65rem 1.4rem; font-size:.85rem; letter-spacing:.5px; font-weight:600; border-radius:10px; }
.contact-form button[type=submit]:hover { transform:translateY(-2px); box-shadow:0 6px 18px -4px rgba(0,0,0,.2); }
.contact-form .captcha-container { background:#ffffff; border:1px dashed #c6d2dd; }
.contact-form .captcha-code { border:1px solid #ccd6e1 !important; }
/* Captcha inline layout */
.contact-form .captcha-flex { align-items:flex-start; }
.contact-form .captcha-block { min-width:160px; }
.contact-form .captcha-code { min-width:140px; text-align:center; }
.contact-form .captcha-input-block .form-control { border-radius:10px; }
@media (max-width: 576px){ .contact-form .captcha-flex { flex-direction:column; } .contact-form .captcha-block { width:100%; } }
/* Form row two-column grouping */
.contact-form .form-row { align-items:flex-start; }
.contact-form .form-row .form-label { display:block; }
@media (max-width: 768px){ .contact-form .form-row { flex-direction:column; gap:0.75rem; } }
/* Captcha + submit single row */
.contact-form .captcha-submit-row { background:#ffffff; border:1px dashed #c6d2dd; padding:12px 14px; border-radius:12px; max-width:calc(100% - 200px); }
.contact-form .captcha-submit-row .captcha-block { min-width:150px; }
.contact-form .captcha-submit-row .captcha-code { min-width:140px; text-align:center; }
.contact-form .captcha-submit-row .captcha-input-line > .form-control { flex:1 1 auto; }
.contact-form .captcha-submit-row .submit-inline { padding:.65rem 1.2rem; }
@media (max-width: 992px){ .contact-form .captcha-submit-row { max-width:100%; } }
@media (max-width: 768px){
    .contact-form .captcha-submit-row { flex-direction:column; }
    .contact-form .captcha-submit-row .captcha-input-line { flex-direction:column; }
    .contact-form .captcha-submit-row .captcha-input-line > .form-control, .contact-form .captcha-submit-row .captcha-input-line > button { width:100%; }
    .contact-form .captcha-submit-row .submit-inline { width:100%; }
}

/* Stacked layout wrappers */
.contact-form-wrapper, .contact-info-wrapper { max-width:980px; margin:0 auto; }
.contact-info-wrapper { background:#ffffff; padding:1.25rem 1.5rem 1rem; border-radius:14px; border:1px solid #e3e8ee; box-shadow:0 2px 10px rgba(0,0,0,0.08); position:relative; }
.contact-info-wrapper::before { content:''; position:absolute; inset:0; border-radius:14px; background:linear-gradient(135deg,#ffffff,#f8fbff); z-index:-1; }
.contact-info-wrapper h3 { margin-bottom:1rem; }
.contact-info .address-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:.5rem; }
.contact-info .address-card { background:#f9fbff; border:1px solid #e3e8ee; border-radius:12px; padding:14px 16px; box-shadow:0 1px 3px rgba(0,0,0,.06); position:relative; display:flex; flex-direction:column; gap:4px; }
.address-card h5 { margin:0; font-size:.82rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; display:flex; align-items:center; gap:6px; color:#0b3c63; }
.address-card p { margin:0; font-size:.75rem; line-height:1.25; color:#224155; }
.address-card i { color: var(--accent-color); }
.contact-info .quick-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.quick-actions .btn { flex:1 1 220px; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; letter-spacing:.4px; padding:.7rem .9rem; border-radius:10px; }
.quick-actions .btn i { font-size:.9rem; }
.contact-info .map-container { margin-top:22px; }
.contact-info .alert-info { font-size:.7rem; padding:.5rem .75rem; display:flex; align-items:center; gap:6px; border-radius:8px; }
.location-tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; background:#0d1b2a; padding:.5rem .5rem .5rem .75rem; border-radius:10px; border:1px solid rgba(255,255,255,.08); }
.location-tab { appearance:none; border:none; background:linear-gradient(145deg,#16263b,#0d1b2a); color:#fff; padding:.55rem .95rem; border-radius:8px; font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:.35rem; line-height:1; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 3px -1px rgba(0,0,0,.4); transition:background .25s, box-shadow .25s, transform .18s; }
.location-tab:hover:not(.active) { background:linear-gradient(145deg,#1c3352,#122238); }
.location-tab.active { background:linear-gradient(145deg,var(--accent-color,#ff7d00),#ff9d2e); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 3px 6px -2px rgba(0,0,0,.6); }
.location-tab:focus-visible { outline:2px solid var(--accent-color,#ff7d00); outline-offset:2px; }
.location-tabs .directions-btn { margin-left:auto; font-size:.65rem; padding:.45rem .7rem; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); text-decoration:none; white-space:nowrap; transition:background .25s,border-color .25s,color .25s; }
.location-tabs .directions-btn:hover { background:rgba(255,255,255,.18); color:#fff; }
@media (max-width:680px){ .location-tabs { flex-direction:column; } .location-tabs .directions-btn { width:100%; justify-content:center; margin-left:0; } }
.contact-info .social-links h4 { font-size:.85rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.contact-info .social-links .d-flex a { width:38px; height:38px; display:flex; align-items:center; justify-content:center; background:#002147; color:#FFD700 !important; border-radius:10px; font-size:1rem; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:background .25s, transform .25s; }
.contact-info .social-links .d-flex a:hover { background:#003366; transform:translateY(-3px); }

@media (max-width: 768px){
    .contact-form { padding:1.2rem 1rem 1rem; }
    .contact-info-wrapper { padding:1rem .95rem .85rem; }
    .contact-info .address-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
    .quick-actions .btn { flex:1 1 100%; }
}

/* Contact Info Address Styling */
.contact-info p {
    color: var(--primary-color);
}

.contact-info h5 {
    color: var(--primary-color);
    font-weight: 600;
}

/* Contact Page Social Links */
.contact-info .social-links a {
    color: rgba(var(--bs-link-color-rgb), 1) !important;
    font-size: 1.8rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.contact-info .social-links a:hover {
    color: rgba(var(--bs-link-color-rgb), 0.8) !important;
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(var(--bs-link-color-rgb), 0.3);
}

/* Map Styles */
.map-container {
    position: relative;
    transition: all 0.3s ease;
}
.map-container.location-map { width:100%; padding:0 15px; box-sizing:border-box; }
.map-container.location-map #mapLocations, .map-container.location-map iframe { height:320px !important; }
@media (max-width: 992px){ .map-container.location-map { width:100%; padding:0 12px; } }
/* Contact page alignment refinements */
.top-location-block { max-width:900px; }
/* Hero Contact Section */
.hero-contact { background:linear-gradient(135deg,#002147 0%, #003d7a 60%, #005092 100%); color:#fff; padding:48px 32px 44px; border-radius:22px; position:relative; overflow:hidden; box-shadow:0 8px 28px -6px rgba(0,0,0,.35); }
.hero-contact::after { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.08), transparent 60%); pointer-events:none; }
.hero-heading { font-size:2.05rem; font-weight:700; letter-spacing:.8px; margin:0 0 16px; }
.hero-subtext { font-size:1rem; max-width:880px; margin:0 auto 22px; line-height:1.5; }
.hero-subtext .highlight-call { color:var(--accent-color); font-weight:600; }
.hero-cta .hero-btn { font-size:.85rem; font-weight:600; letter-spacing:.5px; padding:.85rem 1.3rem; border-radius:10px; box-shadow:0 4px 14px -4px rgba(0,0,0,.4); }
.hero-cta .hero-btn.alt { background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3); }
.hero-cta .hero-btn.alt:hover { background:rgba(255,255,255,.22); }
.hero-metrics .metric { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hero-metrics .metric-value { font-size:1.15rem; font-weight:700; color:var(--accent-color); }
.hero-metrics .metric-label { font-size:.65rem; letter-spacing:.5px; text-transform:uppercase; opacity:.85; }
@media (max-width:768px){ .hero-contact { padding:38px 18px 36px; } .hero-heading { font-size:1.55rem; } }

/* Value Proposition Cards */
.value-props .value-card { background:#ffffff; border:1px solid #e3e9f1; border-radius:14px; padding:20px 18px 18px; box-shadow:0 4px 16px -6px rgba(0,0,0,.18); position:relative; display:flex; flex-direction:column; gap:8px; transition:transform .3s, box-shadow .3s; }
.value-props .value-card:hover { transform:translateY(-6px); box-shadow:0 10px 28px -8px rgba(0,0,0,.28); }
.value-props .value-card h3 { margin:0; font-size:1rem; font-weight:700; letter-spacing:.6px; color:#0b3c63; }
.value-props .value-card p { margin:0; font-size:.8rem; line-height:1.4; color:#2f4b5f; }
.value-props .icon-wrap { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.15rem; color:#fff; box-shadow:0 4px 14px -4px rgba(0,0,0,.3); }
.icon-wrap.gradient-fast { background:linear-gradient(135deg,#ff512f,#f09819); }
.icon-wrap.gradient-reach { background:linear-gradient(135deg,#0066ff,#4facfe); }
.icon-wrap.gradient-compliance { background:linear-gradient(135deg,#11998e,#38ef7d); }
@media (max-width:768px){ .value-props .value-card { padding:18px 16px 16px; } }

/* Trust Strip */
.trust-strip { background:#f8fbff; border:1px solid #e1eaf2; border-radius:16px; padding:14px 22px; box-shadow:0 3px 12px rgba(0,0,0,.08); }
.trust-strip .trust-item { font-size:.75rem; font-weight:600; letter-spacing:.5px; color:#0b3c63; display:flex; align-items:center; gap:6px; }
.trust-strip .btn { font-size:.7rem; font-weight:600; letter-spacing:.5px; }
@media (max-width:576px){ .trust-strip { padding:12px 16px; gap:10px; } }
.section-title-location { font-weight:700; letter-spacing:.6px; }
.top-location-alert { max-width:760px; margin-left:auto; margin-right:auto; }
.section-title, .section-title-network { font-weight:700; letter-spacing:.6px; }
.section-title-network { display:flex; align-items:center; gap:.5rem; }
.contact-form-wrapper, .contact-info-wrapper { max-width:980px; margin-left:auto; margin-right:auto; }
.contact-form-wrapper .section-title { text-align:left; }
.location-tabs.justify-content-center { justify-content:center; }
@media (max-width:992px){ .top-location-block, .top-location-alert { max-width:100%; } }

.map-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

#map {
    transition: all 0.3s ease;
}

#map:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* Map Location Buttons */
.map-container .btn-primary {
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: white;
    font-weight: 500;
    transition: all 0.3s ease;
    padding: 0.75rem 1rem;
}

.map-container .btn-primary:hover {
    background: var(--secondary-color);
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.map-container .btn-primary i {
    color: var(--accent-color);
}

.map-container .alert-info {
    background: rgba(0, 33, 71, 0.05);
    border: 1px solid rgba(0, 33, 71, 0.1);
    color: var(--primary-color);
    border-radius: 8px;
}

.map-container .alert-info i {
    color: var(--accent-color);
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .map-container .d-flex.gap-2 {
        flex-direction: column;
    }

    .map-container .btn-primary {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Footer */
.modern-footer {
    background: var(--dark-bg);
    color: white;
    padding: 3rem 0;
}

/* Social Media Links */
.social-links a {
    color: rgba(var(--bs-link-color-rgb), 1) !important;
    margin: 0 1px;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.social-links a:hover {
    color: var(--accent-color);
}

/* Language Mega Submenu (matches services submenu) */
.language-mega { position:relative; }
#navbarMain .navbar-nav.admin-nav { margin-left: 0; }
#navbarMain .navbar-nav.admin-nav > li { margin-left: .75rem; }
#navbarMain .navbar-nav.admin-nav > li:first-child { margin-left: 0; }
#adminLogoutBtn { margin-right: 0.5rem; padding-right: 0.75rem; }
#navbarMain .navbar-nav.admin-nav > li:first-child .nav-link { padding-left:0.25rem; }
.language-panel { width:auto; min-width:260px; max-width:380px; padding:10px 0; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.15); border:1px solid rgba(0,0,0,.08); background:#fff; display:none; position:absolute; top:100%; right:0; left:auto; z-index:1050; }
.language-mega:hover .language-panel { display:block; animation:fadeIn .18s ease-in; }
.language-panel.show { display:block; animation:fadeIn .18s ease-in; }
.services-sub-list { display:block; width:auto; }
/* For language panel, let li auto-size to its content */
.language-panel .services-sub-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:4px 8px; padding:0 10px; }
.language-panel .services-sub-list li { width:100%; }
/* Remove any unintended background/shadow on language items except hover/active */
.language-panel .mega-sub-link:not(.active-selection):not(.active) { background:transparent; box-shadow:none; }
.language-panel .mega-sub-link.active-selection,
.language-panel .mega-sub-link.active {
    background: linear-gradient(90deg,#002a4d 0%, #003366 60%) !important;
    color:#fff !important;
    box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.2);
    display:inline-flex;
    position:relative;
    border-left:4px solid var(--accent-color);
}
.language-panel .mega-sub-link.active-selection .lang-native,
.language-panel .mega-sub-link.active-selection .lang-english,
.language-panel .mega-sub-link.active .lang-native,
.language-panel .mega-sub-link.active .lang-english { color:#fff !important; }
.language-panel .mega-sub-link.active-selection i,
.language-panel .mega-sub-link.active i { color: var(--accent-color) !important; }
.language-panel .mega-sub-link { 
    display:flex; flex-direction:row; align-items:center; gap:6px; white-space:nowrap; border:none !important; padding:6px 8px; font-size:.72rem; line-height:1.1; border-radius:6px; transition:background .18s ease; width:100%; text-align:left; cursor:pointer;
}
.language-panel .mega-sub-link:hover { background: rgba(0, 42, 77, 0.1); }
.language-panel .mega-sub-link .flag { font-size:1rem; }
.language-panel .mega-sub-link .lang-native { font-size:.78rem; font-weight:600; letter-spacing:.3px; }
.language-panel .mega-sub-link .lang-english { font-size:.65rem; opacity:.7; display:inline-block; }
/* Hide English name on narrow panels to keep single-line if overflow occurs */
@media (max-width:420px){ .language-panel .mega-sub-link .lang-english { display:none; } }
#languageToggle { margin-top:-40px; }
@media (max-width: 991.98px){ .language-panel { position:static; max-width:100%; width:100%; box-shadow:none; border-radius:0; border:none; display:block; } }

/* Client Trust Section Styles */
.client-trust-section {
    background: #f8f9fa;
}

.client-trust-section .section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.client-trust-section .section-subtitle {
    font-size: 2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 2rem;
}

/* Client Logos Carousel */
#clientLogosCarousel {
    position: relative;
    padding: 20px 0;
}

#clientLogosCarousel .carousel-indicators {
    bottom: -40px;
    margin-bottom: 0;
}

#clientLogosCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 33, 71, 0.3);
    border: none;
    margin: 0 5px;
    opacity: 1;
}

#clientLogosCarousel .carousel-indicators button.active {
    background-color: #002147;
    transform: scale(1.2);
}

.client-logo-box {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.client-logo-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
}

.grayscale-logo {
    max-width: 100%;
    max-height: 130px;
    width: auto;
    height: auto;
    filter: grayscale(50%);
    opacity: 0.9;
    transition: all 0.3s ease;
    object-fit: contain;
}

.client-logo-box:hover .grayscale-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .client-logo-box {
        height: 150px;
        padding: 20px;
    }

    .grayscale-logo {
        max-height: 100px;
    }
}

/* Leadership Carousel */
#leadershipCarousel {
    position: relative;
    padding: 20px 0;
    margin-bottom: 60px;
}

#leadershipCarousel .carousel-inner {
    min-height: 250px;
}

#leadershipCarousel .carousel-indicators {
    bottom: -50px;
    margin-bottom: 0;
}

#leadershipCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(0, 33, 71, 0.3);
    border: none;
    margin: 0 5px;
    opacity: 1;
    transition: all 0.3s ease;
}

#leadershipCarousel .carousel-indicators button.active {
    background-color: #002147;
    transform: scale(1.2);
}

#leadershipCarousel .card {
    transition: transform 0.3s ease;
}

#leadershipCarousel .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

#leadershipCarousel img.rounded-circle {
    border: 3px solid rgba(0, 33, 71, 0.1);
    transition: all 0.3s ease;
}

#leadershipCarousel .card:hover img.rounded-circle {
    border-color: #002147;
    transform: scale(1.05);
}

/* Responsive adjustments for leadership carousel */
@media (max-width: 768px) {
    #leadershipCarousel {
        margin-bottom: 50px;
    }
    
    #leadershipCarousel .carousel-inner {
        min-height: 320px;
    }
    
    #leadershipCarousel img.rounded-circle {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Testimonial Cards */
.testimonial-card {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: all 0.3s ease;
    border-left: 4px solid var(--accent-color);
}

.testimonial-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.testimonial-rating {
    font-size: 1.2rem;
}

.testimonial-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    font-style: italic;
    margin: 0;
}

.testimonial-author strong {
    color: var(--primary-color);
    font-size: 1.1rem;
}

/* Certification Badges */
.certification-badge {
    text-align: center;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.certification-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

.certification-badge h5 {
    color: var(--primary-color);
    font-weight: 600;
    margin: 10px 0 5px 0;
}

.certification-badge i {
    transition: all 0.3s ease;
}

.certification-badge:hover i {
    transform: rotateY(360deg);
}

/* Service Detail Page Styles */
.service-detail-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 80px 0 60px 0;
    margin-top: 0px;
}

.service-detail-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.service-detail-hero .lead {
    font-size: 1.3rem;
    opacity: 0.95;
}

.service-overview-section {
    padding: 15px 0;
}

.service-process-section {
    padding: 0 0;
    background: #f8f9fa;
}

.process-step {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
    transition: all 0.3s ease;
    position: relative;
    border-left: 4px solid var(--accent-color);
}

.process-step:hover {
    transform: translateX(10px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

.process-step-number {
    position: absolute;
    top: -15px;
    left: 20px;
    background: var(--accent-color);
    color: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.process-step h4 {
    color: var(--primary-color);
    font-weight: 600;
    margin-top: 10px;
}

.why-choose-card {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: all 0.3s ease;
}

.why-choose-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.why-choose-card .icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    color: white;
    font-size: 2rem;
}

.industries-badge {
    display: inline-block;
    background: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    margin: 5px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.industries-badge:hover {
    background: var(--accent-color);
    color: var(--primary-color);
    transform: scale(1.05);
}

.cta-box {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 50px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}

.cta-box h3 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.cta-box .btn-warning {
    background: var(--accent-color);
    color: var(--primary-color);
    border: none;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.cta-box .btn-warning:hover {
    background: white;
    transform: scale(1.05);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 1s ease-in;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 0;
    }

    .service-card {
        margin-bottom: 1rem;
    }

    .service-detail-hero h1 {
        font-size: 2rem;
    }

    .client-trust-section .section-title {
        font-size: 1.8rem;
    }
}
.text-contact{
    color: white !important;
}

.py-5 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}