/* ==========================================================================

   ABOUT US & CONTACT US HIGH-CONVERSION DESIGN SYSTEM

   Vanilla CSS matching Zeron Fasteners Industrial Branding:

   Industrial Navy (#002244 / #041b2d), Brand Gold (#fdc900), Crisp Slates.

   Fully Responsive, High Aesthetics, Modern Micro-interactions.

   ========================================================================== */



/* --------------------------------------------------------------------------

   Global Layout & Utility Classes for About & Contact

   -------------------------------------------------------------------------- */

.ac-page-wrapper {

    background: #f8fafc;

    color: #1e293b;

    font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

    overflow-x: hidden;

}



.ac-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

    box-sizing: border-box;

}



/* --------------------------------------------------------------------------

   HERO BANNER (Used across About & Contact)

   -------------------------------------------------------------------------- */

.ac-hero-section {

    background: linear-gradient(135deg, #041b2d 0%, #002244 55%, #082d50 100%);

    padding: 45px 0 55px 0;

    color: #ffffff;

    position: relative;

    overflow: hidden;

    border-bottom: 4px solid #fdc900;

}



.ac-hero-section::before {

    content: '';

    position: absolute;

    top: -60px;

    right: -60px;

    width: 380px;

    height: 380px;

    background: radial-gradient(circle, rgba(253, 201, 0, 0.12) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

}



.ac-hero-section::after {

    content: '';

    position: absolute;

    bottom: -40px;

    left: 20%;

    width: 250px;

    height: 250px;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);

    border-radius: 50%;

    pointer-events: none;

}



.ac-hero-content {

    position: relative;

    z-index: 2;

    max-width: 860px;

}



.ac-hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: rgba(253, 201, 0, 0.15);

    color: #fdc900;

    border: 1px solid rgba(253, 201, 0, 0.35);

    font-size: 11.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    padding: 5px 14px;

    border-radius: 20px;

    margin-bottom: 16px;

}



.ac-hero-title {

    font-size: 38px;

    font-weight: 800;

    line-height: 1.25;

    color: #ffffff;

    margin: 0 0 16px 0;

    letter-spacing: -0.5px;

}



.ac-hero-title span.highlight {

    color: #fdc900;

}



.ac-hero-desc {

    font-size: 16px;

    line-height: 1.65;

    color: #cbd5e1;

    margin: 0 0 24px 0;

    max-width: 780px;

}



.ac-hero-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.ac-hero-tag-item {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 6px;

    padding: 6px 12px;

    font-size: 12.5px;

    color: #e2e8f0;

    font-weight: 600;

}



.ac-hero-tag-item i {

    color: #fdc900;

}



/* --------------------------------------------------------------------------

   STATS COUNTER STRIP

   -------------------------------------------------------------------------- */

.ac-stats-strip {

    margin-top: -30px;

    position: relative;

    z-index: 5;

    margin-bottom: 50px;

}



.ac-stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

}



.ac-stat-box {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 24px 20px;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);

    display: flex;

    align-items: center;

    gap: 16px;

    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

    border-bottom: 3px solid #fdc900;

}



.ac-stat-box:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 32px rgba(4, 27, 45, 0.1);

    border-color: #fdc900;

}



.ac-stat-icon-wrap {

    width: 52px;

    height: 52px;

    border-radius: 12px;

    background: rgba(0, 34, 68, 0.06);

    color: #002244;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    flex-shrink: 0;

    transition: all 0.25s ease;

}



.ac-stat-box:hover .ac-stat-icon-wrap {

    background: #fdc900;

    color: #041b2d;

}



.ac-stat-text-wrap {

    flex: 1 1 auto;

}



.ac-stat-num {

    font-size: 28px;

    font-weight: 800;

    color: #041b2d;

    line-height: 1.1;

    margin-bottom: 4px;

}



.ac-stat-label {

    font-size: 12px;

    color: #64748b;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0;

    line-height: 1.3;

}



/* --------------------------------------------------------------------------

   ABOUT: COMPANY OVERVIEW & HERITAGE (2-Column)

   -------------------------------------------------------------------------- */

