@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;600&family=Mulish:wght@300;600&display=swap');
@import "linearIcons.css";
@import "pageHome.css";
@import "component-header.css";
@import "component-footer.css";

/*
bg light 1: #f7f7f7
bg light 2: #ececec
*/

body {
  	/***************** COLOR VARS *****************/
  	--color-text-dark: #666;
  	--color-bg-light2: #f7f7f7;

	/***************** FONT FAMILIES *****************/
	--font-header: 'Josefin Sans', sans-serif;
	--font-body: 'Mulish', sans-serif;

	/***************** DESKTOP FONT SIZES *****************/
	/* Headers */
	--font-size-h1: 54px;
	--font-size-h2: 45px;
	--font-size-h3: 36px;
	--font-size-h4: 27px;
	--font-size-h5: 18px;
	--font-size-h6: 14px;
	--font-size-p: 14px;
}

body {
	font-family: var(--font-body);
	font-size: var(--font-size-p);
	font-weight: 300;
	color: #fff;
	overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-header);
}
h1 {
	font-size: var(--font-size-h1);
	font-weight: 600;
	letter-spacing: 10px;
}
h2 {
	font-size: var(--font-size-h2);
	font-weight: 600;
	letter-spacing: 10px;
}
h3 {
	font-size: var(--font-size-h3);
	font-weight: 600;
	letter-spacing: 10px;
}
h4 {
	font-size: var(--font-size-h4);
	font-weight: 300;
	letter-spacing: 5px;
}
h5 {
	font-size: var(--font-size-h5);
	font-weight: 300;
	letter-spacing: 3px;
}
h6 {
	font-size: var(--font-size-h6);
	font-weight: 300;
	letter-spacing: 3px;
}
p{
	font-family: var(--font-body);
	font-size: var(--font-size-p);
	font-weight: 300;
}
.no-text-spacing {
	letter-spacing: 0px;
}
.btn-box {
	text-align: center;
}
.txt-white p {
	color: #fff;
}
.txt-shadow-black{
	text-shadow: 0 0 0.5em #000, 0 0 1em #000;
}
.txt-shadow-black p {
	text-shadow: 0 0 1em #000, 0 0 2em #000;
}
.txt-caps {
	text-transform: uppercase;
}
.txt-dark {
	color: var(--color-text-dark);
}
.txt-center {
	text-align: center;
}
.txt-right {
	text-align: right;
}
.txt-bold {
	font-weight: 600;
}
.txt-thin {
	font-weight: 300;
}

