/*
Theme Name: KJ Pro
Theme URI: https://kjinsulation.com
Description: KJ Pro — premium custom WordPress theme for KJ Insulations. Includes homepage, About, Services, Projects, Contact + 9 dedicated service inner pages with a modern mega-menu, sticky navigation, print-ready PDF datasheet download system, and industrial UI.
Version: 2.2.0
Author: KJ Insulation
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kj-pro
Tags: custom-theme, responsive, business, industrial, corporate, insulation
*/

/* ==========================================
   1. DESIGN SYSTEM & CUSTOM PROPERTIES
   ========================================== */
:root {
    --color-primary: #0a1c36;       /* Deep Navy matching layout backgrounds */
    --color-primary-light: #152c4e; /* Medium Navy */
    --color-primary-rgb: 10, 28, 54;
    --color-accent-red: #e3282b;    /* Exact Red from logo */
    --color-accent-red-hover: #b9151b;
    --color-accent-blue: #224b9c;   /* Royal Blue from logo */
    --color-accent-blue-hover: #17387d;
    --color-text-dark: #1e293b;     /* Slate 800 */
    --color-text-muted: #64748b;    /* Slate 500 */
    --color-text-light: #f8fafc;    /* Slate 50 */
    --color-bg-light: #f8fafc;
    --color-bg-white: #ffffff;
    --color-border: #e2e8f0;
    
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow-red: 0 0 15px rgba(227, 40, 43, 0.4);
    --shadow-glow-blue: 0 0 15px rgba(34, 75, 156, 0.3);
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    --max-width: 1200px;
}

/* ==========================================
   2. BASE STYLES & RESET
   ========================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-bg-white);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary);
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    outline: none;
}

/* ==========================================
   3. TYPOGRAPHY & UTILITIES
   ========================================== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (max-width: 768px) {
    .section-padding {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

.text-center { text-align: center; }
.text-right { text-align: right; }

.section-subtitle-prefix {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-accent-red);
    display: block;
    margin-bottom: 0.5rem;
}

.section-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.section-title span {
    color: var(--color-accent-red);
}

.section-description {
    max-width: 700px;
    margin: 0 auto 3.5rem auto;
    color: var(--color-text-muted);
    font-size: 1.05rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    gap: 0.5rem;
    font-size: 0.95rem;
}

.btn-primary {
    background-color: var(--color-accent-red);
    color: var(--color-bg-white);
    border: 1px solid var(--color-accent-red);
}

.btn-primary:hover {
    background-color: var(--color-accent-red-hover);
    border-color: var(--color-accent-red-hover);
    box-shadow: var(--shadow-glow-red);
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid rgba(10, 28, 54, 0.2);
}

.btn-outline:hover {
    background-color: rgba(34, 75, 156, 0.05);
    border-color: var(--color-accent-blue);
    color: var(--color-accent-blue);
    transform: translateY(-2px);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

/* ==========================================
   4. HEADER & STICKY NAVIGATION (MEGA MENU)
   ========================================== */
.site-header {
    width: 100%;
    position: relative;
    z-index: 100;
}

/* Top Bar */
.top-bar {
    background: #E3282B;
        background: linear-gradient(199deg, rgba(227, 40, 43, 1) 0%, rgba(30, 71, 157, 1) 60%);
    color: var(--color-text-light);
    font-size: 0.85rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-info {
    display: flex;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-item i {
    color: var(--color-accent-red);
}

.top-bar-social {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.top-bar-social a:hover {
    color: var(--color-accent-red);
}

.whatsapp-link {
    background-color: #25d366;
     display: flex;
    align-items: center;
    gap: 6px;
    background: #25D366;
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    text-decoration: none;
}

.whatsapp-link:hover {
    background-color: #128c7e;
    color: white !important;
}
@media (max-width: 768px) {
    .whatsapp-text {
        display: none;
    }

    .whatsapp-link {
        padding: 8px;
        width: 36px;
        height: 36px;
        justify-content: center;
        border-radius: 50%;
    }
}

/* Main Navbar & Sticky states */
.navbar {
    background-color: var(--color-bg-white);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 0;

    position: sticky;   /* Changed from relative */
    top: 0;

    z-index: 9999;      /* Increased from 99 */

    transition: all var(--transition-normal);
}

.navbar.is-sticky {
    padding: 0.75rem 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-md);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 48px;
    transition: height var(--transition-normal);
}

.navbar.is-sticky .logo img {
    height: 40px;
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    font-weight: 600;
    color: var(--color-primary);
    position: relative;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-red);
    transition: var(--transition-normal);
}

.nav-link:hover::after,
.nav-menu .current-menu-item a::after {
    width: 100%;
}

/* Services Mega Menu structure */
.has-mega-menu {
    position: static; /* Mega menu spans full navbar width */
}

.mega-menu-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--color-bg-white);
    box-shadow: var(--shadow-lg);
    border-top: 1px solid var(--color-border);
    border-bottom: 3px solid var(--color-accent-red);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-normal);
    z-index: 999;
    padding: 2.5rem 0;
}

.has-mega-menu:hover .mega-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mega-menu-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr) 0.9fr;
    gap: 2rem;
}

.mega-menu-col-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.mega-menu-links {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.mega-menu-links li a {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.mega-menu-links li a i {
    font-size: 1.25rem;
    color: var(--color-accent-blue);
    margin-top: 2px;
    transition: var(--transition-fast);
}

.mega-menu-links li a:hover i {
    color: var(--color-accent-red);
    transform: scale(1.1);
}

.mega-menu-links li a strong {
    font-size: 0.9rem;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.15rem;
}

.mega-menu-links li a span {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: block;
    line-height: 1.4;
}

.mega-menu-promo {
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu-toggle {
    display: none;
    font-size: 1.5rem;
    color: var(--color-primary);
    cursor: pointer;
}

@media (max-width: 992px) {
    .menu-toggle {
        display: block;
    }
    
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #f6f9ff;
        flex-direction: column;
        padding: 2rem;
        gap: 0.01rem;
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all var(--transition-normal);
        max-height: 80vh;
        overflow-y: auto;
		display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
    }
    
    .nav-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .has-mega-menu {
        position: relative;
        width: 100%;
    }
    
    .mega-menu-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        padding: 1rem 0 0 1rem;
        transform: none;
        display: none; /* Toggled via JS on mobile */
    }
    
    .has-mega-menu.active .mega-menu-panel {
        display: block;
    }
    
    .mega-menu-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .nav-actions {
        display: none;
    }
}

/* ==========================================
   5. HERO SECTION
   ========================================== */
.hero {
    background-color: var(--color-primary);
    background: #0A1C36;
        background: linear-gradient(182deg, rgba(10, 28, 54, 1) 0%, rgba(30, 71, 157, 1) 100%);
    color: var(--color-text-light);
    padding: 6rem 0 5rem 0;
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(34, 75, 156, 0.15) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
    pointer-events: none;
}

.hero .container {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .hero {
        padding: 4rem 0;
    }
    
    .hero .container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.hero-subtitle {
    color: var(--color-accent-red);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: block;
}

.hero-title {
    font-size: 3.5rem;
    color: var(--color-text-light);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.hero-title span {
    display: block;
    color: var(--color-accent-red);
}

.hero-description {
    font-size: 1.1rem;
    color: #94a3b8;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}

.hero-actions .btn-outline {
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--color-text-light);
}

.hero-actions .btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-text-light);
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
    }
}

/* Stat Grid Hero */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.hero-stat-card {
    text-align: left;
}