.ac-section {

    padding: 40px 0 65px 0;

}



.ac-section-white {

    background: #ffffff;

    border-top: 1px solid #e2e8f0;

    border-bottom: 1px solid #e2e8f0;

}



.ac-story-grid {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    gap: 45px;

    align-items: center;

}



.ac-section-label {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    background: rgba(253, 201, 0, 0.15);

    color: #92400e;

    font-size: 11.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    padding: 4px 12px;

    border-radius: 20px;

    margin-bottom: 12px;

}



.ac-section-heading {

    font-size: 30px;

    font-weight: 800;

    color: #041b2d;

    line-height: 1.3;

    margin: 0 0 18px 0;

    letter-spacing: -0.3px;

}



.ac-lead-text {

    font-size: 15.5px;

    line-height: 1.7;

    color: #334155;

    margin-bottom: 16px;

}



.ac-sub-text {

    font-size: 14.5px;

    line-height: 1.65;

    color: #64748b;

    margin-bottom: 24px;

}



.ac-feature-bullets {

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

    margin-bottom: 28px;

}



.ac-bullet-item {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}



.ac-bullet-icon {

    width: 22px;

    height: 22px;

    border-radius: 50%;

    background: #fdc900;

    color: #041b2d;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

    flex-shrink: 0;

    margin-top: 3px;

}



.ac-bullet-text {

    font-size: 14px;

    color: #1e293b;

    font-weight: 600;

    line-height: 1.45;

}



.ac-action-row {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}



.ac-btn-primary {

    background: #002244;

    color: #ffffff !important;

    font-size: 13.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 12px 26px;

    border-radius: 6px;

    text-decoration: none !important;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.25s ease;

    box-shadow: 0 4px 14px rgba(0, 34, 68, 0.25);

    border: 2px solid #002244;

}



.ac-btn-primary:hover {

    background: #fdc900;

    color: #041b2d !important;

    border-color: #fdc900;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(253, 201, 0, 0.4);

}



.ac-btn-secondary {

    background: transparent;

    color: #002244 !important;

    font-size: 13.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 12px 24px;

    border-radius: 6px;

    text-decoration: none !important;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    border: 2px solid #cbd5e1;

    transition: all 0.25s ease;

}



.ac-btn-secondary:hover {

    background: #ffffff;

    border-color: #002244;

    color: #002244 !important;

    transform: translateY(-2px);

}



/* Story Right Column: Visual Composite Card */

.ac-visual-card {

    position: relative;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 16px 40px rgba(4, 27, 45, 0.12);

    border: 1px solid #e2e8f0;

    background: #ffffff;

}



.ac-visual-card img.main-img {

    width: 100%;

    height: 380px;

    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;

}



.ac-visual-card:hover img.main-img {

    transform: scale(1.03);

}



.ac-floating-trust-badge {

    position: absolute;

    bottom: 20px;

    left: 20px;

    right: 20px;

    background: rgba(4, 27, 45, 0.92);

    backdrop-filter: blur(8px);

    border: 1px solid rgba(253, 201, 0, 0.4);

    border-radius: 10px;

    padding: 16px 18px;

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 14px;

}



.ac-floating-trust-badge i {

    font-size: 26px;

    color: #fdc900;

    flex-shrink: 0;

}



.ac-floating-trust-badge p {

    margin: 0;

    font-size: 13px;

    line-height: 1.45;

    color: #e2e8f0;

}



.ac-floating-trust-badge p strong {

    color: #ffffff;

    display: block;

    font-size: 14px;

    margin-bottom: 2px;

}



/* --------------------------------------------------------------------------

   ABOUT: CORE VALUE PILLARS (4 Cards)

   -------------------------------------------------------------------------- */

.ac-pillars-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 35px;

}



.ac-pillar-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 28px 22px;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);

    transition: all 0.25s ease;

    display: flex;

    flex-direction: column;

    border-top: 3px solid transparent;

}



