:root {
	--title-font: "Ibrand";
	--body-font: "Montserrat", sans-serif;

	--orange: #ff8f2b;
	--lightBlue: #2e75ad;
	--darkBlue: #112b40;
	--lightGrey: #e0ebf5;
	/* --blue: #367eb3; */

	--transition-03: all 0.3s ease-in-out;
}

/* Ibrand Regular */
@font-face {
	font-family: "Ibrand";
	src: url("/assets/fonts/Ibrand.woff2") format("woff2"),
		url("/assets/fonts/Ibrand.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

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

/* Works on Firefox */
* {
	scrollbar-width: thin;
	scrollbar-color: red;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 8px;
	padding: 10px;
}

*::-webkit-scrollbar-track {
	background: red;
}

*::-webkit-scrollbar-thumb {
	background-color: #000;
}

::-moz-selection {
	color: #fff;
	background: #000;
	text-shadow: none;
}

::selection {
	color: #fff;
	background: #000;
	text-shadow: none;
}

html {
	font-size: 62.5%;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	line-height: 1;
	font-family: var(--body-font);
	font-size: 1.6rem;
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
	font-size: inherit;
	margin: 0;
}

ol,
ul,
li {
	list-style: none;
}

a {
	outline: none;
	color: inherit;
	background-color: transparent;
	text-decoration: none;
	transition: var(--transition-03);
	-webkit-transition: var(--transition-03);
	-moz-transition: var(--transition-03);
	-ms-transition: var(--transition-03);
	-o-transition: var(--transition-03);
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

main {
	display: block;
}

section {
	display: flex;
	flex-direction: column;
	width: 100%;
}

img {
	border-style: none;
}

.img-res {
	width: 100%;
	max-width: 100%;
	height: auto;
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
}

.fp-section,
.fp-slide {
	font-family: var(--body-font);
}

/* Overwriting styles for the navigation dots */
#fp-nav {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#fp-nav ul li a span {
	background: white;
}

.swiper {
	width: 100%;
	height: 100%;
}

/* ! Global css */
.cnt {
	width: 100%;
	margin: 0 auto;
}

/* ! Header */
.header {
	height: 10.5rem;
	position: fixed;
	width: 100%;
	z-index: 999;
	padding: 0 5%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header_logo {
	display: flex;
	width: 23.5rem;
}

.header_nav {
	width: 7rem;
	position: relative;
	z-index: 1;
}

.header_nav button {
	width: 100%;
}
.menu {
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	padding: 0;
}
.line {
	fill: none;
	stroke: var(--lightBlue);
	stroke-width: 6;
	transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
		stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line1 {
	stroke-dasharray: 60 207;
	stroke-width: 6;
}
.line2 {
	stroke-dasharray: 60 60;
	stroke-width: 6;
}
.line3 {
	stroke-dasharray: 60 207;
	stroke-width: 6;
}
.opened .line1 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
	stroke-width: 6;
}
.opened .line2 {
	stroke-dasharray: 1 60;
	stroke-dashoffset: -30;
	stroke-width: 6;
}
.opened .line3 {
	stroke-dasharray: 90 207;
	stroke-dashoffset: -134;
	stroke-width: 6;
}

.opened .line {
	stroke: #fff;
}

.header_overlay {
	width: 50rem;
	height: 50rem;
	background: var(--orange);
	position: fixed;
	right: 0;
	top: 0;
	transform: translateX(100%);
	opacity: 0;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 9rem 4rem;
}

.header_overlay.opened {
	transform: translateX(0);

	opacity: 1;
}
nav ul {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
nav li a {
	color: #fff;
	font-size: 2.8rem;
	font-weight: 600;
}

nav li a:hover {
	color: var(--darkBlue);
}

/* ! Footer */
.footer {
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.footer_top {
	height: 50vh;
	width: 100%;
	background: #fff;
	display: flex;
	padding: 0 5% 2rem 5%;
	align-items: flex-end;
	position: relative;
}

.footer_img {
	position: absolute;
	right: 0;
	top: 0;
	width: 22%;
}

.footer_img a {
	font-size: 2.6rem;
	color: #fff;
	font-weight: 500;
	position: absolute;
	left: 5%;
	bottom: 13%;
}

.footer_img a:hover {
	color: var(--lightBlue);
}

.footer_title {
	font-family: var(--title-font);
	color: var(--lightBlue);
	font-size: 30rem;
}

.footer_bot {
	height: 50vh;
	width: 100%;
	background: var(--lightBlue);
	padding: 8rem 5% 0 5%;
	display: flex;
	flex-direction: column;
}

.footer_bot-top {
	display: flex;
}

.footer_bot-logo {
	width: 40rem;
}

.footer_bot-topNav {
	display: flex;
	gap: 10rem;
	margin-left: 30rem;
	padding-top: 2rem;
}

.footernav {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.footernav li a {
	font-size: 2.5rem;
	font-weight: 500;
	color: #fff;
}

.footernav li a:hover {
	color: var(--orange);
}

.footerContact {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 40rem;
}

.footerContact li a {
	font-size: 2.5rem;
	line-height: 3rem;
	font-weight: 500;
	color: #fff;
}

.footerContact li a:hover {
	color: var(--orange);
}

.footer_bot-bot {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-top: auto;
	padding-bottom: 2rem;
}

.footer_copyright {
	color: #fff;
	font-size: 1.8rem;
}

.footer_agencycopyright a {
	display: flex;
	color: #fff;
	font-size: 1.8rem;
	align-items: center;
	gap: 2rem;
}

.footer_agencycopyright a:hover {
	color: var(--orange);
}

.footer_agencycopyright span {
	width: 4rem;
}
/* ! Core */

/* ? section banner */
.Banner {
	height: 100vh;
}

.banner_swiper {
	width: 100%;
	height: 100%;
}

.banner_box {
	width: 100%;
	height: 100%;
	display: flex;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.banner_content {
	font-family: var(--title-font);
	font-size: 5.5rem;
	color: var(--lightBlue);
	width: 24%;
	position: absolute;
	top: 12%;
	right: 15%;
}

/* ! section intro */
#section2 {
	background: #fff;
}

.intro {
	height: 100vh;
	padding: 0 5%;
	justify-content: center;
	position: relative;
}

.intro_content {
	font-size: 7.5rem;
	color: var(--lightBlue);
	font-weight: 400;
}

.intro_content strong {
	font-weight: 600;
	color: var(--orange);
}

.intro_btn {
	position: absolute;
	right: 5%;
	bottom: 10%;
}

.intro_btn a {
	font-size: 4rem;
	color: var(--orange);
	border-radius: 4.5rem;
	border: 2px solid var(--orange);
	padding: 1.5rem 4rem;
}

.intro_btn a:hover {
	background: var(--lightBlue);
	border: 2px solid var(--lightBlue);
	color: #fff;
}

/* ? section challenges */
#section3 {
	background: var(--darkBlue);
}

.challenges {
	height: 100vh;
	padding: 0 5%;
	position: relative;
}

.challenges_wp {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

.challenges_top {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

.challenges_top-box {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
}

.challenges_img {
	width: 70%;
}

.challenges_content {
	width: 50%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 10rem;
}

.challenges_content h3 {
	font-family: var(--title-font);
	color: var(--orange);
	font-size: 4.5rem;
	margin-bottom: 2rem;
	position: relative;
	left: 85px;
}

.challenges_content p {
	font-size: 4rem;
	color: #f9f9f9;
	line-height: 4.6rem;
	display: flex;
	flex-direction: column;
}

.challenges_content p span:first-child {
	position: relative;
	right: -45px;
}

.challenges_content p span:nth-child(2) {
}

.challenges_content p span:nth-child(3) {
	position: relative;
	left: -45px;
}

.challenges_bot {
	position: absolute;
	width: 100%;
	bottom: 15%;
}

.challenges_bot-box {
	width: 100%;
	display: flex;
	text-align: center;
	color: #fff;
	justify-content: center;
	font-family: var(--title-font);
	font-size: 6rem;
	color: #e0ebf5;
	transition: var(--transition-03);
	cursor: pointer;
}

.challenges_bot .swiper-slide.swiper-slide-active .challenges_bot-box {
	color: var(--orange);
	pointer-events: none;
}

.challenges_bot-box:hover {
	color: var(--lightBlue);
}

.challenges_top-nav {
	position: absolute;
	width: 200px;
	height: 60px;
	display: flex;
	right: 5%;
	bottom: 25%;
}

.challenges_top-nav .swiper-button-next,
.challenges_top-nav .swiper-button-prev {
	position: inherit;
	left: inherit;
	right: inherit;
	top: inherit;
	margin: 0;
}

.challenges_top-nav .swiper-pagination {
	position: unset;
	text-align: left;
	left: inherit;
	bottom: inherit;
	top: inherit;
	width: auto;
	color: #fff;
	font-size: 2rem;
}

.swiper-pagination-current {
	color: var(--orange);
	font-size: 4rem;
}

.challenges_top-nav .swiper-button-next,
.challenges_top-nav .swiper-button-prev {
	width: 5rem;
	height: 5rem;
}

.challenges_top-nav .swiper-button-next::after,
.challenges_top-nav .swiper-button-prev::after {
	display: none;
}

.challenges_top-nav .swiper-button-next svg,
.challenges_top-nav .swiper-button-prev svg {
	display: none;
}

.challenges_top-nav-arrows {
	display: flex;
	gap: 1rem;
	margin-left: auto;
}

/* ? section services */
#section4 {
	background: #fff;
}

.services {
	height: 100vh;
	position: relative;
	flex-direction: column;
}

.services_top {
	display: flex;
	padding: 20rem 5% 0 5%;
	align-items: center;
}

.services_title {
	font-size: 10rem;
	color: var(--lightBlue);
	font-family: var(--title-font);
}

.services_wp {
	display: flex;
	width: 100%;
	margin-top: 10rem;
}

.spring-slider {
	width: 100%;
	display: flex;
}

.spring-slider .swiper-slide {
	transition-timing-function: cubic-bezier(0.76, 0.09, 0.215, 1);
}

.services_box {
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 48rem;
	border: 1px solid var(--orange);
	border-top: 2px solid var(--orange);
	border-bottom: 2px solid var(--orange);
	padding: 3rem 3rem;
}

.spring-slider .swiper-slide:nth-child(even) .services_box {
	background: var(--orange);
}

.services_box-title {
	font-size: 2.4rem;
	color: var(--orange);
	margin-bottom: 4rem;
}

.spring-slider .swiper-slide:nth-child(even) .services_box .services_box-title {
	color: var(--darkBlue);
}

.services_box-txt {
	font-size: 4.8rem;
	line-height: 110%;
	color: var(--lightBlue);
	font-weight: 600;
}

.spring-slider .swiper-slide:nth-child(even) .services_box .services_box-txt {
	color: #fff;
}

.services_box-tag {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: auto;
}

.services_box-tag span {
	font-size: 3rem;
	color: var(--darkBlue);
	font-weight: 500;
}

.services_box-tag ul {
	display: flex;
	gap: 1rem;
}

.services_box-tag ul li {
	font-size: 1.8rem;
	color: var(--orange);
	font-weight: 500;
	border: 1px solid var(--orange);
	border-radius: 20px;
	padding: 0.5rem 1.5rem;
}

.spring-slider
	.swiper-slide:nth-child(even)
	.services_box
	.services_box-tag
	ul
	li {
	border: 1px solid #fff;
	color: #fff;
}

.services_nav {
	display: flex;
	margin-left: auto;
	gap: 1rem;
}

.services_nav .swiper-button-next,
.services_nav .swiper-button-prev {
	width: 5rem;
	height: 5rem;
	position: unset;
	left: inherit;
	right: inherit;
}

.services_nav .swiper-button-next::after,
.services_nav .swiper-button-prev::after {
	display: none;
}

.services_nav .swiper-button-next svg,
.services_nav .swiper-button-prev svg {
	display: none;
}

/* ? how we work */
#section5 {
	background: var(--darkBlue);
}

.howwework {
	height: 100vh;
	overflow: hidden;
}

.howwework_wp {
	display: flex;
	padding: 0 5%;
	position: relative;
	flex-direction: column;
}

.howwework_bot_wp > div {
	display: none;
}

.howwework_bot_wp > div.is-active {
	display: block;
}

.howwework_top {
	display: flex;
	width: 100%;
	position: relative;
}

.howwework_img {
	width: 60%;
}

.howwework_title {
	font-size: 10rem;
	color: #fff;
	font-family: var(--title-font);
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
}

.howwework_bottom {
	position: absolute;
	width: 100%;
	bottom: 7%;
	left: 5%;
	padding: 0 3%;
	overflow: hidden;
}

.howwework_box {
	width: 100%;
	display: flex;
	text-align: center;
	justify-content: center;
	font-family: var(--title-font);
	font-size: 4rem;
	color: #e0ebf5;
	transition: var(--transition-03);
	cursor: pointer;
	height: 75px;
	align-items: center;
}

.howwework_bottom .swiper-slide.swiper-slide-active .howwework_box {
	color: #fff;
	pointer-events: none;
	font-size: 9rem;
	height: auto;
}

.howwework_nav {
	position: absolute;
	display: flex;
	right: 5%;
	top: 65%;
	transform: translateY(-50%);
	width: 200px;
	height: 5rem;
}

.howwework_nav .swiper-button-next,
.howwework_nav .swiper-button-prev {
	position: inherit;
	left: inherit;
	right: inherit;
	top: inherit;
	margin: 0;
}

.howwework_nav .swiper-pagination {
	position: unset;
	text-align: left;
	left: inherit;
	bottom: inherit;
	top: inherit;
	width: auto;
	color: #fff;
	font-size: 2rem;
}

.howwework_top-nav-arrows {
	display: flex;
	gap: 1rem;
	margin-left: auto;
}

.howwework_bot_wp {
	display: flex;
	padding: 3rem 5%;
	font-size: 5rem;
	color: #fff;
	width: 70%;
}

/* ? section support */
#section6 {
	background: #fff;
}

.img_mobile {
    display: none;
}

.support {
	height: 100vh;
	position: relative;
}

.support_title {
	font-size: 10rem;
	color: var(--orange);
	font-family: var(--title-font);
	position: absolute;
	left: 5%;
	top: 15rem;
	z-index: 2;
}

.support_slider {
	display: flex;
	width: 100%;
	height: 100%;
}

.support_box {
	width: 100%;
	display: flex;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	justify-content: flex-end;
	align-items: flex-end;
	padding: 0 5% 5rem;
}

.support_content {
	width: 65rem;
	height: 50rem;
	background: #fff;
	padding: 7rem 4rem;
	display: flex;
	flex-direction: column;
}

.support_content-title {
	font-size: 3.5rem;
	font-weight: 700;
	color: var(--darkBlue);
	margin-bottom: 3rem;
	margin-bottom: 5rem;
}

.support_content-list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.support_content-list li {
	display: flex;
	align-items: center;
}

.list-title {
	width: 180px;
	height: 43px;
	background: var(--orange);
	border-radius: 20px;
	font-size: 2.5rem;
	font-weight: 600;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-txt {
	font-size: 2.2rem;
	font-weight: 600;
	color: var(--lightBlue);
	width: 62%;
	margin-left: auto;
}

.support_nav .swiper-button-next,
.support_nav .swiper-button-prev {
	position: unset;
	left: inherit;
	right: inherit;
	top: inherit;
	margin: 0;
}

.support_nav {
	display: flex;
	gap: 1rem;
	position: absolute;
	width: 10rem;
	height: 5rem;
	right: 5%;
	top: 20rem;
}

/* ?section Teams */
#section7 {
	background: #fff;
}

.teams {
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.teams_arrow {
	position: absolute;
	right: 0;
	top: 0;
	width: 91%;
	pointer-events: none;
}

.teams_wp {
	padding: 15rem 5% 0 5%;
	display: flex;
	flex-direction: column;
}

.teams_title {
	font-size: 10rem;
	color: var(--orange);
	font-family: var(--title-font);
}

.teams_content {
	display: flex;
	width: 100%;
	position: relative;
}

.teams_box {
	display: flex;
	width: 100%;
}

.teams_desc {
	width: 50%;
	display: flex;
	flex-direction: column;
	padding-top: 10rem;
}

.teams_name {
	font-family: var(--title-font);
	color: var(--lightBlue);
	font-size: 4rem;
}

.teams_role {
	font-size: 2.8rem;
	color: var(--darkBlue);
	margin-bottom: 5rem;
}

.teams_bio-blue {
	font-size: 2.4rem;
	line-height: 2.4rem;
	color: var(--lightBlue);
	margin-bottom: 3rem;
	width: 80%;
}

.teams_bio {
	font-size: 2rem;
	line-height: 2.4rem;
	color: var(--darkBlue);
}

.teams_img {
	width: 32%;
	margin-left: 8%;
}

.teams_nav .swiper-button-next,
.teams_nav .swiper-button-prev {
	position: unset;
	left: inherit;
	right: inherit;
	top: inherit;
	margin: 0;
}

.teams_nav {
	display: flex;
	gap: 1rem;
	position: absolute;
	width: 10rem;
	height: 5rem;
	right: 0;
	bottom: 20%;
}

/* ? section operate */
#section8 {
	background: var(--darkBlue);
}

.operate {
	height: 100vh;
	overflow: hidden;
}

.operate_wp {
	width: 100%;
	display: flex;
	padding: 0 5%;
	flex-direction: column;
}

.operate_top {
	padding-top: 15rem;
	display: flex;
	flex-direction: column;
}

.operate_title {
	font-size: 10rem;
	color: #fff;
	font-family: var(--title-font);
}

.operate_subtitle {
	font-size: 5rem;
	font-weight: 300;
	color: var(--orange);
}

.operate_content {
	width: 100%;
	display: flex;
}

.operate_Img {
	width: 45%;
	margin-left: auto;
	position: relative;
	top: -15rem;
	left: -2rem;
}

.operate_slider {
	width: 35%;
	height: 50rem;
	margin-top: 6rem;
	position: relative;
}

.operate_nav .swiper-button-next,
.operate_nav .swiper-button-prev {
	position: unset;
	left: inherit;
	right: inherit;
	top: inherit;
	margin: 0;
	transform: rotate(90deg);
}

.operate_nav {
	display: flex;
	gap: 2rem;
	position: absolute;
	right: 0%;
	top: 50%;
	flex-direction: column;
	transform: translateY(-50%);
	z-index: 1;
}

/* .operateSwiper {
	overflow: hidden;
} */

.operateSwiper .swiper-slide {
	display: flex;
	align-items: center;
	color: #e0ebf5;
	font-size: 5rem;
	opacity: 0.2;
}
.operateSwiper .swiper-slide-active {
	color: var(--orange);
	font-size: 8rem;
	font-weight: 700;
	opacity: 1;
}