:root {
    --primary-green: #114227;
    --secondary-green: #297645;
    --accent-red: #da0d20;
    --text-dark: #222222;
    --text-muted: #555555;
    --bg-light: #f7f9f7;
    --border-color: #e0e5e0;
    --topbar-bg: #1e3c2c;

    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Inter', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.5;
    overflow-x: clip;
    width: 100%;
    max-width: 100%;
}

/* Accessibility Utility */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Top Bar */
.top-bar {
    background-color: var(--topbar-bg);
    color: white;
    padding: 8px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 300;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top-bar-left svg {
    width: 16px;
    height: 16px;
    fill: #92d050;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.top-bar-right .divider {
    color: rgba(255, 255, 255, 0.4);
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* Main Header */
header {
    background-color: white;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 10;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    width: 32px;
    height: auto;
}

.header-logo-img {
    height: 50px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

.logo-text {
    display: none !important;
}

.footer-logo .logo-text {
    display: flex !important;
    flex-direction: column;
}

.logo-text h1,
.logo-text .logo-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.logo-text span {
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.logo-text span .red-text {
    color: var(--accent-red);
    font-weight: 500;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}

nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

nav a:hover {
    color: var(--secondary-green);
}

nav a svg {
    width: 10px;
    height: 10px;
    fill: currentColor;
    opacity: 0.6;
}

/* Dropdown styles */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    z-index: 100;
    flex-direction: column;
    padding: 10px 0;
    border-radius: 10px;
    border: 1px solid #eaeaea;
    gap: 0;
    min-width: 280px;
}

.dropdown:hover .dropdown-menu {
    display: flex;
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    padding: 8px 20px;
    font-weight: 600;
    color: var(--text-dark);
    display: block;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background-color: #fafdfa;
    color: var(--secondary-green);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn {
    padding: 12px 24px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

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

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

.btn-outline {
    background-color: transparent;
    color: var(--accent-red);
    border: 1px solid var(--accent-red);
}

.btn-outline:hover {
    background-color: rgba(218, 13, 32, 0.05);
}

.btn-arrow {
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.btn:hover .btn-arrow,
.blog-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* Hero Section */
.hero {
    position: relative;
    padding: 85px 5% 65px;
    display: flex;
    align-items: center;
    min-height: 550px;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.65) 50%, rgba(0, 0, 0, 0.35) 100%);
    z-index: 1;
    pointer-events: none;
}

.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    opacity: 1;
    background: url('./assets/home-page/hero-banner.webp') no-repeat center center;
    background-size: cover;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 55%;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

.hero-title {
    font-size: 30px;
    line-height: 1.2;
    color: #ffffff;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-title .italic-red {
    color: var(--accent-red);
    font-weight: 600;
}

.hero-desc {
    font-size: 1.1rem;
    color: #e2e8f0;
    max-width: 90%;
    margin-bottom: 30px;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.hero-buttons .btn-outline {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
}

.hero-buttons .btn-outline:hover {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

.feature-icons {
    display: flex;
    gap: 30px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
}

.feature-item-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.feature-item-text {
    font-size: 0.78rem;
    line-height: 1.25;
    color: #e2e8f0;
    font-weight: 500;
}

.hero-visual {
    position: relative;
    z-index: 2;
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 260px;
    position: absolute;
    bottom: 40px;
    right: 15%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.glass-card-header {
    display: flex;
    gap: 15px;
    align-items: center;
}

.glass-card-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.glass-card-title {
    font-size: 1.1rem;
    color: var(--primary-green);
    line-height: 1.2;
}

.glass-card-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.glass-card-action {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
}

.play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.play-btn svg {
    width: 12px;
    height: 12px;
    fill: var(--primary-green);
    margin-left: 2px;
}

.glass-card-action:hover .play-btn {
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.vertical-text {
    position: absolute;
    right: 5%;
    top: 20%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.85rem;
    letter-spacing: 4px;
    font-weight: 600;
    color: var(--primary-green);
    text-transform: uppercase;
}

/* Stats Bar */
.stats-bar {
    background-color: white;
    padding: 15px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 2;
    gap: 30px;
}

.stats-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    flex-shrink: 0;
}

.stats-logo .logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-logo .logo-icon {
    width: 36px;
    height: auto;
}

.stats-group,
.cert-group {
    display: flex;
    align-items: center;
    gap: 40px;
}

.stat-item {
    text-align: center;
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 15%;
    height: 70%;
    width: 1px;
    background-color: var(--border-color);
}

.stat-item h3,
.stat-item .stat-num {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.stat-item p {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
}

.cert-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: var(--border-color);
}

.cert-icon {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cert-item p {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-dark);
    text-align: center;
}


.hamburger-btn,
.close-btn,
.sidebar-header,
.sidebar-overlay {
    display: none;
}

/* About Section */
.about {
    padding: 80px 5%;
    background-color: white;
}

.about-container {
    display: flex;
    gap: 50px;
    align-items: center;
}

.about-left {
    flex: 1;
}

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

.section-title {
    font-size: 30px;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

.about-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.about-points {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.about-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-dark);
}

.about-points li svg {
    flex-shrink: 0;
}

.btn-dark {
    background-color: var(--accent-red);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background-color: #b30018;
}

.about-right {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.about-image-wrapper {
    position: relative;
    width: 90%;
}

.about-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 120px 20px 20px 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.mission-vision-card {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 320px;
    z-index: 2;
}

.mv-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.mv-icon {
    width: 45px;
    height: 45px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--accent-red);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-red);
}

.mv-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.mv-text h4,
.mv-text h3 {
    font-size: 1.05rem;
    color: #0c331a;
    margin-bottom: 5px;
    font-weight: 700;
}

.mv-text p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.mv-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 20px 0;
}

/* Why Choose Section */
.why-choose {
    padding: 80px 5%;
    background-color: #f6faf6;
    position: relative;
}

.why-choose::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center;
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
}

.wc-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.wc-header .section-title {
    margin-bottom: 0;
}

.wc-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.wc-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.wc-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #63a844;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.wc-item:hover .wc-icon {
    border-color: #63a844;
    transform: translateY(-5px);
}

.wc-icon svg {
    width: 40px;
    height: 40px;
    stroke: currentColor;
    stroke-width: 1.5;
    fill: none;
}

.wc-item p {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0c331a;
    line-height: 1.4;
}

/* Our Purpose Section */
.our-purpose {
    position: relative;
    background-image: url('assets/purpose_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px 50px 50px 50px;
    display: flex;
    align-items: center;
}

.our-purpose::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(5, 33, 11, 0.95) 0%, rgba(5, 33, 11, 0.7) 60%, rgba(5, 33, 11, 0.2) 100%);
    z-index: 1;
}

.purpose-container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    gap: 40px;
}

.purpose-content {
    max-width: 860px;
    flex: 1;
}

.purpose-subtitle {
    color: var(--accent-red);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.purpose-title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 15px;
}

.purpose-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 0;
    font-weight: 400;
}

.purpose-action {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 320px;
    max-width: 100%;
}

.purpose-action .btn {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 13px 20px;
    font-size: 0.88rem;
    text-align: center;
}

.purpose-action .btn-outline {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
}

.purpose-action .btn-outline:hover {
    background-color: #ffffff;
    color: #0f172a;
    border-color: #ffffff;
}

/* Manufacturing Excellence Section */
.manufacturing-excellence {
    padding: 80px 5%;
    background-color: #fff;
}

.mfg-container {
    display: flex;
    align-items: stretch;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
}

.mfg-left {
    flex: 0 0 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
}

.mfg-left .btn {
    align-self: flex-start;
}

.mfg-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mfg-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #444;
    font-weight: 600;
}

.mfg-check-list svg {
    width: 20px;
    height: 20px;
    color: var(--accent-red);
    flex-shrink: 0;
}

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

.mfg-title {
    font-size: 30px;
    color: #000000;
    line-height: 1.1;
    margin-bottom: 20px;
}

.mfg-desc {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.mfg-middle {
    flex: 0 0 30%;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    border-top-left-radius: 120px;
    max-height: 480px;
}

.mfg-middle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mfg-right {
    flex: 1;
    background: #fcfcfc;
    border-radius: 20px;
    border-top-right-radius: 120px;
    padding: 50px 40px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mfg-list-title {
    font-size: 30px;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 30px;
}

.mfg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mfg-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.95rem;
    color: #222;
    font-weight: 600;
    padding: 18px 0;
    border-bottom: 1px solid #ebebeb;
}

.mfg-list li:first-child {
    padding-top: 0;
}

.mfg-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mfg-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #dcdcdc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-red);
    background: #fff;
    flex-shrink: 0;
}

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

/* What We Offer Section */
.what-we-offer {
    padding: 60px 5%;
    background-image: url('assets/offer_bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.what-we-offer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1;
}

.offer-container {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.offer-left {
    flex: 0 0 30%;
    position: sticky;
    top: 100px;
}

.offer-left .section-title {
    margin-bottom: 15px;
    color: #000000;
    font-size: 30px;
    line-height: 1.2;
}

.offer-desc {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
    margin-bottom: 25px;
}

.offer-right {
    flex: 1;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.offer-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.offer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

.offer-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-text h4,
.offer-text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0c331a;
    margin-bottom: 8px;
}

.offer-text p {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* Testimonials Section */
.testimonials {
    padding: 70px 4%;
    background-color: #f4f5f7;
    overflow: hidden;
}

.testimonials-container {
    display: flex;
    align-items: center;
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.testimonials-left {
    flex: 0 0 260px;
    max-width: 270px;
    min-width: 230px;
    padding-right: 0;
}

.testimonials-left .section-title {
    margin-bottom: 30px;
    font-size: 2.1rem;
    line-height: 1.25;
}

.test-nav-buttons {
    display: flex;
    gap: 15px;
}

.testimonials-left .nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.testimonials-left .nav-btn.prev-btn {
    background-color: var(--accent-red);
    color: white;
}

.testimonials-left .nav-btn:hover {
    background-color: var(--accent-red);
    color: white;
    transform: scale(1.05);
}

.testimonials-right {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 15px 4px 25px;
    scroll-behavior: smooth;
}

.testimonials-right::-webkit-scrollbar {
    display: none;
}

.testimonial-cards-wrapper {
    display: flex;
    gap: 18px;
    width: 100%;
}

.testimonial-card {
    background: white;
    padding: 28px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    flex: 0 0 calc((100% - 36px) / 3);
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.08);
}

.testimonial-card .stars {
    color: #ffc107;
    font-size: 1.3rem;
    letter-spacing: 2px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-card .test-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 10px;
}

.testimonial-card .test-author h4,
.testimonial-card .test-author h3 {
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 4px;
}

.testimonial-card .test-author p {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* FAQ Section */
.faq-section {
    padding: 60px 5%;
    background-color: #ffffff;
}

.faq-header {
    text-align: center;
    max-width: 1400px;
}

.faq-container {
    display: flex;
    align-items: stretch;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.faq-left {
    flex: 1;
    display: flex;
}

.faq-image {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    object-fit: cover;
    height: 100%;
    max-height: 420px;
}

.faq-right {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.faq-question {
    width: 100%;
    text-align: left;
    background: #ffffff;
    border: none;
    padding: 20px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #f9faf9;
    color: var(--accent-red);
}

.faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    color: var(--accent-red);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #ffffff;
}

.faq-answer p {
    padding: 0 20px 20px;
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-item.active .faq-answer {
    max-height: 500px;
}

/* Available On Section */
.available-on {
    padding: 80px 5%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/manufacturing.jpg') center/cover fixed;
    text-align: center;
}

.available-title {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 40px;
    font-weight: 700;
}

.available-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.platform-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 15px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 140px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.platform-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
}

.platform-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Certifications Section */
.cert-section {
    padding: 60px 5%;
    background-color: #ffffff;
    text-align: center;
}

.cert-desc {
    max-width: 650px;
    margin: 0 auto 40px;
    color: var(--text-muted);
    line-height: 1.6;
}

.cert-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.cert-card {
    background: white;
    border: 1px solid #da0d20;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    aspect-ratio: 1 / 1.35;
    width: 220px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(218, 13, 32, 0.1);
}

.cert-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Footer Section */
.footer {
    background-color: #082412;
    color: white;
    padding: 60px 5% 20px;
    font-family: var(--font-sans);
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.footer-logo-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    padding: 8px 16px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.footer-logo-card:hover {
    transform: translateY(-2px);
}

.footer-logo-img,
.footer-logo img {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
    background: #ffffff;
    border-radius: 6px;
}

.footer-logo .logo-icon {
    width: 35px;
    height: auto;
}

.footer-logo .logo-text h1,
.footer-logo .logo-text .logo-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
}

.footer-logo .logo-text span {
    font-size: 0.55rem;
}

.footer-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 90%;
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: white;
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-icons a:hover {
    transform: translateY(-3px);
    color: var(--accent-red);
}

.social-icons svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.footer-heading {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 25px;
    color: white;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.footer-links a span {
    color: #4CAF50;
    font-size: 0.7rem;
    font-weight: bold;
}

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

.footer-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    line-height: 1.5;
}

.footer-contact svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: white;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: var(--accent-red);
}

/* Insights & Updates Section */
.insights-section {
    background: #f5f5f5;
    padding: 70px 5%;
}

.insights-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
}

.insights-left {
    flex: 0 0 260px;
}

.insights-left .section-title {
    margin-bottom: 12px;
    line-height: 1.2;
}

.insights-desc {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.insights-left .insights-btn {
    align-self: flex-start;
}

.insights-right {
    flex: 1;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
}

.insights-right::-webkit-scrollbar {
    display: none;
}

.insights-card {
    flex: 1;
    min-width: 220px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.insights-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.insights-thumb {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.insights-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.insights-card:hover .insights-thumb img {
    transform: scale(1.06);
}

.insights-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.insights-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 8px;
    line-height: 1.4;
    min-height: 2.8em;
}

.insights-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    color: #888;
    margin-bottom: 14px;
}

.insights-meta svg {
    flex-shrink: 0;
}

.blog-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-red);
    background-color: rgba(218, 13, 32, 0.04);
    border: 1px solid var(--accent-red);
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    width: fit-content;
}

.blog-btn:hover {
    background-color: var(--accent-red);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(218, 13, 32, 0.25);
}

/* Featured Products Section */
.featured-products {
    position: relative;
    padding: 80px 5%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;
}

.featured-products::before {
    display: none;
}

.fp-container {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    gap: 20px;
    align-items: center;
    min-width: 0;
}

.fp-left {
    flex: 1;
    min-width: 300px;
}

.fp-desc {
    color: #e0e0e0;
    margin-bottom: 25px;
    font-size: 1rem;
    line-height: 1.6;
}

.fp-btn {
    background: #fff;
    color: #000;
}

.fp-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

.fp-right {
    flex: 2;
    display: flex;
    align-items: center;
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.fp-carousel-wrapper {
    flex: 1;
    overflow: hidden;
    position: relative;
    min-width: 0;
    width: 100%;
}

.fp-carousel {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.fp-carousel::-webkit-scrollbar {
    display: none;
}

.fp-carousel.active-drag {
    cursor: grabbing;
    scroll-behavior: auto;
}

.fp-nav {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    font-weight: bold;
    color: #333;
    z-index: 3;
    margin: 5px;
    transition: all 0.3s;
    flex-shrink: 0;
}

.fp-nav:hover {
    background: var(--accent-red);
    color: #fff;
}

.product-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    background: #fff;
    border-radius: 12px;
    padding: 22px 18px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
    user-select: none;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.product-card .product-card-img-wrap {
    width: 100%;
    height: 155px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
}

.product-card img {
    max-width: 100%;
    max-height: 145px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.product-card h4 {
    font-size: 0.96rem;
    font-weight: 600;
    color: #114227;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    min-height: 2.8em;
    text-align: center;
    width: 100%;
}

.product-card .fp-card-btn {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-red);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-align: center;
    transition: gap 0.2s ease;
}

.product-card:hover .fp-card-btn {
    gap: 8px;
}

/* Responsive Design */
@media (max-width: 1024px) {

    .mfg-container,
    .fp-container,
    .insights-container {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
    }

    .fp-left {
        flex: none;
        width: 100%;
        min-width: 0;
        margin-bottom: 25px;
    }

    .fp-right {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        position: relative;
    }

    .fp-carousel-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .insights-left {
        flex: none;
        width: 100%;
        min-width: 0;
        margin-bottom: 25px;
    }

    .insights-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .mfg-left,
    .mfg-middle,
    .mfg-right {
        flex: 1;
        width: 100%;
        margin-bottom: 30px;
    }

    .mfg-middle {
        height: 400px;
        border-radius: 20px;
        border-top-left-radius: 80px;
    }

    .mfg-right {
        border-radius: 20px;
        border-top-right-radius: 80px;
    }

    .offer-container {
        flex-direction: column;
        gap: 30px;
    }

    .offer-left {
        flex: 1;
        width: 100%;
        position: static;
        text-align: center;
    }

    .offer-right {
        flex: 1;
        width: 100%;
    }

    /* Show hamburger */
    .hamburger-btn {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-dark);
        margin-left: 10px;
    }

    .hamburger-btn svg {
        width: 28px;
        height: 28px;
    }

    /* Sidebar Overlay */
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Sidebar nav */
    #sidebar {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background-color: white;
        z-index: 100;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        display: flex;
        flex-direction: column;
    }

    #sidebar.active {
        transform: translateX(0);
    }

    .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid var(--border-color);
    }

    .sidebar-header .logo-container {
        gap: 5px;
    }

    .sidebar-header .logo-icon {
        width: 30px;
    }

    .sidebar-header .logo-text h1,
    .sidebar-header .logo-text .logo-title {
        font-size: 1.2rem;
    }

    .close-btn {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-dark);
    }

    .close-btn svg {
        width: 24px;
        height: 24px;
    }

    #sidebar>ul {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    #sidebar a {
        font-size: 1.1rem;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }

    /* Hero / Other adjustments */
    .hero-title {
        font-size: 30px;
    }

    .hero-content {
        width: 60%;
    }

    .hero-visual {
        width: 40%;
    }

    #sidebar .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        margin-left: 15px;
        min-width: 100%;
        display: none;
        gap: 0;
    }

    #sidebar .dropdown:hover .dropdown-menu {
        display: flex;
    }

    #sidebar .dropdown-menu a {
        padding: 10px 0;
        font-size: 0.95rem;
        border-bottom: none;
        padding-bottom: 5px;
        white-space: normal;
    }

    .stats-bar {
        flex-direction: column;
        gap: 20px;
        padding: 20px 5%;
    }

    .stats-group,
    .cert-group {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .stat-item::after,
    .cert-item::after {
        display: none;
    }

    .about-container {
        flex-direction: column;
    }

    .about-right {
        width: 100%;
        margin-top: 40px;
        justify-content: center;
    }

    .about-image-wrapper {
        width: 100%;
    }

    .mission-vision-card {
        left: 50%;
        transform: translate(-50%, 50%);
        bottom: 0;
        top: auto;
    }

    .about {
        padding-bottom: 140px;
    }

    .wc-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 40px;
    }

    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-container {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }

    .testimonials-left {
        text-align: center;
        padding-right: 0;
    }

    .test-nav-buttons {
        justify-content: center;
    }

}

/* --------------------------------------
   OUR VISION SECTION (MATCHING UI)
-------------------------------------- */
.vision-section {
    position: relative;
    padding: 70px 0 80px;
    background-color: #ffffff;
    overflow: hidden;
}

.vision-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative;
    z-index: 2;
}

/* Left Column: Visual Card */
.vision-card-col {
    flex: 0.85;
    max-width: 44%;
}

.vision-card-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    background-color: #173827;
    line-height: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-card-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
}

.vision-banner-img {
    width: 100%;
    height: 450px;
    display: block;
    border-radius: 20px;
    object-fit: cover;
}

/* Right Column: Content */
.vision-content-col {
    flex: 1.25;
    max-width: 56%;
    position: relative;
    z-index: 2;
}

.vision-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.vision-badge-bar {
    width: 3px;
    height: 18px;
    background-color: var(--accent-red);
    border-radius: 2px;
}

.vision-badge-pill {
    background-color: #fff1f0;
    color: var(--accent-red);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
}

.vision-heading {
    font-size: 30px;
    line-height: 1.28;
    color: #0d281a;
    font-weight: 700;
    margin-bottom: 36px;
}

/* Steps List */
.vision-steps {
    display: flex;
    flex-direction: column;
}

.vision-step-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

.vision-step-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.vision-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #a4cf9f;
    background-color: #f2f8f0;
    color: #2b6338;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(43, 99, 56, 0.08);
}

.vision-step-line {
    width: 1.5px;
    height: 28px;
    background-color: #d2e4d4;
    margin: 6px 0;
}

.vision-step-body {
    padding-top: 6px;
    padding-bottom: 20px;
}

.vision-step-item:last-child .vision-step-body {
    padding-bottom: 0;
}

.vision-step-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: #11281e;
    margin: 0 0 5px 0;
}

.vision-step-desc {
    font-size: 0.92rem;
    color: #637367;
    line-height: 1.55;
    margin: 0;
}

/* Right Edge Decorative Leaves */
.vision-decor-leaves {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 85%;
    max-height: 480px;
    pointer-events: none;
    opacity: 0.75;
    z-index: 1;
}

/* Responsive */
@media (max-width: 991px) {
    .vision-container {
        flex-direction: column;
        gap: 40px;
    }

    .vision-card-col,
    .vision-content-col {
        max-width: 100%;
        width: 100%;
    }

    .vision-heading {
        font-size: 1.85rem;
        margin-bottom: 25px;
    }

    .vision-decor-leaves {
        opacity: 0.18;
        max-height: 300px;
    }
}

@media (max-width: 576px) {
    .vision-heading {
        font-size: 1.5rem;
    }

    .vision-step-item {
        gap: 14px;
    }

    .vision-step-num {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    .vision-step-title {
        font-size: 1.05rem;
    }

    .vision-step-desc {
        font-size: 0.88rem;
    }
}

/* --------------------------------------
   FOUNDATIONAL PILLARS SECTION (MATCHING UI)
-------------------------------------- */
.pillars-section {
    position: relative;
    padding: 70px 0 90px;
    background-color: #edf3ee;
    overflow: hidden;
}

.pillars-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    position: relative;
    z-index: 2;
}

.pillars-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    margin-bottom: 45px;
}

.pillars-header-left {
    flex: 1;
}

.pillars-badge {
    color: var(--accent-red);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pillars-heading {
    font-size: 30px;
    color: #0d281a;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.pillars-header-right {
    text-align: left;
    max-width: 380px;
}

.pillars-subtitle {
    font-style: italic;
    color: #5a6e62;
    font-size: 1.05rem;
    line-height: 1.45;
    margin-bottom: 10px;
    font-weight: 500;
}

.pillars-subtitle-line {
    width: 45px;
    height: 2px;
    background-color: var(--secondary-green, #297645);
    display: block;
    border-radius: 2px;
}

/* 3 Cards Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pillar-card {
    background-color: #ffffff;
    border: 1px solid #e3eae4;
    border-radius: 18px;
    padding: 32px 28px 45px;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(17, 66, 39, 0.08);
    border-color: #c9dfcc;
}

.pillar-icon-box {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    background-color: #ebf5ec;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pillar-content {
    flex: 1;
    padding-right: 15px;
}

.pillar-title {
    font-size: 1.22rem;
    font-weight: 700;
    color: #0d281a;
    margin: 0 0 10px 0;
}

.pillar-desc {
    font-size: 0.92rem;
    color: #5f7065;
    line-height: 1.6;
    margin: 0;
}

.pillar-arrow-btn {
    position: absolute;
    right: 22px;
    bottom: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #82b988;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e683c;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.25s ease;
}

.pillar-card:hover .pillar-arrow-btn {
    background-color: #2e683c;
    color: #ffffff;
    border-color: #2e683c;
    transform: scale(1.05);
}

/* Decorative Leaves Background */
.pillars-leaf-left {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%) scaleX(-1);
    height: 90%;
    max-height: 480px;
    pointer-events: none;
    opacity: 0.55;
    z-index: 1;
}

.pillars-leaf-right {
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    height: 90%;
    max-height: 480px;
    pointer-events: none;
    opacity: 0.55;
    z-index: 1;
}

/* Responsive */
@media (max-width: 991px) {
    .pillars-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .pillars-heading {
        font-size: 1.9rem;
    }

    .pillars-leaf-left,
    .pillars-leaf-right {
        display: none;
    }
}

@media (max-width: 576px) {
    .pillar-card {
        padding: 24px 20px 40px;
        gap: 15px;
    }

    .pillar-icon-box {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    .pillars-heading {
        font-size: 1.6rem;
    }
}

/* --------------------------------------
   OUR LEADERS PAGE STYLES (70% RED PALETTE)
-------------------------------------- */
.leaders-section {
    position: relative;
    padding: 55px 0 60px;
    background-color: #ffffff;
}

.leaders-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.leaders-intro-block {
    max-width: 800px;
    margin: 0 auto 40px;
    text-align: center;
}

.leaders-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.leaders-intro-badge-bar {
    width: 3px;
    height: 14px;
    background-color: var(--accent-red);
    border-radius: 2px;
}

.leaders-intro-badge-text {
    color: var(--accent-red);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.leaders-intro-heading {
    font-size: 30px;
    font-weight: 700;
    color: #1a080a;
    line-height: 1.3;
    margin-bottom: 12px;
}

.leaders-intro-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0;
}

/* Individual Profile Rows - Compact Height & Proportional Layout */
.leader-profile-row {
    display: flex;
    align-items: center;
    gap: 45px;
    margin-bottom: 50px;
    padding-bottom: 45px;
    border-bottom: 1px solid #f7e6e7;
}

.leader-profile-row:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.leader-profile-reverse {
    flex-direction: row-reverse;
}

/* Visual Column (Reduced Width) */
.leader-visual {
    flex: 0 0 340px;
    max-width: 340px;
    width: 100%;
    position: relative;
}

.leader-img-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(218, 13, 32, 0.1);
    border: 1px solid #f2d5d7;
    background-color: #8f0815;
    line-height: 0;
}

.leader-img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.leader-img-wrapper:hover .leader-img {
    transform: scale(1.025);
}

.leader-badge-floating {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background: rgba(196, 18, 36, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 12px 18px;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 6px 20px rgba(196, 18, 36, 0.35);
}

.leader-badge-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #ffe6e8;
}

.leader-badge-stat {
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
}

/* Content Column (Expanded Width & Tightened Spacing) */
.leader-content {
    flex: 1;
    min-width: 0;
}

.leader-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.leader-role-bar {
    width: 3px;
    height: 16px;
    background-color: var(--accent-red);
    border-radius: 2px;
}

.leader-role-text {
    color: var(--accent-red);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.leader-name {
    font-size: 28px;
    font-weight: 700;
    color: #1a080a;
    line-height: 1.2;
    margin: 0 0 4px 0;
}

.leader-org-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-red);
    margin-bottom: 14px;
}

.leader-highlight-box {
    background-color: #fff2f3;
    border-left: 3px solid var(--accent-red);
    padding: 10px 16px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 16px;
}

.leader-highlight-box p {
    font-size: 0.92rem;
    font-style: italic;
    color: #5c141a;
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.leader-bio-text p {
    font-size: 0.92rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 10px;
}

.leader-bio-text p:last-child {
    margin-bottom: 0;
}

.leader-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.leader-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff6f6;
    border: 1px solid #fcdede;
    border-radius: 30px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #8c0d16;
    transition: background 0.25s, border-color 0.25s;
}

.leader-chip:hover {
    background: #fde8e8;
    border-color: var(--accent-red);
}

.leader-chip i {
    color: var(--accent-red);
    font-size: 0.85rem;
}

/* --------------------------------------
   OUR EXPERTISE / PILLARS OF EXCELLENCE (RED PALETTE)
-------------------------------------- */
.leaders-expertise-section {
    position: relative;
    padding: 85px 0 90px;
    background-color: #fdf5f5;
    overflow: hidden;
}

.leaders-expertise-header {
    text-align: center;
    margin: 0 auto 50px;
}

