:root {
	--background-color1: #F7F4EB;
	--background-color2: #F3EFE4;
	--primary-green: #152A18;
	--secondary-green: #6E8256;
	--primary-orange: #C85C42;
	--primary-gray: #524F4A;
	--sections-border-color: #BDA692;
}
*:not(.navbar-toggler) {
	transition: all 0.5s;
}
body {
	background-color: var(--background-color1);
	color: var(--primary-gray);
	font-family: "Manrope", sans-serif;
	overflow-x: hidden;
}

.img-fluid {
	min-width: 100%;
	max-width: 100%;
}


.navbar {
	background-color: var(--background-color1);
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(189, 166, 146, 0.3);
}

.navbar-brand {
	font-family: "Wittgenstein", serif;
	font-weight: 500;
	color: var(--primary-green) !important;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.navbar-brand img {
	width: 36px;
	height: 36px;
	object-fit: cover;
}

.nav-link {
	font-family: "Manrope", sans-serif;
	font-weight: 500;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--primary-green) !important;
	padding: 0.5rem 0.9rem !important;
	transition: color 0.2s ease;
}

.nav-link:hover {
	color: var(--primary-orange) !important;
}

.navbar-toggler {
	border: none;
	padding: 0.25rem;
}

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

.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%2821, 42, 24, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.hero-bg1 {
	background-image: url("../img/hero-section1.jpg");
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	height:80vh;
	width: 100%;
	height: 75vh;
	position: relative;
}
.hero-bg2 {
	background-image: url("../img/hero-section2.jpg");
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	height:80vh;
	width: 100%;
	height: 75vh;
	position: relative;
}
.hero-bg3 {
	background-image: url("../img/hero-section3.jpg");
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	height:80vh;
	width: 100%;
	height: 75vh;
	position: relative;
}
.hero-bg4 {
	background-image: url("../img/hero-section4.jpg");
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	height:80vh;
	width: 100%;
	height: 75vh;
	position: relative;
}
.hero-bg5 {
	background-image: url("../img/hero-section5.jpg");
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	height:80vh;
	width: 100%;
	height: 75vh;
	position: relative;
}
#hero-content{
	position: relative;
	top:400px;
	left: 50px;
}
.hero-title {
	font-family: "Wittgenstein", serif;
	font-weight: 400;
	color: var(--primary-green);
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height:1.3;
	margin-left: auto;
	margin-right: auto;
	width: 800px;
}

.hero-desc {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	color: var(--primary-gray);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 500px;
	margin-bottom: 15px;
}

.btn-contact {
	background-color: var(--primary-green);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-family: "Manrope", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: background-color 0.2s ease, transform 0.15s ease;
	text-decoration: none;
}

.btn-contact:hover {
	background-color: #0f1f12;
	color: #fff;
	transform: translateY(-1px);
}

.btn-cv {
	background-color: transparent;
	color: var(--primary-orange);
	border: 1.5px solid var(--primary-orange);
	border-radius: 6px;
	padding: 10px 20px;
	font-family: "Manrope", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: background-color 0.2s ease, color 0.2s ease;
	text-decoration: none;
}

.btn-cv:hover {
	background-color: var(--primary-orange);
	color: #fff;
}

.hero-portrait {
	position: relative;
	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
}

.leaf-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
	z-index: 2;
	padding-bottom: 20px;
}

.leaf-divider::before,
.leaf-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background-color: var(--sections-border-color);
	opacity: 0.6;
}

.leaf-icon {
	color: var(--secondary-green);
	font-size: 1.1rem;
}

.section-title-green {
	font-family: "Wittgenstein", serif;
	font-weight: 400;
	color: var(--primary-green);
	font-size: clamp(1.75rem, 3.5vw, 2.25rem);
	text-align: center;
	margin-bottom: 0.75rem;
}

.section-subtitle {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	color: var(--primary-gray);
	font-size: 1rem;
	line-height: 1.3;
	max-width: 600px;
	text-align: center;
	margin: 0 auto 2.5rem;
}

