/* === MistTrack Solutions Pages === */

/*--solution-hero--*/
.solution-hero { background: #fff; display: flex; align-items: center; max-width: 1200px; margin: 0 auto; width: 88%; padding: 60px 0; gap: 60px;}
.solution-hero-con { flex: 1; min-width: 0; padding: 0; width: auto; text-align: left;}
.solution-hero-img { flex: 1; min-width: 0;}
.solution-hero-img img { width: 100%; max-width: 400px; margin: 0 auto; display: block; border-radius: 8px;}
.solution-hero-con .tag { display: inline-block; background-color: #181818; color: #fff; font-size: 12px; padding: 4px 14px; border-radius: 20px; margin-bottom: 20px;}
.solution-hero-con h1 { font-size: 36px; font-weight: bold; margin-bottom: 20px; line-height: 1.4; max-width: 600px;}
.solution-hero-con .subtitle { font-size: 16px; color: #555; max-width: 600px; margin-bottom: 35px; line-height: 1.8;}
.solution-hero-con .btn-group { margin-bottom: 0;}
.solution-hero-con .btn-primary { display: inline-block; background-color: #e8363f; border: 1px solid #e8363f; color: #fff; padding: 10px 30px; font-size: 15px; border-radius: 50px; margin-right: 15px; transition: all .3s ease;}
.solution-hero-con .btn-primary:hover { box-shadow: 0 10px 30px -2px rgba(232, 54, 63, .3); transition: all .3s ease;}
.solution-hero-con .btn-secondary { display: inline-block; border: 1px solid #000; color: #000; padding: 10px 30px; font-size: 15px; border-radius: 50px; transition: all .3s ease;}
.solution-hero-con .btn-secondary:hover { box-shadow: 0 10px 30px -2px rgba(0, 0, 0, .15); transition: all .3s ease;}

/*--challenges--*/
.solution-challenges { background-color: #f8f8f8;}
.solution-challenges-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%;}
.solution-challenges-con .title { text-align: center; margin-bottom: 50px;}
.solution-challenges-con .title h2 { font-size: 28px; margin-bottom: 10px;}
.solution-challenges-con .title p { font-size: 14px; color: #666; max-width: 700px; margin: 0 auto;}
.solution-challenges-con ul { display: flex; flex-wrap: wrap; margin: 0 -15px;}
.solution-challenges-con ul li { flex: 0 0 33.33%; margin-bottom: 30px; padding: 0 15px; box-sizing: border-box;}
.solution-challenges-con ul li .item { padding: 30px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 0 8px -2px rgba(0,0,0,0.1); border-radius: 6px; text-align: center; height: 100%; box-sizing: border-box; margin: 0;}
.solution-challenges-con ul li .item .icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: #fef2f2; border-radius: 50%; margin-bottom: 20px; color: #e8363f;}
.solution-challenges-con ul li .item h3 { font-size: 16px; margin-bottom: 10px; font-weight: bold;}
.solution-challenges-con ul li .item p { font-size: 13px; color: #666; line-height: 1.8; text-align: left;}

/*--features (How MistTrack Helps)--*/
.solution-features { background-color: #fff;}
.solution-features-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%;}
.solution-features-con .title { text-align: center; margin-bottom: 50px;}
.solution-features-con .title h2 { font-size: 28px; font-weight: normal; margin-bottom: 15px;}
.solution-features-con .title p { font-size: 14px; color: #666; max-width: 700px; margin: 0 auto;}
.solution-features-con ul { display: flex; flex-wrap: wrap; margin: 0 -15px;}
.solution-features-con ul li { flex: 0 0 33.33%; margin-bottom: 30px; padding: 0 15px; box-sizing: border-box;}
.solution-features-con ul li .item { padding: 30px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 0 8px -2px rgba(0,0,0,0.1); border-radius: 6px; height: 100%; box-sizing: border-box; margin: 0;}
.solution-features-con ul li .item .icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: #f8f8f8; border-radius: 8px; margin-bottom: 15px; color: #000;}
.solution-features-con ul li .item h3 { font-size: 15px; margin-bottom: 8px; font-weight: bold;}
.solution-features-con ul li .item p { font-size: 13px; color: #666; line-height: 1.8;}
.solution-features-con ul li .item .tag-plan { display: inline-block; margin-top: 12px; font-size: 11px; background-color: #f8f8f8; color: #333; font-style: italic; padding: 2px 10px; border-radius: 10px;}

/*--API table--*/
.solution-api { background-color: #fff;}
.solution-api-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%;}
.solution-api-con .title { text-align: center; margin-bottom: 50px;}
.solution-api-con .title h2 { font-size: 28px; font-weight: normal; margin-bottom: 15px;}
.solution-api-con .title p { font-size: 14px; color: #666; max-width: 900px; margin: 0 auto;}
.solution-api-con table { width: 100%; border-collapse: collapse; text-align: left; background-color: #fff;}
.solution-api-con table th { background-color: #fff; padding: 14px 18px; font-size: 13px; font-weight: bold; border: 1px solid #eee;}
.solution-api-con table td { padding: 14px 18px; font-size: 13px; border: 1px solid #eee; vertical-align: top;}
.solution-api-con table td code { word-break: break-word; background-color: #f5f5f5; padding: 2px 6px; border-radius: 3px; font-size: 12px; color: #000;}
/* .solution-api-con table tr:hover { background-color: #fafafa;} */
.solution-api-con .api-note { margin-top: 20px; font-size: 12px; color: #999; text-align: center;}
.solution-api-con .api-note a { color: #e8363f; text-decoration: underline;}

/*--workflow--*/
.solution-workflow { background-color: #f8f8f8;}
.solution-workflow-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%;}
.solution-workflow-con .title { text-align: center; margin-bottom: 60px;}
.solution-workflow-con .title h2 { font-size: 28px; font-weight: normal; margin-bottom: 15px;}
.solution-workflow-con .title p { font-size: 14px; color: #666; max-width: 700px; margin: 0 auto;}
.solution-workflow-con .steps { text-align: left; position: relative;}
.solution-workflow-con .step { display: flex; align-items: flex-start; margin-bottom: 40px; position: relative;}
.solution-workflow-con .step:last-child { margin-bottom: 0;}
.solution-workflow-con .step .step-num { flex-shrink: 0; width: 36px; height: 36px; line-height: 36px; text-align: center; background-color: #181818; color: #fff; border-radius: 50%; font-size: 18px; font-weight: bold; margin-right: 30px; margin-top: 10px;}
.solution-workflow-con .step .step-content { flex: 1; padding-top: 5px;}
.solution-workflow-con .step .step-content h3 { font-size: 18px; margin-bottom: 8px; font-weight: bold;}
.solution-workflow-con .step .step-content p { font-size: 14px; color: #555; line-height: 1.8;}
.solution-workflow-con .step .step-content .step-tag { font-style: italic; display: inline-block; margin-top: 8px; font-size: 11px; background-color: #f8f8f8; border: 1px solid #ddd; color: #555; padding: 2px 10px; border-radius: 20px;}

/*--pricing CTA--*/
.solution-pricing-cta { background-color: #181818; color: #fff; text-align: center;}
.solution-pricing-cta-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%;}
.solution-pricing-cta-con h2 { font-size: 26px; font-weight: normal; margin-bottom: 15px;}
.solution-pricing-cta-con p { font-size: 14px; color: #aaa; margin-bottom: 50px; max-width: 1000px; margin-left: auto; margin-right: auto;}
.solution-pricing-cta-con .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 50px;}
.solution-pricing-cta-con .plan-card { background-color: #2a2a2a; border: 1px solid #333; border-radius: 8px; padding: 20px 30px; text-align: center;}
.solution-pricing-cta-con .plan-card .plan-name { font-size: 16px; font-weight: bold; margin-bottom: 5px;}
.solution-pricing-cta-con .plan-card .plan-price { font-size: 20px; color: #e8363f;}
.solution-pricing-cta-con .plan-card .plan-desc { font-size: 12px; color: #999; margin-top: 5px;}
.solution-pricing-cta-con .plan-card.recommended { border-color: #e8363f; position: relative;}
.solution-pricing-cta-con .plan-card.recommended::after { content: 'Recommended'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background-color: #e8363f; color: #fff; font-size: 10px; padding: 1px 10px; border-radius: 10px;}
.solution-pricing-cta-con .btn-pricing { display: inline-block; background-color: #e8363f; color: #fff; padding: 10px 35px; font-size: 15px; border-radius: 50px; transition: all .3s ease;}
.solution-pricing-cta-con .btn-pricing:hover { box-shadow: 0 10px 30px -2px rgba(232, 54, 63, .3); transition: all .3s ease;}

/*--solution FAQ--*/
.solution-faq { background-color: #fff;}
.solution-faq-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%;}
.solution-faq-con .title { text-align: center; margin-bottom: 50px;}
.solution-faq-con .title h2 { font-size: 28px; font-weight: normal;}
.solution-faq-con .faq-item { text-align: left; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee;}
.solution-faq-con .faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0;}
.solution-faq-con .faq-item h3 { font-size: 16px; margin-bottom: 10px; font-weight: bold; padding-left: 35px; position: relative;}
.solution-faq-con .faq-item h3 span { position: absolute; left: 0; top: 0; font-weight: normal; background: #181818; color: #fff; padding: 0 8px; border-radius: 3px; font-size: 13px;}
.solution-faq-con .faq-item p { font-size: 14px; color: #555; line-height: 1.8; padding-left: 35px;}
.solution-faq-con .faq-item a { color: #e8363f; text-decoration: underline;}

/*--related solutions--*/
.solution-related { background-color: #f8f8f8;}
.solution-related-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%; text-align: center;}
.solution-related-con h2 { font-size: 24px; font-weight: normal; margin-bottom: 40px;}
.solution-related-con ul { margin: 0 -15px;}
.solution-related-con ul li { display: inline-block; width: 33.33%; vertical-align: top; padding: 0 15px; margin-bottom: 20px;}
.solution-related-con ul li a { display: block; background-color: #fff; padding: 25px; border: 1px solid #eee; border-radius: 6px; box-shadow: 0 0 8px -2px rgba(0,0,0,0.1); transition: all .3s ease; color: #333;}
.solution-related-con ul li a:hover { box-shadow: 0 5px 20px -2px rgba(0,0,0,0.15); transition: all .3s ease; color: #000;}
.solution-related-con ul li a h3 { font-size: 15px; margin-bottom: 8px;}
.solution-related-con ul li a p { font-size: 12px; color: #999;}
.solution-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 40px; text-align: left;}
.solution-related-grid .solution-industry-card { align-items: flex-start;}

/*--breadcrumb--*/
.solution-breadcrumb { background-color: #fff; padding-top: 85px; border-bottom: 1px dotted #eee;}
.solution-breadcrumb p { max-width: 1200px; margin: 0 auto; width: 88%; text-align: left; font-size: 12px; color: #999; padding: 20px 0;}
.solution-breadcrumb a { color: #666;}
.solution-breadcrumb a:hover { color: #e8363f;}
.solution-breadcrumb span { margin: 0 6px; color: #ccc;}

/*--chains--*/
.solution-chains { background-color: #f8f8f8;}
.solution-chains-con { max-width: 1200px; margin: 0 auto; padding: 80px 0; width: 88%;}
.solution-chains-con .title { text-align: center; margin-bottom: 50px;}
.solution-chains-con .title h2 { font-size: 28px; font-weight: normal; margin-bottom: 15px;}
.solution-chains-con .title p { font-size: 14px; color: #666; max-width: 1000px; margin: 0 auto;}
.solution-chains-con .chains-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; justify-content: center;}
.solution-chains-con .chain-item { text-align: left; background-color: #fff; border: 1px solid #eee; border-radius: 6px; padding: 8px 16px; font-size: 13px; color: #333; box-shadow: 0 0 4px -1px rgba(0,0,0,0.08); display: flex; align-items: center; gap: 8px;}
.solution-chains-con .chain-item img { border-radius: 100%; width: 24px; height: 24px; object-fit: contain;}

/*--code example--*/
.solution-api-con .code-block { margin-top: 40px;}
.solution-api-con .code-block h3 { text-align: left; font-size: 16px; margin-bottom: 15px; font-weight: bold;}
.solution-api-con .code-block pre { text-align: left; background-color: #1e1e1e; color: #d4d4d4; padding: 24px; border-radius: 8px; overflow-x: auto; font-size: 13px; line-height: 1.8; font-family: 'SF Mono', 'Fira Code', Consolas, 'Courier New', monospace;}
.solution-api-con .code-block pre .comment { color: #6a9955;}
.solution-api-con .code-block pre .cmd { color: #569cd6;}
.solution-api-con .code-block pre .string { color: #ce9178;}
.solution-api-con .code-block pre .flag { color: #9cdcfe;}

/*--trust bar--*/
.trust-bar { background-color: #fff; border-bottom: 1px solid #eee; border-top: 1px solid #eee;}
.trust-bar-con { max-width: 1200px; margin: 0 auto; padding: 30px 0; width: 88%; text-align: center;}
.trust-bar-con p { font-size: 14px; color: #555; margin-bottom: 0; line-height: 1.8;}
.trust-bar-con p strong { color: #181818;}
.trust-bar-con p em { margin: 0 10px; color: #ddd;}

/*--CTA trust hints--*/
.solution-hero-con .cta-hint { margin-top: 30px; font-size: 12px; color: #999; font-style: italic;}

/*--challenges 4 columns--*/
.solution-challenges-con ul.challenges-4col li { flex: 0 0 25%;}

/*--core solutions grid (index page)--*/
.solution-core-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 40px;}
.solution-core-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 30px; transition: box-shadow 0.3s;}
.solution-core-card .card-icon { margin-bottom: 15px;}
.solution-core-card .card-icon img { width: 80px; height: 80px; object-fit: contain;}
.solution-core-card h3 { font-size: 20px; margin-bottom: 10px;}
.solution-core-card p { color: #666; font-size: 14px; margin-bottom: 20px;}
.solution-core-card .card-link { display: inline-block; border-radius: 100px; padding: 10px 30px; border: 1px solid #ddd; color: #000; font-weight: bold; text-decoration: none; transition: box-shadow 0.3s;}
.solution-core-card .card-link:hover { box-shadow: 0 5px 20px rgba(0,0,0,0.1);}

/*--industry solutions (index page)--*/
.solution-industry { background: #fff; padding: 80px 0;}
.solution-industry-con { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.solution-industry-con .title { text-align: center;}
.solution-industry-con .title h2 { font-size: 28px; margin-bottom: 15px;}
.solution-industry-con .title p { font-size: 14px; color: #666; max-width: 700px; margin: 0 auto;}
.solution-industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-top: 40px;}
.solution-industry-card { text-align: left; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 25px; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; align-items: center;}
.solution-industry-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.1);}
.solution-industry-card .card-icon { margin-bottom: 0; grid-row: 1 / 3; flex-shrink: 0;}
.solution-industry-card .card-icon img { width: 60px; height: 60px; object-fit: contain;}
.solution-industry-card h3 { font-size: 18px; margin-bottom: 0; color: #1a1a1a;}
.solution-industry-card p { color: #666; font-size: 13px; margin: 0;}

/*--why misttrack stats (index page)--*/
.solution-why { padding: 100px 0; background: #f8f8f8;}
.solution-why-con { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
.solution-why-con .title { text-align: center;}
.solution-why-con .title h2 { font-size: 28px; margin-bottom: 15px;}
.solution-why-con .title p { font-size: 14px; color: #666; max-width: 700px; margin: 0 auto;}
.solution-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 40px;}
.solution-stat-item { text-align: center;}
.solution-stat-item .stat-num { font-size: 48px; font-weight: bold; color: #000; margin-bottom: 10px;}
.solution-stat-item p { color: #666;}

/*--cta section (index page)--*/
.solution-cta { background: #222 url(../images/solutions/bg-solution.jpg) no-repeat center/cover; padding: 100px 0; text-align: center; color: #fff;}
.solution-cta-con { max-width: 900px; margin: 0 auto; padding: 0 20px;}
.solution-cta-con h2 { font-size: 30px; margin-bottom: 15px;}
.solution-cta-con p { font-size: 18px; margin-bottom: 40px; color: #ddd;}
.solution-cta-con .cta-btn-group { display: flex; gap: 15px; justify-content: center; font-size: 14px;}
.solution-cta-con .cta-btn-primary { display: inline-block; padding: 12px 50px; background: #e8363f; color: #fff; text-decoration: none; border-radius: 100px; font-weight: bold;}
.solution-cta-con .cta-btn-secondary { display: inline-block; padding: 12px 50px; background: transparent; color: #fff; text-decoration: none; border-radius: 100px; font-weight: bold; border: 1px solid #fff;}

/*--Responsive additions--*/
@media screen and (max-width: 1100px) {
    .solution-challenges-con ul.challenges-4col li { width: 50%;}
    .solution-chains-con .chains-grid { grid-template-columns: repeat(4, 1fr);}
}

@media screen and (max-width: 750px) {
    .solution-challenges-con ul.challenges-4col li { float: none; width: 100%; margin-bottom: 20px;}
    .solution-chains-con { padding: 50px 0;}
    .solution-chains-con .chain-item { font-size: 12px; padding: 8px 14px;}
    .solution-chains-con .chains-grid { grid-template-columns: repeat(2, 1fr);}
    .solution-api-con .code-block pre { font-size: 11px; padding: 16px;}
}

/*--Responsive--*/
@media screen and (max-width: 1100px) {
    .solution-hero-con h1 { font-size: 30px;}
    .solution-challenges-con ul li { flex: 0 0 50%;}
    .solution-features-con ul li { flex: 0 0 50%;}
    .solution-industry-grid { grid-template-columns: repeat(2, 1fr);}
    .solution-why-grid { grid-template-columns: repeat(2, 1fr);}
    .solution-industry-card { align-items: flex-start;}
    .solution-related-grid { grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 940px) {
    .solution-hero { flex-direction: column-reverse; gap: 40px; padding: 60px 0;}
    .solution-hero-con { padding: 0; width: 100%;}
    .solution-hero-con h1 { font-size: 26px;}
    .solution-hero-con .subtitle { font-size: 14px;}
    .solution-hero-img { width: 100%;}
    .solution-related-con ul li { width: 50%;}
    .solution-core-grid { grid-template-columns: 1fr;}
    .solution-pricing-cta-con .plans { grid-template-columns: 1fr;}
    .solution-cta-con h2 { font-size: 26px;}
    .solution-chains-con .chains-grid { grid-template-columns: repeat(3, 1fr);}
    .solution-cta-con p { font-size: 15px;}
}

@media screen and (max-width: 750px) {
    .solution-breadcrumb { padding-top: 100px;}
    .solution-hero { padding: 30px 0 50px 0; gap: 30px;}
    .solution-hero-con h1 { font-size: 22px;}
    .solution-hero-con .btn-primary { display: block; text-align: center; margin-bottom: 10px; margin-right: 0;}
    .solution-hero-con .btn-secondary { display: block; text-align: center;}
    .solution-challenges-con { padding: 50px 0;}
    .solution-challenges-con ul li { flex: 0 0 100%; margin-bottom: 20px;}
    .solution-features-con { padding: 50px 0;}
    .solution-features-con ul li { flex: 0 0 100%; margin-bottom: 20px;}
    .solution-api-con { padding: 50px 0;}
    .solution-api-con table { font-size: 11px;}
    .solution-api-con table th, .solution-api-con table td { padding: 8px 10px;}
    .solution-workflow-con { padding: 50px 0;}
    .solution-pricing-cta-con { padding: 40px 0;}
    .solution-pricing-cta-con .plans { grid-template-columns: 1fr;}
    .solution-pricing-cta-con .plan-card { min-width: auto; width: 80%;}
    .solution-faq-con { padding: 50px 0;}
    .solution-related-con { padding: 40px 0;}
    .solution-related-con ul li { width: 100%;}
    .solution-industry-grid { grid-template-columns: 1fr;}
    .solution-related-grid { grid-template-columns: 1fr;}
    /* .solution-why-grid { grid-template-columns: 1fr;} */
    .solution-stat-item .stat-num { font-size: 36px;}
    .solution-cta-con h2 { font-size: 22px;}
    .solution-cta-con p { font-size: 14px;}
    .solution-cta-con .cta-btn-group { flex-direction: column; align-items: center;}
    .solution-hero-img img { max-width: 240px;}
    .solution-cta { background-position: left center;}
    
}