.leaders-expertise-badge {
    color: var(--accent-red);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.leaders-expertise-heading {
    font-size: 30px;
    font-weight: 700;
    color: #1a080a;
    margin-bottom: 12px;
    line-height: 1.25;
}

.leaders-expertise-subtitle {
    font-size: 0.98rem;
    color: #634b4e;
    line-height: 1.6;
    margin: 0;
}

.leaders-expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    position: relative;
    z-index: 2;
}

.leaders-expertise-card {
    background-color: #ffffff;
    border: 1px solid #f0d5d7;
    border-top: 3px solid var(--accent-red);
    border-radius: 18px;
    padding: 36px 30px;
    box-shadow: 0 8px 24px rgba(218, 13, 32, 0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.leaders-expertise-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(218, 13, 32, 0.12);
    border-color: var(--accent-red);
}

.leaders-expertise-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background-color: #feecec;
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 22px;
}

.leaders-expertise-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a080a;
    margin: 0 0 12px 0;
}

.leaders-expertise-desc {
    font-size: 0.92rem;
    color: #555555;
    line-height: 1.65;
    margin-bottom: 22px;
    flex-grow: 1;
}

.leaders-expertise-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.leaders-expertise-tag {
    background-color: #fff0f0;
    color: #000000;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 6px;
    border: 1px solid #fcdada;
}

/* Joint Leadership Quote Banner (Brand Forest Green Palette) */
.leaders-quote-banner {
    margin-top: 60px;
    background: linear-gradient(135deg, var(--primary-green) 0%, #1a5632 100%);
    color: #ffffff;
    border-radius: 20px;
    padding: 50px 60px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(17, 66, 39, 0.22);
}

.leaders-quote-icon {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 15px;
}

.leaders-quote-text {
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.55;
    max-width: 900px;
    margin: 0 auto 20px;
    font-weight: 500;
}

.leaders-quote-author {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #d4edda;
    text-transform: uppercase;
}

/* Leaders Responsive */
@media (max-width: 991px) {

    .leader-profile-row,
    .leader-profile-reverse {
        flex-direction: column;
        gap: 35px;
        margin-bottom: 60px;
        padding-bottom: 50px;
    }

    .leader-visual {
        flex: 0 0 auto;
        max-width: 340px;
        width: 100%;
        margin: 0 auto;
    }

    .leader-content {
        max-width: 100%;
        width: 100%;
    }

    .leaders-expertise-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .leaders-quote-banner {
        padding: 35px 25px;
    }

    .leaders-quote-text {
        font-size: 1.15rem;
    }
}

@media (max-width: 576px) {

    .leader-name,
    .leaders-intro-heading,
    .leaders-expertise-heading {
        font-size: 24px;
    }

    .leader-chips-row {
        gap: 8px;
    }

    .leader-chip {
        font-size: 0.78rem;
        padding: 6px 12px;
    }

    .leaders-expertise-card {
        padding: 26px 20px;
    }
}

@media (max-width: 768px) {
    .faq-container {
        flex-direction: column;
        gap: 30px;
    }

    .our-purpose {
        padding: 60px 5%;
        text-align: center;
    }

    .our-purpose::before {
        width: 100%;
        background: linear-gradient(180deg, rgba(5, 33, 11, 0.95) 0%, rgba(5, 33, 11, 0.75) 100%);
    }

    .purpose-desc br {
        display: none;
    }

    .purpose-container {
        flex-direction: column;
        margin: 0 auto;
        gap: 20px;
    }

    .purpose-action {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    .top-bar {
        flex-direction: column;
        gap: 5px;
        text-align: center;
        font-size: 0.65rem;
        padding: 6px 2%;
    }

    .top-bar-left,
    .top-bar-right {
        justify-content: center;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .hero {
        flex-direction: column;
        padding: 60px 5% 50px;
        min-height: 520px;
    }

    .hero::before {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.65) 60%, rgba(0, 0, 0, 0.4) 100%);
    }

    .hero-content {
        width: 100%;
        margin-bottom: 40px;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-visual {
        width: 100%;
        justify-content: center;
        min-height: 300px;
    }

    .vertical-text {
        display: none;
    }

    .glass-card {
        position: relative;
        bottom: auto;
        right: auto;
        margin: 0 auto;
        width: 90%;
        max-width: 320px;
    }

    .feature-icons {
        flex-wrap: wrap;
        gap: 15px;
    }

    .feature-item {
        width: calc(50% - 15px);
    }

    .section-title {
        font-size: 30px;
    }

    .about-points {
        grid-template-columns: 1fr;
    }

    .wc-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Featured Products Section Mobile */
    .featured-products {
        padding: 50px 5%;
        width: 100%;
        overflow: hidden;
    }

    .fp-container {
        gap: 25px;
        width: 100%;
    }

    .fp-left {
        text-align: left;
    }

    .fp-left .section-title {
        font-size: 26px !important;
        line-height: 1.25;
    }

    .fp-desc {
        font-size: 0.95rem;
        margin-bottom: 20px;
    }

    .fp-right {
        width: 100%;
        position: relative;
        padding: 0;
    }

    .fp-carousel-wrapper {
        width: 100%;
        overflow: hidden;
    }

    .fp-carousel {
        gap: 15px;
        padding: 6px 2px 14px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .product-card {
        flex: 0 0 210px;
        min-width: 210px;
        max-width: 210px;
        padding: 18px 14px;
        scroll-snap-align: start;
    }

    .product-card img {
        max-height: 130px;
    }

    .fp-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        margin: 0;
        z-index: 10;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .fp-nav.fp-prev {
        left: -6px;
    }

    .fp-nav.fp-next {
        right: -6px;
    }

    /* Insights Section Mobile */
    .insights-section {
        padding: 50px 5%;
        width: 100%;
        overflow: hidden;
    }

    .insights-card {
        flex: 0 0 250px;
        min-width: 250px;
        scroll-snap-align: start;
    }
}

@media (max-width: 480px) {
    .featured-products {
        padding: 40px 16px;
    }

    .product-card {
        flex: 0 0 190px;
        min-width: 190px;
        max-width: 190px;
        padding: 15px 12px;
    }

    .product-card img {
        max-height: 110px;
    }

    .product-card h4 {
        font-size: 0.95rem;
    }

    .fp-nav {
        width: 32px;
        height: 32px;
    }

    .fp-nav svg {
        width: 15px;
        height: 15px;
    }

    .fp-nav.fp-prev {
        left: -4px;
    }

    .fp-nav.fp-next {
        right: -4px;
    }

    .insights-section {
        padding: 40px 16px;
    }

    .insights-card {
        flex: 0 0 230px;
        min-width: 230px;
    }

    .hero {
        padding: 50px 16px 40px;
        min-height: 480px;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .feature-icons {
        gap: 10px;
    }

    .feature-item {
        width: calc(50% - 10px);
    }

    .stats-group,
    .cert-group {
        gap: 15px;
        row-gap: 25px;
        /* Add some space between rows */
    }

    .stat-item,
    .cert-item,
    .cert-card {
        width: calc(50% - 15px);
    }

    .header-actions {
        gap: 10px;
    }

    .header-actions .btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .logo-text h1 {
        font-size: 1.1rem;
    }

    .logo-text span {
        font-size: 0.45rem;
    }

    .logo-icon {
        width: 26px;
    }

    .section-title {
        font-size: 30px;
    }

    .mission-vision-card {
        width: 90%;
        padding: 20px;
    }

    .wc-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Language Dropdown */
.lang-selector-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.lang-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    min-width: 140px;
    background-color: #fff;
    color: #333;
    list-style: none;
    padding: 5px 0;
    margin: 5px 0 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    z-index: 1000;
}

.lang-dropdown li {
    padding: 8px 15px;
    font-size: 14px;
    font-weight: normal;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
}

.lang-selector-container img {
    margin-right: 8px;
    border-radius: 2px;
    vertical-align: middle;
}

.lang-dropdown li:hover {
    background-color: #f0f0f0;
}

.lang-selector-container:hover .lang-dropdown {
    display: block;
}

/* Highlight Language Selector */
.highlight-lang .lang-selector {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid #da0d20;
    box-shadow: none;
    transition: all 0.3s ease;
}

.highlight-lang:hover .lang-selector {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #ff1a1a;
}

/* Hide google translate top bar */
.VIpgJd-ZVi9od-ORHb-OEVmcd {
    display: none !important;
}

body {
    top: 0 !important;
}

/* Hide Google Translate Tooltip and Highlights */
#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

/* Gallery Masonry Layout */
.gallery-masonry {
    column-count: 4;
    column-gap: 20px;
    padding: 20px 0;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 20px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #da0d20;
    /* Added red border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: block;
}

.gallery-item img:hover {
    transform: scale(1.02);
}

@media (max-width: 1024px) {
    .gallery-masonry {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .gallery-masonry {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .gallery-masonry {
        column-count: 2;
    }
}

/* Generic 4-Column Grid for Blog, News, Case Studies */
.card-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 60px 5%;
    background-color: #fafdfa;
}

.content-card {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

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

.content-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border: 1px solid #da0d20;
}

.content-card-body {
    padding: 20px;
}

.content-card-body h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.content-card-body p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 15px;
}

.content-card-body .view-more {
    display: inline-block;
    color: #da0d20;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.content-card-body .view-more:hover {
    text-decoration: underline;
}

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

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

/* Inline CSS Refactoring Utility Classes */
.hidden {
    display: none !important;
}

.icon-inline {
    margin-right: 6px;
    vertical-align: middle;
}

.text-white {
    color: white;
}

.text-muted-white {
    color: rgba(255, 255, 255, 0.7);
}

.bg-white {
    background: white;
}

/* Page Banner Shared Styles */
.page-banner {
    position: relative;
}

.page-banner-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/inner-hero.webp') center bottom / cover;
    z-index: -1;
}

.page-banner-content-left {
    padding: 120px 5% 80px;
    text-align: left;
    color: white;
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.banner-subtitle {
    display: inline-block;
    color: #fecaca;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.banner-title {
    font-size: 30px;
    margin-bottom: 15px;
}

.banner-breadcrumb {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
}

.breadcrumb-link {
    color: white;
    text-decoration: none;
}

.breadcrumb-sep {
    margin: 0 8px;
}

.breadcrumb-active {
    color: #ff4d4d;
}

@media (max-width: 768px) {
    .page-banner-content-left {
        padding: 85px 5% 45px;
    }

    .banner-title {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .banner-subtitle {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }

    .banner-breadcrumb {
        font-size: 11.5px;
    }
}

/* Product Page Styles */
.bg-product1 {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/products/nutraceutical/activist-curcumin-plus-capsules/activist-curcumin-plus-capsules.webp') center/cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bg-purpose {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/inner-hero.webp') center bottom / cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bg-featured {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/inner-hero.webp') center bottom / cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.products-container {
    padding: 80px 5%;
    background-color: #fafdfa;
}

.product-grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.product-card-styled {
    background: white;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.product-card-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

.product-card-title {
    margin: 15px 0 10px;
    font-size: 22px;
    color: #114227;
    font-family: var(--font-sans);
    font-weight: 700;
}

.product-card-desc {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    font-family: var(--font-sans);
    line-height: 1.6;
}

.product-btn {
    width: 100%;
    justify-content: center;
    border: 1px solid #da0d20;
    color: #da0d20;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 600;
}

/* Contact Us Page Styles */
.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 60px 5%;
}

.contact-info-card {
    border: 1px solid #da0d20;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    background-color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.contact-info-card img,
.contact-info-card svg {
    margin-bottom: 15px;
}

.contact-info-card h3,
.contact-info-card h2 {
    font-size: 20px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.contact-info-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.contact-info-card .social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.contact-info-card .social-icons img {
    width: 30px;
    height: 30px;
    margin-bottom: 0;
}

.contact-section-split {
    display: flex;
    flex-wrap: wrap;
    margin: 60px 5%;
    gap: 40px;
}

.contact-left,
.contact-right {
    flex: 1;
    min-width: 300px;
}

.contact-left h4,
.contact-left .contact-subtitle {
    color: #da0d20;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.contact-left h2 {
    font-size: 32px;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.contact-detail-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.contact-detail-row svg {
    margin-right: 15px;
    color: #da0d20;
    flex-shrink: 0;
}

.contact-detail-row div {
    font-size: 15px;
    color: #555;
    line-height: 1.5;
}

.contact-form {
    background: #fafdfa;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: inherit;
    font-size: 15px;
}

.contact-form input:focus,
.contact-form select:focus {
    outline: none;
    border-color: #da0d20;
}

/* Custom Select UI */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

.custom-select-wrapper.open {
    z-index: 999;
}

.custom-select-trigger {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-dark);
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-select-trigger span,
.custom-select-trigger svg {
    pointer-events: none;
}

.custom-select-trigger:hover,
.custom-select-wrapper.open .custom-select-trigger {
    border-color: var(--accent-red);
}

.custom-select-trigger svg {
    transition: transform 0.3s ease;
}

.custom-select-wrapper.open .custom-select-trigger svg {
    transform: rotate(180deg);
}

.custom-options {
    position: absolute;
    display: block;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ccc;
    border-top: none;
    background: #ffffff;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 10;
    margin-top: 5px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    list-style: none;
    padding: 0;
}

.custom-select-wrapper.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.custom-options li {
    position: relative;
    display: block;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #f5f5f5;
}

.custom-options li:last-child {
    border-bottom: none;
}

.custom-options li:hover {
    background: #fafdfa;
    color: var(--secondary-green);
}

.custom-options li.selected {
    background: var(--accent-red);
    color: #ffffff;
}

.map-container {
    width: 100%;
    height: 400px;
}

/* Bulk Buy Page Styles */
.bulk-buy-section {
    position: relative;
    padding: 60px 5%;
    background-color: #f7faf7;
    overflow: hidden;
}

.bulk-buy-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') no-repeat center center;
    background-size: cover;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.bulk-buy-container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
}

.bulk-buy-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
    gap: 40px;
}

.bb-left-text {
    flex: 1;
    max-width: 100%;
}

.bb-subtitle {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-green);
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.bb-subtitle .bb-line {
    width: 30px;
    height: 2px;
    background-color: var(--accent-red);
}

.bb-title {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    color: var(--primary-green);
    margin-bottom: 20px;
    line-height: 1.2;
    font-weight: 700;
}

.bb-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
}

.bb-right-text {
    text-align: right;
    margin-top: 30px;
}

.bb-vision-text {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: var(--primary-green);
    font-weight: 600;
    line-height: 1.4;
    position: relative;
    display: inline-block;
}

.bb-short-line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--accent-red);
    margin: 10px 0 0 auto;
}

.bulk-buy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.bb-image-wrapper {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.bb-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    min-height: 400px;
}

.bb-floating-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.bb-floating-card.top-left {
    top: 30px;
    left: 30px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
}

.bb-floating-card.top-left h3,
.bb-floating-card.top-left .bb-card-title {
    color: #ffffff;
    font-size: 1.4rem;
    line-height: 1.3;
    font-weight: 600;
}

.bb-red-line {
    width: 40px;
    height: 2px;
    background-color: var(--accent-red);
    margin-top: 15px;
}

.bb-floating-card.bottom-left {
    bottom: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
}

.bb-float-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f7f0;
    color: var(--primary-green);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--primary-green);
}

.bb-float-text h4,
.bb-float-text .bb-float-title {
    font-size: 0.9rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 2px;
}

.bb-float-text p {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.2;
}

.bb-form-wrapper {
    display: flex;
    flex-direction: column;
}

.bb-form-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.bb-form-subtitle {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-green);
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.bb-form-subtitle .bb-line {
    width: 30px;
    height: 2px;
    background-color: var(--accent-red);
}

.bb-form-heading h2 {
    font-size: 1.8rem;
    color: var(--primary-green);
    margin-bottom: 5px;
}

.bb-form-heading p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.bb-form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 12px;
}

.bb-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bb-input-group label {
    font-size: 0.8rem;
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 8px;
}

.bb-input-group label .req {
    color: var(--accent-red);
}

.bb-input-group input,
.bb-input-group select,
.bb-input-group .custom-select-trigger {
    padding: 10px 15px;
    border: 1px solid #e0e5e0;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--text-dark);
    background: #ffffff;
    transition: all 0.3s ease;
}

.bb-input-group input::placeholder {
    color: #a0a0a0;
}

.bb-input-group input:focus {
    outline: none;
    border-color: var(--primary-green);
}

.bulk-custom-select .custom-select-trigger {
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 0.85rem;
}

.bulk-custom-select .custom-options {
    max-height: 250px;
    overflow-y: auto;
    z-index: 999;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

.bulk-custom-select .custom-options::-webkit-scrollbar {
    width: 6px;
}

.bulk-custom-select .custom-options::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 4px;
}

.bulk-custom-select .custom-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.bulk-custom-select .custom-options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.bulk-custom-select .custom-options li {
    font-size: 0.85rem;
    padding: 9px 15px;
}

.bulk-custom-select .custom-options li:hover {
    background: #eef2ff;
    color: #1a73e8;
}

.bulk-custom-select .custom-options li.selected {
    background: #1a73e8;
    color: #ffffff;
}

.bb-radio-group {
    margin-bottom: 20px;
}

.bb-radio-main-label {
    margin-bottom: 10px;
}

.radio-options {
    display: flex;
    gap: 30px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
}

.radio-label input[type="radio"] {
    display: none;
}

.radio-custom {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 50%;
    position: relative;
    display: inline-block;
}

.radio-label input[type="radio"]:checked+.radio-custom {
    border-color: var(--primary-green);
}

.radio-label input[type="radio"]:checked+.radio-custom::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primary-green);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bb-submit-btn {
    width: 100%;
    background-color: var(--accent-red);
    color: #ffffff;
    border: none;
    padding: 14px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.bb-submit-btn:hover {
    background-color: #b30018;
}

.bb-features-strip {
    display: flex;
    justify-content: space-between;
    background: #ffffff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.bb-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    position: relative;
}

.bb-feature-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background-color: #eaeaea;
}

