/*!
Theme Name: ChartApp Template
Theme URI: https://chartapp.io
Author: ChartApp team
Author URI: https://chartapp.io
Description: ChartApp.io template.
Version: 1.0
*/

/*ChartApp Color Scheme */
*,
*::after,
*::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--green: #20C997; /* 32, 201, 151 /*
	--greendark: #0cab7c; /* 12, 171 124 */
	--bluelight: #E0F0FF;
	--blue: #2C99FF; /* 44, 153, 255 */
	--bluedark: #0d79df; 
	--warning: #FA8B0C;
	--red: #FF4D4F; /* 255, 77, 79 */
	--orange: #fa8b0c;
	--dark: #272B41; /* 39,43,65 */
	--darkup: #131623;
	--grey: #F4F5F7;
	--greyup: #e2e6ea;
	--secondary: #666d92;
	--bg: #f7f6f2;
}

/* Default Theme Styles */
body {
	font-family: "Inter", Arial, Helvetica, sans-serif;
	color: var(--secondary);
}


a, a:visited {
	text-decoration: none!important;
}
/* Heading | Text | Buttons*/

h1, h2, h3, h4, h5 {
	color: var(--dark);
	font-family: "Rubik", sans-serif;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.fw-700 {
	font-weight: 700;
}

.fw-800 {
	font-weight: 800;
}

.text-dark {
	color: var(--dark)!important;
}

.text-blue {
	color: var(--blue)!important;
}

.text-red {
	color: var(--red)!important;
}

.text-green {
	color: var(--green)!important;
}

.text-orange {
	color: var(--orange)!important;
}

.text-grey {
	color: var(--grey)!important;
}

.text-secondary {
	color: var(--secondary)!important;
}

.text-chartapp {
	background: linear-gradient(to right, #2C99FF, #20C997);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}

.btn-primary {
	background: var(--info);
}

.btn-main {
	box-shadow: 0 -3px 0 0 rgba(13, 121,223, 0.5) inset;
}

.btn-main-green {
	box-shadow: 0 -3px 0 0 rgba(12, 171, 124, 0.5) inset;
}

.button-arrow {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: var(--bluedark)
}

.button-arrow-green {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	background: var(--greendark)
}

/* Backgrounds */

.bg-green {
	background: var(--green)!important;
}

.bg-blue {
	background: var(--blue)!important;
}

.bg-blue-10 {
	background: rgba(44, 153, 255, 0.1)
}

.bg-warning {
	background: var(--warning)!important;
}

.bg-danger {
	background: var(--danger)!important;
}

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

.bg-dark-opacity {
	background: #131623;
}

.bg-light {
	background: var(--light)!important;
}

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

.bg-white-shadow {
	background: #fff;
	box-shadow: 0 -3px 0 0 rgba(244,245,247,1) inset;

}

.bg-green-shadow {
	background: #fff;
	box-shadow: 0 -5px 0 0 rgba(32, 201, 151,0.42) inset;
}

.bg-red-shadow {
	background: #fff;
	box-shadow: 0 -5px 0 0 rgba(255, 77, 79,0.42) inset;
}

/* Sections | Borders | Gradients */
.border-blue {
	border-color: var(--blue)!important;
}

.border-grey {
	border: 1px solid var(--grey);
}

.border-gradient::after {
	width: 100%;
	height: 2px;
	background: rgb(44,153,255);
	background: linear-gradient(90deg, rgba(44,153,255,1) 0%, rgba(32,201,151,1) 100%);
	bottom: 0px;
	left: 0px;
	position: absolute;
	content: '';
}

.shadow-large {
	box-shadow: rgba(44, 153, 255, 0.6) 0px 36px 100px -30px
}

/* Header */
.navbar, .navbar-name, .nav-link, .nav-item-dark, .nav-item-light {
	transition: all 0.5s ease;
}

.navbar .nav-link, .navbar-light .nav-link {
	color: var(--dark)!important;
}

.chartapp-header {
	box-shadow: 0px 10px 20px 0px rgba(79,35,35,0.08);
}

.navbar-dark .nav-link {
	color: #fff!important;
}

a.nav-link {
	position: relative;
}

a.nav-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px; /* Adjust to place the underline closer or further from the text */
	width: 100%;
	height: 2px; /* Adjust the thickness of the underline */
	background: var(--blue); /* Adjust the underline color as needed */
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease; /* Adjust the duration of the transition */
}

a.nav-link:hover::after {
	transform: scaleX(1);
}

/* Homepage */

.hero {
	position: relative;
}

.feature-icon img {
	max-width: 80px;
	height: inherit;
}

.client-logos img {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	opacity: .8;
	max-height: 40px;
}

.section-gradient { 
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(44,153,255,0.1) 50%)
}

.feature-icon .bi::before {
	font-size: 2.5rem;
	font-style: normal;
	background: -webkit-linear-gradient(90deg, rgb(44,153,255), rgb(32,201,151,1), rgb(44,153,255)) 0% 0% / 300% 300%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}

.feature-desc p {
	color: var(--dark);
	font-size: 0.9rem;
}

a.cta-link {
	position: relative;
	color: var(--blue);
}

a.cta-link::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px; /* Adjust to place the underline closer or further from the text */
	width: 100%;
	height: 2px; /* Adjust the thickness of the underline */
	background: var(--blue); /* Adjust the underline color as needed */
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease; /* Adjust the duration of the transition */
}

