/* ----------------------------------

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
*/

:root {
	--color-primary: #E91E8C;
	--color-secondary: #FF6FA5;
	--color-style-two: #7ED957;
	--color-style-three: #C2185B;
	--bg-gradient: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

/* Balnea logo size — brand mark needs to read clearly, not shrink to a 30px speck */
.navbar-brand > img,
.navbar-collapse > img,
.side .widget .logo img,
.footer-bottom-one .logo img,
footer .f-item .logo img {
	height: 100px;
	width: auto;
}

.navbar-header {
	padding: 10px 0;
}

@media (max-width: 575px) {
	.navbar-brand > img,
	.navbar-collapse > img,
	.side .widget .logo img {
		height: 60px;
	}
}

/* Balnea navbar — always black, on every page, default and scrolled state alike */
nav.navbar.validnavs,
nav.navbar.validnavs.sticked,
nav.navbar.validnavs.no-background,
nav.navbar.validnavs.no-background.sticked {
	background-color: #111121 !important;
}

nav.navbar.validnavs ul.nav > li > a,
nav.navbar.validnavs ul.nav > li.dropdown > a,
nav.navbar.validnavs.sticked ul.nav > li > a,
nav.navbar.validnavs .navbar-toggle,
nav.navbar.validnavs .navbar-toggle i,
nav.navbar.validnavs .attr-nav > ul > li > a,
nav.navbar.validnavs .attr-nav .side-menu a .bar-1,
nav.navbar.validnavs .attr-nav .side-menu a .bar-2,
nav.navbar.validnavs .attr-nav .side-menu a .bar-3 {
	color: #ffffff !important;
}

nav.navbar.validnavs .attr-nav .side-menu a .bar-1,
nav.navbar.validnavs .attr-nav .side-menu a .bar-2,
nav.navbar.validnavs .attr-nav .side-menu a .bar-3 {
	background-color: #ffffff !important;
}

nav.navbar.validnavs ul.nav > li > a:hover,
nav.navbar.validnavs ul.nav > li.active > a {
	color: var(--color-primary) !important;
}

/* The "navbar-common" layout (inner pages) wraps links in a pill that defaults to a
   near-white background — force it solid so it never reads as a transparency/opacity
   change between the default and scrolled (.sticked) state. */
nav.navbar.navbar-common ul.nav.navbar-nav.navbar-center,
nav.navbar.navbar-common.sticked ul.nav.navbar-nav.navbar-center {
	background: #111121 !important;
	border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Inner pages (.include-breadcrumb) float the nav on a white rounded "tab" card —
   force that card and its corner cutouts dark too, scroll state included. */
.include-breadcrumb nav.navbar.validnavs .container,
.include-breadcrumb nav.navbar.validnavs.sticked .container {
	background: #111121 !important;
}

.include-breadcrumb nav.navbar.validnavs .container::after,
.include-breadcrumb nav.navbar.validnavs .container::before {
	box-shadow: 0 20px 0 0 #111121 !important;
}

/* No fade/opacity transition between default and scrolled nav states */
nav.navbar.validnavs,
nav.navbar.validnavs .container,
nav.navbar.navbar-common ul.nav.navbar-nav.navbar-center {
	transition: none !important;
	opacity: 1 !important;
}

/* Mobile off-canvas menu panel — also dark, not the theme's white/slate default */
nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile {
	background: #111121 !important;
}

nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile ul.nav > li > a,
nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile ul.nav > li.dropdown > a {
	color: #ffffff !important;
}

/* Footer wordmark — thick hollow "BALNEA" that fills green left-to-right, on loop */
.balnea-fill-logo {
	position: relative;
	display: inline-block;
	font-family: var(--font-heading, 'Sora', sans-serif);
	font-weight: 800;
	font-size: 42px;
	line-height: 1;
	letter-spacing: 6px;
	text-transform: uppercase;
}

.balnea-fill-logo__outline {
	display: block;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
	text-stroke: 1.5px rgba(255, 255, 255, 0.55);
}

.balnea-fill-logo__fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0;
	overflow: hidden;
	white-space: nowrap;
	color: #7ED957;
	-webkit-text-stroke: 1.5px #7ED957;
	text-stroke: 1.5px #7ED957;
	animation: balneaFillSweep 3.5s ease-in-out infinite;
}

@keyframes balneaFillSweep {
	0% { width: 0; }
	45% { width: 100%; }
	75% { width: 100%; }
	100% { width: 0; }
}

@media (max-width: 575px) {
	.balnea-fill-logo {
		font-size: 30px;
		letter-spacing: 4px;
	}
}