.bbf-icon {
    width: 50px;
    height: 50px;
    background: #f0f7f0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

.bbf-icon svg {
    width: 24px;
    height: 24px;
}

.bb-feature-item h4,
.bb-feature-item h3 {
    font-size: 0.95rem;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.bb-feature-item p {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.bbf-line {
    width: 25px;
    height: 2px;
    background-color: var(--accent-red);
    margin-top: 10px;
}

@media (max-width: 1024px) {
    .bulk-buy-grid {
        grid-template-columns: 1fr;
    }

    .bb-header-content {
        flex-direction: column;
    }

    .bb-right-text {
        text-align: left;
        margin-top: 0;
    }

    .bb-short-line {
        margin: 10px 0 0 0;
    }

    .bb-features-strip {
        flex-wrap: wrap;
        gap: 30px;
    }

    .bb-feature-item {
        flex: 1 1 40%;
    }

    .bb-feature-item:nth-child(even)::after {
        display: none;
    }

    .bb-feature-item:nth-child(odd):not(:last-child)::after {
        display: block;
        right: -15px;
    }
}

@media (max-width: 768px) {
    .bulk-buy-section {
        padding: 40px 5%;
    }

    .bb-title {
        font-size: 1.8rem;
    }

    .bb-desc {
        font-size: 0.9rem;
    }

    .bb-vision-text {
        font-size: 1rem;
    }

    .bb-floating-card.top-left h3 {
        font-size: 1.2rem;
    }

    .bb-form-card {
        padding: 20px;
    }

    .bb-form-heading h2 {
        font-size: 1.5rem;
    }

    .bb-main-img {
        min-height: 250px;
    }

    .bb-form-row {
        flex-direction: column;
        gap: 15px;
    }

    .bulk-buy-header-content {
        flex-direction: column;
        margin-bottom: 30px;
        gap: 20px;
    }

    .bb-right-text {
        text-align: left;
    }

    .bb-short-line {
        margin: 10px 0 0 0;
    }

    .bb-floating-card.bottom-left {
        left: 15px;
        bottom: 15px;
        right: 15px;
        padding: 10px 15px;
    }

    .bb-float-icon {
        width: 30px;
        height: 30px;
    }

    .bb-float-text h4 {
        font-size: 0.8rem;
    }

    .bb-feature-item {
        flex: 1 1 45%;
    }

    .bb-feature-item:nth-child(even)::after {
        display: none;
    }

    .bb-feature-item:nth-child(odd):not(:last-child)::after {
        display: block;
        right: -10px;
    }

    .bb-features-strip {
        padding: 20px;
        gap: 20px;
    }
}

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

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

    .contact-section-split {
        flex-direction: column;
    }
}

/* CTA Banner */
.bb-cta-banner {
    background: #0f2c1d url('assets/cta-banner.webp') no-repeat center center;
    background-size: cover;
    background-blend-mode: overlay;
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

.bb-cta-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.bb-cta-left {
    flex: 1.8;
}

.bb-cta-left h2 {
    font-family: var(--font-sans);
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 10px;
    line-height: 1.2;
}

.bb-cta-left p {
    font-size: 0.9rem;
    color: #e0e0e0;
    line-height: 1.6;
    margin-bottom: 15px;
    max-width: 650px;
}

.bb-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-red);
    color: #ffffff;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
}

.bb-cta-btn:hover {
    background: #b30018;
}

.bb-cta-divider {
    width: 1px;
    height: 120px;
    background: rgba(255, 255, 255, 0.2);
}

.bb-cta-middle {
    flex: 1;
}

.bb-cta-middle ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bb-cta-middle li {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
}

.bb-cta-middle svg {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

.bb-cta-right {
    flex: 0.8;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.bb-cta-script {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.6rem;
    line-height: 1.1;
    color: #ffffff;
    text-align: right;
    z-index: 3;
}

.bb-cta-red-line {
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--accent-red);
    margin: 10px 0 0 auto;
    transform: rotate(-10deg);
}

@media (max-width: 1024px) {
    .bb-cta-container {
        flex-direction: column;
        text-align: center;
    }

    .bb-cta-left p {
        margin: 0 auto 25px auto;
    }

    .bb-cta-divider {
        width: 100%;
        height: 1px;
    }

    .bb-cta-middle ul {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .bb-cta-right {
        justify-content: center;
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .bb-cta-banner {
        padding: 30px 5%;
    }

    .bb-cta-left h2 {
        font-size: 1.5rem;
    }

    .bb-cta-left p {
        font-size: 0.85rem;
    }

    .bb-cta-middle ul {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .bb-cta-middle li {
        font-size: 0.85rem;
    }

    .bb-cta-product {
        width: 150px;
    }

    .bb-cta-script {
        position: relative;
        transform: none;
        right: auto;
        top: auto;
        margin-top: -20px;
        font-size: 1.4rem;
    }
}

/* Company Overview - About Section */
.co-about-section {
    padding: 80px 5%;
    background-color: #ffffff;
}

.co-about-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* Left Image Area */
.co-about-left {
    flex: 0.8;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.co-about-left::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 1;
}

.co-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 400px;
}

.co-img-text-top {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 40px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: left;
    line-height: 1.5;
}

.co-img-text-top .co-red-line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--accent-red);
    margin-top: 10px;
}

.co-img-badge {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 30px;
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.co-img-badge svg {
    width: 20px;
    height: 20px;
    color: var(--primary-green);
    fill: var(--primary-green);
}

.co-img-badge span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary-green);
    letter-spacing: 1px;
}

/* Right Content Area */
.co-about-right {
    flex: 1.5;
    display: flex;
    gap: 30px;
}

.co-text-box {
    flex: 1;
    background-color: #f8fbf8;
    background-image: url('https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: 50%;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    border-radius: 12px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.co-subtitle {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-red);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.co-text-box h2 {
    font-size: 30px;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.co-text-box p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 20px;
}

.co-link {
    display: inline-block;
    color: var(--accent-red);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 10px;
    border-bottom: 1px solid var(--accent-red);
    padding-bottom: 2px;
    align-self: flex-start;
}

.co-link:hover {
    color: #b30018;
    border-color: #b30018;
}


/* Responsive Media Queries for Company Overview */
@media (max-width: 1024px) {
    .co-about-container {
        flex-direction: column;
    }

    .co-about-right {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .co-about-section {
        padding: 50px 5%;
    }

    .co-text-box {
        padding: 30px 20px;
    }

    .co-text-box h2 {
        font-size: 2.2rem;
    }

    .co-img-badge {
        bottom: 15px;
        left: 15px;
        padding: 8px 15px;
    }

    .co-img-text-top {
        top: 20px;
        right: 20px;
        font-size: 0.9rem;
    }

    .co-main-img {
        min-height: 350px;
    }
}

/* Company Overview - Driven Section */
.co-driven-section {
    padding: 80px 5%;
    background-color: #fdfdfd;
}

.co-driven-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.co-driven-content {
    flex: 1.3;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.co-subtitle .co-red-line-inline {
    display: inline-block;
    width: 30px;
    height: 2px;
    background-color: var(--accent-red);
    vertical-align: middle;
    margin-left: 10px;
}

.co-driven-content h2 {
    font-size: 30px;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.co-driven-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 40px;
}

.co-driven-features {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.co-d-feature {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding-right: 15px;
}

.co-d-feature:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background-color: #eaeaea;
}

.co-d-icon {
    width: 32px;
    height: 32px;
    color: var(--accent-red);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.co-d-text h4,
.co-d-text h3 {
    font-size: 0.85rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 1.3;
}

.co-d-text p {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.4;
    margin-bottom: 0;
}

/* Driven Section Image */
.co-driven-image {
    flex: 1;
    position: relative;
    border-radius: 60px 10px 60px 10px;
    overflow: hidden;
}

.co-driven-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(225deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
    pointer-events: none;
    z-index: 1;
}

.co-driven-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    max-height: 400px;
}

.co-driven-badge {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-align: right;
    line-height: 1.5;
}

.co-driven-badge .co-badge-line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--accent-red);
    margin-top: 10px;
    margin-left: auto;
}

/* Responsive */
@media (max-width: 1024px) {
    .co-driven-container {
        flex-direction: column;
    }

    .co-driven-image {
        width: 100%;
        height: 350px;
    }
}

@media (max-width: 768px) {
    .co-driven-section {
        padding: 50px 5%;
    }

    .co-driven-content h2 {
        font-size: 2.2rem;
    }

    .co-driven-features {
        flex-wrap: wrap;
        gap: 30px;
    }

    .co-d-feature {
        flex: 1 1 40%;
        padding-right: 0;
    }

    .co-d-feature::after {
        display: none;
    }

    .co-driven-image {
        border-radius: 30px 10px 30px 10px;
    }

    .co-driven-badge {
        top: 20px;
        right: 20px;
        font-size: 0.9rem;
    }
}

/* Company Overview - Counter Section */
.co-counter-section {
    background-color: #f0f0f0;
    padding: 30px 5%;
}

.co-counter-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.co-counter-item {
    flex: 1;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.co-counter-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    width: 1px;
    background-color: var(--accent-red);
}

.co-counter-num {
    font-family: var(--font-sans);
    font-size: 2.2rem;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 5px;
}

.co-plus {
    color: var(--accent-red);
}

.co-counter-label {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive for Counter Section */
@media (max-width: 768px) {
    .co-counter-container {
        flex-direction: column;
        gap: 40px;
    }

    .co-counter-item:not(:last-child)::after {
        right: 50%;
        top: auto;
        bottom: -20px;
        transform: translateX(50%);
        height: 1px;
        width: 60px;
    }
}

/* Company Overview - Quality Policy Section */
.co-quality-section {
    padding: 80px 5%;
    background-color: #ffffff;
}

.co-quality-container {
    max-width: 1400px;
    margin: 0 auto;
}

.co-quality-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.co-q-header-left {
    flex: 1;
}

.co-q-header-right {
    flex: 1;
    text-align: right;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

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

.co-q-main-title {
    font-size: 30px;
    color: var(--text-dark);
    font-weight: 700;
}

.co-quality-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr;
    gap: 20px;
}

.co-quality-card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px;
    background-color: #ffffff;
}

.co-q-icon {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* Colorful Cards */
.card-green {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.card-green .co-q-icon {
    color: #16a34a;
}

.card-blue {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.card-blue .co-q-icon {
    color: #2563eb;
}

.card-orange {
    background-color: #fff7ed;
    border-color: #fed7aa;
}

.card-orange .co-q-icon {
    color: #ea580c;
}

.co-q-title {
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
}

.co-q-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Responsive for Quality Policy Section */
@media (max-width: 1024px) {
    .co-quality-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .co-q-header-right {
        text-align: left;
    }

    .co-quality-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .co-quality-section {
        padding: 50px 5%;
    }

    .co-quality-grid {
        grid-template-columns: 1fr;
    }
}

/* Company Overview - Strength Section */
.co-strength-section {
    padding: 70px 5%;
    background-color: #fdf0f0;
}

.co-strength-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

/* Left Image Box */
.co-strength-image-box {
    flex: 1.2;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    min-height: 350px;
}

.co-strength-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.co-strength-image-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
    z-index: 1;
}

.co-strength-img-text {
    position: absolute;
    bottom: 10px;
    left: 30px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.6;
    z-index: 2;
}

.co-white-line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #ffffff;
    margin-top: 15px;
}

/* Middle Content Box */
.co-strength-content-box {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.co-strength-subtitle {
    color: var(--accent-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.co-strength-title {
    font-size: 30px;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 700;
}

.co-strength-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.co-strength-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-red);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    align-self: flex-start;
    transition: gap 0.3s ease;
}

.co-strength-link:hover {
    gap: 15px;
}

/* Right Features Box */
.co-strength-features-box {
    flex: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-left: 30px;
    border-left: 1px solid #eaeaea;
}

.co-sf-item {
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #eaeaea;
    padding: 15px 20px;
    border-radius: 8px;
    background-color: #ffffff;
}

.co-sf-icon {
    width: 45px;
    height: 45px;
    background-color: #fff0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-red);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.co-sf-text {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .co-strength-container {
        flex-direction: column;
    }

    .co-strength-features-box {
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .co-sf-item {
        width: calc(50% - 10px);
    }

    .co-strength-image-box {
        min-height: 400px;
    }
}

@media (max-width: 768px) {
    .co-sf-item {
        width: 100%;
    }
}

/* Hero Section */
.mv-hero {
    position: relative;
    padding: 100px 5%;
    color: #ffffff;
    overflow: hidden;
    min-height: 450px;
    display: flex;
    align-items: center;
}

.mv-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./assets/inner-hero.webp');
    background-size: cover;
    background-position: center bottom;
    z-index: 1;
}

.mv-hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.mv-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mv-hero-subtitle {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 600;
}

.mv-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.mv-hero-desc {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.mv-hero-breadcrumb {
    font-size: 0.9rem;
    color: #e0e0e0;
}

.mv-cursive-text {
    font-family: 'Satisfy', cursive;
    font-size: 2.5rem;
    line-height: 1.2;
    text-align: right;
    display: block;
}

/* Sections Base */
.mv-section {
    padding: 80px 5%;
}

.bg-light {
    background-color: #fafaf7;
}

.bg-white {
    background-color: #ffffff;
}

.mv-container {
    max-width: 1400px;
    margin: 0 auto;
}

.mv-split {
    display: flex;
    gap: 50px;
    align-items: center;
}

.mv-reverse {
    flex-direction: row-reverse;
}

.mv-content-left,
.mv-content-right {
    flex: 1;
}

.mv-image-right,
.mv-image-left {
    flex: 1;
    position: relative;
}

/* Typography & Elements */
.mv-tag {
    display: inline-block;
    padding: 5px 12px;
    background-color: #fff0f0;
    color: var(--accent-red);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.mv-main-heading {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--text-dark);
    line-height: 1.2;
    margin-bottom: 20px;
}

.mv-text {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

.text-red {
    color: var(--accent-red);
}

/* Mission Stats */
.mv-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.mv-stat-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.mv-stat-item i {
    font-size: 2rem;
    margin-top: 5px;
}

.mv-stat-text h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.mv-stat-text p {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* Quote */
.mv-quote {
    display: flex;
    gap: 20px;
    padding-top: 30px !important;
}

.mv-quote-icon {
    font-size: 2.5rem;
    color: #e0e0e0;
}

.mv-quote-text {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-style: italic;
    color: var(--text-dark);
    line-height: 1.4;
}

/* Image Wrappers & Badges */
.mv-img-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.mv-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.mv-video-btn {
    position: absolute;
    bottom: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    z-index: 2;
}

.mv-play-icon {
    width: 50px;
    height: 50px;
    background: #ffffff;
    color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
}

.mv-play-text {
    font-size: 0.9rem;
    line-height: 1.2;
}

.mv-badge-top-right {
    position: absolute;
    top: 30px;
    right: -20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.mv-badge-top-right i {
    color: var(--primary-green);
    font-size: 1.5rem;
    background: #eaf1eb;
    padding: 10px;
    border-radius: 50%;
}

.mv-badge-top-right span {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-dark);
}

.mv-badge-bottom-right {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
    max-width: 200px;
}

.mv-badge-bottom-right i {
    color: #ffffff;
    font-size: 1.5rem;
}

.mv-badge-bottom-right span {
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Vision Badges & List */
.mv-vision-badges {
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.mv-v-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: #ffffff;
}

.mv-v-badge i {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.mv-v-badge span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.2;
}

.mv-cursive-overlay {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-family: 'Satisfy', cursive;
    font-size: 2rem;
    color: #ffffff;
    line-height: 1.1;
    text-align: right;
}

.mv-numbered-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.mv-num-item {
    display: flex;
    gap: 20px;
}

.mv-num-badge {
    width: 45px;
    height: 45px;
    background-color: #eaf1eb;
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.mv-num-text h4 {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 8px;
}

.mv-num-text p {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Foundational Pillars */
.mv-pillars-section {
    padding: 80px 5%;
    background-color: #fafaf7;
}

.mv-pillars-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.mv-ph-left {
    flex: 1;
}

.mv-ph-right {
    flex: 1;
    text-align: right;
}

.mv-ph-desc {
    font-style: italic;
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 300px;
    margin-left: auto;
    border-bottom: 1px solid #4a8656;
    padding-bottom: 5px;
}

.mv-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.mv-pillar-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    transition: transform 0.3s;
}

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

.mv-pc-icon {
    width: 60px;
    height: 60px;
    background-color: #eaf1eb;
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.mv-pc-content h4 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.mv-pc-content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.mv-pc-arrow {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.3s;
}

.mv-pillar-card:hover .mv-pc-arrow {
    background-color: var(--primary-green);
    color: #ffffff;
    border-color: var(--primary-green);
}

.mv-bottom-bar {
    display: flex;
    justify-content: space-between;
    background-color: #f4f8f4;
    padding: 20px 40px;
    border-radius: 50px;
    border: 1px solid #e1eee2;
}

.mv-bb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
}

.mv-bb-item i {
    color: var(--primary-green);
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .mv-split {
        flex-direction: column;
    }

    .mv-reverse {
        flex-direction: column;
    }

    .mv-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mv-bottom-bar {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .mv-hero-title {
        font-size: 3rem;
    }

    .mv-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .mv-cursive-text {
        text-align: left;
    }

    .mv-stats {
        flex-direction: column;
        gap: 20px;
    }

    .mv-pillars-grid {
        grid-template-columns: 1fr;
    }

    .mv-pillars-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .mv-ph-right {
        text-align: left;
    }

    .mv-ph-desc {
        margin-left: 0;
    }
}


/* ==================================================
   Mission & Vision Page Styles
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&display=swap');

.mv-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.mv-section-badge {
    color: var(--accent-red);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
}

.mv-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--text-dark);
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

/* Hero Section */
.mv-hero {
    position: relative;
    padding: 120px 5% 150px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #ffffff;
}

.mv-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 30, 10, 0.6);
    z-index: 1;
}

.mv-hero-content {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mv-hero-subtitle {
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
    opacity: 0.9;
}

.mv-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.mv-hero-desc {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.9;
}

.mv-hero-breadcrumb {
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mv-hero-right {
    flex-shrink: 0;
}

.mv-cursive-text {
    font-family: 'Caveat', cursive;
    font-size: 3rem;
    color: #ffffff;
    transform: rotate(-5deg);
    line-height: 1;
}

.mv-curve-bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 3;
}

.mv-curve-bottom svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

/* Mission Section */
.mv-mission {
    padding: 80px 0;
    background-color: #ffffff;
}

.mv-mission-grid {
    display: flex;
    gap: 60px;
    align-items: center;
}

.mv-mission-content {
    flex: 1;
}

.mv-desc {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
}

.mv-stats-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.mv-stat-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.mv-stat-icon {
    color: var(--accent-red);
    font-size: 2rem;
}

.mv-stat-text h3 {
    font-size: 1.8rem;
    color: var(--text-dark);
    font-weight: 700;
    margin-bottom: 5px;
}

.mv-stat-text p {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
}

.mv-quote {
    position: relative;
    padding-left: 40px;
    margin-top: 40px;
}

.mv-quote i {
    position: absolute;
    left: 0;
    font-size: 2rem;
    color: var(--accent-red);
}

.mv-quote p {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--text-dark);
    line-height: 1.4;
}

.mv-quote-line {
    width: 50px;
    height: 2px;
    background-color: var(--primary-green);
    margin-top: 15px;
}

.mv-mission-image {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.mv-mission-image .mv-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

/* Glassmorphism Overlays */
.mv-overlay-tr,
.mv-overlay-bl,
.mv-overlay-br {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.mv-overlay-tr {
    top: 20px;
    right: 20px;
}

.mv-overlay-bl {
    bottom: 20px;
    left: 20px;
}

.mv-overlay-br {
    bottom: 20px;
    right: 20px;
    background: rgba(74, 134, 86, 0.85);
    /* green tint */
    color: #fff;
    border: none;
}

.mv-overlay-br .overlay-text {
    color: #ffffff;
}

.mv-overlay-br .overlay-icon {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
}

.overlay-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #eaf1eb;
    color: var(--primary-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.overlay-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.4;
}

.mv-play-btn {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    color: var(--text-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Vision Section */
.mv-vision {
    padding: 80px 0;
    background-color: #fafaf7;
    border-radius: 40px;
    margin: 0 2%;
}

.mv-vision-grid {
    display: flex;
    gap: 60px;
    align-items: center;
}

.mv-vision-image {
    flex: 1.1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.mv-vision-image .mv-img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    border-radius: 20px;
}

.mv-overlay-sidebar {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
}

.sidebar-item i {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    backdrop-filter: blur(5px);
}

.sidebar-item span {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.mv-cursive-overlay {
    position: absolute;
    bottom: 30px;
    right: 30px;
    font-family: 'Caveat', cursive;
    font-size: 3.5rem;
    color: #ffffff;
    line-height: 1;
    transform: rotate(-5deg);
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.mv-vision-content {
    flex: 0.9;
}

.mv-vision-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mv-v-item {
    display: flex;
    gap: 20px;
}

.mv-v-num {
    width: 50px;
    height: 50px;
    background-color: #dcfce7;
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.mv-v-text h4 {
    font-size: 1.2rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 700;
}

.mv-v-text p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Foundational Pillars Section */
.mv-pillars {
    padding: 100px 0;
    background-color: #ffffff;
}

.mv-pillars-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
}

.mv-p-header-left {
    flex: 1;
}

.mv-p-header-left .mv-main-title {
    margin-bottom: 0;
}

.mv-p-header-right {
    flex: 1;
    text-align: right;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--text-muted);
}

.mv-header-line {
    width: 60px;
    height: 2px;
    background-color: var(--primary-green);
    margin-top: 15px;
    margin-left: auto;
}

.mv-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.mv-pillar-card {
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 40px 30px;
    background-color: #fafaf7;
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.mv-pillar-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.mv-pillar-icon {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-green);
    margin-bottom: 25px;
}

.mv-pillar-text h4 {
    font-size: 1.3rem;
    color: var(--text-dark);
    margin-bottom: 15px;
    font-weight: 700;
}

.mv-pillar-text p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.mv-pillar-arrow {
    position: absolute;
    bottom: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    border: 1px solid #eaeaea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s;
}

.mv-pillar-card:hover .mv-pillar-arrow {
    background-color: var(--primary-green);
    color: #ffffff;
    border-color: var(--primary-green);
}

.mv-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.mv-status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.mv-status-item i {
    color: var(--primary-green);
    font-size: 1.2rem;
}

.mv-status-divider {
    width: 1px;
    height: 30px;
    background-color: #e2e8f0;
}

/* Responsive Styles */
@media (max-width: 1024px) {
    .mv-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .mv-mission-grid,
    .mv-vision-grid {
        flex-direction: column;
    }

    .mv-pillars-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .mv-p-header-right {
        text-align: left;
    }

    .mv-header-line {
        margin-left: 0;
    }

    .mv-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mv-status-bar {
        flex-wrap: wrap;
        gap: 20px;
    }

    .mv-status-divider {
        display: none;
    }

    .mv-status-item {
        width: calc(50% - 10px);
    }
}

@media (max-width: 768px) {
    .mv-hero-title {
        font-size: 3rem;
    }

    .mv-cursive-text,
    .mv-cursive-overlay {
        font-size: 2.5rem;
    }

    .mv-stats-row {
        flex-direction: column;
    }

    .mv-overlay-tr,
    .mv-overlay-bl,
    .mv-overlay-br {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        margin: 10px;
    }

    .mv-mission-image {
        display: flex;
        flex-direction: column;
    }

    .mv-mission-image .mv-img {
        height: auto;
    }

    .mv-pillars-grid {
        grid-template-columns: 1fr;
    }

    .mv-status-item {
        width: 100%;
    }
}

/* --------------------------------------
   MISSION SECTION (CUSTOM)
-------------------------------------- */
.mv-section {
    padding: 60px 5%;
    background-color: #ffffff;
}

.mv-container {
    max-width: 1400px;
    margin: 0 auto;
}

.mv-mission-row {
    display: flex;
    align-items: center;
    gap: 50px;
}

/* Left Content */
.mv-mission-content {
    flex: 1.25;
    max-width: 56%;
}

.mv-badge {
    display: inline-flex;
    align-items: center;
    background-color: #fff0f0;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.mv-badge-line {
    width: 2px;
    height: 12px;
    background-color: var(--accent-red);
    margin-right: 8px;
}

.mv-badge-text {
    color: var(--accent-red);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.mv-title {
    font-size: 2rem;
    color: #0b2b1a;
    line-height: 1.3;
    margin-bottom: 15px;
    font-weight: 700;
}

.mv-desc {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Stats */
.mv-stats-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.mv-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mv-stat-icon {
    font-size: 1.5rem;
    color: var(--accent-red);
}

.mv-stat-info h3 {
    font-size: 1.4rem;
    color: #0b2b1a;
    font-weight: 800;
    margin-bottom: 2px;
    line-height: 1;
}

.mv-stat-info p {
    font-size: 0.65rem;
    color: #666;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0;
}

.mv-stat-divider {
    width: 1px;
    height: 40px;
    background-color: #eaeaea;
}

/* Quote */
.mv-quote {
    position: relative;
    padding-left: 20px;
    margin-top: 10px;
    background-color: #d3d3d3;
    border-radius: 10px;
}

.mv-quote-icon {
    font-size: 3rem;
    color: rgba(74, 134, 86, 0.15);
    position: absolute;
    top: -15px;
    left: -5px;
    z-index: 0;
}

.mv-quote-text {
    position: relative;
    z-index: 1;
}

.mv-quote-text p {
    font-size: 1.1rem;
    color: var(--primary-green);
    margin-bottom: 8px;
    line-height: 1.4;
    font-style: italic;
    font-weight: 500;
}

.mv-quote-line {
    width: 30px;
    height: 2px;
    background-color: var(--primary-green);
}

/* Right Visual */
.mv-mission-visual {
    flex: 0.85;
    max-width: 44%;
    display: flex;
    justify-content: flex-end;
}

.mv-visual-wrapper {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    min-height: 380px;
}

.mv-visual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px;
}

/* Floating Elements in Visual */
.mv-card-topright {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mv-card-icon-green {
    width: 35px;
    height: 35px;
    background-color: #eaf1eb;
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.mv-card-text {
    font-size: 0.6rem;
    color: #333;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.mv-play-btn {
    position: absolute;
    bottom: 25px;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mv-play-circle {
    width: 45px;
    height: 45px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0b2b1a;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    flex-shrink: 0;
}

.mv-play-text {
    color: #ffffff;
    font-size: 0.8rem;
    line-height: 1.3;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.mv-glass-card {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mv-card-icon-white {
    width: 35px;
    height: 35px;
    background-color: #ffffff;
    color: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.mv-glass-text {
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 500;
}

@media (max-width: 992px) {
    .mv-mission-row {
        flex-direction: column;
        gap: 40px;
    }

    .mv-mission-content,
    .mv-mission-visual {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .mv-stats-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .mv-stat-divider {
        display: none;
    }

    .mv-card-topright {
        top: 10px;
        right: 10px;
        padding: 6px 10px;
    }

    .mv-glass-card {
        bottom: 10px;
        right: 10px;
        padding: 10px;
    }

    .mv-play-btn {
        bottom: 10px;
        left: 10px;
    }
}

/* --------------------------------------
   NUTRACEUTICAL THIRD-PARTY ENQUIRY SECTION
-------------------------------------- */
.tpm-section {
    position: relative;
    padding: 70px 0 35px;
    background-color: #f7f9f7;
    overflow: hidden;
}

.tpm-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.tpm-grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 32px;
    align-items: stretch;
}

/* Left Card: Enquiry Form */
.tpm-form-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 44px 40px 40px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2ee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tpm-badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tpm-badge-text {
    color: var(--accent-red);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.tpm-badge-line {
    width: 38px;
    height: 2px;
    background-color: var(--accent-red);
    border-radius: 2px;
}

.tpm-form-title {
    font-size: 30px;
    font-weight: 800;
    color: #121412;
    line-height: 1.25;
    margin-bottom: 10px;
}

.tpm-form-subtitle {
    font-size: 0.94rem;
    color: #5c625d;
    line-height: 1.55;
    margin-bottom: 26px;
}

.tpm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tpm-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tpm-form-group {
    position: relative;
}

.tpm-input,
.tpm-textarea {
    width: 100%;
    border: 1.5px solid #e1e6e1;
    border-radius: 12px;
    padding: 13px 18px;
    font-size: 0.92rem;
    font-family: var(--font-sans);
    color: #1a1a1a;
    background-color: #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-sizing: border-box;
}

.tpm-input::placeholder,
.tpm-textarea::placeholder {
    color: #767d76;
    font-weight: 400;
}

.tpm-input:focus,
.tpm-textarea:focus {
    outline: none;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3.5px rgba(218, 13, 32, 0.08);
}

.tpm-textarea {
    height: 115px;
    resize: vertical;
    line-height: 1.5;
}

.tpm-submit-btn {
    align-self: flex-start;
    margin-top: 6px;
    background-color: var(--accent-red);
    color: #ffffff;
    font-size: 0.94rem;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 8px 24px rgba(218, 13, 32, 0.24);
}

.tpm-submit-btn:hover {
    background-color: #b80918;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(218, 13, 32, 0.32);
}

.tpm-submit-btn svg {
    transition: transform 0.25s ease;
}

.tpm-submit-btn:hover svg {
    transform: translateX(4px);
}

/* Right Card: Image & Brand Value */
.tpm-info-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 12px;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2ee;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tpm-info-top {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    min-height: 330px;
    background-color: #08311b;
}

.tpm-info-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 280px;
    overflow: hidden;
}

.tpm-info-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}

.tpm-info-image-wrap:hover .tpm-info-img {
    transform: scale(1.03);
}

.tpm-info-content {
    background: linear-gradient(150deg, #072e18 0%, #0c3e22 100%);
    padding: 32px 22px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tpm-features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.tpm-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tpm-feature-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(218, 13, 32, 0.16);
    border: 1px solid rgba(218, 13, 32, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4d4d;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.tpm-feature-text {
    font-size: 0.88rem;
    font-weight: 600;
    color: #f1f8f3;
    line-height: 1.35;
}

/* Quote Strip */
.tpm-quote-strip {
    background-color: #062312;
    border-radius: 0 0 16px 16px;
    padding: 18px 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
}

.tpm-quote-icon {
    font-size: 1.8rem;
    color: #ff4d4d;
    line-height: 1;
    flex-shrink: 0;
}

.tpm-quote-text {
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
    position: relative;
    z-index: 2;
    max-width: 82%;
}

.tpm-leaves-deco {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 90px;
    height: 80px;
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.tpm-leaves-img {
    width: 85px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
}

/* Responsive */
@media (max-width: 991px) {
    .tpm-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .tpm-info-top {
        grid-template-columns: 1fr;
    }

    .tpm-info-image-wrap {
        height: 250px;
        min-height: 250px;
    }
}

@media (max-width: 576px) {
    .tpm-section {
        padding: 50px 0;
    }

    .tpm-form-card {
        padding: 30px 20px;
    }

    .tpm-form-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tpm-form-title {
        font-size: 24px;
    }

    .tpm-info-content {
        padding: 24px 20px;
    }

    .tpm-quote-text {
        max-width: 78%;
        font-size: 0.82rem;
    }
}

/* --------------------------------------
   TPM STATS COUNTER BAR SECTION (COMPACT & RED ICONS)
-------------------------------------- */
.tpm-stats-section {
    position: relative;
    padding: 0 0 55px;
    background-color: #f7f9f7;
}

.tpm-stats-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.tpm-stats-card {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 22px 34px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.035);
    border: 1px solid #eef2ee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tpm-stat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.tpm-stat-icon {
    font-size: 1.45rem;
    color: var(--accent-red);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.tpm-stat-col:hover .tpm-stat-icon {
    transform: translateY(-2px);
}

.tpm-stat-number {
    font-size: 1.85rem;
    font-weight: 800;
    color: #121412;
    line-height: 1.15;
    margin: 0 0 2px;
}

.tpm-stat-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #5c6660;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.tpm-stat-divider {
    width: 1px;
    height: 42px;
    background-color: #e5ece6;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .tpm-stats-card {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 15px;
        padding: 24px 20px;
    }

    .tpm-stat-divider {
        display: none;
    }
}

@media (max-width: 576px) {
    .tpm-stats-section {
        padding: 0 0 40px;
    }

    .tpm-stats-card {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 16px;
    }

    .tpm-stat-number {
        font-size: 1.65rem;
    }
}

/* --------------------------------------
   WHY GLOBAL BRANDS CHOOSE AHCC (TOP NUTRACEUTICAL SECTION)
-------------------------------------- */
.tpm-why-section {
    position: relative;
    padding: 60px 0 80px;
    background-color: #ffffff;
}

.tpm-why-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.tpm-why-header {
    text-align: center;
    margin: 0 auto 42px;
}

.tpm-why-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 12px;
}

.tpm-why-badge-line {
    width: 42px;
    height: 1.5px;
    background-color: var(--accent-red);
}

.tpm-why-badge-text {
    color: var(--accent-red);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tpm-why-heading {
    font-size: 26px;
    font-weight: 800;
    color: #121412;
    line-height: 1.25;
    margin: 0 0 14px;
}

.tpm-why-desc {
    font-size: 0.86rem;
    color: #556258;
    line-height: 1.65;
    margin: 0 auto;
}

.tpm-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.tpm-why-card {
    position: relative;
    background-color: #ffffff;
    border-radius: 16px;
    border: 1px solid var(--accent-red);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    min-height: 210px;
    display: flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.tpm-why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
    border-color: #dbe4dc;
}

.tpm-why-card-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.88;
    transition: transform 0.4s ease;
}

.tpm-why-card:hover .tpm-why-card-bg {
    transform: scale(1.05);
}

.tpm-why-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #ffffff 42%, rgba(255, 255, 255, 0.92) 58%, rgba(255, 255, 255, 0.2) 100%);
    pointer-events: none;
    z-index: 1;
}

.tpm-why-card-content {
    position: relative;
    z-index: 2;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 80%;
}

.tpm-why-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #feecec;
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.tpm-why-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #121412;
    margin: 0 0 8px;
    line-height: 1.25;
}

.tpm-why-underline {
    width: 28px;
    height: 2px;
    background-color: var(--accent-red);
    border-radius: 1px;
    margin-bottom: 12px;
}

.tpm-why-card-desc {
    font-size: 0.82rem;
    color: #556258;
    line-height: 1.55;
    margin-bottom: 16px;
    flex-grow: 1;
}

.tpm-why-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: none;
    transition: color 0.25s ease, gap 0.25s ease;
}

.tpm-why-link:hover {
    color: #b80918;
    gap: 10px;
}

@media (max-width: 991px) {
    .tpm-why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .tpm-why-card-content {
        max-width: 72%;
    }
}

@media (max-width: 576px) {
    .tpm-why-section {
        padding: 45px 0 55px;
    }

    .tpm-why-heading {
        font-size: 22px;
    }

    .tpm-why-card-content {
        max-width: 85%;
        padding: 20px 16px;
    }
}

/* --------------------------------------
   CERTIFICATIONS PAGE STYLES
-------------------------------------- */
.cert-page-section {
    position: relative;
    padding: 70px 0 85px;
    background-color: #f7f9f7;
}

.cert-page-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
}

.cert-page-header {
    text-align: center;
    margin: 0 auto 50px;
}

.cert-page-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cert-page-badge-bar {
    width: 3px;
    height: 14px;
    background-color: var(--accent-red);
    border-radius: 2px;
}

.cert-page-badge-text {
    color: var(--accent-red);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.cert-page-title {
    font-size: 30px;
    font-weight: 800;
    color: #121412;
    line-height: 1.25;
    margin-bottom: 12px;
}

.cert-page-desc {
    font-size: 0.92rem;
    color: #556258;
    line-height: 1.6;
    margin: 0;
}

.cert-page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    margin-bottom: 55px;
}

.cert-page-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #eef2ee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.cert-page-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-red);
}

.cert-page-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1.38;
    background-color: #fdfdfd;
    border-radius: 10px;
    border: 1px solid #f0f4f0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    margin-bottom: 0;
    position: relative;
    cursor: pointer;
}

.cert-page-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.35s ease;
}

.cert-page-card:hover .cert-page-img {
    transform: scale(1.03);
}

.cert-page-tag {
    display: inline-block;
    background-color: #feecec;
    color: var(--accent-red);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 10px;
    align-self: flex-start;
}

.cert-page-card-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: #121412;
    margin: 0 0 6px;
    line-height: 1.3;
}

.cert-page-card-desc {
    font-size: 0.82rem;
    color: #556258;
    line-height: 1.5;
    margin: 0;
}

/* Compliance Banner */
.cert-trust-banner {
    background: linear-gradient(135deg, var(--primary-green) 0%, #17522f 100%);
    border-radius: 20px;
    padding: 38px 45px;
    color: #ffffff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    box-shadow: 0 16px 40px rgba(17, 66, 39, 0.18);
}

.cert-trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cert-trust-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5ce08c;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.cert-trust-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 3px;
}

.cert-trust-desc {
    font-size: 0.78rem;
    color: #d6ecdc;
    margin: 0;
    line-height: 1.35;
}

/* Responsive */
@media (max-width: 1100px) {
    .cert-page-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .cert-trust-banner {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }
}

@media (max-width: 576px) {
    .cert-page-section {
        padding: 40px 0;
    }

    .cert-page-title {
        font-size: 22px;
    }

    .cert-page-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 30px;
    }

    .cert-page-img-wrap {
        padding: 6px;
    }

    .cert-trust-banner {
        grid-template-columns: 1fr;
        padding: 28px 22px;
        gap: 22px;
    }
}

/* ==========================================================================
   Liquid Filled Capsule Manufacturing - Hero Section & Stats Bar
   ========================================================================== */

.lfc-hero-section {
    position: relative;
    padding: 35px 0 45px;
    background: #f8fafc;
    overflow: hidden;
    box-shadow: none !important;
}

.lfc-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

@media (max-width: 1440px) {
    .lfc-container {
        padding: 0 20px;
    }
}

@media (max-width: 480px) {

    .lfc-container,
    .why-lfc-container,
    .lfc-process-container,
    .lfc-cert-container,
    .lfc-faq-container {
        padding: 0 14px;
    }
}

.lfc-hero-card {
    position: relative;
    display: flex;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: none !important;
    overflow: hidden;
    min-height: 360px;
    max-height: 390px;
}

/* Left Content Column */
.lfc-hero-content {
    flex: 1 1 54%;
    padding: 26px 36px 26px 38px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.lfc-hero-tag {
    display: inline-block;
    color: var(--accent-red, #da0d20);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.lfc-hero-title {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
    margin: 0 0 8px;
}

.lfc-hero-breadcrumb {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.lfc-hero-breadcrumb a {
    color: #4b5563;
    text-decoration: none;
    transition: color 0.2s;
}

.lfc-hero-breadcrumb a:hover {
    color: var(--accent-red, #da0d20);
}

.lfc-hero-breadcrumb span.sep {
    color: #9ca3af;
}

.lfc-hero-breadcrumb span.active {
    color: #111827;
    font-weight: 500;
}

.lfc-hero-desc {
    font-size: 12.5px;
    line-height: 1.52;
    color: #4b5563;
    margin: 0 0 16px;
    text-align: justify;
}

.lfc-hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.lfc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    box-shadow: none !important;
}

.lfc-btn-primary {
    background: var(--accent-red, #da0d20);
    color: #ffffff;
    border: 1.5px solid var(--accent-red, #da0d20);
    box-shadow: none !important;
}

.lfc-btn-primary:hover {
    background: #b50919;
    border-color: #b50919;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: none !important;
}

.lfc-btn-outline {
    background: #ffffff;
    color: var(--accent-red, #da0d20);
    border: 1.5px solid var(--accent-red, #da0d20);
    box-shadow: none !important;
}

.lfc-btn-outline:hover {
    background: #fff5f5;
    transform: translateY(-1px);
    box-shadow: none !important;
}

/* Right Media Column - Compact Reduced Height */
.lfc-hero-media {
    flex: 1 1 46%;
    position: relative;
    height: 100%;
    min-height: 360px;
    max-height: 390px;
    overflow: hidden;
    background: #e2e8f0;
}

.lfc-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Red Curved Divider Shape on Left of Image */
.lfc-curve-overlay {
    position: absolute;
    top: 0;
    left: -1px;
    height: 100%;
    width: 100px;
    pointer-events: none;
    z-index: 3;
}

.lfc-curve-path-bg {
    fill: #ffffff;
}

.lfc-curve-path-stroke {
    fill: none;
    stroke: var(--accent-red, #da0d20);
    stroke-width: 4px;
    stroke-linecap: round;
}

/* Floating Pill Badge - Scaled */
.lfc-floating-pill {
    position: absolute;
    top: 48%;
    left: 16px;
    transform: translateY(-50%);
    background: #ffffff;
    border-radius: 10px;
    padding: 7px 13px 7px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    box-shadow: none !important;
    border: 1px solid #fecaca;
    z-index: 4;
}

.lfc-pill-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-red, #da0d20);
    font-size: 13px;
    flex-shrink: 0;
}

.lfc-pill-text {
    display: flex;
    flex-direction: column;
}

.lfc-pill-text span {
    font-size: 9px;
    font-weight: 800;
    color: var(--accent-red, #da0d20);
    line-height: 1.22;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Signature in Bottom Right - Scaled */
.lfc-signature-wrap {
    position: absolute;
    bottom: 18px;
    right: 25px;
    z-index: 4;
    text-align: center;
}

.lfc-signature-text {
    font-family: 'Caveat', cursive;
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    display: block;
    line-height: 1;
    transform: rotate(-5deg);
    text-shadow: 0 2px 6px rgba(255, 255, 255, 0.9);
}

.lfc-signature-swoosh {
    width: 105px;
    height: 12px;
    display: block;
    margin: -3px auto 0;
}

/* Bottom Stats Bar */
.lfc-stats-bar {
    margin-top: 22px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: none !important;
    display: grid;
    grid-template-columns: 1.25fr 1fr 1.15fr 1fr 1fr;
    padding: 18px 20px;
    align-items: center;
}

.lfc-stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 15px;
    border-right: 1px solid #e5e7eb;
}

.lfc-stat-item:last-child {
    border-right: none;
}

.lfc-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow: none !important;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.lfc-stat-item:hover .lfc-stat-icon {
    transform: translateY(-2px) scale(1.06);
}

/* 1. Royal Blue - USFDA Registered Facility */
.lfc-stats-bar .lfc-stat-item:nth-child(1) .lfc-stat-icon,
.lfc-stat-icon--blue {
    background: #eff6ff;
    border: 1.5px solid rgba(37, 99, 235, 0.25);
    color: #2563eb;
}

.lfc-stats-bar .lfc-stat-item:nth-child(1):hover .lfc-stat-icon,
.lfc-stat-item:hover .lfc-stat-icon--blue {
    background: #2563eb;
    color: #ffffff;
}

/* 2. Emerald Green - Active Clients */
.lfc-stats-bar .lfc-stat-item:nth-child(2) .lfc-stat-icon,
.lfc-stat-icon--emerald {
    background: #f0fdf4;
    border: 1.5px solid rgba(22, 163, 74, 0.25);
    color: #16a34a;
}

.lfc-stats-bar .lfc-stat-item:nth-child(2):hover .lfc-stat-icon,
.lfc-stat-item:hover .lfc-stat-icon--emerald {
    background: #16a34a;
    color: #ffffff;
}

/* 3. Deep Purple - Formulations Developed */
.lfc-stats-bar .lfc-stat-item:nth-child(3) .lfc-stat-icon,
.lfc-stat-icon--purple {
    background: #faf5ff;
    border: 1.5px solid rgba(147, 51, 234, 0.25);
    color: #9333ea;
}

.lfc-stats-bar .lfc-stat-item:nth-child(3):hover .lfc-stat-icon,
.lfc-stat-item:hover .lfc-stat-icon--purple {
    background: #9333ea;
    color: #ffffff;
}

/* 4. Warm Amber - Years of Experience */
.lfc-stats-bar .lfc-stat-item:nth-child(4) .lfc-stat-icon,
.lfc-stat-icon--amber {
    background: #fffbeb;
    border: 1.5px solid rgba(217, 119, 6, 0.25);
    color: #d97706;
}

.lfc-stats-bar .lfc-stat-item:nth-child(4):hover .lfc-stat-icon,
.lfc-stat-item:hover .lfc-stat-icon--amber {
    background: #d97706;
    color: #ffffff;
}

/* 5. Vibrant Teal - Global Presence */
.lfc-stats-bar .lfc-stat-item:nth-child(5) .lfc-stat-icon,
.lfc-stat-icon--teal {
    background: #f0fdfa;
    border: 1.5px solid rgba(13, 148, 136, 0.25);
    color: #0d9488;
}

.lfc-stats-bar .lfc-stat-item:nth-child(5):hover .lfc-stat-icon,
.lfc-stat-item:hover .lfc-stat-icon--teal {
    background: #0d9488;
    color: #ffffff;
}

.lfc-stat-info {
    display: flex;
    flex-direction: column;
}

.lfc-stat-title-strong {
    font-size: 13.5px;
    font-weight: 800;
    color: #111827;
    line-height: 1.25;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.lfc-stat-number {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.lfc-stat-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #4b5563;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Responsive Media Queries */
@media (max-width: 1200px) {
    .lfc-hero-title {
        font-size: 30px;
    }

    .lfc-stats-bar {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 0;
        padding: 24px 20px;
    }

    .lfc-stat-item:nth-child(3) {
        border-right: none;
    }
}

@media (max-width: 992px) {
    .lfc-hero-card {
        flex-direction: column;
        max-height: none;
        min-height: auto;
    }

    .lfc-hero-content {
        flex: 1 1 100%;
        padding: 30px 24px;
    }

    .lfc-hero-media {
        flex: 1 1 100%;
        min-height: 260px;
        max-height: 290px;
    }

    .lfc-curve-overlay {
        display: none;
    }

    .lfc-floating-pill {
        top: 18px;
        left: 18px;
        transform: none;
    }

    .lfc-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .lfc-stat-item {
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 12px;
        min-width: 0;
    }

    .lfc-stat-item:first-child {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .lfc-stat-item:nth-child(2),
    .lfc-stat-item:nth-child(4) {
        border-right: 1px solid #f1f5f9;
    }

    .lfc-stat-item:nth-last-child(-n+2) {
        border-bottom: none;
        padding-bottom: 0;
    }
}

@media (max-width: 768px) {
    .lfc-hero-section {
        padding: 24px 0 18px;
    }

    .lfc-hero-content {
        padding: 20px 16px;
    }

    .lfc-hero-tag {
        font-size: 10px;
        letter-spacing: 0.8px;
        margin-bottom: 4px;
    }

    .lfc-hero-title {
        font-size: 21px;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .lfc-hero-breadcrumb {
        font-size: 11px;
        margin-bottom: 8px;
        gap: 5px;
    }

    .lfc-hero-desc {
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 14px;
        text-align: left;
    }

    .lfc-hero-actions {
        gap: 10px;
    }

    .lfc-btn {
        padding: 8px 16px;
        font-size: 12px;
    }

    .lfc-hero-media {
        min-height: 220px;
        max-height: 240px;
    }

    .lfc-floating-pill {
        top: 12px;
        left: 12px;
        padding: 5px 10px;
        gap: 6px;
    }

    .lfc-pill-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    .lfc-pill-text span {
        font-size: 7.5px;
        letter-spacing: 0.5px;
    }

    .lfc-signature-wrap {
        bottom: 8px;
        right: 10px;
    }

    .lfc-signature-text {
        font-size: 18px;
    }

    .lfc-signature-swoosh {
        width: 75px;
    }

    .lfc-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        padding: 14px 10px;
        gap: 10px 8px;
    }

    .lfc-stat-item {
        padding: 6px 4px;
        gap: 8px;
        border-right: none;
        border-bottom: none;
        min-width: 0;
    }

    .lfc-stat-item:first-child {
        grid-column: 1 / -1;
        justify-content: center;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 10px;
        margin-bottom: 2px;
    }

    .lfc-stat-item:nth-child(2),
    .lfc-stat-item:nth-child(3) {
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 10px;
    }

    .lfc-stat-item:nth-child(2),
    .lfc-stat-item:nth-child(4) {
        border-right: 1px solid #f1f5f9;
    }

    .lfc-stat-icon {
        width: 34px;
        height: 34px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .lfc-stat-info {
        min-width: 0;
    }

    .lfc-stat-number {
        font-size: 18px;
        line-height: 1.1;
    }

    .lfc-stat-label {
        font-size: 8.5px;
        letter-spacing: 0.3px;
        line-height: 1.25;
        word-break: break-word;
    }

    .lfc-stat-title-strong {
        font-size: 11px;
        line-height: 1.25;
    }
}

@media (max-width: 420px) {
    .lfc-stats-bar {
        padding: 12px 6px;
        gap: 8px 4px;
    }

    .lfc-stat-item {
        gap: 6px;
        padding: 5px 2px;
    }

    .lfc-stat-icon {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .lfc-stat-number {
        font-size: 16px;
    }

    .lfc-stat-label {
        font-size: 8px;
        letter-spacing: 0.2px;
    }

    .lfc-stat-title-strong {
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .lfc-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .lfc-btn {
        width: 100%;
    }
}

/* ==========================================================================
   What Are Liquid Filled Capsules & Manufacturing Process Section (lfc-works)
   ========================================================================== */

.lfc-works-section {
    position: relative;
    padding: 48px 0 50px;
    background: #ffffff;
    overflow: hidden;
}

.lfc-works-grid {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    width: 100%;
    margin-bottom: 28px;
}

/* Left Visual Column */
.lfc-works-visual-col {
    flex: 0 0 360px;
    max-width: 360px;
    width: 360px;
    position: relative;
    display: flex;
    justify-content: center;
    align-self: flex-start;
    padding-top: 8px;
}

.lfc-works-backdrop-shape {
    position: absolute;
    top: -12px;
    left: -12px;
    width: 330px;
    height: 370px;
    background: rgba(17, 66, 39, 0.05);
    border-radius: 65% 35% 55% 45% / 45% 55% 45% 55%;
    z-index: 1;
    pointer-events: none;
}

.lfc-works-image-wrap {
    position: relative;
    z-index: 2;
    width: 320px;
    height: 360px;
    border-radius: 46% 54% 50% 50% / 42% 42% 58% 58%;
    overflow: hidden;
    background: #fdfdfd;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.07);
    border: 5px solid #ffffff;
}

.lfc-works-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.lfc-works-image-wrap:hover .lfc-works-img {
    transform: scale(1.05);
}

/* Floating Circular Badge */
.lfc-works-badge {
    position: absolute;
    top: 30px;
    right: 5px;
    z-index: 4;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #114227;
    border: 3.5px solid #ffffff;
    box-shadow: 0 8px 22px rgba(17, 66, 39, 0.28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px;
    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.lfc-works-badge:hover {
    transform: translateY(-2px) scale(1.03);
}

.lfc-works-badge-icon {
    color: #ffffff;
    font-size: 17px;
    margin-bottom: 2px;
    opacity: 0.95;
}

.lfc-works-badge-text {
    font-family: 'Caveat', cursive;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.12;
    display: flex;
    flex-direction: column;
}

/* Right Content Column */
.lfc-works-content-col {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
}

.lfc-works-title {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.4px;
}

.lfc-works-lead {
    font-size: 14.5px;
    line-height: 1.68;
    color: #4b5563;
    margin: 0 0 26px;
    font-family: 'Inter', sans-serif;
    text-align: justify;
}

/* Timeline Process */
.lfc-works-timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 26px;
}

.lfc-works-step {
    display: flex;
    gap: 16px;
    position: relative;
}

.lfc-works-step-indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.lfc-works-step-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #da0d20;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(218, 13, 32, 0.22);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.lfc-works-step:hover .lfc-works-step-icon {
    transform: scale(1.08);
    background: #b90b1b;
}

.lfc-works-step-line {
    position: absolute;
    top: 38px;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    border-left: 2px dashed rgba(218, 13, 32, 0.38);
}

.lfc-works-step-body {
    flex: 1;
    padding-top: 1px;
}

.lfc-works-step-heading {
    font-size: 16.5px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
    font-family: 'Inter', sans-serif;
}

.lfc-works-step-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #4b5563;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Full-Width Bottom Wrap (Highlight Box & GMP Note) */
.lfc-works-bottom-wrap {
    width: 100%;
    margin-top: 10px;
}

.lfc-works-highlight-box {
    background: #f4f8f4;
    border: 1px solid #dce8dc;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 18px;
    width: 100%;
    box-sizing: border-box;
}

.lfc-works-highlight-lead {
    font-size: 14.5px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.55;
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
}

.lfc-works-highlight-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lfc-works-highlight-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #374151;
    font-weight: 500;
    font-family: 'Inter', sans-serif;
}

.lfc-works-highlight-list li i {
    color: #da0d20;
    font-size: 16px;
    flex-shrink: 0;
}

/* Bottom Note */
.lfc-works-bottom-note {
    font-size: 13.5px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Responsive */
@media (max-width: 1024px) {
    .lfc-works-grid {
        flex-direction: column;
        gap: 35px;
        align-items: center;
    }

    .lfc-works-visual-col {
        max-width: 100%;
        width: 100%;
    }

    .lfc-works-content-col {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .lfc-works-section {
        padding: 20px 0 30px;
    }

    .lfc-works-grid {
        gap: 16px;
        margin-bottom: 22px;
    }

    .lfc-works-visual-col {
        padding-top: 0;
        margin-bottom: 0;
        flex: 0;
    }

    .lfc-works-title {
        font-size: 21px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .lfc-works-lead {
        font-size: 12.5px;
        line-height: 1.55;
        margin-bottom: 18px;
        text-align: left;
    }

    .lfc-works-timeline {
        gap: 16px;
        margin-bottom: 20px;
    }

    .lfc-works-step {
        gap: 12px;
    }

    .lfc-works-step-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .lfc-works-step-line {
        top: 32px;
        bottom: -16px;
    }

    .lfc-works-step-heading {
        font-size: 14px;
        margin-bottom: 3px;
    }

    .lfc-works-step-desc {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .lfc-works-highlight-box {
        padding: 16px 14px;
        border-radius: 12px;
        margin-bottom: 14px;
    }

    .lfc-works-highlight-lead {
        font-size: 12.5px;
        margin-bottom: 12px;
        line-height: 1.45;
    }

    .lfc-works-highlight-list {
        gap: 9px;
    }

    .lfc-works-highlight-list li {
        font-size: 12px;
        gap: 8px;
    }

    .lfc-works-highlight-list li i {
        font-size: 13px;
    }

    .lfc-works-bottom-note {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .lfc-works-image-wrap {
        width: 240px;
        height: 250px;
    }

    .lfc-works-backdrop-shape {
        width: 248px;
        height: 255px;
        left: 50%;
        transform: translateX(-52%);
        top: -6px;
    }

    .lfc-works-badge {
        width: 78px;
        height: 78px;
        top: 10px;
        right: calc(50% - 135px);
    }

    .lfc-works-badge-icon {
        font-size: 13px;
    }

    .lfc-works-badge-text {
        font-size: 11.5px;
    }
}

@media (max-width: 480px) {
    .lfc-works-section {
        padding: 16px 0 24px;
    }

    .lfc-works-grid {
        gap: 12px;
        margin-bottom: 18px;
    }

    .lfc-works-title {
        font-size: 19px;
        margin-bottom: 8px;
    }

    .lfc-works-image-wrap {
        width: 200px;
        height: 210px;
        border-width: 3px;
    }

    .lfc-works-backdrop-shape {
        width: 208px;
        height: 215px;
        left: 50%;
        transform: translateX(-52%);
        top: -5px;
    }

    .lfc-works-badge {
        width: 68px;
        height: 68px;
        top: 6px;
        right: calc(50% - 114px);
        padding: 4px;
    }

    .lfc-works-badge-icon {
        font-size: 11px;
        margin-bottom: 1px;
    }

    .lfc-works-badge-text {
        font-size: 10px;
        line-height: 1.1;
    }
}

/* ==========================================================================
   Why Liquid Filled Capsules Section
   ========================================================================== */

.why-lfc-section {
    position: relative;
    padding: 60px 0 75px;
    background: #ffffff;
    overflow: hidden;
}

.why-lfc-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 1440px) {
    .why-lfc-container {
        padding: 0 20px;
    }
}

/* Header Row: Title, Text & Top-Right Graphic */
.why-lfc-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.why-lfc-header-text {
    flex: 1 1 65%;
}

.why-lfc-title {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 14px;
}

.why-lfc-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0;
    text-align: justify;
}

.why-lfc-header-img-wrap {
    flex: 0 0 35%;
    max-width: 420px;
    display: flex;
    justify-content: flex-end;
}

.why-lfc-header-img {
    width: 100%;
    max-width: 380px;
    height: auto;
    max-height: 190px;
    object-fit: contain;
    border-radius: 12px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%);
    mask-image: linear-gradient(to right, transparent 0%, black 18%);
}

/* Flow Process Grid */
.why-lfc-flow-wrapper {
    position: relative;
    padding: 10px 0;
}

/* Background Ribbon hidden as dotted line is used for the cards' curved borders */
.why-lfc-ribbon-svg {
    display: none;
}

/* 2 Rows of 3 Cards */
.why-lfc-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.why-lfc-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-lfc-row-bottom {
    padding-left: 0;
}

/* Premium Card with Curved Dotted Border */
.why-lfc-item {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
    background: #ffffff;
    border: 2px dotted #d1d5db;
    border-radius: 18px;
    padding: 26px 22px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.why-lfc-item:hover {
    transform: translateY(-4px);
}

.why-lfc-node {
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
}

.why-lfc-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-lfc-item:hover .why-lfc-icon {
    transform: scale(1.1);
}

/* Colorful Card Dotted Borders & Icons */
/* 1. Enhanced Bioavailability: Sky / Sapphire Blue */
.why-lfc-item--blue,
.why-lfc-row:first-child .why-lfc-item:nth-child(1) {
    border-color: rgba(2, 132, 199, 0.42);
}

.why-lfc-item--blue:hover,
.why-lfc-row:first-child .why-lfc-item:nth-child(1):hover {
    border-color: #0284c7;
}

.why-lfc-icon--blue,
.why-lfc-row:first-child .why-lfc-item:nth-child(1) .why-lfc-icon {
    background: #0284c7;
    box-shadow: 0 0 0 7px rgba(2, 132, 199, 0.12);
}

.why-lfc-item:hover .why-lfc-icon--blue,
.why-lfc-row:first-child .why-lfc-item:nth-child(1):hover .why-lfc-icon {
    box-shadow: 0 0 0 9px rgba(2, 132, 199, 0.22);
}

/* 2. Superior Stability: Emerald Green */
.why-lfc-item--green,
.why-lfc-row:first-child .why-lfc-item:nth-child(2) {
    border-color: rgba(16, 185, 129, 0.42);
}

.why-lfc-item--green:hover,
.why-lfc-row:first-child .why-lfc-item:nth-child(2):hover {
    border-color: #10b981;
}

.why-lfc-icon--green,
.why-lfc-row:first-child .why-lfc-item:nth-child(2) .why-lfc-icon {
    background: #10b981;
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.12);
}

.why-lfc-item:hover .why-lfc-icon--green,
.why-lfc-row:first-child .why-lfc-item:nth-child(2):hover .why-lfc-icon {
    box-shadow: 0 0 0 9px rgba(16, 185, 129, 0.22);
}

/* 3. Oil-Based Formulation Compatibility: Amber / Gold */
.why-lfc-item--amber,
.why-lfc-row:first-child .why-lfc-item:nth-child(3) {
    border-color: rgba(245, 158, 11, 0.42);
}

.why-lfc-item--amber:hover,
.why-lfc-row:first-child .why-lfc-item:nth-child(3):hover {
    border-color: #f59e0b;
}

.why-lfc-icon--amber,
.why-lfc-row:first-child .why-lfc-item:nth-child(3) .why-lfc-icon {
    background: #f59e0b;
    box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.12);
}

.why-lfc-item:hover .why-lfc-icon--amber,
.why-lfc-row:first-child .why-lfc-item:nth-child(3):hover .why-lfc-icon {
    box-shadow: 0 0 0 9px rgba(245, 158, 11, 0.22);
}

/* 4. Premium Product Positioning: Royal Violet / Purple */
.why-lfc-item--purple,
.why-lfc-row-bottom .why-lfc-item:nth-child(1) {
    border-color: rgba(139, 92, 246, 0.42);
}

.why-lfc-item--purple:hover,
.why-lfc-row-bottom .why-lfc-item:nth-child(1):hover {
    border-color: #8b5cf6;
}

.why-lfc-icon--purple,
.why-lfc-row-bottom .why-lfc-item:nth-child(1) .why-lfc-icon {
    background: #8b5cf6;
    box-shadow: 0 0 0 7px rgba(139, 92, 246, 0.12);
}

.why-lfc-item:hover .why-lfc-icon--purple,
.why-lfc-row-bottom .why-lfc-item:nth-child(1):hover .why-lfc-icon {
    box-shadow: 0 0 0 9px rgba(139, 92, 246, 0.22);
}

/* 5. Consumer Convenience: Deep Teal */
.why-lfc-item--teal,
.why-lfc-row-bottom .why-lfc-item:nth-child(2) {
    border-color: rgba(13, 148, 136, 0.42);
}

.why-lfc-item--teal:hover,
.why-lfc-row-bottom .why-lfc-item:nth-child(2):hover {
    border-color: #0d9488;
}

.why-lfc-icon--teal,
.why-lfc-row-bottom .why-lfc-item:nth-child(2) .why-lfc-icon {
    background: #0d9488;
    box-shadow: 0 0 0 7px rgba(13, 148, 136, 0.12);
}

.why-lfc-item:hover .why-lfc-icon--teal,
.why-lfc-row-bottom .why-lfc-item:nth-child(2):hover .why-lfc-icon {
    box-shadow: 0 0 0 9px rgba(13, 148, 136, 0.22);
}

/* 6. Product Innovation: Vivid Coral / Crimson */
.why-lfc-item--crimson,
.why-lfc-row-bottom .why-lfc-item:nth-child(3) {
    border-color: rgba(218, 13, 32, 0.42);
}

.why-lfc-item--crimson:hover,
.why-lfc-row-bottom .why-lfc-item:nth-child(3):hover {
    border-color: #da0d20;
}

.why-lfc-icon--crimson,
.why-lfc-row-bottom .why-lfc-item:nth-child(3) .why-lfc-icon {
    background: #da0d20;
    box-shadow: 0 0 0 7px rgba(218, 13, 32, 0.12);
}

.why-lfc-item:hover .why-lfc-icon--crimson,
.why-lfc-row-bottom .why-lfc-item:nth-child(3):hover .why-lfc-icon {
    box-shadow: 0 0 0 9px rgba(218, 13, 32, 0.22);
}

.why-lfc-item-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.2px;
}

.why-lfc-item-desc {
    font-size: 13px;
    line-height: 1.58;
    color: #4b5563;
    margin: 0;
    text-align: left;
}

/* Responsive */
@media (max-width: 992px) {
    .why-lfc-header-row {
        flex-direction: column;
        margin-bottom: 25px;
    }

    .why-lfc-header-img-wrap {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }

    .why-lfc-header-img {
        max-height: 150px;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .why-lfc-ribbon-svg {
        display: none;
    }

    .why-lfc-grid {
        gap: 16px;
    }

    .why-lfc-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .why-lfc-row-bottom {
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    .why-lfc-section {
        padding: 35px 0 45px;
    }

    .why-lfc-title {
        font-size: 21px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .why-lfc-desc {
        font-size: 12.5px;
        line-height: 1.52;
    }

    .why-lfc-item {
        padding: 16px 14px;
        border-radius: 12px;
    }

    .why-lfc-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
        margin-bottom: 10px;
    }

    .why-lfc-item-title {
        font-size: 13.5px;
        margin-bottom: 4px;
    }

    .why-lfc-item-desc {
        font-size: 11.5px;
        line-height: 1.48;
    }
}

@media (max-width: 600px) {
    .why-lfc-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ==========================================================================
   From Concept to Commercialization Section (Process Flow)
   ========================================================================== */

.lfc-process-section {
    position: relative;
    padding: 65px 0 80px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.lfc-process-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 1440px) {
    .lfc-process-container {
        padding: 0 20px;
    }
}

.lfc-process-header {
    text-align: center;
    margin: 0 auto 55px;
}

.lfc-process-tag {
    display: inline-block;
    color: var(--accent-red, #da0d20);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lfc-process-title {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
    line-height: 1.3;
}

.lfc-process-subtitle {
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0 auto;
}

/* Full Width Dotted Line Track */
.lfc-process-track-wrapper {
    position: relative;
    padding-top: 25px;
}

.lfc-process-dotted-track {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
    height: 0;
    border-top: 2px dotted #cbd5e1;
    z-index: 1;
}

/* 6 Column Process Grid */
.lfc-process-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
    position: relative;
    z-index: 2;
}

/* Process Item (NO Card Border as requested) */
.lfc-process-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    border: none !important;
    background: transparent !important;
    padding: 0;
    transition: transform 0.25s ease;
}

.lfc-process-item:hover {
    transform: translateY(-4px);
}

/* Hanging Anchor Node */
.lfc-process-hang-anchor {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-bottom: 16px;
    width: 100%;
}

/* Dot on the horizontal line */
.lfc-process-hang-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #94a3b8;
    margin-top: -4px;
    margin-bottom: 6px;
    margin-left: 17px;
    transition: transform 0.25s ease, background 0.25s ease;
}

/* Vertical hanging stem from line to icon */
.lfc-process-hang-stem {
    width: 2px;
    height: 14px;
    border-left: 2px dotted #cbd5e1;
    margin-bottom: 6px;
    margin-left: 20px;
}

/* Hanging Colorful Icon Circle */
.lfc-process-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lfc-process-item:hover .lfc-process-icon {
    transform: scale(1.1);
}

/* Colorful Icon Themes */
/* 1. Blue */
.lfc-process-item--blue .lfc-process-icon {
    background: #0284c7;
    box-shadow: 0 0 0 7px rgba(2, 132, 199, 0.12);
}

.lfc-process-item--blue:hover .lfc-process-icon {
    box-shadow: 0 0 0 10px rgba(2, 132, 199, 0.22);
}

.lfc-process-item--blue:hover .lfc-process-hang-dot {
    background: #0284c7;
    transform: scale(1.3);
}

/* 2. Green */
.lfc-process-item--green .lfc-process-icon {
    background: #10b981;
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0.12);
}

.lfc-process-item--green:hover .lfc-process-icon {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0.22);
}

.lfc-process-item--green:hover .lfc-process-hang-dot {
    background: #10b981;
    transform: scale(1.3);
}

/* 3. Amber */
.lfc-process-item--amber .lfc-process-icon {
    background: #f59e0b;
    box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.12);
}

.lfc-process-item--amber:hover .lfc-process-icon {
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0.22);
}

.lfc-process-item--amber:hover .lfc-process-hang-dot {
    background: #f59e0b;
    transform: scale(1.3);
}

/* 4. Purple */
.lfc-process-item--purple .lfc-process-icon {
    background: #8b5cf6;
    box-shadow: 0 0 0 7px rgba(139, 92, 246, 0.12);
}

.lfc-process-item--purple:hover .lfc-process-icon {
    box-shadow: 0 0 0 10px rgba(139, 92, 246, 0.22);
}

.lfc-process-item--purple:hover .lfc-process-hang-dot {
    background: #8b5cf6;
    transform: scale(1.3);
}

/* 5. Teal */
.lfc-process-item--teal .lfc-process-icon {
    background: #0d9488;
    box-shadow: 0 0 0 7px rgba(13, 148, 136, 0.12);
}

.lfc-process-item--teal:hover .lfc-process-icon {
    box-shadow: 0 0 0 10px rgba(13, 148, 136, 0.22);
}

.lfc-process-item--teal:hover .lfc-process-hang-dot {
    background: #0d9488;
    transform: scale(1.3);
}

/* 6. Crimson */
.lfc-process-item--crimson .lfc-process-icon {
    background: #da0d20;
    box-shadow: 0 0 0 7px rgba(218, 13, 32, 0.12);
}

.lfc-process-item--crimson:hover .lfc-process-icon {
    box-shadow: 0 0 0 10px rgba(218, 13, 32, 0.22);
}

.lfc-process-item--crimson:hover .lfc-process-hang-dot {
    background: #da0d20;
    transform: scale(1.3);
}

/* Content (NO Border) */
.lfc-process-content {
    border: none !important;
    padding: 0;
    background: transparent;
    width: 100%;
}

.lfc-process-step-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
    font-family: 'Inter', sans-serif;
    line-height: 1.35;
    letter-spacing: -0.2px;
    text-align: left;
}

.lfc-process-step-desc {
    font-size: 12.5px;
    line-height: 1.58;
    color: #4b5563;
    margin: 0;
    text-align: left;
}

/* Responsive */
@media (max-width: 1199px) {
    .lfc-process-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 40px 24px;
    }

    .lfc-process-dotted-track {
        display: none;
    }

    .lfc-process-hang-stem,
    .lfc-process-hang-dot {
        display: none;
    }
}

@media (max-width: 768px) {
    .lfc-process-section {
        padding: 40px 0 50px;
    }

    .lfc-process-header {
        margin-bottom: 28px;
    }

    .lfc-process-tag {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }

    .lfc-process-title {
        font-size: 19px;
    }

    .lfc-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lfc-process-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        text-align: left;
        border: 1px solid #e2e8f0 !important;
        background: #ffffff !important;
        border-radius: 12px;
        padding: 14px 12px;
        box-shadow: none !important;
        box-sizing: border-box;
    }

    .lfc-process-hang-anchor {
        width: auto;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .lfc-process-icon {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .lfc-process-badge-num {
        width: 20px;
        height: 20px;
        font-size: 9.5px;
        top: -6px;
        right: -6px;
    }

    .lfc-process-step-title {
        font-size: 13.5px;
        margin-bottom: 4px;
        line-height: 1.3;
    }

    .lfc-process-step-desc {
        font-size: 11px;
        line-height: 1.45;
    }
}

@media (max-width: 480px) {
    .lfc-process-grid {
        gap: 10px;
    }

    .lfc-process-item {
        padding: 12px 10px;
        border-radius: 10px;
        gap: 8px;
    }

    .lfc-process-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .lfc-process-step-title {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .lfc-process-step-desc {
        font-size: 10px;
        line-height: 1.4;
    }
}

/* ==========================================================================
   Certifications Section
   ========================================================================== */

.lfc-cert-section {
    position: relative;
    padding: 75px 0 85px;
    background: url('assets/manufacturing.jpg') center/cover no-repeat fixed;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    color: #ffffff;
    box-shadow: none !important;
}

/* Black Overlay */
.lfc-cert-overlay,
.lfc-cert-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    z-index: 1;
}

.lfc-cert-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1440px) {
    .lfc-cert-container {
        padding: 0 20px;
    }
}

.lfc-cert-content {
    flex: 1 1 54%;
}

.lfc-cert-tag {
    display: inline-block;
    color: #ff4d5a;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.lfc-cert-title {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 16px;
    letter-spacing: -0.3px;
    font-family: 'Inter', sans-serif;
}

.lfc-cert-desc {
    font-size: 14px;
    line-height: 1.72;
    color: #e2e8f0;
    margin: 0;
    text-align: justify;
    font-family: 'Inter', sans-serif;
}

/* Right Column Pill Shape */
.lfc-cert-pill-wrap {
    flex: 0 0 46%;
    max-width: 640px;
    display: flex;
    justify-content: flex-end;
}

.lfc-cert-pill {
    width: 100%;
    background: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 9999px;
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lfc-cert-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.55);
}

.lfc-cert-logo-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.lfc-cert-logo-item:hover {
    transform: scale(1.1);
}

.lfc-cert-svg,
.lfc-cert-img {
    width: 100%;
    max-width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
}

/* Responsive */
@media (max-width: 992px) {
    .lfc-cert-section {
        background-attachment: scroll;
        padding: 50px 0 60px;
    }

    .lfc-cert-container {
        flex-direction: column;
        gap: 30px;
    }

    .lfc-cert-content,
    .lfc-cert-pill-wrap {
        flex: 1 1 100%;
        max-width: 100%;
        justify-content: center;
    }

    .lfc-cert-pill-wrap {
        max-width: 620px;
        width: 100%;
    }

    .lfc-cert-pill {
        border-radius: 9999px;
        padding: 22px 36px;
        gap: 24px;
        max-width: 620px;
        width: 100%;
    }

    .lfc-cert-svg {
        max-width: 68px;
        height: 68px;
    }
}

@media (max-width: 768px) {
    .lfc-cert-section {
        padding: 35px 0 45px;
    }

    .lfc-cert-tag {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }

    .lfc-cert-title {
        font-size: 21px;
        margin-bottom: 10px;
    }

    .lfc-cert-desc {
        font-size: 12.5px;
        line-height: 1.52;
        text-align: left;
    }

    .lfc-cert-pill-wrap {
        width: 100%;
        max-width: 100%;
        display: flex;
        justify-content: center;
    }

    .lfc-cert-pill {
        border-radius: 9999px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 16px 28px;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .lfc-cert-logo-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lfc-cert-svg,
    .lfc-cert-img {
        max-width: 56px;
        height: 56px;
        width: 100%;
        object-fit: contain;
    }
}

@media (max-width: 480px) {
    .lfc-cert-pill {
        padding: 14px 20px;
        gap: 14px;
        max-width: 100%;
    }

    .lfc-cert-svg,
    .lfc-cert-img {
        max-width: 48px;
        height: 48px;
        object-fit: contain;
    }
}

@media (max-width: 380px) {
    .lfc-cert-pill {
        padding: 12px 14px;
        gap: 10px;
    }

    .lfc-cert-svg,
    .lfc-cert-img {
        max-width: 42px;
        height: 42px;
        object-fit: contain;
    }
}

/* ==========================================================================
   Liquid Filled Capsule FAQ & Contact Form Section
   ========================================================================== */

.lfc-faq-section {
    position: relative;
    padding: 70px 0 85px;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
}

.lfc-faq-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

@media (max-width: 1440px) {
    .lfc-faq-container {
        padding: 0 20px;
    }
}

.lfc-faq-header {
    text-align: center;
    margin: 0 auto 50px;
}

.lfc-faq-title {
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

.lfc-faq-subtitle {
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
    margin: 0 auto;
}

.lfc-faq-layout {
    display: flex;
    align-items: flex-start;
    gap: 45px;
}

.lfc-faq-form-col {
    flex: 0 0 40%;
    max-width: 40%;
}

.lfc-faq-accordion-col {
    flex: 0 0 calc(60% - 45px);
    max-width: calc(60% - 45px);
}

/* Global Contact Card & Service Contact Card */
.global-contact-card,
.lfc-contact-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: none !important;
    transition: border-color 0.25s ease;
}

.global-contact-card:hover,
.lfc-contact-card:hover {
    border-color: #cbd5e1;
}

.global-contact-header,
.lfc-contact-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.global-contact-badge-icon,
.lfc-contact-badge-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff1f2;
    color: var(--accent-red, #da0d20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.global-contact-titles,
.lfc-contact-titles {
    display: flex;
    flex-direction: column;
}

.global-contact-title,
.lfc-contact-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.global-contact-subtitle,
.lfc-contact-subtitle {
    font-size: 12.5px;
    color: #6b7280;
    margin: 0;
}

.global-contact-form,
.lfc-contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Two fields in one row/line */
.global-form-row-2,
.lfc-form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.global-form-group,
.lfc-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.global-form-label,
.lfc-form-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.2px;
}

.global-form-input,
.global-form-select,
.global-form-textarea,
.lfc-form-input,
.lfc-form-select,
.lfc-form-textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-form-textarea,
.lfc-form-textarea {
    resize: vertical;
    min-height: 75px;
}

.global-form-input:focus,
.global-form-select:focus,
.global-form-textarea:focus,
.lfc-form-input:focus,
.lfc-form-select:focus,
.lfc-form-textarea:focus {
    outline: none;
    border-color: var(--accent-red, #da0d20);
    box-shadow: 0 0 0 3px rgba(218, 13, 32, 0.08);
}

/* Custom Select for Global Contact Form */
.global-custom-select {
    position: relative;
    user-select: none;
    width: 100%;
}

.global-custom-select select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
    top: 50% !important;
    left: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    clip: rect(0 0 0 0) !important;
}

.global-custom-select .custom-select-trigger {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: #9ca3af;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    min-height: 41px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.global-custom-select .custom-select-trigger.has-value {
    color: #1f2937;
    font-weight: 500;
}

.global-custom-select .custom-select-trigger:hover,
.global-custom-select .custom-select-trigger:focus-visible,
.global-custom-select.open .custom-select-trigger {
    border-color: var(--accent-red, #da0d20);
    box-shadow: 0 0 0 3px rgba(218, 13, 32, 0.08);
}

.global-custom-select .custom-select-trigger.invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.global-custom-select .custom-select-trigger svg {
    color: #6b7280;
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
}

.global-custom-select .custom-select-trigger:hover svg,
.global-custom-select.open .custom-select-trigger svg {
    color: var(--accent-red, #da0d20);
}

.global-custom-select.open .custom-select-trigger svg {
    transform: rotate(180deg);
}

.global-custom-select .custom-options {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    transform: translateY(-6px);
    z-index: 100;
    list-style: none;
    padding: 6px 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
}

.global-custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.global-custom-select .custom-options li {
    padding: 9px 14px;
    font-size: 13.5px;
    font-family: 'Inter', sans-serif;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    border-bottom: 1px solid #f9fafb;
    display: flex;
    align-items: center;
}

.global-custom-select .custom-options li:last-child {
    border-bottom: none;
}

.global-custom-select .custom-options li:hover {
    background: #fef2f2;
    color: var(--accent-red, #da0d20);
    font-weight: 500;
}

.global-custom-select .custom-options li.selected {
    background: var(--accent-red, #da0d20);
    color: #ffffff;
    font-weight: 600;
}

.global-custom-select .custom-options::-webkit-scrollbar {
    width: 6px;
}

.global-custom-select .custom-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.global-custom-select .custom-options::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.global-custom-select .custom-options::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.global-form-btn,
.lfc-form-btn {
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--accent-red, #da0d20);
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.global-form-btn:hover,
.lfc-form-btn:hover {
    background: #b90b1b;
    transform: translateY(-1px);
}

@media (max-width: 600px) {

    .global-form-row-2,
    .lfc-form-row-2 {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* FAQ Accordion Styles for LFC Page */
.lfc-faq-accordion-col .faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lfc-faq-accordion-col .faq-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.lfc-faq-accordion-col .faq-item:hover {
    border-color: #cbd5e1;
}

.lfc-faq-accordion-col .faq-item.active {
    border-color: var(--accent-red, #da0d20);
    background: #fffdfd;
}

.lfc-faq-accordion-col .faq-question {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 17px 20px;
    font-size: 14.5px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: color 0.2s ease;
}

.lfc-faq-accordion-col .faq-item.active .faq-question {
    color: var(--accent-red, #da0d20);
}

.lfc-faq-accordion-col .faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-red, #da0d20);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.lfc-faq-accordion-col .faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.lfc-faq-accordion-col .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    background: transparent;
}

.lfc-faq-accordion-col .faq-answer p {
    padding: 0 20px 18px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: #4b5563;
}

.lfc-faq-accordion-col .faq-item.active .faq-answer {
    max-height: 300px;
}

/* Responsive */
@media (max-width: 992px) {
    .lfc-faq-layout {
        flex-direction: column;
        gap: 35px;
    }

    .lfc-faq-form-col,
    .lfc-faq-accordion-col {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .lfc-faq-section {
        padding: 40px 0 50px;
    }

    .lfc-faq-header {
        margin-bottom: 25px;
    }

    .lfc-faq-title {
        font-size: 20px;
    }

    .lfc-faq-subtitle {
        font-size: 12.5px;
        line-height: 1.5;
    }

    .lfc-contact-card {
        padding: 20px 16px;
        border-radius: 12px;
    }

    .lfc-contact-title {
        font-size: 17px;
    }

    .global-form-label,
    .lfc-form-label {
        font-size: 11px;
    }

    .global-form-input,
    .global-form-select,
    .global-form-textarea,
    .lfc-form-input,
    .lfc-form-select,
    .lfc-form-textarea {
        padding: 9px 12px;
        font-size: 12.5px;
    }

    .global-custom-select .custom-select-trigger {
        padding: 9px 12px;
        font-size: 12.5px;
    }

    .global-custom-select .custom-options li {
        padding: 8px 12px;
        font-size: 12.5px;
    }

    .global-form-btn,
    .lfc-form-btn {
        padding: 11px 18px;
        font-size: 13px;
    }

    .lfc-faq-accordion-col .faq-question {
        padding: 13px 14px;
        font-size: 13px;
        gap: 12px;
    }

    .lfc-faq-accordion-col .faq-icon {
        font-size: 11px;
    }

    .lfc-faq-accordion-col .faq-answer p {
        padding: 0 14px 13px;
        font-size: 12px;
        line-height: 1.5;
    }
}

/* ==========================================================================
   LFC Call-To-Action (CTA) Modern Banner Component
   ========================================================================== */
.lfc-cta-section {
    background: #ffffff;
}

.lfc-cta-card {
    background: #0b131e;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    position: relative;
    min-height: 380px;
}

.lfc-cta-content {
    padding: 55px 40px 55px 55px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: #0b131e;
}

.lfc-cta-tag-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.lfc-cta-tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #94a3b8;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.lfc-cta-tag-line {
    width: 32px;
    height: 2px;
    background: var(--accent-red, #da0d20);
    border-radius: 2px;
}

.lfc-cta-title {
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
    font-family: 'Outfit', 'Inter', sans-serif;
}

.lfc-cta-title-red {
    color: var(--accent-red, #da0d20);
}

.lfc-cta-desc {
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 32px 0;
    font-family: 'Inter', sans-serif;
}

.lfc-cta-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.lfc-cta-btn-primary {
    background: var(--accent-red, #da0d20);
    color: #ffffff;
    padding: 13px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid var(--accent-red, #da0d20);
    box-shadow: 0 4px 14px rgba(218, 13, 32, 0.4);
    transition: all 0.25s ease;
}

.lfc-cta-btn-primary:hover {
    background: #b90b1b;
    border-color: #b90b1b;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 13, 32, 0.5);
}

.lfc-cta-btn-outline {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    padding: 13px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
}

.lfc-cta-btn-outline:hover {
    background: #ffffff;
    color: #0b131e;
    border-color: #ffffff;
    transform: translateY(-2px);
}

.lfc-cta-btn-primary svg,
.lfc-cta-btn-outline svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.lfc-cta-btn-primary:hover svg {
    transform: translateX(3px);
}

/* Visual Right Column */
.lfc-cta-right {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.lfc-cta-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 1;
}

.lfc-cta-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #0b131e 0%, rgba(11, 19, 30, 0.92) 32%, rgba(11, 19, 30, 0.5) 65%, rgba(11, 19, 30, 0.15) 100%);
    z-index: 2;
}

.lfc-cta-swoosh-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 80px;
    height: 100%;
    z-index: 4;
    pointer-events: none;
}

.lfc-cta-swoosh-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lfc-cta-features {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px 30px 40px 50px;
}

.lfc-cta-feat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.lfc-cta-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.lfc-cta-feat-item:hover .lfc-cta-feat-icon {
    border-color: var(--accent-red, #da0d20);
    background: rgba(218, 13, 32, 0.2);
    transform: scale(1.08);
}

.lfc-cta-feat-text h4,
.lfc-cta-feat-text h3 {
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    margin: 0 0 3px 0;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.2px;
}

.lfc-cta-feat-text p {
    color: #94a3b8;
    font-size: 12px;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Responsive Rules for CTA */
@media (max-width: 1080px) {
    .lfc-cta-card {
        grid-template-columns: 1fr;
    }

    .lfc-cta-content {
        padding: 40px 30px;
    }

    .lfc-cta-right {
        min-height: 250px;
    }

    .lfc-cta-features {
        padding: 30px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
    }

    .lfc-cta-swoosh-container {
        display: none;
    }
}

@media (max-width: 768px) {
    .lfc-cta-card {
        border-radius: 14px;
    }

    .lfc-cta-content {
        padding: 28px 18px;
    }

    .lfc-cta-tag {
        font-size: 10px;
        letter-spacing: 1.2px;
    }

    .lfc-cta-tag-line {
        width: 24px;
    }

    .lfc-cta-title {
        font-size: 21px;
        line-height: 1.25;
        margin-bottom: 10px;
    }

    .lfc-cta-desc {
        font-size: 12.5px;
        line-height: 1.52;
        margin-bottom: 20px;
    }

    .lfc-cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .lfc-cta-btn-primary,
    .lfc-cta-btn-outline {
        width: 100%;
        justify-content: center;
        padding: 10px 18px;
        font-size: 12.5px;
    }

    .lfc-cta-right {
        min-height: auto;
    }

    .lfc-cta-img-overlay {
        background: rgba(11, 19, 30, 0.88);
    }

    .lfc-cta-features {
        padding: 18px 10px;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 6px;
        width: 100%;
        box-sizing: border-box;
    }

    .lfc-cta-feat-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
    }

    .lfc-cta-feat-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .lfc-cta-feat-icon svg {
        width: 17px;
        height: 17px;
    }

    .lfc-cta-feat-text {
        width: 100%;
    }

    .lfc-cta-feat-text h4,
    .lfc-cta-feat-text h3 {
        font-size: 11px;
        font-weight: 700;
        margin-bottom: 2px;
        line-height: 1.25;
        color: #ffffff;
    }

    .lfc-cta-feat-text p {
        font-size: 9px;
        line-height: 1.25;
        color: #94a3b8;
    }
}

@media (max-width: 480px) {
    .lfc-cta-features {
        padding: 14px 6px;
        gap: 4px;
    }

    .lfc-cta-feat-icon {
        width: 32px;
        height: 32px;
    }

    .lfc-cta-feat-icon svg {
        width: 15px;
        height: 15px;
    }

    .lfc-cta-feat-text h4,
    .lfc-cta-feat-text h3 {
        font-size: 10px;
        line-height: 1.2;
    }

    .lfc-cta-feat-text p {
        font-size: 8px;
        line-height: 1.2;
    }
}

/* ==========================================================================
   Why Choose Agnivesh (LFC) Section
   ========================================================================== */
.lfc-why-choose-section {
    padding: 70px 5%;
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
}

.lfc-wc-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Centered Top Header */
.lfc-wc-header {
    text-align: center;
    margin: 0 auto 40px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lfc-wc-tag-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.lfc-wc-tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: var(--accent-red);
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.lfc-wc-tag-line {
    width: 30px;
    height: 2px;
    background: var(--accent-red, #da0d20);
    border-radius: 2px;
}

.lfc-wc-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.25;
    color: #0f172a;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
    text-align: center;
    font-family: 'Outfit', 'Inter', sans-serif;
}

.lfc-wc-title-red {
    color: var(--accent-red, #da0d20);
}

.lfc-wc-desc {
    font-size: 14px;
    line-height: 1.68;
    color: #475569;
    margin: 0 auto;
    text-align: center;
    font-family: 'Inter', sans-serif;
}

/* Two-column layout: 8 Cards on Left, Organic Visual on Right */
.lfc-wc-body {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 40px;
    align-items: center;
}

.lfc-wc-left {
    display: flex;
    flex-direction: column;
}

.lfc-wc-link {
    color: var(--accent-red, #da0d20);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.lfc-wc-link:hover {
    color: #b90b1b;
}

/* 4-column / 2-row feature grid */
.lfc-wc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 10px;
    margin-bottom: 28px;
}

.lfc-wc-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 15px 9px;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.lfc-wc-item:hover {
    border-color: #94a3b8;
    background: #f8fafc;
    box-shadow: none !important;
}

.lfc-wc-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 12px;
    box-shadow: none !important;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.lfc-wc-item:hover .lfc-wc-icon {
    transform: translateY(-2px) scale(1.05);
    box-shadow: none !important;
}

/* 1. Rose / Crimson - Capsule Expertise */
.lfc-wc-grid .lfc-wc-item:nth-child(1) .lfc-wc-icon,
.lfc-wc-icon--rose {
    background: #fff1f2;
    border: 1.5px solid rgba(225, 29, 72, 0.25);
    color: #e11d48;
}

.lfc-wc-grid .lfc-wc-item:nth-child(1):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--rose {
    background: #e11d48;
    color: #ffffff;
    box-shadow: none !important;
}

/* 2. Emerald Green - Formulation Support */
.lfc-wc-grid .lfc-wc-item:nth-child(2) .lfc-wc-icon,
.lfc-wc-icon--emerald {
    background: #f0fdf4;
    border: 1.5px solid rgba(22, 163, 74, 0.25);
    color: #16a34a;
}

.lfc-wc-grid .lfc-wc-item:nth-child(2):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--emerald {
    background: #16a34a;
    color: #ffffff;
    box-shadow: none !important;
}

/* 3. Royal Blue - Quality Manufacturing */
.lfc-wc-grid .lfc-wc-item:nth-child(3) .lfc-wc-icon,
.lfc-wc-icon--blue {
    background: #eff6ff;
    border: 1.5px solid rgba(37, 99, 235, 0.25);
    color: #2563eb;
}

.lfc-wc-grid .lfc-wc-item:nth-child(3):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--blue {
    background: #2563eb;
    color: #ffffff;
    box-shadow: none !important;
}

/* 4. Indigo - Global Reach & Export */
.lfc-wc-grid .lfc-wc-item:nth-child(4) .lfc-wc-icon,
.lfc-wc-icon--indigo {
    background: #eef2ff;
    border: 1.5px solid rgba(79, 70, 229, 0.25);
    color: #4f46e5;
}

.lfc-wc-grid .lfc-wc-item:nth-child(4):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--indigo {
    background: #4f46e5;
    color: #ffffff;
    box-shadow: none !important;
}

/* 5. Warm Amber - End-to-End Partnership */
.lfc-wc-grid .lfc-wc-item:nth-child(5) .lfc-wc-icon,
.lfc-wc-icon--amber {
    background: #fffbeb;
    border: 1.5px solid rgba(217, 119, 6, 0.25);
    color: #d97706;
}

.lfc-wc-grid .lfc-wc-item:nth-child(5):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--amber {
    background: #d97706;
    color: #ffffff;
    box-shadow: none !important;
}

/* 6. Deep Purple - Advanced Infrastructure */
.lfc-wc-grid .lfc-wc-item:nth-child(6) .lfc-wc-icon,
.lfc-wc-icon--purple {
    background: #faf5ff;
    border: 1.5px solid rgba(147, 51, 234, 0.25);
    color: #9333ea;
}

.lfc-wc-grid .lfc-wc-item:nth-child(6):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--purple {
    background: #9333ea;
    color: #ffffff;
    box-shadow: none !important;
}

/* 7. Teal - Regulatory & Documentation */
.lfc-wc-grid .lfc-wc-item:nth-child(7) .lfc-wc-icon,
.lfc-wc-icon--teal {
    background: #f0fdfa;
    border: 1.5px solid rgba(13, 148, 136, 0.25);
    color: #0d9488;
}

.lfc-wc-grid .lfc-wc-item:nth-child(7):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--teal {
    background: #0d9488;
    color: #ffffff;
    box-shadow: none !important;
}

/* 8. Vibrant Orange - Multi-Phase Innovation */
.lfc-wc-grid .lfc-wc-item:nth-child(8) .lfc-wc-icon,
.lfc-wc-icon--orange {
    background: #fff7ed;
    border: 1.5px solid rgba(234, 88, 12, 0.25);
    color: #ea580c;
}

.lfc-wc-grid .lfc-wc-item:nth-child(8):hover .lfc-wc-icon,
.lfc-wc-item:hover .lfc-wc-icon--orange {
    background: #ea580c;
    color: #ffffff;
    box-shadow: none !important;
}

.lfc-wc-item-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin: 0 0 5px 0;
    font-family: 'Inter', sans-serif;
}

.lfc-wc-item-desc {
    font-size: 12px;
    line-height: 1.5;
    color: #64748b;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Multi-Phase Callout Box */
.lfc-wc-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #f8fafc;
    border: 1px solid var(--accent-red);
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 5px;
}

.lfc-wc-callout-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: #fef2f2;
    color: var(--accent-red, #da0d20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.lfc-wc-callout-text {
    font-size: 13px;
    line-height: 1.55;
    color: #334155;
    font-family: 'Inter', sans-serif;
    flex: 1;
}

.lfc-wc-callout-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 30px;
    background: var(--accent-red, #da0d20);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.lfc-wc-callout-btn:hover {
    background: #b90b1b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(218, 13, 32, 0.25);
    color: #ffffff;
}

/* Right Visual Area */
.lfc-wc-visual {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lfc-wc-backdrop {
    display: none !important;
}

.lfc-wc-img-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.lfc-wc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s ease;
}

.lfc-wc-visual:hover .lfc-wc-img {
    transform: scale(1.03);
}

/* Floating Badge: Hidden */
.lfc-wc-badge {
    display: none !important;
}

/* Bottom Script Note: Hidden */
.lfc-wc-script-wrap {
    display: none !important;
}

/* Responsive Rules for Why Choose Section */
@media (max-width: 1200px) {
    .lfc-wc-body {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .lfc-wc-left {
        order: 1;
    }

    .lfc-wc-right {
        order: 2;
    }

    .lfc-wc-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 820px) {
    .lfc-wc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .lfc-wc-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .lfc-wc-callout-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .lfc-why-choose-section {
        padding: 40px 4%;
    }

    .lfc-wc-header {
        margin-bottom: 24px;
    }

    .lfc-wc-tag {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .lfc-wc-tag-line {
        width: 24px;
    }

    .lfc-wc-title {
        font-size: 21px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .lfc-wc-desc {
        font-size: 12.5px;
        line-height: 1.52;
    }

    .lfc-wc-item {
        padding: 10px 8px;
        border-radius: 8px;
    }

    .lfc-wc-icon {
        width: 34px;
        height: 34px;
        font-size: 13px;
        margin-bottom: 8px;
    }

    .lfc-wc-item-title {
        font-size: 12px;
        line-height: 1.3;
        margin-bottom: 3px;
    }

    .lfc-wc-item-desc {
        font-size: 11px;
        line-height: 1.4;
    }

    .lfc-wc-callout {
        padding: 12px 14px;
        gap: 10px;
    }

    .lfc-wc-callout-text {
        font-size: 11.5px;
        line-height: 1.48;
    }

    .lfc-wc-callout-btn {
        padding: 9px 14px;
        font-size: 11.5px;
    }

    .lfc-wc-visual {
        max-width: 420px;
    }
}

@media (max-width: 480px) {
    .lfc-wc-visual {
        max-width: 100%;
    }
}

/* ==========================================================================
   Global Consultation & Quote Popup Modal Component
   ========================================================================== */
.global-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
}

.global-modal.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

body.modal-open {
    overflow: hidden !important;
}

.global-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.global-modal-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 440px;
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.global-modal-dialog {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.05);
    width: 100%;
    position: relative;
    overflow-y: auto;
    max-height: 94vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 20px 22px 18px;
    box-sizing: border-box;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.global-modal-dialog::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.global-modal.active .global-modal-dialog {
    transform: scale(1) translateY(0);
}

.global-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
}

.global-modal-close:hover {
    background: #fee2e2;
    color: var(--accent-red, #da0d20);
    border-color: #fca5a5;
    transform: rotate(90deg);
}

/* Modal Header */
.global-modal-header {
    text-align: center;
    margin-bottom: 14px;
}

.global-modal-tag-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.global-modal-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    color: var(--accent-red, #da0d20);
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.global-modal-tag-line {
    width: 20px;
    height: 2px;
    background: var(--accent-red, #da0d20);
    border-radius: 2px;
}

.global-modal-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin: 0;
    font-family: 'Outfit', 'Inter', sans-serif;
}

.global-modal-title .text-red {
    color: var(--accent-red, #da0d20);
}

/* Form Layout: 1 Field Per Row */
.modal-form-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
    margin-bottom: 16px;
}

.modal-form-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.modal-form-label {
    font-size: 11px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 3px;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px;
}

.modal-form-label .required {
    color: var(--accent-red, #da0d20);
}

.modal-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.modal-input-icon {
    position: absolute;
    left: 12px;
    color: #94a3b8;
    font-size: 12.5px;
    pointer-events: none;
    z-index: 2;
}

.modal-form-input {
    width: 100%;
    height: 36px;
    padding: 6px 12px 6px 34px;
    font-size: 12.5px;
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.modal-form-input:focus {
    background: #ffffff;
    border-color: var(--accent-red, #da0d20);
    box-shadow: 0 0 0 3px rgba(218, 13, 32, 0.1);
}

/* Modal Contact Card & Custom Select */
.global-modal .global-contact-card {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.global-modal .global-contact-header {
    margin-bottom: 12px;
    padding-bottom: 10px;
    gap: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.global-modal .global-contact-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 15px;
}

.global-modal .global-contact-title {
    font-size: 16px;
    margin: 0 0 2px;
}

.global-modal .global-contact-subtitle {
    font-size: 11.5px;
}

.global-modal .global-contact-form {
    gap: 0;
}

.global-modal .global-form-row-2 {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
}

.global-modal .global-form-group {
    width: 100% !important;
    margin-bottom: 8px !important;
    gap: 2px !important;
}

.global-modal .global-form-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    letter-spacing: 0.1px !important;
    margin-bottom: 1px !important;
}

.global-modal .global-form-input {
    width: 100% !important;
    height: 35px !important;
    padding: 6px 11px !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
}

.global-modal .global-custom-select {
    width: 100%;
    position: relative;
}

.global-modal .global-custom-select .custom-select-trigger {
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-height: 35px;
    height: 35px;
    padding: 6px 11px;
    font-size: 12.5px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    cursor: pointer;
}

.global-modal .global-custom-select .custom-select-trigger.has-value {
    color: #1f2937;
    font-weight: 500;
}

.global-modal .global-custom-select .custom-select-trigger-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12.5px;
}

.global-modal .global-custom-select .custom-select-trigger:focus,
.global-modal .global-custom-select.open .custom-select-trigger {
    background: #ffffff;
    border-color: var(--accent-red, #da0d20);
    box-shadow: 0 0 0 3px rgba(218, 13, 32, 0.08);
}

.global-modal .global-custom-select .custom-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    max-height: 180px;
    overflow-y: auto;
    z-index: 100;
}

.global-modal .global-custom-select .custom-options li {
    padding: 7px 11px;
    font-size: 12px;
}

.global-modal .global-form-textarea {
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 6px 11px !important;
    font-size: 12.5px !important;
    border-radius: 6px !important;
    resize: none !important;
}

/* Submit Action */
.global-modal .modal-submit-btn,
.global-modal .global-form-btn {
    width: 100%;
    height: 38px;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--accent-red, #da0d20);
    color: #ffffff;
    border: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-family: 'Inter', sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(218, 13, 32, 0.25);
    transition: all 0.25s ease;
    margin-top: 4px;
}

.global-modal .modal-submit-btn:hover,
.global-modal .global-form-btn:hover {
    background: #b90b1b;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(218, 13, 32, 0.35);
}

.global-modal .modal-submit-btn:active,
.global-modal .global-form-btn:active {
    transform: translateY(0);
}

/* Dedicated Thank You Popup View */
.modal-thankyou-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 14px 10px;
    animation: modalThankYouFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalThankYouFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.94) translateY(6px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-thankyou-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 12px;
    box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.3);
    animation: modalCheckPulse 1.6s ease-in-out infinite alternate;
}

@keyframes modalCheckPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 8px 24px -4px rgba(16, 185, 129, 0.3);
    }

    100% {
        transform: scale(1.05);
        box-shadow: 0 12px 28px -2px rgba(16, 185, 129, 0.45);
    }
}

.modal-thankyou-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #059669;
    background: #d1fae5;
    padding: 3px 10px;
    border-radius: 9999px;
    margin-bottom: 8px;
}

.modal-thankyou-title {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
    line-height: 1.2;
}

.modal-thankyou-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 16px;
    max-width: 380px;
}

.modal-thankyou-desc strong {
    color: #0f172a;
    font-weight: 600;
}

.modal-thankyou-meta {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.modal-thankyou-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 5px 12px;
}

.modal-thankyou-badge i {
    color: var(--accent-red, #da0d20);
    font-size: 11.5px;
}

.modal-thankyou-btn {
    height: 38px;
    padding: 0 28px;
    border-radius: 30px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-family: 'Inter', sans-serif;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.modal-thankyou-btn:hover {
    background: var(--accent-red, #da0d20);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(218, 13, 32, 0.35);
}

/* Modal Mobile Responsiveness: 1 Field Per Row */
@media (max-width: 640px) {
    .global-modal-container {
        padding: 8px;
        max-width: 100%;
    }

    .global-modal-dialog {
        padding: 18px 16px 16px;
        border-radius: 16px;
        max-height: 94vh;
        overflow-y: auto;
    }

    .global-modal-close {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
    }

    .global-modal-header {
        margin-bottom: 12px;
    }

    .global-modal-title {
        font-size: 18px;
    }

    .global-modal-tag {
        font-size: 9px;
    }

    .modal-form-grid {
        grid-template-columns: 1fr !important;
        gap: 9px;
        margin-bottom: 14px;
    }

    .modal-form-label {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .modal-form-input,
    .global-modal .global-custom-select .custom-select-trigger {
        height: 36px;
        font-size: 12px;
        padding: 6px 10px 6px 32px;
    }

    .global-modal .global-custom-select .custom-select-trigger {
        padding: 6px 10px;
    }

    .modal-input-icon {
        left: 10px;
        font-size: 11.5px;
    }

    .modal-submit-btn {
        height: 38px;
        font-size: 12.5px;
        padding: 8px 16px;
    }

    .modal-thankyou-view {
        padding: 10px 8px 6px;
    }

    .modal-thankyou-icon {
        width: 50px;
        height: 50px;
        font-size: 26px;
        margin-bottom: 10px;
    }

    .modal-thankyou-title {
        font-size: 19px;
    }

    .modal-thankyou-desc {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .modal-thankyou-meta {
        gap: 6px;
        margin-bottom: 14px;
    }

    .modal-thankyou-badge {
        font-size: 10.5px;
        padding: 4px 10px;
    }

    .modal-thankyou-btn {
        height: 36px;
        font-size: 12.5px;
        padding: 0 22px;
    }
}

/* ==========================================================================
   Universal Form Status Modal (Success & Failed Message Popups)
   ========================================================================== */
.status-modal-dialog {
    max-width: 480px !important;
    text-align: center;
    padding: 36px 32px 30px !important;
    border-radius: 20px !important;
    background: #ffffff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.status-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.status-modal-icon-wrap {
    margin-bottom: 16px;
}

.status-modal-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    animation: statusIconPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes statusIconPop {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.status-modal-icon.success {
    background: #ecfdf5;
    color: #059669;
    border: 3px solid #a7f3d0;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2);
}

.status-modal-icon.error {
    background: #fff1f2;
    color: #e11d48;
    border: 3px solid #fecdd3;
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.2);
}

.status-modal-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 9999px;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
}

.status-modal-tag.success {
    color: #059669;
    background: #d1fae5;
}

.status-modal-tag.error {
    color: #be123c;
    background: #ffe4e6;
}

.status-modal-title {
    font-family: var(--font-heading, 'Outfit', 'Inter', sans-serif);
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px;
    line-height: 1.25;
}

.status-modal-desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 20px;
    max-width: 380px;
}

.status-modal-contacts {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
    width: 100%;
}

.status-contact-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.status-contact-pill:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    color: var(--accent-red, #da0d20);
    transform: translateY(-1px);
}

.status-contact-pill i {
    color: var(--accent-red, #da0d20);
    font-size: 11px;
}

.status-modal-action {
    width: 100%;
}

.status-modal-btn {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    background: #0f172a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    font-family: 'Inter', sans-serif;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.status-modal-btn:hover {
    background: var(--accent-red, #da0d20);
    box-shadow: 0 6px 18px rgba(218, 13, 32, 0.3);
    transform: translateY(-1px);
}

.status-modal-btn:active {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .status-modal-dialog {
        padding: 28px 20px 24px !important;
    }
    .status-modal-title {
        font-size: 20px;
    }
    .status-modal-desc {
        font-size: 13px;
    }
}

/* ==========================================================================
   Product Details Page Styles
   ========================================================================== */
.pdetail-section {
    padding: 70px 5% 90px;
    background-color: #fafdfa;
}

.pdetail-container {
    max-width: 1320px;
    margin: 0 auto;
}

.pdetail-top-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 48px;
    background: #ffffff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(17, 66, 39, 0.06);
    border: 1px solid rgba(17, 66, 39, 0.08);
    margin-bottom: 50px;
}

/* Gallery */
.pdetail-gallery-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pdetail-main-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f4f7f4;
    border: 1px solid #e2e8e2;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdetail-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pdetail-main-frame:hover .pdetail-main-img {
    transform: scale(1.04);
}

.pdetail-badge-flagship {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #da0d20;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(218, 13, 32, 0.3);
}

.pdetail-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.pdetail-thumb-item {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: #f4f7f4;
    transition: all 0.25s ease;
}

.pdetail-thumb-item.active,
.pdetail-thumb-item:hover {
    border-color: #114227;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.pdetail-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info Column */
.pdetail-info {
    display: flex;
    flex-direction: column;
}

.pdetail-meta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pdetail-cat-badge {
    background: rgba(17, 66, 39, 0.08);
    color: #114227;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 12px;
    border-radius: 6px;
}

.pdetail-sku-badge {
    font-size: 12px;
    color: #666666;
    font-weight: 500;
}

.pdetail-title {
    font-size: 30px;
    color: #114227;
    line-height: 1.25;
    margin-bottom: 14px;
    font-weight: 700;
}

.pdetail-desc {
    font-size: 15px;
    line-height: 1.65;
    color: #4a5568;
    margin-bottom: 22px;
}

/* Actives Pills */
.pdetail-actives-wrap {
    margin-bottom: 24px;
}

.pdetail-actives-label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #2d3748;
    margin-bottom: 10px;
    display: block;
}

.pdetail-actives-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pdetail-active-tag {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 12.5px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pdetail-active-tag i {
    color: #22c55e;
    font-size: 11px;
}

/* Specs Table Card */
.pdetail-specs-table {
    background: #fcfdfc;
    border: 1px solid #e6ede6;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 28px;
}

.pdetail-spec-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid #edf2ed;
    font-size: 13.5px;
}

.pdetail-spec-row:last-child {
    border-bottom: none;
}

.pdetail-spec-name {
    color: #718096;
    font-weight: 500;
}

.pdetail-spec-val {
    color: #1a202c;
    font-weight: 600;
    text-align: right;
}

/* Actions */
.pdetail-action-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
}

.pdetail-btn-quote {
    flex: 1;
    min-width: 200px;
    background: #da0d20;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    padding: 14px 24px;
    border-radius: 8px;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.pdetail-btn-quote:hover {
    background: #b50b1b;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(218, 13, 32, 0.25);
}

.pdetail-btn-spec {
    background: #ffffff;
    color: #114227;
    border: 1.5px solid #114227;
    font-size: 14.5px;
    font-weight: 600;
    padding: 14px 22px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pdetail-btn-spec:hover {
    background: #114227;
    color: #ffffff;
}

/* Detailed Information Tabs / Panels */
.pdetail-tabs-wrapper {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(17, 66, 39, 0.08);
    box-shadow: 0 10px 30px rgba(17, 66, 39, 0.06);
    overflow: hidden;
    margin-bottom: 50px;
}

.pdetail-tab-header {
    display: flex;
    border-bottom: 1px solid #e8ede8;
    background: #f7faf7;
    overflow-x: auto;
}

.pdetail-tab-btn {
    padding: 18px 28px;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: #556270;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.25s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pdetail-tab-btn:hover {
    color: #114227;
}

.pdetail-tab-btn.active {
    color: #114227;
    background: #ffffff;
    border-bottom-color: #da0d20;
    font-weight: 700;
}

.pdetail-tab-pane {
    padding: 36px 40px;
    display: none;
}

.pdetail-tab-pane.active {
    display: block;
}

.pdetail-pane-title {
    font-family: var(--font-serif, 'Playfair Display', serif);
    font-size: 22px;
    color: #114227;
    margin-bottom: 16px;
}

.pdetail-pane-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #4a5568;
    margin-bottom: 24px;
}

/* Feature Cards Grid */
.pdetail-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.pdetail-feat-card {
    background: #f9fbf9;
    border: 1px solid #e9f0e9;
    border-radius: 12px;
    padding: 20px;
    transition: transform 0.25s ease;
}

.pdetail-feat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.pdetail-feat-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(17, 66, 39, 0.1);
    color: #114227;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.pdetail-feat-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 8px;
}

.pdetail-feat-text {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
}

/* Supplement Facts Table */
.pdetail-facts-box {
    border: 2px solid #222222;
    border-radius: 8px;
    padding: 20px 24px;
    max-width: 580px;
    background: #ffffff;
    font-family: var(--font-sans);
}

.pdetail-facts-head {
    border-bottom: 8px solid #222222;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.pdetail-facts-title {
    font-size: 26px;
    font-weight: 900;
    line-height: 1.1;
    color: #111111;
}

.pdetail-facts-serving {
    font-size: 13px;
    color: #333333;
    margin-top: 4px;
}

.pdetail-facts-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #d1d5db;
    font-size: 14px;
}

.pdetail-facts-row--bold {
    font-weight: 700;
    border-bottom: 3px solid #222222;
}

/* Responsive */
@media (max-width: 991px) {
    .pdetail-top-grid {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 32px;
    }

    .pdetail-title {
        font-size: 26px;
    }

    .pdetail-tab-pane {
        padding: 24px 20px;
    }
}

@media (max-width: 576px) {
    .pdetail-section {
        padding: 40px 4% 60px;
    }

    .pdetail-top-grid {
        padding: 16px;
        border-radius: 14px;
    }

    .pdetail-title {
        font-size: 22px;
    }

    .pdetail-action-buttons {
        flex-direction: column;
    }

    .pdetail-btn-quote,
    .pdetail-btn-spec {
        width: 100%;
    }
}

/* ==========================================================================
   Omega-3 Fish Oil Showcase UI (Same to Same)
   ========================================================================== */
.pdetail-exact-section {
    background-color: #ffffff;
    padding: 24px 5% 40px;
}

.pdetail-exact-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* Breadcrumb */
.pdetail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.pdetail-breadcrumb a {
    color: #475569;
    text-decoration: none;
    transition: color 0.2s;
}

.pdetail-breadcrumb a:hover {
    color: #da0d20;
}

.pdetail-breadcrumb .bc-sep {
    color: #94a3b8;
    font-size: 15px;
    font-weight: 600;
}

.pdetail-breadcrumb .bc-current {
    color: #0f172a;
    font-weight: 600;
}

/* Two-column showcase layout */
.pdetail-showcase-grid {
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 36px;
    align-items: start;
    margin-bottom: 26px;
}

.pdetail-info {
    min-width: 0;
}

/* Left: Gallery */
.pdetail-gallery-row {
    display: flex;
    gap: 12px;
    max-width: 430px;
}

.pdetail-vertical-thumbs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.pdetail-thumb-box {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    background: #f8fafc;
    position: relative;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdetail-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pdetail-thumb-box.active {
    border-color: #da0d20;
    box-shadow: 0 0 0 1px #da0d20;
}

.pdetail-thumb-play {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    color: #da0d20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.pdetail-main-stage {
    position: relative;
    flex: 1;
    border-radius: 18px;
    overflow: hidden;
    background: #f8fafc;
    aspect-ratio: 1 / 1;
    max-height: 380px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--accent-red);
}

.pdetail-main-stage-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

/* Pure Potent Trusted badge */
.pdetail-pure-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 78px;
    height: 78px;
    border: 1.5px solid rgba(226, 215, 218, 0.9);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    transform: rotate(-7deg);
    pointer-events: none;
    z-index: 2;
}

.pdetail-pure-badge::before {
    content: "";
    position: absolute;
    inset: 2.5px;
    border: 1px dashed rgba(218, 13, 32, 0.35);
    border-radius: 50%;
}

.pdetail-pure-badge span {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 11.5px;
    line-height: 1.25;
    color: #334155;
    font-weight: 600;
}

/* Right Content */
.pdetail-meta-pill {
    display: inline-block;
    background: #ffe8ec;
    color: #da0d20;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.pdetail-exact-title {
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.pdetail-sub-headline {
    font-size: 15.5px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 14px;
    line-height: 1.45;
}

.pdetail-exact-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 14px;
}

/* 4 Feature Badges with Dividers - Compact & Clean */
.pdetail-benefits-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
    padding: 10px 0;
    margin-bottom: 16px;
    gap: 2px;
}

.pdetail-benefit-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 4px;
}

.pdetail-benefit-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #e2e8f0;
}

.pdetail-benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 5px;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pdetail-benefit-col:hover .pdetail-benefit-icon {
    transform: translateY(-2px) scale(1.06);
}

/* Colorful icon variations */
.icon-purity {
    background: #fff1f2;
    color: #e11d48;
    border: 1.5px solid #fecdd3;
    box-shadow: 0 3px 8px rgba(225, 29, 72, 0.12);
}

.icon-heart {
    background: #e0f2fe;
    color: #0284c7;
    border: 1.5px solid #bae6fd;
    box-shadow: 0 3px 8px rgba(2, 132, 199, 0.12);
}

.icon-brain {
    background: #f3e8ff;
    color: #9333ea;
    border: 1.5px solid #e9d5ff;
    box-shadow: 0 3px 8px rgba(147, 51, 234, 0.12);
}

.icon-joint {
    background: #fef3c7;
    color: #d97706;
    border: 1.5px solid #fde68a;
    box-shadow: 0 3px 8px rgba(217, 119, 6, 0.12);
}

.pdetail-benefit-name {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.pdetail-benefit-sub {
    font-size: 11px;
    color: #64748b;
    line-height: 1.2;
}

/* Buttons */
.pdetail-cta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-exact-quote {
    background: #da0d20;
    color: #ffffff;
    font-size: 14.5px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 9px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.25s ease;
    border: none;
    cursor: pointer;
}

.btn-exact-quote:hover {
    background: #b50b1b;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.btn-exact-brochure {
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid #cbd5e1;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 9px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
    cursor: pointer;
}

.btn-exact-brochure:hover {
    border-color: #0f172a;
    background: #f8fafc;
}

/* Bottom 4-Item Capability Bar */
.pdetail-trust-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    margin-top: 10px;
    margin-bottom: 32px;
}

.pdetail-trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    padding: 4px 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease;
}

.pdetail-trust-item:hover {
    text-decoration: none;
    color: inherit;
}

.pdetail-trust-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: #cbd5e1;
}

.pdetail-trust-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pdetail-trust-item:hover .pdetail-trust-icon {
    transform: translateY(-2px) scale(1.06);
}

.trust-icon-gmp {
    background: #fff1f2;
    color: #e11d48;
    border: 1.5px solid #fecdd3;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.12);
}

.trust-icon-custom {
    background: #eff6ff;
    color: #2563eb;
    border: 1.5px solid #bfdbfe;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.trust-icon-bulk {
    background: #fffbeb;
    color: #d97706;
    border: 1.5px solid #fde68a;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.12);
}

.trust-icon-global {
    background: #ecfdf5;
    color: #10b981;
    border: 1.5px solid #a7f3d0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
}

.pdetail-trust-text {
    display: flex;
    flex-direction: column;
}

.pdetail-trust-strong {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.pdetail-trust-light {
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    line-height: 1.25;
}

/* ==========================================================================
   Product Overview Section (Exact UI)
   ========================================================================== */
.pdetail-overview-section {
    margin-top: 10px;
    margin-bottom: 45px;
    padding-top: 10px;
}

.pov-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
}

.pov-content-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pov-image-col {
    min-width: 0;
    width: 100%;
}

.pov-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0;
    letter-spacing: -0.3px;
}

.pov-title-bar {
    width: 38px;
    height: 3px;
    background: #da0d20;
    border-radius: 2px;
    margin: 8px 0 16px;
}

.pov-desc {
    font-size: 14.5px;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 24px;
}

.pov-features-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.pov-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.pov-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
}

.pov-check-circle {
    color: #da0d20;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Handwritten / Script tilted stamp */
.pov-script-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-9deg);
    flex-shrink: 0;
    margin-right: 15px;
    margin-left: 10px;
    user-select: none;
}

.pov-script-stamp span {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    color: #334155;
    line-height: 1.15;
}

.pov-stamp-w1 {
    font-size: 22px;
}

.pov-stamp-w2 {
    font-size: 24px;
}

.pov-stamp-w3 {
    font-size: 21px;
}

.pov-stamp-underline {
    width: 86px;
    height: 10px;
    margin-top: 4px;
}

/* Right Image Stage with Floating Glass Badge */
.pov-image-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
    background: #f8fafc;
}

.pov-image {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

.pov-glass-card {
    position: absolute;
    top: 22px;
    right: 22px;
    background: rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.6);
    max-width: 255px;
}

.pov-glass-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pov-glass-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.pov-icon-ingredient {
    background: #ffe4e6;
    color: #e11d48;
    border: 1px solid #fecdd3;
}

.pov-icon-science {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fde68a;
}

.pov-icon-trusted {
    background: #e0f2fe;
    color: #0284c7;
    border: 1px solid #bae6fd;
}

.pov-glass-text {
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

/* Responsive */
@media (max-width: 991px) {
    .pdetail-showcase-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pdetail-gallery-row {
        max-width: 380px;
        margin: 0 auto;
    }

    .pdetail-exact-title {
        font-size: 28px;
    }

    .pdetail-trust-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .pdetail-trust-item:nth-child(2)::after {
        display: none;
    }

    .pov-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pov-image-container {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .pdetail-gallery-row {
        flex-direction: column-reverse;
        max-width: 100%;
    }

    .pdetail-vertical-thumbs {
        flex-direction: row;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 8px;
    }

    .pdetail-thumb-box {
        width: 52px;
        height: 52px;
    }

    .pdetail-exact-title {
        font-size: 24px;
    }

    .pdetail-benefits-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
        padding: 8px 0;
    }

    .pdetail-benefit-col {
        padding: 0 2px;
    }

    .pdetail-benefit-col:not(:last-child)::after {
        display: block;
    }

    .pdetail-benefit-icon {
        width: 36px;
        height: 36px;
        font-size: 13px;
        margin-bottom: 4px;
    }

    .pdetail-benefit-name {
        font-size: 10.5px;
        line-height: 1.15;
    }

    .pdetail-benefit-sub {
        font-size: 9.5px;
        line-height: 1.15;
    }

    .pdetail-cta-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .btn-exact-quote,
    .btn-exact-brochure {
        flex: 1;
        width: auto;
        min-width: 0;
        padding: 10px 8px;
        font-size: 12.5px;
        justify-content: center;
        text-align: center;
        border-radius: 8px;
        white-space: nowrap;
        gap: 6px;
    }

    .btn-exact-quote i,
    .btn-exact-brochure i {
        font-size: 12px;
    }

    .pdetail-trust-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 8px;
        padding: 16px 12px;
    }

    .pdetail-trust-item {
        padding: 0;
        gap: 8px;
    }

    .pdetail-trust-item::after {
        display: none !important;
    }

    .pdetail-trust-icon {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    .pdetail-trust-strong {
        font-size: 12px;
    }

    .pdetail-trust-light {
        font-size: 11px;
    }

    .pov-features-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .pov-script-stamp {
        align-self: center;
        margin: 10px 0;
    }

    .pov-glass-card {
        top: 10px;
        right: 10px;
        padding: 8px 10px;
        gap: 6px;
        border-radius: 10px;
        max-width: 190px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    }

    .pov-glass-item {
        gap: 8px;
    }

    .pov-glass-icon {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .pov-glass-text {
        font-size: 10.5px;
        line-height: 1.2;
    }

    .pov-image {
        height: 230px;
    }
}

/* ==========================================================================
   Product Details Specifications & Variations Tabs Section (Exact UI)
   ========================================================================== */
.pdetail-tabs-card {
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 50px;
    overflow: hidden;
}

.pdetail-tab-nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    background: #fafbfc;
    padding: 10px 14px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.ptab-btn {
    background: transparent;
    border: none;
    padding: 11px 22px;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ptab-btn:hover {
    color: #da0d20;
}

.ptab-btn.active {
    background: #da0d20;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(218, 13, 32, 0.2);
}

.ptab-sep {
    height: 18px;
    width: 1px;
    background: #e2e8f0;
    margin: 0 8px;
    flex-shrink: 0;
}

.pdetail-tabs-body {
    padding: 28px 24px;
}

.ptab-content {
    display: none;
}

.ptab-content.active {
    display: block;
    animation: ptabFadeIn 0.25s ease-in-out;
}

@keyframes ptabFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ptab-details-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
    align-items: start;
}

/* Specs Table */
.ptab-specs-table {
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    overflow: hidden;
}

.ptab-spec-row {
    display: grid;
    grid-template-columns: 155px 1fr;
    border-bottom: 1px solid #f1f5f9;
}

.ptab-spec-row:last-child {
    border-bottom: none;
}

.ptab-spec-key {
    background: #f8fafc;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    border-right: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
}

.ptab-spec-val {
    background: #ffffff;
    padding: 12px 16px;
    font-size: 13px;
    color: #334155;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* Variations Column */
.ptab-variations-col,
.ptab-var-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pvar-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.pvar-desc {
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 0;
    line-height: 1.4;
}

.ptab-tab-inner {
    width: 100%;
}

.pvar-heading {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}

.pvar-subheading {
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 18px;
    line-height: 1.4;
}

.pvar-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pvar-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.pvar-img-box {
    width: 88px;
    height: 74px;
    border-radius: 10px;
    overflow: hidden;
    background: #f8fafc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pvar-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pvar-info {
    flex: 1;
}

.pvar-strength {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 6px;
}

.pvar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pvar-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #475569;
    font-weight: 500;
}

.pvar-list li i {
    color: #da0d20;
    font-size: 12px;
    flex-shrink: 0;
}

/* Custom Formulation Callout */
.pvar-custom-callout {
    background: #fff5f5;
    border: 1px solid #ffe4e6;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 4px;
}

.pvar-custom-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid #fecdd3;
    color: #da0d20;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.pvar-custom-text h5 {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.pvar-custom-text p {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.45;
    margin-bottom: 8px;
}

.pvar-custom-link {
    color: #da0d20;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease;
}

.pvar-custom-link:hover {
    gap: 10px;
}

/* ==========================================================================
   Pre-Footer CTA Banner Card (Exact UI)
   ========================================================================== */
.pdetail-cta-banner {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 50px;
    padding: 50px 60px;
    background: linear-gradient(135deg, rgba(6, 40, 23, 0.88) 0%, rgba(10, 61, 34, 0.78) 50%, rgba(6, 40, 23, 0.92) 100%),
        url('assets/cta-banner.webp') right center / cover no-repeat;
    background-blend-mode: overlay, normal;
    box-shadow: 0 14px 40px rgba(6, 40, 23, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 220px;
}

.pcta-content {
    max-width: 500px;
    z-index: 2;
    position: relative;
}

.pcta-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 27px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
    line-height: 1.25;
}

.pcta-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.55;
    margin-bottom: 24px;
}

.pcta-btn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.pcta-btn-quote {
    background: #da0d20;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(218, 13, 32, 0.4);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.pcta-btn-quote:hover {
    background: #b30018;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(218, 13, 32, 0.55);
}

.pcta-btn-team {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pcta-btn-team:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #ffffff;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Floating Wellness Partner badge */
.pcta-wellness-badge {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%) rotate(4deg);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    padding: 18px 30px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 2;
    pointer-events: none;
}

.pcta-wellness-badge span {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 700;
    color: #ffffff;
    font-size: 21px;
    line-height: 1.25;
}

@media (max-width: 991px) {
    .ptab-details-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pdetail-cta-banner {
        padding: 40px 30px;
        background: #062817;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .pcta-wellness-badge {
        right: 24px;
        padding: 12px 18px;
    }

    .pcta-wellness-badge span {
        font-size: 17px;
    }
}

@media (max-width: 640px) {

    /* Tab nav: wrap into 2-per-row grid instead of horizontal scroll */
    .pdetail-tab-nav {
        padding: 8px 8px;
        overflow-x: visible;
        flex-wrap: wrap;
        gap: 6px;
    }

    .ptab-sep {
        display: none;
    }

    .ptab-btn {
        padding: 7px 10px;
        font-size: 11.5px;
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        text-align: center;
        justify-content: center;
        display: flex;
        align-items: center;
        white-space: normal;
        line-height: 1.2;
        /* Visible border on inactive tabs for mobile */
        border: 1.5px solid #e2e8f0;
        background: #ffffff;
        color: #1e293b;
    }

    .ptab-btn:hover {
        border-color: #da0d20;
        color: #da0d20;
        background: #fff5f5;
    }

    .ptab-btn.active {
        border-color: #da0d20;
        background: #da0d20;
        color: #ffffff;
        border: 1.5px solid #da0d20;
    }


    .pdetail-tabs-body {
        padding: 10px 10px;
    }

    .ptab-spec-row {
        grid-template-columns: 115px 1fr;
    }


    .pvar-card {
        flex-direction: row;
    }

    .pvar-img-box {
        width: 72px;
        height: 64px;
    }

    /* Pre-footer CTA banner: super compact on mobile */
    .pdetail-cta-banner {
        padding: 14px 14px 16px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        background: #062817 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 16px !important;
        min-height: unset !important;
        overflow: visible !important;
        gap: 0;
    }

    .pcta-content {
        max-width: 100%;
        position: relative;
        z-index: 1;
    }

    /* Force hide badge — not needed on mobile */
    .pcta-wellness-badge {
        display: none !important;
    }

    .pcta-title {
        font-size: 16px !important;
        font-weight: 800;
        margin-bottom: 4px;
        line-height: 1.25;
    }

    .pcta-subtitle {
        font-size: 12px !important;
        margin-bottom: 12px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.7);
    }

    /* Two equal buttons in one row */
    .pcta-btn-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        gap: 8px;
        align-items: center;
    }

    .pcta-btn-quote,
    .pcta-btn-team {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        justify-content: center !important;
        text-align: center;
        padding: 10px 6px !important;
        font-size: 11.5px !important;
        gap: 4px;
        white-space: nowrap;
        border-radius: 20px !important;
    }
}



/* ==========================================================================
   Extracted from product-details.html inline styles
   ========================================================================== */

/* Logo anchor link — replaces inline flex layout */
.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

/* Icon colour utilities */
.icon-pdf {
    color: #da0d20;
    font-size: 16px;
}

.icon-red {
    color: #da0d20;
    margin-right: 8px;
}

.icon-purple {
    color: #8b5cf6;
    margin-right: 8px;
}

.icon-amber {
    color: #d97706;
    margin-right: 8px;
}

/* Specs table with top spacing — replaces style="margin-top: 16px" */
.ptab-specs-table--top {
    margin-top: 16px;
}

/* Benefits grid — replaces the full inline grid style */
.ptab-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* Benefit description paragraph — replaces inline paragraph style */
.ptab-benefit-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.45;
    margin-top: 6px;
}

/* =========================================================
   PRODUCTS CATALOG (SAME-TO-SAME UI AS DESIGN MOCKUP)
   ========================================================= */

.catalog-section {
    background-color: #f7f9fa;
    padding: 35px 4% 80px;
    font-family: var(--font-sans);
}

.catalog-container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

/* --- Left Sidebar: Filter Box --- */
.catalog-sidebar {
    width: 270px;
    flex-shrink: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
    align-self: flex-start;
    z-index: 20;
}

.filter-box {
    background: #ffffff;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: none;
}

.filter-box::-webkit-scrollbar {
    display: none;
}

.filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f3f5;
    margin-bottom: 18px;
}

.filter-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    font-family: var(--font-sans);
    margin: 0;
}

.filter-icon {
    color: #64748b;
}

.filter-group {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 16px;
    padding-bottom: 0;
}

.filter-group-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.filter-option {
    display: flex;
    align-items: center;
    font-size: 0.84rem;
    color: #475569;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    position: relative;
}

.filter-option:hover {
    color: #0f172a;
}

.filter-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.custom-checkbox {
    width: 17px;
    height: 17px;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: #ffffff;
}

.filter-option input[type="checkbox"]:checked~.custom-checkbox {
    background-color: var(--accent-red);
    border-color: var(--accent-red);
}

.filter-option input[type="checkbox"]:checked~.custom-checkbox::after {
    content: '';
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-0.5px, -0.5px);
}

.option-text {
    flex: 1;
}

.option-count {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-left: 6px;
}

.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.btn-apply-filters {
    width: 100%;
    padding: 12px;
    background: var(--accent-red);
    color: #ffffff;
    border: none;
    border-radius: 9px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    box-shadow: none;
}

.btn-apply-filters:hover {
    background: #b30018;
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-reset-filters {
    width: 100%;
    padding: 8px;
    background: transparent;
    color: #64748b;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-reset-filters:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
    background: #fff5f5;
}

.filter-help-card {
    margin-top: 20px;
    background: #fff8f8;
    border: 1px solid #fde2e4;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.help-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-red);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.help-info h5,
.help-info h4 {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2e1d13;
    margin-bottom: 4px;
}

.help-info p {
    font-size: 0.76rem;
    color: #6f594b;
    line-height: 1.35;
    margin-bottom: 8px;
}

.help-contact-link {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: none;
}

.help-contact-link:hover {
    text-decoration: underline;
}

/* --- Right Main Area --- */
.catalog-main {
    flex: 1;
    min-width: 0;
}

/* Promo Banner Slider (Compact & User-Friendly UI) */
.catalog-promo-slider {
    position: relative;
    border-radius: 14px;
    margin-bottom: 22px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    background: #f8fafc;
    border: 1px solid rgba(0, 0, 0, 0.06);
    height: 235px;
}

.promo-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    height: 100%;
}

.promo-slide {
    min-width: 100%;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.promo-banner-img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 14px;
    object-fit: cover;
    object-position: center 30%;
}

.promo-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
    z-index: 5;
    opacity: 0.85;
}

.catalog-promo-slider:hover .promo-slider-arrow {
    opacity: 1;
}

.promo-slider-arrow:hover {
    background: #ffffff;
    color: var(--accent-red);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.promo-slider-arrow.prev {
    left: 12px;
}

.promo-slider-arrow.next {
    right: 12px;
}

.promo-slider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 5;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4px 10px;
    border-radius: 20px;
}

.promo-slider-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.65);
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.25s ease;
}

.promo-slider-dot:hover {
    background: #ffffff;
}

.promo-slider-dot.active {
    width: 22px;
    border-radius: 10px;
    background: var(--accent-red);
}

@media (max-width: 991px) {
    .catalog-promo-slider {
        height: 195px;
        margin-bottom: 20px;
    }
}

@media (max-width: 640px) {
    .catalog-promo-slider {
        height: 145px;
        border-radius: 12px;
        margin-bottom: 16px;
    }

    .promo-banner-img {
        border-radius: 12px;
    }

    .promo-slider-arrow {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .promo-slider-arrow.prev {
        left: 8px;
    }

    .promo-slider-arrow.next {
        right: 8px;
    }

    .promo-slider-dots {
        bottom: 8px;
        padding: 3px 8px;
        gap: 5px;
    }

    .promo-slider-dot {
        width: 6px;
        height: 6px;
    }

    .promo-slider-dot.active {
        width: 16px;
    }
}

/* --- Toolbar --- */
.catalog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: #ffffff;
    border: 1px solid #eef1f4;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 24px;
}

.toolbar-search-box {
    flex: 1;
    max-width: 480px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 8px 16px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.toolbar-search-box:focus-within {
    background: #ffffff;
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px rgba(218, 13, 32, 0.08);
}

.toolbar-search-box i {
    color: #94a3b8;
    font-size: 14px;
}

.toolbar-search-box input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 0.86rem;
    color: #1e293b;
    font-family: var(--font-sans);
}

.toolbar-search-box input::placeholder {
    color: #94a3b8;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sort-label {
    font-size: 0.84rem;
    color: #64748b;
    font-weight: 500;
}

/* Custom Dropdown UI Matching Website Standards */
.custom-dropdown {
    position: relative;
    user-select: none;
}

.custom-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    padding: 7px 14px;
    font-size: 0.86rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.2s ease;
    box-shadow: none;
}

.custom-dropdown-trigger:hover {
    border-color: #cbd5e1;
    background: #fdfdfd;
}

.custom-dropdown.open .custom-dropdown-trigger {
    border-color: var(--accent-red);
    box-shadow: none;
    background: #ffffff;
}

.custom-dropdown-chevron {
    color: #64748b;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    flex-shrink: 0;
}

.custom-dropdown.open .custom-dropdown-chevron {
    transform: rotate(180deg);
    color: var(--accent-red);
}

.custom-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 175px;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1), 0 4px 10px rgba(0, 0, 0, 0.03);
    z-index: 100;
}

.custom-dropdown.open .custom-dropdown-menu {
    display: block;
    animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.18s ease;
}

.custom-dropdown-item:hover {
    background: #fff5f5;
    color: var(--accent-red);
}

.custom-dropdown-item.active {
    background: #fff1f2;
    color: var(--accent-red);
    font-weight: 700;
}

.custom-dropdown-item .item-check-icon {
    color: var(--accent-red);
    opacity: 0;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.custom-dropdown-item.active .item-check-icon {
    opacity: 1;
}

.view-mode-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mode-btn {
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    color: var(--accent-red);
    border-color: #fecdd3;
}

.mode-btn.active {
    background: #fff1f2;
    border-color: #fecdd3;
    color: var(--accent-red);
}

/* --- Product Cards Grid (4 Columns as in Mockup) --- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.catalog-grid.list-view {
    grid-template-columns: 1fr;
}

/* Card Style */
.product-card-v2 {
    background: #ffffff;
    border: 1px solid #dbe2ea;
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.product-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}



.card-img-link {
    display: block;
    text-align: center;
    padding: 8px 0 12px;
    position: relative;
}

.card-product-img {
    height: 155px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.05));
    transition: transform 0.3s ease;
}

.product-card-v2:hover .card-product-img {
    transform: scale(1.04);
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card-title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 6px 0;
    min-height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-title a {
    color: #1e293b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-title a:hover {
    color: var(--accent-red);
}

.card-desc {
    font-size: 0.77rem;
    color: #64748b;
    line-height: 1.45;
    margin-bottom: 14px;
    min-height: 34px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Brand Red "View Details ->" Button matching website theme */
.card-view-btn {
    margin-top: auto;
    display: block;
    width: 100%;
    padding: 9.5px 14px;
    background: #fff5f5;
    color: var(--accent-red);
    border: 1px solid #fecdd3;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: all 0.22s ease;
}

.card-view-btn .arrow {
    margin-left: 4px;
    transition: transform 0.2s ease;
    display: inline-block;
}

.card-view-btn:hover {
    background: var(--accent-red);
    color: #ffffff;
    border-color: var(--accent-red);
    box-shadow: none;
}

.card-view-btn:hover .arrow {
    transform: translateX(4px);
}

/* List view mode support */
.catalog-grid.list-view .product-card-v2 {
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
}


.catalog-grid.list-view .card-img-link {
    width: 140px;
    flex-shrink: 0;
    padding: 0;
}

.catalog-grid.list-view .card-product-img {
    height: 130px;
}

.catalog-grid.list-view .card-body {
    flex: 1;
}

.catalog-grid.list-view .card-view-btn {
    width: auto;
    display: inline-block;
    padding: 9px 24px;
    align-self: flex-start;
}

/* Empty state */
.catalog-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 14px;
    border: 1px dashed #cbd5e1;
}

.catalog-empty-state i {
    font-size: 40px;
    color: #94a3b8;
    margin-bottom: 14px;
}

.catalog-empty-state h4 {
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 6px;
}

.catalog-empty-state p {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 16px;
}

/* Catalog Pagination Styling */
.catalog-pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #eef0f3;
}

.pagination-info {
    font-size: 0.86rem;
    color: #64748b;
    font-weight: 500;
}

.pagination-info span {
    font-weight: 700;
    color: #1e293b;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn {
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #1e293b;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    background: #fff5f5;
    border-color: #fecdd3;
    color: var(--accent-red);
}

.pagination-btn.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #ffffff;
    font-weight: 700;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.pagination-ellipsis {
    font-size: 0.95rem;
    color: #94a3b8;
    padding: 0 4px;
}

/* Responsive Media Queries */
@media (max-width: 1280px) {
    .catalog-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 950px) {
    .catalog-container {
        flex-direction: column;
    }

    .catalog-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .filter-box {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    .catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-actions {
        justify-content: space-between;
    }

    .catalog-pagination-wrap {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* =========================================================
   BLOG PAGE STYLES (SAME-TO-SAME UI AS DESIGN MOCKUP)
   ========================================================= */

.blog-page-container {
    max-width: 1340px;
    margin: 40px auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
    font-family: var(--font-sans);
}

.blog-main-content {
    display: flex;
    flex-direction: column;
    gap: 42px;
    min-width: 0;
}

/* 1. FEATURED ARTICLE HERO CARD */
.featured-article-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-article-card:hover {
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08);
}

.featured-content {
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.featured-badge {
    background: var(--accent-red);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 14px;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 18px;
}

.featured-category {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1e3a5f;
    letter-spacing: 0.6px;
    margin-bottom: 10px;
}

.featured-title {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.3px;
}

.featured-excerpt {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 28px;
}

.featured-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    margin-top: auto;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.author-meta {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.post-meta-details {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
}

.featured-cta-btn {
    background-color: var(--accent-red);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 9999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.25s ease, transform 0.2s ease;
    white-space: nowrap;
}

.featured-cta-btn:hover {
    background-color: #b30018;
    transform: translateY(-1px);
}

.featured-cta-btn svg {
    transition: transform 0.25s ease;
}

.featured-cta-btn:hover svg {
    transform: translateX(3px);
}

.featured-media {
    position: relative;
    height: 100%;
    min-height: 320px;
    overflow: hidden;
    background: #0f172a;
}

.featured-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    display: block;
    transition: transform 0.5s ease;
}

.featured-article-card:hover .featured-img {
    transform: scale(1.03);
}

.featured-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.1) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 28px;
    pointer-events: none;
}

.featured-overlay-pillars {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.75;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.featured-overlay-line {
    width: 36px;
    height: 2.5px;
    background: var(--accent-red);
    margin-top: 10px;
    border-radius: 2px;
}

/* 2. LATEST ARTICLES SECTION */
.latest-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.latest-articles-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.view-all-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent-red);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s ease, color 0.2s ease;
}

.view-all-link:hover {
    color: #b30018;
    gap: 9px;
}

/* Articles Grid: 4 cards per row */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 24px;
}

.blog-pagination-wrap {
    width: 100%;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #eef2f6;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Article Card Common Styling (No desc, author, date, reading time) */
.blog-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    border-color: #cbd5e1;
}

.blog-card-media {
    position: relative;
    width: 100%;
    height: 155px;
    overflow: hidden;
    background: #f1f5f9;
}

.blog-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.05);
}

.blog-card-body {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-category {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #1e3a5f;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.blog-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 0;
    transition: color 0.2s ease;
}

.blog-card:hover .blog-card-title,
.blog-card-title a:hover {
    color: var(--accent-red);
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* 3. SIDEBAR STYLING */
.blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
    align-self: start;
}

.blog-widget {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    padding: 24px;
}

.widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 18px;
    letter-spacing: -0.2px;
}

/* Blog Categories Widget */
.category-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #334155;
    font-size: 13.5px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
}

.category-item-link:hover,
.category-item-link.active {
    background-color: #f8fafc;
    color: var(--accent-red);
}

.category-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.category-icon {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    color: #64748b;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.category-item-link:hover .category-icon,
.category-item-link.active .category-icon {
    color: var(--accent-red);
}

.category-count {
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 500;
}

/* Recent Posts Widget */
.recent-posts-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.recent-post-item {
    display: flex;
    gap: 14px;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.recent-post-item:hover {
    transform: translateX(3px);
}

.recent-post-thumb {
    width: 68px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

.recent-post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.recent-post-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recent-post-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.recent-post-item:hover .recent-post-title {
    color: var(--accent-red);
}

.recent-post-date {
    font-size: 11.5px;
    color: #94a3b8;
}

/* Stay Updated Newsletter Widget */
.stay-updated-widget {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    padding: 24px;
}

.stay-updated-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.stay-updated-icon {
    width: 22px;
    height: 22px;
    color: var(--accent-red);
    flex-shrink: 0;
}

.stay-updated-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.stay-updated-desc {
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 18px;
}

.stay-updated-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.stay-updated-input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 13.5px;
    font-family: var(--font-sans);
    outline: none;
    background: #ffffff;
    color: #0f172a;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stay-updated-input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px rgba(218, 13, 32, 0.1);
}

.stay-updated-btn {
    width: 100%;
    background-color: var(--accent-red);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.stay-updated-btn svg {
    transition: transform 0.2s ease;
}

.stay-updated-btn:hover {
    background-color: #b30018;
    transform: translateY(-1px);
}

.stay-updated-btn:hover svg {
    transform: translateX(3px);
}

.stay-updated-privacy {
    text-align: center;
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: 12px;
    line-height: 1.4;
}

.newsletter-success {
    display: none;
    background: #ecfdf5;
    color: #065f46;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    border: 1px solid #a7f3d0;
}

/* RESPONSIVE DESIGN FOR BLOG PAGE */
@media (max-width: 1200px) {
    .blog-page-container {
        grid-template-columns: 1fr;
    }

    .articles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .featured-article-card {
        grid-template-columns: 1fr;
    }

    .featured-media {
        min-height: 240px;
        order: -1;
    }

    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .blog-page-container {
        padding: 0 16px;
        margin: 24px auto 60px;
    }

    .featured-content {
        padding: 24px 20px;
    }

    .featured-title {
        font-size: 22px;
    }

    .featured-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .featured-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   EXACT BLOG DETAILS PAGE STYLES (SAME-TO-SAME UI MOCKUP)
   ========================================================= */

.bdetail-section,
.bdetail-section * {
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.bdetail-section {
    padding: 50px 0 80px;
    background-color: #ffffff;
}

.bdetail-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
}

/* --- Left Column: Main Article --- */
.bdetail-main {
    min-width: 0;
}

.bdetail-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.bdetail-badge {
    display: inline-block;
    background-color: #fee2e2;
    color: var(--accent-red);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 14px;
    border-radius: 20px;
}

.bdetail-meta-info {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #64748b;
    font-size: 13px;
}

.bdetail-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bdetail-meta-item svg {
    color: #64748b;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.bdetail-title {
    font-size: 34px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 14px;
    letter-spacing: -0.4px;
}

.bdetail-lead {
    font-size: 15px;
    color: #475569;
    line-height: 1.65;
    margin-bottom: 24px;
}

/* Featured Hero Image with handwritten stamp */
.bdetail-media-wrap {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 36px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    background: #0f172a;
}

.bdetail-media-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
}

.bdetail-stamp {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    text-align: right;
    pointer-events: none;
}

.bdetail-stamp-text {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-style: normal;
    font-size: 20px;
    line-height: 1.25;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    letter-spacing: -0.3px;
}

.bdetail-stamp-swoosh {
    width: 90px;
    height: 4px;
    background: var(--accent-red);
    border-radius: 3px;
    margin-top: 8px;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* Headings with Red Underline Accent */
.bdetail-section-title {
    font-size: 21px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin: 32px 0 10px;
    position: relative;
    display: inline-block;
}

.bdetail-red-bar {
    width: 36px;
    height: 3px;
    background: var(--accent-red);
    border-radius: 2px;
    margin-bottom: 14px;
}

.bdetail-para {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.7;
}

/* Quote Callout */
.bdetail-quote-box {
    background: #fff1f2;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 28px 0;
    display: flex;
    align-items: center;
    gap: 16px;
    border-left: 4px solid var(--accent-red);
}

.bdetail-quote-icon {
    width: 28px;
    height: 28px;
    color: var(--accent-red);
    flex-shrink: 0;
}

.bdetail-quote-text {
    font-size: 15.5px;
    font-weight: 600;
    font-style: italic;
    color: #0f172a;
    line-height: 1.5;
}

/* 4-Pillars Standards Grid */
.bdetail-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0 32px;
}

.bdetail-pillar-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bdetail-pillar-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    border-color: #e2e8f0;
}

.bdetail-pillar-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #fee2e2;
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.bdetail-pillar-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 5px;
}

.bdetail-pillar-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.45;
}

/* Subheadings within blog sections */
.bdetail-subheading {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin: 24px 0 10px;
}

/* Styled Lists for Articles */
.bdetail-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bdetail-list-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    color: #475569;
    line-height: 1.65;
}

.bdetail-list-bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-red, #da0d20);
    margin-top: 8px;
    flex-shrink: 0;
}

.bdetail-check-icon {
    width: 17px;
    height: 17px;
    color: var(--accent-red, #da0d20);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Checklist Cards Grid & Box */
.bdetail-checklist-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 24px 0 32px;
}

@media (max-width: 680px) {
    .bdetail-checklist-grid {
        grid-template-columns: 1fr;
    }
}

.bdetail-checklist-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.2s ease;
}

.bdetail-checklist-card:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.bdetail-checklist-head {
    font-size: 14px;
    font-weight: 700;
    color: var(--accent-red, #da0d20);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bdetail-checklist-head svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    color: var(--accent-red, #da0d20);
    display: inline-block;
}

.bdetail-checklist-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bdetail-checklist-item {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.bdetail-checklist-item svg,
.bdetail-list-item svg,
.bdetail-check-icon {
    width: 15px;
    height: 15px;
    max-width: 15px;
    max-height: 15px;
    color: var(--accent-red, #da0d20);
    margin-top: 3px;
    flex-shrink: 0;
}

/* Expert Guidance Callout Box */
.bdetail-expert-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #ffffff;
    border-radius: 16px;
    padding: 28px 32px;
    margin: 36px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    border-left: 5px solid var(--accent-red, #da0d20);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.bdetail-expert-info {
    flex: 1 1 360px;
}

.bdetail-expert-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
}

.bdetail-expert-text {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

.bdetail-expert-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--accent-red, #da0d20);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: 25px;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.bdetail-expert-btn:hover {
    background-color: #b50919;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(218, 13, 32, 0.35);
}

/* FAQ Accordion / Cards */
.bdetail-faq-wrap {
    margin: 20px 0 36px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bdetail-faq-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px 22px;
    transition: all 0.2s ease;
}

.bdetail-faq-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}

.bdetail-faq-question {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

.bdetail-faq-q-tag {
    color: var(--accent-red, #da0d20);
    font-weight: 800;
    flex-shrink: 0;
}

.bdetail-faq-answer {
    font-size: 14px;
    color: #475569;
    line-height: 1.65;
    margin: 0;
    padding-left: 24px;
}

/* Share Footer */
.bdetail-share-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}

.bdetail-share-label {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.bdetail-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.bdetail-share-btn:hover {
    background: var(--accent-red);
    transform: translateY(-2px);
}

.bdetail-share-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* --- Right Column: Sidebar --- */
.bdetail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: -webkit-sticky;
    position: sticky;
    top: 24px;
    align-self: start;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
    padding: 2px;
}

.bdetail-sidebar::-webkit-scrollbar {
    width: 4px;
}

.bdetail-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.bdetail-sidebar::-webkit-scrollbar-thumb {
    background-color: #e2e8f0;
    border-radius: 4px;
}

.bdetail-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #cbd5e1;
}

/* Search Box */
.bdetail-search-wrap {
    position: relative;
    width: 100%;
}

.bdetail-search-input {
    width: 100%;
    padding: 12px 42px 12px 16px;
    border-radius: 25px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 13.5px;
    font-family: var(--font-sans);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bdetail-search-input:focus {
    border-color: var(--accent-red);
    box-shadow: 0 0 0 3px rgba(218, 13, 32, 0.08);
}

.bdetail-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #64748b;
    pointer-events: none;
}

/* Sidebar Widgets */
.bdetail-widget {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
    padding: 24px;
}

.bdetail-widget-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 18px;
}

/* Categories List */
.bdetail-cat-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bdetail-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: #475569;
    font-size: 13.5px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.bdetail-cat-item:hover {
    background-color: #f8fafc;
    color: var(--accent-red);
}

.bdetail-cat-item.active {
    background-color: #fee2e2;
    color: var(--accent-red);
    font-weight: 600;
}

.bdetail-cat-count {
    font-size: 12.5px;
    color: #94a3b8;
    font-weight: 500;
}

.bdetail-cat-item.active .bdetail-cat-count {
    color: var(--accent-red);
}

/* Recent Articles List */
.bdetail-recent-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bdetail-recent-card {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.bdetail-recent-card:hover {
    transform: translateX(3px);
}

.bdetail-recent-thumb {
    width: 64px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
}

.bdetail-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bdetail-recent-info {
    display: flex;
    flex-direction: column;
}

.bdetail-recent-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.bdetail-recent-card:hover .bdetail-recent-title {
    color: var(--accent-red);
}

.bdetail-recent-date {
    font-size: 11.5px;
    color: #94a3b8;
}

/* Questions / Capabilities CTA Card */
.bdetail-cta-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 32px 24px;
    background: #f1f5f9;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
    flex-shrink: 0;
}

.bdetail-cta-bg {
    position: absolute;
    inset: 0;
    background: url('assets/cta-banner.webp') no-repeat right center / cover;
    opacity: 0.25;
    pointer-events: none;
}

.bdetail-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f1f5f9 50%, rgba(241, 245, 249, 0.6) 100%);
    pointer-events: none;
}

