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

Template Name: Robok - AI Agency & Technology WordPress Theme
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 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
        - Navbar Box
    04. Banner
        - Banner Style One
        - Banner Style Two
        - Banner Style Three
    05. About Us
	    - About Style One
        - About Style Two
    06. Services
        - Service Style one
        - Services Style Two
        - Services Style Three
    07. Features
    08. Work Process
    09. Why Choose Us
    10. Fun Factor
    11. Pricing Table
    12. Partner
    13. Team
        - Team Style One
        - Team Style Two
        - Team Details
    14. Testimonials
		- Testimonial Style One
        - Testimonial Style Two
        - Testimonial Style Three
    15. Projects
		- Project Style One
        - Project Details
    16. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    17. Newsletter Subscribe
    18. FAQ
    19. Error 404
    20. Footer
    21. PHP Contact Form
    22. Others

*/

/* Varialbes */
:root {
	--font-default: 'Sora', sans-serif;
	--font-heading: 'Sora', sans-serif;
	--fontawesome: "Font Awesome 5 Pro";
	--black: #000000;
	--dark: #1f1f1f;
	--dark-secondary: #363e40;
	--dark-optional: #111315;
	--white: #ffffff;
	--white-secondary: #b5b5bc;
	--white-common: #cfddde;
	--color-primary: #7476ff;
	--color-secondary: #89c7fe;
	--color-style-two: #45D0BD;
	--color-style-three: #44B6E9;
	--color-heading: #000662;
	--color-paragraph: #60616c;
	--box-shadow-primary: -1px 3px 10px 0 rgba(0, 0, 0, 0.6);
	--box-shadow-secondary: 0 10px 30px 0 rgba(44, 130, 237, 0.4);
	--box-shadow-regular: 0px 2px 12px 0px #e7e7e7;
	--bg-gray: #f0f2f4;
	--bg--gray-secondary: #f4f4f4;
	--bg-gradient: linear-gradient(90deg, var(--color-primary)  0%, var(--color-secondary) 100%);
}



/* ============================================================== 
     # Reset Browsers
=================================================================== */

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body,
html {
	height: 100%;
}

html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

html, body, div, span, img, a, p, h1, h2, h3,
h4, h5, h6, option, legend, label, article, aside,
caption, figure, footer, header, hgroup,
mark, nav, section, time, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}

.wrapper {
	height: 100%;
}

img {
	border: none;
	outline: none;
	max-width: 100%;
	height: auto;
}

label {
	display: inline-block;
	font-weight: normal;
	margin-bottom: 5px;
	max-width: 100%;
}

a {
	outline: none;
	text-decoration: none;
	color: var(--color-heading);
}

a img {
	border: none;
}

a:active {
	outline: none;
	text-decoration: none;
	color: var(--color-heading);
	opacity: 1;
}

a:focus {
	outline: none;
	text-decoration: none;
	color: var(--color-heading);
}

a:hover {
	outline: none;
	text-decoration: none;
	color: var(--color-primary);
	opacity: 1;
}

button {
	outline: medium none;
}

iframe {
	border: none;
}

hr {
	margin-top: 0;
	margin-bottom: 0;
	border: 0;
	border-top: 1px solid #eeeeee;
}

pre {
	display: block;
	margin: 0 0 30px;
	padding: 9.5px;
	word-wrap: break-word;
	word-break: break-all;
	color: #333333;
	border: 1px solid #ededed;
	border-radius: inherit;
	background-color: #f9f9f9;
	font-size: 13px;
	line-height: 1.42857143;
}

input {
	border: 1px solid #e7e7e7;
	border-radius: inherit;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
	min-height: 50px;
}

input:focus {
	outline: none;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}

textarea:focus {
	outline: none;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}

select:focus {
	outline: none;
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}

b {
	font-weight: 600;
}

strong {
	font-weight: 600;
}

.row {
	--bs-gutter-x: 30px;
}

i::before {
	line-height: inherit !important;
}

.split-text {
	overflow: hidden;
	position: relative;
}

.split-text .line {
	overflow: hidden;
	display: none;
}

/* ============================================================== 
    # Template Default Styles
=================================================================== */

body {
	font-family: var(--font-default);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.8;
	overflow-x: hidden;
	background-color: var(--white);
	color: var(--color-paragraph);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading);
	font-weight: normal;
	line-height: 1.2;
	font-family: var(--font-heading);
	letter-spacing: 0;
	margin: 0;
	margin-bottom: 15px;
	font-weight: 500;
}

h1 {
	font-size: 40px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 28px;
	font-weight: 600;
}

h4 {
	font-size: 24px;
	font-weight: 600;
}

h5 {
	font-size: 18px;
	font-weight: 600;
}

h6 {
	font-size: 14px;
	font-weight: 600;
}

a, .btn, button {
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
	outline: medium none;
	text-decoration: none;
	font-weight: 600;
}

