/* @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900'); */
/* @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900'); */

@import 'css/bootstrap.min.css';
@import 'css/owl.carousel.min.css';
@import 'css/animate.css';
@import 'css/magnific-popup.css';
@import 'css/fa.min.css';


/* --------------------------
:: 1.0 Base CSS Start
-------------------------- */
:root {
	--white: #fff;
	--light: #ecf1f7;
	--light1: #ecf1f7;
	--dark: #100f18;
	--dark1: #35295d;
	--dark2: #0b0c1b;
	--blue: #007bff;
	--purple: #8b00e8;
	--gr_blue: hsl(193, 100%, 50%);
	--gr_purple: hsl(276, 100%, 53%);
	--gr_blue1: hsl(193, 100%, 60%);
	--gr_purple1: hsl(276, 100%, 60%);
	--gr_shadow: #5c66ff99;
	--gr_shadow1: #17003e4f;
	--gr_shadow2: #2c196cd9;
	--gr_shadow3: #ffffff4f;/*4*/
    --gr_shadow4: #4a7aec73;/*3*/

	
    --bg1: var(--white);/*63*/
    --bg2: var(--white);/*1*/
    --bg3: #f3f5f9;/*2*/
    --bg4: #daddeb;/*1*/
    --bg5: #eee; /*5*/
    --bg6: #ffffffb3;/**/
    --bg7: #eeecff;/**/

    --fg0: #000;/*9*/
    --fg1: #211b31;/*2*/
    --fg2: #363F5A;/*2*/
    --fg3: #55585f;/*12*/
    --fg4: #55585f;/*3*/
    --fg5: #abadbe;/*2*/
    --fg6: #bec0cc;/*2*/
    --fg9: #e2dbf380;/**/
	
    --i0: #5c4cff;/*30*/
    --i1: #7663f6;/*1*/
    --i2: #3d2ddc;/*5*/
    --i3: #c5bfff;/*5*/

    --p1: #7f36d2;/*1*/

    --b1: #007bff;/*4*/
    --b2: #4c87ff;/*4*/
    --b3: #4090ff;/*5*/
    --b4: #a2baff;/*6*/
    --b5: #d2daeb;/*1*/
    --b6: #4ce0ff;/*2*/

    --r0: #ff402f;/*2*/
	--r1: #ea4335;/*4*/
    --r2: #ea4c3e;/*1*/
    --r3: #e76156;/*1*/

    --g1: #34A853;/*1*/
    --g2: #28a745;/*1*/
    --g3: #3cb959;/*1*/
    --g4: #9be1ab;/*1*/

    --bs1: #c8d5f561;/*1*/
    --bs2: #00000059; /**/
    --bs3: var(--gr_shadow3);/*4*/
    --bs4: var(--gr_shadow4);/*3*/
    --bs6: #6400ff1a;/**/
	--bs7: #ffffff4f; /**/

	--brand-filter: grayscale() contrast(0.5);
}
@media (prefers-color-scheme: dark) {
	:root{

	}
}
:root[data-theme="dark"]{
	--bg1: var(--dark2);
	--bg2: #000;
	--bg3: #363F5A;
	--bg4: #55585f;
	--bg5: #999;
	--bg6: #abadbe;
	--bg7: #1f182e;
	
	--fg1: var(--white);
	--fg2: #fcfcfc;
	--fg3: var(--white);
	--fg4: #daddeb;
	--fg5: #eee; 
	--fg6: #ffffffb3;
	--fg7: #191426;

	--i2: #7663f6;/*5*/

    --bs1: #6400ff1a;/*1*/
    --bs2: #00000059; /*6*/
    --bs3: var(--gr_shadow3);/*4*/
    --bs4: var(--gr_shadow4);/*3*/
    --bs6: #6400ff1a;/**/
	--bs7: #00000059; /**/

	--brand-filter: grayscale() brightness(2);
	color-scheme: dark;
}

* {
	margin: 0;
	padding: 0;
}

body{
	color: var(--fg1);
	background-color: var(--bg1);
	width: 100%;
	min-width: 360px;
	overflow-x: hidden;
}

body, 
html {
	font-family: 'Montserrat', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: var(--fg3);
	line-height: 1.2;
}

h2{
	font-weight: 600;
}
h3,
h4 {
	font-weight: 500;
}

a,
a:hover,
a:focus,
a:active {
	/* font-weight: 400; */
	text-decoration: none;
	color: var(--i2);
	/* -webkit-transition-duration: 300ms;
	transition-duration: 300ms; */
}
a:hover{
	color: var(--i0);
}
li {
	list-style: none;
}

p {
	font-family: 'Montserrat', sans-serif;
	color: var(--fg4);
	font-size: 14px;
	font-weight: 500;
	margin-top: 0;
	line-height: 22px;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

img {
	max-width: 100%;
	height: auto;
	
	pointer-events: none;
	user-select: none;
	-moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
	user-drag: none;
    -webkit-user-drag: none;
    user-select: none;

}

.section_padding_100 {
	padding-top: 100px;
	padding-bottom: 100px;
}

.section_padding_100_0 {
	padding-top: 100px;
	padding-bottom: 0;
}

.section_padding_100_50 {
	padding-top: 100px;
	padding-bottom: 50px;
}

.section_padding_100_70 {
	padding-top: 100px;
	padding-bottom: 70px;
}

.section_padding_50 {
	padding-top: 50px;
	padding-bottom: 50px;
}

.section_padding_50_20 {
	padding-top: 50px;
	padding-bottom: 20px;
}

.section_padding_150 {
	padding-top: 150px;
	padding-bottom: 150px;
}

.section_padding_200 {
	padding-top: 200px;
	padding-bottom: 200px;
}

.section_padding_0_100 {
	padding-top: 0;
	padding-bottom: 100px;
}

.section_padding_70 {
	padding-top: 70px;
	padding-bottom: 70px;
}

.section_padding_0_50 {
	padding-top: 0;
	padding-bottom: 50px;
}

.mt-15 {
	margin-top: 15px;
}

.mt-30 {
	margin-top: 30px;
}

.mt-40 {
	margin-top: 40px;
}

.mt-50 {
	margin-top: 50px;
}

.mt-100 {
	margin-top: 100px;
}

.mt-150 {
	margin-top: 150px;
}

.mr-15 {
	margin-right: 15px;
}

.mr-30 {
	margin-right: 30px;
}

.mr-50 {
	margin-right: 50px;
}

.mr-100 {
	margin-right: 100px;
}

.mb-15 {
	margin-bottom: 15px;
}

.mb-30 {
	margin-bottom: 30px;
}

.mb-50 {
	margin-bottom: 50px;
}

.mb-100 {
	margin-bottom: 100px;
}

.ml-15 {
	margin-left: 15px;
}

.ml-30 {
	margin-left: 30px;
}

.ml-50 {
	margin-left: 50px;
}

.ml-100 {
	margin-left: 100px;
}
.btn {
	cursor: pointer;
	font-weight: 500;
	box-shadow: inset 0px 0px 4px 1px var(--bs1);
	border: 0;
}
#preloader {
	overflow: hidden;
	background-color: var(--fg1);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999999;
}
.telle-color {
	color:var(--i0);
}
.telle-preloader {
	overflow: hidden;
	-webkit-animation: 3000ms linear 0s normal none infinite running telle-preloader;
	animation: 3000ms linear 0s normal none infinite running telle-preloader;
	background-color: transparent;
	border-color: #f1f2f3 #f1f2f3 var(--i0);
	border-radius: 50%;
	border-style: solid;
	border-width: 4px;
	height: 50px;
	left: calc(50% - 25px);
	position: relative;
	top: calc(50% - 25px);
	width: 50px;
	z-index: 9;
}