.bdetail-cta-content {
    position: relative;
    z-index: 2;
}

.bdetail-cta-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 18px;
}

.bdetail-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--accent-red);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 25px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.bdetail-cta-btn:hover {
    background-color: #b30018;
    transform: translateY(-1px);
}

/* Responsive Rules for Blog Details */
@media (max-width: 1050px) {
    .bdetail-container {
        grid-template-columns: 1fr;
    }

    .bdetail-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        padding: 0;
    }

    .bdetail-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bdetail-title {
        font-size: 25px;
    }

    .bdetail-media-wrap {
        height: 240px;
    }

    .bdetail-stamp-text {
        font-size: 18px;
    }

    .bdetail-pillars-grid {
        grid-template-columns: 1fr;
    }

    .bdetail-quote-box {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* Inner Hero Banner for Blog Details */
.blog-detail-hero {
    position: relative;
    padding: 70px 5% 55px;
    background: #0f172a;
    overflow: hidden;
    color: #ffffff;
}

.blog-detail-hero-bg {
    position: absolute;
    inset: 0;
    background: url('assets/inner-hero.webp') no-repeat center bottom / cover;
    opacity: 0.28;
    filter: blur(1px);
}

.blog-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.95) 100%);
}

.blog-detail-hero-content {
    position: relative;
    z-index: 2;
    max-width: 960px;
    margin: 0 auto;
    text-align: left;
}