.ac-pillar-card:hover {

    border-top-color: #fdc900;

    transform: translateY(-5px);

    box-shadow: 0 14px 28px rgba(4, 27, 45, 0.09);

    border-color: #fdc900;

}



.ac-pillar-icon {

    width: 48px;

    height: 48px;

    border-radius: 10px;

    background: #002244;

    color: #fdc900;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    margin-bottom: 18px;

    transition: all 0.25s ease;

}



.ac-pillar-card:hover .ac-pillar-icon {

    background: #fdc900;

    color: #041b2d;

    transform: scale(1.05);

}



.ac-pillar-title {

    font-size: 17px;

    font-weight: 700;

    color: #041b2d;

    margin: 0 0 10px 0;

    line-height: 1.35;

}



.ac-pillar-desc {

    font-size: 13.5px;

    line-height: 1.6;

    color: #64748b;

    margin: 0;

}



/* --------------------------------------------------------------------------

   ABOUT: IN-HOUSE TESTING & QUALITY ASSURANCE (Split Checklist + Spec Badges)

   -------------------------------------------------------------------------- */

.ac-qa-wrap {

    background: linear-gradient(135deg, #041b2d 0%, #002244 100%);

    border-radius: 16px;

    padding: 40px;

    color: #ffffff;

    margin-top: 40px;

    box-shadow: 0 14px 35px rgba(4, 27, 45, 0.16);

    position: relative;

    overflow: hidden;

    border-left: 5px solid #fdc900;

}



.ac-qa-header {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 32px auto;

}



.ac-qa-header h3 {

    font-size: 26px;

    font-weight: 800;

    color: #ffffff;

    margin: 0 0 8px 0;

}



.ac-qa-header p {

    font-size: 14.5px;

    color: #cbd5e1;

    margin: 0;

}



.ac-qa-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}



.ac-qa-item {

    background: rgba(255, 255, 255, 0.07);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 8px;

    padding: 16px 18px;

    display: flex;

    align-items: flex-start;

    gap: 12px;

    transition: all 0.2s ease;

}



.ac-qa-item:hover {

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(253, 201, 0, 0.5);

    transform: translateY(-2px);

}



.ac-qa-item i {

    color: #fdc900;

    font-size: 15px;

    margin-top: 3px;

    flex-shrink: 0;

}



.ac-qa-item-title {

    font-size: 14px;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 2px;

}



.ac-qa-item-desc {

    font-size: 12px;

    color: #94a3b8;

    line-height: 1.4;

    margin: 0;

}



/* --------------------------------------------------------------------------

   ABOUT: INDUSTRIES WE EMPOWER (6 Grid)

   -------------------------------------------------------------------------- */

.ac-industry-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 35px;

}



.ac-industry-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    padding: 24px 20px;

    display: flex;

    align-items: flex-start;

    gap: 16px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);

    transition: all 0.25s ease;

}



.ac-industry-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 24px rgba(4, 27, 45, 0.08);

    border-color: #fdc900;

}



.ac-industry-icon {

    width: 44px;

    height: 44px;

    border-radius: 8px;

    background: rgba(253, 201, 0, 0.16);

    color: #92400e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    flex-shrink: 0;

    transition: all 0.2s ease;

}



.ac-industry-card:hover .ac-industry-icon {

    background: #002244;

    color: #fdc900;

}



.ac-industry-title {

    font-size: 16px;

    font-weight: 700;

    color: #041b2d;

    margin: 0 0 4px 0;

}



.ac-industry-desc {

    font-size: 13px;

    color: #64748b;

    margin: 0;

    line-height: 1.45;

}



/* --------------------------------------------------------------------------

   CONTACT: 4 QUICK CONTACT CARDS

   -------------------------------------------------------------------------- */

.ac-contact-cards-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    margin: 0;

    position: relative;

    z-index: 5;

}



.ac-contact-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    padding: 24px 20px;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    transition: all 0.25s ease;

    border-bottom: 3px solid #fdc900;

}



.ac-contact-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 16px 32px rgba(4, 27, 45, 0.1);

    border-color: #fdc900;

}



.ac-contact-card-top {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;

}



