/* -------------------------------------------------------
    Theme Name: Crafto - The Multipurpose HTML5 Template
    Theme URL: https://craftohtml.themezaa.com/
    Description: Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.
    Author: ThemeZaa - https://www.themezaa.com/
    Author ThemeForest URL: https://themeforest.net/user/themezaa
    Copyright(c) 2024 themezaa.com
    Version: 2.0
	
--base-color: #074eb9;
    --dark-gray: var(--primary);
    --black: #05060a;
    --medium-gray: #7d8087;
    --very-light-gray: #f0f2f8;
    --primary-font: 'Plus Jakarta Sans', sans-serif;	
	
	
	--dark-green:  var(--primary);
	--main-green:  var(--secondary);
	--light-green: #C1E1D0;
	--light-grey:  #D8D8D8;
	
	
✅ Option A – Trustworthy & Modern
Role		Name			HEX			Suggested Background										Text on Top												Notes
Primary		Sky Navy		#234361		Best as background for navbars, footers, hero banners		Use white (#FFFFFF) or Soft Sky (#38BDF8) for text		Deep and calming. Adds credibility.
Accent		Soft Sky		#38BDF8		Works best as buttons, links, or highlights					Use Sky Navy or dark grey (#1E2A38, #111827)			Fresh and engaging, brings in the "tech" feel.
Secondary	Cool Gray 600	#4B5563		Use as text color on light backgrounds like #F9FAFB			On dark background: use Soft Sky (#38BDF8) or white		Ideal for body text or muted headers.
Background	Snow White		#F9FAFB		Use as your main background									Use Primary (#234361) or Secondary (#4B5563) for text	Clean, light, highly readable.
Highlight	Lime Tint		#A7F3D0		Good for subtle cards, callouts, or badges					Use Primary or dark grey text							Brings friendly energy without clashing.

🧪 Color Pairing Examples
Hero section:
	Background: #234361 (Primary)
	Headline: #FFFFFF
	Subtext: #A7F3D0 (Highlight)

CTA button on white background:
	Button: #38BDF8 (Accent)
	Text: #234361 (Primary)

Card with subtle tone:
	Background: #A7F3D0 (Highlight)
	Title: #234361
	Text: #4B5563 (Secondary)

:root {	
	--primary:		#234361;
	--accent:		#38BDF8	;
	--secondary:	#4B5563;
	--background:	#F9FAFB;
	--highlight:	#A7F3D0;
	
	--on_primary1:	#ffffff;
	--on_primary2:	#38BDF8;
	--on_accent:	#234361;
	--on_secondary:	#38BDF8;
}
usage:
	color: var(--primary);
------------------------------------------------------- */
:root {	
	--primary:		#234361;
	--accent:		#38BDF8;
	--secondary:	#4B5563;
	--background:	#F9FAFB;
	--highlight:	#A7F3D0;
	
	--on_primary1:	#ffffff;
	--on_primary2:	#38BDF8;
	--on_accent:	#234361;
	--on_secondary:	#38BDF8;
}