p {
	color: var(--color-paragraph);
	margin: 0 0 25px;
	text-transform: none;
	font-weight: 400;
	font-family: var(--font-default);
}


/* ============================================================== 
    # Helper CSS
=================================================================== */

@media (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1400px;

	}
}

.container-full {
	padding: 0 15px;
	margin: auto;
	max-width: 1400px;
}

@media (min-width: 576px) {
	.container-full {
		max-width: 540px;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.container-full {
		max-width: 720px;
		width: 100%;
	}
}

@media (min-width: 992px) {
	.container-full {
		max-width: 960px;
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.container-full {
		max-width: 95%;
		width: 100%;
	}
}

@media (min-width: 1400px) {
	.navbar .container-full {
		max-width: 1800px;
		width: 100%;

	}
}

.container-medium {
	padding: 0 15px;
	margin: auto;
}

@media (min-width: 576px) {
	.container-medium {
		max-width: 540px;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.container-medium {
		max-width: 720px;
		width: 100%;
	}
}

@media (min-width: 992px) {
	.container-medium {
		max-width: 960px;
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.container-medium {
		max-width: 1600px;
		width: 100%;
	}
}

.container-fill {
	padding: 0 15px;
	margin: auto;
	max-width: 100%;
}

@media (min-width: 576px) {
	.container-fill {
		max-width: 540px;
		width: 100%;
	}
}

@media (min-width: 768px) {
	.container-fill {
		max-width: 720px;
		width: 100%;
	}
}

@media (min-width: 992px) {
	.container-fill {
		max-width: 960px;
		width: 100%;
	}
}

@media (min-width: 1200px) {
	.container-fill {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 1199px) {
	.container-fill {
		padding: 0 25px;
		width: 100%;
	}
}

@media only screen and (min-width: 1367px) {
	.container-stage {
		margin-left: calc((100% - 1400px)/ 2);
		width: auto;
		min-width: auto;
		max-width: inherit;
		padding-right: 0;
	}

	.container-stage-lg {
		margin-left: calc((100% - 1400px)/ 2);
		width: auto;
		min-width: auto;
		max-width: inherit;
		padding-right: 50px;
	}

	.container-stage-left {
		margin-right: calc((100% - 1400px)/ 2);
		width: auto;
		min-width: auto;
		max-width: inherit;
		padding-left: 0;
	}
}

@media only screen and (max-width: 767px) {
	.row {
		--bs-gutter-x: 1.5rem;
	}
}

.bg-cover {
	background-position: center center !important;
	background-size: cover !important;
}

.bg-contain {
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: left top !important;
}

.bg-fixed {
	background-attachment: fixed !important;
	background-position: center center !important;
	background-size: cover !important;
}

.bg-fit {
	background-size: 100% 100% !important;
	background-position: center !important;
}

.bg-gray {
	background: var(--bg-gray);
}

.bg-gray-secondary {
	background: var(--bg--gray-secondary);
}

.bg-light {
	background-color: var(--white);
}

.bg-dark {
	background-color: var(--dark-optional) !important;
}

.bg-dark-secondary {
	background-color: var(--dark-secondary) !important;
}

.bg-dark-optional {
	background-color: var(--dark) !important;
}

.bg-theme {
	background-color: var(--color-primary);
}

.bg-theme-secodnary {
	background-color: var(--color-secondary);
}

.bg-gradient {
	background-color: var(--color-primary);
	background: var(--bg-gradient) !important;
}

.bg-gradient-secondary {
	background-color: var(--color-secondary);
	background: var(--bg-gradient-secondary) !important;
}

.gradient-bg {
	background-color: var(--color-primary);
	background: var(--gradient-bg) !important;
}

.text-light {
	color: var(--white);
}

.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5,
.text-light h6,
.text-light p,
.text-light span,
.text-light a {
	color: var(--white);
}

.shadow {
	-webkit-box-shadow: inherit !important;
	box-shadow: inherit !important;
}

.shadow.dark {
	position: relative;
	z-index: 1;
}

.shadow.dark:after {
	background: var(--black);
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.4;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.shadow.dark-hard {
	position: relative;
	z-index: 1;
}

.shadow.dark-hard:after {
	background: rgba(0, 4, 30, 0) none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.5;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.shadow.theme {
	position: relative;
	z-index: 1;
}

.shadow.theme:after {
	background: var(--color-primary);
	content: "";
	height: 100%;
	left: 0;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	transition: all 0.35s ease-in-out;
}

.shadow.theme-hard {
	position: relative;
	z-index: 1;
}

.shadow.theme-hard:after {
	background: var(--dark);
	content: "";
	height: 100%;
	left: 0;
	mix-blend-mode: multiply;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	transition: all 0.35s ease-in-out;
	opacity: 0.7;
}

.shadow.light {
	position: relative;
	z-index: 1;
}

.shadow.light:after {
	background: var(--white) none repeat scroll 0 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.6;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}

.default-padding,
.default-padding-top,
.default-padding-bottom,
.default-padding-mx {
	position: relative;
}

.default-padding {
	padding-top: 120px;
	padding-bottom: 120px;
}

@media only screen and (max-width: 767px) {
	.default-padding {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

.default-padding-big {
	padding: 250px 0;
}

@media only screen and (max-width: 767px) {
	.default-padding-big {
		padding: 50px 0;
	}
}

.default-padding-top {
	padding-top: 120px;
}

@media only screen and (max-width: 767px) {
	.default-padding-top {
		padding-top: 70px;
	}
}

.default-padding-bottom {
	padding-bottom: 120px;
}

@media only screen and (max-width: 767px) {
	.default-padding-bottom {
		padding-bottom: 70px;
	}
}

.default-padding.bottom-less {
	padding-top: 120px;
	padding-bottom: 90px;
}

@media only screen and (max-width: 767px) {
	.default-padding.bottom-less {
		padding-top: 70px;
		padding-bottom: 40px;
	}
}

.default-padding-bottom.bottom-less {
	margin-bottom: -30px;
}

@media only screen and (max-width: 767px) {
	.default-padding-bottom.bottom-less {
		margin-bottom: 0;
	}
}

.default-padding-top.bottom-less {
	margin-bottom: -30px;
}

@media only screen and (max-width: 767px) {
	.default-padding-top.bottom-less {
		margin-bottom: -20px;
	}
}

@media only screen and (min-width: 1200px) {
	.align-center {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.align-end {
		align-items: end;
	}
}

.relative {
	position: relative;
}

.overflow-hidden {
	overflow: hidden;
}

.border-top {
	border-top: 1px solid #e7e7e7;
}

.border-bottom {
	border-bottom: 1px solid #e7e7e7;
}

.border-left {
	border-left: 1px solid #e7e7e7;
}

.border-right {
	border-right: 1px solid #e7e7e7;
}

.heading {
	font-weight: 600;
	margin-bottom: 25px;
	font-size: 42px;
	line-height: 1.3;
	overflow: hidden;
}

.heading span {
	font-weight: 400;
}

.site-heading {
	margin-bottom: 60px;
	overflow: hidden;
}

.title {
	font-weight: 500;
	font-size: 55px;
	margin-bottom: 25px;
}

.site-heading .title {
	margin-bottom: 0;
}

.sub-title {
	text-transform: uppercase;
	color: var(--color-primary);
	font-weight: 600;
	background: var(--bg-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	position: relative;
	z-index: 1;
	border: 1px solid #d5e3f5;
	padding: 6px 15px;
	padding-top: 10px;
	border-radius: 5px;
	font-size: 20px;
}

.bg-gray .sub-title {
	border-color: #c8d7ea;
}

.bg-gray-secondary .sub-title {
    border-color: #c2c3ff;
}

.text-light .sub-title {
	color: var(--white);
	-webkit-background-clip: inherit;
	background-clip: inherit;
	-webkit-text-fill-color: inherit;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	font-weight: 500;
}

.bg-dark.text-light .sub-title {
	color: var(--color-primary);
	background: var(--bg-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	border-color: rgba(255, 255, 255, 0.2);
}

.site-heading p {
	margin-bottom: 0;
	margin-top: 25px;
}

.text-center .site-heading p,
.text-center .site-heading p {
	padding: 0 10%;
}

@media (max-width: 767px) {
	.site-heading p,
	.text-center .site-heading p,
	.text-center .site-heading p {
		padding: 0;
	}
}

@media only screen and (max-width: 767px) {
	.site-heading {
		margin-bottom: 30px;
	}
}

.heading-left {
	position: relative;
	z-index: 1;
	margin-bottom: 60px;
}

.heading-left .heading {
	font-weight: 600;
	margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
	.heading-left .heading {
		margin-bottom: 15px;
	}
}

.heading-left p {
	margin-bottom: 0;
}

.heading-left .btn {
	margin-top: 30px;
}

@media only screen and (max-width: 767px) {
	.heading-left {
		margin-bottom: 30px;
	}
}

.bg-dark .heading-left p {
	opacity: 0.8;
}

.sub-heading {
	text-transform: uppercase;
	margin: 0;
	position: relative;
	padding-left: 20px;
	margin-left: 25%;
}

.sub-heading::after {
	overflow: auto;
	right: 100%;
	content: "";
	height: 2px;
	width: 100%;
	border-top: 1px solid #cccccc;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.left-heading {
    margin-bottom: 60px;
    border-bottom: 1px solid #d5e3f5;
    padding-bottom: 50px;
}

.bg-dark .left-heading {
    border-color: rgba(255, 255, 255, 0.3);
}

.left-heading p {
	margin-bottom: 0;
	margin-top: 25px;
}

.form-group {
    margin-bottom: 15px;
}

/* ==============================================================