.ac-contact-card-icon {

    width: 46px;

    height: 46px;

    border-radius: 10px;

    background: rgba(0, 34, 68, 0.06);

    color: #002244;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    flex-shrink: 0;

    transition: all 0.25s ease;

}



.ac-contact-card.whatsapp-card .ac-contact-card-icon {

    background: rgba(37, 211, 102, 0.12);

    color: #25D366;

}



.ac-contact-card:hover .ac-contact-card-icon {

    background: #fdc900;

    color: #041b2d;

}



.ac-contact-card.whatsapp-card:hover .ac-contact-card-icon {

    background: #25D366;

    color: #ffffff;

}



.ac-contact-card-category {

    font-size: 11.5px;

    font-weight: 700;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    margin: 0;

}



.ac-contact-card-title {

    font-size: 16px;

    font-weight: 800;

    color: #041b2d;

    margin: 2px 0 0 0;

}



.ac-contact-card-body {

    flex-grow: 1;

    margin-bottom: 14px;

}



.ac-contact-card-body p {

    font-size: 13.5px;

    line-height: 1.5;

    color: #334155;

    margin: 0 0 6px 0;

}



.ac-contact-card-body a {

    color: #002244;

    text-decoration: none;

    font-weight: 700;

    transition: color 0.2s ease;

    word-break: break-word;

}



.ac-contact-card-body a:hover {

    color: #d97706;

}



.ac-contact-card-footer {

    border-top: 1px solid #f1f5f9;

    padding-top: 10px;

    font-size: 12px;

    color: #64748b;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.ac-contact-card-footer span.badge-avail {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    color: #16a34a;

    font-weight: 600;

}



.ac-contact-card-footer span.badge-avail::before {

    content: '';

    width: 6px;

    height: 6px;

    background: #16a34a;

    border-radius: 50%;

}



/* --------------------------------------------------------------------------

   CONTACT: 2-COLUMN MAIN WORKING SECTION (RFQ Form + Interactive Map)

   -------------------------------------------------------------------------- */

.ac-contact-main-grid {

    display: grid;

    grid-template-columns: 1.25fr 0.95fr;

    gap: 35px;

    align-items: stretch;

}



/* RFQ Form Card */

.ac-form-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    padding: 36px 32px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);

}



.ac-form-header {

    margin-bottom: 24px;

    border-bottom: 1px solid #f1f5f9;

    padding-bottom: 16px;

}



.ac-form-header h3 {

    font-size: 22px;

    font-weight: 800;

    color: #041b2d;

    margin: 0 0 6px 0;

}



.ac-form-header p {

    font-size: 13.5px;

    color: #64748b;

    margin: 0;

}



.ac-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;

    margin-bottom: 16px;

}



.ac-form-group {

    display: flex;

    flex-direction: column;

    margin-bottom: 16px;

}



.ac-form-group.full-width {

    grid-column: 1 / -1;

}



.ac-form-label {

    font-size: 12.5px;

    font-weight: 700;

    color: #1e293b;

    margin-bottom: 6px;

    text-transform: uppercase;

    letter-spacing: 0.3px;

}



.ac-form-label span.req {

    color: #dc2626;

}



.ac-form-control {

    width: 100%;

    height: 44px;

    padding: 8px 14px;

    font-size: 14px;

    color: #1e293b;

    background: #f8fafc;

    border: 1px solid #cbd5e1;

    border-radius: 6px;

    transition: all 0.2s ease;

    box-sizing: border-box;

    font-family: inherit;

}



.ac-form-control:focus {

    background: #ffffff;

    border-color: #fdc900;

    outline: none;

    box-shadow: 0 0 0 3px rgba(253, 201, 0, 0.25);

}



textarea.ac-form-control {

    height: 110px;

    resize: vertical;

    padding-top: 10px;

}



select.ac-form-control {

    cursor: pointer;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

    background-repeat: no-repeat;

    background-position: right 12px center;

    background-size: 14px;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    padding-right: 32px;

}