@-webkit-keyframes telle-preloader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes telle-preloader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

#scrollUp {
	bottom: 30px;
	font-size: 25px;
	left: 30px;
	width: 60px;
	height: 60px;
	background: var(--i0);
	color: var(--white);
	text-align: center;
	line-height: 55px;
	border-radius: 30px;
	box-shadow: 0px 4px 8px var(--gr_shadow);
	transition: transform 200ms;
}
#scrollUp:hover {
	transform: translateY(-10px);
}

.telle-table {
	display: table;
	height: 100%;
	left: 0;
	position: relative;
	top: 0;
	width: 100%;
	z-index: 2;
}

.telle-table-cell {
	display: table-cell;
	vertical-align: middle;
}

.section-heading {
	margin-bottom: 100px;
}

.section-heading > p {
	font-weight: 700;
	color: var(--fg6);
	font-size: 12px;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.section-heading > h2 {
	font-size: 40px;
	margin: 0;
}

.section-heading > h5 {
	font-size: 22px;
	color: var(--fg5);
	line-height: 1.8;
	font-weight: 500;
}

.telle-btn {
	background-color: var(--i0);
	cursor: pointer;
	min-width: 150px;
	height: 54px;
	padding: 0 40px;
	border-radius: 1rem;
	color: var(--white);
	font-size: 16px;
	line-height: 54px;
	font-weight: 700;
	/* text-transform: uppercase; */
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
	box-shadow: 0px 0px 20px 3px var(--gr_shadow4),
	inset 0px 0px 4px 1px var(--gr_shadow3);
}

.telle-btn:hover {
	background-color: var(--b2);
	color: var(--white);
}

.bg-overlay,
.bg-overlay-white {
	position: relative;
	z-index: 1;
}

.bg-overlay:after,
.bg-overlay-white:after {
	background-color: rgba(33, 27, 49, 0.88);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: '';
	z-index: -1;
	position: absolute;
}

.bg-overlay-white:after {
	background-color: rgba(231, 235, 246, 0.89);
}

.bg-img {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Search Form CSS */

.search-form-area {
	width: auto;
	height: 50px;
	display: none;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.search-form-open .search-form-area {
	display: block !important;
}

.search-form-open .navbar-nav {
	display: none !important;
}

.search-form-area #search {
	width: 550px;
	height: 50px;
	border-radius: 10px;
	border: 2px solid var(--bg6);
	padding: 0 30px;
	color: var(--bg1) !important;
	font-size: 14px;
	background-color: transparent;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

/* --------------------------
:: 3.0 Welcome Area CSS
-------------------------- */

.welcome_area {
	position: relative;
	z-index: 2;
	height: 1080px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.hero-slides {
	position: relative;
	z-index: 2;
}

.single-hero-slide {
	height: 1080px;
	width: 100%;
	position: relative;
	z-index: 1;
}

.hero-slide-content h2 {
	font-size: 60px;
	color: var(--bg1);
	line-height: 1.8;
}

.hero-slide-content h4 {
	color: var(--bg1);
	font-weight: 400;
	margin-bottom: 0;
}

.hero-slide-content .slide-img {
	color: var(--bg1);
	margin-top: 40px;
	font-weight: 400;
}

.hero-slides .owl-prev,
.hero-slides .owl-next {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: transparent;
	line-height: 60px;
	text-align: center;
	top: 50%;
	margin-top: -30px;
	left: 50px;
	border-radius: 50%;
	color: var(--b4);
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.hero-slides .owl-next {
	left: auto;
	right: 50px;
}

.hero-slides .owl-prev:hover,
.hero-slides .owl-next:hover {
	background-color: var(--i0);
}

/* -------------------------
:: 4.0 Service Area
------------------------- */

.features-numberes-container {
	position: relative;
	z-index: 1;
}

.features-numberes-slide h2 {
	font-size: 60px;
	font-weight: 900;
	margin-bottom: 20px;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	color: var(--fg6);
}

.features-numberes-container .center .features-numberes-slide h2,
.features-numberes-slide:hover h2 {
	color: var(--i0);
}

.features-numberes-slide h4 {
	margin-bottom: 20px;
}

.features-numberes-container .owl-prev,
.features-numberes-container .owl-next {
	position: absolute;
	width: 50px;
	height: 50px;
	background-color: transparent;
	line-height: 50px;
	text-align: center;
	top: 50%;
	margin-top: -30px;
	left: -25px;
	border-radius: 50%;
	color: var(--b4);
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.features-numberes-container .owl-next {
	left: auto;
	right: -25px;
}

/* -------------------------
:: 5.0 Clients Area
------------------------- */

.clients-logo-area a{
	margin: auto;
	display: block;
	padding: 1em 0;
}
.clients-logo-area a > img {
	display: block;
	/* max-width: 170px; */
	max-width: 8rem;
	filter: var(--brand-filter);
	/* opacity: .5; */
	margin: auto;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	transition: all 0.2s;
	/* animation-fill-mode: inherit; */
}

.clients-logo-area a:hover > img {
	filter: none;
	opacity: 1;
}

.impress_area2 {
	background-image: url(img/core-img/work-progress.svg);
	background-size: cover;
	height: 566px;
}

.impress_area p,
.impress_area1 p,
.impress_area h2,
.impress_area1 h2 {
	color: var(--bg1);
}

.workflow-img img {
	margin-top: -3em;
	height: 560px;
}

.contact-icon {
	color: var(--i0);
	font-size: 1.2rem;
}

.footer-single-contact-info a:hover .contact-icon {
	color: var(--b2);
}
.footer-heading > h3 {
	font-size: 1.1em;
	color: var(--bg1);
}
.telle-btn:focus {
	color: var(--bg1);
}

.cart-anim:before{
	content: "";
	background: var(--p1);
	padding: 10px;
	margin-left: -5px;
	position: absolute;
	opacity: .8;
	border-radius: 100%;
	transform: scale(0);
	animation: cart .5s ease-out;
}

@keyframes cart {
	from {transform: scale(0); opacity: .8;}
	to {transform: scale(5); opacity: 0;}
}

.fit-content {
	width: -moz-fit-content;
	width: fit-content;
	margin: auto;
}
.hide {
	display: none;
}


/*switcher 3*/

.button-cover, .knobs, .layer
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.button
{
	position: relative;
	top: 50%;
	width: 74px;
	height: 36px;
	margin: -20px auto 0 auto;
	overflow: hidden;
	transform: scale(1.5);
}

.button.r, .button.r .layer
{
	border-radius: 100px;
}

.button.b2
{
	border-radius: 2px;
}

.checkbox
{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

.knobs
{
	z-index: 2;
}

.knobs::before,
.knobs::after
{
	box-sizing: content-box;
}


/* -------------------------
:: 6.0 Features Area
------------------------- */

.telle-features-area {
	background-color: var(--fg1);
	position: relative;
	z-index: 1;
}

.telle-features-area p{
	color: var(--bg1);
}

.features-img > img {
	width: 40%;
	position: absolute;
	bottom: -30px;
	left: 30px;
	z-index: 9;
}

.telle-features-area .section-heading {
	margin-bottom: 60px;
}

.telle-features-area .section-heading h2 {
	color: var(--bg1);
}

.barfiller {
	background: var(--bg1);
	border: none;
	border-radius: 0;
	box-shadow: inset 0px 0px 0.4rem 0 var(--bs4);
	height: 1rem;
	margin-bottom: 5px;
	/* position: relative; */
	width: 100%;
	border-radius: 10px;
}

.barfiller .fill {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	border-radius: 10px;
	background: linear-gradient(45deg, var(--i0), var(--b6) ) !important;
	box-shadow: inset 0px 0px 9px 3px var(--bs4);
}

.barfiller .tipWrap {
	display: none;
}

.barfiller .tip {
	margin-top: -24px;
	padding: 2px 4px;
	font-size: 15px;
	color: var(--i0);
	left: 80%;
	position: absolute;
	z-index: 2;
	background: transparent;
	font-weight: 500;
}

.barfiller .tip:after {
	display: none;
}

.single_progress_bar p {
	margin-bottom: 15px;
}

/* -------------------------
:: 7.0 More Service Area
------------------------- */
.features-icons-area {
}

.features-icons-card {
	width: 100%;
	height: 100%;
	/* -webkit-transition-duration: 750ms;
	transition-duration: 750ms; */
	border-radius: 3em;
	box-shadow: 0 10px 20px 10px var(--bg3);
}

.features-icons-card:hover {
	box-shadow: 0 10px 20px 10px var(--bg4);
}

.features-icons-card > img {
	margin-bottom: 40px;
	width: 92px;
}


/* -------------------------
:: 8.0 Portfolio Area
------------------------- */

.portfolio-menu {
	margin-bottom: 100px;
	margin-top: -10px;
}

.portfolio-menu > p {
	display: inline-block;
	padding: 0 15px;
	cursor: pointer;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
	margin-bottom: 0;
}

.portfolio-menu > p:hover {
	color: var(--i0);
}

.single_gallery_item {
	width: 25%;
	display: inline-block;
	float: left;
	z-index: 3;
	position: relative;
	overflow: hidden
}

.single_gallery_item > img {
	width: 100%;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.single_gallery_item:hover > img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="8" /></filter></svg>#filter');
	-webkit-filter: blur(8px);
	filter: blur(8px);
	filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=8);
}

.gallery-hover-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 9;
	left: 0;
	top: 0;
	background-color: rgba(74, 122, 236, 0.85);
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.single_gallery_item:hover .gallery-hover-overlay {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"
}

.port-hover-text h4 {
	color: var(--bg1);
	margin-bottom: 10px;
}

.port-hover-text > a {
	color: var(--bg1);
	font-size: 15px;
}

/* -------------------------
:: 9.0 Workflow Area
------------------------- */

.workflow-img img {
	position: relative;
	z-index: -10;
	width: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.single-workflow-area > h2 {
	font-size: 16px;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 47px;
	flex: 0 0 47px;
	width: 47px!important;
	height: 47px!important;
	text-align: center;
	background-color: var(--bg3);
	line-height: 47px;
	border-radius: 50%;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.workflow-content h4 {
	margin-bottom: 30px;
}

.single-workflow-area:hover h2 {
	background-color: var(--i0);
	color: var(--bg1);
}

.workflow-slides-area {
	position: relative;
	z-index: 99;
	top: -100px;
}

.telle-workflow-slides .owl-dots {
	margin-top: 60px;
	text-align: center;
}

.telle-workflow-slides .owl-dot {
	background-color: var(--bg4);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: 0 4px;
	display: inline-block;
}

.telle-workflow-slides .owl-dot.active {
	background-color: var(--i0);
}

/* -------------------------
:: 10.0 CTA Area
------------------------- */

.telle-call-to-action-area {
	position: relative;
	z-index: 1;
	background-attachment: fixed;
}

.cta-content .section-heading {
	margin-bottom: 0;
}

.cta-content .section-heading h2 {
	margin-bottom: 40px;
	color: var(--bg1);
	font-size: 44px;
}

/* -------------------------
:: 11.0 FAQ Area
------------------------- */

.panel {
	background-color: var(--bg1);
	border: 0 solid transparent;
	border-radius: 4px;
	box-shadow: 0 0 0 transparent;
	margin-bottom: 15px;
}

.single-accordion:last-of-type {
	margin-bottom: 0px;
}

.single-accordion .accor-head a {
	background-color: var(--i0);
	border-radius: 0;
	color: var(--bg1);
	display: block;
	margin: 0;
	font-weight: 500;
	padding: .8rem;
	position: relative;
	font-size: 1rem;
	text-transform: capitalize;
	border-radius: 30px;
}
.single-accordion .accor-head a.collapsed:hover {
	background-color: var(--i0);
	color: var(--bg1);
}

.single-accordion .accor-head a.collapsed {
	/* width: 75%; */
	margin: auto;
	background-color: var(--bg5);
	color: var(--fg0);
}

.single-accordion .accor-head a span {
	/* font-size: 10px; */
	position: absolute;
	left: 20px;
	text-align: center;
	/* top: 17px; */
}

.single-accordion .accor-head a.collapsed span.accor-close {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}

span.accor-open {
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
}

.single-accordion .accor-head a.collapsed span.accor-open {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
}

.single-accordion .accor-head {
	margin-bottom: 0;
	text-transform: uppercase;
}

.single-accordion .accordion-content {
	border-top: 0 solid transparent;
	box-shadow: none;
}

.single-accordion .accordion-content p {
	padding: 10px 15px 0;
	margin-bottom: 10px;
}

/* --------------------------
:: 12.0 Footer Area CSS
-------------------------- */
.footer-widget a, .footer-widget p {
	color: var(--fg9);
}
.footer-area {
	position: relative;
	z-index: 1;
	background-color: var(--dark);
}

.footer-widget h5 {
	color: var(--white);
	margin-bottom: 2rem;
}

.footer-widget ul > li > a {
	color: var(--i3);
	margin-bottom: .5rem;
	display: block;
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
}

.footer-widget a,
.footer-widget p {
	color: var(--fg9);
}

.footer-widget ul > li > a:hover {
	color: var(--white);
}
.footer-logo {
	width: 150px;
	margin-bottom: .8rem;
}
.copyright-text > p {
	margin-bottom: 0;
	font-size: 13px;
}
.copyright-text a {
	color: var(--i3);
}
.copyright-text a:hover {
	color: var(--light1);
}

.footer-social-info > a {
	color: var(--i0);
	padding: 0 15px;
	display: inline-block;
	font-size: 1em;
}
.footer-social-info > a:hover {
	color: var(--white);
}

.footer-single--blog-post {
	margin-bottom: 30px;
}

.footer-single--blog-post:last-child {
	margin-bottom: 0;
}

.footer-single--blog-post .blog-post-date > p {
	font-size: 12px;
	margin-bottom: 5px;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.footer-single--blog-post .blog-post-title > h6 {
	font-size: 14px;
	margin-bottom: 0;
	-webkit-transition-duration: 500ms;
	transition-duration: 500ms;
}

.footer-single--blog-post .blog-post-date > p:hover,
.footer-single--blog-post .blog-post-title > h6:hover {
	color: var(--i0);
}

.footer-single-contact-info .contact-icon {
	margin-right: .2em;
}

.footer-bottom-area {
	background-color: var(--fg0);
}

/* --------------------
:: 13.0 Breadcumb CSS
-------------------- */

.telle-breadcumb-area {
	height: 150px;
	width: 100%;
	position: relative;
	z-index: 1;
	/* background: round; */
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
}

.bradcumbContent h2 {
	color: var(--bg1);
	font-size: 60px;
}

.bradcumbContent .breadcrumb {
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	margin-top: 10px;
}

.bradcumbContent .breadcrumb-item a,
.bradcumbContent .breadcrumb-item {
	color: var(--bg1);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* -----------------------
:: 14.0 About Us CSS
----------------------- */

.few-words-from-ceo {
	overflow-x: hidden;
}

.telle-about-us-content .section-heading {
	margin-bottom: 50px;
}

.few-words-contents,
.few-words-thumb {
	-webkit-box-flex: 0;
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	max-width: 50%;
	height: 770px;
}

.few-words-contents {
	background-color: var(--fg1);
}

.few-words-text .section-heading {
	margin-bottom: 50px;
}

.few-words-text .section-heading h2 {
	color: var(--bg1);
}

.few-words-text > p {
	margin-bottom: 0;
}

.ceo-meta-data .ceo-thumb {
	width: 52px;
	height: 52px;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 52px;
	flex: 0 0 52px;
	border-radius: 50%;
	margin-right: 20px;
}

.ceo-meta-data .ceo-name h6 {
	color: var(--bg1);
	margin-bottom: 10px;
	line-height: 1;
}

.ceo-meta-data .ceo-name p {
	margin-bottom: 0;
	line-height: 1;
	font-size: 12px;
	font-weight: 700;
}

/* -------------------------
:: 15.0 Services Area CSS
------------------------- */

.services-content-area {
	position: relative;
	z-index: 98;
	padding: 100px 0 200px 0;
}

.services-text h2 {
	font-size: 55px;
	margin-bottom: 50px;
}

.services-text p {
	line-height: 2;
	margin-bottom: 50px;
}


/* ----------------------
:: 19.0 Contact Page CSS
---------------------- */

.contact-form-area h2,
.contact-information h2 {
	font-size: 40px;
	margin-bottom: 50px;

}
.form-control {
	color: var(--fg1);
	background-color: var(--bg2);
	border-color: var(--bg4);
}
.form-control:focus {
    color: var(--fg1);
    background-color: var(--bg7);
}
.contact-form-area .form-control {
	font-size: 18px !important;
	/* border-bottom: 2px solid #ebebeb; */
	height: 50px;
	/*margin-bottom: 6px;*/
	padding: 15px;
}
.form-control-top
{
	border-radius: 16px 16px 0 0;
	padding: 12px;
}
.form-control-mid
{
	border-radius: 0;
	padding: 12px;
}
.form-control-bot
{
	border-radius: 0 0 16px 16px;
	padding: 12px;
}
.form-control-single
{
	border-radius: 16px;
	padding: 12px;
}

.form-control-left{
	border-radius: 1rem 0 0 1rem;
}
.form-control-right{
	border-radius: 0 1rem 1rem 0;
}
.telle-btn-lg {
	width: 100%;
	cursor: pointer;
	font-size: 18px;
}
.contact-form-area .form-control:hover,
.contact-form-area .form-control:focus {
	/* box-shadow: none; */
}

.contact-form-area textarea.form-control {
	height: 140px;
}

.contact-social-info > a {
	color: var(--fg5);
	padding: 0 10px;
	display: inline-block;
}

.contact-social-info > a:hover {
	color: var(--i0);
}

#googleMap {
	width: 100%;
	height: 680px;
}

/* -----------------------
:: 20.0 Elements Area CSS
----------------------- */

.elements-title h2 {
	margin-bottom: 60px;
	font-size: 24px;
}

.telle-btn.telle-btn-2 {
	/* border: 2px solid var(--i0); */
	color: var(--fg2);
	background-color: var(--bg1);
}

.telle-btn.telle-btn-2:hover,
.telle-btn.telle-btn-2:focus {
	/* border: 2px solid var(--i0); */
	color: var(--bg1);
	background-color: var(--i0);
}

.telle-btn.telle-btn-3 {
	border: none;
	color: var(--fg4);
	background-color: var(--bg3);
	box-shadow: inset 0 0px 9px 1px var(--bs2);
}

.telle-btn.telle-btn-3:hover,
.telle-btn.telle-btn-3:focus {
	color: var(--white);
	background-color: var(--b2);
}

.telle-cool-facts-area {
	width: 100%;
}

.telle-cool-facts-area .counter-area > h3 {
	color: var(--i0);
	font-size: 60px;
	margin-bottom: 0;
	line-height: 1;
}

.telle-cool-facts-area .cool-facts-content > p {
	color: var(--fg1);
}

.download_link i{
	font-size: 3rem;
	background: var(--fg3);
	/* display: block; */
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.download_link:hover i{
	transition: 100ms;
	/* display: inline-block; */
	background: -webkit-linear-gradient(45deg, var(--p1),var(--b6) );
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}
.app a.download_link {
	color: var(--fg1);
	box-shadow: 0px 0px 45px 3px var(--bs6);
	border-radius: 1em;
	position: relative;
	min-width: 8rem;
	/* font-size: 1.3em; */
}
.app a.download_link:hover {
	box-shadow: 0px 0px 45px 3px var(--bs4);
}
.download_link .badge{
	position: absolute;
	right: 0.5rem;
	top: 0.5rem;
}

.payment-icons {
	width: 300px;
}
.pricing>div{
	align-self: stretch;
}

.pricing .card {
	background-color: var(--bg2);
	box-shadow: 0px 0px 20px 0px var(--bs1);
	justify-content: space-between;
	height: 100%;
}
.pricing .card img{
	width: 12rem;
	margin: auto;
}


.navbar-prof {
	display: flex;
	flex-direction: row;
	padding: 0.2rem;
	background: var(--bg7);
	border-radius: 1rem;
	width: fit-content;
	gap: .1rem;
}

.ma {
	margin: auto;
	justify-content: center;
}
.prof-link {
	padding: 0.5rem 1rem;
	font-weight: 500;
	/* box-shadow: inset 0px 0px 0.4rem 0 var(--bs4); */
	/* border: 1px solid #5c4cff69; */
	border-radius: 0.8rem;
	flex-grow: 1;
	/* margin: 0.2rem; */
}
.prof-link:hover {
	color: var(--white);
	background-color: var(--gr_shadow);
	/* box-shadow: inset 0px 0px 4px 1px var(--bs3); */
}
.prof-link.active {
	color: var(--white);
	background-color: var(--i0);
	box-shadow: inset 0px 0px 4px 1px var(--bs3);
	/* background: linear-gradient(-150deg, var(--i2),var(--b3) ); */

}

#history span {
	margin-left: 1em;
}
#history td {
	padding: 5px 10px;
	color: var(--fg1);
	font-weight: 500;
	border: 2px solid var(--bs7);
	border-top: 0;
    border-bottom: 0;
}
#history th {
	padding: 12px 5px; 
	color: var(--white);
	border: 2px solid var(--bs7);
	border-top: 0;
    border-bottom: 0;
}
table#history > thead > tr {
	background: linear-gradient(-150deg, var(--i2),var(--b3) );
}
table#history > thead > tr > th:first-child {
	border-radius: 20px 0px 0px 0px;
	border-left: 0;
}
table#history > thead > tr > th:last-child {
	border-radius: 0px 20px 0px 0px;
	border-right: 0;
}
table#history > tbody > tr:last-child > td:first-child {
	border-radius: 0px 0px 0px 20px;
}
table#history > tbody > tr:last-child > td:last-child {
	border-radius: 0px 0px 20px 0px;
}
table#history > tbody td:first-child {
	border-left: 0;
}
table#history > tbody td:last-child {
	border-right: 0;
}

