/* ===============================================
   QUALIBOLT SERVICES - GLASS-TECH EDITION
   Path: assets/css/services/service.css
   STATUS: MASTER FINAL (Supports All Service Pages)
=============================================== */

/* --- 0. GLOBAL UTILITIES --- */
.section-title, .section-subtitle {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.section-subtitle { max-width: 700px; }

/* --- 1. HERO SECTION (High Contrast Executive Layer) --- */
.service-hero {
    position: relative;
    padding: 180px 0 120px;
    background-color: #0f141e; 
    
    /* Parallax Background */
    background-image: url('../../images/services/service-hero-bg.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    background-repeat: no-repeat;
    
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* Deep Dark Gradient for 100% Text Readability */
.hero-overlay-gradient {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0.9) 0%,          /* Very Dark Top (Header Visibility) */
        rgba(10, 20, 40, 0.85) 50%,  /* 85% Dark Middle (Text Contrast) */
        rgba(10, 20, 40, 0.95) 100%  /* Solid Fade Bottom */
    );
    z-index: 1;
}

.service-hero .container { position: relative; z-index: 2; }

/* Hero Text Visibility Rules */
.service-hero h1 {
    color: #ffffff !important; /* Force White */
    font-size: 3.5rem; font-weight: 800; margin-bottom: 1.2rem;
    line-height: 1.1; 
    text-shadow: 0 10px 30px rgba(0,0,0,0.8); 
    position: relative; z-index: 3;
    animation: fadeUp 0.8s ease-out;
}

.service-hero .lead {
    color: #ffffff !important; /* Force White */
    font-size: 1.25rem; max-width: 750px; margin: 0 auto 2.5rem;
    font-weight: 500; /* Medium Weight */
    text-shadow: 0 4px 15px rgba(0,0,0,0.8); 
    position: relative; z-index: 3;
    line-height: 1.6;
    animation: fadeUp 1s ease-out;
}

.badge-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 16px; border-radius: 50px;
    font-size: 0.85rem; font-weight: 600;
    margin-bottom: 1.5rem; letter-spacing: 0.5px;
    color: #fff; backdrop-filter: blur(5px);
}

.hero-buttons { display: flex; justify-content: center; gap: 1rem; animation: fadeUp 1.2s ease-out; }

/* --- 2. BUTTONS: QUANTUM SHIMMER STYLE --- */
/* Base Shimmer Button */
.btn-shimmer, 
.btn-card-action {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 14px 0;
    margin-top: auto; /* Forces alignment to bottom of card */
    
    /* Premium Gradient */
    background: linear-gradient(135deg, #00BFB3 0%, #009688 100%);
    color: white !important;
    
    border-radius: 50px;
    font-weight: 600; font-size: 0.95rem;
    text-transform: uppercase; letter-spacing: 1px;
    border: none; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 191, 179, 0.3);
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

/* The Light Beam Animation */
.btn-shimmer::after,
.btn-card-action::after {
    content: '';
    position: absolute; top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.4) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: skewX(-25deg);
    animation: shimmer 3s infinite;
}

/* Hover Effects */
.btn-shimmer:hover,
.btn-card-action:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 191, 179, 0.5); /* Neon Glow */
}
.btn-shimmer i, .btn-card-action i { transition: transform 0.3s ease; }
.btn-shimmer:hover i, .btn-card-action:hover i { transform: translateX(5px); }

/* Specific Modifier for Hero Button (Not full width) */
.btn-shimmer.hero-btn {
    width: auto !important; 
    padding: 14px 40px; 
}

/* --- 3. ABOUT SECTION --- */
.about-service-section { background-color: var(--light-bg); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }

.about-text { text-align: left; }
.about-text h3 { font-size: 2rem; color: var(--heading-color); margin-bottom: 1rem; }
.about-text p { color: var(--light-subtle-text); margin-bottom: 1rem; }

.about-image { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); }
.about-image img { width: 100%; display: block; transition: transform 0.5s ease; }
.about-image:hover img { transform: scale(1.03); }

