/*!
Theme Name: Create Change Consulting Template
Theme URI: https://createchangeconsulting.net
Author: VIZDATA Team
Author URI: https://vizdata.rs
Description: Simple Wordpress template.
Version: 1.0
*/

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
    --blue: #4059AD; /* 64, 89, 173 */
	--bluelighter: #f0f3f9;
	--otherblue: #569BCF;
	--orange: #EC7507;
	--orangelight: #fcca9c;
	--orangelighter: #FEEAD7;
	--yellow: #FFE066;
	--green: #5AB1BB;
	--greenlighter: #E2F1F3;
	--light: #FFFCF9;
	--dark: #1a1d1a;
}

body {
	font-family: "Fira Sans", Arial, Helvetica, sans-serif;
	color: #303630;
	line-height: 1.75;
	font-size: 18px;
}

a, a:visited, a:hover, a:focus {
	text-decoration: none;
}

/* Text */
h1, h2, h3 {
	color: var(--dark);
}

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

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

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

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

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

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

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

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

.text-blue-gradient {
	background: linear-gradient(to bottom, #4059AD, #324586);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.text-orange-gradient {
	background: linear-gradient(to bottom, #FFE066, #EC7505);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.text-green-gradient {
	background: linear-gradient(to bottom, #5AB1BB, #41969F);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.text-yellow-gradient {
	background: linear-gradient(to bottom, #FFE066, #FFD633);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

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

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

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

.bg-orange-lighter {
	background: var(--orangelighter)!important;
}

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

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

.hero {
	/* background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%); */
}

/* Navigation */
a.nav-link {
	position: relative;
	color: var(--blue)!important;
}

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(--orange); /* 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);
}

/* Hero */

@media  (max-width: 991px) {
	.hero-img {
		max-width: 100%;
	}
	
}

/* Buttons */
.btn-blue {
	background: var(--blue)!important;
}

.btn-blue-alt {
	background: rgba(64, 89, 173, 0.05)!important;
}
.btn-otherblue {
	background: var(--otherblue)!important;
}

/* Contact Form Style */

.wpcf7 input, 
.wpcf7 textarea {
    font-weight: 400; 
	color: var(--dark);
	font-size: 1rem;
}
.wpcf7 input::placeholder, 
.wpcf7 textarea::placeholder {
    font-weight: 400; 
	color: var(--blue)!important;
	font-size: 1rem;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: #97A6D8; 
	box-shadow: 5px 5px 0 0 rgba(151, 166, 216, 0.1);
    outline: none; /* Remove default outline */
}

.wpcf7-not-valid-tip {
	color: var(--orange);
}

/* Example additional styles */
.wpcf7 input:focus {
    background-color: #fff; /* Change background color */
}

.wpcf7 textarea:focus {
    background-color: #fff; /* Change background color */
}

.wpcf7 select:focus {
    background-color: #fff; /* Change background color */
}

/* Services */
.service-image {
	max-width: 100px;
}