table#history {
	border-radius: 20px;
	box-shadow: 0px 0px 20px 3px var(--bs4);
}

#history tr:hover > td{
	background-color: var(--bs4);
	/* box-shadow: 0px 0px 20px 3px var(--bs3); */
}

.history {
	border-radius: 20px;
}

.order-paid {
	background: var(--g4);
	padding: 0.25em .5em;
	border-radius: 0.25em;
	color: var(--dark);
}
.order-open {
	background: var(--i3);
	padding: 0.25em .5em;
	border-radius: 0.25em;
}
.order-canceled {
	background: var(--b5);
	padding: 0.25em .5em;
	border-radius: 0.25em;
}

.pricing-icon{
	width: 7rem;
	border-radius: 2em;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-name: heroIcon;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in;
	pointer-events: none;
}
.hero-icon{
	width: 8em;
	box-shadow: 0px 0px 45px 3px #4c81ff73;
	padding: 0.3rem;
	border-radius: 4em;
	animation-duration: 2s;
	animation-name: heroIcon;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in;
	pointer-events: none;
}
@keyframes heroIcon {
	from {
		filter: hue-rotate(-5deg) saturate(1.0) ;
	}
	to {
		filter: hue-rotate(50deg) saturate(1.0) ;
	}
}

/* --------------------------------
============= The End =============
---------------------------------*/