.tech-card-overlay {
    position: absolute; bottom: 20px; left: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 10px 20px; border-radius: 8px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-left: 4px solid var(--accent-teal);
    text-align: left;
}
.tech-card-overlay i { color: var(--accent-teal); font-size: 1.5rem; }
.tech-card-overlay span { font-weight: 700; color: #333; font-size: 0.9rem; }

/* --- 4. HOLOGRAPHIC GLASS CARDS (Grid) --- */
.services-list-section { background-color: #f8f9fa; }

.services-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem; margin-top: 3rem;
}

.glass-card {
    background: #ffffff; 
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex; flex-direction: column;
    height: 100%; /* Equal Height Columns */
    animation: fadeUp 0.8s ease-out forwards;
}

.glass-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 191, 179, 0.15); 
    border-color: #00BFB3;
}

.glow-orb {
    width: 70px; height: 70px;
    background: radial-gradient(circle, rgba(0,191,179,0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.5rem;
}
.card-icon { font-size: 2rem; color: #00BFB3; transition: transform 0.3s ease; }
.glass-card:hover .card-icon { transform: scale(1.1); }

.card-body { 
    flex-grow: 1; /* Push content to fill height */
    display: flex; flex-direction: column; 
}

.card-body h4 { font-size: 1.4rem; margin-bottom: 0.8rem; font-weight: 700; color: #1a202c; }
.card-body p { font-size: 0.95rem; color: #555; margin-bottom: 1.5rem; line-height: 1.6; }

/* Tech Pills (Tags) */
.tech-tags {
    list-style: none; padding: 0; margin: 0 0 2rem 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    flex-grow: 1; /* Pushes button to bottom */
}
.tech-tags li {
    font-size: 0.8rem; font-weight: 600;
    color: #0A66C2;
    background: rgba(10, 102, 194, 0.08);
    padding: 6px 12px; border-radius: 50px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.glass-card:hover .tech-tags li { background: #0A66C2; color: #fff; }

/* --- 5. DARK GLASS FEATURE CARDS (Why Us) --- */
.why-us-strip {
    background-color: #0f141e;
    color: #fff; padding: 5rem 0;
    border-top: 1px solid #1f293a; border-bottom: 1px solid #1f293a;
}
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

.feature-card {
    background: rgba(255, 255, 255, 0.03); /* Dark Glass */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.feature-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: #00BFB3;
    transform: translateY(-5px);
}

.watermark-num {
    position: absolute; top: -10px; right: 10px;
    font-size: 6rem; font-weight: 900;
    color: rgba(255, 255, 255, 0.03); /* Watermark Effect */
    z-index: 0;
    transition: color 0.3s ease;
}
.feature-card:hover .watermark-num { color: rgba(0, 191, 179, 0.1); }

.feature-content { position: relative; z-index: 1; text-align: left; }
.feature-content h4 { font-size: 1.4rem; margin-bottom: 1rem; color: #fff; }
.feature-content p { color: #b0bec5; font-size: 0.95rem; line-height: 1.6; }

/* --- 6. PROCESS & FAQ --- */
.process-grid { 
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 2rem; margin-top: 3rem; text-align: center;
}
.step-icon { 
    font-size: 2rem; color: var(--accent-teal); margin-bottom: 1rem; 
    display: block; margin-left: auto; margin-right: auto;
}

.faq-accordion { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border-color); margin-bottom: 10px; }
.faq-question {
    width: 100%; text-align: left;
    background: none; border: none;
    padding: 15px 0; font-size: 1.1rem; font-weight: 600; color: var(--heading-color);
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.faq-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
    color: var(--light-subtle-text); font-size: 0.95rem; line-height: 1.6;
    text-align: left;
}
.faq-answer p { padding-bottom: 15px; }

/* --- 7. MODAL FORM (SCROLL & STYLING) --- */
/* Modal Background Logic (From main.css usually, but enforced here) */
.modal {
    position: fixed; 
    z-index: 9999; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
    overflow: hidden; /* Stops background scroll */
    background-color: rgba(0,0,0,0.8); 
    backdrop-filter: blur(5px);
    display: none; /* Hidden by default */
    align-items: center; /* Center Vertically */
    justify-content: center; /* Center Horizontally */
}

/* VISIBLE CLASS (Triggered by JS) */
.modal.visible { 
    display: flex !important; /* Flex needed for centering */
    opacity: 1; 
}

/* THE SCROLL FIX: Viewport Locked Content */
.modal-content {
    background-color: #1a202c; /* Dark Background */
    border: 1px solid #333;
    border-radius: 12px;
    width: 90%; 
    max-width: 600px; /* Standard Width */
    
    /* Height Constraint */
    max-height: 90vh; /* Never taller than 90% of screen */
    overflow-y: auto; /* SCROLLBAR appears inside if content is too long */
    
    padding: 2rem;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* "Shake" Animation for Intent Protection */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}
.shake-anim { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }

/* Custom Scrollbar for Modal */
.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: #1a202c; }
.modal-content::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
.modal-content::-webkit-scrollbar-thumb:hover { background: #555; }

/* Form Text Colors */
.form-header h2 { color: #ffffff !important; font-size: 1.8rem; margin-bottom: 0.5rem; }
.form-header p { color: #b0bec5 !important; }
.form-group { margin-bottom: 1.5rem; text-align: left; position: relative; }

.qualibolt-form .form-control { 
    background: rgba(255,255,255,0.05); 
    color: #fff !important; /* Force Input Text White */
    border: 1px solid #444; 
}
.qualibolt-form .form-control::placeholder { color: #888; }

/* Validation Logic */
.error-msg {
    color: #ff6b6b; font-size: 0.75rem; margin-top: 4px; 
    display: none; font-weight: 500;
}
.form-control.is-invalid { border-color: #ff6b6b !important; }
.form-control.is-invalid + .error-msg { display: block; }
.form-control.is-valid { border-color: #00BFB3 !important; }
.qualibolt-form .form-control:focus { box-shadow: 0 0 0 3px rgba(0, 191, 179, 0.2); }

/* --- 8. FOOTER PROTECTION (Strict Alignment Fixes) --- */
.main-footer { text-align: left !important; }
.main-footer .footer-col { text-align: left !important; }
.main-footer h4 { text-align: left !important; font-size: 1.2rem !important; font-weight: 700 !important; font-family: var(--font-heading) !important; }
.main-footer p, .main-footer a, .contact-info, .main-footer li { font-size: 0.95rem !important; line-height: 1.6 !important; font-family: var(--font-body) !important; }
.footer-bottom { text-align: center !important; }
.footer-bottom p, .footer-bottom a { font-size: 0.85rem !important; }

/* Authority Tech Logos */
.tech-logo { font-weight: 700; font-size: 1.1rem; color: #fff; }

/* --- 9. DARK MODE OVERRIDES --- */
body.dark-mode .services-list-section { background-color: #0f141e; }
body.dark-mode .about-service-section { background-color: #0b0f16; }

body.dark-mode .glass-card {
    background: rgba(22, 29, 42, 0.6);
    backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .glass-card:hover {
    border-color: #00BFB3;
    box-shadow: 0 0 30px rgba(0, 191, 179, 0.15);
}
body.dark-mode .card-body h4 { color: #fff; }
body.dark-mode .card-body p { color: #b0bec5; }

body.dark-mode .tech-tags li {
    background: rgba(255, 255, 255, 0.1);
    color: #b0bec5;
}
body.dark-mode .glass-card:hover .tech-tags li { background: #00BFB3; color: #000; }

body.dark-mode .faq-item { border-color: #333d4f; }
body.dark-mode .faq-question { color: #fff; }
body.dark-mode .faq-answer { color: #b0bec5; }

body.dark-mode .tech-card-overlay {
    background: rgba(22, 29, 42, 0.95);
    border-color: var(--accent-teal);
}
body.dark-mode .tech-card-overlay span { color: #fff; }

/* Dark Mode Button Adjustment */
body.dark-mode .btn-shimmer, 
body.dark-mode .btn-card-action {
    border-color: #00BFB3;
    color: #fff;
}

/* Animations */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; }
}

/* Responsive */
@media (max-width: 768px) {
    .service-hero h1 { font-size: 2.5rem; }
    .about-grid { grid-template-columns: 1fr; } 
    .about-image { display: none; }
    .main-footer .footer-grid, .main-footer .footer-col, .main-footer h4 { text-align: center !important; }
    .form-wrapper { padding: 1.5rem; }
}