body {
	color: var(--primary);
}header .navbar-brand img {max-height:85px!important;}
.navbar .navbar-nav .nav-link { color: var(--secondary);}
.btn.btn-transparent-white-light { color: var(--secondary);}
.btn-gradient-purple-pink { 
    background-image: linear-gradient(to right, #004D24, #058743, #0b58cb);
	background-color: rgba(255, 255, 255, 0.5);
}
.btn.btn-base-color {	background-color:var(--secondary);}
.text-dark-gray, .btn-link.text-dark-gray, a.text-dark-gray-hover:hover {
    color: var(--secondary);
}

.text-base-color, .btn-link.text-base-color {
    color: var(--secondary);
}
 
.btn.btn-dark-gray {
	background-color: var(--primary);
}
#title_section {	padding-top:180px;}
.text-primary {	color: var(--primary)!important; }
.text-primary-contrast {	color: #fff!important; }  
.text-secondary {	color: var(--secondary)!important; }
.text-secondary-contrast {	color: #fff!important; }
.bg-base-color, .bg-primary {	background-color: var(--primary)!important;}
.bg-light-green {	background-color: var(--accent); } 
.bg-secondary {     background-color: var(--secondary)!important;}
.bg-accent {	background-color: var(--accent)!important; } 
.bg-highlight {	background-color: var(--highlight)!important; } 



.btn-gradient-greens {    background-image: linear-gradient(to right, #004D24, #058743, #C1E1D0);    background-size: 200% auto;    color: var(--white);}
/*.btn-gradient-green-flip {     background-image: linear-gradient(to right, #004D24, #058743, #004D24);    background-size: 200% auto;    color: var(--white);} */ 

.btn-gradient-greens {    background-image: linear-gradient(to right, var(--primary), var(--accent), var(--highlight));    background-size: 200% auto;    color: var(--white);}
.btn-gradient-green-flip {     background-image: linear-gradient(to right, var(--primary), var(--accent), var(--secondary));    background-size: 200% auto;    color: var(--white);} /**/


.pricing-table-style-08 .nav-tabs > li.nav-item > a:after { 	background-color: var(--secondary)!important;}
.pricing-table-style-04 .accordion-item.active-accordion {	background-color: var(--secondary)!important;}
.ul-list {	list-style-type: disc;}
.ul-list li{	list-style-type: disc;	 }
.tab-style-05 .nav-tabs .nav-item .nav-link.active span {	color: var(--secondary)!important; }
.tab-style-05 .nav-tabs .nav-item .nav-link:hover i, .tab-style-05 .nav-tabs .nav-item .nav-link.show i, .tab-style-05 .nav-tabs .nav-item .nav-link.active i {	color: var(--secondary)!important; }

.tab-style-05 .nav-tabs .nav-item .nav-link:hover span {	color:#004D24!important;}
.bg-gradient-fast-greens {    background-image: linear-gradient(to right top, #058743, #335D34);}
#s3_iconbar .feature-box {	display:block;}
#s3_iconbar .feature-box-fixed .feature-box-content p {	height:120px; overflow:hidden;}
.feature-box-fixed .feature-box-content p {	height:180px; overflow:hidden;}

@media screen and (max-width: 768px) { 		
	.feature-box-fixed .feature-box-content p {			height:100px; overflow:hidden;		}			
	#s3_iconbar {			display:none; 		}				
	#title_section {			padding-top:40px;		}				
	.dont_show_on_mobile, dont-show-on-mobile {			display:none;		}
}
 
.bg-img200 {	background: url('https://www.performadvisory.ai/img/placeholder.php?dim=200x200');    background-position: center!important;    background-size: cover!important;    width: 200px;    height: 200px;}
.text-gradient-greens {    background-image: linear-gradient(to right, #556fff, #556fff, #e05fc4, #f767a6, #ff798e);    -webkit-background-clip: text;    -webkit-text-fill-color: transparent;	}
.bg-rev-gradient-very-light-gray {	background-image: linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfbfc,  #f9fafb, #f7f8f9);.bg-cgrey {	background:#cccccc;} 
.u-green u { 	color:var(--secondary);}
/*.interactive-banner-style-02:hover figure a.img {	transform:scale(1.1);} /**/
.interactive-banner-style-02 .img {    transition: transform 0.3s ease;}
.interactive-banner-style-02.hover-box:hover .img {	display:none;    transform: scale(1.1);} 
.img2:hover {	display:none;    transform: scale(1.1);} 
.interactive-banner-style-02:hover figure img {  -webkit-transform: scale(1.6);  transform: scale(1.6);}  
.interactive-banner-style-02:hover figure a.img {  -webkit-transform: scale(1.1);  transform: scale(1.1);} 
.interactive-banner-style-02:hover figure a.img {  -webkit-transform: scale(1.1);  transform: scale(1.1);}
/**.portfolio-box .portfolio-image, .gallery-box .portfolio-image {	height:250px;}/**/.case-study .portfolio-image img {	height:250px;}
.case-study-img { 	height:250px!important;}