.topic-card {
	width:100%;
	background: #fff;
	padding: 20px;
	border-radius: 20px;
	border: 1px solid rgba(189, 166, 146, 0.35);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
	margin-bottom: 50px;
}

.topic-card:hover {
	box-shadow: 0 12px 28px rgba(21, 42, 24, 0.08);
	transform: translateY(-4px);
}
.topic-card img {
	border-radius: 14px;
}

.topic-card-title {
	font-family: "Wittgenstein", serif;
	font-weight: 400;
	color: var(--primary-green);
	font-size: 1.15rem;
	padding-top: 20px;
}

.topic-card-text {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	color: var(--primary-gray);
	font-size: 0.9rem;
	line-height: 1.3;
	padding-top: 0px;
}

#what-i-do {
	background-color: var(--background-color2);
	padding: 100px;
	border-top: 1px solid var(--sections-border-color);
	border-bottom: 1px solid var(--sections-border-color);
}

.section-title-orange {
	font-family: "Prociono", serif;
	font-weight: 400;
	color: var(--primary-orange);
	font-size: clamp(1.75rem, 3.5vw, 2.25rem);
	text-align: center;
	margin-bottom: 1.5rem;
}

.what-i-do-text {
	font-family: "Wittgenstein", serif;
	font-weight: 400;
	color: var(--primary-green);
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	line-height: 1.65;
	text-align: center;
	max-width: 820px;
	margin: 0 auto;
}

#achievements-in-numbers {
	background-color: var(--background-color1);
	padding: 4rem 0 2rem;
}

.counter-item {
	text-align: center;
	padding: 1rem 0.5rem;
}

.counter-number {
	font-family: "Wittgenstein", serif;
	font-weight: 400;
	color: var(--primary-green);
	font-size: clamp(2rem, 4vw, 2.75rem);
	line-height: 1.1;
	margin-bottom: 0.35rem;
	display: block;
}

.counter-label {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	color: var(--secondary-green);
	font-size: 0.9rem;
}

#showcase-project {
	background-color: var(--background-color1);
	padding: 20px;
	margin: 50px;
}

.showcase-card {
	background-color: var(--background-color2);
	border: 1px solid var(--sections-border-color);
	border-radius: 20px;
	padding: 50px;
}

.showcase-label {
	font-family: "Manrope", sans-serif;
	font-weight: 500;
	color: var(--primary-orange);
	font-size: 0.85rem;
	margin-bottom: 0.35rem;
}

.showcase-title {
	font-family: "Wittgenstein", serif;
	font-weight: 400;
	color: var(--primary-green);
	font-size: clamp(1.4rem, 2.5vw, 1.75rem);
	margin-bottom: 0.75rem;
}

.showcase-text {
	font-family: "Manrope", sans-serif;
	font-weight: 400;
	color: var(--primary-gray);
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1.25rem;
}

