:root {
  --bs-primary: #1A1C29;
  --bs-primary-rgb: 26, 28, 41;
  --bs-secondary: #484954;
  --bs-secondary-rgb: 72, 73, 84;
  --bs-dark: #1A1C29;
  --bs-dark-rgb: 26, 28, 41;
  --bs-light: #F2F3F4;
  --bs-light-rgb: 242, 243, 244;

  --bs-body-bg: #FFFFFF; 
  --bs-tertiary-bg: #F7F7F8;
  --bs-body-color: #1A1C29;
  --bs-secondary-color: #484954;

  --bs-border-color: #E5E6E9;
  
  --bs-border-radius: 4px;
  --bs-border-radius-lg: 4px;
  --bs-border-radius-sm: 4px;

  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: 4px;

  --bs-body-font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  --bs-heading-font-family: 'Nohemi', sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --bs-body-font-weight: var(--fw-regular);
  --bs-headings-font-weight: var(--fw-semibold);
}


@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-ExtraLight.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Manrope';
	src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nohemi';
	src: url('../fonts/Nohemi-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nohemi Med';
	src: url('../fonts/Nohemi-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Nohemi SemBd';
	src: url('../fonts/Nohemi-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

body {
	font-family: 'Manrope', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'Nohemi', sans-serif;
}

.btn {
	font-weight: 600;
	padding: 0.6rem 1.2rem;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus {
	background-color: var(--bs-dark) !important;
	color: white !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
	background-color: var(--bs-light) !important;
	color: var(--bs-dark) !important;
}

/*  Hero  */
.panel {
	/* width: 100%;
  height: 100%;
  min-height: 100vh; */
	z-index: 1;
}

.hero {
	min-height: 90vh;
	padding: 4.5rem 0 6rem 0;
}

.hero__title {
	font-size: 4.5rem;
}

.hero__title span {
	font-size: 2.8rem;
}

.hero__text,
.hero__footer-nav li {
	color: var(--bs-dark);
}

@media (max-width: 992px) {
	.hero {
		min-height: 70vh;
	}
	.hero__title {
		font-size: 3.5rem;
	}
	.hero__title span {
		font-size: 2.2rem;
	}
}

@media (max-width: 768px) {
	.hero {
		padding: 3rem 0;
	}
	.hero__title {
		font-size: 2.5rem;
	}
	.hero__title span {
		font-size: 1.5rem;
	}
	.hero__text {
		font-size: 1rem;
	}
	.hero__footer-nav li {
		margin-bottom: 1rem;
		display: block;
	}
}

/* About */
.about {
	background-color: #F7F7F8;
	padding: 6rem 0;
	display: flex;
	align-items: center;
}

@media (max-width: 768px) {
	.about {
		padding: 4rem 0;
	}
	.about__title {
		font-size: 2.5rem !important; /* Overriding display-4 on mobile */
	}
}

/* Services */
.services {
	padding: 6rem 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.services__image-wrapper {
	text-align: right;
}

.services__accordion .accordion-button {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

.services__accordion .accordion-button::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231A1C29' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
	background-size: 1.5rem;
}

.services__accordion .accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231A1C29' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
	transform: none;

}

/* Accordion  */
.accordion-button {
	font-size: 2rem;
}

@media (max-width: 992px) {
	.services {
		padding: 3rem 0;
	}

	.services__image {
		height: 350px;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
}


@media (max-width: 768px) {
	.services {
		padding: 2rem 0;
	}
	.services__title {
		font-size: 2.5rem !important;
	}
	.accordion-button {
		font-size: 1.5rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* Approach */
@media (max-width: 768px) {
	.approach__title {
		font-size: 2.5rem !important;
	}
	.approach__step {
		padding-top: 2rem !important;
		padding-bottom: 2rem !important;
	}
	.approach__footer-text {
		font-size: 1.75rem;
	}
}

/* Who we work */
.who-we-work__number,
.who-we-work__name {
	font-size: 3rem;
}

.who-we-work__footer {
	background-color: #F7F7F8;
	padding: 3rem 0;
}

@media (max-width: 992px) {
	.who-we-work__hero-img {
		height: 300px !important;
	}
	.who-we-work__block {
		height: 250px !important;
	}
	.who-we-work__number,
	.who-we-work__name {
		font-size: 2rem;
	}
}

@media (max-width: 768px) {
	.who-we-work__title {
		font-size: 2.5rem !important;
	}
	.who-we-work__hero-img {
		height: 200px !important;
		margin-bottom: 2rem !important;
	}
	.who-we-work__block {
		height: 200px !important;
	}
	.who-we-work__number,
	.who-we-work__name {
		font-size: 1.5rem;
	}
	.who-we-work__footer-text {
		font-size: 1.25rem !important;
	}
}

/* Why */
.why-blueprint__title {
	font-size: 3rem;
	letter-spacing: -1px;
	line-height: 1.1;
}

@media (max-width: 768px) {
	.why-blueprint {
		padding-top: 3rem !important;
	}
	.why-blueprint__title {
		font-size: 2.5rem;
	}
	.why-blueprint__footer-title {
		font-size: 1.25rem !important;
	}
}

/* Contact CTA */
.contact-cta {
	background-color: var(--bs-primary);
	padding: 10rem 0 6rem 0;
}

@media (max-width: 992px) {
	.contact-cta {
		padding: 5rem 0;
	}
}
@media (max-width: 768px) {
	.contact-cta {
		padding: 3rem 0;
	}
	.contact-cta__title {
		font-size: 2.5rem !important;
	}
}

/* Arrow Animations */
@keyframes floatArrowDown {
	0%, 100% {
		transform: rotate(90deg) translateX(0);
	}
	50% {
		transform: rotate(90deg) translateX(4px);
	}
}

.arrow-float-down {
	animation: floatArrowDown 3s ease-in-out infinite;
}

.arrow-hover-right {
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
	will-change: transform;
}

.arrow-hover-right:hover {
	transform: translateX(5px);
}