.blog-detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.blog-detail-breadcrumb a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-detail-breadcrumb a:hover {
    color: #ffffff;
}

.blog-detail-breadcrumb .bc-sep {
    color: #64748b;
}

.blog-detail-breadcrumb .bc-current {
    color: var(--accent-red);
    font-weight: 500;
}

.blog-detail-category-badge {
    display: inline-block;
    background-color: var(--accent-red);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}

.blog-detail-hero-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.25;
    color: #ffffff;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
}

.blog-detail-meta-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.blog-detail-author-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blog-detail-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.blog-detail-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
}

.blog-detail-author-role {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.blog-detail-meta-items {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #cbd5e1;
}

.blog-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-detail-meta-item svg {
    color: var(--accent-red);
}

/* Blog Detail Layout Container */
.blog-detail-container {
    max-width: 1340px;
    margin: 40px auto 80px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 36px;
    align-items: start;
    font-family: var(--font-sans);
}

/* Main Article Content Card */
.blog-detail-article {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04);
    padding: 40px 44px;
    overflow: hidden;
}

.blog-detail-main-img-wrap {
    width: 100%;
    max-height: 440px;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 36px;
    background: #f1f5f9;
}

.blog-detail-main-img {
    width: 100%;
    height: 100%;
    max-height: 440px;
    object-fit: cover;
    display: block;
}