.hero-stat-number {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-bg-white);
    display: block;
    margin-bottom: 0.25rem;
}

.hero-stat-label {
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Hero Right Panel Graphic Card */
.hero-graphic-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    position: relative;
}

.hero-graphic-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hero-graphic-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: rgba(227, 40, 43, 0.15);
    color: var(--color-accent-red);
    border: 1px solid rgba(227, 40, 43, 0.3);
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.hero-graphic-display {
    width: 100%;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    background: #081120;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-display-content {
    display: flex;
    justify-content: space-around;
    padding: 2.5rem 1rem;
    position: relative;
}

.thermal-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 45%;
    z-index: 2;
}

.thermal-icon-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    font-size: 1.75rem;
    box-shadow: var(--shadow-md);
}

.thermal-zone.hot .thermal-icon-wrapper {
    background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
    color: white;
    box-shadow: 0 0 20px rgba(255, 126, 95, 0.4);
}

.thermal-zone.cold .thermal-icon-wrapper {
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
    color: white;
    box-shadow: 0 0 20px rgba(0, 198, 255, 0.4);
}

.thermal-zone h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.thermal-zone p {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.4;
}

.divider-line {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.2) 80%, rgba(255,255,255,0));
    transform: translateX(-50%);
}

.hero-features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: #cbd5e1;
}

.hero-feature-item i {
    color: #009fff;
    font-size: 1rem;
}

/* ==========================================
   6. TICKER / HIGHLIGHT BAR
   ========================================== */
.ticker-bar {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
    overflow: hidden;
    position: relative;
}

.ticker-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
}

.ticker-track {
    display: flex;
    gap: 4rem;
    animation: ticker 25s linear infinite;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ticker-item i {
    color: var(--color-accent-red);
    font-size: 1rem;
}

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================
   7. COMPANY PROFILE SECTION
   ========================================== */
.company-profile {
    background-color: var(--color-bg-white);
}

.profile-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 992px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.profile-content h2 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.profile-content p {
    color: var(--color-text-muted);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.stat-box {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.75rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.stat-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(227, 40, 43, 0.2);
}

.stat-box-icon {
    font-size: 1.75rem;
    color: var(--color-accent-red);
    margin-bottom: 0.75rem;
    display: block;
}

.stat-box-number {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.stat-box-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================
   8. SERVICE MODULES SECTION
   ========================================== */
.services-section {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.services-header-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 3.5rem;
}

.services-header-box .left {
    max-width: 600px;
}

.services-header-box h2 {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.services-header-box p {
    color: var(--color-text-muted);
}

.services-info-badge {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-dark);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-sm);
}

.services-info-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: var(--color-accent-red);
    border-radius: 50%;
    display: inline-block;
}

@media (max-width: 768px) {
    .services-header-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}

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

@media (max-width: 1200px) {
    .modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .modules-grid {
        grid-template-columns: 1fr;
    }
}

.module-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--color-border);
    transition: var(--transition-normal);
}

.module-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(11, 26, 48, 0.15);
}

.module-card:hover::before {
    background-color: var(--color-accent-blue);
}

.module-tag {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    display: block;
}

.module-icon-box {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background-color: rgba(34, 75, 156, 0.08);
    color: var(--color-accent-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    transition: var(--transition-normal);
}

.module-card:hover .module-icon-box {
    background-color: var(--color-accent-blue);
    color: white;
    box-shadow: var(--shadow-glow-blue);
}

.module-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.module-desc {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* Specs Table Inside Card */
.module-specs {
    border-top: 1px solid var(--color-border);
    padding-top: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
}

.spec-label {
    color: var(--color-text-muted);
}

.spec-val {
    font-weight: 600;
    color: var(--color-primary);
}

.spec-val.badge {
    color: var(--color-accent-blue);
}

/* Secondary Row Modules */
.submodules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 992px) {
    .submodules-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .submodules-grid {
        grid-template-columns: 1fr;
    }
}

.submodule-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.submodule-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(11, 26, 48, 0.15);
}

.submodule-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(11, 26, 48, 0.05);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: var(--transition-normal);
}

.submodule-card:hover .submodule-icon-box {
    background-color: var(--color-primary);
    color: white;
}

.submodule-content {
    flex-grow: 1;
}

.submodule-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.submodule-desc {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ==========================================
   9. SECTORS SECTION
   ========================================== */
.sectors-section {
    background-color: var(--color-bg-white);
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.sector-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    height: 280px;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-slow);
}

.sector-card.large {
    grid-column: span 2;
}

@media (max-width: 992px) {
    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sector-card.large {
        grid-column: span 1;
    }
}

@media (max-width: 576px) {
    .sectors-grid {
        grid-template-columns: 1fr;
    }
    .sector-card.large {
        grid-column: span 1;
    }
}

.sector-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all var(--transition-slow);
}

.sector-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 26, 48, 0.95) 0%, rgba(11, 26, 48, 0.4) 60%, rgba(11, 26, 48, 0.1) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.75rem;
    transition: all var(--transition-normal);
}

.sector-title {
    color: var(--color-text-light);
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.sector-desc {
    color: #cbd5e1;
    font-size: 0.85rem;
    opacity: 0.85;
    transform: translateY(10px);
    transition: all var(--transition-normal);
}

.sector-card:hover .sector-img {
    transform: scale(1.1);
}

.sector-card:hover .sector-overlay {
    background: linear-gradient(to top, rgba(11, 26, 48, 0.98) 0%, rgba(11, 26, 48, 0.6) 70%, rgba(11, 26, 48, 0.2) 100%);
}

.sector-card:hover .sector-desc {
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================
   10. REQUEST FOR QUOTATION SECTION
   ========================================== */
.rfq-section {
    background-color: var(--color-bg-light);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.rfq-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3.5rem;
    align-items: stretch;
}

@media (max-width: 992px) {
    .rfq-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.rfq-info-card {
    background-color: var(--color-primary);
    background-image: linear-gradient(135deg, var(--color-primary) 0%, #061121 100%);
    color: var(--color-text-light);
    border-radius: var(--radius-lg);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-lg);
}

.rfq-info-header h2 {
    color: var(--color-text-light);
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.rfq-info-header p {
    color: #94a3b8;
    margin-bottom: 2.5rem;
}

.rfq-benefits {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3.5rem;
}

.benefit-item {
    display: flex;
    gap: 1.25rem;
}

.benefit-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(227, 40, 43, 0.1);
    color: var(--color-accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    border: 1px solid rgba(227, 40, 43, 0.2);
}

.benefit-content h4 {
    color: var(--color-text-light);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.benefit-content p {
    color: #94a3b8;
    font-size: 0.85rem;
}

.rfq-channels {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
}

.rfq-channels-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #64748b;
    margin-bottom: 1rem;
}

.rfq-channel-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.channel-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-text-light);
    transition: var(--transition-fast);
}

.channel-link:hover {
    color: var(--color-accent-red);
}

.channel-link i {
    width: 20px;
    color: var(--color-accent-blue);
}

/* RFQ Form Side */
 .rfq-form-card {
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-sm);
}

@media (max-width: 576px) {
    .rfq-form-card {
        padding: 2rem 1.5rem;
    }
}

.wpcf7 .rfq-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.wpcf7 .rfq-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wpcf7 .rfq-form-group.full-width {
    grid-column: span 2;
}

@media (max-width: 576px) {
    .wpcf7 .rfq-form-grid {
        grid-template-columns: 1fr;
    }
    .wpcf7 .rfq-form-group.full-width {
        grid-column: span 1;
    }
}

.wpcf7 .rfq-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

.wpcf7 .rfq-input, .wpcf7 .rfq-select, .wpcf7 .rfq-textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-light);
    color: var(--color-primary);
    transition: all var(--transition-normal);
}

