/* 
 * Fanavar Steel - Custom CSS
 * Language Switcher Hover Styles and Additional UI Enhancements
 */


/* =====================================================
   TYPOGRAPHY - Inter Font System (Centralized)
   User preference: Inter (not Inter Tight) per demo audit
   ===================================================== */


/* Font import removed - fonts are loaded centrally from master.blade.php */


/* To change fonts, edit: resources/views/modules/site/templates/porto/layouts/master.blade.php */


/* Base body text - Typography controlled by fanavar-typography.css */

body,
.body,
p {
    /* font-family controlled centrally */
    font-weight: 400;
    font-size: 17px;
    line-height: 27px;
}

/* Scope: Porto template dark theme body background.
   Prevents white flash/bleed between dark sections during page load.
   Tested: all Porto pages (Home, About, Services, Products, Contact, FAQ).
   Does NOT affect: Workplace, Student, JobSeeker modules (they don't load custom.css). */
body {
    background-color: #0f0f0f;
}


/* Headings - Title style */

h1,
h2,
h3,
h4,
h5,
h6,

/* Typography controlled by fanavar-typography.css */

.custom-font-1,
.custom-font-2 {
    /* font-family controlled centrally */
    font-weight: 700;
}

h1,
.h1 {
    font-size: 45px;
    line-height: 54px;
}

h2,
.h2 {
    font-size: 38px;
    line-height: 46px;
}

h3,
.h3 {
    font-size: 32px;
    line-height: 40px;
}

h4,
.h4 {
    font-size: 26px;
    line-height: 34px;
}

h5,
.h5 {
    font-size: 22px;
    line-height: 30px;
}

h6,
.h6 {
    font-size: 18px;
    line-height: 26px;
}


/* Hero section title */

.custom-hero-font-1,

/* Typography controlled by fanavar-typography.css */

.hero h1,
.hero h2 {
    /* font-family controlled centrally */
    font-weight: 800;
    font-size: clamp(36px, 5vw, 60px);
    line-height: 1.2;
}

/* Home hero headline: regular weight only (overrides above for .hero-new-headline) */
.hero h1.hero-new-headline {
    font-weight: 400;
}


/* Hero section CTA */


/* Typography controlled by fanavar-typography.css */

.hero .btn,
.hero-cta {
    /* font-family controlled centrally */
    font-weight: 800;
    font-size: 15px;
    line-height: 15px;
}


/* =====================================================
   NAVIGATION MENU TYPOGRAPHY - Global (Highest Priority)
   Font: 700 weight, 26.1px size, 36px line-height, UPPERCASE
   ===================================================== */


/* Override all navigation menu text styles globally */

#header .header-nav-main nav>ul>li>a,
.header-nav-main nav>ul>li>a,
#header.header-transparent .header-nav-main nav>ul>li>a,
#header.header-transparent .header-nav-main nav>ul>li>a.nav-link,
#header.header-transparent .header-nav-main nav>ul>li>a.dropdown-item,
#header.header-transparent .header-nav-main nav>ul>li>a.dropdown-toggle,

/* Override demo-marketing-1.css header-nav-main-text-size-4 */

#header .header-nav-main.header-nav-main-text-size-4 nav>ul>li>a,
#header.header-transparent .header-nav-main.header-nav-main-text-size-4 nav>ul>li>a,

/* Override text-capitalize class - force uppercase */


/* Typography controlled by fanavar-typography.css */

#header .header-nav-main.header-nav-main-text-capitalize nav>ul>li>a,
#header.header-transparent .header-nav-main.header-nav-main-text-capitalize nav>ul>li>a {
    /* font-family controlled centrally */
    font-weight: 100 !important;
    font-size: 18px !important;
    line-height: 20px !important;
    /* letter-spacing: 0.02em; */
}


/* Ensure uppercase applies to all states */

#header .header-nav-main nav>ul>li>a:hover,
#header .header-nav-main nav>ul>li>a:focus,
#header .header-nav-main nav>ul>li>a.active,
#header.header-transparent .header-nav-main nav>ul>li>a:hover,
#header.header-transparent .header-nav-main nav>ul>li>a:focus,
#header.header-transparent .header-nav-main nav>ul>li>a.active {
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 20px !important;
}


/* Navigation menu buttons */


/* Typography controlled by fanavar-typography.css */

#header .btn,
.header-nav .btn,
.nav-link-custom-1 {
    /* font-family controlled centrally */
    font-weight: 800;
    font-size: 13px;
    line-height: 13px;
}


/* =====================================================
   MEGA DROPDOWN - Services Menu (FIX: Hover only on link text)
   ===================================================== */


/* CRITICAL FIX: Disable mega-menu-bg-hover effect that causes hover issues */

#header .header-nav-main-mega-menu-bg-hover .dropdown-mega:before {
    display: none !important;
}


/* Make dropdown only trigger on direct link hover, not area hover */

.dropdown-mega {
    position: relative !important;
}


/* Hide dropdown by default */

.dropdown-mega>.dropdown-menu,
.dropdown-mega .dropdown-menu-services {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}


/* Show dropdown ONLY when hovering the direct dropdown toggle link */

.dropdown-mega:hover>.dropdown-menu,
.dropdown-mega:hover .dropdown-menu-services,
.dropdown-mega>a:hover+.dropdown-menu,
.dropdown-mega>a:hover+.dropdown-menu-services,
.dropdown-mega>.dropdown-toggle:hover+.dropdown-menu,
.dropdown-mega>.dropdown-toggle:hover+.dropdown-menu-services,
.dropdown-mega.show>.dropdown-menu,
.dropdown-mega.show .dropdown-menu-services {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Keep dropdown visible when hovering the menu itself */

.dropdown-mega>.dropdown-menu:hover,
.dropdown-mega .dropdown-menu-services:hover {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dropdown-menu-services {
    width: 100%;
    max-width: 900px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin-left: 0;
    margin-right: 0;
    padding: 20px 25px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    margin-top: 5px;
    position: absolute !important;
    top: 100%;
    z-index: 1050;
}

.dropdown-mega-content {
    width: 100%;
}


/* Typography controlled by fanavar-typography.css */

.dropdown-mega-sub-title {
    display: block;
    /* font-family controlled centrally */
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 1px;
    color: #1a1a1a;
    padding-bottom: 10px;
    margin-bottom: 8px;
    border-bottom: 2px solid #FCDA03;
}

.dropdown-mega-sub-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}


/* Typography controlled by fanavar-typography.css */

.dropdown-mega-sub-nav li a {
    display: block;
    padding: 6px 0;
    /* font-family controlled centrally */
    font-weight: 500;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dropdown-mega-sub-nav li a:hover {
    color: #1a1a1a;
    padding-left: 5px;
}


/* Mega dropdown arrow indicator */

.dropdown-mega>a::after {
    content: '';
    display: inline-block;
    margin-left: 5px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    vertical-align: middle;
}


/* FIX: Ensure About dropdown works correctly too */

#header .header-nav-main nav>ul>li.dropdown:not(.dropdown-mega)>.dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
}

#header .header-nav-main nav>ul>li.dropdown:not(.dropdown-mega):hover>.dropdown-menu,
#header .header-nav-main nav>ul>li.dropdown:not(.dropdown-mega)>.dropdown-menu:hover {
    display: block;
    opacity: 1;
    visibility: visible;
}


/* Proper spacing to prevent overlap with other menu items */

#header .header-nav-main nav>ul>li.dropdown {
    position: relative;
}

#header .header-nav-main nav>ul>li.dropdown>.dropdown-menu {
    margin-top: 0;
}


/* Fix dropdown positioning - ensure dropdowns appear directly below menu items */

#header .header-nav-main nav>ul>li.dropdown:not(.dropdown-mega)>.dropdown-menu {
    margin-top: 0 !important;
    top: 100% !important;
}


/* FIX: Remove yellow highlighting from dropdown menu items - Professional look */

#header .header-nav-main nav>ul>li.dropdown .dropdown-menu li a:hover,
#header .header-nav-main nav>ul>li.dropdown .dropdown-menu li a:focus,
#header .header-nav-main nav>ul>li.dropdown .dropdown-menu li a.active,
#header .header-nav-main nav>ul>li.dropdown .dropdown-menu li:hover>a {
    background-color: #f8f9fa !important;
    color: var(--primary) !important;
    outline: none !important;
    box-shadow: none !important;
}


/* Remove focus outlines from all nav items */

#header .header-nav-main nav>ul>li>a:focus,
#header .header-nav-main nav>ul>li.dropdown>a:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* =====================================================
   SERVICE IMAGE ZOOM EFFECT - Ecomus Style
   ===================================================== */

.service-image-zoom {
    overflow: hidden;
    position: relative;
}

.service-image-zoom img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(1);
    will-change: transform;
}

.service-image-zoom:hover img {
    transform: scale(1.08);
}


/* Alternative zoom with motion */

.service-card-zoom {
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.service-card-zoom img {
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: scale(1) translate(0, 0);
}

.service-card-zoom:hover img {
    transform: scale(1.1) translate(2px, -2px);
}


/* Apply to portfolio/service items */

.thumb-info .thumb-info-wrapper,
.custom-thumb-info .thumb-info-wrapper,
.portfolio-item .thumb-info-wrapper {
    overflow: hidden;
}

.thumb-info .thumb-info-wrapper img,
.custom-thumb-info .thumb-info-wrapper img,
.portfolio-item .thumb-info-wrapper img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.thumb-info:hover .thumb-info-wrapper img,
.custom-thumb-info:hover .thumb-info-wrapper img,
.portfolio-item:hover .thumb-info-wrapper img {
    transform: scale(1.08);
}


/* Service Item Links Styling */

.service-item-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.service-item-link:hover {
    color: #818589;
    text-decoration: none;
}

.custom-list-services-1 .thumb-info-floating-element-wrapper {
    display: inline-block;
    width: 100%;
}

.custom-list-services-1 li {
    margin-bottom: 0.5rem;
}


/* Language Switcher Hover Styles */

.language-switcher-nav {
    position: relative;
}

.language-switcher-nav .nav-item.dropdown {
    position: static;
}

.language-switcher-nav .language-toggle {
    cursor: pointer;
    transition: color 0.3s ease;
}

.language-switcher-nav .language-toggle:hover {
    color: #818589 !important;
}

.language-switcher-nav .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    min-width: 120px;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 0.875rem;
    color: #212529;
    text-align: right;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    z-index: 1000;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}


/* Show dropdown on hover */

.language-switcher-nav .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

.language-switcher-nav .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.language-switcher-nav .dropdown-item:hover,
.language-switcher-nav .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

.language-switcher-nav .dropdown-item.active,
.language-switcher-nav .dropdown-item:active {
    color: var(--primary);
    text-decoration: none;
    background-color: #f0f0f0;
    font-weight: 600;
}


/* Dropdown animation */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Ensure the dropdown toggle shows pointer cursor */

.language-switcher-nav .language-toggle::after {
    display: none !important;
}


/* Mobile adjustments for language switcher */

@media (max-width: 991px) {
    .language-switcher-nav {
        display: none !important;
    }
}


/* Brand Badge Style */