.blog-detail-body {
    color: #334155;
    font-size: 16px;
    line-height: 1.8;
}

.blog-detail-lead {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.7;
    color: #0f172a;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid #f1f5f9;
}

.blog-detail-body h2 {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 36px 0 16px;
    line-height: 1.35;
    letter-spacing: -0.3px;
}

.blog-detail-body h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin: 28px 0 14px;
    line-height: 1.4;
}

.blog-detail-body p {
    margin-bottom: 22px;
}

.blog-detail-body ul,
.blog-detail-body ol {
    margin: 0 0 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-detail-body li {
    line-height: 1.7;
}

/* Quote Callout */
.blog-detail-quote {
    margin: 32px 0;
    padding: 24px 28px;
    background: #f8fafc;
    border-left: 4px solid var(--accent-red);
    border-radius: 0 12px 12px 0;
}

.blog-detail-quote p {
    font-size: 17px;
    font-style: italic;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.6;
}

.blog-detail-quote cite {
    font-size: 13.5px;
    color: #64748b;
    font-style: normal;
    font-weight: 600;
}

/* Highlight Takeaways Box */
.blog-highlight-box {
    background: #fafafa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 32px 0;
}

.blog-highlight-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-highlight-title svg {
    color: var(--accent-red);
}

.blog-highlight-box ul {
    margin: 0 0 0 20px;
    gap: 8px;
}

/* Inline 2-Image Grid */
.blog-inline-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 32px 0;
}

