/* ---------------- Google fonts ------------------ */

/* Geist Mon font*/
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');

/* Geist font */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');


/* ---------------- Basic css ------------------ */

html {
	font-size: 62.5%;
}

:root {
	scroll-behavior: unset;

	/* colors */
	--black-color: #0B0B0B;
	--white-color: #FFF;
	--grey-color: #ffffffb3;
	--dark-grey-color: #636363;
	--red-color: #FF4C1F;
	--bordar-color: #3B3B3B;
	--button_bg: #ff7675;

	/* fonts */
	--Geist-Mon-font: "Geist Mono", monospace;
	--Geist-font: "Geist", sans-serif;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
i,
ol,
ul,
li,
form,
label,
footer,
header,
menu,
nav,
section {
	margin: 0;
	padding: 0;
}

ol,
ul {
	list-style: none;
}

a {
	text-decoration: none;
	transition: 200ms;
	color: inherit;
}

button:focus,
a:focus,
input:focus,
textarea:focus {
	outline: none;
}

/* body */
body {
	font-family: var(--Geist-Mon-font);
	background: var(--black-color);
	color: var(--grey-color);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.73;
	position: relative;
}

body::before {
	content: "";
	width: 1px;
	height: 100%;
	display: block;
	background: transparent;
	border: 1px dashed var(--bordar-color);
	position: absolute;
	left: 3%;
	top: 0;
	z-index: 1024;
}

body::after {
	content: "";
	width: 1px;
	height: 100%;
	display: block;
	background: transparent;
	border: 1px dashed var(--bordar-color);
	position: absolute;
	right: 3%;
	top: 0;
	z-index: 1024;
}

h1,
h2,
h3,
h4,
h5,
a {
	font-family: var(--Geist-font);
}

a {
	display: inline-block;
}

section {
	border-bottom: 1px dashed var(--bordar-color);
}

.button {
	color: var(--white-color);
	background-color: var(--red-color);
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.06;
	padding: 2.1rem 3.2rem;
	border-radius: 5.2rem;
	display: inline-block;
	transition: 300ms;
}

.button:hover {
	color: var(--white-color);
	background: var(--button_bg);
}

ul.checkmarks li {
	padding-left: 29px;
	background: url('../img/check.svg') 0px 0.5px no-repeat;
	background-size: 20px 20px;
}


/* Heading */

.title_xxl {
	color: var(--white-color);
	font-size: 8rem;
	line-height: 1;
	letter-spacing: -3.2px;
}

.title_xl {
	color: var(--dark-grey-color);
	font-size: 7.2rem;
	line-height: 1.05;
	letter-spacing: -2.88px;
}

.title_lg {
	color: var(--white-color);
	font-size: 4.8rem;
	line-height: 1;
	letter-spacing: -1.92px;
}

.title_lg {
	color: var(--white-color);
	font-size: 3.6rem;
	line-height: 1.11;
	letter-spacing: -1.44px;
}

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

/* ---------------- Header Section  ------------------ */

.header_section {
	background: #0B0B0B;
	padding: 2.7rem 0;
	border-bottom: 1px dashed var(--bordar-color);
}

.header_wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.logo {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.logo h4 {
	color: var(--white-color);
	font-size: 2.3rem;
	font-weight: 500;
	letter-spacing: -0.479px;
}

.header_menu {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.header_menu a {
	color: var(--grey-color);
	font-size: 1.75rem;
	line-height: 1.13;
	transition: 0.2s all ease;
}

.header_menu a:hover {
	color: var(--button_bg);
}

.header_contact {
	display: flex;
	align-items: center;
	gap: 2.4rem;
}

.header_contact .number {
	color: var(--white-color);
	font-size: 1.5rem;
	line-height: 1.13;
	transition: 0.2s all ease;
}

.header_contact .number:hover {
	color: var(--button_bg);
}

.header_contact .button {
	padding: 1.5rem 2.5rem;
}

.header_contact .button img {
	width: 2.4rem;
}

/* navbar-toggler */
.navbar-toggler img {
	width: 4.5rem;
}


/* offcanvas menu */
.offcanvas-start {
    width: 100%!important;
    background: #0B0B0B;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.offcanvas-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3rem 0.5rem;
}

.close_btn {
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    padding: 0rem;
    transition: 0.2s all ease;
}

.close_btn:hover {
    opacity: 0.85;
}

.close_btn img {
    max-width: 2.8rem;
}

.offcanvas .header_menu,
.offcanvas .header_contact {
	display: block;
}

.offcanvas-body .header_menu a {
    width: 100%;
    display: block;
    padding: 1.6rem 0rem;
    border-bottom: 1px solid var(--bordar-color);
    transition: 0.2s all ease;
}

.offcanvas-body .header_menu a:hover {
    padding-left: 1.5rem;
}

.offcanvas_bottom {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important;
    margin-top: auto;
}

.offcanvas_bottom .header_contact a {
    width: 100%;
    display: block;
    text-align: center;
    padding: 1.6rem 2rem;
}

/* ---------------- Hero Section  ------------------ */
.hero_section {
	padding: 32rem 0 15rem;
	text-align: center;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
}

.hero_imgleft {
	width: 54rem;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 9;
}

.hero_imgleft img {
	width: 100%;
}

.hero_imgright {
	width: 67rem;
	position: absolute;
	right: -4rem;
	bottom: 0;
	z-index: 9;
}

.hero_imgright img {
	width: 100%;
}

.hero_video {
	width: 80%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
}

.hero_video video {
	width: 100%;
	max-width: 1600px;
}	

.hero_btn_group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	flex-wrap: wrap;
	padding-bottom: 2.4rem;
	display: none;
}

.hero_btn_group a {
	color: var(--grey-color);
	background: var(--black-color);
	border: 0.1rem dashed var(--bordar-color);
	font-size: 1.4rem;
	line-height: 1.21;
	border-radius: 30px;
	padding: 0.8rem 1.4rem;
}

.hero_wrapper {
	position: relative;
	z-index: 9;
}

.hero_wrapper h1 {
	font-weight: 400;
	padding-bottom: 4rem;
	text-shadow: 0 0 10px black;
}

.hero_button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.2rem;
}

.hero_button .button {
	font-size: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	width: 27.1rem;
	height: 8.7rem;
}

.hero_button .button img {
	width: 3.6rem;
}

.hero_button .button span {
	display: block;
	text-align: left;
}

.hero_button .button .tel {
	font-family: var(--Geist-Mon-font);
	font-size: 1.5rem;
	color: rgba(255, 255, 255, 0.70);
	margin-top: 0.2rem;
}

.hero_button .or {
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 118.149%;
	color: rgba(255, 255, 255, 0.70);
	text-align: center;
}

.hero_button .message_btn {
	background: #111111;
	transition: 300ms;
}

.hero_button .message_btn:hover {
	color: var(--white-color);
	background: var(--red-color);
}

.hero_wrapper p {
	padding-top: 4rem;
}

/* ---------------- About Us Section  ------------------ */
.about_us_wrapper {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding: 0 2rem;
}

.about_us_box {
	border-right: 1px dashed var(--bordar-color);
	padding: 8rem 0;
	text-align: center;
}

.about_us_box .title_lg {
	font-size: 3.2rem;
}

.about_us_box p {
	color: var(--grey-color);
	background: var(--black-color);
	border: 0.1rem dashed var(--bordar-color);
	display: inline-block;
	border-radius: 30px;
	padding: 0.3rem 1.4rem;
	margin-bottom: 1.4rem;
	display: none;
}

.about_us_box img {
	width: 5rem;
	display: block;
	margin: 0 auto 2rem;
}


/* ---------------- Emergency Section  ------------------ */

.emergency-texts h2 {
	color: var(--red-color);
}

.emergency-texts h2 span {
	color: var(--white-color);
}

.emergency-texts p {
	font-size: 1.6rem;
	padding-top: 2.4rem;
	max-width: 67.7rem;
	width: 100%;
}

.emergency-texts p span {
	color: var(--red-color);
}

.emergency_image video {
	width: 100%;
}


/* ----------------  Section  ------------------ */

.our_process_section {
	text-align: center;
}

.our_process_section .row {
	--bs-gutter-x: 0;
}

.enter_title {
	padding: 5.6rem 0;
}

.step-box {
	padding: 9.6rem 8.8rem;
	border-right: 0.1rem dashed var(--bordar-color);
	height: 100%;
	position: relative;
}

.step-box::before {
	content: "";
	width: 1500%;
	height: 1px;
	display: block;
	background: transparent;
	border-top: 0.1rem dashed var(--bordar-color);
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.step-box .step {
	background: var(--black-color);
	border: 0.1rem dashed var(--bordar-color);
	border-radius: 30px;
	padding: 0.4rem 1.4rem;
	display: inline-block;
}

.step-box h2{
	padding: 2.4rem 0;
}

/* ---------------- Active Section  ------------------ */
.active_section {
	position: relative;
}

.active_section video {
	width: 100%;
	height: 64rem;
	object-fit: cover;
}

.active_text {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
}

.active_wrapper{
	text-align: center;
}

.active_wrapper h2{
	padding: 3rem 0 2.4rem;
}

.active_wrapper h2 span{
	color: var(--white-color);
}

.active_wrapper .pb {
	padding-bottom: 3.6rem;
}

.active_wrapper p {
	max-width: 37rem;
	width: 100%;
	margin: 0 auto;
}

.active_wrapper h6 {
	font-family: var(--Geist-Mon-font);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.149%;
	color: rgba(255, 255, 255, 0.70);
	background: #0B0B0B;
	border: 1px dashed #3B3B3B;
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border-radius: 4rem;
}


/* ---------------- Details Section  ------------------ */

.details-section .row {
	--bs-gutter-x: 0;
}

.details_text_box{
	padding: 9.6rem 2rem;
	border-right: 0.1rem dashed var(--bordar-color);
	height: 100%;
	position: relative;
}

.details_text {
	max-width: 36.8rem;
	width: 100%;
	margin: 0 auto;
}

.details_text_box h4 {
	padding-bottom: 0.8rem;
}

.details_text_box .solution_cto {
	background: var(--black-color);
	display: block;
	text-align: center;
	border: 0.1rem dashed var(--bordar-color);
	border-radius: 30px;
	padding: 0.8rem 1.4rem;
	margin-top: 2.4rem;
	transition: 0.2s all ease;
}

.details_text_box .solution_cto:hover {
	background: var(--white-color);
	border-color: var(--white-color);
	color: var(--black-color);
}

.copyright {
	padding: 3.7rem 0;
	text-align: center;
}

.copyright p span {
	color: #FF5F38;
}

/* ---------------- review Section  ------------------ */
.review_section {
	padding: 16rem 0rem;
}

.review_wrapper {
	max-width: 148rem;
	width: 100%;
	margin: 0 auto;
	position: relative;
	padding: 0 5rem;
}

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

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

.swiper-button-next {
	width: 4.8rem;
	right: 0;
}

.swiper-button-prev {
	width: 4.8rem;
	left: 0;
}

.swiper-button-next img,
.swiper-button-prev img {
	width: 100%;
}

.review_item {
	max-width: 112.4rem;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}

.review_item p {
	font-family: var(--Geist-font);
	font-size: 5.6rem;
	font-style: normal;
	font-weight: 400;
	line-height: 107.143%;
	letter-spacing: -0.22rem;
	color: var(--white-color);
	text-align: center;
}

.client_details {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: left;
	gap: 1.6rem;
	margin-top: 2.4rem;
	border: 1px dashed #3B3B3B;
	padding: 0.8rem 0.8rem;
	border-radius: 5rem;
}

.client_details .client_text {
	padding-right: 0.5rem;
}

.client_details img {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ab482f;
}

.client_details h4 {
	font-family: var(--Geist-Mon-font);
	font-size: 1.5rem!important;
	font-style: normal;
	font-weight: 400;
	line-height: 118.149%;
	color: rgba(255, 255, 255, 0.70);
	text-align: left;
	padding-bottom: 0;
}

.client_details p {
	margin-top: -2px;
}

/*--------------------- start section ------------------*/

.start_title {
	padding: 5.6rem 0rem;
	border-bottom: 1px dashed #3B3B3B;
}

.start_title h3 {
	font-family: var(--Geist-font);
	font-size: 4.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: -0.192rem;
	color: var(--white-color);
	margin-left: 12rem;
}

.border_right {
	border-right: 1px dashed #3B3B3B;
}

.start_item {
	max-width: 58rem;
	width: 100%;
	margin: 0 auto;
	padding: 9.6rem 0rem;
}

.start_item h6 {
	font-family: var(--Geist-Mon-font);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 118.149%;
	color: rgba(255, 255, 255, 0.70);
	border: 1px dashed #3B3B3B;
	display: inline-block;
	padding: 0.8rem 1.4rem;
	border-radius: 5rem;
	display: none;
}

.start_item h3 {
	font-family: var(--Geist-font);
	font-size: 4.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: -0.192rem;
	color: var(--white-color);
	margin: 2.4rem 0rem;
}

.start_item p {
	font-family: var(--Geist-Mon-font);
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
	line-height: 162.5%;
	color: rgba(255, 255, 255, 0.70);
	margin-bottom: 2.4rem;
}

.start_item p span {
	color: #FF5F38;
}

.start_item ul li {
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
	line-height: 162.5%;
	color: var(--white-color);
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	margin-bottom: 1.6rem;
}

.start_item ul li img {
	width: 2.6rem;
	flex-shrink: 0;
}

.start_item a {
	margin-top: 1rem;
	background: #202020;
}

.start_item a img {
	width: 2.4rem;
}

.start_item a:hover,
.start_item a.active {
	background: var(--red-color);
}

/*-------------------- contact_section ---------------------*/
.contact_section {
	padding: 12rem 0rem;
}

.contact_left,
.contact_right {
	max-width: 64.5rem;
	width: 100%;
	margin: 0 auto;
}

.contact_left h3 {
	font-size: 7.2rem;
	font-style: normal;
	font-weight: 400;
	line-height: 105.556%;
	letter-spacing: -0.288rem;
	color: var(--white-color);
}

.contact_left h3 span {
	color: #636363;
	display: block;
}

.contact_left p {
	font-size: 1.6rem;
	font-style: normal;
	font-weight: 400;
	line-height: 162.5%;
	color: rgba(255, 255, 255, 0.70);
	margin: 2.4rem 0rem;
}

.contact_left p span {
	color: #FF5F38;
}

.contact_right p.error {
	display: none;
	margin-top: 1rem;
    color: var(--red-color);
}

.contact_left ul li {
	color: var(--white-color);
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	margin-bottom: 1.6rem;
}

.contact_left ul li img {
	width: 2.6rem;
	flex-shrink: 0;
}

.contact_left ul li:last-child {
	margin-bottom: 0;
}

.contact_right h3 {
	font-size: 3rem;
}

.contact_right h6 {
	font-family: var(--Geist-Mon-font);
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -0.014rem;
	color: var(--white-color);
	margin-bottom: 1.5rem;
}

.contact_right ul {
	max-width: 40rem;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px dashed #3B3B3B;
	padding: 0.6rem 0.6rem;
	border-radius: 5rem;
	margin-left: -2px;
}

.contact_right ul a {
	font-family: var(--Geist-Mon-font);
	font-size: 1.5rem;
	font-style: normal;
	font-weight: 400;
	line-height: 118.149%;
	color: var(--white-color);
	display: inline-block;
	padding: 1.1rem 1.7rem;
	background: transparent;
	border-radius: 5rem;
	transition: 0.2s all ease;
}

.contact_right ul a.active,
.contact_right ul a:hover {
	background: var(--red-color);
}

.contact_item {
	margin-top: 3.6rem;
}

.contact_item label {
	font-family: var(--Geist-Mon-font);
	font-size: 1.4rem;
	font-style: normal;
	font-weight: 400;
	color: var(--white-color);
	letter-spacing: -0.014rem;
	display: block;
}

.contact_item input,
.contact_item textarea {
	color: var(--white-color);
	font-family: var(--Geist-font);
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 155.556%;
	letter-spacing: -0.018rem;
	width: 100%;
	height: 5.6rem;
	display: block;
	padding: 1.4rem 0rem;
	background: transparent;
	border: none;
	outline: none;
	border-bottom: 1px solid #6D6D6D;
	resize: none;
	-ms-overflow-style: none;  
    scrollbar-width: none; 
}

.contact_item input:focus,
.contact_item textarea:focus {
	border-color: #FF4C1F;
	color: var(--white-color);
}

.contact_item button {
	border: none;
	outline: none;
}

.details_text_box::after {
	content: "";
	width: 1500%;
	height: 1px;
	display: block;
	background: transparent;
	border-bottom: 1px dashed var(--bordar-color);
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}