.ac-btn-submit {

    width: 100%;

    background: #002244;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    padding: 13px 24px;

    border: 2px solid #002244;

    border-radius: 6px;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    transition: all 0.25s ease;

    box-shadow: 0 4px 14px rgba(0, 34, 68, 0.2);

}



.ac-btn-submit:hover {

    background: #fdc900;

    color: #041b2d;

    border-color: #fdc900;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(253, 201, 0, 0.4);

}



.ac-form-note {

    font-size: 11.5px;

    color: #64748b;

    margin-top: 10px;

    text-align: center;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

}



/* Map & Facility Column */

.ac-map-card {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);

    display: flex;

    flex-direction: column;

}



.ac-map-iframe-box {

    width: 100%;

    height: 310px;

    position: relative;

    background: #e2e8f0;

}



.ac-map-iframe-box iframe {

    width: 100%;

    height: 100%;

    border: none;

    display: block;

}



.ac-map-placeholder {

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color: #64748b;

    font-size: 13px;

    font-weight: 600;

    background: #f1f5f9;

}



.ac-map-placeholder i {

    font-size: 28px;

    color: #fdc900;

}



.ac-facility-info {

    padding: 24px 24px;

    background: #ffffff;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}



.ac-facility-title {

    font-size: 17px;

    font-weight: 800;

    color: #041b2d;

    margin: 0 0 12px 0;

    display: flex;

    align-items: center;

    gap: 8px;

}



.ac-facility-title i {

    color: #fdc900;

}



.ac-facility-list {

    list-style: none;

    padding: 0;

    margin: 0 0 18px 0;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.ac-facility-list li {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    font-size: 13.5px;

    color: #334155;

    line-height: 1.45;

}



.ac-facility-list li i {

    color: #002244;

    font-size: 13px;

    margin-top: 3px;

    flex-shrink: 0;

}



.ac-facility-list li strong {

    color: #041b2d;

}



.ac-logistics-badge {

    background: #fffbeb;

    border: 1px solid #fde68a;

    border-radius: 8px;

    padding: 12px 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 12px;

    color: #92400e;

    line-height: 1.4;

}



.ac-logistics-badge i {

    font-size: 18px;

    color: #d97706;

    flex-shrink: 0;

}



/* --------------------------------------------------------------------------

   FAQ SECTION (Modern High-Conversion Accordions)

   -------------------------------------------------------------------------- */

.ac-faq-section {

    padding: 55px 0 65px 0;

    background: #ffffff;

    border-top: 1px solid #e2e8f0;

}



.ac-faq-header {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 35px auto;

}



.ac-faq-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}



.ac-faq-card {

    background: #f8fafc;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    padding: 20px 22px;

    transition: all 0.2s ease;

}



.ac-faq-card:hover {

    border-color: #fdc900;

    background: #ffffff;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);

}



.ac-faq-question {

    font-size: 15px;

    font-weight: 700;

    color: #041b2d;

    margin: 0 0 8px 0;

    display: flex;

    align-items: flex-start;

    gap: 10px;

}



.ac-faq-question i {

    color: #fdc900;

    font-size: 13px;

    margin-top: 4px;

    flex-shrink: 0;

}



.ac-faq-answer {

    font-size: 13.5px;

    color: #64748b;

    line-height: 1.55;

    margin: 0;

    padding-left: 23px;

}



/* --------------------------------------------------------------------------

   UNIVERSAL DIRECT CTA BANNER

   -------------------------------------------------------------------------- */

.ac-direct-cta {

    background: linear-gradient(135deg, #002244 0%, #041b2d 100%);

    border-radius: 14px;

    padding: 35px 40px;

    margin-top: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    color: #ffffff;

    box-shadow: 0 12px 35px rgba(4, 27, 45, 0.16);

    border-left: 5px solid #fdc900;

}



.ac-direct-cta h3 {

    font-size: 24px;

    font-weight: 800;

    color: #ffffff;

    margin: 0 0 6px 0;

}



.ac-direct-cta p {

    font-size: 14px;

    color: #cbd5e1;

    margin: 0;

    max-width: 600px;

}



.ac-cta-actions {

    display: flex;

    align-items: center;

    gap: 12px;

    flex-shrink: 0;

}



.ac-btn-cta-quote {

    background: #fdc900;

    color: #041b2d !important;

    font-size: 13.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 12px 24px;

    border-radius: 6px;

    text-decoration: none !important;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.25s ease;

    box-shadow: 0 4px 14px rgba(253, 201, 0, 0.35);

}



.ac-btn-cta-quote:hover {

    background: #ffffff;

    color: #002244 !important;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);

}



.ac-btn-cta-wa {

    background: #25D366;

    color: #ffffff !important;

    font-size: 13.5px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    padding: 12px 22px;

    border-radius: 6px;

    text-decoration: none !important;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: all 0.25s ease;

    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);

}



.ac-btn-cta-wa:hover {

    background: #1eb956;

    color: #ffffff !important;

    transform: translateY(-2px);

}



/* --------------------------------------------------------------------------

   RESPONSIVE BREAKPOINTS

   -------------------------------------------------------------------------- */

@media (max-width: 991px) {

    .ac-hero-title {

        font-size: 30px;

    }

    .ac-stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 14px;

    }

    .ac-story-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .ac-visual-card img.main-img {

        height: 300px;

    }

    .ac-pillars-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .ac-qa-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .ac-industry-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .ac-contact-cards-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 14px;

    }

    .ac-contact-main-grid {

        grid-template-columns: 1fr;

    }

    .ac-faq-grid {

        grid-template-columns: 1fr;

    }

    .ac-direct-cta {

        flex-direction: column;

        text-align: center;

        padding: 28px 24px;

    }

    .ac-cta-actions {

        width: 100%;

        justify-content: center;

        flex-wrap: wrap;

    }

}