.wpcf7 .rfq-input:focus, .wpcf7 .rfq-select:focus, .wpcf7 .rfq-textarea:focus {
    background-color: var(--color-bg-white);
    border-color: var(--color-accent-red);
    box-shadow: 0 0 0 3px rgba(227, 40, 43, 0.1);
}

.wpcf7 .rfq-textarea {
    resize: vertical;
    min-height: 120px;
}

.wpcf7 .rfq-submit-btn {
    grid-column: span 2;
    margin-top: 1rem;
    width: 100%;
}

@media (max-width: 576px) {
    .wpcf7 .rfq-submit-btn {
        grid-column: span 1;
    }
}

/* AJAX Message Styles */
.wpcf7 .form-message {
    grid-column: span 2;
    padding: 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    display: none;
    margin-bottom: 1rem;
}

.wpcf7 .form-message.success {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
    display: block;
}

.wpcf7 .form-message.error {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
    display: block;
}

.wpcf7 .form-message.loading {
    background-color: #cff4fc;
    color: #055160;
    border: 1px solid #b6effb;
    display: block;
}

/* ==========================================
   11. TESTIMONIALS SECTION
   ========================================== */
.testimonials-section {
    background-color: var(--color-bg-white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.testimonial-card {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: rgba(34, 75, 156, 0.15);
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.testimonial-quote-icon {
    font-size: 2.5rem;
    color: rgba(227, 40, 43, 0.1);
    line-height: 1;
}

.testimonial-stars {
    color: #ffb703;
    font-size: 0.9rem;
    display: flex;
    gap: 0.25rem;
}

.testimonial-text {
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

.testimonial-client {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 1px solid var(--color-border);
    padding-top: 1.25rem;
}

.client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-family: var(--font-heading);
}

.client-meta h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.client-meta p {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ==========================================
   12. CLIENT LOGO MARQUEE
   ========================================== */
.client-logos {
    background-color: #e3282b;
    padding: 3rem 0;
    overflow: hidden;
    position: relative;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.client-logos-header {
    margin-bottom: 2rem;
}

.client-logos-header h3 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.logos-marquee-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
}

.logos-marquee-track {
    display: flex;
    gap: 5rem;
    align-items: center;
    animation: logo-marquee 30s linear infinite;
}

.logo-item {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

.logo-item:hover {
    opacity: 1;
}

.logo-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

@keyframes logo-marquee {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================
   13. FOOTER
   ========================================== */
.site-footer {
    background-color: var(--color-primary);
    color: #94a3b8;
    border-top: 2px solid rgba(255, 255, 255, 0.05);
}

.footer-top {
    padding-top: 5rem;
    padding-bottom: 4rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 0.8fr);
    gap: 3.5rem;
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

.footer-about {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-logo img {
    height: 48px;
}

.footer-desc {
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-social-links {
    display: flex;
    gap: 1rem;
}

.social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.social-btn:hover {
    background-color: var(--color-accent-red);
    color: white;
    transform: translateY(-2px);
}

.footer-col-title {
    font-family: var(--font-heading);
    color: var(--color-text-light);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--color-accent-red);
}

.footer-links-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer-links-list a {
    font-size: 0.9rem;
    transition: var(--transition-fast);
}

.footer-links-list a:hover {
    color: var(--color-text-light);
    padding-left: 5px;
}

.footer-contact-item {
    display: flex;
    gap: 0.75rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.footer-contact-item i {
    color: var(--color-accent-blue);
    font-size: 1rem;
    margin-top: 3px;
    width: 16px;
}

.footer-contact-item a:hover {
    color: var(--color-text-light);
}

.footer-bottom {
    background-color: #061121;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 576px) {
    .footer-bottom .container {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
}

.gst-info {
    font-weight: 600;
    color: #64748b;
}

/* ==========================================
   14. SUBPAGES, BLOGS & INTERACTIVE FEATURES
   ========================================== */
.inner-page-banner {
    position: relative;
}

.page-content-wrapper {
    box-shadow: var(--shadow-sm);
}

/* Hover Lift Card Effect */
.hover-lift-card {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(34, 75, 156, 0.15);
}

/* FAQ toggler */
.faq-question-btn span {
    transition: transform var(--transition-normal);
}

.faq-item.active .faq-question-btn span {
    transform: rotate(180deg);
}

.faq-item.active {
    border-color: var(--color-accent-red) !important;
}

/* Scroll Fade Up classes */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-slow) ease-out, transform var(--transition-slow) ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Portfolio grid item hidden state */
.portfolio-item-card.hide {
    display: none;
}

.portfolio-item-card:hover .portfolio-zoom-img {
    transform: scale(1.08);
}

.portfolio-filter-btn {
    transition: all var(--transition-fast);
}

.portfolio-filter-btn:hover {
    background-color: var(--color-accent-blue) !important;
    color: white !important;
    border-color: var(--color-accent-blue) !important;
}

/* WORDPRESS CORE STYLES / COMPATIBILITY */
.aligncenter { display: block; margin: 1.5rem auto; }
.alignleft { float: left; margin: 0.5rem 1.5rem 1.5rem 0; }
.alignright { float: right; margin: 0.5rem 0 1.5rem 1.5rem; }
.wp-caption { background: var(--color-bg-light); border: 1px solid var(--color-border); padding: 0.5rem; text-align: center; }
.wp-caption-text { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.5rem; }
.sticky { background: var(--color-bg-light); border-left: 4px solid var(--color-accent-red); }
.gallery-caption { font-size: 0.8rem; color: var(--color-text-muted); }
.bypostauthor { font-style: italic; }

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================
   15. INNER PAGES - HERO BANNER
   ========================================== */
.inner-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--color-text-light);
    padding: 6rem 0 4rem;
}
.inner-hero-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: brightness(0.45) contrast(1.05);
    transform: scale(1.05);
    animation: hero-zoom 20s ease-in-out infinite alternate;
}
@keyframes hero-zoom { 0%{transform:scale(1.05);} 100%{transform:scale(1.15);} }
.inner-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(10,28,54,0.92) 0%, rgba(10,28,54,0.72) 50%, rgba(34,75,156,0.65) 100%);
}
.inner-hero-inner { position: relative; z-index: 2; }
.breadcrumb {
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 0.82rem; font-weight: 600;
    margin-bottom: 1.75rem;
}
.breadcrumb a { color: #cbd5e1; }
.breadcrumb a:hover { color: var(--color-accent-red); }
.breadcrumb .crumb-sep { color: rgba(255,255,255,0.35); font-size: 0.7rem; }
.breadcrumb .crumb-current { color: var(--color-text-light); }
.inner-hero-tag {
    display: inline-block; color: var(--color-accent-red);
    font-family: var(--font-heading); font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase; font-size: 0.8rem;
    margin-bottom: 1rem;
}
.inner-hero-title {
    font-family: var(--font-heading);
    font-size: 3.25rem; font-weight: 800; line-height: 1.1;
    color: var(--color-text-light);
    max-width: 820px; margin-bottom: 1.25rem;
}
.inner-hero-title span { color: var(--color-accent-red); }
.inner-hero-desc { max-width: 640px; color: #cbd5e1; font-size: 1.05rem; margin-bottom: 1.75rem; }
.inner-hero-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.meta-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.5rem 1rem; border-radius: var(--radius-full);
    font-size: 0.8rem; font-weight: 600; color: #e2e8f0;
}
.meta-pill i { color: var(--color-accent-red); font-size: 0.9rem; }
.inner-hero-scroll {
    position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.5); font-size: 1.1rem; z-index: 2;
    animation: bounce 2.2s ease-in-out infinite;
}
@keyframes bounce { 0%,100%{transform: translate(-50%,0);} 50%{transform: translate(-50%,8px);} }
@media (max-width: 768px) {
    .inner-hero { min-height: 380px; padding: 4.5rem 0 3rem; }
    .inner-hero-title { font-size: 2.15rem; }
}

/* Btn outline light variant for dark backgrounds */
.btn-outline-light { color: #fff !important; border-color: rgba(255,255,255,0.35) !important; }
.btn-outline-light:hover { background: rgba(255,255,255,0.1) !important; border-color: #fff !important; color: #fff !important; }

/* ==========================================
   16. ABOUT — INTRO SPLIT
   ========================================== */
.intro-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.intro-split-media { position: relative; padding-right: 3rem; padding-bottom: 3rem; }
.intro-primary-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.intro-secondary-img {
    position: absolute; right: 0; bottom: 0; width: 55%;
    border-radius: var(--radius-lg); border: 6px solid #fff;
    box-shadow: var(--shadow-xl);
}
.intro-badge-float {
    position: absolute; left: -1.5rem; bottom: 4rem;
    background: var(--color-accent-red); color: #fff;
    padding: 1.25rem 1.5rem; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex; align-items: center; gap: 0.85rem;
}
.intro-badge-num { font-family: var(--font-heading); font-size: 2rem; font-weight: 800; line-height: 1; }
.intro-badge-lbl { font-size: 0.75rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.5px; }
.intro-split-content p { color: var(--color-text-muted); font-size: 1rem; margin-bottom: 1rem; line-height: 1.7; }
.intro-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 1.5rem 0 2rem; }
.intro-features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--color-primary); }
.intro-features li i { color: var(--color-accent-blue); }
.intro-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
@media (max-width: 992px) {
    .intro-split-grid { grid-template-columns: 1fr; gap: 3rem; }
    .intro-split-media { padding-right: 2rem; padding-bottom: 2rem; }
}

/* ==========================================
   17. ABOUT — STORY TIMELINE
   ========================================== */
.story-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.story-header { text-align: center; margin-bottom: 3.5rem; }
.story-timeline { max-width: 820px; margin: 0 auto; position: relative; }
.story-step { display: grid; grid-template-columns: 100px 40px 1fr; align-items: start; gap: 1rem; margin-bottom: 2rem; }
.story-year { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: var(--color-accent-red); text-align: right; padding-top: 0.5rem; }
.story-connect { position: relative; height: 100%; display: flex; justify-content: center; padding-top: 0.5rem; }
.story-connect::before {
    content: ''; position: absolute; top: 0; bottom: -2rem; width: 2px;
    background: linear-gradient(to bottom, var(--color-accent-red), var(--color-border));
    left: 50%; transform: translateX(-50%);
}
.story-step:last-child .story-connect::before { display: none; }
.story-connect .dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--color-accent-red); border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--color-accent-red), var(--shadow-md);
    position: relative; z-index: 2;
}
.story-card {
    background: #fff; padding: 1.5rem 1.75rem;
    border-radius: var(--radius-md); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.story-card h4 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.story-card p { font-size: 0.9rem; color: var(--color-text-muted); }
@media (max-width: 768px) {
    .story-step { grid-template-columns: 70px 30px 1fr; }
    .story-year { font-size: 1.1rem; }
}

/* ==========================================
   18. ABOUT — MISSION / VISION
   ========================================== */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.mv-card {
    padding: 3rem 2.5rem; border-radius: var(--radius-lg);
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-lg);
    color: var(--color-text-light);
    transition: transform var(--transition-normal);
}
.mv-card:hover { transform: translateY(-6px); }
.mv-mission { background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a8a 100%); }
.mv-vision { background: linear-gradient(135deg, var(--color-accent-red) 0%, #7f1d1d 100%); }
.mv-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,0.15); display: flex;
    align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}