.btn-sprintly {
	background-color: var(--primary-green);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 20px;
	font-family: "Manrope", sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-sprintly:hover {
	background-color: #0f1f12;
	color: #fff;
	transform: translateY(-1px);
}

.showcase-img {
	border-radius: 14px;
	max-width: 320px;
	width: 100%;
}

footer {
	background-color: var(--primary-green);
	color: rgba(255,255,255,0.85);
	padding: 1.25rem 0;
}

.footer-text {
	font-family: "Manrope", sans-serif;
	font-size: 0.875rem;
	margin: 0;
}

.footer-social a {
	color: rgba(255,255,255,0.85);
	font-size: 1rem;
	margin-left: 1rem;
	transition: color 0.2s ease;
	text-decoration: none;
}

.footer-social a:hover {
	color: #fff;
}
@media (max-width: 1400px) {
	.hero-portrait-col {
		display: none;
	}
	#hero-section {
		min-height: auto;
	}
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height:80vh;
	}
	#hero-content{
		position: relative;
		top:300px;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.leaf-divider{
		padding-top: 0px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		padding: 20px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 1200px) {
	.hero-portrait-col {
		display: none;
	}
	#hero-section {
		min-height: auto;
	}
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height:80vh;
	}
	#hero-content{
		position: relative;
		top:250px;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.leaf-divider{
		padding-top: 0px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		padding: 20px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 992px) {
	.hero-portrait-col {
		display: none;
	}
	#hero-section {
		min-height: auto;
	}
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height:400px;
	}
	#hero-content{
		position: relative;
		top:280px;
		left: auto;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.leaf-divider{
		padding-top: 150px;
		padding-bottom: 20px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		padding: 20px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 768px) {
	.nav-link {
		font-size: 0.9rem;
		padding: 0.6rem 1rem !important;
	}
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height:300px;
	}
	#hero-content{
		position: relative;
		top:250px;
		left: auto;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.leaf-divider{
		padding-top: 250px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	.counter-item {
		padding: 20px;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		text-align: center;
		padding:20px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 576px) {
	.nav-link {
		font-size: 0.9rem;
		padding: 0.6rem 1rem !important;
	}	
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height: 400px;
	}
	#hero-content{
		position: relative;
		top:260px;
		left: auto;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.leaf-divider{
		padding-top: 160px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	.counter-item {
		margin-bottom: 20px;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		text-align: center;
		padding: 20px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 480px) {
	.nav-link {
		font-size: 0.9rem;
		padding: 0.6rem 1rem !important;
	}	
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height: 300px;
	}
	#hero-content{
		position: relative;
		top:230px;
		left: auto;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.leaf-divider{
		padding-top: 260px;
	}
	.topic-card-title {
		text-align: center;
		padding-top: 10px;
	}
	.topic-card-text {
		text-align: center;
		padding-top: 0px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	.counter-item {
		padding: 20px;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		text-align: center;
		padding: 20px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}
@media (max-width: 380px) {
	.nav-link {
		font-size: 0.9rem;
		padding: 0.6rem 1rem !important;
	}	
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height: 190px;
	}
	#hero-content{
		position: relative;
		top:140px;
		left: auto;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.leaf-divider{
		padding-top: 400px;
	}
	.topic-card-title {
		text-align: center;
		padding-top: 10px;
	}
	.topic-card-text {
		text-align: center;
		padding-top: 0px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	.counter-item {
		margin-bottom: 1.5rem;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		flex-direction: column;
		text-align: center;
		padding: 1.5rem;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}

@media (max-width: 320px) {
	.nav-link {
		font-size: 0.9rem;
		padding: 0.6rem 1rem !important;
	}
	.navbar-brand{
		font-size: 16px;
	}
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height: 190px;
	}
	#hero-content{
		position: relative;
		top:120px;
		left: auto;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.leaf-divider{
		padding-top: 350px;
	}
	.topic-card-title {
		text-align: center;
		padding-top: 10px;
	}
	.topic-card-text {
		text-align: center;
		padding-top: 0px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	.counter-item {
		margin-bottom: 1.5rem;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		flex-direction: column;
		text-align: center;
		padding: 10px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}
@media (max-width: 320px) {
	.nav-link {
		font-size: 0.9rem;
		padding: 0.6rem 1rem !important;
	}
	.navbar-brand{
		font-size: 16px;
	}
	.hero-bg1, .hero-bg2, .hero-bg3, .hero-bg4, .hero-bg5 {
		background-size: contain;
		background-position: top;
		height: 190px;
	}
	#hero-content{
		position: relative;
		top:150px;
		left: auto;
	}
	.hero-title,
	.hero-desc {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.leaf-divider{
		padding-top: 450px;
	}
	.topic-card-title {
		text-align: center;
		padding-top: 10px;
	}
	.topic-card-text {
		text-align: center;
		padding-top: 0px;
	}
	#what-i-do {
		padding: 20px 10px;
	}
	.counter-item {
		margin-bottom: 1.5rem;
	}
	#showcase-project {
		background-color: var(--background-color1);
		padding: 20px 10px;
		margin: 0px;
	}
	.showcase-card {
		flex-direction: column;
		text-align: center;
		padding: 10px;
	}
	.showcase-text {
		max-width: 100%;
	}
	.showcase-img {
		max-width: 100%;
		margin-top: 20px;
	}
}