.footer-heading > h3 {
	font-size: 1.1em;
	color: var(--white);
}


.footer-heading p {
	color: #aaa;
}
.grey-bg {
	background-color: var(--bg3);
	padding: 2em 1em;
	border-radius: 2em;

}
.grey-bg input,
.grey-bg textarea {
	background-color: var(--bg1) !important;
}
.grecaptcha-badge { 
	visibility: hidden;
}

.grey {
	color: var(--fg3);
}
.dark-grey {
	color: var(--fg5);
}
.white {
	color: var(--bg1);
}

.g-btn {
	font-weight: 500;
	text-transform: none;
	font-family: 'Montserrat', sans-serif;
	background-color: var(--b2);
	color: var(--white);
	border-radius: 1rem;
	/* background: linear-gradient(-150deg, var(--i2),var(--b3) ); */
}

.g-btn:hover {
	background-color: var(--i0);
	/* background: linear-gradient(-100deg, var(--i2),var(--b3) ); */
	/* background-color: linear-gradient(-100deg, var(--i2),var(--b3) ); */
}
.g-btn img {
	width: 2.5rem;
    margin-right: .5rem;
    background: var(--white);
    border-radius: 2em;
}
.triangle-wrap .triangle {
	pointer-events: none;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%) translateY(8px);
	width: 0;
	border-bottom: solid 10px #cce5ff!important;
	border-right: solid 10px transparent;
	border-left: solid 10px transparent;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
  }
  .triangle-wrap {
	  opacity: 0;
	  width: 100%;
	  position: relative;
  }
  .triangle-wrap.open-triangle {
	  opacity: 1;
  }
  
  .triangle-wrap {
	  pointer-events: none;
  }
  .triangle-menu {
	  transform: translateX(-50%) translateY(61px) !important;
  }
  
  /* blog triangle */
  .nav-item.active .blog-nav {
	  opacity: 1 !important;
  }
  .triangle-wrap>.triangle-blog {
	  border-bottom: solid 10px var(--p1) !important;
  }
  
  @media (max-width: 992px) {
	  .nav-item.active .blog-nav {
		  opacity: 0 !important;
	  }
  }
  /* blog triangle */

  .dropdown-toggle:after{
	content: '';
	transform: rotate(45deg) scale(1.5);
	border: solid var(--white);
	border-width: 0 2px 2px 0;
	padding: 2px;
	margin: -1px 0 -1px 10px;
	transition: .3s ease;
}