.blog-inline-img-card {
    border-radius: 12px;
    overflow: hidden;
    background: #f1f5f9;
}

.blog-inline-img-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.blog-inline-img-card:hover img {
    transform: scale(1.03);
}

.blog-inline-caption {
    font-size: 12.5px;
    color: #64748b;
    padding: 10px 14px;
    background: #f8fafc;
    text-align: center;
}

/* Article Tags & Social Share Footer */
.blog-detail-footer {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.blog-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.blog-tag {
    background: #f1f5f9;
    color: #334155;
    font-size: 12.5px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-tag:hover {
    background: var(--accent-red);
    color: #ffffff;
}

.blog-share {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-share-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
}

.share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #334155;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.share-btn:hover {
    background: var(--accent-red);
    color: #ffffff;
    transform: translateY(-2px);
}

.share-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Author Biography Box */
.blog-author-bio-card {
    margin-top: 36px;
    padding: 28px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.blog-author-bio-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.blog-author-bio-details {
    flex: 1;
}

.blog-author-bio-name {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.blog-author-bio-role {
    font-size: 13px;
    color: var(--accent-red);
    font-weight: 600;
    margin-bottom: 10px;
}

.blog-author-bio-text {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
}

/* Post Navigation (Prev / Next) */
.blog-post-nav {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.post-nav-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: all 0.25s ease;
}

.post-nav-card:hover {
    border-color: var(--accent-red);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.post-nav-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-nav-card.next .post-nav-label {
    align-self: flex-end;
}

.post-nav-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.post-nav-card:hover .post-nav-title {
    color: var(--accent-red);
}

.post-nav-card.next {
    text-align: right;
}

/* Need Consultation CTA Box (Sidebar) */
.blog-cta-widget {
    background: linear-gradient(135deg, #114227 0%, #1e3c2c 100%);
    border-radius: 16px;
    padding: 28px 24px;
    color: #ffffff;
    text-align: center;
}

.blog-cta-widget h4 {
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}

.blog-cta-widget p {
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.5;
    margin-bottom: 20px;
}

.blog-cta-widget .btn-primary {
    width: 100%;
    justify-content: center;
}

/* Responsive Styles for Blog Details */
@media (max-width: 1100px) {
    .blog-detail-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .blog-detail-hero {
        padding: 50px 5% 40px;
    }

    .blog-detail-hero-title {
        font-size: 26px;
    }

    .blog-detail-article {
        padding: 24px 20px;
    }

    .blog-detail-body {
        font-size: 15px;
    }

    .blog-inline-images {
        grid-template-columns: 1fr;
    }

    .blog-author-bio-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .blog-post-nav {
        grid-template-columns: 1fr;
    }

    .post-nav-card.next {
        text-align: left;
    }

    .post-nav-card.next .post-nav-label {
        align-self: flex-start;
    }
}

/* =========================================================
   FAQ PAGE EXCLUSIVE STYLES
   ========================================================= */
.faq-hero-section {
    background: #ffffff;
    padding: 20px 0 16px 0;
    border-bottom: 1px solid #f1f5f9;
    font-family: var(--font-sans);
}

.faq-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
}

.faq-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 14px;
}

.faq-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s ease;
}

.faq-breadcrumb a:hover {
    color: var(--accent-red);
}

.faq-breadcrumb .sep {
    color: #94a3b8;
    font-size: 12px;
}

.faq-breadcrumb .active {
    color: #0f172a;
    font-weight: 700;
}

.faq-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 44px;
}

.faq-hero-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.faq-hero-badge {
    display: inline-block;
    background: rgba(218, 13, 32, 0.08);
    color: var(--accent-red);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 9999px;
    margin-bottom: 8px;
}

.faq-hero-title {
    font-size: 30px;
    font-weight: 800;
    color: #0a192f;
    line-height: 1.25;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

.faq-hero-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.55;
    margin: 0;
    max-width: 600px;
}

.faq-hero-right {
    width: 100%;
}

.faq-hero-card {
    position: relative;
    width: 100%;
    height: 290px;
    border-radius: 22px;
    overflow: hidden;
    background: #f8fafc;
}

.faq-hero-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

/* Handwritten Stamp Overlay */
.faq-hero-stamp {
    position: absolute;
    top: 24px;
    left: 28px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none;
    user-select: none;
}

.faq-hero-stamp .stamp-text {
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: #0a192f;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.85);
}

.faq-hero-stamp .stamp-swoosh {
    width: 90px;
    height: 10px;
    margin-top: 4px;
    margin-left: 2px;
}

/* =========================================================
   FAQ INTERFACE & SEARCH (Matches Reference UI)
   ========================================================= */
.faq-page-container {
    max-width: 1400px;
    margin: 18px auto 70px;
    padding: 0 32px;
}

/* Search Bar */
.faq-search-wrapper {
    margin-bottom: 20px;
}

.faq-search-form {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 6px 8px 6px 22px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
    transition: all 0.25s ease;
}

.faq-search-form:focus-within {
    border-color: #cbd5e1;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.faq-search-icon-left {
    width: 20px;
    height: 20px;
    color: #94a3b8;
    margin-right: 12px;
    flex-shrink: 0;
}

.faq-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #0f172a;
    background: transparent;
    font-family: inherit;
}