/******************* TEXT GRADIENTS ********************/
.txt-teal-pink,
.txt-teal-red,
.txt-teal-orange,
.txt-blue-teal,
.txt-orange-purp,
.txt-gradient-1,
.txt-gradient-2,
.txt-gradient-3,
.txt-gradient-4,
.txt-gradient-5 {
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

.txt-teal-pink {
	background-image: linear-gradient(90deg, #6f9, #f6f);
}
.txt-teal-red {
	background-image: linear-gradient(90deg, #6f9, #f69);
}
.txt-teal-orange {
	background-image: linear-gradient(90deg, #0d9, #f96);
}
.txt-blue-teal {
	background-image: linear-gradient(90deg, #69f, #6d9);
}
.txt-orange-purp {
	background-image: linear-gradient(90deg, #f96, #96f);
}
.txt-gradient-1 {
	background-image: linear-gradient(90deg, #f90, #90f);
}
.txt-gradient-2 {
	background-image: linear-gradient(90deg, #f09, #09f);
}
.txt-gradient-3 {
	background-image: linear-gradient(90deg, #69f, #6d9);
}
.txt-gradient-4 {
	background-image: linear-gradient(90deg, #0d9, #f90);
}
.txt-gradient-5 {
	background-image: linear-gradient(90deg, #f09, #09f);
}

/* SOLID COLORED BUTTONS */
a.btn-colored {
	display: inline-block;
	border-radius: 5px;
	color: #fff;
	padding: 15px 30px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: 0.3s padding ease-out;
}
a.btn-colored:hover {
	color: #fff;
	padding: 15px 40px;
}
a.btn-colored.btn-blue-green {
	background-image: linear-gradient(30deg, #56a4dd, #41e5b7);
	box-shadow: 0 10px 30px #41e5b7;
}
a.btn-colored.btn-purp-pink {
	background-image: linear-gradient(30deg, #8667f8, #e851af);
	box-shadow: 0 10px 30px #8667f8;
}
a.btn-colored.btn-purp-orange {
	background-image: linear-gradient(30deg, #bc77c7, #fc8a90);
	box-shadow: 0 10px 30px #bc77c7;
}

/* OUTLINED COLORED BUTTONS */
a.btn-outlined {
	display: inline-block;
	border-style: solid;
	border-radius: 5px;
	border-width: 2px;
	border-color: var(--color-text-dark);
	color: var(--color-text-dark);
	padding: 10px 15px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: 0.3s all ease-out;
}
a.btn-outlined:hover {
	color: #fff;
	background-color: var(--color-text-dark);
}

/******************* COLORED BG SECTIONS ********************/
.section-colorBG {
	min-height: 25vw;
	background-size: cover;
	display: flex;
	align-items: center;
}
.section-colorBG .container-fluid {
	width: 100%;
}
.section-colorBG-1 {
	background-image: url("../img/Gradient1.jpg");
}
.section-colorBG-2 {
	background-image: url("../img/Gradient2.jpg");
}
.section-colorBG-3 {
	background-image: url("../img/Gradient3.jpg");
}
.section-colorBG-4 {
	background-image: url("../img/Gradient4.jpg");
}
.section-colorBG-5 {
	background-image: url("../img/Gradient5.jpg");
}

/******************* BOARD MEMBERS ********************/
.cbp-item:nth-child(1n) .cbp-caption-activeWrap {
	background-image: linear-gradient(30deg, #56a4dd, #41e5b7);
}
.cbp-item:nth-child(2n) .cbp-caption-activeWrap {
	background-image: linear-gradient(30deg, #8667f8, #e851af);
}
.cbp-item:nth-child(3n) .cbp-caption-activeWrap {
	background-image: linear-gradient(30deg, #bc77c7, #fc8a90);
}
.cbp-item:nth-child(4n) .cbp-caption-activeWrap {
	background-image: linear-gradient(30deg, #56a4dd, #bc77c7);
}
.cbp-item:nth-child(5n) .cbp-caption-activeWrap {
	background-image: linear-gradient(30deg, #56a4dd, #ffc59c);
}

/******************* CONTACT FORM ********************/
.wpcf7 label {
	font-family: "Julius Sans One";

}
.form-column-1 {
	padding-right: 3%;
}
.form-column-2 {
	padding-left: 3%;
	padding-right: 3%;
}
.form-column-3 {
	padding-left: 3%;
}
.form-send {
	text-align: center;
	margin-top: 30px;
}
.form-send input {
	border-radius: 5px;
	color: #fff;
	padding: 15px 60px 10px;
	font-weight: 400;
	letter-spacing: 1px;
	animation: 0.5s transform ease-out;
	background-image: linear-gradient(30deg, #8667f8, #e851af);
	box-shadow: 0 10px 30px #8667f8;
	border: none;
	font-family: "Josefin Sans";
	text-transform: uppercase;
	font-weight: 700;
}


/******************* PROJECTS GRID ********************/
.projectsGrid {
	padding-left: 0;
	padding-right: 0;
}
.projectsGrid .projectBox {
	height: 0;
	padding-top: 75%;
	background-position: center center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	transition: background 0.7s ease-out;
	cursor: pointer;
}
.projectsGrid .projectBox:hover {
	background-size: 120% auto;
}

/******************* GENERAL SECTIONS ********************/
main {
	width: 100%;
	height: 100vh;
	background: #ccc;
}

.sectionShort{
	padding-top: 180px;
	padding-bottom: 180px;
}

.bg-light-1 {
	background-color: #fff;
}
.bg-light-2 {
	background-color: var(--color-bg-light2);
}