.mv-tag { font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; display: block; margin-bottom: 0.5rem; }
.mv-card h3 { color: var(--color-text-light); font-size: 1.6rem; margin-bottom: 1rem; line-height: 1.25; }
.mv-card p { color: rgba(255,255,255,0.85); font-size: 1rem; line-height: 1.65; }
@media (max-width: 768px) { .mv-grid { grid-template-columns: 1fr; } }

/* ==========================================
   19. ABOUT — VALUES GRID
   ========================================== */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.value-card {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 2rem 1.75rem;
    position: relative; transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(227,40,43,0.3); }
.value-num {
    position: absolute; top: 1.25rem; right: 1.5rem;
    font-family: var(--font-heading); font-size: 2.75rem; font-weight: 800;
    color: rgba(10,28,54,0.06); line-height: 1;
}
.value-icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: rgba(227,40,43,0.08); color: var(--color-accent-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 1.25rem;
    transition: var(--transition-normal);
}
.value-card:hover .value-icon { background: var(--color-accent-red); color: #fff; box-shadow: var(--shadow-glow-red); }
.value-card h4 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.value-card p { font-size: 0.88rem; color: var(--color-text-muted); }
@media (max-width: 992px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .values-grid { grid-template-columns: 1fr; } }

/* ==========================================
   20. ABOUT — WHY + COUNTERS
   ========================================== */
.why-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.why-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.why-list { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.5rem; }
.why-list li { display: flex; gap: 1rem; align-items: flex-start; }
.why-num-badge {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem;
}
.why-list li h5 { font-size: 1rem; margin-bottom: 0.25rem; color: var(--color-primary); }
.why-list li p { font-size: 0.88rem; color: var(--color-text-muted); }
.why-counter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.counter-card {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 2rem 1.5rem;
    text-align: center; box-shadow: var(--shadow-sm);
    position: relative; transition: all var(--transition-normal);
}
/*.counter-card:nth-child(1), .counter-card:nth-child(4) { transform: translateY(1.5rem); }*/
.counter-card:hover { transform: translateY(-6px) !important; box-shadow: var(--shadow-lg); }
.counter-card:nth-child(1):hover, .counter-card:nth-child(4):hover { transform: translateY(calc(1.5rem - 6px)) !important; }
.counter-icon { font-size: 1.5rem; color: var(--color-accent-blue); margin-bottom: 0.5rem; }
.counter-num, .counter-plus {
    font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800;
    color: var(--color-primary); display: inline-block; line-height: 1;
}
.counter-lbl { display: block; margin-top: 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 600; }
@media (max-width: 992px) { .why-grid { grid-template-columns: 1fr; gap: 3rem; } .counter-card:nth-child(1), .counter-card:nth-child(4) { transform: none; } }

/* ==========================================
   21. ABOUT — INDUSTRIES CARD GRID
   ========================================== */
.industries-inner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ind-inner-card {
    position: relative; height: 260px; border-radius: var(--radius-lg);
    overflow: hidden; box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}
.ind-inner-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.ind-inner-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,28,54,0.95) 0%, rgba(10,28,54,0.3) 60%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.5rem; color: var(--color-text-light);
}
.ind-inner-card:hover img { transform: scale(1.08); }
.ind-inner-overlay h4 { color: #fff; font-size: 1.2rem; margin-bottom: 0.25rem; }
.ind-inner-overlay p { color: #cbd5e1; font-size: 0.85rem; }
@media (max-width: 992px) { .industries-inner-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .industries-inner-grid { grid-template-columns: 1fr; } }

/* ==========================================
   22. ABOUT — SAFETY SPLIT & PROCESS TIMELINE
   ========================================== */
.safety-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.safety-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.safety-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
.safety-media img { width: 100%; display: block; }
.safety-media-tag {
    position: absolute; top: 1.25rem; left: 1.25rem;
    background: var(--color-accent-red); color: #fff;
    padding: 0.5rem 1rem; border-radius: var(--radius-full);
    font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem;
}
.safety-metrics { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.safety-metric { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.safety-metric i { color: var(--color-accent-red); font-size: 1.3rem; margin-top: 3px; }
.safety-metric h5 { font-size: 1rem; margin-bottom: 0.25rem; }
.safety-metric p { font-size: 0.85rem; color: var(--color-text-muted); }
@media (max-width: 992px) { .safety-split { grid-template-columns: 1fr; gap: 2.5rem; } }

.process-timeline {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
    position: relative;
}
.process-line {
    position: absolute; top: 30px; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(to right, var(--color-accent-red), var(--color-accent-blue));
    z-index: 1;
}
.process-step { text-align: center; padding: 0 0.5rem; position: relative; z-index: 2; }
.process-node {
    width: 60px; height: 60px; border-radius: 50%;
    background: #fff; border: 3px solid var(--color-accent-red);
    color: var(--color-primary); font-family: var(--font-heading);
    font-weight: 800; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem; box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}
.process-step:hover .process-node { background: var(--color-accent-red); color: #fff; transform: scale(1.05); }
.process-icon { color: var(--color-accent-blue); font-size: 1.4rem; margin-bottom: 0.5rem; }
.process-step h5 { font-size: 1rem; margin-bottom: 0.35rem; }
.process-step p { font-size: 0.8rem; color: var(--color-text-muted); }
@media (max-width: 900px) {
    .process-timeline { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .process-line { display: none; }
}
@media (max-width: 500px) { .process-timeline { grid-template-columns: 1fr; } }

/* ==========================================
   23. INNER CTA STRIP
   ========================================== */
.inner-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, #061121 60%, #1e3a8a 100%);
    color: var(--color-text-light);
    padding: 4rem 0;
    position: relative; overflow: hidden;
}
.inner-cta::before {
    content: ''; position: absolute; top: -50%; right: -10%;
    width: 400px; height: 400px; border-radius: 50%;
    background: radial-gradient(circle, rgba(227,40,43,0.25) 0%, transparent 70%);
}
.inner-cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.inner-cta h2 { color: #fff; font-size: 2rem; font-weight: 800; margin: 0; }
.inner-cta h2 span { color: var(--color-accent-red); }
.inner-cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 768px) { .inner-cta h2 { font-size: 1.5rem; } }

/* ==========================================
   24. SERVICES — OVERVIEW GRID
   ========================================== */
.services-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.overview-card {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 1.75rem;
    box-shadow: var(--shadow-sm);
    position: relative; transition: all var(--transition-normal);
    display: block;
}
.overview-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(34,75,156,0.2); }
.overview-icon {
    width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; margin-bottom: 1.25rem;
}
.overview-card h4 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--color-primary); }
.overview-card p { font-size: 0.9rem; color: var(--color-text-muted); }
.overview-arrow {
    position: absolute; top: 1.75rem; right: 1.5rem;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-bg-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-normal); font-size: 0.85rem;
}
.overview-card:hover .overview-arrow { background: var(--color-accent-red); color: #fff; transform: rotate(-45deg); }
@media (max-width: 900px) { .services-overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .services-overview-grid { grid-template-columns: 1fr; } }

/* ==========================================
   25. SERVICES — DETAIL ALTERNATING SECTIONS
   ========================================== */
.svc-detail-section { background: #fff; }
.svc-detail-section:nth-of-type(even) { background: var(--color-bg-light); }
.svc-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.svc-flip .svc-detail-grid { direction: rtl; }
.svc-flip .svc-detail-grid > * { direction: ltr; }
.svc-detail-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
.svc-detail-media img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; transition: transform var(--transition-slow); }
.svc-detail-section:hover .svc-detail-media img { transform: scale(1.05); }
.svc-media-badge {
    position: absolute; top: 1.25rem; right: 1.25rem;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
    color: var(--color-primary); padding: 0.55rem 1.1rem;
    border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700;
    display: flex; align-items: center; gap: 0.5rem;
    box-shadow: var(--shadow-md);
}
.svc-media-badge i { color: var(--color-accent-red); }
.svc-detail-content p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; }
.svc-points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 1rem 0 2rem; }
.svc-points li { display: flex; gap: 0.6rem; align-items: center; font-size: 0.9rem; color: var(--color-primary); font-weight: 600; }
.svc-points li i { width: 20px; height: 20px; border-radius: 50%; background: rgba(34,75,156,0.1); color: var(--color-accent-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }
.svc-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 992px) {
    .svc-detail-grid, .svc-flip .svc-detail-grid { grid-template-columns: 1fr; direction: ltr; gap: 2.5rem; }
    .svc-points { grid-template-columns: 1fr; }
}