a.cta-link:hover::after {
	transform: scaleX(1);
}



.stakeholder-icon .bi::before {
	font-style: normal;
	font-size: 2.5rem;
	background: -webkit-linear-gradient(90deg, rgb(44,153,255), rgb(32,201,151,1), rgb(44,153,255)) 0% 0% / 300% 300%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; 
}

.stakeholder-desc p, .stakeholder-desc ul li {
	font-size: 0.9rem;
	color: var(--dark)
}

.custom-list {
	list-style: none;
	padding-left: 0px;
}

.custom-list li {
	display: flex;
	align-items: flex-start;
	padding-bottom: 0.75rem;
}

.custom-list li::before {
    content: '\F26A'; /* Bootstrap check-circle icon */
    font-family: 'Bootstrap-Icons';
    background: -webkit-linear-gradient(90deg, rgb(44,153,255), rgb(32,201,151,1), rgb(44,153,255)) 0% 0% / 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Make the text color transparent to show the gradient */
    margin-right: 12px;
    position: relative;
    top: 2px;
}


.custom-list li.red-x {
	padding-bottom: 1rem;
}

.custom-list .red-x::before {
	content: '\F622'; /* Bootstrap X icon */
	font-family: 'Bootstrap-Icons';
	color: var(--red);
	margin-right: 12px;
	position: relative;
	top: 2px;
}

.custom-list .green-check::before {
	content: '\F26A'; /* Bootstrap check-circle icon */
	font-family: 'Bootstrap-Icons';
	color: var(--green);
	margin-right: 12px;
	position: relative;
	top: 2px;
}

/* Blog Index Page */
.email-subscribe::placeholder {
	color: rgba(102, 109, 146, 0.5);
	font-size: 1rem;
}
.blog-entry p, .blog-entry h3 {
	transition: all 0.3s ease;
}

.blog-entry p {
	color: var(--secondary)
}


.blog-entry:hover p {
	color: var(--dark);
}

.blog-entry:hover h3 {
	color: var(--blue);
}


.pagination span:first-child {
	margin-left: 0px!important;
}

.pagination span:last-child {
	margin-right: 0px!important;
}

/* Footer */
.footer-menu ul li {
	margin-bottom: 0.75rem;
}

.footer-menu ul li a {
	color: var(--blue-light);
	font-weight: 500;
}
/* Responsive Styles */

/* Up to LG */

@media (max-width: 992px) {

	.navbar {
		background: #fff;
		box-shadow: 0px 10px 20px 0px rgba(79,35,35,0.08);
	}
	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(44, 153, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
	}

	.navbar-toggler:focus {
		box-shadow: none;
	}

	.nav-item-dark {
		border-bottom: 1px solid var(--darkup);
	}

	.nav-item-light {
		border-bottom: 1px dotted var(--darkup);
	}

}
@media (max-width: 767px) {
	.feature-icon img {
		max-width: 80px;
		height: inherit;
	}
}