.bg-brand-badge {
    background: linear-gradient(90deg, #818589, #5a5d61);
    color: #FCDA03 !important;
    border: 1px solid rgba(254, 254, 34, 0.3);
}


/* Contact Page - Professional Contact Cards - BRAND ALIGNED */


/* Primary Colors: Steel (#818589), Lemon Yellow (#FCDA03) */


/* Supporting: Black, White, Dark Steel */

.contact-card {
    background: #ffffff;
    /* White background for clean modern style */
    border: 1px solid #e0e0e0;
    /* Light gray border */
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.contact-card:hover {
    background: #f8f9fa;
    border-color: #818589;
    /* Steel color on hover */
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contact-card-primary {
    /* White background with subtle accent - NO BLUE */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    /* Light gray border */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.contact-card-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    /* Steel accent only - NO YELLOW */
    background: #818589;
    border-radius: 12px 12px 0 0;
}

.contact-card-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.contact-card-icon i {
    color: #818589 !important;
}


/* Force text visibility */

.contact-card h2,
.contact-card h3,
.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a !important;
    /* Dark text for white background */
    margin-bottom: 1rem;
    line-height: 1.3;
}

.contact-card p,
.section-subtitle {
    color: #4a4a4a !important;
    /* Dark gray for readability on white */
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.contact-info-item {
    padding-bottom: 1.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.contact-info-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.contact-info-icon {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    background: #f8f9fa;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #818589;
}

.contact-info-icon i {
    color: #818589 !important;
    /* Steel icons */
    font-size: 1.2rem;
}


/* Override button styles for visibility - Steel instead of Yellow */

.contact-card .btn-light,
.contact-card .btn-dark,
.contact-card .btn-modern {
    background: #818589 !important;
    border-color: #818589 !important;
    color: #ffffff !important;
    /* White text on steel */
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-card .btn-light:hover,
.contact-card .btn-dark:hover,
.contact-card .btn-modern:hover {
    background: #6a6e72 !important;
    border-color: #6a6e72 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(129, 133, 137, 0.3);
}

.contact-card .btn-outline-light {
    background: transparent !important;
    border-color: #818589 !important;
    color: #818589 !important;
}

.contact-card .btn-outline-light:hover {
    background: #818589 !important;
    color: #ffffff !important;
}


/* Form Styles */

.contact-card .form-control {
    background: #f8f9fa !important;
    border: 1px solid #e0e0e0 !important;
    color: #1a1a1a !important;
}

.contact-card .form-control:focus {
    border-color: #818589 !important;
    box-shadow: 0 0 0 0.2rem rgba(129, 133, 137, 0.15);
    outline: none;
}

.contact-card .form-control::placeholder {
    color: #999 !important;
}


/* Link Colors */

.contact-info-value {
    color: #ffffff !important;
    text-decoration: none;
}

.contact-info-value:hover {
    color: #818589 !important;
}


/* Map specific override */

.map-section {
    background: #2d2d2d;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 280px;
}

.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Dark overlay - no blue */
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.factory-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid #818589;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    color: #ffffff;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.factory-badge i {
    color: #818589;
}

.btn-factory {
    background: #818589;
    color: #ffffff;
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.btn-factory:hover {
    background: #6c757d;
    color: #ffffff;
}


/* Button overrides for submit */

.btn-submit-dark {
    background: #818589;
    /* Steel */
    color: #ffffff;
    border: none;
    width: 100%;
    padding: 1rem;
    font-weight: 600;
    border-radius: 8px;
}

.btn-submit-dark:hover {
    background: #6c757d;
    color: #ffffff;
}


/* Responsive adjustments for contact cards */

@media (max-width: 991px) {
    .contact-card {
        margin-bottom: 1rem;
    }
    .contact-card h2 {
        font-size: 1.25rem;
    }
}

@media (max-width: 767px) {
    .contact-card {
        padding: 1.5rem !important;
    }
    .contact-card-icon {
        justify-content: center;
    }
    .contact-card h2 {
        text-align: center;
    }
    .contact-card p {
        text-align: center;
    }
    .contact-info-item .d-flex {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }
    .contact-info-icon {
        margin-bottom: 1rem;
        margin-right: 0 !important;
    }
}


/* =====================================================
   INATTENTIONAL BLINDNESS COUNTERMEASURES
   High-contrast elements and strategic positioning
   ===================================================== */


/* =====================================================
   FLOATING WHATSAPP/CONTACT CTA
   Always visible, high contrast, positioned for attention
   ===================================================== */

.floating-cta {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
}

.floating-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    position: relative;
}

.floating-cta-btn.whatsapp {
    background-color: #25D366;
    color: #fff;
}

.floating-cta-btn.whatsapp:hover {
    background-color: #1ebe57;
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(37, 211, 102, 0.4);
}

.floating-cta-btn.directions {
    background-color: #818589;
    color: #fff;
    animation: floating-cta-vibrate 2.8s ease-in-out infinite;
    transform-origin: center;
    will-change: transform;
    /* Ensure animation is visible and smooth */
}

.floating-cta-btn.directions:hover {
    animation-play-state: paused;
    background-color: #6a6e72;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(129, 133, 137, 0.4);
}

.floating-cta-btn.quote {
    background-color: #FCDA03; /* Yellow / Secondary */
    color: #000;
}

.floating-cta-btn.quote:hover {
    background-color: #e5c602;
    transform: scale(1.1) !important;
    box-shadow: 0 6px 25px rgba(252, 218, 3, 0.4);
}

/* Ensure WhatsApp button also has attention-grabbing animation */
.floating-cta-btn.whatsapp {
    animation: floating-cta-pulse 2s ease-in-out infinite;
    will-change: transform;
}

.floating-cta-btn.whatsapp:hover {
    animation-play-state: paused;
    transform: scale(1.1) !important;
}

.floating-cta-btn.phone {
    background-color: var(--secondary);
    color: #000;
}

.floating-cta-btn.phone:hover {
    background-color: #e5e51f;
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(254, 254, 34, 0.4);
}


/* Pulse animation for attention - only apply to buttons without vibrate animation */

.floating-cta-btn:not(.directions)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse-ring 2s ease-out infinite;
    z-index: -1;
}

/* For directions button, use a separate pulse ring that doesn't conflict with vibrate */
.floating-cta-btn.directions::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    animation: pulse-ring-delayed 2.8s ease-out infinite;
    z-index: -1;
    opacity: 0.6;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

@keyframes pulse-ring-delayed {
    0%, 82% {
        transform: scale(1);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes floating-cta-vibrate {
    0%,
    82%,
    100% {
        transform: translateX(0) rotate(0deg);
    }
    84% {
        transform: translateX(-3px) rotate(-3deg);
    }
    86% {
        transform: translateX(3px) rotate(3deg);
    }
    88% {
        transform: translateX(-3px) rotate(-3deg);
    }
    90% {
        transform: translateX(3px) rotate(3deg);
    }
    92% {
        transform: translateX(-1.5px) rotate(-1.5deg);
    }
    94% {
        transform: translateX(1.5px) rotate(1.5deg);
    }
}

@keyframes floating-cta-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}


/* Tooltip on hover */

.floating-cta-btn .cta-tooltip {
    position: absolute;
    right: 70px;
    white-space: nowrap;
    background: #000;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.floating-cta-btn .cta-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: #000;
}

.floating-cta-btn:hover .cta-tooltip {
    opacity: 1;
    visibility: visible;
    right: 75px;
}


/* Mobile responsive */

@media (max-width: 767px) {
    .floating-cta {
        bottom: 16px;
        right: 16px;
        gap: 10px;
    }
    .floating-cta-btn {
        width: 52px;
        height: 52px;
        font-size: 24px;
    }
    .floating-cta-btn .cta-tooltip {
        display: none;
    }
}


/* =====================================================
   HERO SECTION - "FIRST" EMPHASIS
   Make "First" stand out as key differentiator
   ===================================================== */

.hero-first-badge {
    display: inline-flex;
    align-items: center;
    background: var(--secondary);
    color: #000;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    animation: badge-attention 3s ease-in-out infinite;
}

.hero-first-badge i {
    margin-right: 8px;
}

@keyframes badge-attention {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(254, 254, 34, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(254, 254, 34, 0);
    }
}


/* Highlight "First" in hero headline */

.text-first-emphasis {
    color: var(--secondary) !important;
    position: relative;
}


/* =====================================================
   TESTIMONIALS - Enhanced Source Visibility
   Make company names more prominent as trust signals
   ===================================================== */

.testimonial-source-prominent {
    display: inline-block;
    background: linear-gradient(90deg, var(--primary), var(--primary-100));
    color: #fff !important;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    
    letter-spacing: 0.5px;
}


/* Testimonial carousel - show client name prominently */

.custom-owl-carousel-1 strong.text-color-primary {
    display: inline-block;
    background: var(--secondary);
    color: #000 !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 13px;
    margin-top: 10px;
}


/* =====================================================
   BUTTON STANDARDIZATION - All buttons match hero section style
   Consistent 35px border-radius across all pages
   ===================================================== */


/* FAQ Page Buttons */

.faq-cta-btn {
    border-radius: 35px !important;
}

.faq-category-btn {
    border-radius: 35px !important;
}


/* =====================================================
   FAQ 2-COLUMN GRID LAYOUT - Ensure balanced pairs
   Fix: FAQ items should display in 2 equal columns
   ===================================================== */


/* Main FAQ accordion container - enforce 2-column grid */

.faq-accordion {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    max-width: 100% !important;
}


/* FAQ accordion items - ensure proper grid placement */

.faq-accordion-item {
    margin-bottom: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
}


/* Desktop: 2 columns */

@media (min-width: 992px) {
    .faq-accordion {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Equalize row heights for balanced pairs */
    .faq-accordion-item {
        align-self: start;
    }
}


/* Tablet: 2 columns if items fit */

@media (min-width: 768px) and (max-width: 991px) {
    .faq-accordion {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}


/* Mobile: Single column */

@media (max-width: 767px) {
    .faq-accordion {
        grid-template-columns: 1fr !important;
    }
}


/* RTL FAQ accordion - icon on right (start) */

html[dir="rtl"] .faq-accordion-header {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .faq-accordion-icon {
    margin-left: 12px !important;
    margin-right: 0 !important;
}

/* Base FAQ accordion question style - remove uppercase transform */
.faq-accordion-question {
    text-transform: none !important;
}

html[dir="rtl"] .faq-accordion-question {
    text-align: right !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* =====================================================
   TESTIMONIAL FONT SIZES - Fix ~12px readability issue
   Increase minimum font size for comfortable reading
   ===================================================== */


/* Testimonial author handle/name - increase from ~12px */

.testimonial-author strong,
.testimonial-author .author-name,
.testimonial .testimonial-author strong {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.testimonial .testimonial-author {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.testimonial .testimonial-author p {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.testimonial .testimonial-body {
    font-size: 16px !important;
    line-height: 1.7 !important;
}


/* =====================================================
   RTL MARQUEE VISIBILITY FIX
   Ensure items visible in RTL DOM, correct animation
   ===================================================== */


/* Marquee container - RTL safe */

html[dir="rtl"] .marquee {
    direction: rtl;
}

html[dir="rtl"] .marquee .marquee__content {
    animation-direction: normal !important;
    /* Reset to normal direction for RTL */
}

html[dir="rtl"] .marquee[data-direction="rtl"] .marquee__content {
    animation-direction: reverse !important;
    /* Reverse when explicitly marked RTL */
}


/* Ensure marquee items are visible */

.marquee .marquee__content {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

html[dir="rtl"] .marquee .marquee__content {
    flex-direction: row-reverse;
}


/* Marquee links - ensure clickable area */

.marquee-link {
    display: inline-block;
    padding: 0.25rem 0.5rem;
}


/* =====================================================
   PASHTO FONT SIZING - Standardize RTL desktop fonts
   Increase Pashto fonts to match Dari readability
   ===================================================== */


/* Pashto desktop base font size - increase for readability */

html[lang="ps"] body,
html[lang="ps"] p,
html[lang="ps"] .text-4 {
    font-size: 24px !important;
    line-height: 38px !important;
}

html[lang="ps"] h1,
html[lang="ps"] .h1 {
    font-size: 56px !important;
    line-height: 64px !important;
}

html[lang="ps"] h2,
html[lang="ps"] .h2 {
    font-size: 48px !important;
    line-height: 56px !important;
}

html[lang="ps"] h3,
html[lang="ps"] .h3 {
    font-size: 40px !important;
    line-height: 48px !important;
}

html[lang="ps"] h4,
html[lang="ps"] .h4 {
    font-size: 32px !important;
    line-height: 40px !important;
}

html[lang="ps"] h5,
html[lang="ps"] .h5 {
    font-size: 28px !important;
    line-height: 36px !important;
}

html[lang="ps"] h6,
html[lang="ps"] .h6 {
    font-size: 24px !important;
    line-height: 32px !important;
}


/* Pashto navigation - ensure visibility (main nav + dropdown done in header.blade.php) */

html[lang="ps"] #header .header-nav-main nav>ul>li>a {
    font-size: 1.25rem !important;
}

html[lang="ps"] .mobile-menu-list,
html[lang="ps"] .mobile-submenu-list {
    font-size: 22px !important;
}

html[lang="ps"] .mobile-menu-link,
html[lang="ps"] .mobile-submenu-link {
    font-size: 22px !important;
    line-height: 1.6 !important;
}

html[lang="ps"] .mobile-submenu-category {
    font-size: 24px !important;
    font-weight: 700 !important;
}


/* =====================================================
   TOP BAR RTL DIRECTION FIX
   Enforce direction: rtl and correct flex order for FA/PS
   ===================================================== */


/* Top bar container - enforce RTL direction */

html[dir="rtl"] .top-bar,
html[dir="rtl"] #top-bar {
    direction: rtl !important;
}

html[dir="rtl"] .top-bar .row,
html[dir="rtl"] #top-bar .row {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .top-bar [class*="col-"],
html[dir="rtl"] #top-bar [class*="col-"] {
    text-align: right !important;
}

html:not([dir="rtl"]) .top-bar [class*="col-"],
html:not([dir="rtl"]) #top-bar [class*="col-"] {
    text-align: left !important;
}


/* =====================================================
   MOBILE MENU OVERLAY - Z-INDEX & POSITIONING
   CRITICAL: Must be above sticky contact bar (z-index 9999)
   ===================================================== */

.mobile-menu-overlay {
    z-index: 10001 !important;
    /* Above sticky bar */
    padding-top: 50px !important;
    /* Push content below sticky bar */
}

.mobile-menu-overlay.active {
    z-index: 10001 !important;
}

.mobile-submenu-panel {
    z-index: 10002 !important;
    /* Above mobile menu overlay */
    padding-top: 50px !important;
}

.mobile-submenu-panel.active {
    z-index: 10002 !important;
}


/* =====================================================
   MOBILE SUBMENU WITH IMAGES
   Premium mobile experience matching desktop dropdowns
   ===================================================== */

.mobile-submenu-with-images {
    padding: 0.5rem;
}

.mobile-submenu-image-item {
    margin-bottom: 0.5rem;
}

.mobile-submenu-image-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none !important;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.mobile-submenu-image-link:hover,
.mobile-submenu-image-link:active {
    background: rgba(252, 218, 3, 0.15);
    border-left-color: var(--secondary, #FCDA03);
    color: #fff !important;
}

.mobile-submenu-image-wrapper {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.mobile-submenu-image-wrapper img {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.mobile-submenu-image-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mobile-submenu-image-title {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
}

.mobile-submenu-image-desc {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.3;
    white-space: nowrap;
}

.mobile-submenu-view-all {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-submenu-view-all a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    color: var(--secondary, #FCDA03) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    
    letter-spacing: 0.5px;
}

.mobile-submenu-view-all a i {
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

.mobile-submenu-view-all a:hover i {
    transform: translateX(4px);
}


/* RTL Mobile Submenu with Images */

html[dir="rtl"] .mobile-submenu-image-link {
    flex-direction: row-reverse;
    border-left: none;
    border-right: 3px solid transparent;
}

html[dir="rtl"] .mobile-submenu-image-link:hover,
html[dir="rtl"] .mobile-submenu-image-link:active {
    border-left-color: transparent;
    border-right-color: var(--secondary, #FCDA03);
}

html[dir="rtl"] .mobile-submenu-image-wrapper {
    margin-right: 0;
    margin-left: 1rem;
}

html[dir="rtl"] .mobile-submenu-image-text {
    text-align: right;
}

html[dir="rtl"] .mobile-submenu-view-all a i {
    margin-left: 0;
    margin-right: 0.5rem;
    transform: rotate(180deg);
}

html[dir="rtl"] .mobile-submenu-view-all a:hover i {
    transform: translateX(-4px) rotate(180deg);
}


/* Pashto/Persian typography in mobile submenu */

html[lang="ps"] .mobile-submenu-image-title {
    font-size: 20px;
    font-weight: 700;
}

html[lang="ps"] .mobile-submenu-image-desc {
    font-size: 18px;
}

html[lang="fa"] .mobile-submenu-image-title {
    font-size: 16px;
    font-weight: 600;
}

html[lang="fa"] .mobile-submenu-image-desc {
    font-size: 13px;
}


/* =====================================================
   MOBILE MENU CLOSE BUTTON POSITIONING
   Position close button at same spot as hamburger trigger
   ===================================================== */


/* Mobile menu header - position close button appropriately */

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}


/* =====================================================
   MOBILE MENU CLOSE BUTTON POSITIONING
   CRITICAL: Close button must appear at SAME position as hamburger trigger
   LTR: Hamburger on LEFT → Close on LEFT
   RTL: Hamburger on RIGHT → Close on RIGHT
   ===================================================== */


/* Base mobile menu header - no justify-content, use margins for positioning */

.mobile-menu-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 20px !important;
}


/* LTR: Close on LEFT, Logo on RIGHT */

html:not([dir="rtl"]) .mobile-menu-close {
    order: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html:not([dir="rtl"]) .mobile-menu-logo {
    order: 1 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* RTL: Logo on LEFT, Close on RIGHT - use explicit LTR direction */

html[dir="rtl"] .mobile-menu-header {
    direction: ltr !important;
    /* Force LTR inside the header */
}

html[dir="rtl"] .mobile-menu-logo {
    order: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .mobile-menu-close {
    order: 1 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* Mobile submenu header - consistent close button positioning */

.mobile-submenu-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    width: 100% !important;
}


/* LTR: Back on LEFT, Title CENTER, Close on RIGHT */

html:not([dir="rtl"]) .mobile-submenu-back {
    order: 1 !important;
}

html:not([dir="rtl"]) .mobile-submenu-title {
    order: 2 !important;
    flex: 1;
    text-align: center;
}

html:not([dir="rtl"]) .mobile-submenu-header .mobile-menu-close {
    order: 3 !important;
}


/* RTL: Back on LEFT (with arrow), Title CENTER, Close on RIGHT */

html[dir="rtl"] .mobile-submenu-back {
    order: 1 !important;
}

html[dir="rtl"] .mobile-submenu-title {
    order: 2 !important;
    flex: 1;
    text-align: center;
}

html[dir="rtl"] .mobile-submenu-header .mobile-menu-close {
    order: 3 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Ensure RTL submenu header uses row direction and shows all elements */

html[dir="rtl"] .mobile-submenu-header {
    direction: ltr !important;
    display: flex !important;
    width: 100% !important;
    padding: 15px 20px !important;
    gap: 10px;
}

html[dir="rtl"] .mobile-submenu-back i {
    transform: rotate(180deg);
}

html[dir="rtl"] .mobile-submenu-back {
    margin-right: 0;
    margin-left: 0;
}

html[dir="rtl"] .mobile-submenu-title {
    margin-left: 0;
    margin-right: 0;
}


/* =====================================================
   MOBILE MENU RTL FONTS
   Increase Pashto/Persian fonts for RTL mobile menu
   ===================================================== */


/* RTL mobile menu - larger fonts */

html[dir="rtl"] .mobile-menu-list,
html[dir="rtl"] .mobile-submenu-list {
    font-size: 17px !important;
}

html[dir="rtl"] .mobile-menu-link,
html[dir="rtl"] .mobile-submenu-link {
    font-size: 17px !important;
    line-height: 1.8 !important;
    padding: 12px 20px !important;
}

html[dir="rtl"] .mobile-submenu-category {
    font-size: 19px !important;
    font-weight: 700 !important;
    padding: 15px 20px 10px !important;
}


/* =====================================================
   FOOTER SOCIAL ICONS STYLING
   Ensure proper appearance with outlined icons
   ===================================================== */

.footer-social-icons {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
}

html[dir="rtl"] .footer-social-icons {
    justify-content: flex-end;
}

.footer-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: inherit;
    font-size: 18px;
    transition: all 0.3s ease;
    background: transparent;
}

.footer-social-icon:hover,
.footer-social-icon:focus {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
}

.footer-social-icon svg {
    width: 18px;
    height: 18px;
}


/* =====================================================
   HERO SECTION RTL BUTTONS
   Ensure buttons match English version positioning
   ===================================================== */


/* Hero section buttons - RTL consistent positioning */

.hero .btn,
.hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

html[dir="rtl"] .hero .btn i:last-child:not(:first-child),
html[dir="rtl"] .hero-cta i:last-child:not(:first-child) {
    margin-left: 0;
    margin-right: 0.5rem;
    transform: rotate(180deg);
}

html[dir="rtl"] .hero .btn i:first-child:not(:last-child),
html[dir="rtl"] .hero-cta i:first-child:not(:last-child) {
    margin-right: 0;
    margin-left: 0.5rem;
}

html[dir="rtl"] .hero .btn,
html[dir="rtl"] .hero-cta {
    text-align: center;
}


/* =====================================================
   CONTACT PAGE RTL CONSISTENCY
   Fix contact form and info layout for RTL
   ===================================================== */

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

html[dir="rtl"] .contact-info-item {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .contact-info-icon {
    flex-shrink: 0;
}

html[dir="rtl"] .contact-form .form-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .contact-form label {
    text-align: right;
}

html[dir="rtl"] .contact-form .invalid-feedback {
    text-align: right;
}


/* =====================================================
   GLOBAL RTL/LTR CONSISTENCY - Porto Pattern
   Follow Porto template provider's RTL approach:
   - Let Bootstrap handle RTL utilities naturally
   - Use targeted fixes only where needed
   - Use transform/rotate for icons instead of reordering
   ===================================================== */


/* Ensure html/head/body have correct direction - Bootstrap handles this */

html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

/* About Us hero (#ca-hero): ensure content column and text align right in RTL */
html[dir="rtl"] #ca-hero.powder-coating-hero .container .row .col-lg-7,
html[dir="rtl"] #ca-hero.powder-coating-hero .hero-new-headline,
html[dir="rtl"] #ca-hero.powder-coating-hero .hero-new-subheadline,
html[dir="rtl"] #ca-hero.powder-coating-hero .hero-new-trust,
html[dir="rtl"] #ca-hero.powder-coating-hero .hero-new-trust-stat,
html[dir="rtl"] #ca-hero.powder-coating-hero p {
    text-align: right !important;
}

/* RTL: offset-lg-1 pushes content left; remove so content aligns from right */
html[dir="rtl"] #ca-hero .offset-lg-1 {
    margin-inline-start: 0 !important;
}

/* RTL: reverse row so content (order-1) appears on right */
html[dir="rtl"] #ca-hero .row.align-items-center {
    flex-direction: row-reverse;
}


/* Bootstrap .row already handles RTL flex-direction, no override needed */

html[dir="rtl"] .row {
    /* Bootstrap 5 handles this automatically in RTL mode */
}


/* Only override specific flex layouts that need adjustment */


/* NOTE: .header-row RTL handling uses order-based positioning (not row-reverse) */


/* =====================================================
   RTL FONT SIZES - Increase Pashto/Persian for readability
   Fix: PS/FA fonts too small on desktop and mobile
   ===================================================== */


/* Base font size increase for RTL languages - Pashto and Persian */

html[dir="rtl"] body,
html[dir="rtl"] .body,
html[dir="rtl"] p,
html[dir="rtl"] .faq-accordion-body {
    font-size: 18px !important;
    line-height: 1.8 !important;
}


/* RTL headings - proportionally increased */

html[dir="rtl"] h1,
html[dir="rtl"] .h1 {
    font-size: 42px !important;
    line-height: 1.2 !important;
}

html[dir="rtl"] h2,
html[dir="rtl"] .h2 {
    font-size: 35px !important;
    line-height: 1.3 !important;
}

html[dir="rtl"] h3,
html[dir="rtl"] .h3 {
    font-size: 29px !important;
    line-height: 1.35 !important;
}

html[dir="rtl"] h4,
html[dir="rtl"] .h4 {
    font-size: 24px !important;
    line-height: 1.4 !important;
}

html[dir="rtl"] h5,
html[dir="rtl"] .h5 {
    font-size: 20px !important;
    line-height: 1.45 !important;
}

html[dir="rtl"] h6,
html[dir="rtl"] .h6 {
    font-size: 17px !important;
    line-height: 1.5 !important;
}


/* RTL navigation - ensure readability */

html[dir="rtl"] .header-nav-main nav>ul>li>a {
    font-size: 14px !important;
    line-height: 22px !important;
}


/* RTL mobile menu - larger fonts */

html[dir="rtl"] .mobile-menu-list,
html[dir="rtl"] .mobile-submenu-list {
    font-size: 18px !important;
}

html[dir="rtl"] .mobile-menu-link,
html[dir="rtl"] .mobile-submenu-link {
    font-size: 18px !important;
    line-height: 1.8 !important;
    padding: 14px 24px !important;
}

html[dir="rtl"] .mobile-submenu-category {
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 18px 24px 12px !important;
}


/* RTL FAQ accordion - improved readability */

html[dir="rtl"] .faq-accordion-question {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

html[dir="rtl"] .faq-accordion-body {
    font-size: 17px !important;
    line-height: 1.9 !important;
}


/* RTL footer - increased for readability */

html[dir="rtl"] .footer {
    font-size: 16px !important;
}

html[dir="rtl"] .footer p,
html[dir="rtl"] .footer a {
    font-size: 16px !important;
}


/* RTL form inputs - larger text */

html[dir="rtl"] .form-control {
    font-size: 17px !important;
    padding: 12px 16px !important;
}


/* RTL buttons - larger text */

html[dir="rtl"] .btn {
    font-size: 16px !important;
}


/* =====================================================
   PASHPHTO SPECIFIC FONT ADJUSTMENTS
   Additional increases for Pashto script specifically
   ===================================================== */


/* Pashto-specific overrides - even larger for better Pashto rendering */

html[lang="ps"] body,
html[lang="ps"] .body,
html[lang="ps"] p,
html[lang="ps"] .faq-accordion-body {
    font-size: 24px !important;
    line-height: 1.9 !important;
}

html[lang="ps"] h1,
html[lang="ps"] .h1 {
    font-size: 56px !important;
}

html[lang="ps"] h2,
html[lang="ps"] .h2 {
    font-size: 48px !important;
}

html[lang="ps"] h3,
html[lang="ps"] .h3 {
    font-size: 40px !important;
}

html[lang="ps"] h4,
html[lang="ps"] .h4 {
    font-size: 32px !important;
}

html[lang="ps"] .mobile-menu-link,
html[lang="ps"] .mobile-submenu-link {
    font-size: 24px !important;
    padding: 15px 26px !important;
}

html[lang="ps"] .faq-accordion-question {
    font-size: 24px !important;
}


/* =====================================================
   PERSIAN/DARI SPECIFIC FONT ADJUSTMENTS
   Specific increases for Persian script
   ===================================================== */


/* Persian-specific overrides */

html[lang="fa"] body,
html[lang="fa"] .body,
html[lang="fa"] p,
html[lang="fa"] .faq-accordion-body {
    font-size: 18px !important;
    line-height: 1.85 !important;
}

html[lang="fa"] .mobile-menu-link,
html[lang="fa"] .mobile-submenu-link {
    font-size: 18px !important;
    padding: 14px 24px !important;
}

html[lang="fa"] .faq-accordion-question {
    font-size: 18px !important;
}


/* =====================================================
   PRODUCT SPEC TABLES - Zebra styling with borders
   Fix: Full HTML spec tables with zebra/borders
   ===================================================== */


/* Product spec table container */

.product-specs-table {
    margin-bottom: 2rem;
}


/* Main spec table - zebra styling with borders */

.product-specs-table .table,
.table.product-specs-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 15px;
}


/* Zebra striping */

.product-specs-table .table tbody tr:nth-of-type(odd),
.table.product-specs-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.product-specs-table .table tbody tr:nth-of-type(even),
.table.product-specs-table tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 1);
}


/* Full borders on all sides */

.product-specs-table .table-bordered,
.table.product-specs-table.table-bordered {
    border: 1px solid #dee2e6;
}

.product-specs-table .table-bordered th,
.product-specs-table .table-bordered td,
.table.product-specs-table.table-bordered th,
.table.product-specs-table.table-bordered td {
    border: 1px solid #dee2e6;
}


/* Header styling */

.product-specs-table .table thead th,
.table.product-specs-table thead th {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    font-weight: 700;
    
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    border: 1px solid #1a1a1a;
}


/* Cell styling */

.product-specs-table .table td,
.table.product-specs-table td {
    padding: 14px 20px;
    vertical-align: middle;
    line-height: 1.6;
}


/* First column bold */

.product-specs-table .table td:first-child,
.table.product-specs-table td:first-child {
    font-weight: 700;
    color: #1a1a1a;
    background-color: rgba(0, 0, 0, 0.03);
    width: 35%;
}


/* Hover effect */

.product-specs-table .table tbody tr:hover,
.table.product-specs-table tbody tr:hover {
    background-color: rgba(129, 133, 137, 0.08) !important;
}


/* Quick specs card table */

.quick-specs-card .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.quick-specs-card .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 1);
}

.quick-specs-card .table td {
    padding: 12px 16px;
    font-size: 14px;
}

.quick-specs-card .table td:first-child {
    width: 45%;
    font-weight: 700;
    color: #1a1a1a;
}


/* =====================================================
   PDF DOWNLOAD BUTTON - Ensure proper styling
   ===================================================== */

.product-pdf-download {
    transition: all 0.3s ease;
}

.product-pdf-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
}

.product-pdf-download i {
    transition: transform 0.3s ease;
}

.product-pdf-download:hover i {
    transform: scale(1.1);
}


/* RTL spec tables */

html[dir="rtl"] .product-specs-table .table td:first-child,
html[dir="rtl"] .table.product-specs-table td:first-child {
    text-align: right;
    background-color: rgba(0, 0, 0, 0.03);
}

html[dir="rtl"] .product-specs-table .table thead th,
html[dir="rtl"] .table.product-specs-table thead th {
    text-align: right;
}


/* DO NOT override Bootstrap's .text-start / .text-end
   Bootstrap 5 RTL automatically handles these utilities
   Override causes conflicts with Bootstrap's built-in RTL support */


/* DO NOT override .ms-auto / .me-auto
   Bootstrap handles margin utilities automatically in RTL */


/* DO NOT override .ps-* / .pe-* padding utilities
   Bootstrap handles spacing automatically in RTL */


/* Mobile Menu Submit Button */

.mobile-menu-form-submit {
    border-radius: 35px !important;
}


/* Contact Page and Form Submit Buttons */

.btn.btn-primary:not(.btn-rounded),
.btn.btn-secondary:not(.btn-rounded),
input[type="submit"].btn:not(.btn-rounded),
.btn.rounded-pill {
    border-radius: 35px !important;
}


/* Ensure form submit buttons and standard buttons get rounded */

input[type="submit"].btn:not(.btn-rounded):not(.btn-circle):not(.btn-rounded-icon),
button.btn:not(.btn-rounded):not(.btn-circle):not(.btn-rounded-icon):not(.floating-cta-btn),
.btn.btn-primary:not(.btn-rounded):not(.btn-circle),
.btn.btn-secondary:not(.btn-rounded):not(.btn-circle) {
    border-radius: 35px;
}


/* =====================================================
   PORTO: ALL BUTTONS ROUNDED (35px pill style)
   Applies to standard .btn and custom button classes
   across resources/views/modules/site/templates/porto/
   ===================================================== */

/* Standard Bootstrap/Porto buttons */
.btn,
a.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
    border-radius: 35px !important;
}

/* Custom button classes used in Porto Blade views */
.wsd-btn,
.porto-btn,
.fp-btn-more,
.cs-btn,
.cutting-sticky-btn,
.fire-door-sticky-btn,
.signage-sticky-btn,
.elv-emergency-btn,
.elv-sticky-btn,
.atd-btn,
.cta-button,
.hp-floating-cta__btn,
.cta-contact-btn,
.video-play-btn,
.color-card-btn,
.cp-btn,
.btn-primary-yellow,
.btn-outline-white,
.filter-btn,
.porto-filter-tab,
.mobile-lang-btn,
.replay-btn,
.hp-factory-cta,
.hp-factory-cta-secondary,
.hp-video-duration-badge,
.fs-form-submit {
    border-radius: 35px !important;
}

/* Circular icon buttons (floating CTA, color picker icons, gallery arrows, video play overlay) */
.floating-cta-btn,
.color-icon-btn,
.atd-gallery__btn,
.video-play-btn {
    border-radius: 50% !important;
}

/* Page-specific overrides: Projects, Contact, Services, etc. with scoped border-radius */
.projects-page .btn,
.projects-page .porto-btn,
.projects-page button[type="submit"],
.projects-page .project-card-cta,
#contact .porto-btn,
#contact button[type="submit"],
#signage-page .cs-btn,
#fire-door-page .cs-btn,
#wood-steel-page .wsd-btn,
#anti-theft-page .atd-btn {
    border-radius: 35px !important;
}

/* Inline-styled CTA links (faq, contact, services-cinematic, products-cinematic, etc.) */
a[style*="inline-flex"][style*="padding"] {
    border-radius: 35px !important;
}


/* Add black thin borders to buttons on white/grey backgrounds */


/* Default: Add borders to all standard buttons */

.btn.btn-primary:not(.btn-dark):not(.btn-light),
.btn.btn-secondary:not(.btn-dark):not(.btn-light),
.btn.btn-modern:not(.btn-dark):not(.btn-light),
.faq-cta-btn,
input[type="submit"].btn:not(.btn-dark):not(.btn-light),
button.btn:not(.floating-cta-btn):not(.btn-dark):not(.btn-light),
.custom-bg-color-1 .btn.btn-primary,
.custom-bg-color-1 .btn.btn-secondary,
.custom-bg-color-1 .btn.btn-modern,
.custom-bg-color-1 input[type="submit"].btn,
section.custom-bg-color-1 .btn.btn-primary,
section.custom-bg-color-1 .btn.btn-secondary,
section.custom-bg-color-1 .btn.btn-modern,
section.custom-bg-color-1 input[type="submit"].btn {
    border: 1px solid #000 !important;
}


/* Remove borders for buttons on dark backgrounds - Higher specificity */

.bg-dark .btn,
.bg-dark .btn.btn-primary,
.bg-dark .btn.btn-secondary,
.bg-dark .btn.btn-modern,
.bg-dark input[type="submit"].btn,
.bg-dark button.btn,
footer.bg-dark .btn,
[style*="background-color: #1a1a1a"] .btn,
[style*="background-color: #000"] .btn,
[style*="background-color: #000000"] .btn,
section.bg-dark .btn,
section[style*="background-color: #1a1a1a"] .btn,
section[style*="background-color: #000"] .btn {
    border-color: transparent !important;
    border: none !important;
}


/* =====================================================
   ACTIVE PAGE INDICATOR - Navigation Highlighting
   Shows which page user is currently on
   ===================================================== */

.nav-link.active {
    position: relative;
    color: var(--secondary) !important;
    font-weight: 700 !important;
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background-color: var(--secondary);
    border-radius: 2px;
}


/* Mobile menu active indicator */

.mobile-menu-link.active {
    color: var(--secondary) !important;
    font-weight: 700 !important;
}

.mobile-menu-link.active::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background-color: var(--secondary);
    border-radius: 2px 0 0 2px;
}


/* =====================================================
   FOOTER ACTIVE STATE - Main Nav Pop Effect (No Dots/Underlines)
   Shows which page user is currently on in footer navigation
   Brand-compliant: Yellow + glow like main nav (no dot, no underline)
   ===================================================== */

.footer-main a.active,
.footer-copyright a.active {
    color: var(--secondary, #FCDA03) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    text-shadow: 0 0 8px rgba(252, 218, 3, 0.4), 0 0 16px rgba(252, 218, 3, 0.2) !important;
    text-decoration: none !important;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-main a.active:hover,
.footer-main a.active:focus {
    color: var(--secondary, #FCDA03) !important;
    text-shadow: 0 0 8px rgba(252, 218, 3, 0.4), 0 0 16px rgba(252, 218, 3, 0.2) !important;
}

/* Copyright bar: yellow background - use dark text for active (contrast) */
.footer-copyright a.active,
.footer-copyright a.active:hover,
.footer-copyright a.active:focus {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}


/* =====================================================
   FOOTER CONTACT COLUMN - Icon-Enhanced Contact Info
   Brand-compliant styling with icons on left
   ===================================================== */

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact-item {
    margin-bottom: 0.75rem;
}

.footer-contact-item:last-child {
    margin-bottom: 0;
}

.footer-contact-icon {
    color: var(--primary, #818589);
    font-size: 1rem;
    width: 20px;
    min-width: 20px;
    margin-right: 0.75rem;
    flex-shrink: 0;
    text-align: center;
}

.footer-contact-item a {
    transition: all 0.2s ease;
    line-height: 1.5;
}

.footer-contact-item a:hover {
    opacity: 1 !important;
}

.footer-contact-item a:hover .footer-contact-icon {
    color: var(--secondary, #FCDA03);
    transform: scale(1.1);
}

.footer-contact-item a span {
    word-break: break-word;
    flex: 1;
}


/* Mobile optimization for contact items */

@media (max-width: 767px) {
    .footer-contact-icon {
        font-size: 0.9rem;
        width: 18px;
        min-width: 18px;
        margin-right: 0.5rem;
    }
    .footer-contact-item {
        margin-bottom: 0.5rem;
    }
}


/* =====================================================
   FOOTER TYPOGRAPHY ENHANCEMENTS
   Larger, bolder text for Follow Us, Factory Name, Social Links
   ===================================================== */

.footer-top h4 {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}

.footer-top .text-dark.text-4[style*="font-weight: 700"] {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
}

.footer-top .text-dark.text-2 {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
}

.footer-top .fab,
.footer-top .fas {
    font-size: 1.75rem !important;
}


/* =====================================================
   MAP ICON PULSE EFFECT
   Heartbeat/pulse animation to show it's clickable
   ===================================================== */

@keyframes mapIconPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(254, 254, 34, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(254, 254, 34, 0);
    }
}

.footer-map-icon {
    animation: mapIconPulse 2s ease-in-out infinite;
}

.footer-map-icon:hover {
    animation: none;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}


/* =====================================================
   CTA BUTTONS - Higher Contrast
   Primary actions should be unmissable
   ===================================================== */

.btn-cta-primary {
    background: var(--secondary) !important;
    color: #000 !important;
    border: 2px solid var(--secondary) !important;
    font-weight: 700;
    padding: 14px 28px;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-cta-primary:hover {
    background: #e5e51f !important;
    border-color: #e5e51f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(254, 254, 34, 0.3);
}


/* Form submit button - high contrast */

.contact-form input[type="submit"],
.contact-form button[type="submit"] {
    background: var(--secondary) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700 !important;
    transition: all 0.3s ease;
}

.contact-form input[type="submit"]:hover,
.contact-form button[type="submit"]:hover {
    background: #e5e51f !important;
    transform: translateY(-2px);
}


/* =====================================================
   STATS/NUMBERS - Improved Visibility
   Trust signals that must be seen
   ===================================================== */

.bg-dark .custom-highlight-text-1 {
    color: var(--secondary) !important;
    font-weight: 800;
}

.bg-dark .text-grey {
    color: rgba(255, 255, 255, 0.75) !important;
}


/* =====================================================
   "FIRST IN AFGHANISTAN" BADGE
   Key differentiator badge for multiple pages
   ===================================================== */

.first-in-afghanistan-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--secondary);
    color: #000;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    
    letter-spacing: 0.8px;
    box-shadow: 0 4px 15px rgba(254, 254, 34, 0.3);
}

.first-in-afghanistan-badge i {
    font-size: 16px;
}


/* =====================================================
   AFTER-SALES SERVICE BADGE (Process Page)
   Highlight unique differentiator
   ===================================================== */

.differentiator-badge {
    display: inline-block;
    background: var(--secondary);
    color: #000;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    
    letter-spacing: 0.5px;
    margin-left: 10px;
    vertical-align: middle;
}


/* =====================================================
   CONTACT FORM CARD - Consistent with other cards
   All cards now use contact-card-primary for uniformity
   ===================================================== */


/* =====================================================
   FIX #1: IMPACT NUMBERS - Proper spacing to prevent overlap
   ===================================================== */

.custom-highlight-text-1 {
    font-size: clamp(32px, 4vw, 52px) !important;
    letter-spacing: 0.01em !important;
    margin-right: 6px;
    line-height: 1.1;
}


/* Better responsive sizing for impact numbers */

@media (max-width: 1199px) {
    .custom-highlight-text-1 {
        font-size: clamp(28px, 3.5vw, 44px) !important;
    }
}

@media (max-width: 991px) {
    .custom-highlight-text-1 {
        font-size: clamp(36px, 8vw, 52px) !important;
        margin-bottom: 10px;
    }
    /* Stack impact numbers on mobile */
    .bg-dark .row .col-lg-6.col-xl-4,
    .bg-dark .row .col-xl-4 {
        margin-bottom: 2rem;
        padding-bottom: 2rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .bg-dark .row .col-lg-6.col-xl-4:last-child,
    .bg-dark .row .col-xl-4:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .custom-highlight-text-1 {
        font-size: clamp(32px, 10vw, 48px) !important;
    }
}


/* =====================================================
   FIX #2: FOOTER MOBILE/TABLET RESPONSIVENESS
   ===================================================== */


/* Footer responsive - 2 column layout on tablet */

@media (min-width: 576px) and (max-width: 991px) {
    #footer .row>.col-lg-7 {
        width: 100%;
    }
    #footer .row.mt-5 {
        display: flex;
        flex-wrap: wrap;
    }
    #footer .row.mt-5>.col-lg-4 {
        width: 50% !important;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 1.5rem;
    }
    #footer .row.mt-5>.col-xl-4 {
        width: 100% !important;
        flex: 0 0 100%;
        max-width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    #footer .row.mt-5>.col-xl-4 .btn-social {
        min-width: auto;
        flex: 0 0 auto;
    }
    #footer h3.custom-font-1 {
        font-size: clamp(24px, 5vw, 40px);
        text-align: center;
    }
    #footer .btn.btn-modern {
        display: block;
        margin: 0 auto 1rem;
        text-align: center;
    }
    /* Hide cascading images on tablet for cleaner look */
    #footer .col-lg-5 {
        display: none;
    }
}

@media (max-width: 575px) {
    #footer .row.mt-5>.col-lg-4,
    #footer .row.mt-5>.col-xl-4 {
        width: 100% !important;
        text-align: center;
    }
    #footer h4.text-8 {
        margin-top: 1.5rem;
    }
    #footer .col-lg-5 {
        display: none;
    }
}