@media (max-width: 576px) {

    .ac-hero-section {

        padding: 30px 0 40px 0;

    }

    .ac-hero-title {

        font-size: 24px;

    }

    .ac-hero-desc {

        font-size: 14px;

    }

    .ac-stats-grid {

        grid-template-columns: 1fr;

    }

    .ac-stat-box {

        padding: 16px;

    }

    .ac-section-heading {

        font-size: 23px;

    }

    .ac-pillars-grid {

        grid-template-columns: 1fr;

    }

    .ac-qa-wrap {

        padding: 24px 18px;

    }

    .ac-qa-grid {

        grid-template-columns: 1fr;

    }

    .ac-industry-grid {

        grid-template-columns: 1fr;

    }

    .ac-contact-cards-grid {

        grid-template-columns: 1fr;

    }

    .ac-form-card {

        padding: 24px 18px;

    }

    .ac-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }

    .ac-cta-actions a {

        width: 100%;

        justify-content: center;

    }

}





/* RFQ Submission Alert Banners */

.ac-alert-success {

    background: #ecfdf5;

    border: 1px solid #6ee7b7;

    border-radius: 8px;

    padding: 16px 20px;

    margin-bottom: 24px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    color: #065f46;

}

.ac-alert-success i {

    font-size: 24px;

    color: #10b981;

    flex-shrink: 0;

    margin-top: 2px;

}

.ac-alert-success h4 {

    margin: 0 0 4px 0;

    font-size: 15.5px;

    font-weight: 700;

    color: #065f46;

}

.ac-alert-success p {

    margin: 0;

    font-size: 13.5px;

    color: #047857;

    line-height: 1.45;

}



.ac-alert-error {

    background: #fef2f2;

    border: 1px solid #fca5a5;

    border-radius: 8px;

    padding: 16px 20px;

    margin-bottom: 24px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    color: #991b1b;

}

.ac-alert-error i {

    font-size: 24px;

    color: #ef4444;

    flex-shrink: 0;

    margin-top: 2px;

}

.ac-alert-error h4 {

    margin: 0 0 4px 0;

    font-size: 15.5px;

    font-weight: 700;

    color: #991b1b;

}

.ac-alert-error p {

    margin: 0;

    font-size: 13.5px;

    color: #b91c1c;

    line-height: 1.45;

}