.show > .dropdown-toggle:after{
	transform: rotate(-135deg) translate(-2px, -2px) scale(1.5);	
}
.f-4 {
	font-weight: 400;
}
.f-5 {
	font-weight: 500;
}
.f-6 {
	font-weight: 600;
}


/* checkout -------------------*/

.card-panel {
	background-color: var(--bg1);
	border-radius: 16px;
	margin: 5px;
	padding: 16px;
	box-shadow: 0px 0px 20px 0px var(--bs1);
}
.card-panel-top {
	border-radius: 16px 16px 0 0;
}
.card-panel-bottom {
	border-radius: 0 0 16px 16px;
}
.select-btn{
	background-color: var(--bg1);
	box-shadow: 0px 0px 20px 0px var(--bs1);
	color: var(--fg3);
	display: flex;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 20px;
	padding-bottom: 20px;
	width: -webkit-fill-available;
	width: -moz-available;
	justify-content: space-between;
	cursor: pointer;
	transition: none;
}
.card-panel img {
	max-width: 12rem;
}
.payment-icons-sm {
	height: 25px;
	width: auto;
	/* margin-top: 10px;
	margin-bottom: 10px; */
}
.sum-item:first-child {
	border-radius: 16px 16px 0 0;
}
.sum-item:last-child {
	border-radius: 0 0 16px 16px;
}
.sum-item {
	background-color: var(--bg1);
	box-shadow: 0px 0px 20px 0px var(--bs1);
	color: var(--fg3);
	display: flex;
	/* margin-top: 12px; */
	padding: 16px;
	width: -webkit-fill-available;
	justify-content: space-between;
}
.panel {
	/* width: 40%; */
	/* min-width: 410px; */
	margin: 0 auto !important;
	/*
	background-color: var(--bg1);
	border: 1px solid transparent;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
	border-color: #ddd; */
}
.panel-heading {
	padding: 10px 15px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}