/* =====================================================
   FIX #3: "EMPOWERING INDUSTRIES" - Yellow bg needs dark text
   ===================================================== */


/* Override bg-gradient text color for readability */

.bg-gradient .text-light,
.bg-gradient h3.text-light,
.custom-bg-gradient-1 .text-light,
.custom-bg-gradient-1 h3.text-light {
    color: #000 !important;
}

.bg-gradient .opacity-7,
.bg-gradient p.text-light.opacity-7,
.custom-bg-gradient-1 .opacity-7 {
    color: rgba(0, 0, 0, 0.75) !important;
    opacity: 1 !important;
}

.bg-gradient .bg-light.text-primary {
    background-color: #000 !important;
    color: var(--secondary) !important;
}


/* =====================================================
   FIX #4: WHO WE ARE IMPACT NUMBERS - Better alignment
   ===================================================== */


/* Add gap between impact number columns */

.bg-dark .container .row .col-xl-4 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 992px) {
    .bg-dark .container .row .col-xl-4 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}


/* =====================================================
   FIX #6: OUR TEAM PAGE - Fix color inconsistencies
   ===================================================== */


/* Make "manufacturing" use brand-appropriate styling */

.custom-font-1 .text-secondary {
    color: var(--primary) !important;
    font-weight: 700;
}


/* Keep "skilled" in steel gray for contrast */

.custom-font-1 .text-primary {
    color: var(--primary) !important;
}


/* =====================================================
   FIX #7: "WANT TO JOIN US" - More appealing background
   ===================================================== */


/* Create gradient background for recruitment section */

.join-us-section,
.bg-dark.py-4 .container .row.py-5.text-center.text-lg-start.align-items-center {
    position: relative;
}


/* Add visual interest to the "Want to Join Us" section */

.recruitment-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.recruitment-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
}

.recruitment-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--secondary-rgba-10) 0%, transparent 70%);
    pointer-events: none;
}


/* =====================================================
   FIX #8: ACTIVE NAVIGATION INDICATOR
   ===================================================== */


/* Desktop navigation - active state with underline */

.header-nav-main nav>ul>li>a.active,
.header-nav-main nav>ul>li.active>a {
    color: var(--primary) !important;
    position: relative;
}

.header-nav-main nav>ul>li>a.active::after,
.header-nav-main nav>ul>li.active>a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: var(--secondary);
    border-radius: 2px;
}


/* Alternative: use gear/wheel shape indicator (matches logo) */

.nav-link.active {
    position: relative;
}


/* Dropdown active state */

.header-nav-main nav>ul>li.dropdown>a.active::after {
    bottom: 0;
}


/* Mobile menu active state */

.mobile-menu-link.active {
    color: var(--secondary) !important;
    border-left: 3px solid var(--secondary);
    padding-left: 22px;
    background: rgba(254, 254, 34, 0.1);
}


/* =====================================================
   FIX #9: CONTACT PAGE - CTAs visible above fold
   ===================================================== */


/* Reduce padding on contact section to show more content */

.section.bg-dark.border-0.m-0.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
}

.section.bg-dark .container.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}


/* Make contact cards more compact */

.contact-card {
    padding: 1.5rem !important;
}

@media (min-width: 992px) {
    .contact-card {
        padding: 2rem !important;
    }
}


/* Ensure CTA buttons are always visible */

.contact-card .btn {
    margin-top: 1rem;
}


/* Add quick contact bar at top of contact page */

.quick-contact-bar {
    background: var(--light);
    border-bottom: 1px solid var(--grey-300);
    padding: 12px 0;
    text-align: center;
}

.quick-contact-bar a {
    color: var(--dark);
    font-weight: 600;
    margin: 0 15px;
    text-decoration: none;
}

.quick-contact-bar a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.quick-contact-bar i {
    margin-right: 8px;
    color: var(--primary);
}


/* =====================================================
   TEXT HIGHLIGHTER EFFECT - Marker Style
   Used for important links in FAQ and content
   ===================================================== */

.text-highlight {
    position: relative;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.text-highlight:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.text-highlight-yellow {
    background-color: rgba(254, 254, 34, 0.4);
    color: #1a1a1a !important;
    border-bottom: 2px solid #FCDA03;
}

.text-highlight-yellow:hover {
    background-color: rgba(254, 254, 34, 0.6);
    color: #000 !important;
}

.text-highlight i {
    transition: transform 0.3s ease;
}

.text-highlight:hover i {
    transform: scale(1.2);
}

join-us-section,
.bg-dark.py-4 .container .row.py-5.text-center.text-lg-start.align-items-center {
    position: relative;
}


/* Add visual interest to the "Want to Join Us" section */

.recruitment-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    position: relative;
    overflow: hidden;
}

.recruitment-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
}

.recruitment-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--secondary-rgba-10) 0%, transparent 70%);
    pointer-events: none;
}


/* =====================================================
   FIX #8: ACTIVE NAVIGATION INDICATOR
   ===================================================== */


/* Desktop navigation - active state with underline */

.header-nav-main nav>ul>li>a.active,
.header-nav-main nav>ul>li.active>a {
    color: var(--primary) !important;
    position: relative;
}

.header-nav-main nav>ul>li>a.active::after,
.header-nav-main nav>ul>li.active>a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: var(--secondary);
    border-radius: 2px;
}


/* Alternative: use gear/wheel shape indicator (matches logo) */

.nav-link.active {
    position: relative;
}


/* Dropdown active state */

.header-nav-main nav>ul>li.dropdown>a.active::after {
    bottom: 0;
}


/* Mobile menu active state */

.mobile-menu-link.active {
    color: var(--secondary) !important;
    border-left: 3px solid var(--secondary);
    padding-left: 22px;
    background: rgba(254, 254, 34, 0.1);
}


/* =====================================================
   FIX #9: CONTACT PAGE - CTAs visible above fold
   ===================================================== */


/* Reduce padding on contact section to show more content */

.section.bg-dark.border-0.m-0.py-5 {
    padding-top: 2rem !important;
    padding-bottom: 3rem !important;
}

.section.bg-dark .container.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}


/* Make contact cards more compact */

.contact-card {
    padding: 1.5rem !important;
}

@media (min-width: 992px) {
    .contact-card {
        padding: 2rem !important;
    }
}


/* Ensure CTA buttons are always visible */

.contact-card .btn {
    margin-top: 1rem;
}


/* Add quick contact bar at top of contact page */

.quick-contact-bar {
    background: var(--light);
    border-bottom: 1px solid var(--grey-300);
    padding: 12px 0;
    text-align: center;
}

.quick-contact-bar a {
    color: var(--dark);
    font-weight: 600;
    margin: 0 15px;
    text-decoration: none;
}

.quick-contact-bar a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.quick-contact-bar i {
    margin-right: 8px;
    color: var(--primary);
}


/* =====================================================
   TEXT HIGHLIGHTER EFFECT - Marker Style
   Used for important links in FAQ and content
   ===================================================== */

.text-highlight {
    position: relative;
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.text-highlight:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.text-highlight-yellow {
    background-color: rgba(252, 218, 3, 0.4);
    color: #1a1a1a !important;
    border-bottom: 2px solid #FCDA03;
}

.text-highlight-yellow:hover {
    background-color: rgba(252, 218, 3, 0.6);
    color: #000 !important;
}

.text-highlight i {
    transition: transform 0.3s ease;
}

.text-highlight:hover i {
    transform: scale(1.2);
}


/* =====================================================
   MARQUEE LINKS - Full-height clickable area with hover underline
   SIMPLEST & MOST RELIABLE SOLUTION: Expand clickable area to fill entire banner
   ===================================================== */


/* CRITICAL FIX: Make links fill entire banner height for easy clicking */

.marquee-link {
    color: inherit !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    position: relative;
    z-index: 100 !important;
    pointer-events: auto !important;
    display: inline-block;
    /* Expand clickable area to fill entire banner height - user can click anywhere vertically */
    padding: 1.5rem 0.75rem !important;
    margin: -1.5rem -0.75rem !important;
    /* Ensure full height coverage */
    line-height: inherit;
    vertical-align: middle;
}

.marquee .js-marquee,
.marquee .js-marquee-wrapper {
    pointer-events: auto !important;
}

.marquee-link::after {
    content: '';
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    width: calc(100% - 1.5rem);
    height: 2px;
    background: currentColor;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index: 1;
}

.marquee-link:hover::after,
.marquee-link:focus::after {
    opacity: 1;
}

.marquee-link:hover,
.marquee-link:focus,
.marquee-link:active {
    color: inherit !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}


/* CRITICAL: Ensure marquee container allows pointer events */

.marquee {
    pointer-events: auto !important;
    position: relative;
}


/* Ensure all original marquee content is interactive */

.marquee>div:first-child,
.marquee>p:first-child,
.marquee>span:first-child {
    pointer-events: auto !important;
}

.marquee>div:first-child .marquee-link,
.marquee>p:first-child .marquee-link,
.marquee>span:first-child .marquee-link {
    pointer-events: auto !important;
    z-index: 100 !important;
}


/* Fix for custom-pos-1 rotated marquee */

.custom-pos-1 .marquee-link {
    pointer-events: auto !important;
    z-index: 100 !important;
}

.custom-pos-1 .marquee {
    pointer-events: auto !important;
}

.custom-pos-1 .marquee>*:first-child {
    pointer-events: auto !important;
}


/* =====================================================
   HEADER & NAVIGATION FIXES - Proper alignment
   ===================================================== */


/* =====================================================
   STICKY HEADER BEHAVIOR - SendCutSend Style
   Centralized sticky header for ALL pages
   ===================================================== */


/* Header is always fixed at top, transparent initially, solid when scrolled */


/* Unified header positioning - both classes behave identically */


/* Header positioned below floating contact bar */

#header.header-transparent,
#header.header-effect-shrink {
    position: fixed !important;
    top: 45px;
    /* Desktop: Account for floating contact bar (45px height) */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1030;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Mobile: Header positioned below floating contact bar (40px) */

@media (max-width: 991px) {
    #header.header-transparent,
    #header.header-effect-shrink {
        top: 40px !important;
        /* Mobile floating contact bar height */
    }
}


/* Initial state: transparent background with compact height */


/* Initial state: transparent background with compact height */


/* Unified header body styling - both classes */
/* DESKTOP: transparent header (overlays hero). MOBILE: solid white (sticky disabled). */

@media (min-width: 992px) {
    #header.header-transparent .header-body,
    #header.header-effect-shrink .header-body {
        background: transparent !important;
    }
}

#header.header-transparent .header-body,
#header.header-effect-shrink .header-body {
    min-height: auto !important;
    height: auto !important;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* When scrolled, header becomes solid white with shadow */


/* Unified sticky header behavior - both classes */

html.sticky-header-active #header.header-transparent .header-body,
html.sticky-header-active #header.header-effect-shrink .header-body {
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}


/* =====================================================
   GLOBAL NAVIGATION TEXT COLOR - HIGHEST PRIORITY
   Global styles MUST override page-specific styles
   ===================================================== */


/* Navigation text: ALWAYS dark (global priority) */


/* Typography: 700 weight, 12px size, 20px line-height, uppercase */


/* Unified navigation text styling - both header classes */

#header.header-transparent .header-nav-main nav>ul>li>a,
#header.header-effect-shrink .header-nav-main nav>ul>li>a,
#header.header-transparent .header-nav-main nav>ul>li>a.nav-link,
#header.header-effect-shrink .header-nav-main nav>ul>li>a.nav-link,
#header.header-transparent .header-nav-main nav>ul>li>a.dropdown-item,
#header.header-effect-shrink .header-nav-main nav>ul>li>a.dropdown-item,
#header.header-transparent .header-nav-main nav>ul>li>a.dropdown-toggle,
#header.header-effect-shrink .header-nav-main nav>ul>li>a.dropdown-toggle,

/* Override text-capitalize class - ensure uppercase */

#header.header-transparent .header-nav-main.header-nav-main-text-capitalize nav>ul>li>a,
#header.header-effect-shrink .header-nav-main.header-nav-main-text-capitalize nav>ul>li>a {
    color: #333 !important;
    font-weight: 100 !important;
    font-size: 18px !important;
    line-height: 20px !important;   
    
    letter-spacing: 0.02em;
}


/* Unified navigation hover states - both header classes */

#header.header-transparent .header-nav-main nav>ul>li>a:hover,
#header.header-effect-shrink .header-nav-main nav>ul>li>a:hover,
#header.header-transparent .header-nav-main nav>ul>li>a:focus,
#header.header-effect-shrink .header-nav-main nav>ul>li>a:focus {
    color: #1a1a1a !important;
}


/* Unified navigation active state - both header classes */

#header.header-transparent .header-nav-main nav>ul>li>a.active,
#header.header-effect-shrink .header-nav-main nav>ul>li>a.active {
    color: var(--primary) !important;
}


/* When sticky, maintain dark text */


/* Unified sticky navigation text - both header classes */

html.sticky-header-active #header.header-transparent .header-nav-main nav>ul>li>a,
html.sticky-header-active #header.header-effect-shrink .header-nav-main nav>ul>li>a,
html.sticky-header-active #header.header-transparent .header-nav-main nav>ul>li>a.nav-link,
html.sticky-header-active #header.header-effect-shrink .header-nav-main nav>ul>li>a.nav-link,
html.sticky-header-active #header.header-transparent .header-nav-main nav>ul>li>a.dropdown-item,
html.sticky-header-active #header.header-effect-shrink .header-nav-main nav>ul>li>a.dropdown-item,
html.sticky-header-active #header.header-transparent .header-nav-main nav>ul>li>a.dropdown-toggle,
html.sticky-header-active #header.header-effect-shrink .header-nav-main nav>ul>li>a.dropdown-toggle {
    color: #333 !important;
}

html.sticky-header-active #header.header-transparent .header-nav-main nav>ul>li>a:hover,
html.sticky-header-active #header.header-effect-shrink .header-nav-main nav>ul>li>a:hover {
    color: #1a1a1a !important;
}

html.sticky-header-active #header.header-transparent .header-nav-main nav>ul>li>a.active,
html.sticky-header-active #header.header-effect-shrink .header-nav-main nav>ul>li>a.active {
    color: var(--primary) !important;
}


/* =====================================================
   LOGO SIZING - SendCutSend Style (Centralized)
   Compact logo that efficiently uses vertical space
   ===================================================== */


/* Logo container - minimal padding (SendCutSend style) */


/* Override theme.css margin: 1rem 0 with minimal spacing */


/* Unified logo styling - both header classes */

#header.header-transparent .header-logo,
#header.header-effect-shrink .header-logo {
    margin: 0.2rem 0 !important;
    /* Minimal vertical spacing - SendCutSend style */
    display: flex;
    align-items: center;
}


/* Logo image - compact height like SendCutSend with minimal spacing */

#header.header-transparent .header-logo img,
#header.header-effect-shrink .header-logo img {
    height: 42px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    margin: 0 !important;
    padding: 0 !important;
}


/* Header row - minimal vertical padding for compact header (SendCutSend style) */

#header.header-transparent .header-row-compact {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    align-items: center;
    min-height: auto;
}

@media (min-width: 992px) {
    #header.header-transparent .header-row-compact {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
    }
}


/* Header navigation - minimal padding to align with compact logo */

#header.header-transparent .header-nav {
    padding: 0.5rem 0 !important;
    min-height: auto;
    display: flex;
    align-items: center;
}

@media (min-width: 992px) {
    #header.header-transparent .header-nav {
        padding: 0.625rem 0 !important;
    }
}


/* Nested header-row inside header-column - ensure proper alignment */

#header.header-transparent .header-column .header-row {
    align-items: center;
    min-height: auto;
    padding: 0 !important;
    /* Remove any default padding */
}


/* Mobile menu toggle color - DESKTOP: white over dark hero, MOBILE: dark on white header */

@media (min-width: 992px) {
    #header.header-transparent .mobile-menu-toggle {
        color: #fff !important;
    }
    html.sticky-header-active #header .mobile-menu-toggle {
        color: #333 !important;
    }
}
@media (max-width: 991px) {
    #header .mobile-menu-toggle {
        color: #333 !important;
        text-shadow: none !important;
    }
}


/* =====================================================
   MOBILE MENU TOGGLE - Enhanced Styling
   - LTR: Position at top-left (flex-start)
   - RTL: Position at top-right (flex-end for RTL)
   - Menu label for clarity
   - Visual padding and contrast
   ===================================================== */


/* =====================================================
   MOBILE HAMBURGER MENU - RTL/LTR POSITIONING & ACCESSIBILITY
   LTR: Position at top-left (order: -1)
   RTL: Position at top-right (order: 99)
   ===================================================== */


/* Mobile menu column - positioned LEFT for LTR using flex-order */

.header-column-mobile-menu {
    flex: 0 0 auto;
    order: -1;
    /* First in LTR flex container = LEFT side */
    padding: 8px;
    /* Adequate visual padding around the icon area */
    position: relative;
    z-index: 1001;
}


/* RTL mobile menu positioning handled in @media (max-width: 991px) block below */


/* DESKTOP: Logo alignment
   Porto theme.css sets flex-direction:column on .header-column.
   We override to row so justify-content controls horizontal position.
   LTR: logo at flex-start (LEFT edge)
   RTL: logo at flex-end (RIGHT edge, physical right because dir=rtl) */

@media (min-width: 992px) {
    html:not([dir="rtl"]) .header-column-logo {
        flex: 0 0 auto;
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: center;
        order: 0;
    }
    
    html[dir="rtl"] .header-column-logo {
        flex: 0 0 auto;
        flex-direction: row !important;
        justify-content: flex-start;
        align-items: center;
        order: 0;
    }
    
    /* RTL nav column: ensure it fills remaining space and aligns items to the left */
    html[dir="rtl"] .header-column-nav {
        flex-direction: row !important;
        align-items: center;
    }
}

/* MOBILE: Logo centered (handled by JavaScript for absolute positioning) */

@media (max-width: 991px) {
    html:not([dir="rtl"]) .header-column-logo {
        flex: 1;
        justify-content: center;
        order: 0;
    }
    
    html[dir="rtl"] .header-column-logo {
        flex: 1;
        justify-content: center;
        order: 0;
    }
}


/* =====================================================
   MOBILE VIEWPORT - FORCE PROPER FLEX LAYOUT
   Ensure hamburger menu positioning works at mobile widths
   CRITICAL: Logo must be PERFECTLY CENTERED
   
   NEW LAYOUT (uses equal-width side columns):
   LTR: [HAMBURGER (80px)] [LOGO CENTER (flex:1)] [LANG (80px)]
   RTL: [LANG (80px)] [LOGO CENTER (flex:1)] [HAMBURGER (80px)]
   ===================================================== */

@media (max-width: 991px) {
    /* =====================================================
       REMOVE PADDING FROM HEADER CONTAINERS
       So hamburger and lang selector can reach viewport edges
       ===================================================== */
    #header .header-container,
    #header .header-container.container-fluid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    #header .header-row {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Force flex layout on header row for mobile */
    #header .header-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        direction: ltr !important;
        /* Force LTR for predictable order */
    }
    /* =====================================================
       HEADER LAYOUT for TRUE LOGO CENTERING
       Use position:absolute relative to header-body for viewport centering
       ===================================================== */
    /* Make header-body the positioning context (spans full width) */
    #header .header-body {
        position: relative !important;
    }
    /* Side columns positioned normally at edges */
    .header-column-mobile-menu,
    .header-column-lang-mobile {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        z-index: 2 !important;
        position: relative !important;
    }
    /* Hamburger aligns to left edge */
    .header-column-mobile-menu {
        justify-content: flex-start !important;
    }
    /* Lang selector aligns to right edge */
    .header-column-lang-mobile {
        justify-content: flex-end !important;
        margin-left: auto !important;
    }
    /* Logo: absolutely positioned relative to header-body for TRUE viewport centering */
    .header-column-logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1 !important;
        margin: 0 !important;
    }
    /* Ensure logo doesn't interfere with side columns */
    .header-column-logo .header-logo {
        max-width: 120px !important;
    }
    .header-column-logo .header-logo img {
        max-height: 60px !important;
        width: auto !important;
    }
    /* All columns: reset margins */
    .header-row .header-column,
    .header-row .header-column-mobile-menu,
    .header-row .header-column-logo,
    .header-row .header-column-lang-mobile {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* =====================================================
       LTR: Hamburger LEFT, Logo CENTER, Lang RIGHT
       ===================================================== */
    html:not([dir="rtl"]) .header-row .header-column-mobile-menu {
        order: 1 !important;
    }
    html:not([dir="rtl"]) .header-row .header-column-logo {
        order: 2 !important;
    }
    html:not([dir="rtl"]) .header-row .header-column-lang-mobile {
        order: 3 !important;
    }
    /* =====================================================
       RTL: Lang LEFT, Logo CENTER, Hamburger RIGHT
       ===================================================== */
    html[dir="rtl"] .header-row .header-column-lang-mobile {
        order: 1 !important;
    }
    html[dir="rtl"] .header-row .header-column-logo {
        order: 2 !important;
    }
    html[dir="rtl"] .header-row .header-column-mobile-menu {
        order: 3 !important;
    }
    /* Hide desktop nav on mobile */
    .header-column-nav {
        display: none !important;
    }
}


/* =====================================================
   MOBILE HAMBURGER MENU BUTTON - Enhanced UX Design
   - Visual depth and clickability
   - Smooth animations/transitions
   - Adequate padding and contrast
   - Focus-visible for accessibility
   ===================================================== */

.mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    transition: color 0.3s ease, background 0.2s ease;
    font-size: 22px;
    color: inherit;
    box-shadow: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}


/* Subtle lift effect on hover - reinforces clickability */


/* CRITICAL: Icon must remain visible - use contrasting colors */

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    background: rgba(0, 0, 0, 0.06);
    color: #111 !important;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}


/* Ensure icon inherits the dark color on hover */

.mobile-menu-toggle:hover i,
.mobile-menu-toggle:focus i {
    color: #222 !important;
    /* No background-color for icons - prevents filled square effect */
}

.mobile-menu-toggle:hover .mobile-menu-toggle__icon,
.mobile-menu-toggle:focus .mobile-menu-toggle__icon {
    color: #222 !important;
}

.mobile-menu-toggle:hover .mobile-menu-toggle__bar,
.mobile-menu-toggle:focus .mobile-menu-toggle__bar {
    color: #222 !important;
    background-color: #222 !important;
}

.mobile-menu-toggle:hover .mobile-menu-toggle__label,
.mobile-menu-toggle:focus .mobile-menu-toggle__label {
    color: #222 !important;
}


/* Active/pressed state - visual feedback for interaction */

.mobile-menu-toggle:active,
.mobile-menu-toggle.is-active {
    background: rgba(0, 0, 0, 0.1);
    color: #111 !important;
    border: none;
    box-shadow: none;
    transform: none;
}


/* =====================================================
   MOBILE LANGUAGE SELECTOR - Header Globe Icon
   Positioned opposite to hamburger menu based on RTL/LTR
   ===================================================== */

.header-column-lang-mobile {
    flex: 0 0 auto !important;
}

.mobile-lang-selector {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    /* Above sticky bar */
}


/* Fix overflow hidden on header-body that clips the dropdown */

@media (max-width: 991px) {
    #header .header-body,
    #header .header-container,
    #header .header-row,
    .header-column-lang-mobile {
        overflow: visible !important;
    }
}

.mobile-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #222;
    border-radius: 50%;
    color: #222;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    -webkit-tap-highlight-color: transparent;
}

.mobile-lang-btn:hover,
.mobile-lang-btn:focus {
    background: #FCDA03;
    border-color: #FCDA03;
    color: #222;
    transform: scale(1.05);
}

.mobile-lang-btn:active {
    transform: scale(0.95);
}

.mobile-lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 140px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
    /* Must be above everything including sticky bar */
    overflow: hidden;
    padding: 6px 0;
}


/* RTL: Position dropdown on left side */

html[dir="rtl"] .mobile-lang-dropdown {
    right: auto;
    left: 0;
}

.mobile-lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-lang-option {
    display: block;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.2s ease;
    text-align: center;
}

