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

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

Main Font    : Sora
Main Color   : #1abcb0 (AFB Legal & Tax Advisor - teal)
Accent Color : #35558a (navy)

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

[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
*/


/* ==================================================
    Hero Smoke Background
    Replaces the banner image with a pointer-driven
    WebGL smoke plume (assets/js/hero-smoke.js).
    The gradient below is the ground the smoke sits on
    and is also the fallback when WebGL or motion is
    unavailable, so the hero never renders bare.
================================================== */

/* position + z-index are required, not cosmetic: they form the stacking context that
   keeps the -1 canvas above this section's own background instead of behind it.
   .banner-style-two-area already sets both; .brand-style-two-area has no rules at all. */
.banner-smoke-area {
	position: relative;
	z-index: 1;
	background: #06111c radial-gradient(115% 100% at 70% 25%, #143552 0%, #0a1c2e 45%, #050e18 100%) no-repeat center center / cover;
}

/* Sits above the section background, below every bit of content.
   z-index:-1 stays contained because .banner-style-two-area is
   position:relative + z-index:1, which forms a stacking context. */
.banner-smoke-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: -1;
	pointer-events: none;
}

/* Scrim over the smoke, so a drifting plume can never eat the contrast of the
   type. Painted after the canvas because ::after is last in tree order at the
   same stack level. Two variants, picked to match where the content sits. */
.smoke-scrim-left::after,
.smoke-scrim-center::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
}

/* headline on the left, artwork free to breathe on the right */
.smoke-scrim-left::after {
	background: linear-gradient(90deg, rgba(5, 14, 24, 0.72) 0%, rgba(5, 14, 24, 0.44) 38%, rgba(5, 14, 24, 0) 68%);
}


/* ==================================================
    About section - light panel
    Flips this one section out of the page-level
    .bg-dark treatment: white gradient ground, dark
    type. Selectors are prefixed with .bg-dark so they
    outrank the theme's dark rules, which use
    !important on the card background.
================================================== */

.about-style-one-area.about-light {
	background: linear-gradient(180deg, #ffffff 0%, #f5fafb 55%, #e8f1f4 100%);
}

/* the two neutral cards become clean white panels */
.bg-dark .about-light .about-style-one-info {
	background: #ffffff !important;
	background-color: #ffffff !important;
	box-shadow: 0 18px 50px rgba(16, 36, 63, 0.09);
}

.bg-dark .about-light .card-style-one-two {
	background: #ffffff;
	box-shadow: 0 18px 50px rgba(16, 36, 63, 0.09);
}

.bg-dark .about-light .card-style-one-two .bottom {
	border-color: #dbe7ea;
}

/* type goes dark */
.bg-dark .about-light .about-style-one-info h1,
.bg-dark .about-light .about-style-one-info h2,
.bg-dark .about-light .about-style-one-info h3,
.bg-dark .about-light .about-style-one-info h4,
.bg-dark .about-light .card-style-one-two h1,
.bg-dark .about-light .card-style-one-two h2,
.bg-dark .about-light .card-style-one-two h3,
.bg-dark .about-light .card-style-one-two h4 {
	color: var(--color-heading);
}

.bg-dark .about-light .about-style-one-info p,
.bg-dark .about-light .card-style-one-two p {
	color: var(--color-paragraph);
}

.bg-dark .about-light .about-style-one-info .sub-title {
	border-color: rgba(16, 36, 63, 0.14);
}

/* the oversized LTA watermark was white at 15% on the dark ground */
.bg-dark .about-light .about-style-one-info .fixed-text {
	color: var(--color-heading);
	opacity: 0.07;
}

/* The accent card keeps its gradient and white type. Black on that teal-to-navy
   gradient would not hold contrast, so it stays as the one dark-on-light element. */
.bg-dark .about-light .card-style-one-item.bg-gradient h3,
.bg-dark .about-light .card-style-one-item.bg-gradient .info p,
.bg-dark .about-light .card-style-one-item.bg-gradient .info a {
	color: var(--white);
}


/* ==================================================
    Process section - light panel
    Same treatment as .about-light. The smoke effect
    was removed from this section in the markup: it is
    additive, so it adds nothing over a white ground,
    and its scrim would darken the middle.
================================================== */

.process-style-one-area.process-light {
	background: linear-gradient(180deg, #ffffff 0%, #f5fafb 55%, #e8f1f4 100%);
}

/* the glass panel was white at 10% over dark - invisible on a white ground */
.bg-dark .process-light .process-style-one-items {
	background: #ffffff;
	backdrop-filter: none;
	box-shadow: 0 18px 50px rgba(16, 36, 63, 0.09);
}

/* the divider between steps was a white gradient hairline */
.bg-dark .process-light .process-style-one-item::after {
	background: linear-gradient(to top, rgba(16, 36, 63, 0), rgba(16, 36, 63, 0.22), rgba(16, 36, 63, 0));
}

.bg-dark .process-light .site-heading h2,
.bg-dark .process-light .process-style-one-item h4,
.bg-dark .process-light .process-style-one-item h4 a {
	color: var(--color-heading);
}

.bg-dark .process-light .site-heading p,
.bg-dark .process-light .process-style-one-item p {
	color: var(--color-paragraph);
}

.bg-dark .process-light .site-heading .sub-title {
	border-color: rgba(16, 36, 63, 0.14);
}

/* the oversized step numbers are outline-only: restroke them dark */
.bg-dark .process-light .process-style-one-item h2 {
	color: transparent;
	-webkit-text-stroke: 1px rgba(16, 36, 63, 0.38);
}

/* centred heading and cards: hold the middle back, let the edges glow */
.smoke-scrim-center::after {
	background: radial-gradient(78% 62% at 50% 42%, rgba(5, 14, 24, 0.60) 0%, rgba(5, 14, 24, 0.34) 55%, rgba(5, 14, 24, 0) 100%);
}

@media (max-width: 991px) {
	.smoke-scrim-left::after {
		background: linear-gradient(180deg, rgba(5, 14, 24, 0.62) 0%, rgba(5, 14, 24, 0.36) 55%, rgba(5, 14, 24, 0) 100%);
	}
}