.panel > .panel-heading {
	color: var(--fg3);
	background-color: var(--bg1);
}
.panel-heading p{
	font-size: 16px;
}
.panel-heading select{
	width: 100%;
	font-size: 15px;
	padding: 5px;
}
.panel-title {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 20px;
	color: var(--fg3);
	font-weight: 600;
}
.panel-body {
	padding: 15px;
}
.form-group {
	margin-bottom: 15px;
}
label {

	font-weight: 500;
	font-size: 14px;
}
.field {
	display: block;
	width: 100%;
	height: 48px;
	padding: 12px 20px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--fg3);
	background-color: var(--bg1);
	border-radius: .3rem;
	border: 0;
	box-shadow: 0px 0px 20px 0px var(--b4);
	-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
div.field{
	padding-bottom: 0;
}
select.field{
	cursor: pointer;
}
.field:hover {
	box-shadow: 0px 0px 20px 0px var(--b4);
}
.field:focus {
	border-color: var(--b4);
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
.left {
	width: 45%;
	float: left;
}
.right {
	width: 35%;
	float: right;
}
.right .field{
	width: 75%;
}
.form-group iframe{
	height: 30px !important;
}
#paymentResponse p{
	font-size: 16px;
	padding: 10px;
	color: var(--r1);
	margin: 10px;
}

.status{
	padding: 15px;
	color: var(--fg0);
	background-color: var(--bg5);
	box-shadow: 0 2px 5px 0 var(--bs2), 0 2px 10px 0 var(--bs6);
	margin-bottom: 20px;
}
.status h1{
	font-size: 1.8em;
}
.status h4{
	font-size: 1.3em;
	margin-bottom: 0;
}
.status p{
	font-size: 1em;
	margin-bottom: 0;
	margin-top: 8px;
}
.btn-link{
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	text-decoration: none;
}
.btn-link {
	color: var(--b1);
	background-color: transparent;
	border-color: var(--b1);
}
.btn-link:hover, .btn-link:active, .btn-link:focus {
	color: var(--bg1);
	background-color: var(--b1);
	border-color: var(--b1);
	text-decoration: none;
}
.success{
	color: var(--g1);
}
.error{
	color: var(--r1);
}

.billing-card {
	padding: .5rem 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	border-radius: .3rem;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	background-color: var(--bg1);
	box-shadow: 0px 0px 20px 0px var(--bs1);
	color: var(--fg3);
	margin-top: 12px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.billing-details {
	display: flex;
	width: -webkit-fill-available;
	justify-content: space-between;

}
.billing-actions {
	display: flex;
	width: -webkit-fill-available;
	justify-content: flex-end;
}
.billing-actions .btn {
	margin: 0 0 0 12px;
	clear: both;
	font-weight: 400;
	color: var(--fg1);
	text-align: inherit;
	white-space: nowrap;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
}
.billing-actions .btn:hover {
	color: var(--bg1);
}


.btn-telle:focus,
.btn-telle:hover {
	background-color: var(--i0);
	border-color: var(--i0);
	color: var(--bg1);
}

.billing-actions .btn.disabled {
	cursor: inherit;
}
.billing-actions .btn.disabled:hover {
	background-color: var(--bg5);
	color: var(--fg1);
}
.billing-add {
	cursor: pointer;
	padding: .5rem 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	border-radius: .3rem;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	border: 1px solid transparent;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	background-color: transparent;
	color: var(--fg3);
	margin-top: 12px;
	padding-top: 20px;
	padding-bottom: 20px;
	border: 3px dashed var(--bg4);
}
.billing-add:hover {
	background-color: var(--bg1);
}

.btn_cancel,
.btn_done {
	margin-right: .5rem;
}
.btnLoading {
	cursor: initial;
}
.btnCancelJQ,
.btnDoneJQ{
	cursor: initial;
}
.btnDone{
	cursor: initial;
	position: relative;
	/* box-shadow: 0 3px 16px 0 var(--bs4); */
	animation: pulse 1.5s ease-out ;
	transition: 200ms;
}
.btnDone::after,.btnDone::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	animation: pulse 3.0s ease-out ;
}
.btnCancel{
	cursor: initial;
	animation: error 0.3s ease-out ;
}

.shake{
	animation: error 0.3s ease-out ;
}
.ring{
	animation: ring 0.4s ease-out ;
}

.tp-spin {
	-webkit-animation: tp-spin 2s infinite linear;
	animation: tp-spin 2s infinite linear;
}

.spinner {
	display: inline-flex;
	width: 1em;
	height: 1em;
	left: calc(50% - 17px);
	background: transparent;
	box-sizing: border-box;
	border-top: 2px solid;
	border-left: 2px solid;
	border-right: 2px solid transparent;
	border-bottom: 2px solid transparent;
	border-radius: 100%;
	animation: spin 0.6s ease-out infinite;
	margin-right: .5rem;
}
@keyframes spin {
	100% {transform: rotate(360deg)}
}
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 var(--bs4)
	}

	100%,30% {
		box-shadow: 0 0 0 36px transparent
	}
}
@keyframes error {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
	25% {
		-webkit-transform: translateX(-1rem);
		transform: translateX(-1rem)
	}
	50% {
		-webkit-transform: translateX(1rem);
		transform: translateX(1rem)
	}
	75% {
		-webkit-transform: translateX(-1rem);
		transform: translateX(-1rem)
	}
	100% {transform: translateX(0)}
}

@keyframes ring {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);
	}
	50% {
		-webkit-transform: rotate(-40deg);
		transform: rotate(-40deg);
	}
	75% {
		-webkit-transform: rotate(40deg);
		transform: rotate(40deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}


@-webkit-keyframes tp-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

@keyframes tp-spin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	100% {
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg)
	}
}

.fade-out{
	opacity: 0;
}
.pr-cent {
	font-size: 90%;
}
.inline-flex {
	display: inline-flex;
}

.notify-wrap{
	/* top: 0;
	margin-top: 0px;
	z-index: 10;
	width: 100%; */
	opacity: 1;
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
	display: flex;
	justify-content: flex-end;
}

.notify {
	position: fixed;
	box-shadow: 0 6px 20px var(--bs2);
	width: fit-content;
	border: none;
	background: linear-gradient(45deg, var(--i1),var(--i0));
	color: var(--bg1);
	z-index: 30;
	padding: .75rem 1.25rem;
	margin-bottom: 1rem;
	margin-top: .5rem;
	border-radius: .5rem;
	max-width: 50%;
}
.notify a{
	border-bottom: 1px solid;
	color: var(--bg1);
}
.notify-red {
	background: linear-gradient(45deg, var(--r3),var(--r2));
}
.notify-green {
	background: linear-gradient(45deg, var(--g3),var(--g2));
}
.notify-icon{
	margin-right: 1em;
}
#notifications.dropdown-menu {
	right: 0;
	left: auto;
}

.hidden {
	display: none!important;
}