.mobile-lang-option:hover {
    background: rgba(252, 218, 3, 0.1);
    color: var(--secondary, #FCDA03);
}

.mobile-lang-option.active {
    color: var(--secondary, #FCDA03);
    font-weight: 700;
}


/* Icon container with animated hamburger bars */

.mobile-menu-toggle__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 24px;
    height: 18px;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Individual hamburger bars */

.mobile-menu-toggle__bar {
    display: block;
    width: 100%;
    height: 2.5px;
    background-color: currentColor;
    border-radius: 2px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}


/* Animate bars when menu is open */

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* Hover state - animate icon slightly */

.mobile-menu-toggle:hover .mobile-menu-toggle__icon,
.mobile-menu-toggle:focus .mobile-menu-toggle__icon {
    transform: scale(1.05);
}


/* Menu label styling */

.mobile-menu-toggle__label {
    display: none;
    font-size: 10px;
    font-weight: 700;
    
    letter-spacing: 0.8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
    text-align: center;
    margin-top: 4px;
    /* Spacing between icon and label */
}


/* Label color transitions with button */

.mobile-menu-toggle:hover .mobile-menu-toggle__label,
.mobile-menu-toggle:focus .mobile-menu-toggle__label {
    color: #fff !important;
}

.mobile-menu-toggle:active .mobile-menu-toggle__label,
.mobile-menu-toggle.is-active .mobile-menu-toggle__label {
    color: #fff !important;
}


/* =====================================================
   RTL SPECIFIC ADJUSTMENTS
   Maintains usability while respecting RTL reading patterns
   ===================================================== */

html[dir="rtl"] .mobile-menu-toggle {
    flex-direction: column;
    /* Keep icon on top, label at bottom for RTL too */
    text-align: center;
}

html[dir="rtl"] .mobile-menu-toggle__label {
    text-align: center;
}


/* RTL hover/focus states */

html[dir="rtl"] .mobile-menu-toggle:hover,
html[dir="rtl"] .mobile-menu-toggle:focus {
    transform: translateY(-1px);
    /* Maintain lift effect for RTL */
}


/* =====================================================
   ACCESSIBILITY ENHANCEMENTS
   High contrast mode support
   Focus-visible for keyboard navigation
   ===================================================== */


/* High contrast mode - thicker borders and bolder colors */

@media (prefers-contrast: high) {
    .mobile-menu-toggle {
        border-width: 3px;
        font-weight: 800;
        box-shadow: none;
    }
    .mobile-menu-toggle__bar {
        height: 4px;
    }
}


/* Reduced motion - respect user preferences */

@media (prefers-reduced-motion: reduce) {
    .mobile-menu-toggle,
    .mobile-menu-toggle__icon,
    .mobile-menu-toggle__bar {
        transition: none;
    }
    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        transform: none;
    }
}


/* Focus-visible for keyboard navigation - clear visual feedback */

.mobile-menu-toggle:focus-visible {
    outline: 3px solid #007bff;
    outline-offset: 2px;
}


/* Ensure focus works on all states */

.mobile-menu-toggle:focus:not(:focus-visible) {
    outline: none;
}


/* =====================================================
   SUBMENU SEARCH AND FOOTER SECTIONS
   Consistent styling for search/contact in submenu panels
   ===================================================== */

.mobile-submenu-search,
.mobile-submenu-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-submenu-search {
    margin-top: auto;
}

.mobile-submenu-footer {
    background: rgba(0, 0, 0, 0.15);
}

/* Ensure submenu panels are hidden by default and show with flex layout when active */
.mobile-submenu-panel {
    display: none;
    flex-direction: column;
}

.mobile-submenu-panel.active {
    display: flex;
}

.mobile-submenu-panel .mobile-submenu-list {
    flex: 1;
    overflow-y: auto;
}


/* Search result item with title and snippet */
.mobile-search-result-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-result-title {
    font-weight: 600;
    color: #fff;
}

.search-result-snippet {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}


/* =====================================================
   FOOTER ACTIVE STATE STYLING - Main Nav Pop Effect
   No dots, no underlines. Yellow + glow like main nav.
   ===================================================== */

/* Footer link active state - yellow + glow (pop effect) */
#footer .footer-main a.active,
#footer .footer-main .active {
    color: #FCDA03 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 0 5px rgba(252, 218, 3, 0.3) !important;
    text-decoration: none !important;
}

/* Footer category header links - hover and active states */
#footer .footer-category-link {
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

#footer .footer-category-link:hover {
    color: #FCDA03 !important;
    text-shadow: 0 0 5px rgba(252, 218, 3, 0.3) !important;
}

#footer .footer-category-link.active {
    color: #FCDA03 !important;
    text-shadow: 0 0 5px rgba(252, 218, 3, 0.3) !important;
}

/* No dot (::before) - removed per main nav style */


/* =====================================================
   HEADER ROW FLEX - Mobile layout for hamburger position
   FIX: Don't use row-reverse as it causes hamburger to appear on wrong side
   Instead, use order property which is more predictable
   ===================================================== */


/* Mobile header flex layout consolidated above - no row-reverse needed */


/* Logo: normal when sticky (unless page-specific override) */

html.sticky-header-active #header.header-transparent .header-logo img,
html.sticky-header-active #header.header-effect-shrink .header-logo img {
    filter: none;
    transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 42px;
    /* Maintain compact size when sticky */
}


/* Powder Coating Page: Logo transitions from inverted to normal when sticky */

.powder-coating-page html.sticky-header-active #header.header-transparent .header-logo img {
    filter: none;
    height: 42px;
    /* Maintain compact size */
}


/* Mobile logo - slightly smaller with minimal spacing */


/* =====================================================
   MOBILE HEADER CONSISTENCY - Unified Behavior
   Ensures header-effect-shrink matches header-transparent
   ===================================================== */

@media (max-width: 991px) {
    /* Apply header-transparent styles to header-effect-shrink for consistency */
    #header.header-transparent,
    #header.header-effect-shrink {
        position: fixed !important;
        top: 40px;
        /* Account for floating contact bar height on mobile */
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1030;
    }
    /* Override theme.css high-specificity transparent rule for mobile */
    /* theme.css: html:not(.sticky-header-active) #header.header-transparent:not(.header-semi-transparent) .header-body */
    html:not(.sticky-header-active) #header.header-transparent:not(.header-semi-transparent) .header-body,
    #header.header-transparent .header-body,
    #header.header-effect-shrink .header-body {
        background: rgba(255, 255, 255, 0.97) !important;
        background-color: rgba(255, 255, 255, 0.97) !important;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    #header.header-transparent .header-logo,
    #header.header-effect-shrink .header-logo {
        margin: 0.2rem 0 !important;
    }
    #header.header-transparent .header-logo img,
    #header.header-effect-shrink .header-logo img {
        height: 48px !important;
    }
    #header.header-transparent .header-row-compact,
    #header.header-effect-shrink .header-row-compact {
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }
    #header.header-transparent .header-nav,
    #header.header-effect-shrink .header-nav {
        padding: 0.4rem 0 !important;
    }
    /* Consistent navigation text styling on mobile */
    #header.header-transparent .header-nav-main nav>ul>li>a,
    #header.header-effect-shrink .header-nav-main nav>ul>li>a,
    #header.header-transparent .header-nav-main nav>ul>li>a.nav-link,
    #header.header-effect-shrink .header-nav-main nav>ul>li>a.nav-link {
        color: #333 !important;
        font-weight: 700 !important;
        font-size: 12px !important;
        line-height: 20px !important;
    }
    /* Mobile menu toggle button consistency */
    #header.header-transparent .mobile-menu-toggle,
    #header.header-effect-shrink .mobile-menu-toggle {
        font-size: 22px;
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }
}


/* Removed page-specific navigation overrides - global styles apply everywhere */


/* Hero section proper spacing from header - account for fixed compact header */


/* Applies to all hero sections across all pages (landing page, powder coating, etc.) */


/* Reduced padding due to more compact header */

.section.hero,
.section-angled.hero,
.powder-coating-hero,
.section.section-angled {
    padding-top: 100px !important;
}

@media (min-width: 992px) {
    .section.hero,
    .section-angled.hero,
    .powder-coating-hero,
    .section.section-angled {
        padding-top: 110px !important;
    }
}


/* Ensure body has padding-top when header is fixed to prevent content jump */

body:has(#header.header-transparent) {
    padding-top: 0;
}


/* Powder coating page header styles are handled in the blade file */


/* =====================================================
   HERO SECTION TEXT FIX - Prevent squeezing
   ===================================================== */


/* Ensure hero text doesn't get squeezed on smaller screens */

.custom-hero-font-1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    max-width: 100%;
}


/* Fix for the hero heading to not squeeze on various screens */

.section-angled .custom-hero-font-1,
.hero .custom-hero-font-1 {
    font-size: clamp(28px, 5vw, 56px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px;
}

@media (min-width: 992px) {
    .section-angled .custom-hero-font-1,
    .hero .custom-hero-font-1 {
        font-size: clamp(36px, 4.5vw, 60px) !important;
    }
}

@media (min-width: 1200px) {
    .section-angled .custom-hero-font-1,
    .hero .custom-hero-font-1 {
        font-size: clamp(42px, 4vw, 65px) !important;
    }
}


/* Ensure mark elements inside hero don't cause squeezing */

.custom-hero-font-1 mark,
.custom-hero-font-1 strong {
    white-space: nowrap;
}


/* Fix text column width on hero section */

.section-angled .col-lg-6.py-5 {
    min-width: 0;
    /* Prevent flex item from overflowing */
}


/* RTL Hero adjustments */

html[dir="rtl"] .custom-hero-font-1 {
    direction: rtl;
    text-align: right;
}


/* RTL Headline ray: theme uses left: -2% on .mark:before so the yellow bar sits under LTR text.
   In RTL the text flows right; the bar stays physical-left and appears empty. Anchor from right. */

html[dir="rtl"] .custom-hero-font-1 .mark.mark-color:before,
html[dir="rtl"] .custom-hero-font-1 .mark.mark-gradient:before {
    left: auto;
    right: -2%;
}

html[dir="rtl"] .custom-hero-font-1 .mark.mark-pos-2:before {
    left: auto;
    right: 1%;
}


/* RTL custom-decoration-1 (SVG under highlighted word): flip position and padding */

html[dir="rtl"] .custom-hero-font-1 .custom-decoration-1 {
    background-position: 0% 0%;
    padding-right: 0;
    padding-left: 4%;
}


/* Comprehensive RTL support for hero section and page content */

html[dir="rtl"] .hero,
html[dir="rtl"] .section-angled {
    direction: rtl;
}

html[dir="rtl"] .text-lg-start {
    text-align: right !important;
}

html[dir="rtl"] .text-lg-end {
    text-align: left !important;
}


/* =====================================================
   RTL HERO SECTION - Mobile Layout Fixes
   ===================================================== */


/* RTL Mobile Hero: Center text alignment */

html[dir="rtl"] .d-lg-none h2,
html[dir="rtl"] .d-lg-none p,
html[dir="rtl"] .d-lg-none .text-center {
    text-align: center !important;
}


/* RTL Mobile Hero: Check icons alignment */

html[dir="rtl"] .d-lg-none .fa-check-circle {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}


/* RTL Mobile Hero: Button icon positioning */

html[dir="rtl"] .d-lg-none .btn .fa-phone-alt,
html[dir="rtl"] .d-lg-none .btn .fas.fa-phone-alt {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}


/* RTL Hero Desktop: Flip column order for proper text flow */

html[dir="rtl"] section.hero .row,
html[dir="rtl"] .hero .row {
    flex-direction: row-reverse;
}


/* RTL Hero: Feature box layout */

html[dir="rtl"] .hero .feature-box,
html[dir="rtl"] .section-angled .feature-box {
    flex-direction: row-reverse;
}

html[dir="rtl"] .hero .feature-box .feature-box-info,
html[dir="rtl"] .section-angled .feature-box .feature-box-info {
    padding-left: 0 !important;
    padding-right: 0.75rem !important;
    text-align: right !important;
}


/* RTL Hero: Button flex direction for proper icon/text order */

html[dir="rtl"] .hero .btn,
html[dir="rtl"] .section-angled .btn {
    flex-direction: row-reverse;
}


/* RTL Hero: Arrow icons should point left in RTL */

html[dir="rtl"] .btn .fa-arrow-right {
    transform: rotate(180deg);
}


/* RTL Hero: Bootstrap margin utilities handle this automatically, no override needed */


/* RTL hero badge and features */

html[dir="rtl"] .first-in-afghanistan-badge {
    direction: rtl;
}


/* =====================================================
   RTL NEW HERO SECTION - Full width and right alignment
   Override max-width constraints and ensure text fills column
   ===================================================== */

html[dir="rtl"] #hero-section .hero-new-content {
    text-align: right !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
}

html[dir="rtl"] #hero-section .hero-new-headline {
    text-align: right !important;
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
}

html[dir="rtl"] #hero-section .hero-new-subheadline {
    text-align: right !important;
    max-width: 100% !important;
    width: 100% !important;
}

html[dir="rtl"] #hero-section .hero-new-badge {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #hero-section .hero-new-values {
    justify-content: flex-start !important;
    width: 100% !important;
}

html[dir="rtl"] #hero-section .hero-new-value-item {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #hero-section .hero-new-ctas {
    justify-content: flex-start !important;
    width: 100% !important;
}

html[dir="rtl"] #hero-section .hero-new-trust {
    direction: rtl;
    justify-content: flex-start !important;
    width: 100% !important;
}

html[dir="rtl"] #hero-section .hero-new-trust-stat {
    text-align: right;
}


/* RTL button arrow direction */

html[dir="rtl"] .btn .fa-arrow-right {
    transform: rotate(180deg);
}

html[dir="rtl"] .btn .fa-arrow-left {
    transform: rotate(0deg);
}


/* RTL marquee direction - Reverse animation for right-to-left flow */

html[dir="rtl"] .marquee {
    direction: rtl;
}


/* RTL Marquee Animation: Reverse scroll direction */


/* Ensure marquee content flows correctly in RTL */

html[dir="rtl"] .marquee p,
html[dir="rtl"] .marquee span {
    direction: rtl;
    unicode-bidi: bidi-override;
}


/* RTL Marquee links - ensure proper text direction */

html[dir="rtl"] .marquee-link {
    direction: rtl;
}


/* RTL hero images - mirror the layout */

html[dir="rtl"] .custom-pos-2 {
    order: -1;
}


/* RTL padding and margin - Bootstrap 5 handles these automatically, no override needed */


/* RTL text flow fix */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] li {
    unicode-bidi: embed;
}


/* RTL icon positioning in hero */

html[dir="rtl"] .custom-heading-1 {
    left: auto;
    right: -50px;
}

@media (max-width: 991px) {
    html[dir="rtl"] .custom-heading-1 {
        right: -30px;
    }
}


/* =====================================================
   SERVICES MEGA DROPDOWN - Fixed Layout
   ===================================================== */

#header .header-nav-main nav>ul>li.dropdown-mega>.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    width: 900px !important;
    max-width: 95vw !important;
    padding: 25px 30px !important;
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15) !important;
    margin-top: 5px !important;
}

.dropdown-menu-services .dropdown-mega-content .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

.dropdown-menu-services .dropdown-mega-content .row>.col-lg-3 {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    padding: 0 15px !important;
}

@media (max-width: 991px) {
    .dropdown-menu-services .dropdown-mega-content .row>.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 15px !important;
    }
}


/* =====================================================
   BACK TO TOP BUTTON - Above WhatsApp
   ===================================================== */