/* Benefits Grid */
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.benefit-tile {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 2rem 1.75rem;
    box-shadow: var(--shadow-sm); transition: all var(--transition-normal);
}
.benefit-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(227,40,43,0.2); }
.benefit-tile i { font-size: 1.7rem; color: var(--color-accent-red); margin-bottom: 1rem; display: block; }
.benefit-tile h5 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.benefit-tile p { font-size: 0.9rem; color: var(--color-text-muted); }
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .benefits-grid { grid-template-columns: 1fr; } }

/* ==========================================
   26. FAQ ACCORDION
   ========================================== */
.svc-faq { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.faq-narrow { max-width: 820px; }
.faq-list { display: flex; flex-direction: column; gap: 0.85rem; }
.faq-item {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: all var(--transition-normal);
}
.faq-question-btn {
    width: 100%; text-align: left; padding: 1.15rem 1.5rem;
    font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
    color: var(--color-primary);
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
}
.faq-question-btn span {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-bg-light); color: var(--color-accent-red);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
}
.faq-answer-panel { max-height: 0; overflow: hidden; transition: max-height var(--transition-normal) ease-out; }
.faq-answer-panel p { padding: 0 1.5rem 1.25rem; color: var(--color-text-muted); font-size: 0.92rem; line-height: 1.65; }

/* ==========================================
   27. PROJECTS — STATS BAR
   ========================================== */
