@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500,700);

:root {
	--ccc-primary-base: 73, 94, 101;
	--ccc-secondary-base: 255, 249, 125;
	--ccc-primary: #495E65;
	--ccc-secondary: #FFF97D;
	--ccc-gray: #bbb;
	--ccc-body-font: 'Roboto', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
	--ccc-header-font: 'Roboto', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
}

:root {
	font-size: 18px;
}

body {
	font-family: var(--ccc-body-font);
	font-weight: 300;
	color: #000;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ccc-header-font);
	font-weight: 500;
	position: relative;
	margin: 10px 0;
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1rem;
}

h5 {
	font-size: .83rem;
}

h6 {
	font-size: .67rem;
}

.light {
	font-weight: 300;
}

.regular {
	font-weight: 400;
}

.bold {
	font-weight: bold;
}

.smallcaps {
	font-variant: small-caps;
}

.uppercase {
	text-transform: uppercase;
}

object.email {
	height: 2em;
	margin: -1em 0;
	vertical-align: middle;
	color: white;
}

.hero-header {
	position: relative;
	width: 100%;
	color: white;
	background-color: var(--ccc-primary);
	background-image: url('../img/header.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	min-height: 600px;
	height: 80vh;
}

.hero-header .container {
	height: 100%;
}

.hero-header .header-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: white;
	height: 100%;
}

.hero-header .typed {
	display: inline-block;
	margin: 0;
	font-size: 2.5rem;
	line-height: 3rem;
}

.hero-header .typed-cursor {
	font-size: 2.5rem;
	display: inline-block;
	margin: 0 10px;
	color: var(--ccc-secondary);
	-webkit-animation-name: flash;
	animation-name: flash;
	-webkit-animation-duration: 1s;
	animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.hero-header .text-center {
	width: 100%;
}

.hero-header .title-description {
	font-size: 1.4rem;
}

a {
	text-decoration: none;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

a.yellow {
	color: var(--ccc-secondary);
}

a.yellow:hover {
	color: #c4c05e;
}

.title-description {
	font-size: 1.1rem;
	font-weight: 300;
	width: 80%;
	margin: 0 auto;
}

/* Navigation Bar ( Navbar ) */

nav.navbar {
	position: fixed;
	top: 0;
	width: 100%;
	width: 100vw;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	color: #fff;
}

nav.navbar .navbar-nav {
	display: flex;
	align-items: center;
}

nav.navbar .navbar-nav li.active a:not(.btn) {
	color: var(--ccc-secondary) !important;
}

nav.navbar .navbar-nav li {
	padding: .5rem 1rem;
}

.navbar-nav>li>a {
	padding: .5rem 1rem;
}

nav.navbar-fixed-top {
	z-index: 9499;
	top: 0;
	background: var(--ccc-primary);
	padding: 1rem;
}

.navbar {
	z-index: 9500;
	padding: 0 1rem;
	height: 100px;

	img {
		margin: 0 1rem 0 0;
		width: 50px;
		height: 61px;
	}

	.company-name {
		display: flex;
		flex-direction: column;
		align-items: start;
		justify-content: center;
		font-size: 1rem;
		line-height: 1rem;
		background-color: transparent;
	}
}

.navbar-collapse {
	flex-grow: 0;

	.nav-link a {
		text-align: center;
	}
}

.navbar-brand {
	align-items: center;
	transition: all linear .2s;
}

.navbar-brand,
.nav-link,
.nav-link:focus,
.navbar-brand:focus {
	color: #fff;
}

.navbar-brand:hover {
	color: #fff;
	opacity: .8;
}

.nav-link:hover {
	color: var(--ccc-gray);
}

.navbar-toggler {
	border: 1px solid rgba(255, 255, 255, .3);
}

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

#nav-bkg {
	height: 100px;
	z-index: 4000;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

#mobile-nav-close-btn {
	background-color: transparent;
	color: #fff;
	border: none;
	font-size: 2rem;
	margin-top: 15px;
	display: none;
}

/* Buttons */

.btn {
	display: inline-block;
	padding: 5px 10px;
	color: white;
	border: 2px solid transparent;
	border-radius: 2px;
	background: transparent;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.btn:hover,
.btn:focus {
	color: white;
}

.btn.btn-primary {
	background: var(--ccc-secondary);
	color: var(--ccc-primary);
}

.btn.btn-primary:hover {
	background: var(--ccc-secondary);
	border-color: var(--ccc-gray);
}

.btn.btn-white-fill {
	color: #fff;
	border-color: #fff;
	background: transparent;
}

.btn.btn-gray-fill {
	color: #fff;
	border-color: #fff;
	background: transparent;
}

.btn.btn-gray-fill:hover {
	border-color: var(--ccc-gray);
	background: var(--ccc-gray);
}

/* Blink Cursor */

.blink {
	position: relative;
	top: 4px;
	display: inline-block;
	width: 4px;
	height: 50px;
	height: 5vh;
	margin: 0 10px;
}

.container {
	position: relative;
	z-index: 100;
}

.row.title {
	padding: 0 20px;
}


/* Sections */
section {
	position: relative;
}

.section {
	padding: 40px 0;
}

.dotted {
	border-top: none;
	border-bottom: 10px dotted var(--ccc-primary);
	width: 80vw;
	margin: 0 auto;
}

#intro {
	margin-top: -150px;
	z-index: 8100;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);

}