.back-to-top {
    position: fixed;
    bottom: 30px;
    /* Positioned on left side, opposite of floating CTA buttons */
    left: 25px;
    width: 44px;
    height: 44px;
    background: var(--quaternary, #4A4D4F);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1040;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary, #818589);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.back-to-top i {
    color: #fff;
    font-size: 1rem;
}

/* Mobile: smaller and lower back-to-top */
@media (max-width: 767px) {
    .back-to-top {
        width: 40px;
        height: 40px;
        bottom: 24px;
        left: 16px;
    }
    .back-to-top i {
        font-size: 0.875rem;
    }
}


/* Hide Porto theme's default scroll-to-top button (we use our custom .back-to-top instead) */

.scroll-to-top {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Floating CTA position — managed in floating-cta.blade.php per viewport */


/* =====================================================
   FOOTER FIXES
   ===================================================== */


/* Footer Layer 2 - Darker Yellow/Gold instead of greenish */

.footer-main {
    background-color: #3D3D3D !important;
    /* Dark steel gray instead of greenish yellow */
}

.footer-main h5,
.footer-main .text-dark {
    color: #fff !important;
}

.footer-main a {
    color: rgba(255, 255, 255, 0.8) !important;
}

.footer-main a:hover {
    color: var(--secondary, #FCDA03) !important;
    text-shadow: 0 0 5px rgba(252, 218, 3, 0.3) !important;
}

.footer-main ul li a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer-main ul li a:hover {
    color: var(--secondary, #FCDA03) !important;
    text-shadow: 0 0 5px rgba(252, 218, 3, 0.3) !important;
}


/* Footer Layer 1 - Logo and contact info styling */

.footer-brand-section {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.footer-brand-section img {
    max-height: 60px;
    width: auto;
}

.footer-brand-info h4 {
    font-weight: 800;
    font-size: 1.25rem;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.footer-brand-info p {
    margin-bottom: 4px;
    color: #1a1a1a;
    font-size: 0.95rem;
}

.footer-brand-info a {
    color: #1a1a1a;
    text-decoration: none;
}


/* =====================================================
   FOOTER SOCIAL ICONS - Outlined Style
   - Default: Outlined with transparent background
   - Hover: Filled with black background, icon turns brand yellow
   - Size: Matches font size (adjusted to be proportional)
   ===================================================== */

.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #1a1a1a;
    background: transparent;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.footer-social-icon i {
    font-size: 1rem;
    color: #1a1a1a;
    transition: color 0.3s ease;
}

.footer-social-icon:hover,
.footer-social-icon:focus {
    background: #1a1a1a;
    border-color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-social-icon:hover i,
.footer-social-icon:focus i {
    color: #FCDA03;
}

.footer-brand-info a:hover {
    text-decoration: underline;
}


/* =====================================================
   IMPACT NUMBERS SECTION - Font Fixes
   ===================================================== */

.custom-impact-section h3,

/* Typography controlled by fanavar-typography.css */

.custom-impact-section .counter,
.custom-impact-section .text-light {
    /* font-family controlled centrally */
}

.custom-impact-section .counter {
    font-weight: 800 !important;
    letter-spacing: -1px;
}

.custom-impact-section h3 {
    font-weight: 700 !important;
}


/* =====================================================
   HOMEPAGE FAQ SECTION - Match FAQ Page Background
   ===================================================== */

.home-faq-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #eef0f2 50%, #f8f9fa 100%);
    position: relative;
}

.home-faq-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(129, 133, 137, 0.05) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(252, 218, 3, 0.05) 0%, transparent 40%);
    pointer-events: none;
}


/* =====================================================
   WHAT WE DO SECTION - Grid Layout with Images
   ===================================================== */

.services-grid-section {
    background: #fff;
}

.service-card-grid {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.service-card-grid:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: #d0d0d0;
}

.service-card-grid .service-image {
    height: 180px;
    overflow: hidden;
    background: #f8f9fa;
}

.service-card-grid .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.service-card-grid:hover .service-image img {
    transform: scale(1.05);
}

.service-card-grid .service-content {
    padding: 1.5rem;
}

.service-card-grid .service-content h5 {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.service-card-grid .service-content p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0 0 1rem 0;
    line-height: 1.55;
}

.service-card-grid .service-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    color: var(--primary, #818589);
    text-decoration: none;
    transition: all 0.2s ease;
}

.service-card-grid .service-cta i {
    transition: transform 0.2s ease;
}

.service-card-grid:hover .service-cta {
    color: var(--secondary, #FCDA03);
}

.service-card-grid:hover .service-cta i {
    transform: translateX(4px);
}


/* =====================================================
   HERO IMAGE LINKS - Clickable without affecting UI
   ===================================================== */

.hero-image-link {
    display: block;
    text-decoration: none !important;
    cursor: pointer;
}

.hero-image-link:hover {
    text-decoration: none !important;
}

.hero-image-link .custom-box-1 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-image-link:hover .custom-box-1 {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-card-grid:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: #d0d0d0;
}

.service-card-grid .service-image {
    height: 180px;
    overflow: hidden;
    background: #f8f9fa;
}

.service-card-grid .service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.service-card-grid:hover .service-image img {
    transform: scale(1.05);
}

.service-card-grid .service-content {
    padding: 1.5rem;
}

.service-card-grid .service-content h5 {
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.service-card-grid .service-content p {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0 0 1rem 0;
    line-height: 1.55;
}

.service-card-grid .service-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    color: var(--primary, #818589);
    text-decoration: none;
    transition: all 0.2s ease;
}

.service-card-grid .service-cta i {
    transition: transform 0.2s ease;
}

.service-card-grid:hover .service-cta {
    color: var(--secondary, #FCDA03);
}

.service-card-grid:hover .service-cta i {
    transform: translateX(4px);
}


/* =====================================================
   HERO IMAGE LINKS - Clickable without affecting UI
   ===================================================== */

.hero-image-link {
    display: block;
    text-decoration: none !important;
    cursor: pointer;
}

.hero-image-link:hover {
    text-decoration: none !important;
}

.hero-image-link .custom-box-1 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-image-link:hover .custom-box-1 {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


/* ═══════════════════════════════════════════════════════════
   FULL RANGE OF SERVICES SECTION (Home + Powder Coating)
   Light gray cards, image + title + description + blue arrow
   on white background
══════════════════════════════════════════════════════════ */

.services-showcase-new {
    position: relative;
    padding: 4rem 0 5rem;
    background: #ffffff;
    overflow: hidden;
}

.services-header-new {
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.services-header-new__eyebrow {
    display: block;
    /* font-family controlled centrally */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary, #818589);
    
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.services-header-new__title {
    /* font-family controlled centrally */
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
}

.services-header-new__accent {
    display: block;
    width: 60px;
    height: 3px;
    background: var(--primary, #818589);
    margin: 1rem auto;
    border-radius: 9999px;
    opacity: 0.7;
}

.services-header-new__subtitle {
    /* font-family controlled centrally */
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 400;
    color: #555;
    max-width: 700px;
    margin: 0 auto;
}

.services-grid-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (max-width: 1199px) {
    .services-grid-new {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .services-grid-new {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 575px) {
    .services-grid-new {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.service-card-new {
    position: relative;
    background: var(--tertiary, #E8E9EA);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.service-card-new:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
    text-decoration: none;
}

.service-card-new:active {
    transform: translateY(-2px);
    transition-duration: 0.15s;
}

.service-card-new__image {
    position: relative;
    width: 100%;
    min-height: 140px;
    max-height: 180px;
    overflow: hidden;
    background: var(--tertiary, #E8E9EA);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-radius: 10px 10px 0 0;
}

.service-card-new__image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
}

.service-card-new:hover .service-card-new__image img {
    transform: scale(1.05);
}

.service-card-new__content {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--tertiary, #E8E9EA);
}

.service-card-new__content h5 {
    /* font-family controlled centrally */
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.service-card-new:hover .service-card-new__content h5 {
    color: #0077B6;
}

.service-card-new__content p {
    /* font-family controlled centrally */
    font-size: 0.875rem;
    font-weight: 400;
    color: #555;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
    flex: 1;
}

.service-card-new__arrow {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    color: #0077B6;
    font-size: 0.9rem;
    transition: transform 0.25s ease;
}

.service-card-new:hover .service-card-new__arrow {
    transform: translateX(4px);
}

[dir="rtl"] .service-card-new:hover .service-card-new__arrow {
    transform: translateX(-4px);
}


/* Removed .service-card-new--featured styles - all service cards should be plain (no borders) */

.services-footer-new {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    padding-top: 1.5rem;
}

.services-footer-new__contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #333;
    /* font-family controlled centrally */
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.services-footer-new__contact:hover {
    color: #0077B6;
}

.services-footer-new__contact-icon {
    width: 40px;
    height: 40px;
    background: #F5F5F5;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary, #818589);
}

.services-footer-new__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
    background: #1a1a1a;
    color: #fff;
    /* font-family controlled centrally */
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.services-footer-new__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    color: #fff;
}

.services-footer-new__cta:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

.services-footer-new__cta-arrow {
    width: 36px;
    height: 36px;
    background: #0077B6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
    font-size: 0.85rem;
    color: #fff;
}

.services-footer-new__cta:hover .services-footer-new__cta-arrow {
    transform: translateX(4px);
}

[dir="rtl"] .services-footer-new__cta:hover .services-footer-new__cta-arrow {
    transform: translateX(-4px);
}

@media (max-width: 767px) {
    .services-showcase-new {
        padding: 3rem 0 4rem;
    }
    .services-header-new {
        margin-bottom: 2.5rem;
    }
    .services-footer-new {
        flex-direction: column;
        gap: 1rem;
    }
    .services-footer-new__contact {
        font-size: 0.9rem;
    }
    .services-footer-new__cta {
        width: 100%;
        justify-content: center;
    }
}

.service-card-new:focus-visible,
.services-footer-new__cta:focus-visible,
.services-footer-new__contact:focus-visible {
    outline: 3px solid #0077B6;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .service-card-new,
    .service-card-new__image img,
    .service-card-new__arrow,
    .services-footer-new__cta,
    .services-footer-new__cta-arrow {
        transition-duration: 0.01ms !important;
    }
    .service-card-new:hover .service-card-new__image img,
    .service-card-new:hover .service-card-new__arrow {
        transform: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   FLOATING CONTACT BAR - Revenue Optimization
   Modern sticky contact bar above header navigation
   CRITICAL: z-index 9999 ensures it's always on top without
   interfering with header navigation (z-index 1030)
══════════════════════════════════════════════════════════ */

/* Issue #17: Prevent floating bar from overlapping content */
body.has-floating-contact-bar,
body:has(.floating-contact-bar) {
    padding-top: 45px !important;
}
/* Sticky header must sit below floating bar (45px) when active */
html.sticky-header-active body.has-floating-contact-bar #header .header-body,
html.sticky-header-active body:has(.floating-contact-bar) #header .header-body {
    top: 45px !important;
}

.floating-contact-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10000;
    /* CRITICAL: Must be > header z-index (1030) to prevent overlap when scrolling */
    height: 45px;
    background: rgba(45, 55, 72, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.floating-contact-bar.scrolled {
    background: #2D3748;
    /* Solid Steel Gray Dark when scrolled */
    backdrop-filter: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.floating-contact-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 45px;
    gap: 1.5rem;
}

.floating-contact-bar__left,
.floating-contact-bar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.floating-contact-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    min-width: 44px;
    min-height: 44px;
}

.floating-contact-bar__link:hover {
    color: var(--secondary, #FCDA03);
    background: rgba(var(--secondary-rgb, 252, 218, 3), 0.1);
    text-decoration: none;
}

.floating-contact-bar__link i {
    font-size: 14px;
}

.floating-contact-bar__divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
    margin: 0 0.25rem;
}

.floating-contact-bar__label {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    font-weight: 700;
    margin-right: 0.25rem;
}

.floating-contact-bar__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 6px;
    color: #ffffff;
    font-size: 16px;
    text-decoration: none;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.floating-contact-bar__social:hover {
    color: var(--secondary, #FCDA03);
    background: rgba(252, 218, 3, 0.15);
    transform: translateY(-2px);
}


/* =====================================================
   RTL Support for Floating Contact Bar
   LTR: [PHONE/EMAIL (left)] ... [SOCIAL ICONS (right)]
   RTL: [SOCIAL ICONS (left)] ... [PHONE/EMAIL (right)]
   ===================================================== */


/* Base container - ensure proper flex layout */

.floating-contact-bar__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    position: relative !important; /* Anchor for absolutely-centered __center */
}


/* LTR: Phone left with margin-right auto, social right */

html:not([dir="rtl"]) .floating-contact-bar__left {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html:not([dir="rtl"]) .floating-contact-bar__right {
    margin-left: auto !important;
    margin-right: 0 !important;
}


/* RTL: Swap positions - social left, phone right */

html[dir="rtl"] .floating-contact-bar__inner {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .floating-contact-bar__left {
    flex-direction: row-reverse !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .floating-contact-bar__right {
    flex-direction: row-reverse !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}


/* RTL: Adjust label margin */

html[dir="rtl"] .floating-contact-bar__label {
    margin-right: 0;
    margin-left: 0.25rem;
}


/* RTL: Ensure icons show in correct order */

html[dir="rtl"] .floating-contact-bar__link i {
    margin-left: 0.5rem;
    margin-right: 0;
}


/* =====================================================
   MOBILE STICKY BAR - Ensure proper layout on small screens
   ===================================================== */

@media (max-width: 991px) {
    .floating-contact-bar__inner {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* LTR Mobile: Phone left, social right */
    html:not([dir="rtl"]) .floating-contact-bar__left {
        order: 1 !important;
    }
    html:not([dir="rtl"]) .floating-contact-bar__right {
        order: 2 !important;
    }
    /* RTL Mobile: Social left, Phone right (using row-reverse) */
    html[dir="rtl"] .floating-contact-bar__left {
        order: 1 !important;
        /* Phone - appears on RIGHT due to row-reverse */
    }
    html[dir="rtl"] .floating-contact-bar__right {
        order: 2 !important;
        /* Social - appears on LEFT due to row-reverse */
    }
}


/* =====================================================
   TESTIMONIAL HANDLES - Minimum Font Size Fix
   Ensure readability for @username style handles
   ===================================================== */

.testimonial-handle,
[class*="@"],
.text-muted.small,
.testimonial-author small,
.tweet-author-name+span,
.testimonial-quote+p span {
    font-size: 14px !important;
    min-height: 1.4em;
}


/* Specific fix for testimonial section handles */

.custom-testimonial .testimonial-author span:not(.testimonial-author-name),
.testimonial h4+p,
.card .card-body h4+p {
    font-size: 14px !important;
    color: #666;
}


/* =====================================================
   FOOTER SOCIAL ICONS - Explicit Black Outline Fix
   Ensure icons are black outlined, not white
   ===================================================== */

.footer-social-icon {
    border: 2px solid #000000 !important;
    background: transparent !important;
    color: #000000 !important;
}

.footer-social-icon i {
    color: #000000 !important;
}

.footer-social-icon:hover,
.footer-social-icon:focus {
    background: #000000 !important;
    border-color: #000000 !important;
}

.footer-social-icon:hover i,
.footer-social-icon:focus i {
    color: #FCDA03 !important;
}


/* Reduce footer icon size to match text */

.footer-social-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.875rem !important;
}

.footer-social-icon i {
    font-size: 0.875rem !important;
}


/* =====================================================
   FOOTER MAIN (Dark) - Social Icons Override
   Dark footer (#4a4a4a) needs white icons, not black.
   Matches rest of footer content color + larger touch targets.
   ===================================================== */

#footer .footer-main .footer-social-icon {
    border: 2px solid rgba(255, 255, 255, 0.85) !important;
    background: transparent !important;
    color: #ffffff !important;
    width: 52px !important;
    height: 52px !important;
    font-size: 1.5rem !important;
}

#footer .footer-main .footer-social-icon i {
    color: #ffffff !important;
    font-size: 1.5rem !important;
}

#footer .footer-main .footer-social-icon:hover,
#footer .footer-main .footer-social-icon:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #FCDA03 !important;
}

#footer .footer-main .footer-social-icon:hover i,
#footer .footer-main .footer-social-icon:focus i {
    color: #FCDA03 !important;
}

/* Footer mobile: WCAG 2.5.5 - 44x44px minimum touch targets */
@media (max-width: 991px) {
    #footer .footer-main .footer-social-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
    #footer .footer-main .footer-brand-info a[href^="tel:"],
    #footer .footer-main .footer-brand-info a[href^="mailto:"] {
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        padding: 0.5rem 0;
    }
    #footer .footer-main .footer-brand-section {
        order: -1; /* Promote contact to top on mobile */
    }
}


/* =====================================================
   RTL FONT SIZE STANDARDIZATION
   Ensure consistent base font size for FA and PS
   ===================================================== */

html[lang="fa"] body {
    font-size: 18px !important;
}

html[lang="ps"] body {
    font-size: 24px !important;
}


/* Mobile Adjustments */

@media (max-width: 991px) {
    .floating-contact-bar {
        height: 44px;
    }
    .floating-contact-bar__inner {
        height: 44px;
        gap: 0.75rem;
    }
    .floating-contact-bar__link {
        font-size: 17px;
        padding: 0.4rem 0.5rem;
        gap: 0.4rem;
    }
    .floating-contact-bar__label {
        font-size: 17px;
    }
    .floating-contact-bar__social {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .floating-contact-bar__label {
        display: none;
    }
    .floating-contact-bar__divider {
        display: none;
    }
    /* Mobile: Optimize social icons spacing - compact but accessible */
    /* LTR: Social icons on RIGHT side */
    html:not([dir="rtl"]) .floating-contact-bar__right {
        gap: 0.5rem !important;
        margin-left: auto;
        margin-right: 0;
    }
    /* RTL: Social icons on LEFT side */
    html[dir="rtl"] .floating-contact-bar__right {
        gap: 0.5rem !important;
        margin-right: auto;
        margin-left: 0;
    }
    .floating-contact-bar__social {
        width: 30px !important;
        height: 30px !important;
        font-size: 13px !important;
        min-width: 30px !important;
        /* WCAG 2.5.5 tap target compliance */
    }
    /* Ensure proper flex layout on mobile */
    .floating-contact-bar__inner {
        justify-content: space-between;
        align-items: center;
    }
}


/* Adjust header position to account for floating contact bar */

#header.header-transparent {
    top: 45px !important;
    /* Position below contact bar */
}


/* CRITICAL FIX: Ensure header-body never overlaps contact bar */

#header .header-body {
    position: relative !important;
    /* Override Porto's position: fixed */
    z-index: auto !important;
    /* Let parent #header handle z-index */
}


/* Ensure #header itself stays properly positioned */

#header {
    z-index: 1030 !important;
    /* MUST be less than contact bar (10000) */
}

@media (max-width: 991px) {
    #header.header-transparent {
        top: 40px !important;
    }
}


/* Adjust body/hero padding to account for both bars */

.section.hero,
.section-angled.hero,
.powder-coating-hero,
.section.section-angled {
    padding-top: 145px !important;
    /* Contact bar (45px) + Header (~100px) */
}

@media (min-width: 992px) {
    .section.hero,
    .section-angled.hero,
    .powder-coating-hero,
    .section.section-angled {
        padding-top: 155px !important;
        /* Contact bar (45px) + Header (~110px) */
    }
}

@media (max-width: 991px) {
    .section.hero,
    .section-angled.hero,
    .powder-coating-hero,
    .section.section-angled {
        padding-top: 85px !important;
        /* Contact bar (40px) + Header (~45px mobile compact) - MINIMAL spacing */
    }
    /* Remove excessive vertical padding on mobile hero content */
    .section-angled .container {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .section-angled .row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .section-angled .col-lg-6 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    /* Hide decorative "Fabrication" text on mobile - saves vertical space */
    .custom-heading-1 {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════
   HERO VALUE PROPOSITION - Strategic Enhancement
   Customer-benefit focused headline structure
══════════════════════════════════════════════════════════ */

.hero-primary {
    /* font-family controlled centrally */
    font-weight: 800;
    font-size: clamp(36px, 5.5vw, 68px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    margin-bottom: 0;
}

.hero-benefits {
    /* font-family controlled centrally */
    font-size: clamp(16px, 2vw, 20px) !important;
    line-height: 1.4;
    font-weight: 600;
    color: #2d3748;
}

.hero-benefits-separator {
    display: inline-block;
    margin: 0 0.75rem;
    color: var(--primary, #818589);
    font-weight: 400;
}

.hero-context {
    /* font-family controlled centrally */
    font-size: clamp(14px, 1.5vw, 18px) !important;
    line-height: 1.5;
    font-weight: 500;
    color: #555;
}


/* Mobile adjustments */

@media (max-width: 767px) {
    .hero-benefits-separator {
        display: block;
        /* Stack benefits vertically on mobile */
        margin: 0.5rem 0;
        height: 1px;
        width: 30px;
        background: var(--primary, #818589);
    }
    .hero-benefits {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   ENHANCED TRUST SECTION - Client Context Cards
   Shows what we did for each client, not just logos
══════════════════════════════════════════════════════════ */

.trust-section {
    background: #f8f9fa;
    position: relative;
}

.trust-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 20%, rgba(129, 133, 137, 0.03) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(252, 218, 3, 0.03) 0%, transparent 40%);
    pointer-events: none;
}

.trust-client-card {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.trust-client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--primary, #818589);
}

.trust-client-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, var(--primary, #818589) 0%, var(--quaternary, #4A4D4F) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.75rem;
    box-shadow: 0 4px 12px rgba(129, 133, 137, 0.25);
}

.trust-client-card__name {
    /* font-family controlled centrally */
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.trust-client-card__project {
    /* font-family controlled centrally */
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary, #818589);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.trust-client-card__impact {
    /* font-family controlled centrally */
    font-size: 0.9rem;
    font-weight: 400;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.5;
}


/* RTL Support */

html[dir="rtl"] .trust-client-card {
    text-align: center;
}


/* Mobile adjustments */

@media (max-width: 767px) {
    .trust-client-card {
        padding: 1.5rem;
    }
    .trust-client-card__icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    .trust-client-card__name {
        font-size: 1.1rem;
    }
    .trust-client-card__project {
        font-size: 0.95rem;
    }
    .trust-client-card__impact {
        font-size: 0.85rem;
    }
}


/* ═══════════════════════════════════════════════════════════
   MOBILE HERO SECTION - B2B UX Optimization
   Research findings: F-pattern, information scent, Jakob's Law, WCAG 2.5.5
   Brand: Economical with words, clean presentation
══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
    /* F-PATTERN: "Afghanistan's First" as primary anchor (top-left) - TIGHT spacing */
    .d-lg-none h2.text-5 {
        font-size: 32px !important;
        line-height: 1.1 !important;
        margin-bottom: 0.4rem !important;
        margin-top: 0 !important;
        letter-spacing: -0.5px;
    }
    .d-lg-none p.text-4 {
        font-size: 18px !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }
    /* Differentiators: compact with icons - TIGHT spacing */
    .d-lg-none p.text-3-5 {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 0.75rem !important;
    }
    .d-lg-none p.text-3-5 i {
        font-size: 16px !important;
        margin-right: 0.5rem !important;
    }
    /* CTA button - WCAG 2.5.5 (minimum 52x240px for mobile tap) - TIGHT spacing */
    .d-lg-none .btn-primary.btn-lg {
        min-height: 52px !important;
        min-width: 240px !important;
        padding: 14px 28px !important;
        font-size: 17px !important;
        font-weight: 800 !important;
        margin-bottom: 0.75rem !important;
    }
    /* B2B Microcopy: 2x2 grid - COMPACT for visibility */
    .d-lg-none .bg-white.rounded {
        min-height: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.6rem !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
        margin-bottom: 0.4rem !important;
    }
    .d-lg-none .bg-white.rounded:active {
        transform: scale(0.98);
    }
    .d-lg-none .bg-white.rounded i {
        font-size: 16px !important;
        margin-bottom: 0.3rem !important;
    }
    .d-lg-none .bg-white.rounded strong {
        font-size: 13px !important;
        margin-bottom: 0.15rem !important;
        font-weight: 700 !important;
    }
    .d-lg-none .bg-white.rounded .text-muted {
        font-size: 10px !important;
        font-weight: 500 !important;
    }
    /* TIGHT spacing between grid rows - ensures "CNC & Laser" visible */
    .d-lg-none .row.g-2 {
        --bs-gutter-y: 0.5rem !important;
        --bs-gutter-x: 0.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    /* Remove bottom margin from mobile hero wrapper */
    .d-lg-none {
        margin-bottom: 0 !important;
        padding-bottom: 0.25rem !important;
    }
    /* Compact card padding - ensure all cards use p-2 */
    .d-lg-none .bg-white.rounded {
        padding: 0.5rem !important;
    }
    /* Further reduce spacing to ensure "CNC & Laser" visible */
    .section-angled .d-lg-none {
        padding-top: 0 !important;
    }
    /* Reduce container top padding on mobile - MINIMAL */
    @media (max-width: 991px) {
        .section-angled .container {
            padding-top: 0.25rem !important;
            padding-bottom: 0.5rem !important;
        }
        /* Ensure hero section uses absolute minimum top spacing */
        .section-angled.hero {
            padding-top: 85px !important;
        }
    }
}


/* Extra small devices (portrait phones, <576px) */

@media (max-width: 575px) {
    .d-lg-none h2.text-5 {
        font-size: 28px !important;
    }
    .d-lg-none p.text-4 {
        font-size: 16px !important;
    }
    .d-lg-none p.text-3-5 {
        font-size: 14px !important;
    }
    .d-lg-none .btn-primary.btn-lg {
        width: 100% !important;
        max-width: 320px !important;
    }
    .d-lg-none .bg-white.rounded {
        min-height: 85px !important;
        padding: 0.65rem !important;
    }
    .d-lg-none .bg-white.rounded strong {
        font-size: 13px !important;
    }
}


/* =====================================================
   MARQUEE VISIBILITY FIX - RTL Mode
   Fix: Marquee items not visible in RTL DOM
   ===================================================== */


/* RTL marquee container - ensure visibility */

html[dir="rtl"] .marquee {
    direction: rtl !important;
    overflow: hidden;
    visibility: visible !important;
}

html[dir="rtl"] .marquee.py-3 {
    visibility: visible !important;
}

html[dir="rtl"] .marquee * {
    visibility: visible !important;
}


/* RTL marquee content - ensure items are visible and animate properly */

html[dir="rtl"] .marquee .marquee__content,
html[dir="rtl"] .marquee p,
html[dir="rtl"] .marquee span {
    display: inline-block !important;
    visibility: visible !important;
    white-space: nowrap !important;
    float: none !important;
}


/* Marquee cloned elements visibility */

html[dir="rtl"] .marquee [data-clone-element] {
    visibility: visible !important;
    display: inline-block !important;
}


/* Marquee links in RTL */

html[dir="rtl"] .marquee-link {
    display: inline-block !important;
    visibility: visible !important;
    white-space: nowrap !important;
}


/* RTL marquee animation direction - animate from left to right (opposite of LTR) */

html[dir="rtl"] .marquee[data-duplicated="true"] .marquee__content {
    animation-direction: normal !important;
    animation-play-state: running !important;
}

html[dir="rtl"] .marquee[data-duplicated="true"] .marquee__content:first-child {
    animation-direction: normal !important;
}


/* Ensure marquee has proper width and height */

html[dir="rtl"] .custom-pos-1 .marquee {
    min-height: 50px;
    height: auto;
    padding: 12px 0;
}


/* RTL marquee text - ensure it's visible */

html[dir="rtl"] .custom-bg-gradient-1 .marquee .marquee-link {
    color: #1a1a1a !important;
    visibility: visible !important;
}

html[dir="rtl"] .custom-bg-gradient-1 .marquee .text-5-5 {
    font-size: clamp(20px, 3vw, 28px) !important;
    visibility: visible !important;
}


/* Fix marquee overflow in RTL */

html[dir="rtl"] .marquee-container {
    overflow: visible !important;
}

html[dir="rtl"] .custom-pos-1 {
    overflow: visible !important;
}


/* ============================================
   FOOTER RTL FONT SIZING - PASHTO
   Nielsen Norman Group: Headings should be 1.5-2x larger than body text
   Bahij Muna font needs larger sizes due to script complexity
   ============================================ */


/* Pashto Footer - Base font for all footer elements */

html[lang="ps"] #footer.footer,
html[lang="ps"] #footer.footer p,
html[lang="ps"] #footer.footer span,
html[lang="ps"] #footer.footer li {
    font-size: 24px !important;
    line-height: 36px !important;
    font-weight: 400 !important;
}


/* Pashto Footer - Headings - Level 1: Section titles (Services, Products, Contact, About) */

html[lang="ps"] #footer.footer h4,
html[lang="ps"] #footer.footer h5,
html[lang="ps"] #footer.footer h6,
html[lang="ps"] #footer.footer .footer-heading {
    font-size: 32px !important;
    line-height: 44px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}


/* Override inline style from line 109 of footer.blade.php - Follow Us heading */

html[lang="ps"] #footer.footer h4.mb-3 {
    font-size: 32px !important;
    line-height: 44px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
}


/* Pashto Footer - Level 2: Social Icons */

html[lang="ps"] #footer.footer .footer-social-icon,
html[lang="ps"] #footer.footer .footer-social-icon i {
    font-size: 32px !important;
    width: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Pashto Footer - Level 3: Navigation Links */

html[lang="ps"] #footer.footer ul.list-unstyled li a,
html[lang="ps"] #footer.footer .footer-link,
html[lang="ps"] #footer.footer a.text-dark {
    font-size: 26px !important;
    line-height: 38px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
}


/* Pashto Footer - Link spacing for better touch targets */

html[lang="ps"] #footer.footer ul.list-unstyled li {
    margin-bottom: 12px !important;
}


/* Pashto Footer - Level 4: Contact Info (Phone, Email, Address) */

html[lang="ps"] #footer.footer .footer-contact-item span,
html[lang="ps"] #footer.footer .footer-brand-info p,
html[lang="ps"] #footer.footer .footer-brand-info a {
    font-size: 24px !important;
    line-height: 36px !important;
    font-weight: 400 !important;
}


/* Pashto Footer - Level 5: Copyright and Legal Text */

html[lang="ps"] #footer.footer .footer-copyright p,
html[lang="ps"] #footer.footer .footer-copyright a {
    font-size: 22px !important;
    line-height: 32px !important;
    font-weight: 500 !important;
}


/* Pashto Footer - Hover States - Clear visual feedback */

html[lang="ps"] #footer.footer a.text-dark:hover {
    opacity: 1 !important;
    color: #000000 !important;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}

html[lang="ps"] #footer.footer .footer-social-icon:hover {
    opacity: 0.8 !important;
    transform: scale(1.1);
    transition: all 0.3s ease;
}


/* Pashto Footer - Contact icons alignment */

html[lang="ps"] #footer.footer .footer-contact-icon,
html[lang="ps"] #footer.footer .footer-brand-info i {
    font-size: 20px !important;
    width: 28px !important;
    text-align: center !important;
}


/* Pashto Footer - Contact item layout */

html[lang="ps"] #footer.footer .footer-contact-item,
html[lang="ps"] #footer.footer .footer-brand-info {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
}

html[lang="ps"] #footer.footer .footer-contact-item a,
html[lang="ps"] #footer.footer .footer-brand-info a {
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
}

html[lang="ps"] #footer.footer .footer-contact-item i,
html[lang="ps"] #footer.footer .footer-brand-info i {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}


/* ============================================
   FOOTER RTL LAYOUT FIXES - ALL RTL LANGUAGES
   Proper direction handling for Arabic, Persian, Pashto
   ============================================ */


/* Footer RTL - Flex direction for row layouts */

html[dir="rtl"] #footer.footer .row {
    direction: rtl;
}


/* Footer RTL - Column alignment in footer-top section */

html[dir="rtl"] #footer.footer .footer-top .row {
    flex-direction: row-reverse;
}


/* Footer RTL - Brand section positioning */

html[dir="rtl"] #footer.footer .footer-brand-section {
    text-align: right;
}


/* Footer RTL - Follow Us section alignment */

html[dir="rtl"] #footer.footer .footer-top .col-lg-6:last-child {
    text-align: left;
}

html[dir="rtl"] #footer.footer .footer-top .col-lg-6:first-child {
    text-align: right;
}


/* Footer RTL - Icon spacing corrections */

html[dir="rtl"] #footer.footer .me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="rtl"] #footer.footer .ms-2 {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}


/* Footer RTL - Social icons gap */

html[dir="rtl"] #footer.footer .footer-social-icons {
    justify-content: flex-start;
}


/* Footer RTL - Arrow icons REMOVED (causing visual clutter in RTL) */


/* Footer RTL - Column ordering in multi-column section */

html[dir="rtl"] #footer.footer .footer-main .row>.col-lg-4:nth-child(1) {
    order: 3;
}

html[dir="rtl"] #footer.footer .footer-main .row>.col-lg-4:nth-child(2) {
    order: 2;
}

html[dir="rtl"] #footer.footer .footer-main .row>.col-lg-4:nth-child(3) {
    order: 1;
}


/* Footer RTL - Inner column ordering in right section */

html[dir="rtl"] #footer.footer .footer-main .col-lg-4 .row>.col-6:nth-child(1) {
    order: 2;
}

html[dir="rtl"] #footer.footer .footer-main .col-lg-4 .row>.col-6:nth-child(2) {
    order: 1;
}


/* Footer RTL - Contact info icon alignment */

html[dir="rtl"] #footer.footer .footer-contact-item i,
html[dir="rtl"] #footer.footer .footer-brand-info i {
    margin-left: 12px;
    margin-right: 0;
}


/* Footer RTL - Copyright bar alignment */

html[dir="rtl"] #footer.footer .footer-copyright {
    text-align: center;
}

html[dir="rtl"] #footer.footer .footer-copyright p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

html[dir="rtl"] #footer.footer .footer-copyright .d-none.d-md-inline {
    display: none !important;
}

html[dir="rtl"] #footer.footer .footer-copyright span:not(:last-child)::after {
    content: '•';
    margin-left: 8px;
    margin-right: 8px;
}


/* Footer RTL - Footer main section column spacing */

@media (min-width: 992px) {
    html[dir="rtl"] #footer.footer .footer-main .row {
        margin-right: -12px;
        margin-left: -12px;
    }
    html[dir="rtl"] #footer.footer .footer-main .col-lg-4 {
        padding-right: 12px;
        padding-left: 12px;
    }
}


/* Dari Footer - Base font for all footer elements */

html[lang="fa"] #footer.footer,
html[lang="fa"] #footer.footer p,
html[lang="fa"] #footer.footer span,
html[lang="fa"] #footer.footer li,
html[lang="fa"] #footer.footer a {
    font-size: 15px !important;
    line-height: 25px !important;
}


/* Dari Footer - Headings (override inline styles) */

html[lang="fa"] #footer.footer h4,
html[lang="fa"] #footer.footer h5,
html[lang="fa"] #footer.footer h6 {
    font-size: 19px !important;
    line-height: 29px !important;
    font-weight: 700 !important;
}


/* Override inline style from line 109 of footer.blade.php */

html[lang="fa"] #footer.footer h4.mb-3 {
    font-size: 19px !important;
    line-height: 29px !important;
}

html[lang="fa"] #footer.footer h5 {
    font-size: 17px !important;
    line-height: 27px !important;
}


/* Dari Footer - Links and list items */

html[lang="fa"] #footer.footer ul li a,
html[lang="fa"] #footer.footer .footer-link {
    font-size: 14px !important;
    line-height: 23px !important;
}


/* Footer contact info and social icons - RTL specific */

html[dir="rtl"] #footer.footer .footer-brand-info p,
html[dir="rtl"] #footer.footer .footer-brand-info a {
    font-size: 14px !important;
    line-height: 24px !important;
}

html[dir="rtl"] #footer.footer .footer-social-icon {
    font-size: 14px !important;
}

html[dir="rtl"] #footer.footer .footer-contact-list li {
    font-size: 14px !important;
    line-height: 24px !important;
}


/* Footer copyright and links */

html[dir="rtl"] #footer.footer .footer-copyright,
html[dir="rtl"] #footer.footer .footer-copyright p,
html[dir="rtl"] #footer.footer .footer-copyright a {
    font-size: 13px !important;
    line-height: 22px !important;
}


/* =====================================================
   MOBILE FOOTER - NN/g ORIENTATION PATTERN
   LTR: Left-aligned text (scannable, readable)
   RTL: Right-aligned text (mirror of LTR)
   Colors: UNCHANGED - Fanavar Steel brand guidelines
   ===================================================== */

@media (max-width: 991px) {
    /* =====================================================
       LTR: Left-Aligned Mobile Footer (English)
       Follows NN/g pattern for scannability
       ===================================================== */
    #footer.footer {
        font-size: 16px !important;
    }
    /* Footer Top Section (Yellow) - Logo and Contact LEFT-ALIGNED */
    #footer .footer-top {
        padding: 2rem 1rem !important;
    }
    #footer .footer-brand-section {
        text-align: left;
        margin-bottom: 1.5rem;
    }
    #footer .footer-brand-section a {
        display: inline-block;
    }
    #footer .footer-brand-info {
        text-align: left;
    }
    #footer .footer-brand-info p,
    #footer .footer-brand-info a {
        font-size: 15px !important;
        line-height: 1.6 !important;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
    }
    /* Follow Us Section - LEFT-ALIGNED on mobile */
    #footer .footer-top .col-lg-6:last-child {
        text-align: left;
        margin-top: 1.5rem;
    }
    #footer .footer-top .col-lg-6:last-child h4 {
        text-align: left;
        font-size: 18px !important;
        font-weight: 700 !important;
    }
    #footer .footer-social-icons {
        justify-content: flex-start !important;
    }
    #footer .footer-social-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    /* Footer Main Section (Dark) - Navigation Links LEFT-ALIGNED */
    #footer .footer-main {
        padding: 2rem 1rem !important;
    }
    #footer .footer-main .row {
        text-align: left !important;
    }
    /* All columns full width and stacked */
    #footer .footer-main .col-lg-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem;
    }
    /* Column Headings - LEFT-ALIGNED, NN/g style */
    #footer .footer-main h5 {
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-bottom: 1rem !important;
        text-align: left !important;
        text-transform: none !important;
    }
    /* Navigation Links - LEFT-ALIGNED, stacked vertically */
    #footer .footer-main ul {
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style: none !important;
    }
    #footer .footer-main ul li {
        margin-bottom: 0.625rem !important;
        text-align: left !important;
    }
    #footer .footer-main ul li a {
        font-size: 15px !important;
        line-height: 1.5 !important;
        display: inline-block;
        padding: 4px 0;
        text-align: left !important;
    }
    /* Contact Column - LEFT-ALIGNED, stacked vertically */
    #footer .footer-main .footer-contact-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0 !important;
    }
    #footer .footer-main .footer-contact-item {
        margin-bottom: 0.75rem !important;
        width: 100%;
    }
    #footer .footer-main .footer-contact-item a {
        font-size: 14px !important;
        line-height: 1.5 !important;
        justify-content: flex-start;
    }
    #footer .footer-main .footer-contact-icon {
        font-size: 14px !important;
        width: 20px !important;
        min-width: 20px !important;
        margin-right: 8px;
    }
    /* Contact and About columns - Full width, stacked */
    #footer .footer-main .col-lg-4 .row {
        flex-direction: column !important;
    }
    #footer .footer-main .col-lg-4 .row .col-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 1.5rem;
    }
    /* Copyright Bar - LEFT-ALIGNED */
    #footer .footer-copyright {
        padding: 1rem !important;
    }
    #footer .footer-copyright .text-center {
        text-align: left !important;
    }
    #footer .footer-copyright p {
        font-size: 13px !important;
        line-height: 1.6 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }
    #footer .footer-copyright a {
        font-size: 13px !important;
    }
}