.proj-stats-bar {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1e3a8a 100%);
    padding: 2.5rem 0; color: #fff;
}
.proj-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.proj-stat { padding: 0.5rem; }
.proj-stat-num, .proj-plus { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; color: #fff; display: inline-block; line-height: 1; }
.proj-plus { color: var(--color-accent-red); }
.proj-stat p { color: #cbd5e1; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 0.4rem; font-weight: 600; }
@media (max-width: 700px) { .proj-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* Featured Project */
.featured-proj-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.featured-proj-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
.featured-proj-media img { width: 100%; display: block; transition: transform var(--transition-slow); }
.featured-proj-media:hover img { transform: scale(1.05); }
.featured-badge {
    position: absolute; top: 1.25rem; left: 1.25rem;
    background: var(--color-accent-red); color: #fff;
    padding: 0.55rem 1.1rem; border-radius: var(--radius-full);
    font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem;
}
.featured-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 1.5rem 0 2rem; }
.fspec { background: var(--color-bg-light); padding: 1rem 1.15rem; border-radius: var(--radius-md); border-left: 3px solid var(--color-accent-red); }
.fspec span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.fspec strong { font-family: var(--font-heading); font-size: 1rem; color: var(--color-primary); }
@media (max-width: 992px) { .featured-proj-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ==========================================
   28. PROJECTS — FILTERS + MASONRY GRID
   ========================================== */
.portfolio-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.5rem; }
.portfolio-filter-btn {
    padding: 0.55rem 1.25rem; background: #fff;
    border: 1px solid var(--color-border); border-radius: var(--radius-full);
    color: var(--color-primary); font-weight: 600; font-size: 0.85rem;
    cursor: pointer;
}
.portfolio-masonry {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px; gap: 1.25rem;
}
.portfolio-item-card { border-radius: var(--radius-lg); overflow: hidden; position: relative; box-shadow: var(--shadow-md); transition: all var(--transition-normal); opacity: 1; transform: scale(1); }
.portfolio-item-card.large { grid-column: span 2; }
.portfolio-item-card.tall { grid-row: span 2; }
.portfolio-img-wrap { position: relative; height: 100%; }
.portfolio-zoom-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); display: block; }
.portfolio-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(10,28,54,0.95) 0%, rgba(10,28,54,0.35) 55%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 1.25rem 1.5rem; color: #fff;
    transition: all var(--transition-normal);
}
.portfolio-cat {
    display: inline-block; background: var(--color-accent-red); color: #fff;
    font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.65rem;
    border-radius: var(--radius-sm); text-transform: uppercase;
    letter-spacing: 0.5px; margin-bottom: 0.6rem; width: fit-content;
}
.portfolio-overlay h4 { color: #fff; font-size: 1.1rem; margin-bottom: 0.35rem; }
.portfolio-loc { font-size: 0.8rem; color: #cbd5e1; display: flex; align-items: center; gap: 0.4rem; }
@media (max-width: 992px) { .portfolio-masonry { grid-template-columns: repeat(2, 1fr); } .portfolio-item-card.large { grid-column: span 1; } .portfolio-item-card.tall { grid-row: span 1; } }
@media (max-width: 520px) { .portfolio-masonry { grid-template-columns: 1fr; } }

/* Before / After */
.beforeafter-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2rem;
}@media (max-width:992px){
    .beforeafter-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:768px){
    .beforeafter-grid{
        grid-template-columns:1fr;
    }
}
.ba-card { 
    background: #fff; 
    border: 1px solid #e4e7ec; 
    border-radius: 16px; 
    padding: 20px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); 
    display: flex;
    flex-direction: column; 
    gap: 1rem;
    height: 100%; /* Force all grid cards to match the tallest item's height */
}
.ba-card:hover { box-shadow: var(--shadow-lg); }
.ba-media { position: relative; border-radius: var(--radius-md); overflow: hidden; width:100%; }
.ba-media img { width: 100%; height: 280px; object-fit: cover; display: block; }
.ba-tag { position: absolute; top: 0.75rem; left: 0.75rem; font-size: 0.7rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ba-before { background: rgba(0,0,0,0.7); color: #fff; }
.ba-after { background: var(--color-accent-red); color: #fff; }
.ba-caption { 
    display: flex;
    flex-direction: column;
    gap: 0.5rem; 
    padding: 0;
    flex-grow: 1; /* Allows the caption area to expand to the bottom of the card */
}
.project-category{
    display:block;
    font-size:0.78rem;
    color:#8b98a9;
    text-transform:uppercase;
    letter-spacing:1.5px;
    font-weight:600;
    margin:0;
	margin-bottom:8px;
}
.ba-caption h5 { margin:0;
    font-size:1.55rem;
    line-height:1.35;
    font-weight:700;
	margin-bottom:12px;
    color:var(--color-primary);}
.ba-caption h5 a{
    color:inherit;
    text-decoration:none;
}

.ba-caption p { margin:0;
    font-size:1rem;
    margin-bottom:18px;
    line-height:1.8;
    color:#667085;
    flex:1; }
.ba-caption .btn{
    margin-top: auto; /* Fallback visual anchor push */
    align-self: flex-start;
    background-color: #e52e2e; 
    color: white;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.875rem;
}
@media (max-width: 900px) { .beforeafter-grid { grid-template-columns: 1fr; } }
/* Mobile Specific Spacing Constraints */
@media (max-width: 768px) {
    .beforeafter-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem; /* Tighter gap between stacked cards */
    }
    
    .ba-card {
        padding: 16px; /* Compact outer wall margins for mobile screens */
        gap: 0.85rem;
    }

    .ba-caption p {
        margin-bottom: 8px; /* Tighter description block spacing */
    }
}

/* Industry chips */
.chips-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.ind-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: #fff; border: 1px solid var(--color-border);
    padding: 0.65rem 1.25rem; border-radius: var(--radius-full);
    font-size: 0.85rem; font-weight: 600; color: var(--color-primary);
    box-shadow: var(--shadow-sm); transition: all var(--transition-normal);
}
.ind-chip i { color: var(--color-accent-red); }
.ind-chip:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); transform: translateY(-3px); }
.ind-chip:hover i { color: var(--color-accent-red); }

/* ==========================================
   29. CONTACT — CARDS + MAP
   ========================================== */
.contact-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.contact-card {
    background: #fff; border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: 2rem 1.75rem;
    box-shadow: var(--shadow-sm); transition: all var(--transition-normal);
    position: relative; overflow: hidden;
}
.contact-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--color-accent-red), var(--color-accent-blue));
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition-normal);
}
.contact-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.contact-card:hover::before { transform: scaleX(1); }
.ctc-icon {
    width: 54px; height: 54px; border-radius: 14px;
    background: rgba(227,40,43,0.08); color: var(--color-accent-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 1.25rem;
    transition: var(--transition-normal);
}
.contact-card:hover .ctc-icon { background: var(--color-accent-red); color: #fff; box-shadow: var(--shadow-glow-red); }
.contact-card h4 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.contact-card p { font-size: 0.88rem; color: var(--color-text-muted); margin-bottom: 1rem; line-height: 1.55; }
.ctc-link { font-size: 0.88rem; font-weight: 700; color: var(--color-accent-blue); display: inline-flex; align-items: center; gap: 0.4rem; }
.ctc-link:hover { color: var(--color-accent-red); gap: 0.65rem; }
@media (max-width: 992px) { .contact-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .contact-cards-grid { grid-template-columns: 1fr; } }

.map-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.map-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: stretch; }
.map-embed-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); min-height: 460px; background: #fff; }
.map-embed-card iframe { min-height: 460px; }
.map-locations { display: flex; flex-direction: column; justify-content: center; }
.location-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.loc-row {
    display: flex; gap: 1rem; align-items: flex-start;
    background: #fff; padding: 1rem 1.25rem;
    border-radius: var(--radius-md); border-left: 3px solid var(--color-accent-red);
    box-shadow: var(--shadow-sm);
}
.loc-row i { color: var(--color-accent-red); margin-top: 4px; }
.loc-row strong { display: block; font-family: var(--font-heading); color: var(--color-primary); font-weight: 700; margin-bottom: 0.15rem; }
.loc-row span { font-size: 0.85rem; color: var(--color-text-muted); }
@media (max-width: 992px) { .map-grid { grid-template-columns: 1fr; } }