.intro-cards {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 1rem;
	width: 80vw;
	margin: 0 auto;
}

.intro-card {
	background-color: var(--ccc-secondary);
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: repeat;
	background-position: 0% 0%;
	padding: 2.5rem 1.5rem;
	color: #000;
	width: 100%;
	max-width: 400px;

	p{
		margin: 0;
	}
}

.intro-cards .intro-card .heading {
	margin: 0 0 1rem 0;
	padding: 0rem;
	font-family: var(--ccc-header-font);
	font-size: 1.6rem;
	text-align: center;
}

.intro-cards .intro-card .bottom {
	font-size: 1rem;
}

#services {
	clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 5%);
}

#about {

	display: flex;
	flex-direction: column;
	gap: 5rem;

	.image {
		display: flex;
		justify-content: center;
		margin: 0 0 2rem 0;

		img {
			object-fit: cover;
			border-radius: 15px;
			margin: 2rem 0 0 0;
		}
	}

	.about-person {
		display: flex;
		gap: 5rem;

		.body {
			text-align: left;
			padding: 0 1rem;
			font-weight: 300;
			border-left: 3px solid var(--ccc-primary);
		}

		.role {
			font-size: .9rem;
			font-style: italic;
		}
	}
}



@-webkit-keyframes ripple-animation {
	from {
		opacity: 0.2;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	to {
		opacity: 0;
		-webkit-transform: scale(100);
		transform: scale(100);
	}
}

@keyframes ripple-animation {
	from {
		opacity: 0.2;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	to {
		opacity: 0;
		-webkit-transform: scale(100);
		transform: scale(100);
	}
}

.services {
	margin: 80px 0;
	margin-bottom: 120px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5rem;
	justify-content: center;

}

.service {
	flex: 1 1 0px;
	height: 350px;
	min-width: 300px;
	max-width: 400px;
	text-align: center;
	border: 1px solid var(--ccc-gray);
}

.service .icon-holder {
	display: inline;
	position: relative;
	top: -50px;
	padding: 10px;
	background: white;
	font-size: 3.5rem;
}

.service .heading {
	color: var(--ccc-primary);
	margin-bottom: 30px;
}

.service .icon-holder>img.icon {
	width: 40px;
}

.service .description {
	width: 80%;
	margin: 0 auto;
}


/****************************************************************/
/* Footer */

footer {
	background-color: var(--ccc-primary);
	padding: 100px;
	background-image: url('../img/footer.jpg');
	-webkit-background-size: cover;
	background-size: cover;
}

footer a {
	color: white;
}


.contact-details {
	text-wrap: wrap;
	font-size: 1.3rem;
	word-break: break-all;

	h3 {
		font-size: 1rem;
		margin: 0;
	}
}

.contact-details>div {
	overflow: none;
	font-weight: 500;
}

.contact-details>div:last-of-type {
	margin: 2rem 0 0 0;

}


/****************************************************************/
/* Popup */

.modal {
	padding: 0 25px !important;
	z-index: 9999;
}

.modal a {
	color: white;
}

.modal-dialog {
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
}

.modal-popup {
	position: relative;
	padding: 45px 30px;
	background-color: var(--ccc-primary);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, .2);
	border-radius: 2px;
	overflow: none;
}

.modal-popup a.close-link {
	font-size: 30px;
	margin: 0 0 0 auto;
	color: #fff;
}

.modal-content {
	border: none;
}

/****************************************************************/
/* Colors */

.white {
	color: white;
}

.light-white {
	color: #fff;
	font-weight: 300;
}

.white-bg {
	background: white;
}

.gray-bg {
	background: #f7f7f7;
}

.primary-bg {
	background: var(--ccc-primary);
}

.primary-color {
	color: var(--ccc-primary);
}

.secondary-color {
	color: var(--ccc-secondary);
}

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

/****************************************************************/
/* CARD */

.cards {
	display: flex;
	gap: 5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin: 5rem 2rem;
}

.card {
	background-color: transparent;
	color: #fff;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 1rem;
	width: 100%;
	max-width: 350px;
	position: relative;
	border-radius: 0 0 15px 0;
	border: 3px solid var(--ccc-secondary);

	p {
		color: #fff;
		font-weight: 300;
		margin: 1rem 0 0 0;
	}

	.icon {
		color: var(--ccc-secondary);
		font-size: 2rem;
		background-color: var(--ccc-primary);
		padding: 1rem;
		border-radius: 50px;
		position: absolute;
		left: -35px;
		top: -30px;
	}

	.header {
		margin: .5rem 0 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.body {
		padding: 0;
	}
}

/* speech bubbles */
.speech-bubble {
	position: relative;
	background: var(--ccc-primary);
	color: white;
	border-radius: .4em;
	padding: 2rem 2rem 1rem 2rem;
	width: fit-content;
	margin: 0 auto;
	height: fit-content;
	text-align: center;
	box-shadow: 5px 5px 0px var(--ccc-secondary);
	max-width: 600px;
	

	p{
		font-size: .9rem;
		line-height: 1.2rem;
	}
}

.speech-bubble:before {
	content: '\f10d';
	font-family: "Font Awesome 6 Free";
	color: var(--ccc-secondary);
	font-size: 3rem;
	position: absolute;
	left:50%;
	top:-40px;
	margin-left: -22.5px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 30%;
	width: 70px;
	height: 70px;
	clip-path: polygon(0 0, 0% 100%, 100% 0);
	background-color: var(--ccc-primary);
	margin-left: -22.5px;
	margin-bottom: -60px;
}

/*.speech-bubble:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 30%;
	width: 0;
	height: 0;
	border: 45px solid transparent;
	border-top-color: var(--ccc-primary);
	border-bottom: 0;
	border-left: 0;
	margin-left: -22.5px;
	margin-bottom: -45px;
}*/

.testimonials {

	
}

.swiper {
	height: 500px;
}

.swiper-slide{
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.swiper-button-prev, .swiper-button-next{
	color: gray !important;
}

.swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--ccc-primary);
}

/* Media Queries */

@media(max-width:991px) {

	.hero-header .header-text {
		margin: 2rem .5rem 0 .5rem;
	}

	.service {
		margin: 0 1rem;
		padding: 0 .5rem;
	}

	.cards {
		margin: 5rem 0rem;
	}

	.title-description {
		width: 100%;
	}

	.section {
		padding: 1rem;
	}

	.navbar {
		padding: 0;
	}

	nav.navbar .navbar-nav {
		width: max-content;
		margin: 0 0 0 auto;
		background-color: var(--ccc-primary);
		border-radius: 0 0 15px 15px;
		border-top: 5px solid var(--ccc-secondary);
		align-items: center;
	}

	#mobile-nav-close-btn {
		display: block;
	}

	#intro {
		clip-path: polygon(0 0, 100% 0, 100% 97%, 0 100%);
	}

	#services {
		clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 2%);
	}

	.intro-cards {
		padding: 0;
	}

	.intro-card {
		padding: 1rem;
	}

	.text-center-mobile {
		text-align: center !important;
	}

	.hero-header .typed-cursor {
		display: none;
		visibility: hidden;
		opacity: 0;
		-webkit-animation-name: none;
		animation-name: none;
	}

	#about {

		.about-person {
			flex-direction: column;
			gap: 0rem;

			.body {
				border: none;
			}

			.role {
				display: block;
			}
		}


	}

	.cards {
		margin: 2rem 0;
	}

	.card {
		max-width: 80vw;
	}

	footer {
		padding: 40px;
	}
}

@media(max-width: 768px) {
	.hero-header .header-text {
		margin: 4rem .5rem 0 .5rem;
	}

	.modal-popup {
		padding: 1rem;
	}

	.testimonials .swiper-button-next, .testimonials .swiper-button-prev{
		color: white !important;
		background-color: var(--ccc-primary);
		padding: 1.5rem;
		border-radius: 10px;
		scale: 1;
		/* margin: 0; */
		top: 100%;
	} 

	.testimonials .speech-bubble{
		padding: 2rem 1rem 1rem 1rem;
		width: 100%;
	}
}

@media(max-width: 400px) {
	header .typed-cursor {
		display: none;
	}
}