/* =====================================================
   MOBILE FOOTER - RTL (Dari/Pashto)
   Mirror of LTR: RIGHT-aligned instead of left
   Colors: UNCHANGED - Fanavar Steel brand guidelines
   ===================================================== */

@media (max-width: 991px) {
    /* RTL: Footer Top - RIGHT-ALIGNED */
    html[dir="rtl"] #footer .footer-brand-section {
        text-align: right;
    }
    html[dir="rtl"] #footer .footer-brand-info {
        text-align: right;
    }
    /* Removed to allow Bootstrap to handle RTL naturally */
    /* html[dir="rtl"] #footer .footer-brand-info p,
    html[dir="rtl"] #footer .footer-brand-info a {
        flex-direction: row-reverse;
        justify-content: flex-end;
    } */
    /* RTL: Follow Us - RIGHT-ALIGNED */
    html[dir="rtl"] #footer .footer-top .col-lg-6:last-child {
        text-align: right;
    }
    html[dir="rtl"] #footer .footer-top .col-lg-6:last-child h4 {
        text-align: right;
    }
    html[dir="rtl"] #footer .footer-social-icons {
        justify-content: flex-end !important;
    }
    /* RTL: Footer Main - RIGHT-ALIGNED */
    html[dir="rtl"] #footer .footer-main .row {
        text-align: right !important;
    }
    html[dir="rtl"] #footer .footer-main h5 {
        text-align: right !important;
    }
    html[dir="rtl"] #footer .footer-main ul li {
        text-align: right !important;
    }
    html[dir="rtl"] #footer .footer-main ul li a {
        text-align: right !important;
    }
    /* RTL: Contact list - RIGHT-ALIGNED */
    html[dir="rtl"] #footer .footer-main .footer-contact-list {
        align-items: flex-end;
    }
    /* Removed to allow natural RTL */
    /* html[dir="rtl"] #footer .footer-main .footer-contact-item a {
        flex-direction: row-reverse;
        justify-content: flex-end;
    } */
    html[dir="rtl"] #footer .footer-main .footer-contact-icon {
        margin-right: 0;
        margin-left: 8px;
    }
    /* RTL: Copyright - RIGHT-ALIGNED */
    html[dir="rtl"] #footer .footer-copyright .text-center {
        text-align: right !important;
    }
    html[dir="rtl"] #footer .footer-copyright p {
        align-items: flex-end !important;
    }
}


/* =====================================================
   MOBILE FOOTER - DARI (Persian) SPECIFIC SIZING
   ===================================================== */

@media (max-width: 991px) {
    html[lang="fa"] #footer.footer .footer-brand-info p,
    html[lang="fa"] #footer.footer .footer-brand-info a {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }
    html[lang="fa"] #footer .footer-main h5 {
        font-size: 20px !important;
        font-weight: 700 !important;
    }
    html[lang="fa"] #footer .footer-main ul li a {
        font-size: 17px !important;
        line-height: 1.7 !important;
    }
    html[lang="fa"] #footer .footer-main .footer-contact-item a {
        font-size: 15px !important;
    }
    html[lang="fa"] #footer .footer-copyright p,
    html[lang="fa"] #footer .footer-copyright a {
        font-size: 14px !important;
    }
}


/* =====================================================
   MOBILE FOOTER - PASHTO SPECIFIC SIZING (Larger)
   Bahij Muna font requires larger sizes for readability
   ===================================================== */

@media (max-width: 991px) {
    html[lang="ps"] #footer.footer .footer-brand-info p,
    html[lang="ps"] #footer.footer .footer-brand-info a {
        font-size: 22px !important;
        line-height: 1.8 !important;
    }
    html[lang="ps"] #footer .footer-main h5 {
        font-size: 26px !important;
        font-weight: 700 !important;
    }
    html[lang="ps"] #footer .footer-main ul li a {
        font-size: 22px !important;
        line-height: 1.8 !important;
    }
    html[lang="ps"] #footer .footer-main .footer-contact-item a {
        font-size: 20px !important;
    }
    html[lang="ps"] #footer .footer-main .footer-contact-icon {
        font-size: 22px !important;
        width: 32px !important;
    }
    html[lang="ps"] #footer .footer-copyright p,
    html[lang="ps"] #footer .footer-copyright a {
        font-size: 20px !important;
    }
    html[lang="ps"] #footer .footer-social-icon {
        width: 52px !important;
        height: 52px !important;
        font-size: 22px !important;
    }
}


/* =====================================================
   VERY SMALL SCREENS (< 576px) - Extra compact
   ===================================================== */

@media (max-width: 575px) {
    /* All columns full width */
    #footer .footer-main .col-lg-4 {
        margin-bottom: 2rem;
    }
    /* Reduce spacing */
    #footer .footer-top,
    #footer .footer-main {
        padding: 1.5rem 0 !important;
    }
    /* Smaller social icons */
    #footer .footer-social-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }
    html[lang="ps"] #footer .footer-social-icon {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
    /* Copyright wrapping */
    #footer .footer-copyright p {
        gap: 4px !important;
    }
    #footer .footer-copyright .d-none.d-md-inline {
        display: none !important;
    }
}


/* =====================================================
   PRODUCT CARDS - Premium B2B Design with Image Support
   ===================================================== */

.product-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

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


/* Product Image Area */

.product-card-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card-image-dark {
    background: #1a1a1a;
}

.product-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

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


/* Image Placeholder */

.product-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.product-image-placeholder i {
    font-size: 48px;
    color: var(--primary, #818589);
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.product-image-placeholder .placeholder-text {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6c757d;
    
    letter-spacing: 1px;
}

.product-image-placeholder-dark {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
}

.product-image-placeholder-dark i {
    color: var(--secondary, #FCDA03);
}

.product-image-placeholder-dark .placeholder-text {
    color: rgba(255, 255, 255, 0.6);
}


/* Product Badges */

.product-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.375rem 0.875rem;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    
    letter-spacing: 0.5px;
    border-radius: 20px;
    z-index: 10;
}

.product-badge-primary {
    background: var(--secondary, #FCDA03);
    color: #1a1a1a;
}

.product-badge-security {
    background: #1a1a1a;
    color: var(--secondary, #FCDA03);
}

html[dir="rtl"] .product-badge {
    left: auto;
    right: 1rem;
}


/* Product Card Body */

.product-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card-title {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.product-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
}


/* Product Specs Grid */

.product-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.product-spec {
    text-align: center;
}

.spec-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #6c757d;
    
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.spec-value {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}


/* Product CTA */

.product-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a !important;
    text-decoration: none !important;
    background: var(--secondary, #FCDA03);
    border-radius: 30px;
    transition: all 0.2s ease;
    margin-top: auto;
}

.product-card-cta:hover {
    background: #1a1a1a;
    color: #fff !important;
    transform: translateY(-2px);
}

.product-card-cta i {
    transition: transform 0.2s ease;
}

.product-card-cta:hover i {
    transform: translateX(4px);
}

html[dir="rtl"] .product-card-cta i {
    transform: rotate(180deg);
}

html[dir="rtl"] .product-card-cta:hover i {
    transform: rotate(180deg) translateX(4px);
}


/* Trust Signals Section */

.client-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.client-logo-placeholder:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.client-logo-placeholder i {
    font-size: 32px;
    color: var(--primary, #818589);
    margin-bottom: 0.5rem;
}

.client-logo-placeholder span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    
    letter-spacing: 0.5px;
}


/* Trust Stats */

.trust-stat {
    padding: 1rem;
}

.trust-stat-number {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--primary, #818589);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.trust-stat-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
}


/* Pashto/Persian Typography */

html[lang="ps"] .product-card-title {
    font-size: 26px;
}
html[lang="fa"] .product-card-title {
    font-size: 22px;
}

html[lang="ps"] .product-card-desc {
    font-size: 20px;
    line-height: 1.8;
}
html[lang="fa"] .product-card-desc {
    font-size: 16px;
    line-height: 1.8;
}

html[lang="ps"] .spec-label {
    font-size: 16px;
}
html[lang="fa"] .spec-label {
    font-size: 12px;
}

html[lang="ps"] .spec-value {
    font-size: 20px;
}
html[lang="fa"] .spec-value {
    font-size: 16px;
}


/* Mobile Responsive */

@media (max-width: 767px) {
    .product-card-image {
        height: 220px;
    }
    .product-specs {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.75rem;
    }
    .spec-label {
        font-size: 10px;
    }
    .spec-value {
        font-size: 12px;
    }
    .trust-stat-number {
        font-size: 28px;
    }
}


/* =====================================================
   PRODUCT DETAIL PAGE - Hero Images & Gallery
   ===================================================== */

.product-detail-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f8f9fa;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-hero-dark {
    background: #1a1a1a;
}

.product-hero-img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 16px;
}


/* Product Gallery */

.product-gallery {
    margin-top: 1rem;
}

.product-gallery-item {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
    aspect-ratio: 1;
    transition: all 0.3s ease;
}

.product-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.product-gallery-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.product-gallery-item:hover img {
    transform: scale(1.08);
}


/* Gallery dark variant for security products */

.product-detail-hero-dark+.product-gallery .product-gallery-item {
    background: #2a2a2a;
}


/* RTL Support */

html[dir="rtl"] .product-gallery {
    direction: rtl;
}


/* Mobile responsiveness */

@media (max-width: 767px) {
    .product-detail-hero {
        min-height: 200px;
        border-radius: 12px;
    }
    .product-hero-img {
        max-height: 350px;
    }
    .product-gallery-item {
        border-radius: 8px;
    }
}


/* =====================================================
   BREADCRUMB NAVIGATION - Clean, Accessible Design
   ===================================================== */

.breadcrumb-nav {
    background: #f8f9fa;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-top: 80px;
    /* Account for fixed header */
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6c757d;
}

.breadcrumb-link {
    color: #6c757d !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
}

.breadcrumb-link:hover {
    color: var(--primary, #818589) !important;
}

.breadcrumb-home-icon {
    font-size: 14px;
    color: var(--secondary, #FCDA03);
}

.breadcrumb-separator {
    margin: 0 0.625rem;
    font-size: 10px;
    color: #adb5bd;
}

.breadcrumb-current {
    color: #1a1a1a;
    font-weight: 600;
}

.breadcrumb-item--active {
    color: #1a1a1a;
}


/* RTL Support */

html[dir="rtl"] .breadcrumb-list {
    direction: rtl;
}

html[dir="rtl"] .breadcrumb-item {
    direction: rtl;
}


/* Pashto/Persian Typography */

html[lang="ps"] .breadcrumb-item {
    font-size: 20px;
}
html[lang="fa"] .breadcrumb-item {
    font-size: 15px;
}

html[lang="ps"] .breadcrumb-current {
    font-size: 20px;
    font-weight: 700;
}
html[lang="fa"] .breadcrumb-current {
    font-weight: 700;
}


/* Mobile responsive */

@media (max-width: 767px) {
    .breadcrumb-nav {
        padding: 0.625rem 0;
    }
    .breadcrumb-item {
        font-size: 12px;
    }
    .breadcrumb-separator {
        margin: 0 0.375rem;
        font-size: 8px;
    }
    /* Hide middle items on very small screens */
    .breadcrumb-item:not(:first-child):not(:last-child) {
        display: none;
    }
}

@media (min-width: 768px) {
    .breadcrumb-item:not(:first-child):not(:last-child) {
        display: flex;
    }
}


/* =====================================================
   VERTICAL DROPDOWN MENU - Premium Interactive Design
   ===================================================== */

.dropdown-vertical {
    position: relative;
}

.dropdown-vertical>.dropdown-menu,
.dropdown-menu-vertical {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 320px;
    padding: 0.75rem 0;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    transform: translateY(10px);
    margin-top: 8px;
}

.dropdown-vertical:hover>.dropdown-menu,
.dropdown-vertical:hover .dropdown-menu-vertical {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-menu-vertical:hover {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Individual dropdown item */

.dropdown-vertical-item {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    text-decoration: none !important;
    color: #1a1a1a;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    margin: 0 0.5rem;
    border-radius: 8px;
}

.dropdown-vertical-item:hover {
    background: linear-gradient(90deg, rgba(252, 218, 3, 0.1) 0%, rgba(252, 218, 3, 0.05) 100%);
    border-left-color: var(--secondary, #FCDA03);
    color: #1a1a1a !important;
    transform: translateX(4px);
}


/* Icon styling */

.dropdown-vertical-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border-radius: 10px;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dropdown-vertical-icon i {
    font-size: 18px;
    color: var(--primary, #818589);
    transition: color 0.2s ease;
}

.dropdown-vertical-item:hover .dropdown-vertical-icon {
    background: linear-gradient(135deg, #FCDA03 0%, #E5E51E 100%);
}

.dropdown-vertical-item:hover .dropdown-vertical-icon i {
    color: #1a1a1a;
}


/* Text content */

.dropdown-vertical-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dropdown-vertical-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 2px;
}

.dropdown-vertical-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.3;
}


/* Arrow indicator */

.dropdown-vertical-arrow {
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.2s ease;
    color: var(--secondary, #FCDA03);
}

.dropdown-vertical-arrow i {
    font-size: 12px;
}

.dropdown-vertical-item:hover .dropdown-vertical-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* Footer with "View All" link */

.dropdown-vertical-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.dropdown-vertical-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #818589) !important;
    text-decoration: none !important;
    
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.dropdown-vertical-view-all:hover {
    color: #1a1a1a !important;
    background: rgba(0, 0, 0, 0.03);
}

.dropdown-vertical-view-all i {
    transition: transform 0.2s ease;
}

.dropdown-vertical-view-all:hover i {
    transform: translateX(4px);
}


/* RTL Support */

html[dir="rtl"] .dropdown-menu-vertical {
    left: auto;
    right: 0;
}

html[dir="rtl"] .dropdown-vertical-item {
    border-left: none;
    border-right: 3px solid transparent;
}

html[dir="rtl"] .dropdown-vertical-item:hover {
    border-left-color: transparent;
    border-right-color: var(--secondary, #FCDA03);
    transform: translateX(-4px);
}

html[dir="rtl"] .dropdown-vertical-icon {
    margin-right: 0;
    margin-left: 1rem;
}

html[dir="rtl"] .dropdown-vertical-arrow {
    transform: translateX(8px) rotate(180deg);
}

html[dir="rtl"] .dropdown-vertical-item:hover .dropdown-vertical-arrow {
    transform: translateX(0) rotate(180deg);
}

html[dir="rtl"] .dropdown-vertical-view-all i {
    transform: rotate(180deg);
}

html[dir="rtl"] .dropdown-vertical-view-all:hover i {
    transform: translateX(-4px) rotate(180deg);
}


/* Pashto Typography in Dropdown */

html[lang="ps"] .dropdown-vertical-title {
    font-size: 24px;
    font-weight: 700;
}

html[lang="ps"] .dropdown-vertical-desc {
    font-size: 18px;
}

html[lang="ps"] .dropdown-vertical-view-all {
    font-size: 20px;
}

html[lang="fa"] .dropdown-vertical-title {
    font-size: 17px;
    font-weight: 600;
}

html[lang="fa"] .dropdown-vertical-desc {
    font-size: 13px;
}


/* =====================================================
   IMAGE-BASED DROPDOWN MENU - Premium Design with Thumbnails
   "Love at First Sight" Design Principle Applied
   ===================================================== */

.dropdown-mega-images {
    position: relative;
}

.dropdown-mega-images>.dropdown-menu,
.dropdown-menu-images {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    position: absolute;
    top: 100%;
    left: 0;
    /* Wider dropdown to fit text on ONE LINE */
    min-width: 320px;
    width: max-content;
    max-width: 400px;
    padding: 1rem 0.5rem;
    background: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18), 0 10px 30px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    transform: translateY(12px);
    margin-top: 8px;
    /* Ensure no overflow cuts images */
    overflow: visible;
}

.dropdown-mega-images:hover>.dropdown-menu,
.dropdown-mega-images:hover .dropdown-menu-images {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.dropdown-menu-images:hover {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Individual image dropdown item */

.dropdown-image-item {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    text-decoration: none !important;
    color: #1a1a1a;
    transition: all 0.25s ease;
    border-left: 4px solid transparent;
    margin: 0.25rem 0.5rem;
    border-radius: 12px;
    /* Ensure enough space for image + text on one line */
    min-width: 280px;
}

.dropdown-image-item:hover {
    background: linear-gradient(90deg, rgba(252, 218, 3, 0.15) 0%, rgba(252, 218, 3, 0.05) 100%);
    border-left-color: var(--secondary, #FCDA03);
    color: #1a1a1a !important;
    transform: translateX(4px);
}


/* Image wrapper - FULL IMAGE DISPLAY (no cropping) */

.dropdown-image-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    /* NO overflow:hidden - show full image */
    overflow: visible;
    margin-right: 1rem;
    flex-shrink: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.dropdown-image {
    /* CRITICAL: Show full image without cropping */
    width: auto;
    height: auto;
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    transition: transform 0.3s ease;
    border-radius: 8px;
    /* Subtle shadow for depth */
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}

.dropdown-image-item:hover .dropdown-image-wrapper {
    transform: scale(1.05);
}

.dropdown-image-item:hover .dropdown-image {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}


/* Text content - SINGLE LINE */

.dropdown-image-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dropdown-image-title {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.3;
    margin-bottom: 3px;
    /* SINGLE LINE - no wrapping */
    white-space: nowrap;
}

.dropdown-image-desc {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #6c757d;
    line-height: 1.3;
    /* SINGLE LINE - no wrapping */
    white-space: nowrap;
}


/* Footer with "View All" link */

.dropdown-image-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.dropdown-image-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary, #818589) !important;
    text-decoration: none !important;
    
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.dropdown-image-view-all:hover {
    color: #1a1a1a !important;
    background: rgba(0, 0, 0, 0.03);
}

.dropdown-image-view-all i {
    transition: transform 0.2s ease;
}

.dropdown-image-view-all:hover i {
    transform: translateX(4px);
}


/* RTL Support - Full Image Display */

html[dir="rtl"] .dropdown-menu-images {
    left: auto;
    right: 0;
    /* Ensure no clipping in RTL */
    overflow: visible;
}

html[dir="rtl"] .dropdown-image-item {
    border-left: none;
    border-right: 4px solid transparent;
    flex-direction: row-reverse;
}

html[dir="rtl"] .dropdown-image-item:hover {
    border-left-color: transparent;
    border-right-color: var(--secondary, #FCDA03);
    transform: translateX(-4px);
}

html[dir="rtl"] .dropdown-image-wrapper {
    margin-right: 0;
    margin-left: 1rem;
    /* Ensure image not cut in RTL */
    overflow: visible;
}

html[dir="rtl"] .dropdown-image-text {
    text-align: right;
}

html[dir="rtl"] .dropdown-image-view-all i {
    transform: rotate(180deg);
    margin-left: 0;
    margin-right: 0.5rem;
}

html[dir="rtl"] .dropdown-image-view-all:hover i {
    transform: translateX(-4px) rotate(180deg);
}


/* Pashto Typography in Dropdown */

html[lang="ps"] .dropdown-image-title {
    font-size: 16px;
    font-weight: 700;
}

html[lang="ps"] .dropdown-image-desc {
    font-size: 14px;
}

html[lang="ps"] .dropdown-image-view-all {
    font-size: 15px;
}

html[lang="fa"] .dropdown-image-title {
    font-size: 15px;
    font-weight: 600;
}

html[lang="fa"] .dropdown-image-desc {
    font-size: 13px;
}


/* =====================================================
   CUSTOM MARQUEE - Full RTL/LTR Support with 100% Clickability
   Replaces jQuery marquee plugin for reliable interaction
   ===================================================== */

.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #FCDA03 0%, #E5E51E 100%);
    padding: 1rem 0;
    position: relative;
    /* CRITICAL: Ensure pointer events work at all positions */
    pointer-events: auto !important;
}

.marquee-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    /* CRITICAL: Ensure clicks pass through to children */
    pointer-events: auto !important;
}

.marquee-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    flex-shrink: 0;
    padding: 0.5rem 0;
    /* CRITICAL: Ensure clicks pass through to links */
    pointer-events: auto !important;
}

.marquee-item {
    font-family: 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #1a1a1a !important;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 0.75rem 1.5rem;
    position: relative;
    cursor: pointer;
    transition: color 0.2s ease;
    /* CRITICAL: Make links fully clickable */
    pointer-events: auto !important;
    z-index: 10;
    display: inline-block;
}

.marquee-item:hover {
    color: #4A4D4F !important;
}


/* Underline animation on hover */

.marquee-item::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    /* Don't block clicks on the ::after pseudo element */
    pointer-events: none;
}

.marquee-item:hover::after {
    transform: scaleX(1);
}

.marquee-separator {
    font-size: 22px;
    /* Don't capture clicks on separators */
    pointer-events: none;
    font-weight: 400;
    color: #4A4D4F;
    padding: 0 0.5rem;
    user-select: none;
}


/* RTL Text Direction */

html[dir="rtl"] .marquee-wrapper {
    direction: rtl;
}

html[dir="rtl"] .marquee-content {
    direction: rtl;
}

html[dir="rtl"] .marquee-item {
    direction: rtl;
}


/* Pashto/Persian font sizes in marquee */

html[lang="ps"] .marquee-item,
html[lang="fa"] .marquee-item {
    font-size: 26px;
    font-weight: 700;
}

html[lang="ps"] .marquee-separator,
html[lang="fa"] .marquee-separator {
    font-size: 26px;
}


/* Mobile responsive */

@media (max-width: 767px) {
    .marquee-item {
        font-size: 18px;
        padding: 0.5rem 1rem;
    }
    .marquee-separator {
        font-size: 18px;
    }
    html[lang="ps"] .marquee-item,
    html[lang="fa"] .marquee-item {
        font-size: 20px;
    }
}


/* ==========================================================================
   NN/g Research-Based Mobile Image Optimization
   Based on: https://www.nngroup.com/articles/photos-as-web-content/
             https://www.nngroup.com/articles/image-focused-design/
             https://www.nngroup.com/articles/big-pictures-small-screens/
   
   Key Principles:
   1. Users IGNORE decorative images, SCRUTINIZE information-carrying images
   2. Mobile users prefer text over images (reduces scrolling, faster load)
   3. Remove images that don't add information value on mobile
   4. Keep product photos, process images, and real content imagery
   ========================================================================== */


/* Service Accordion Images - Desktop Only (per NN/g mobile research) */

.service-accordion-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.service-image-wrapper {
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
}

.service-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}


/* Service Image Slider/Carousel */

.service-image-slider {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.service-image-slider .slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
}

.service-image-slider .slider-slide {
    min-width: 100%;
    height: 100%;
}

.service-image-slider .slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Slider dots indicator */

.service-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.service-slider-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease;
}

.service-slider-dots .dot.active {
    background: #FCDA03;
    transform: scale(1.2);
}


/* Signage Hero Image Optimization */

.signage-hero-img {
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}


/* ========================================================================== 
   MOBILE-FIRST IMAGE STRATEGY (< 768px)
   - Hide purely decorative hero images
   - Reduce image sizes for gallery/cards
   - Prioritize text content over imagery
   - Information-carrying images (products, processes) stay but are smaller
   ========================================================================== */

@media (max-width: 767px) {
    /* Hero sections: Hide large decorative images */
    .hero-decorative-img,
    .page-hero-background-img {
        display: none !important;
    }
    /* Product cards: Reduced height for mobile to minimize scrolling */
    .product-card-image {
        height: 180px !important;
    }
    /* Service accordion images: Explicit hiding on mobile (reinforces Bootstrap d-none d-md-block) */
    /* This ensures consistent behavior across all browsers and prevents CSS specificity issues */
    .service-image-wrapper,
    .service-accordion-img {
        display: none !important;
    }
    /* Signage hero image: Explicit hiding on mobile */
    .signage-hero-img {
        display: none !important;
    }
    /* Project cards (signage, etc.): Smaller aspect ratio */
    .signage-project-image {
        padding-top: 60% !important;
        /* Reduced from 75% */
    }
    .signage-project-card {
        margin-bottom: 1rem;
    }
    .signage-project-content {
        padding: 1rem !important;
    }
    /* Gallery images: Compact on mobile */
    .gallery-img-mobile-compact {
        max-height: 200px;
        object-fit: cover;
    }
    /* Product Hero: Reduce max height on mobile */
    .product-hero-img {
        max-height: 280px !important;
    }
    /* Text-first approach: Increase content visibility */
    .service-content {
        padding: 0 !important;
    }
    /* Reduce spacing to show more content per viewport */
    .section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    /* Mobile submenu images: Already sized at 80px in previous fix */
}


/* ========================================================================== 
   TABLET IMAGE STRATEGY (768px - 991px)
   - Balanced approach: show images but optimize sizes
   - Hero images can show but at reduced scale
   - Signage hero still hidden (uses d-lg-block which is 992px+)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .service-accordion-img {
        max-height: 220px;
    }
    .signage-project-image {
        padding-top: 65% !important;
    }
    .product-card-image {
        height: 220px !important;
    }
    .product-hero-img {
        max-height: 400px !important;
    }
    /* Signage hero: Still hidden on tablet per d-lg-block (992px+) */
    .signage-hero-img {
        display: none !important;
    }
}


/* ========================================================================== 
   INFORMATION-CARRYING IMAGES
   These images provide product/service value and should always be shown
   (but optimized for each viewport)
   ========================================================================== */


/* Product gallery images: Always show (information-carrying) */

.product-gallery-img,
.process-step-img,
.cabin-type-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}


/* Ensure lazy loading works properly */

/* img[loading="lazy"] {
    background-color: #f0f0f0;
} */


/* Loading placeholder for images */

.img-loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}


/* ==========================================================================
   RTL ADJUSTMENTS FOR IMAGE LAYOUTS
   ========================================================================== */

html[dir="rtl"] .service-content {
    text-align: right;
}

html[dir="rtl"] .signage-project-content {
    text-align: right;
}


/* ==========================================================================
   RTL FOOTER FIXES
   Fix arrow issues and layout problems in RTL mode
   ========================================================================== */

/* Remove arrows from footer links in RTL mode - ULTRA SPECIFIC */
html[dir="rtl"] #footer a.active:before,
html[dir="rtl"] #footer .footer-main a.active:before,
html[dir="rtl"] #footer .footer-copyright a.active:before,
html[dir="rtl"] #footer a:before,
html[dir="rtl"] #footer .footer-main a:before,
html[dir="rtl"] #footer .footer-copyright a:before,
html[dir="rtl"] .footer-social-icons a:before,
html[dir="rtl"] .footer-social-icon:before,
html[dir="rtl"] .footer-social-icons a.active:before,
html[dir="rtl"] .footer-social-icon.active:before {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

/* Force remove any arrow characters from footer links */
html[dir="rtl"] #footer a,
html[dir="rtl"] #footer .footer-main a,
html[dir="rtl"] #footer .footer-copyright a,
html[dir="rtl"] .footer-social-icons a {
    position: relative;
}

html[dir="rtl"] #footer a::before,
html[dir="rtl"] #footer .footer-main a::before,
html[dir="rtl"] #footer .footer-copyright a::before {
    content: none !important;
    display: none !important;
}

/* Fix footer social icons - remove any arrows */
html[dir="rtl"] .footer-social-icons a:before,
html[dir="rtl"] .footer-social-icon:before {
    content: none !important;
    display: none !important;
}

/* Fix footer top section alignment in RTL */
html[dir="rtl"] .footer-brand-section {
    text-align: right;
}

html[dir="rtl"] .footer-brand-info p,
html[dir="rtl"] .footer-brand-info a {
    text-align: right;
    direction: rtl;
}

/* Fix icon margins for RTL */
html[dir="rtl"] .footer-brand-info i.me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

 #footer a.active {
     color: #FCDA03 !important;
     opacity: 1 !important;
     font-weight: 700 !important;
     text-decoration: none !important;
     text-shadow: 0 0 8px rgba(252, 218, 3, 0.4), 0 0 16px rgba(252, 218, 3, 0.2) !important;
 }

 #footer a.active:hover,
 #footer a.active:focus {
     color: #FCDA03 !important;
     opacity: 1 !important;
     text-shadow: 0 0 8px rgba(252, 218, 3, 0.4), 0 0 16px rgba(252, 218, 3, 0.2) !important;
 }

/* Fix footer main columns alignment */
html[dir="rtl"] #footer .footer-main {
    text-align: right;
}

html[dir="rtl"] #footer .footer-main h5 {
    text-align: right;
}