/* Emergency strip */
.emergency-strip {
    background: linear-gradient(135deg, var(--color-primary) 0%, #061121 100%);
    color: var(--color-text-light); padding: 3.5rem 0;
    border-top: 4px solid var(--color-accent-red);
}
.emergency-grid { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.emergency-info { display: flex; gap: 1.25rem; align-items: center; flex: 1 1 400px; }
.emergency-pulse {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(227,40,43,0.15); color: var(--color-accent-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem; border: 2px solid var(--color-accent-red);
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{box-shadow: 0 0 0 0 rgba(227,40,43,0.4);} 50%{box-shadow: 0 0 0 12px rgba(227,40,43,0);} }
.emergency-info h3 { color: #fff; font-size: 1.35rem; margin-bottom: 0.35rem; }
.emergency-info p { color: #cbd5e1; font-size: 0.9rem; max-width: 480px; }
.emergency-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }
.emergency-social { display: flex; gap: 0.5rem; margin-left: 0.5rem; }
.emergency-social a {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.08); color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.15);
    transition: var(--transition-fast);
}
.emergency-social a:hover { background: var(--color-accent-red); border-color: var(--color-accent-red); transform: translateY(-3px); }


/* ==========================================
   30. SERVICE DETAIL PAGES — OVERVIEW SPLIT
   ========================================== */
.svc-inner-overview-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: center; }
.svc-inner-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
.svc-inner-media img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; display: block; transition: transform var(--transition-slow); }
.svc-inner-media:hover img { transform: scale(1.05); }
.svc-inner-media-badge {
    position: absolute; top: 1.25rem; left: 1.25rem;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(6px);
    color: var(--color-primary); padding: 0.55rem 1.1rem;
    border-radius: var(--radius-full); font-size: 0.8rem; font-weight: 700;
    display: flex; align-items: center; gap: 0.5rem;
    box-shadow: var(--shadow-md);
}
.svc-inner-media-badge i { color: var(--color-accent-red); }
.svc-inner-copy p { color: var(--color-text-muted); font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; }
.svc-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 2rem; }
.svc-feature-tile { display: flex; gap: 0.85rem; align-items: flex-start; background: var(--color-bg-light); padding: 1rem 1.15rem; border-radius: var(--radius-md); border-left: 3px solid var(--color-accent-red); }
.svc-feature-tile i { color: var(--color-accent-blue); font-size: 1.2rem; margin-top: 3px; }
.svc-feature-tile strong { display: block; color: var(--color-primary); font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: 0.1rem; }
.svc-feature-tile span { display: block; font-size: 0.8rem; color: var(--color-text-muted); }
@media (max-width: 992px) {
    .svc-inner-overview-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .svc-inner-media img { min-height: 340px; }
}