.em1 {
	font-size: 1em;
}
.em2 {
	font-size: 2em;
}
.em3 {
	font-size: 3em;
}
.em4 {
	font-size: 4em;
}
.setting-card {
	/* height: 100%; */
	padding: 2rem 2rem;
	font-size: 1.25rem;
	line-height: 1.5;
	border-radius: 1rem;
	font-weight: 400;
	text-align: center;
	vertical-align: middle;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	background-color: var(--bg1);
	box-shadow: 0px 0px 20px 0px var(--bs1);
	color: var(--fg3);
	margin: 1rem 0;
}
.btn-round {
	border-radius: 5em;
	padding: 0.8rem 2.5rem;
}

.btn-red-all {
	color: var(--bg1);
	background-color: var(--r1);
	border-color: var(--r1);
}
.btn-red:focus,
.btn-red:hover {
	color: var(--bg1);
	background-color: #ff402f;
	border-color: #ff402f;
}
.btn.disabled, .btn:disabled {
	cursor: initial;
}
.form-control {
	font-family: Arial, Helvetica, sans-serif;
}
.underline{
	/* text-decoration: underline; */
	border-bottom: 1px solid;
}
.billing-details span {
	position: relative;
	overflow: hidden;
}
/*
.billing-details span::after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 36px;
	height: 2em;
	background: linear-gradient(to right,rgba(255,255,255,0) 0%,white 100%);
}
*/



.name {
	font-size: 12px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: var(--fg2);
	margin: auto;
	display: inline;
	line-height: 12px;
}
.capital {
	display: none;
}
.alpha-2 {
	display: none;
}
img.flag {
	border-radius: .3em;
	width: 2rem;
	height: 1.5rem;
	opacity: .7;
	margin-right: 12px;
	box-shadow: 0px 0px 10px 0px var(--bs2);
}
.country {
	float: left;
	margin: 1em 0;
	display: flex;
}
.country-obj{
	border-radius: 1em;
}
.country-obj:hover{
	box-shadow: 0px 0px 19px 2px var(--gr_shadow);
	background-color: var(--bs7);
}
.country-obj:hover img.flag {
	opacity: 1;
}

.region-map {
    filter: contrast(0.5) sepia(1) hue-rotate(216deg) saturate(5.5);
    opacity: 0.2;
    z-index: 0;
}

.region-flag {
	border-radius: 0.5em;
	/* width: 8em;
	height: 6em; */
	opacity: .7;
	box-shadow: 0px 0px 19px 2px var(--gr_shadow);
	position: absolute;
    right: 50%;
    bottom: 50%;
    /* transform: scale(2.5); */
}
.region h2 {
	-webkit-transition-duration: 200ms;
	transition-duration: 200ms;
}
.region:hover h2 {
	color: var(--i0);
}


.cta-area{
	padding: 4rem 0;
	background: var(--bg7);
}
.hero-area{
	padding: 4rem 0;
	background: var(--bg7);
	clip-path: polygon(50% 0%, 100% 0, 100% 90%, 80% 90%,50% 100%,20% 90%, 0 90%, 0 0);

}
.hero-area .hero-p {
	font-size: 1rem;
}

/* .bg-blob img {
    background: var(--bs1);
    border-radius: 100%;
    box-shadow: 
		inset 0 0 0 5rem var(--bs1),
		0 0 0 -7rem var(--bs1);
} */

.bg-blob img {
	z-index: 2;
}
.bg-blob {
	position: relative;
	z-index: 0;
}
.blob {
	position: absolute;
	left: 50%;
    top: 50%;
	z-index: -1;
	animation: blob_pulse 20s ease-in-out infinite;
}
.blob::before {
	content: '';
	border-radius: 100%;
	position: absolute;
	transform: translateX(-40%) translateY(-60%);
	z-index: 1;
	background-color: var(--bs1);
	width: 15rem;
	height: 15rem;
	max-width: 30vw;
	max-height: 30vw;
	/* filter: blur(2rem); */
	box-shadow: 
		/* 0 0 0 5rem var(--bs1), */
		0 0 0 7rem var(--bs1) ;
	animation: blob_wiggle_b 20s ease-in-out 1s infinite forwards;
}
.blob::after {
	content: '';
	border-radius: 100%;
	position: absolute;
	transform: translateX(-43%) translateY(-50%);
	z-index: 1;
	background-color: var(--bs6);
	width: 15rem;
	height: 15rem;
	max-width: 30vw;
	max-height: 30vw;
	filter: blur(2rem);
	box-shadow: 
		/* 0 0 0 5rem var(--bs1), */
		0 0 0 7rem var(--bs6) ;
	animation: blob_wiggle_a 20s ease-in-out infinite forwards;
}
@keyframes blob_pulse {
	from {
		transform: scale(1);
	}

	25% {
		transform: scale(1.02);
	}
	50% {
		transform: scale(0.99);
	}
	75% {
		transform: scale(1.02);
	}
	to {
		transform: scale(1);
	}
}
@keyframes blob_wiggle_a {
	from {
		transform: translateX(-43%) translateY(-50%) scale(1);
	}

	25% {
		transform: translateX(-63%) translateY(-40%) scale(1.02);
	}
	50% {
		transform: translateX(-46%) translateY(-60%) scale(0.99);
	}
	75% {
		transform: translateX(-35%) translateY(-65%) scale(1.02);
	}
	to {
		transform: translateX(-43%) translateY(-50%) scale(1);
	}
}
@keyframes blob_wiggle_b {
	from {
		transform: translateX(-40%) translateY(-60%) scale(1);
	}
	25% {
		transform: translateX(-50%) translateY(-55%) scale(0.99);
	}
	50% {
		transform: translateX(-36%) translateY(-60%) scale(1.02);
	}
	75% {
		transform: translateX(-55%) translateY(-55%) scale(0.99);
	}
	to {
		transform: translateX(-40%) translateY(-60%) scale(1);
	}
}

.menu_area #nav .nav-link {
	font-size: 15px;
	-webkit-transition: box-shadow 200ms;
	transition: box-shadow 200ms;
	border-radius: 1rem;
}
.toggler {
    cursor: pointer;
    position: relative;
	margin: 0;
	color: var(--white);
	padding: 0.8em 0.5em;
	margin: 0.2em;
	font-size: 15px;

}
.toggler__input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}
.toggler__visual {
    width: 32px;
    height: 18px;
    border: 1px solid var(--white);
    border-radius: 12px;
    padding: 2px;
    background-color: transparent;
	margin-left: 10px;
    margin-right: 10px;
}
.toggler__visual-handle {
    background: var(--white);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transition: -webkit-transform .15s;
    transition: transform .15s;
    transition: transform .15s,-webkit-transform .15s;
}

.toggler__input:checked~.toggler__visual .toggler__visual-handle {
    -webkit-transform: translateX(14px);
    transform: translateX(14px);
}