html[dir="rtl"] #footer .footer-main ul {
    text-align: right;
}

html[dir="rtl"] #footer .footer-main ul li {
    text-align: right;
}

html[dir="rtl"] #footer .footer-main ul li a {
    text-align: right;
    display: inline-block;
}

/* Fix contact list icons in RTL */
html[dir="rtl"] .footer-contact-item a {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-contact-icon {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Fix footer copyright in RTL */
html[dir="rtl"] .footer-copyright p {
    direction: rtl;
}

html[dir="rtl"] .footer-copyright a {
    display: inline-block;
}

/* Fix social icons positioning in RTL */
html[dir="rtl"] #footer .col-lg-6:last-child {
    text-align: left;
}

html[dir="rtl"] #footer .col-lg-6:last-child h4 {
    text-align: left;
}

html[dir="rtl"] .footer-social-icons {
    justify-content: flex-start;
}

/* Mobile RTL fixes */
@media (max-width: 991px) {
    html[dir="rtl"] #footer .col-lg-6:last-child,
    html[dir="rtl"] #footer .col-lg-6:last-child h4 {
        text-align: center;
    }
    
    html[dir="rtl"] .footer-social-icons {
        justify-content: center;
    }
    
    html[dir="rtl"] .footer-brand-section {
        text-align: center;
    }
    
    html[dir="rtl"] .footer-brand-info p,
    html[dir="rtl"] .footer-brand-info a {
        text-align: center;
    }
    
    html[dir="rtl"] #footer .footer-main {
        text-align: right;
    }
    
    html[dir="rtl"] #footer .footer-main h5,
    html[dir="rtl"] #footer .footer-main ul,
    html[dir="rtl"] #footer .footer-main ul li,
    html[dir="rtl"] #footer .footer-main ul li a {
        text-align: right;
    }
}

/* ==========================================================================
   MOBILE MENU INLINE SEARCH FUNCTIONALITY
   ========================================================================== */

.mobile-menu-search {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.mobile-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    transition: background 0.2s ease;
}

.mobile-search-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.15);
}

.mobile-search-icon {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

.mobile-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
    padding: 0;
    font-weight: 400;
}

.mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.mobile-search-clear {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    padding: 0.25rem;
    cursor: pointer;
    margin-left: 0.5rem;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.mobile-search-clear:hover {
    color: #fff;
}

.mobile-search-results {
    margin-top: 0.75rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.mobile-search-results-title {
    padding: 0.75rem 1rem;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-search-result-item {
    display: block;
    padding: 0.875rem 1rem;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease, color 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(252, 218, 3, 0.2);
}

.mobile-search-result-item:last-child {
    border-bottom: none;
}

.mobile-search-result-item:hover,
.mobile-search-result-item:active {
    background: rgba(252, 218, 3, 0.15);
    color: #FCDA03;
}

.mobile-search-no-results {
    padding: 1.5rem 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* RTL Mobile Search */
html[dir="rtl"] .mobile-search-icon {
    margin-right: 0;
    margin-left: 0.75rem;
}

html[dir="rtl"] .mobile-search-clear {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* ==========================================================================
   MOBILE MENU LOGO VISIBILITY FIX
   White logo variant for dark backgrounds (services/products pages)
   ========================================================================== */

/* Mobile menu logo - always use white version for visibility on dark overlay */
.mobile-menu-logo img,
.mobile-menu-overlay .mobile-menu-logo img,
.mobile-menu-overlay .mobile-menu-header .mobile-menu-logo img,
#mobileMenuOverlay .mobile-menu-logo img {
    filter: brightness(0) invert(1) !important;
    /* Convert to white for dark background - force with !important to override any page-specific styles */
}

/* ==========================================================================
   FOOTER ACTIVE STATE - HEADING HIGHLIGHT
   ========================================================================== */

#footer h5.active {
    color: #FCDA03 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   HIGH-DPI / RETINA OPTIMIZATIONS
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    /* Images on retina displays render sharper with slight quality boost */
    .product-card-img,
    .product-hero-img,
    .service-accordion-img,
    .signage-project-image img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ==========================================================================
   ISSUE GROUP 1: DARK HERO NAV — Centralized dark-background navigation
   Pages with dark hero images opt in via body.dark-hero-nav
   ========================================================================== */

/* Initial state: transparent header, white text over dark hero — DESKTOP ONLY */
/* On mobile, header ALWAYS gets white background since sticky is disabled */
@media (min-width: 992px) {
    body.dark-hero-nav #header.header-effect-shrink .header-body,
    body.dark-hero-nav #header.header-transparent .header-body {
        background: transparent !important;
    }
}
@media (max-width: 991px) {
    body.dark-hero-nav #header.header-effect-shrink .header-body,
    body.dark-hero-nav #header.header-transparent .header-body {
        background: rgba(255, 255, 255, 0.97) !important;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08) !important;
    }
}

body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a.nav-link,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a.dropdown-item,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a.dropdown-toggle,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main.header-nav-main-text-capitalize nav > ul > li > a,
body.dark-hero-nav #header.header-transparent .header-nav-main nav > ul > li > a,
body.dark-hero-nav #header.header-transparent .header-nav-main nav > ul > li > a.nav-link,
body.dark-hero-nav #header.header-transparent .header-nav-main.header-nav-main-text-capitalize nav > ul > li > a {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a:hover,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a:focus {
    color: var(--secondary, #FCDA03) !important;
}

/* Active/Success state for Contact Us, FAQ, About Us, Careers, etc. on dark-hero pages */
body.dark-hero-nav #header .header-nav-main nav > ul > li.nav-active > a,
body.dark-hero-nav #header .header-nav-main nav > ul > li.nav-active > a.nav-link,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li.nav-active > a,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li.nav-active > a.nav-link,
body.dark-hero-nav #header.header-transparent .header-nav-main nav > ul > li.nav-active > a,
body.dark-hero-nav #header.header-transparent .header-nav-main nav > ul > li.nav-active > a.nav-link {
    color: var(--secondary, #FCDA03) !important;
    text-shadow: none;
}
body.dark-hero-nav #header .header-nav-main nav > ul > li.nav-active > a::after,
body.dark-hero-nav #header .header-nav-main nav > ul > li.nav-active > a.nav-link::after,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li.nav-active > a::after,
body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li.nav-active > a.nav-link::after,
body.dark-hero-nav #header.header-transparent .header-nav-main nav > ul > li.nav-active > a::after,
body.dark-hero-nav #header.header-transparent .header-nav-main nav > ul > li.nav-active > a.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--secondary, #FCDA03);
    border-radius: 1px;
}

/* Language dropdown button */
body.dark-hero-nav #header.header-effect-shrink .nav-link-custom-1 {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Logo invert for visibility on dark background */
body.dark-hero-nav #header.header-effect-shrink .header-logo img {
    filter: brightness(0) invert(1);
}

/* Search trigger button - white on dark hero */
body.dark-hero-nav #header.header-effect-shrink .search-trigger-btn {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Sticky state: maintain dark header on scroll for dark theme */
body.dark-hero-nav html.sticky-header-active #header.header-effect-shrink .header-body,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-body {
    background: rgba(15, 15, 15, 0.98) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a.nav-link,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a.dropdown-item,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a.dropdown-toggle,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main.header-nav-main-text-capitalize nav > ul > li > a {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none;
}

html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a:hover,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li > a:focus {
    color: var(--secondary, #FCDA03) !important;
}

/* Sticky: active state for Contact Us, FAQ, etc. */
html.sticky-header-active body.dark-hero-nav #header .header-nav-main nav > ul > li.nav-active > a,
html.sticky-header-active body.dark-hero-nav #header .header-nav-main nav > ul > li.nav-active > a.nav-link,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li.nav-active > a,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li.nav-active > a.nav-link {
    color: var(--secondary, #FCDA03) !important;
    text-shadow: none;
}
html.sticky-header-active body.dark-hero-nav #header .header-nav-main nav > ul > li.nav-active > a::after,
html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-nav-main nav > ul > li.nav-active > a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--secondary, #FCDA03);
    border-radius: 1px;
}

html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .nav-link-custom-1 {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none;
}

html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .header-logo img {
    filter: brightness(0) invert(1);
}

html.sticky-header-active body.dark-hero-nav #header.header-effect-shrink .search-trigger-btn {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: none;
}

/* ==========================================================================
   ISSUE GROUP 2A: TOP BAR TEXT TICKER
   ========================================================================== */

#topBarTicker {
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    max-width: 420px;
    margin: 0 1rem;
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
}

#topBarTicker .ticker-track {
    display: inline-flex;
    animation: tickerScroll 28s linear infinite;
    will-change: transform;
}

#topBarTicker .ticker-track:hover {
    animation-play-state: paused;
}

#topBarTicker .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 1.5rem;
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

#topBarTicker .ticker-item i {
    color: #FCDA03;
    font-size: 10px;
}

#topBarTicker .ticker-sep {
    color: rgba(255, 255, 255, 0.25);
    padding: 0 0.25rem;
    font-size: 10px;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

html[dir="rtl"] @keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

html[dir="rtl"] #topBarTicker .ticker-track {
    animation-name: tickerScrollRtl;
}

@keyframes tickerScrollRtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(50%); }
}

/* Fade edges for ticker */
#topBarTicker::before,
#topBarTicker::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    z-index: 2;
    pointer-events: none;
}

#topBarTicker::before {
    left: 0;
    background: linear-gradient(to right, rgba(45, 55, 72, 0.95) 0%, transparent 100%);
}

#topBarTicker::after {
    right: 0;
    background: linear-gradient(to left, rgba(45, 55, 72, 0.95) 0%, transparent 100%);
}

/* ==========================================================================
   ISSUE GROUP 2B: SEARCH ICON IN TOP BAR (centered)
   ========================================================================== */

.floating-contact-bar__center {
    /* TRUE centering: absolute positioning ignores unequal left/right widths */
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 0;
    overflow: hidden;
    max-width: 500px;
    pointer-events: auto;
}

/* RTL: absolute center still uses physical left for true centering */
html[dir="rtl"] .floating-contact-bar__center {
    left: 50% !important;
    right: auto !important;
}

#topBarSearchTrigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    padding: 6px 10px;
    height: 100%;
    transition: color 0.2s ease;
    position: relative;
    flex-shrink: 0;
    border-radius: 6px;
}

#topBarSearchTrigger:hover {
    color: #FCDA03;
    background: rgba(252, 218, 3, 0.1);
}

#topBarSearchTrigger i {
    font-size: 14px;
    transition: transform 0.2s ease;
}

#topBarSearchTrigger:hover i {
    transform: scale(1.15);
}

/* ==========================================================================
   ISSUE GROUP 3: MOBILE NAV — Consistent alignment
   ========================================================================== */

@media (max-width: 991px) {
    #header .header-body .header-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 64px;
        position: relative;
    }

    #header .header-column-mobile-menu {
        flex: 0 0 auto;
        z-index: 2;
        display: flex !important;
        align-items: center;
    }

    #header .header-column-logo {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 1;
    }

    #header .header-column-lang-mobile {
        flex: 0 0 auto;
        z-index: 2;
        display: flex !important;
        align-items: center;
    }

    /* RTL mobile: swap order */
    html[dir="rtl"] #header .header-column-mobile-menu {
        order: 3 !important;
        margin-inline-start: auto !important;
    }

    html[dir="rtl"] #header .header-column-lang-mobile {
        order: 1 !important;
        margin-inline-end: auto !important;
    }

    /* LTR mobile */
    html:not([dir="rtl"]) #header .header-column-mobile-menu {
        order: 1 !important;
    }

    html:not([dir="rtl"]) #header .header-column-lang-mobile {
        order: 3 !important;
        margin-inline-start: auto !important;
    }

    /* FIX: Override Porto shrink plugin's min-height on mobile.
       Sticky/shrink is disabled on mobile (stickyEnableOnMobile: false),
       so the 100px min-height is unnecessary and causes logo to misalign
       vertically vs hamburger & lang selector. Force consistent 64px height
       across ALL pages (homepage=header-transparent, inner=header-effect-shrink).
       Scope: #header .header-container on mobile only. Tested: homepage, FAQ, services, contact. */
    #header .header-container,
    #header.header-effect-shrink .header-container,
    #header.header-transparent .header-container {
        min-height: auto !important;
        height: auto !important;
    }

    /* Logo sizing consistency — 48px keeps breathing room in 64px header */
    #header .header-column-logo .header-logo img {
        max-height: 48px;
        width: auto;
    }

    /* Hamburger button consistent sizing (44px WCAG touch target) */
    #header .mobile-menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile language selector — consistent height with hamburger */
    #header .header-column-lang-mobile .mobile-lang-selector {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   ISSUE GROUP 4: PROJECTS PAGE — Remove white gaps between sections
   ========================================================================== */

/* Ensure seamless dark background across all project sections */
.projects-page .main,
.projects-page [role="main"] {
    background-color: #1A1A1A !important;
}

/* Kill any margin/padding gaps between sections */
.projects-page section + section,
.projects-page .hero + section,
.projects-page section + .cta-section {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Remove Porto default section margins within projects page */
.projects-page .section {
    margin: 0 !important;
    border: none !important;
}

/* Gap between hero and first content section */
.projects-page .hero {
    margin-bottom: 0 !important;
    border-bottom: none !important;
}

/* Ensure the main wrapper doesn't add white borders/margins */
.body:has(.projects-page) {
    background-color: #1A1A1A !important;
    border: none !important;
}

/* Footer gap elimination */
.body:has(.projects-page) + footer,
.body:has(.projects-page) + #footer {
    border-top: none !important;
    margin-top: 0 !important;
}

/* ==========================================================================
   ISSUE GROUP 5A: FOOTER DESKTOP — Center navigation links (Layer 2)
   ========================================================================== */

#footer .footer-main .row {
    justify-content: center !important;
}

/* Footer nav columns: LTR = left-aligned, RTL = right-aligned */
#footer .footer-main .row > [class*="col-lg-2"] {
    text-align: left !important;
}

#footer .footer-main .row > [class*="col-lg-2"] h5,
#footer .footer-main .row > [class*="col-lg-2"] .list-unstyled {
    text-align: left !important;
}

/* RTL: right-aligned footer nav columns */
html[dir="rtl"] #footer .footer-main .row > [class*="col-lg-2"] {
    text-align: right !important;
}

html[dir="rtl"] #footer .footer-main .row > [class*="col-lg-2"] h5,
html[dir="rtl"] #footer .footer-main .row > [class*="col-lg-2"] .list-unstyled {
    text-align: right !important;
}

/* LTR: left-aligned footer nav columns */
html:not([dir="rtl"]) #footer .footer-main .row > [class*="col-lg-2"] {
    text-align: left !important;
}

html:not([dir="rtl"]) #footer .footer-main .row > [class*="col-lg-2"] h5,
html:not([dir="rtl"]) #footer .footer-main .row > [class*="col-lg-2"] .list-unstyled {
    text-align: left !important;
}

/* Contact column links with icons - LTR: flex-start, RTL: flex-end */
#footer .footer-main .list-unstyled li a.d-inline-flex {
    justify-content: flex-start;
}

html[dir="rtl"] #footer .footer-main .list-unstyled li a.d-inline-flex {
    justify-content: flex-end;
}

/* ==========================================================================
   ISSUE GROUP 5B: FOOTER DESKTOP — Social media icons (Layer 1)
   ========================================================================== */

#footer .footer-top .footer-social-icons {
    display: flex !important;
    gap: 1rem !important;
    justify-content: center !important;
}

#footer .footer-top .footer-social-icon {
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    border: 2px solid transparent !important;
}

#footer .footer-top .footer-social-icon:hover {
    background: #1a1a1a !important;
    border-color: #FCDA03 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

#footer .footer-top .footer-social-icon i {
    font-size: 1.25rem !important;
    color: #FCDA03 !important;
    transition: transform 0.2s ease !important;
}

#footer .footer-top .footer-social-icon:hover i {
    transform: scale(1.1) !important;
}

/* Center follow-us heading and social icons on desktop */
@media (min-width: 992px) {
    #footer .footer-top .col-lg-6:last-child {
        text-align: center !important;
    }

    #footer .footer-top .footer-social-icons {
        justify-content: center !important;
    }

    /* RTL override */
    html[dir="rtl"] #footer .footer-top .col-lg-6:last-child {
        text-align: center !important;
    }

    html[dir="rtl"] #footer .footer-top .footer-social-icons {
        justify-content: center !important;
    }
}

/* ==========================================================================
   ISSUE GROUP 6: FOOTER MOBILE — First layer (logo + social icons)
   ========================================================================== */

@media (max-width: 991px) {
    #footer .footer-top .row {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    #footer .footer-top .col-lg-6 {
        text-align: center !important;
        width: 100% !important;
    }

    /* Center brand section */
    #footer .footer-top .footer-brand-section {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Brand info items - stack centered */
    #footer .footer-top .footer-brand-info p {
        justify-content: center !important;
    }

    /* Social icons - center with comfortable spacing */
    #footer .footer-top .footer-social-icons {
        justify-content: center !important;
        gap: 1rem !important;
        margin-top: 0.5rem !important;
    }

    /* Follow Us heading - center */
    #footer .footer-top .col-lg-6:last-child h4 {
        text-align: center !important;
    }

    /* RTL mobile footer alignment */
    html[dir="rtl"] #footer .footer-top .footer-brand-section,
    html[dir="rtl"] #footer .footer-top .col-lg-6 {
        text-align: center !important;
    }

    /* Removed to allow Bootstrap to handle RTL naturally */
    /* html[dir="rtl"] #footer .footer-top .footer-brand-info p {
        justify-content: center !important;
        flex-direction: row-reverse !important;
    } */

    /* Footer Layer 2 - stack columns on mobile: LTR = left, RTL = right */
    #footer .footer-main .row > [class*="col-"] {
        text-align: left !important;
    }
}

/* Mobile RTL footer columns - right-aligned */
@media (max-width: 991px) {
    html[dir="rtl"] #footer .footer-main .row > [class*="col-"] {
        text-align: right !important;
    }
}

/* ==========================================================================
   ISSUE GROUP 7: FOOTER RTL — Increase font sizes for readability
   ========================================================================== */

/* Layer 1 (Top) - Brand info */
html[dir="rtl"] #footer .footer-top .footer-brand-info p,
html[dir="rtl"] #footer .footer-top .footer-brand-info span {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
}

html[dir="rtl"] #footer .footer-top h4 {
    font-size: 1.3rem !important;
}

/* Layer 2 (Main) - Navigation links */
html[dir="rtl"] #footer .footer-main h5 {
    font-size: 1.25rem !important;
    line-height: 1.6 !important;
}

html[dir="rtl"] #footer .footer-main .list-unstyled li a {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
}

html[dir="rtl"] #footer .footer-main .list-unstyled li a span {
    font-size: 1.05rem !important;
}

/* Layer 3 (Copyright) */
html[dir="rtl"] #footer .footer-copyright .text-dark,
html[dir="rtl"] #footer .footer-copyright span,
html[dir="rtl"] #footer .footer-copyright a {
    font-size: 0.95rem !important;
    line-height: 1.8 !important;
}

/* ============================================= */
/* Issue Group 2C — Site-wide Search Overlay      */
/* Inspired by motion.dev search UI               */
/* ============================================= */

/* Fullscreen backdrop */
#searchOverlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 18vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.2s;
}
#searchOverlay.active {
    opacity: 1;
    visibility: visible;
}

/* Dark backdrop layer */
#searchOverlay .search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Search container box */
#searchOverlay .search-overlay__box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    background: #141414;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
    transform: translateY(-12px) scale(0.98);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#searchOverlay.active .search-overlay__box {
    transform: translateY(0) scale(1);
}

/* Search input area */
#searchOverlay .search-overlay__input-wrap {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#searchOverlay .search-overlay__search-icon {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    flex-shrink: 0;
}

#searchOverlay .search-overlay__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0;
    caret-color: #FCDA03;
}
#searchOverlay .search-overlay__input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

#searchOverlay .search-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    font-size: 12px;
    padding: 0;
}
#searchOverlay .search-overlay__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Results container */
#searchOverlay .search-overlay__results {
    max-height: 420px;
    overflow-y: auto;
    padding: 6px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
#searchOverlay .search-overlay__results::-webkit-scrollbar {
    width: 6px;
}
#searchOverlay .search-overlay__results::-webkit-scrollbar-track {
    background: transparent;
}
#searchOverlay .search-overlay__results::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

/* Individual result row */
#searchOverlay .search-result-item {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    transition: background 0.12s ease;
}
#searchOverlay .search-result-item:first-child {
    background: rgba(255, 255, 255, 0.04);
}
#searchOverlay .search-result-item:hover,
#searchOverlay .search-result-item.sr-active {
    background: rgba(255, 255, 255, 0.06);
}

#searchOverlay .search-result-item__title {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 2px;
}
#searchOverlay .search-result-item__desc {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Highlight matched text */
#searchOverlay .search-hl {
    background: rgba(252, 218, 3, 0.25);
    border-radius: 2px;
    padding: 0 1px;
    color: #fff;
}

/* No results state */
#searchOverlay .search-overlay__empty {
    text-align: center;
    padding: 48px 20px;
    color: rgba(255, 255, 255, 0.25);
}
#searchOverlay .search-overlay__empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    opacity: 0.4;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    #searchOverlay {
        padding-top: 10vh;
        padding-left: 12px;
        padding-right: 12px;
    }
    #searchOverlay .search-overlay__box {
        max-width: 100%;
        border-radius: 12px;
    }
    #searchOverlay .search-overlay__results {
        max-height: 55vh;
    }
}

/* RTL support */
html[dir="rtl"] #searchOverlay .search-overlay__input-wrap {
    direction: rtl;
}
html[dir="rtl"] #searchOverlay .search-overlay__input {
    text-align: right;
}

/* ============================================
   Mobile Touch Target Compliance (WCAG 2.5.5)
   Minimum 44x44px touch targets for all interactive elements on mobile
   ============================================ */