/* Applications Grid */
.svc-apps-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.svc-apps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.svc-app-card {
    background: #fff; padding: 1.75rem;
    border-radius: var(--radius-lg); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm); transition: all var(--transition-normal);
    position: relative; overflow: hidden;
}
.svc-app-card::before {
    content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 4px;
    background: var(--color-accent-red); transform: scaleY(0); transform-origin: bottom;
    transition: transform var(--transition-normal);
}
.svc-app-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.svc-app-card:hover::before { transform: scaleY(1); }
.svc-app-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(34,75,156,0.08); color: var(--color-accent-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; margin-bottom: 1rem;
    transition: var(--transition-normal);
}
.svc-app-card:hover .svc-app-icon { background: var(--color-accent-blue); color: #fff; }
.svc-app-card h5 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.svc-app-card p { font-size: 0.88rem; color: var(--color-text-muted); }
@media (max-width: 900px) { .svc-apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-apps-grid { grid-template-columns: 1fr; } }

/* Materials & Benefits Split */
.svc-mat-ben-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 3rem; align-items: start; }
.svc-materials-box, .svc-benefits-box { padding: 2.5rem 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.svc-materials-box { background: var(--color-primary); background-image: linear-gradient(135deg, var(--color-primary) 0%, #061121 100%); color: #fff; }
.svc-materials-box h3 { color: #fff; font-size: 1.5rem; margin-bottom: 1rem; }
.svc-materials-box .section-subtitle-prefix { color: #fca5a5; }
.svc-mat-p { color: #cbd5e1; margin-bottom: 1.5rem; font-size: 0.92rem; }
.svc-materials-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 0.5rem; }
.svc-materials-list li { display: flex; align-items: flex-start; gap: 0.75rem; color: #e2e8f0; font-size: 0.92rem; line-height: 1.5; padding-left: 0; }
.svc-materials-list li i { color: var(--color-accent-red); font-size: 0.85rem; margin-top: 4px; flex-shrink: 0; }
.svc-benefits-box { background: #fff; border: 1px solid var(--color-border); }
.svc-benefits-box h3 { font-size: 1.5rem; margin-bottom: 1.5rem; }
.svc-benefits-list { display: flex; flex-direction: column; gap: 1.25rem; }
.svc-benefit-row { display: flex; gap: 1rem; align-items: flex-start; }
.svc-benefit-icon {
    flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
    background: rgba(227,40,43,0.08); color: var(--color-accent-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.svc-benefit-row h5 { font-size: 1rem; margin-bottom: 0.25rem; }
.svc-benefit-row p { font-size: 0.88rem; color: var(--color-text-muted); }
@media (max-width: 992px) { .svc-mat-ben-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Delivery Process Grid */
.svc-process-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.svc-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.svc-process-card {
    background: #fff; padding: 2rem 1.5rem;
    border-radius: var(--radius-lg); border: 1px solid var(--color-border);
    text-align: center; position: relative;
    box-shadow: var(--shadow-sm); transition: all var(--transition-normal);
}
.svc-process-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(227,40,43,0.2); }
.svc-process-step {
    position: absolute; top: 1.25rem; right: 1.25rem;
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800;
    color: rgba(10,28,54,0.08); line-height: 1;
}
.svc-process-card > i {
    font-size: 2rem; color: var(--color-accent-red);
    margin-bottom: 1rem; display: block;
}
.svc-process-card h5 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.svc-process-card p { font-size: 0.88rem; color: var(--color-text-muted); }
@media (max-width: 900px) { .svc-process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-process-grid { grid-template-columns: 1fr; } }

/* Sectors chips section spacing */
.svc-sectors-section { background: #fff; }

/* Related Services */
.svc-related-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); }
.svc-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.svc-related-card {
    background: #fff; padding: 2rem 1.75rem;
    border-radius: var(--radius-lg); border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm); position: relative;
    transition: all var(--transition-normal); display: block;
    overflow: hidden;
}
.svc-related-card::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: linear-gradient(90deg, var(--color-accent-red), var(--color-accent-blue));
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--transition-normal);
}
.svc-related-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.svc-related-card:hover::before { transform: scaleX(1); }
.svc-related-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(34,75,156,0.08); color: var(--color-accent-blue);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; margin-bottom: 1.25rem;
    transition: var(--transition-normal);
}
.svc-related-card:hover .svc-related-icon { background: var(--color-accent-red); color: #fff; box-shadow: var(--shadow-glow-red); }
.svc-related-card h4 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.svc-related-card p { font-size: 0.9rem; color: var(--color-text-muted); }
.svc-related-arrow {
    position: absolute; top: 2rem; right: 1.5rem;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--color-bg-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    transition: var(--transition-normal);
}
.svc-related-card:hover .svc-related-arrow { background: var(--color-accent-red); color: #fff; transform: rotate(-45deg); }
@media (max-width: 900px) { .svc-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-related-grid { grid-template-columns: 1fr; } }


/* ==========================================
   34. DATASHEET DOWNLOAD BANNER
   ========================================== */
.datasheet-section { background: var(--color-bg-light); border-top: 1px solid var(--color-border); }
.datasheet-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, #061121 55%, #1e3a8a 100%);
    color: var(--color-text-light);
    border-radius: var(--radius-lg);
    padding: 3rem 3rem;
    display: grid; grid-template-columns: 320px 1fr; gap: 3rem; align-items: center;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-xl);
}
.datasheet-card::before {
    content: ''; position: absolute; top: -60%; right: -12%;
    width: 420px; height: 420px; border-radius: 50%;
    background: radial-gradient(circle, rgba(227,40,43,0.28) 0%, transparent 65%);
    pointer-events: none;
}
.datasheet-card::after {
    content: ''; position: absolute; bottom: -50%; left: -8%;
    width: 340px; height: 340px; border-radius: 50%;
    background: radial-gradient(circle, rgba(34,75,156,0.28) 0%, transparent 65%);
    pointer-events: none;
}
.datasheet-visual { position: relative; z-index: 2; display: flex; justify-content: center; }
.datasheet-doc-preview {
    width: 240px; min-height: 300px;
    background: #fff; color: var(--color-primary);
    border-radius: 12px; padding: 1.75rem 1.25rem;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
    position: relative; overflow: hidden;
    transform: rotate(-4deg);
    transition: transform var(--transition-normal);
    display: flex; flex-direction: column;
}
.datasheet-card:hover .datasheet-doc-preview { transform: rotate(-2deg) translateY(-6px) scale(1.02); }
.doc-band { position: absolute; top: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, var(--color-accent-red), var(--color-accent-blue)); }
.doc-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(227,40,43,0.08); color: var(--color-accent-red); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 1rem; margin-top: 0.5rem; }
.doc-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; letter-spacing: 0.5px; line-height: 1.15; margin-bottom: 0.4rem; }
.doc-sub { font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 1.25rem; }
.doc-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.doc-lines span { display: block; height: 8px; background: var(--color-bg-light); border-radius: 4px; }
.doc-lines span:nth-child(2) { width: 78%; }
.doc-lines span:nth-child(3) { width: 62%; }
.doc-brand { font-family: var(--font-heading); font-weight: 800; font-size: 0.75rem; letter-spacing: 3px; color: var(--color-accent-red); text-align: right; margin-top: 1rem; }
.datasheet-content { position: relative; z-index: 2; }
.datasheet-content h2 { color: #fff; font-size: 2rem; line-height: 1.2; margin-bottom: 0.85rem; }
.datasheet-content h2 span { color: var(--color-accent-red); }
.datasheet-content > p { color: #cbd5e1; font-size: 1rem; line-height: 1.65; margin-bottom: 1.25rem; max-width: 640px; }
.datasheet-perks { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.75rem; }
.datasheet-perks li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: #e2e8f0; }
.datasheet-perks li i { color: var(--color-accent-red); font-size: 0.95rem; width: 20px; }
.datasheet-hint { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 1rem; color: #94a3b8; font-size: 0.78rem; }
.datasheet-hint i { color: #94a3b8; font-size: 0.75rem; }
.datasheet-open-btn { padding: 0.9rem 1.75rem !important; }
@media (max-width: 900px) {
    .datasheet-card { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 2rem; text-align: center; }
    .datasheet-visual { transform: scale(0.88); }
    .datasheet-perks { text-align: left; }
    .datasheet-content h2 { font-size: 1.55rem; }
    .datasheet-hint { display: block; margin: 0.75rem 0 0; }
}

/* ==========================================
   35. LEAD-CAPTURE MODAL (DATASHEET)
   ========================================== */
.ds-modal { position: fixed; inset: 0; z-index: 9999; opacity: 0; transition: opacity 0.24s ease; pointer-events: none; }
.ds-modal:not([hidden]) { pointer-events: auto; }
.ds-modal.open { opacity: 1; }
.ds-modal-backdrop { position: absolute; inset: 0; background: rgba(10,28,54,0.7); backdrop-filter: blur(6px); cursor: pointer; }
.ds-modal-card {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    width: min(560px, 92vw); max-height: 92vh; overflow: auto;
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.5);
    padding: 2rem 2rem 1.75rem;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ds-modal.open .ds-modal-card { transform: translate(-50%, -50%) scale(1); }
.ds-modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-bg-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); cursor: pointer;
    transition: all var(--transition-fast); font-size: 0.95rem;
}
.ds-modal-close:hover { background: var(--color-accent-red); color: #fff; border-color: var(--color-accent-red); transform: rotate(90deg); }
.ds-modal-head { text-align: left; margin-bottom: 1.5rem; }
.ds-modal-icon {
    width: 56px; height: 56px; border-radius: 14px;
    background: rgba(227,40,43,0.08); color: var(--color-accent-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; margin-bottom: 1rem;
}
.ds-modal-head h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.5rem; }
.ds-modal-head h3 span { color: var(--color-accent-red); }
.ds-modal-head p { font-size: 0.9rem; color: var(--color-text-muted); }
.ds-form { display: flex; flex-direction: column; gap: 1rem; }
.ds-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ds-field { display: flex; flex-direction: column; }
.ds-field label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-primary); margin-bottom: 0.35rem; }
.ds-field input {
    padding: 0.7rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-family: var(--font-body); font-size: 0.92rem; color: var(--color-primary);
    background: var(--color-bg-light);
    transition: var(--transition-fast);
}
.ds-field input:focus { outline: none; border-color: var(--color-accent-red); background: #fff; box-shadow: 0 0 0 3px rgba(227,40,43,0.12); }
.ds-submit-btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.ds-fine { font-size: 0.72rem; color: var(--color-text-muted); text-align: center; margin: 0.5rem 0 0; line-height: 1.5; }
@media (max-width: 520px) {
    .ds-form-row { grid-template-columns: 1fr; }
    .ds-modal-card { padding: 1.5rem 1.25rem 1.25rem; }
    .ds-modal-head h3 { font-size: 1.15rem; }
}
select {
    width: 100%;
    padding: 14px 50px 14px 18px; /* Right padding for arrow */
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23222' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708L8.354 10.354a.5.5 0 0 1-.708 0L4.646 7.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 20px;
    cursor: pointer;
}
/* STREAMING_CHUNK:Styling the comment form container... */
.comment-form {
background: #f9f9f9;
padding: 2rem;
border-radius: 8px;
border: 1px solid #eee;
margin-top: 2rem;
}

/* STREAMING_CHUNK:Styling the login/user info text... */
.comment-form .logged-in-as {
margin-bottom: 1.5rem;
color: #666;
font-size: 0.9rem;
}

.comment-form .logged-in-as a {
color: var(--color-primary, #dc2626);
text-decoration: none;
}

/* STREAMING_CHUNK:Styling labels and textareas... */
.comment-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
}

.comment-form textarea {
width: 100%;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
transition: border-color 0.3s ease;
resize: vertical;
}

.comment-form textarea:focus {
outline: none;
border-color: var(--color-primary, #dc2626);
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

/* STREAMING_CHUNK:Styling the submit button... */
.comment-form .form-submit .submit {
background-color: var(--color-primary, #dc2626);
color: #fff;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
transition: background 0.3s ease;
}

.comment-form .form-submit .submit:hover {
background-color: #b91c1c;
}
.banner-tag{line-height: 2.25;
    color: #009fff;
    font-size: 20px;}
@media (max-width: 768px) {
    .svc-detail-media img {
        width: 100%;
        min-height: auto;
        object-fit: contain;
    }
}
@media (max-width:768px){

.blog-grid,
.projects-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    opacity:1 !important;
    visibility:visible !important;
    height:auto !important;
    overflow:visible !important;
}

.blog-card,
.project-card{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
}

.fade-in-section{
    opacity:1 !important;
    transform:none !important;
}

}