.faq-search-input::placeholder {
    color: #94a3b8;
    font-size: 14.5px;
}

.faq-search-btn {
    background: var(--accent-red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: none;
}

.faq-search-btn:hover {
    background: #b8091a;
    box-shadow: none;
}

/* Category Filter Tabs - Premium Brand Styling */
.faq-category-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}

.faq-tab-btn {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 8px 18px;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: none;
    letter-spacing: -0.1px;
}

.faq-tab-btn:hover:not(.active) {
    background: #ffffff;
    color: var(--accent-red);
    border-color: rgba(218, 13, 32, 0.35);
    box-shadow: none;
}

.faq-tab-btn.active {
    background: var(--accent-red);
    color: #ffffff;
    border-color: var(--accent-red);
    font-weight: 600;
    box-shadow: none;
}

.faq-tab-btn.active:hover {
    background: #b8091a;
    border-color: #b8091a;
    color: #ffffff;
    box-shadow: none;
}

/* Main 2-Column Grid */
.faq-grid-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 40px;
    align-items: start;
}

/* Left Column */
.faq-main-col {
    min-width: 0;
}

.faq-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 6px;
}

.faq-section-title-wrap {
    position: relative;
}

.faq-section-title {
    font-size: 21px;
    font-weight: 800;
    color: #0a192f;
    margin: 0;
    line-height: 1.2;
}

.faq-title-underline {
    width: 44px;
    height: 3px;
    background: var(--accent-red);
    border-radius: 2px;
    margin-top: 6px;
}

.faq-count-text {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Accordion Items - Sleek, Compact Size */
.faq-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.faq-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.faq-item.active {
    background: #fffbfa;
    border-color: rgba(218, 13, 32, 0.2);
}

.faq-header {
    width: 100%;
    padding: 13px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.faq-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.faq-state-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.faq-item.active .faq-state-icon {
    background: rgba(218, 13, 32, 0.1);
    color: var(--accent-red);
}

.faq-state-icon svg {
    width: 11px;
    height: 11px;
}

.faq-icon-minus {
    display: none;
}

.faq-item.active .faq-icon-minus {
    display: block;
}

.faq-item.active .faq-icon-plus {
    display: none;
}

.faq-question-text {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
}

.faq-chevron {
    width: 15px;
    height: 15px;
    color: #64748b;
    flex-shrink: 0;
    transition: transform 0.25s ease, color 0.2s ease;
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg);
    color: #0f172a;
}

.faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-body-content {
    padding: 0 16px 14px 48px;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
}

.faq-body-content p {
    margin: 0 0 8px;
}

.faq-body-content p:last-child {
    margin-bottom: 0;
}

.faq-body-content ul {
    margin: 6px 0 10px 18px;
    padding: 0;
}

.faq-body-content li {
    margin-bottom: 5px;
}

.faq-no-results {
    display: none;
    text-align: center;
    padding: 40px 20px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    margin-bottom: 30px;
}

.faq-no-results h4,
.faq-no-results .faq-no-results-title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.faq-no-results p {
    font-size: 13.5px;
    color: #64748b;
    margin: 0;
}

/* Right Column - Sidebar Cards */
.faq-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.faq-sidebar-card {
    border-radius: 14px;
    padding: 22px;
    transition: box-shadow 0.2s ease;
}

/* Card 1: Still have questions */
.faq-card-support {
    background: #fffbfa;
    border: 1px solid rgba(218, 13, 32, 0.2);
}

.faq-support-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(218, 13, 32, 0.1);
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.faq-support-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px;
    line-height: 1.3;
}

.faq-support-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin: 0 0 16px;
}

.faq-btn-pill-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent-red);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 9999px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: none;
}

.faq-btn-pill-primary:hover {
    background: #b8091a;
    box-shadow: none;
}

/* Card 2: Talk to Our Team */
.faq-card-contact {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
}

.faq-card-heading {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 16px;
}

.faq-contact-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.faq-contact-row:hover .faq-contact-val {
    color: var(--accent-red);
}

.faq-contact-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(218, 13, 32, 0.1);
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.faq-contact-icon-wrap svg {
    width: 15px;
    height: 15px;
}

.faq-contact-info {
    display: flex;
    flex-direction: column;
}

.faq-contact-val {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.2s ease;
    line-height: 1.3;
}

.faq-contact-sub {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.faq-contact-address {
    font-size: 13px;
    color: #475569;
    line-height: 1.45;
}

/* Card 3: Related Resources */
.faq-card-resources {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
}

.faq-resources-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.faq-resource-item {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.faq-resource-item:hover .faq-resource-title {
    color: var(--accent-red);
}

.faq-resource-thumb {
    width: 60px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
}

.faq-resource-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.faq-resource-title {
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    margin: 0;
    transition: color 0.2s ease;
}

.faq-resource-date {
    font-size: 12px;
    color: #94a3b8;
}

.faq-resources-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.faq-resources-link:hover {
    gap: 10px;
}

/* Card 4: Need a Custom Solution */
.faq-card-solution {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.03);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
}

.faq-solution-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(218, 13, 32, 0.1);
    color: var(--accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-solution-icon-wrap svg {
    width: 18px;
    height: 18px;
}

.faq-solution-body {
    display: flex;
    flex-direction: column;
}

.faq-solution-title {
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 3px;
}

.faq-solution-desc {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.45;
    margin: 0 0 8px;
}

.faq-solution-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-red);
    text-decoration: none;
    transition: gap 0.2s ease;
}

.faq-solution-link:hover {
    gap: 8px;
}

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

    .faq-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .faq-hero-card {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .faq-page-container {
        padding: 0 16px;
        margin: 20px auto 50px;
    }

    .faq-search-form {
        padding: 5px 6px 5px 14px;
    }

    .faq-search-btn {
        padding: 8px 18px;
        font-size: 13px;
    }

    .faq-category-tabs {
        gap: 6px;
        margin-bottom: 20px;
    }

    .faq-tab-btn {
        padding: 6px 14px;
        font-size: 12px;
    }

    .faq-header {
        padding: 9px 12px;
    }

    .faq-question-text {
        font-size: 13px;
    }

    .faq-body-content {
        padding: 0 12px 12px 38px;
        font-size: 13px;
    }

    .faq-hero-section {
        padding: 20px 0 18px 0;
    }

    .faq-hero-container {
        padding: 0 16px;
    }

    .faq-hero-title {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .faq-hero-title {
        font-size: 22px;
    }

    .faq-hero-card {
        height: 210px;
        border-radius: 14px;
    }

    .faq-hero-stamp {
        top: 16px;
        left: 18px;
    }

    .faq-hero-stamp .stamp-text {
        font-size: 20px;
    }

    .faq-hero-stamp .stamp-swoosh {
        width: 75px;
    }
}

.header-logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.sidebar-logo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.sidebar-logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

/* ==========================================================================
   Blog CTA Banner
   ========================================================================== */
.blog-cta-banner {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 40px 50px;
    margin: 40px auto 60px;
    max-width: 1200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    border: 1px solid #e2e8f0;
}

.blog-cta-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.blog-cta-content {
    flex: 1;
}

.blog-cta-title {
    color: #0f172a;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.blog-cta-subtitle {
    color: #64748b;
    font-size: 15px;
    line-height: 1.5;
}

.blog-cta-form {
    flex: 0 0 450px;
}

.blog-cta-input-group {
    display: flex;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.blog-cta-input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 15px;
    outline: none;
    background: transparent;
    color: #334155;
    width: 100%;
}

.blog-cta-input::placeholder {
    color: #94a3b8;
}

.blog-cta-btn {
    background-color: #da0d20;
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.blog-cta-btn:hover {
    background-color: #b30018;
}

@media (max-width: 900px) {
    .blog-cta-container {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .blog-cta-banner {
        padding: 30px 20px;
        margin: 30px 15px 50px;
    }

    .blog-cta-form {
        flex: auto;
    }
}

/* ==========================================================================
   Blog Hero Section
   ========================================================================== */
.blog-hero {
    position: relative;
    background-color: #ffffff;
    overflow: hidden;
    padding: 50px 0 50px;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: url('assets/faq_image.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
}

.blog-hero-floating-text {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    z-index: 2;
    color: #ffffff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    border-left: 3px solid #da0d20;
    padding-left: 20px;
    text-transform: uppercase;
}

.blog-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

.blog-hero-content {
    max-width: 650px;
}

.blog-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 25px;
}

.blog-breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-breadcrumb a:hover {
    color: #da0d20;
}

.blog-hero-subtitle-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.blog-hero-subtitle {
    color: #da0d20;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
}

.blog-hero-line {
    color: #da0d20;
    display: flex;
    align-items: center;
    opacity: 0.7;
}

.blog-hero-title {
    font-size: 35px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
}

.blog-hero-desc {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 35px;
}

.blog-search-form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 6px 6px 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.blog-search-form .search-icon {
    color: #94a3b8;
    margin-right: 12px;
}

.blog-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #334155;
    background: transparent;
}

.blog-search-input::placeholder {
    color: #94a3b8;
}

.blog-search-btn {
    background-color: #da0d20;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.blog-search-btn:hover {
    background-color: #b30018;
}

.blog-hero-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-cat-pill {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.blog-cat-pill:hover {
    border-color: #cbd5e1;
    color: #334155;
}

.blog-cat-pill.active {
    background: #da0d20;
    border-color: #da0d20;
    color: #ffffff;
}

@media (max-width: 992px) {
    .blog-hero::before {
        display: none;
    }

    .blog-hero-floating-text {
        display: none;
    }

    .blog-hero-content {
        max-width: 100%;
    }

    .blog-hero {
        background-color: #f8fafc;
    }

    .blog-hero-title {
        font-size: 40px;
    }
}

/* ==========================================================================
   404 Page Styles
   ========================================================================== */
.not-found-section {
    position: relative;
    padding: 120px 20px;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    overflow: hidden;
    text-align: center;
    margin-top: 85px;
    /* For header */
}

.ring-tl,
.ring-bl,
.ring-tr {
    position: absolute;
    border-radius: 50%;
    border: 50px solid rgba(218, 13, 32, 0.03);
    z-index: 0;
}

.ring-tl {
    width: 600px;
    height: 600px;
    top: -250px;
    left: -200px;
}

.ring-bl {
    width: 450px;
    height: 450px;
    bottom: -150px;
    left: -100px;
}

.ring-tr {
    width: 800px;
    height: 800px;
    top: -200px;
    right: -300px;
}

.not-found-container {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.not-found-code {
    font-size: 180px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 20px;
    font-family: 'Inter', sans-serif;
    letter-spacing: -2px;
}

.not-found-code .red-zero {
    color: #da0d20;
}

.not-found-divider {
    width: 50px;
    height: 3px;
    background-color: #da0d20;
    margin: 0 auto 30px;
}

.not-found-title {
    font-size: 38px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
}

.not-found-desc {
    font-size: 16px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 40px;
}

.not-found-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.not-found-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.not-found-buttons .btn-primary {
    background-color: #da0d20;
    color: #ffffff;
    border: 1px solid #da0d20;
}

.not-found-buttons .btn-primary:hover {
    background-color: #b30018;
    border-color: #b30018;
}

.not-found-buttons .btn-outline {
    background-color: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
}

.not-found-buttons .btn-outline:hover {
    border-color: #94a3b8;
    background-color: #f8fafc;
}

@media (max-width: 768px) {
    .not-found-code {
        font-size: 120px;
    }

    .not-found-title {
        font-size: 28px;
    }

    .not-found-buttons {
        flex-direction: column;
    }

    .not-found-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Our Global Presence Section (Homepage) - Pixel-perfect to Mockup
   ========================================================================== */
.global-presence-section {
    padding: 70px 5% 80px;
    background-color: #fbfdfc;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(11, 104, 54, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(11, 104, 54, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, #f7faf8 100%);
    position: relative;
    border-top: 1px solid rgba(11, 104, 54, 0.08);
    border-bottom: 1px solid rgba(11, 104, 54, 0.08);
    overflow: hidden;
}

.global-presence-container {
    max-width: 1240px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Split Hero: Heading Left, Map Right */
.gp-hero-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid rgba(11, 104, 54, 0.12);
    padding: 38px 42px;
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.gp-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}

.gp-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.gp-tag-dash {
    width: 28px;
    height: 3px;
    background-color: #da0d20;
    border-radius: 2px;
}

.gp-tag-text {
    color: #da0d20;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gp-split-title {
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 30px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.15;
    margin-bottom: 16px;
}

.gp-highlight {
    color: #0b6836;
}

.gp-split-desc {
    color: #475569;
    font-size: 0.96rem;
    line-height: 1.6;
    margin-bottom: 18px;
}

.gp-highlight-green {
    color: #0b6836;
    font-weight: 700;
}

.gp-accent-dash {
    width: 28px;
    height: 3px;
    background-color: #0b6836;
    border-radius: 2px;
    margin-bottom: 22px;
}

/* 4 Trust Badges */
.gp-trust-badges {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.gp-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.gp-badge-icon {
    color: #0b6836;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gp-badge-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.25;
}

/* Hero Right Map Image */
.gp-hero-right {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gp-split-map-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.4s ease;
}

.gp-hero-card:hover .gp-split-map-img {
    transform: scale(1.02);
}

/* 4 Feature Cards Grid */
.gp-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.gp-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gp-card:hover {
    transform: translateY(-5px);
    border-color: #cbd5e1;
    box-shadow: 0 12px 28px rgba(11, 104, 54, 0.08);
}

.gp-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #eef7f2;
    color: #0b6836;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s ease;
}

.gp-card:hover .gp-icon-box {
    background: #0b6836;
    color: #ffffff;
    transform: scale(1.05);
}

.gp-card-title {
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 1.08rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 10px;
}

.gp-card-text {
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 18px;
    flex-grow: 1;
}

.gp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.gp-arrow-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eef7f2;
    color: #0b6836;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gp-card:hover .gp-card-link {
    color: #0b6836;
}

.gp-card:hover .gp-arrow-icon {
    background: #0b6836;
    color: #ffffff;
    transform: translateX(3px);
}

/* Bottom Stats & Action Bar */
.gp-bottom-bar {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-shadow: none;
}

.gp-stats-flex {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.gp-stat-unit {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.gp-stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.gp-stat-icon-wrap svg {
    width: 19px;
    height: 19px;
}

.gp-stat-unit:hover .gp-stat-icon-wrap {
    transform: scale(1.06);
}

/* Colorful Icon Variants */
.gp-stat-unit:nth-child(1) .gp-stat-icon-wrap,
.gp-stat-icon-wrap.gp-icon-blue {
    background: #e0f2fe;
    color: #0284c7;
}

.gp-stat-unit:nth-child(3) .gp-stat-icon-wrap,
.gp-stat-icon-wrap.gp-icon-orange {
    background: #ffedd5;
    color: #ea580c;
}

.gp-stat-unit:nth-child(5) .gp-stat-icon-wrap,
.gp-stat-icon-wrap.gp-icon-green {
    background: #dcfce7;
    color: #16a34a;
}

.gp-stat-info {
    display: flex;
    flex-direction: column;
}

.gp-stat-value {
    font-family: var(--font-sans, "Inter", sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.gp-stat-name {
    font-size: 0.65rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
    white-space: nowrap;
}

.gp-divider {
    width: 1px;
    height: 26px;
    background: #cbd5e1;
    flex-shrink: 0;
}

.gp-actions-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.gp-btn-red {
    background-color: #da0d20;
    color: #ffffff;
    padding: 9px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 3px 10px rgba(218, 13, 32, 0.2);
    white-space: nowrap;
}

.gp-btn-red:hover {
    background-color: #b30018;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(218, 13, 32, 0.3);
}

.gp-btn-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.gp-btn-red:hover .gp-btn-arrow {
    transform: translateX(3px);
}

.gp-btn-outline {
    background: #ffffff;
    color: #0f172a;
    border: 1.5px solid #cbd5e1;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.gp-btn-outline:hover {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Responsive Styles */
@media (max-width: 1100px) {
    .gp-hero-card {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 24px;
    }

    .gp-split-title {
        font-size: 2.2rem;
    }

    .gp-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .gp-bottom-bar {
        padding: 12px 18px;
        gap: 14px;
    }

    .gp-stats-flex {
        justify-content: space-around;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .gp-actions-flex {
        justify-content: center;
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .global-presence-section {
        padding: 50px 4% 60px;
    }

    .gp-hero-card {
        padding: 24px 18px;
        border-radius: 14px;
    }

    .gp-split-title {
        font-size: 1.85rem;
    }

    .gp-split-desc {
        font-size: 0.92rem;
    }

    .gp-trust-badges {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .gp-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .gp-stats-flex {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: left;
    }

    .gp-divider {
        display: none;
    }

    .gp-actions-flex {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .gp-btn-red,
    .gp-btn-outline {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   COMING SOON SECTION STYLES
   ========================================================= */
.coming-soon-section {
    padding: 90px 5% 110px 5%;
    background: linear-gradient(180deg, #fafdfa 0%, #f1f7f2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 540px;
}

.coming-soon-card {
    max-width: 820px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 60px 48px;
    text-align: center;
    box-shadow: 0 20px 45px rgba(0, 36, 64, 0.06);
    position: relative;
    overflow: hidden;
}

.coming-soon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-green, #002440), var(--accent-red, #da0d20));
}

.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(218, 13, 32, 0.08);
    color: var(--accent-red, #da0d20);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.coming-soon-badge .pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-red, #da0d20);
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(218, 13, 32, 0.7);
    animation: csPulse 2s infinite;
}

@keyframes csPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(218, 13, 32, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(218, 13, 32, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(218, 13, 32, 0);
    }
}

.coming-soon-title {
    font-size: 2.2rem;
    font-family: 'Playfair Display', serif;
    color: var(--primary-green, #002440);
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.25;
}

.coming-soon-desc {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin: 0 auto 36px auto;
    max-width: 680px;
}

.coming-soon-features {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.cs-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-green, #002440);
}

.cs-feature-item svg {
    width: 18px;
    height: 18px;
    color: var(--accent-red, #da0d20);
    flex-shrink: 0;
}

.coming-soon-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.coming-soon-actions .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    background: transparent;
    color: var(--primary-green, #002440);
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.coming-soon-actions .btn-outline:hover {
    background: var(--primary-green, #002440);
    color: #ffffff;
    border-color: var(--primary-green, #002440);
}

@media (max-width: 768px) {
    .coming-soon-section {
        padding: 50px 4% 70px 4%;
    }
    .coming-soon-card {
        padding: 40px 20px;
    }
    .coming-soon-title {
        font-size: 1.65rem;
    }
    .coming-soon-desc {
        font-size: 0.95rem;
    }
    .coming-soon-features {
        flex-direction: column;
        gap: 10px;
    }
    .cs-feature-item {
        justify-content: center;
    }
    .coming-soon-actions {
        flex-direction: column;
        width: 100%;
    }
    .coming-soon-actions .btn,
    .coming-soon-actions .btn-outline {
        width: 100%;
    }
}