.feature-icon{
	width: 4rem;
}
.ntf_card {
    padding: .8rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem;
    font-weight: 400;
    text-align: left;
    /* white-space: nowrap; */
    vertical-align: middle;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    background-color: var(--bg1);
    box-shadow: 0px 0px 20px 0px var(--bs4);
    color: var(--fg3);
    margin-top: 0.5rem;
}
.ntf_title {
	font-size: 1.2rem;
	font-weight: 600;
}
.ntf_body {
	font-size: 1rem;
}
.ntf_time {
	font-size: 0.75rem;
}
.ntf_text_container {
	display: block;
	flex-grow: 1;
}
.ntf_icon_container img{
	width: 32px;
	height: auto;
	max-height: 32px;
}
#notifications_list .ntf_card {
	scroll-margin-top: 100px;
}
.ntf_card.active {
	outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}
.ntf_mini_card {
    padding: .8rem;
    font-size: 1rem;
    /* line-height: 1.5; */
    /* border-radius: .3rem; */
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    /* box-shadow: 0px 0px 5px 0px var(--bs1); */
    color: var(--fg3);
    margin-top: 0.1rem;
}

/* ---------- menu expandable ---------- */

.header_area.sticky {
	/* background: linear-gradient(181deg, #3b00d1,#8b0fff ); */
	background: linear-gradient(
		181deg
		, hsl(266deg 100% 30% / 100%),
		hsl(225deg 100% 60% / 60%) );
	/* box-shadow: 0 6px 20px var(--bs4); */
	height: 6rem;
	/* width: 100%; */
	position: sticky;
	top: 0;
	z-index: 2000;
}
.header_backdrop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	z-index: -1;
	background: var(--bs6);
}
.menu_top {
	display: flex;
	clear: both;
    width: 100%;
    left: 0;
    top: 0;
    padding: .6rem 0;
    z-index: 2005;
	justify-content: space-between;
}
.menu_left{
	height: fit-content;
	display: flex;
	align-items: center;
	min-width: 150px;
	margin: 0 1rem 0 0;
}
.menu_container {
	background-color: var(--gr_shadow2);
	border-radius: 1rem;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.menu_logo img {
	z-index: 2000;
	width: 150px;
}
.menu_btn {
	cursor: pointer;
	display: flex;
	justify-content: flex-end;
	padding: 1rem 2rem 1rem 1.4rem;
	position: relative;
	user-select: none;
	margin: 0;

}

.hamburger {
	background: var(--white);
	display: block;
	height: .25rem;
	position: relative;
	/* transition: .2s ease-out; */
	width: 15px;
	/* float: right; */
	margin: 8px -8px;
	border-radius: 5px;
}

.hamburger:before,
.hamburger:after {
	background: var(--white);
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: top .2s ease-out, transform .2s ease-out;
	width: 150%;
	border-radius: 5px;
}
.hamburger:before {
	top: 8px;
}

.hamburger:after {
	top: -8px;
}

.menu_btn[data-expanded="true"] .hamburger {
	background: transparent;
}
.menu_btn[data-expanded="true"] .hamburger:before {
	top: 0;
	transform: rotate(-45deg);
}

.menu_btn[data-expanded="true"] .hamburger:after {
	top: 0;
	transform: rotate(45deg);
}

.menu_content {
	display: none;
}
.menu_content span,
.menu_content i,
.menu_content a{
	color: var(--white) !important;
}

.menu_content.expanded {
	display: block;
}

.nav-hi {
	background-color: var(--gr_shadow1);
}
.nav-btn {
	color: var(--b1);
	text-decoration: none;
	background-color: transparent;
	min-width: 10rem;
	margin: 0.1rem 0;
	box-shadow: none;
}
.nav-btn:hover {
	color: var(--b1);
	background: var(--gr_shadow);
}

.dropup .dropdown-toggle:after,
.dropdown-toggle:after {
    content: '';
    transform: rotate(45deg);
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    padding: 2px;
    margin: -1px 5px;
    transition: .3s ease;
}
.dropdown-toggle[aria-expanded="true"]:after{
    transform: rotate(-135deg) translate(-2px, -2px);
}
.menu_nav {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.menu_top #menu .dropdown-item {
	color: var(--fg1);
	text-decoration: none;
	border-radius: 0.6rem;
    padding: 0.4rem 1.2rem;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
	white-space: normal;
	font-size: 0.9rem;
}
.menu_top #menu .dropdown-item:focus,
.menu_top #menu .dropdown-item:hover {
	background: var(--bs2);

}
.menu_top #menu .dropdown-menu {
	background-color: var(--gr_shadow2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/* min-width: fit-content; */
	border-radius: 0.8rem;
    padding: 0.2rem;
	max-width: 18rem;
    width: max-content;
}
.clear-header{
	height: 5.8rem;
	background: var(--i0);
}

.menu_top #menu .nav-link {
	display: block;
	font-size: 15px;
	-webkit-transition: box-shadow 200ms;
	transition: box-shadow 200ms;
	margin: 0.2em;
	color: var(--white);
	padding: 0.7em 1.8em;
	border-radius: 1em;
}

.menu_top #menu .nav-item.active .nav-link{
	color: var(--white);
	background: var(--gr_shadow2);
}

.menu_top #menu .nav-link:hover,
.menu_top .dropdown-item:hover {
	color: var(--white);
	background: var(--bs2);
}

.menu_top #menu .nav-link:focus,
.menu_top #menu .nav-item.active .nav-link:focus,
.menu_top .dropdown-item:focus {
	color: var(--i3);
}

@media (max-width: 992px) {
	.menu_nav .dropdown-menu {
		position: static !important;
		float: none !important;
		transform: none !important;
	}
	.menu_top #menu.expanded {
		flex-grow: 1;
		max-width: 18rem;
    	width: -webkit-fill-available;
	}
	.menu_top #menu.expanded .dropdown-menu {
		max-width: 18rem;
    	width: -webkit-fill-available;
	}
}
@media (min-width: 992px) {
	.menu_btn {
		display: none;
	}
	.menu_content {
		display: block;
	}
	.menu_nav {
		flex-direction: row;
	}
	.menu_nav .dropdown-menu {
		position: absolute !important;
		float: none !important;
		transform: none !important;
		top: 100% !important;
		left: unset !important;
		right: 0 !important;
		width: 100%;
		border: none;
		min-width: fit-content;
	}
	
	.menu_container {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		background-color: transparent;
	}

	.menu_top #menu .nav-icon {
		padding: 0.8em 1.2em;
	}

	.menu_top #menu .nav-item.active .nav-link:hover {
		box-shadow: 0px 0px 6px 2px #809bff,
		inset 0px 0px 3px 2px #a2e4ff;
	}
}
#client_ip {
	position: relative;
	color: var(--white);
	height: 1.5rem;
	background: var(--bs2);
}

/* ---------- menu expandable ---------- */

.card {
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--bg1);
    background-clip: border-box;
    border: none;
    border-radius: 1rem;
	box-shadow: 0 10px 20px 10px var(--bg4);
	padding: 1rem;
}

.server-type-container .server-type {
	font-size: 1rem;
	font-weight: 600;
	border: 2px solid var(--fg1);
	border-radius: 0.3rem;
	padding: 0rem 0.3rem;
	text-transform: capitalize;
}

.server-type-container::after{
	content: 'servers';
	margin: 0 0.3rem;
}

.server-type.pro {
	color: var(--i0);
	border-color: var(--i0);
}

.server-type.free {
	color: var(--g3);
	border-color: var(--g3);
}