@media (max-width: 991px) {
    /* Footer links: ensure minimum touch target */
    footer a,
    .footer-copyright a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Navigation buttons and links */
    .floating-contact-bar__link,
    .floating-contact-bar__social {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Generic small buttons */
    .btn-sm,
    .btn-xs {
        min-height: 44px;
        min-width: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

/* =====================================================
   RTL CTA Arrow Direction Fix
   Scope: Porto template .body wrapper in RTL mode.
   Flips CTA arrow-right icons to point left for RTL.
   Does NOT affect: mobile menu (outside .body), footer (outside .body),
   slider chevrons (fa-chevron-right, not fa-arrow-right).
   Tested: FA, PS pages - Home, Products, Services, Projects.
   ===================================================== */
html[dir="rtl"] .body .fas.fa-arrow-right {
    transform: scaleX(-1);
    display: inline-block; /* Required for transform to work on inline elements */
}

/* =====================================================
   RTL Floating Action Buttons Position Fix
   Scope: Porto template floating-cta in RTL mode.
   Moves WhatsApp/Maps buttons to bottom-right in RTL
   (mirroring LTR bottom-right position for natural RTL UX).
   ===================================================== */
html[dir="rtl"] .floating-cta {
    left: auto;
    right: 24px;
}
@media (max-width: 767px) {
    html[dir="rtl"] .floating-cta {
        left: auto;
        right: 16px;
    }
}
html[dir="rtl"] .floating-cta-btn .cta-tooltip {
    left: auto;
    right: 70px;
}
html[dir="rtl"] .floating-cta-btn .cta-tooltip::after {
    left: auto;
    right: -6px;
    border-right-color: transparent;
    border-left-color: #000;
}
html[dir="rtl"] .floating-cta-btn:hover .cta-tooltip {
    left: auto;
    right: 75px;
}

/* =====================================================
   MOBILE: Prevent horizontal overflow (black strip fix)
   Scope: Porto template on mobile viewports.
   The hero section uses overflow-visible which can cause
   content to exceed viewport width, creating a black
   strip on the right side of the page.
   ===================================================== */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    .section.hero,
    #hero-section {
        overflow: hidden !important;
    }
    /* Ensure section-angled pseudo-elements don't overflow */
    .section-angled,
    .section-angled-content {
        overflow: hidden !important;
        max-width: 100vw !important;
    }
}

/* =====================================================
   RTL: CTA Arrow Direction Fix for Hero Buttons
   Scope: Porto template hero section CTA buttons.
   When fa-arrow-right has rotate-l-45 class in RTL,
   combine scaleX(-1) with rotate(-45deg) to point
   upper-left (↖) instead of upper-right (↗).
   ===================================================== */
html[dir="rtl"] .hero .btn .fas.fa-arrow-right.rotate-l-45,
html[dir="rtl"] .section-angled .btn .fas.fa-arrow-right.rotate-l-45 {
    transform: scaleX(-1) rotate(-45deg) !important;
    display: inline-block;
}


/* =====================================================
   RTL: Global Component Directional Fixes
   Scope: Cross-page components that use directional
   properties without RTL overrides.
   ===================================================== */

/* --- Mega Dropdown Sub-Nav Hover Indent --- */
html[dir="rtl"] .dropdown-mega-sub-nav li a:hover {
    padding-left: 0;
    padding-right: 5px;
}

/* --- Mega Dropdown Arrow Indicator --- */
html[dir="rtl"] .dropdown-mega>a::after {
    margin-left: 0;
    margin-right: 5px;
}

/* --- Mobile Menu Active State --- */
html[dir="rtl"] .mobile-menu-link.active {
    border-left: none;
    border-right: 3px solid var(--secondary);
    padding-left: 25px;
    padding-right: 22px;
}

/* --- Hero Badge Icon Spacing --- */
html[dir="rtl"] .hero-first-badge i {
    margin-right: 0;
    margin-left: 8px;
}

/* --- Differentiator Badge --- */
html[dir="rtl"] .differentiator-badge {
    margin-left: 0;
    margin-right: 10px;
}

/* --- Impact Numbers Spacing --- */
html[dir="rtl"] .custom-highlight-text-1 {
    margin-right: 0;
    margin-left: 6px;
}

/* --- Quick Contact Bar Icon Spacing --- */
html[dir="rtl"] .quick-contact-bar i {
    margin-right: 0;
    margin-left: 8px;
}

/* --- Back to Top Button Position --- */
html[dir="rtl"] .back-to-top {
    left: auto;
    right: 25px;
}

@media (max-width: 767px) {
    html[dir="rtl"] .back-to-top {
        left: auto;
        right: 16px;
    }
}

/* --- Product Card CTA Arrow (fix wrong translateX direction) --- */
html[dir="rtl"] .product-card-cta:hover i {
    transform: rotate(180deg) translateX(-4px);
}


/* =========================================================
   SHARED COMPONENT LIBRARY
   Scope: All Porto template pages.
   Purpose: Eliminate per-page component duplication for
   buttons, section eyebrows, CTA sections, and filter tabs.
   Tested: All Porto pages, 3 viewports (desktop/tablet/mobile).
   ========================================================= */

/* =========================================================
   BUTTONS — Two primary variants used site-wide.
   Pill shape (border-radius: 50px) — the brand standard.
   ========================================================= */

.porto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.5;
    min-height: 48px;
    white-space: nowrap;
}
.porto-btn:focus-visible {
    outline: 2px solid var(--secondary, #FCDA03);
    outline-offset: 2px;
}

/* Primary: Yellow fill — the main CTA across all pages */
.porto-btn--primary {
    background: var(--secondary, #FCDA03);
    color: #1a1a1a;
    border-color: var(--secondary, #FCDA03);
}
.porto-btn--primary:hover,
.porto-btn--primary:focus {
    background: #e5c503;
    border-color: #e5c503;
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(252, 218, 3, 0.3);
    text-decoration: none;
}

/* Secondary outline (white) — for dark backgrounds */
.porto-btn--secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.porto-btn--secondary:hover,
.porto-btn--secondary:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Dark fill — for light backgrounds */
.porto-btn--dark {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
}
.porto-btn--dark:hover,
.porto-btn--dark:focus {
    background: #333;
    border-color: #333;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* Outline dark — for light backgrounds where fill is too heavy */
.porto-btn--outline-dark {
    background: transparent;
    color: #1a1a1a;
    border-color: rgba(0, 0, 0, 0.2);
}
.porto-btn--outline-dark:hover,
.porto-btn--outline-dark:focus {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Size modifier: large buttons for hero sections */
.porto-btn--lg {
    padding: 1rem 2.5rem;
    font-size: 14px;
    min-height: 52px;
}

/* Arrow icon inside buttons */
.porto-btn i,
.porto-btn svg {
    transition: transform 0.3s ease;
}
.porto-btn:hover i,
.porto-btn:hover svg {
    transform: translateX(4px);
}
html[dir="rtl"] .porto-btn:hover i,
html[dir="rtl"] .porto-btn:hover svg {
    transform: translateX(-4px);
}


/* =========================================================
   SECTION EYEBROW — Small label above section titles.
   Used for category signals like "Featured Work", "Why Join Us".
   ========================================================= */

.porto-eyebrow {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    
    border-radius: 50px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Dark variant: yellow text on subtle yellow bg (for dark sections) */
.porto-eyebrow--dark {
    background: rgba(252, 218, 3, 0.15);
    color: var(--secondary, #FCDA03);
}

/* Light variant: muted text on gray bg (for light sections) */
.porto-eyebrow--light {
    background: rgba(129, 133, 137, 0.1);
    color: #818589;
}

/* Solid variant: yellow fill with dark text (bold call-out) */
.porto-eyebrow--solid {
    background: var(--secondary, #FCDA03);
    color: #1a1a1a;
}


/* =========================================================
   CTA SECTION — Bottom-of-page call-to-action strip.
   Consistent across all pages: dark bg, centered text, two buttons.
   ========================================================= */

.porto-cta-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
    padding: 80px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.porto-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image:
        linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.porto-cta-section__eyebrow {
    display: inline-block;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    
    border-radius: 50px;
    margin-bottom: 20px;
    background: rgba(252, 218, 3, 0.15);
    color: var(--secondary, #FCDA03);
}

.porto-cta-section__title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.2;
}

.porto-cta-section__desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 17px;
    max-width: 600px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.porto-cta-section__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

@media (max-width: 575px) {
    .porto-cta-section {
        padding: 56px 0;
    }
    .porto-cta-section__actions {
        flex-direction: column;
        align-items: center;
    }
    .porto-cta-section__actions .porto-btn {
        width: 100%;
        max-width: 300px;
    }
}


/* =========================================================
   FILTER TABS — Category filter pills for list pages
   (Projects, Careers, FAQ).
   ========================================================= */

.porto-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.porto-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.porto-filter-tab:hover {
    border-color: rgba(252, 218, 3, 0.4);
    color: #fff;
}

.porto-filter-tab.active,
.porto-filter-tab[aria-selected="true"] {
    background: var(--secondary, #FCDA03);
    color: #1a1a1a;
    border-color: var(--secondary, #FCDA03);
}

/* Count badge inside filter tab */
.porto-filter-tab__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 800;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.15);
    color: inherit;
}

.porto-filter-tab.active .porto-filter-tab__count {
    background: rgba(0, 0, 0, 0.15);
}

/* Light background variant for filter tabs */
.porto-filter-tabs--light .porto-filter-tab {
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}
.porto-filter-tabs--light .porto-filter-tab:hover {
    border-color: rgba(0, 0, 0, 0.3);
    color: #1a1a1a;
}
.porto-filter-tabs--light .porto-filter-tab.active {
    background: var(--secondary, #FCDA03);
    color: #1a1a1a;
    border-color: var(--secondary, #FCDA03);
}

/* Icon inside filter tab */
.porto-filter-tab i {
    font-size: 12px;
}

@media (max-width: 575px) {
    .porto-filter-tabs {
        gap: 8px;
    }
    .porto-filter-tab {
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* ==========================================================
   SERVICES DROPDOWN GRID LAYOUT - 3 items per row
   ========================================================== */

/* Make the dropdown wider for grid layout */
.dropdown-mega-images .dropdown-menu-images {
    width: 900px !important;
    max-width: 95vw;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 24px 20px 16px 20px;
}

/* Each service item takes 1/3 of the width (3 per row) */
.dropdown-mega-images .dropdown-menu-images li:not(.dropdown-image-footer) {
    width: calc(33.333% - 12px);
    margin: 0 6px 16px 6px;
    display: block;
}

/* Footer spans full width and stays at bottom */
.dropdown-mega-images .dropdown-menu-images li.dropdown-image-footer {
    width: 100%;
    margin-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 16px;
}

/* RTL adjustments */
html[dir="rtl"] .dropdown-mega-images .dropdown-menu-images {
    left: auto !important;
    right: 0 !important;
}

/* Responsive: 2 columns on medium screens */
@media (max-width: 991px) {
    .dropdown-mega-images .dropdown-menu-images {
        width: 600px !important;
    }
    .dropdown-mega-images .dropdown-menu-images li:not(.dropdown-image-footer) {
        width: calc(50% - 12px);
    }
}

/* Responsive: 1 column on small screens */
@media (max-width: 767px) {
    .dropdown-mega-images .dropdown-menu-images {
        width: 320px !important;
    }
    .dropdown-mega-images .dropdown-menu-images li:not(.dropdown-image-footer) {
        width: 100%;
        margin: 0 0 12px 0;
    }
}

/* =====================================================
   COMMON RTL STYLES - Centralized for all Porto pages
   =====================================================
   These styles provide consistent RTL behavior across
   all Porto template pages. Page-specific overrides
   should be minimal and use more specific selectors.
   ===================================================== */

/* Base RTL direction */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Generic text alignment for RTL */
html[dir="rtl"] .text-start {
    text-align: right !important;
}

html[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Hero sections - common pattern across all pages */
html[dir="rtl"] .hero-content,
html[dir="rtl"] [class*="hero-content"] {
    text-align: right;
}

html[dir="rtl"] .hero-ctas,
html[dir="rtl"] [class*="hero-ctas"] {
    justify-content: flex-start;
}

/* Section headers */
html[dir="rtl"] .section-header,
html[dir="rtl"] [class*="section-header"] {
    text-align: right;
}

/* Stats/counters alignment */
html[dir="rtl"] [class*="stat"] {
    text-align: right;
}

/* Cards with RTL support */
html[dir="rtl"] .card,
html[dir="rtl"] [class*="-card"] {
    text-align: right;
}

/* Flex row reversal for RTL */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

/* Icon margins in RTL */
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }

html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }

/* Arrow icons flip in RTL */
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] [class*="arrow-right"] {
    transform: scaleX(-1);
}

html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] [class*="arrow-left"] {
    transform: scaleX(-1);
}

/* Form elements RTL */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="rtl"] select {
    background-position: left 0.75rem center;
}

/* Lists in RTL */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 1.5rem;
}

/* Navigation dropdowns in RTL */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* Modal content RTL */
html[dir="rtl"] .modal-content {
    text-align: right;
}

html[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem;
}

/* Contact items with icons */
html[dir="rtl"] [class*="contact-item"] {
    flex-direction: row-reverse;
}

/* Grid items RTL */
html[dir="rtl"] [class*="grid"] {
    direction: rtl;
}

/* Step/process indicators */
html[dir="rtl"] [class*="step"] {
    direction: rtl;
}

/* Testimonial/quotes */
html[dir="rtl"] [class*="testimonial"] {
    text-align: right;
}

html[dir="rtl"] [class*="testimonial"] [class*="author"] {
    flex-direction: row-reverse;
}

/* Job/position cards */
html[dir="rtl"] [class*="job-card"] {
    text-align: right;
}

html[dir="rtl"] [class*="job-card"] [class*="meta"] {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Button groups */
html[dir="rtl"] .btn-group {
    flex-direction: row-reverse;
}

/* Page-specific generic fixes */
html[dir="rtl"] [class*="hero-title"],
html[dir="rtl"] [class*="section-title"],
html[dir="rtl"] [class*="card-title"] {
    text-align: right;
}

html[dir="rtl"] [class*="hero-subtitle"],
html[dir="rtl"] [class*="section-desc"],
html[dir="rtl"] [class*="card-desc"] {
    text-align: right;
}

/* Mobile-specific RTL adjustments */
@media (max-width: 767px) {
    html[dir="rtl"] [class*="hero-ctas"] {
        align-items: flex-end;
    }
    
    html[dir="rtl"] [class*="stat"] {
        text-align: center;
    }
    
    html[dir="rtl"] [class*="job-card"] [class*="header"] {
        align-items: flex-end;
    }
}

/* =====================================================
   FOOTER RTL - MATCH LTR EXACTLY (Bootstrap 5 handles layout)
   Override conflicting Pashto/Dari/RTL rules so RTL footer
   has same feel, line-height, and structure as English.
   ===================================================== */

/* Force logo + contact to stack vertically (like LTR) */
#footer.footer .footer-brand-section {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
}

html[dir="rtl"] #footer.footer .footer-brand-section,
html[lang="fa"] #footer.footer .footer-brand-section,
html[lang="ps"] #footer.footer .footer-brand-section {
    align-items: flex-end !important;
    text-align: right !important;
}

/* Force contact info wrapper to be a vertical column, not a row */
html[dir="rtl"] #footer.footer .footer-brand-info,
html[lang="fa"] #footer.footer .footer-brand-info,
html[lang="ps"] #footer.footer .footer-brand-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
}

/* Ensure contact rows flow naturally right-to-left */
html[dir="rtl"] #footer.footer .footer-brand-info p,
html[dir="rtl"] #footer.footer .footer-brand-info a,
html[lang="fa"] #footer.footer .footer-brand-info p,
html[lang="fa"] #footer.footer .footer-brand-info a,
html[lang="ps"] #footer.footer .footer-brand-info p,
html[lang="ps"] #footer.footer .footer-brand-info a {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

/* RTL + Pashto + Dari: same line-height as LTR (1.7) */
html[dir="rtl"] #footer.footer p,
html[dir="rtl"] #footer.footer .footer-brand-info p,
html[dir="rtl"] #footer.footer .footer-brand-info a,
html[dir="rtl"] #footer.footer ul li a,
html[dir="rtl"] #footer.footer .footer-copyright span,
html[dir="rtl"] #footer.footer .footer-copyright a,
html[lang="ps"] #footer.footer p,
html[lang="ps"] #footer.footer .footer-brand-info p,
html[lang="ps"] #footer.footer .footer-brand-info a,
html[lang="ps"] #footer.footer ul.list-unstyled li a,
html[lang="ps"] #footer.footer .footer-copyright p,
html[lang="ps"] #footer.footer .footer-copyright a,
html[lang="fa"] #footer.footer p,
html[lang="fa"] #footer.footer .footer-brand-info p,
html[lang="fa"] #footer.footer .footer-brand-info a,
html[lang="fa"] #footer.footer ul li a,
html[lang="fa"] #footer.footer .footer-copyright p,
html[lang="fa"] #footer.footer .footer-copyright a {
    line-height: 1.7 !important;
}

/* Contact rows: Bootstrap 5 me-* classes handle RTL automatically */


/* =====================================================
   PASHTO READABILITY — Screenshot-driven overrides
   Bahij Muna has smaller x-height than Latin; Pashto script
   needs 1.4–1.6× larger sizes for equivalent legibility.
   Do NOT match English sizes — optimize for Pashto script.
   ===================================================== */

/* Service cards (home + full-range) — Pashto script needs ~1.5× Latin for legibility */
html[lang="ps"] .service-card-new__content h5 {
    font-size: 1.9rem !important;
    line-height: 1.4 !important;
}
html[lang="ps"] .service-card-new__content p {
    font-size: 1.4rem !important;
    line-height: 1.7 !important;
}
html[lang="ps"] .service-card-new__arrow {
    font-size: 1.25rem !important;
}
html[lang="ps"] .full-range-services-section .service-card-new__content h5 {
    font-size: 1.9rem !important;
}
html[lang="ps"] .full-range-services-section .service-card-new__content p {
    font-size: 1.4rem !important;
}
html[lang="ps"] .full-range-services-section .service-card-new__arrow {
    font-size: 1.25rem !important;
}

/* Fire door page: applications list (معمولي کارونې) */
html[lang="ps"] #fire-door-page .product-subsection-title {
    font-size: clamp(38px, 5.5vw, 56px) !important;
}
html[lang="ps"] #fire-door-page .app-column li {
    font-size: 1.6rem !important;
    line-height: 1.65 !important;
}
html[lang="ps"] #fire-door-page .app-column li i {
    font-size: 1.35rem !important;
}

/* Fire door page: product benefits list */
html[lang="ps"] #fire-door-page .product-benefits-list li strong,
html[lang="ps"] #fire-door-page .product-benefits-list li span {
    font-size: 1.35rem !important;
    line-height: 1.65 !important;
}

/* Fire door page: specs table */
html[lang="ps"] #fire-door-page .specs-table th,
html[lang="ps"] #fire-door-page .specs-table td {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
}

/* Fire door page: sidebar cards */
html[lang="ps"] #fire-door-page .sidebar-card h4,
html[lang="ps"] #fire-door-page .sidebar-card h5 {
    font-size: 1.6rem !important;
}
html[lang="ps"] #fire-door-page .sidebar-card p,
html[lang="ps"] #fire-door-page .sidebar-card--primary p {
    font-size: 1.3rem !important;
    line-height: 1.7 !important;
}
html[lang="ps"] #fire-door-page .feature-list li {
    font-size: 1.3rem !important;
}

/* Hero sections: title, subtitle, buttons */
html[lang="ps"] .wsd-hero__title,
html[lang="ps"] .ca-headline-xl,
html[lang="ps"] .atd-hero__title {
    font-size: clamp(38px, 6vw, 56px) !important;
    line-height: 1.2 !important;
}
html[lang="ps"] .wsd-hero__subtitle,
html[lang="ps"] .wsd-hero .text-4-5,
html[lang="ps"] .atd-hero .text-4-5 {
    font-size: 1.45rem !important;
    line-height: 1.75 !important;
}
html[lang="ps"] .wsd-btn,
html[lang="ps"] #fire-door-page .wsd-btn,
html[lang="ps"] #fire-door-page .cs-btn {
    font-size: 1.2rem !important;
    padding: 0.8rem 1.75rem !important;
}

/* Benefits section (Why Choose Us) — used on fire-doors, anti-theft, etc. */
html[lang="ps"] .cs-service-title {
    font-size: clamp(32px, 4.5vw, 48px) !important;
    line-height: 1.25 !important;
}
html[lang="ps"] .cs-service-desc {
    font-size: 1.35rem !important;
    line-height: 1.7 !important;
}
html[lang="ps"] .product-type-card--benefit strong {
    font-size: 1.35rem !important;
    line-height: 1.5 !important;
}
html[lang="ps"] .product-type-card--benefit span {
    font-size: 1.2rem !important;
    line-height: 1.65 !important;
}
html[lang="ps"] .cs-service-cta {
    font-size: 1.15rem !important;
}


/* =====================================================
   PASHTO AUDIT — Central overrides from Playwright report
   Targets every culprit (computed font-size < 18px) across
   all pages so one fix applies site-wide. Min Pashto: 20px.
   ===================================================== */

/* Header: nav dropdown and main nav */
html[lang="ps"] .dropdown-item,
html[lang="ps"] #header .dropdown-menu a,
html[lang="ps"] #mainNav .nav-pills a {
    font-size: 1.25rem !important;
    line-height: 1.5 !important;
}
html[lang="ps"] #mainNav,
html[lang="ps"] .dropdown-menu,
html[lang="ps"] .header-nav-main nav ul li {
    font-size: 1.2rem !important;
}
html[lang="ps"] .desktop-lang-switcher,
html[lang="ps"] .desktop-lang-dropdown {
    font-size: 1.2rem !important;
}

/* Home: hero values, client logos, track record, trailer */
html[lang="ps"] .hero-new-value-item {
    font-size: 1.2rem !important;
}
html[lang="ps"] .client-logo-name {
    font-size: 1.2rem !important;
}
html[lang="ps"] .track-record-unit {
    font-size: 1.2rem !important;
}
html[lang="ps"] .services-footer-new,
html[lang="ps"] .services-footer-new a,
html[lang="ps"] .services-footer-new span {
    font-size: 1.2rem !important;
}
html[lang="ps"] .fp-trailer-preview,
html[lang="ps"] .fp-trailer-cta {
    font-size: 1.2rem !important;
}
html[lang="ps"] .fp-trailer-highlight-item {
    font-size: 1.15rem !important;
}
html[lang="ps"] .fp-btn-more {
    font-size: 1.2rem !important;
}

/* Industries section */
html[lang="ps"] .fs-ind-eyebrow {
    font-size: 1.2rem !important;
}
html[lang="ps"] .fs-ind-link {
    font-size: 1.25rem !important;
}
html[lang="ps"] .fs-ind-metric-label {
    font-size: 1.2rem !important;
}

/* Home: video badge, factory section, contact strip */
html[lang="ps"] .hp-video-duration-badge__text {
    font-size: 1.15rem !important;
}
html[lang="ps"] .hp-factory-eyebrow {
    font-size: 1.2rem !important;
}
html[lang="ps"] .hp-factory-metric-label {
    font-size: 1.2rem !important;
}
html[lang="ps"] .hp-factory-equipment__item {
    font-size: 1.2rem !important;
}
html[lang="ps"] .hp-factory-cta {
    font-size: 1.25rem !important;
}
html[lang="ps"] .hp-contact-eyebrow {
    font-size: 1.2rem !important;
}
html[lang="ps"] .hp-contact-phone__label {
    font-size: 1.15rem !important;
}
html[lang="ps"] .hp-contact-label {
    font-size: 1.2rem !important;
}
html[lang="ps"] .hp-contact-submit,
html[lang="ps"] #hpContactSubmitBtn {
    font-size: 1.2rem !important;
}
html[lang="ps"] .text-3-5 {
    font-size: 1.2rem !important;
}
html[lang="ps"] .testimonial-result {
    font-size: 1.2rem !important;
}

/* Footer (catch remaining) */
html[lang="ps"] .footer-copyright,
html[lang="ps"] .footer-copyright a,
html[lang="ps"] .footer-copyright p {
    font-size: 1.2rem !important;
}
html[lang="ps"] #footer a.text-dark {
    font-size: 1.2rem !important;
}

/* Sticky CTAs (signage, cutting, fire-door) */
html[lang="ps"] .signage-sticky-btn,
html[lang="ps"] .cutting-sticky-btn,
html[lang="ps"] .fire-door-sticky-btn {
    font-size: 1.2rem !important;
}

/* CS (service page) buttons */
html[lang="ps"] .cs-btn,
html[lang="ps"] .cs-btn-primary,
html[lang="ps"] .cs-btn-whatsapp {
    font-size: 1.2rem !important;
}

/* FAQ */
html[lang="ps"] .faq-nav-tab,
html[lang="ps"] .porto-filter-tab.faq-nav-tab {
    font-size: 1.2rem !important;
}
html[lang="ps"] .faq-item-header .faq-item-question {
    font-size: 1.3rem !important;
}
html[lang="ps"] .faq-item-body p,
html[lang="ps"] .faq-item-body li {
    font-size: 1.25rem !important;
}
html[lang="ps"] .faq-search-input::placeholder {
    font-size: 1.2rem !important;
}
html[lang="ps"] label.sr-only.visually-hidden {
    font-size: 1.1rem !important;
}

/* Careers */
html[lang="ps"] .careers-dark-wrapper .section-eyebrow,
html[lang="ps"] .careers-dark-wrapper .porto-eyebrow {
    font-size: 1.2rem !important;
}
html[lang="ps"] .careers-dark-wrapper .benefit-title {
    font-size: 1.35rem !important;
}
html[lang="ps"] .careers-dark-wrapper .benefit-desc {
    font-size: 1.25rem !important;
}
html[lang="ps"] .careers-dark-wrapper .value-content h3 {
    font-size: 1.4rem !important;
}
html[lang="ps"] .careers-dark-wrapper .value-content p {
    font-size: 1.25rem !important;
}
html[lang="ps"] .careers-dark-wrapper .job-card-title {
    font-size: 1.35rem !important;
}
html[lang="ps"] .careers-dark-wrapper .job-card-dept,
html[lang="ps"] .careers-dark-wrapper .job-card-desc,
html[lang="ps"] .careers-dark-wrapper .job-card-meta-item {
    font-size: 1.2rem !important;
}
html[lang="ps"] .careers-dark-wrapper .filter-btn {
    font-size: 1.2rem !important;
}
html[lang="ps"] .careers-dark-wrapper .step-title {
    font-size: 1.3rem !important;
}
html[lang="ps"] .careers-dark-wrapper .step-desc {
    font-size: 1.2rem !important;
}
html[lang="ps"] .careers-dark-wrapper .requirement-label,
html[lang="ps"] .careers-dark-wrapper .requirements-email p,
html[lang="ps"] .careers-dark-wrapper .requirements-email a {
    font-size: 1.2rem !important;
}

/* About Us */
html[lang="ps"] #caMachList,
html[lang="ps"] #caMachList li {
    font-size: 1.2rem !important;
}

/* Contact / generic small text */
html[lang="ps"] .text-muted.small {
    font-size: 1.15rem !important;
}
html[lang="ps"] p.mb-2.d-flex.align-items-center,
html[lang="ps"] p.mb-0.d-flex.align-items-center {
    font-size: 1.2rem !important;
}
html[lang="ps"] a.d-flex.align-items-center {
    font-size: 1.2rem !important;
}