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

Template Name: Robok - AI Agency & Technology HTML Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Sora
Main Color   : #7476ff

-------------------------------------

[Typography]

Body copy:    15px 'Sora', sans-serif
Header:     36px 'Sora', sans-serif
Input, textarea:  16px 'Sora', sans-serif
Sidebar heading:  20px 'Sora', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
    02. Preloader
    03. Topbar
	    - Topbar Style One
        - Topbar Style Two
    04 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
        - Navbar Box
    05. Banner
        - Banner Fade
        - Banner Slide
        - Banner Zoom
    06. About Us
	    - About Style One
        - About Style Two
    07. Services
        - Tab Version
        - Grid Version
        - Services Single
    08. Features
    09. Work Process
    10. Why Choose Us
    11. Fun Factor
    12. Pricing Table
    12. Partner World Wide
    13. Team
        - Grid Version
        - Carousel Version
        - Team Details
    14. Testimonials
		- Single Slider
        - Center Slider
    15. Projects
		- Grid Version
        - Carousel Version
        - Project Details
    16. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    17. Request Call Back
    18. FAQ
    19. Error 404
    20. Footer
    21. PHP Contact Form
    22. Others

*/

/*
** Write you custom css below
*/

/* Ensure banner h2, h4, and p are always visible and inherit the white text on dark/theme backgrounds.
   Buttons are excluded: a .btn.light button needs dark text on its own white background, and the
   !important above was overriding that to white-on-white until :hover repainted it. */
.banner-style-one-area.text-light .banner-one-content h4,
.banner-style-one-area.text-light .banner-one-content h2,
.banner-style-one-area.text-light .banner-one-content p,
.banner-style-one-area.text-light .banner-one-content a:not(.btn) {
	color: var(--white) !important;
	visibility: visible !important;
}

/* Ensure banner headline strong tag stands out with its textured background */
.banner-one-content h2 strong {
	color: var(--white) !important;
	background-size: cover;
	background-position: center;
	display: inline-block;
	border-radius: 8px;
	padding: 0 10px;
}

/* Prevent GSAP from setting elements permanently invisible if script timing fluctuates */
.fade-up-anim {
	will-change: transform, opacity;
}

/* Kafunda Brand Logo Typography */
.kafunda-brand-logo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Sora', sans-serif;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: -0.5px;
	text-decoration: none !important;
}

.navbar-brand .kafunda-brand-logo {
	color: var(--white);
	transition: color 0.3s ease;
}

.navbar-sticky.sticked .navbar-brand .kafunda-brand-logo,
.navbar-common .navbar-brand .kafunda-brand-logo {
	color: var(--color-heading);
}

.kafunda-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, var(--color-primary) 0%, #a855f7 100%);
	color: var(--white);
	border-radius: 8px;
	font-size: 16px;
	font-weight: 800;
}

.footer-bottom-one .kafunda-brand-logo {
	color: var(--white);
}

/* Legal document pages (privacy, terms, dpa): plain semantic markup styled to
   match the rest of the site, rather than an MUI block dropped in with its
   own font and colours. */
.legal-content {
	color: var(--color-paragraph);
	font-size: 15px;
	line-height: 1.8;
}

.legal-content .legal-meta {
	color: var(--color-paragraph);
	font-size: 14px;
	margin-top: 8px;
}

.legal-content > p {
	margin-bottom: 20px;
}

.legal-content section {
	margin-bottom: 36px;
}

.legal-content section:last-child {
	margin-bottom: 0;
}

.legal-content h2 {
	color: var(--color-heading);
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 14px;
}

.legal-content p {
	margin: 0 0 14px;
}

.legal-content p:last-child {
	margin-bottom: 0;
}

.legal-content ul {
	margin: 0 0 14px;
	padding-left: 22px;
}

.legal-content li {
	margin-bottom: 8px;
}

.legal-content li:last-child {
	margin-bottom: 0;
}

.legal-content a {
	color: var(--color-primary);
	font-weight: 600;
}

.legal-content table {
	border-collapse: collapse;
	font-size: 13px;
	text-align: left;
	width: 100%;
}

.legal-content thead tr {
	background: var(--bg-gray);
	border-bottom: 1px solid #e7e7e7;
}

.legal-content th,
.legal-content td {
	padding: 12px;
}

.legal-content th {
	color: var(--color-heading);
	font-weight: 600;
}

.legal-content tbody tr + tr {
	border-top: 1px solid #e7e7e7;
}

.legal-content tbody td:first-child {
	color: var(--color-heading);
	font-weight: 500;
}

.legal-content .legal-table-wrap {
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	margin-bottom: 20px;
	overflow-x: auto;
}

/* Status page: live component health, plain markup and CSS rather than MUI,
   so the same theme fonts and spacing apply here too. Tone colours are literal
   (success/warning/neutral) because the rest of the theme has no equivalent
   semantic tokens to borrow. */
.status-panel {
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	padding: 20px;
}

.status-panel.tone-operational {
	background: #ecfdf3;
	border-color: #a7e8c4;
}

.status-panel.tone-degraded {
	background: #fffaeb;
	border-color: #fbd989;
}

.status-panel.tone-unknown {
	background: var(--bg-gray);
}

.status-panel-head {
	align-items: center;
	display: flex;
	gap: 14px;
}

.status-panel-head i {
	font-size: 22px;
}

.tone-operational .status-panel-head i {
	color: #16a34a;
}

.tone-degraded .status-panel-head i {
	color: #d97706;
}

.tone-unknown .status-panel-head i {
	color: var(--color-paragraph);
}

.status-panel-head h2 {
	color: var(--color-heading);
	font-size: 17px;
	font-weight: 700;
	margin: 0;
}

.status-panel-head p {
	color: var(--color-paragraph);
	font-size: 14px;
	margin: 4px 0 0;
}

.status-loading {
	align-items: center;
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	display: flex;
	height: 100px;
	justify-content: center;
}

.status-spinner {
	animation: spin 1s linear infinite;
	border: 3px solid #e7e7e7;
	border-radius: 50%;
	border-top-color: var(--color-primary);
	display: inline-block;
	height: 26px;
	width: 26px;
}

.status-section {
	margin-top: 32px;
}

.status-section-title {
	color: var(--color-paragraph);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.status-incident {
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-left-width: 3px;
	border-radius: 8px;
	margin-bottom: 14px;
	padding: 16px 18px;
}

.status-incident:last-child {
	margin-bottom: 0;
}

.status-incident.impact-minor {
	border-left-color: #38bdf8;
}

.status-incident.impact-major {
	border-left-color: #d97706;
}

.status-incident.impact-critical {
	border-left-color: #dc2626;
}

.status-incident-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.status-incident-head strong {
	color: var(--color-heading);
	font-weight: 600;
}

.status-impact {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.status-impact.impact-minor {
	color: #0284c7;
}

.status-impact.impact-major {
	color: #d97706;
}

.status-impact.impact-critical {
	color: #dc2626;
}

.status-incident p {
	color: var(--color-paragraph);
	font-size: 14px;
	margin: 8px 0 0;
}

.status-incident-meta {
	color: var(--color-paragraph);
	display: block;
	font-size: 12px;
	margin-top: 8px;
}

.status-incident a {
	color: inherit;
	text-decoration: none;
}

.status-incident a:hover strong {
	text-decoration: underline;
}

.status-incident-detail {
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-left-width: 3px;
	border-radius: 8px;
	padding: 20px 22px;
}

.status-incident-detail.impact-minor {
	border-left-color: #38bdf8;
}

.status-incident-detail.impact-major {
	border-left-color: #d97706;
}

.status-incident-detail.impact-critical {
	border-left-color: #dc2626;
}

.status-incident-detail-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.status-incident-detail-head h2 {
	color: var(--color-heading);
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}

.status-timeline {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.status-timeline-item {
	border-bottom: 1px solid #e7e7e7;
	padding: 16px 0;
}

.status-timeline-item:last-child {
	border-bottom: 0;
}

.status-timeline-item-status {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.status-timeline-item-body {
	color: var(--color-paragraph);
	font-size: 14px;
	line-height: 1.6;
	margin: 8px 0 0;
	white-space: pre-wrap;
}

.status-timeline-item-meta {
	color: var(--color-paragraph);
	display: block;
	font-size: 12px;
	margin-top: 8px;
}

.status-components {
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.status-components li {
	align-items: center;
	border-bottom: 1px solid #e7e7e7;
	display: flex;
	justify-content: space-between;
	padding: 16px 18px;
}

.status-components li:last-child {
	border-bottom: 0;
}

.status-components li span:first-child {
	color: var(--color-heading);
	font-weight: 500;
}

.status-dot {
	border-radius: 50%;
	display: inline-block;
	height: 8px;
	margin-right: 8px;
	width: 8px;
}

.status-dot.tone-operational {
	background: #16a34a;
}

.status-dot.tone-degraded {
	background: #d97706;
}

.status-dot.tone-unknown {
	background: #9ca3af;
}

.status-metrics {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {
	.status-metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.status-metric {
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	padding: 16px 18px;
}

.status-metric p:first-child {
	color: var(--color-paragraph);
	font-size: 14px;
	margin: 0;
}

.status-metric p:last-child {
	color: var(--color-heading);
	font-weight: 500;
	margin: 4px 0 0;
}

.status-footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-top: 40px;
}

.status-footer p {
	color: var(--color-paragraph);
	font-size: 14px;
	margin: 0;
}

.status-refresh {
	align-items: center;
	background: var(--white);
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	color: var(--color-heading);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-default);
	font-size: 14px;
	font-weight: 500;
	gap: 8px;
	padding: 8px 16px;
}

.status-refresh:hover:not(:disabled) {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.status-refresh:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.status-refresh i.spinning {
	animation: spin 1s linear infinite;
}