/************ TABLE OF CONTENTS ***************

  01. Theme Default CSS
  02. background CSS
	03. buttons css

**********************************************/
/**----------------------------------------
START: Theme Default CSS
----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;700&family=Poppins:wght@400;500&display=swap");
:root {
	/**
     @Font-Family Declaration
   */
	--tj-ff-body: "Poppins", sans-serif;
	--tj-ff-heading: "IBM Plex Sans Arabic", sans-serif;
	--tj-ff-p: "IBM Plex Sans Arabic", sans-serif;
	--tj-ff-btn-primary: "IBM Plex Sans Arabic", sans-serif;
	--tj-ff-fontawesome: "Font Awesome 6 Pro";
	/**
     @Font-weight Declaration
   */
	--tj-fw-normal: normal;
	--tj-fw-thin: 100;
	--tj-fw-elight: 200;
	--tj-fw-light: 300;
	--tj-fw-regular: 400;
	--tj-fw-medium: 500;
	--tj-fw-sbold: 600;
	--tj-fw-bold: 700;
	--tj-fw-ebold: 800;
	--tj-fw-black: 900;
	/**
     @Font-Size Declaration
   */
	--tj-fs-body: 14px;
	--tj-fs-p: 14px;
	--tj-fs-h1: 55px;
	--tj-fs-h2: 48px;
	--tj-fs-h3: 24px;
	--tj-fs-h4: 20px;
	--tj-fs-h5: 16px;
	--tj-fs-h6: 14px;
	/**
     @Color Declaration
   */
	--tj-color-common-white: #ffffff;
	--tj-color-common-black: #000000;
	--tj-color-heading-primary: #000c1a;
	--tj-color-text-body: #000c1a;
	--tj-color-theme-primary: #ff6944;
	--tj-color-theme-primary-2: #ff5f00;
	--tj-color-theme-bg: #fff1f1;
	--tj-color-grey-1: #c5c5c5;
	--tj-color-grey-2: #aeaeae;
	--tj-color-grey-3: #acacac;
	--tj-color-grey-4: #999999;
	--tj-color-grey-5: #f7f7f7;
	--tj-color-grey-6: #b7b7b7;
	--tj-color-grey-7: #a6aeb5;
	--tj-color-grey-8: #edf2f6;
	--tj-color-border-1: #ededed;
	--tj-color-border-2: #e9e9e9;
	--tj-color-border-3: #999999;
}

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/**
  Typography CSS
*/
body {
	font-family: var(--tj-ff-body);
	font-size: var(--tj-fs-body);
	font-weight: normal;
	color: var(--tj-color-text-body);
	line-height: 1.6;
	overflow-x: hidden;
}

a {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--tj-ff-heading);
	color: var(--tj-color-heading-primary);
	margin-top: 0px;
	font-weight: var(--tj-fw-sbold);
	line-height: 1.2;
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

h1 {
	font-size: var(--tj-fs-h1);
}

h2 {
	font-size: var(--tj-fs-h2);
}

h3 {
	font-size: var(--tj-fs-h3);
}

h4 {
	font-size: var(--tj-fs-h4);
}

h5 {
	font-size: var(--tj-fs-h5);
}

h6 {
	font-size: var(--tj-fs-h6);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	line-height: inherit;
	display: block;
}

h1:hover a,
h2:hover a,
h3:hover a,
h4:hover a,
h5:hover a,
h6:hover a {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
}

ul {
	margin: 0px;
	padding: 0px;
}

a,
.btn,
button,
span,
p,
input,
select,
textarea,
li,
img,
svg path,
*::after,
*::before,
h1,
h2,
h3,
h4,
h5,
h6 {
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

a:focus,
.button:focus {
	text-decoration: none;
	outline: none;
}

a:focus,
a:hover {
	color: inherit;
	text-decoration: none;
}

a,
button {
	color: inherit;
	outline: none;
	border: none;
	background: transparent;
}

button:hover {
	cursor: pointer;
}

button:focus,
button:focus:not(:focus-visible) {
	outline: 0;
	-webkit-box-shadow: 0 0 0;
	box-shadow: 0 0 0;
}

.uppercase {
	text-transform: uppercase;
}

.capitalize {
	text-transform: capitalize;
}

select,
.nice-select,
input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
textarea {
	outline: none;
	background-color: --tj-color-common-white;
	height: auto;
	width: 100%;
	font-size: var(--tj-fs-body);
	border: 1px solid var(--tj-color-common-white);
	color: var(--tj-color-common-black);
	padding: 10px 15px;
}

input[type="color"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	height: 100%;
	width: 100%;
	padding: 0;
	border-radius: 50%;
}

::-webkit-scrollbar {
	height: 4px;
	width: 4px;
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--tj-color-theme-primary);
	-webkit-border-radius: 1ex;
	-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
	background: transparent;
}

*::-moz-selection {
	background: var(--tj-color-common-black);
	color: var(--tj-color-common-white);
	text-shadow: none;
}

::-moz-selection {
	background: var(--tj-color-common-black);
	color: var(--tj-color-common-white);
	text-shadow: none;
}

::selection {
	background: var(--tj-color-common-black);
	color: var(--tj-color-common-white);
	text-shadow: none;
}

*::-webkit-input-placeholder {
	color: var(--tj-color-common-black);
	font-size: var(--tj-fs-body);
	opacity: 1;
}
*::-moz-placeholder {
	color: var(--tj-color-common-black);
	font-size: var(--tj-fs-body);
	opacity: 1;
}
*:-ms-input-placeholder {
	color: var(--tj-color-common-black);
	font-size: var(--tj-fs-body);
	opacity: 1;
}
*::-ms-input-placeholder {
	color: var(--tj-color-common-black);
	font-size: var(--tj-fs-body);
	opacity: 1;
}
*::placeholder {
	color: var(--tj-color-common-black);
	font-size: var(--tj-fs-body);
	opacity: 1;
}

/**
 	Common Classes CSS
*/
img {
	max-width: 100%;
}

.w-img img {
	width: 100%;
}

.m-img img {
	max-width: 100%;
}

.fix {
	overflow: hidden;
}

p {
	font-family: var(--tj-ff-p);
}

/**
  Container CSS
*/
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
	max-width: 1250px;
}

/**
  Buttons CSS
*/
.button-primary {
	font-family: var(--tj-ff-btn-primary);
	background-color: var(--tj-color-theme-primary);
	color: var(--tj-color-common-white);
	font-size: 20px;
	font-weight: var(--tj-fw-medium);
	border-radius: 41px;
	padding: 8px 50px;
}
.button-primary:hover {
	background-color: var(--tj-color-theme-primary-2);
	color: var(--tj-color-common-white);
}

/**----------------------------------------
START: Hero Section CSS
----------------------------------------*/
.hero-section {
	background-size: cover;
	background-position: top right;
	min-height: 1016px;
	padding: 142px 0 100px;
	overflow: hidden;
}

.hero-section .contents-box {
	padding-top: 110px;
}

.hero-section .contents-box h1 {
	font-size: 48px;
}

.hero-section .contents-box p {
	font-size: 28px;
	max-width: 686px;
	width: 100%;
	line-height: 1.35;
}

.hero-section .image-box img {
	max-width: initial;
	float: right;
	margin-right: -60px;
	width: 136%;
}

/**----------------------------------------
START: Features Section CSS
----------------------------------------*/
.features-section {
	margin-top: -10%;
	padding-bottom: 60px;
	overflow: hidden;
}
.feature-item.style-2 {
	margin-top: -100px;
}
.feature-item.style-3 {
	margin-top: 50px;
}
.feature-item .contents-box {
	max-width: 581px;
	width: 100%;
}

.feature-item .contents-box h2 {
	font-size: 48px;
}

.feature-item .contents-box p {
	font-size: 22px;
	line-height: 1.35;
}

.feature-item .image-box {
	position: relative;
	max-width: 550px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.feature-item .image-box::before {
	content: url(../img/shapes/wave-1.png);
	position: absolute;
	right: 100%;
	top: 0;
}

.feature-item.style-2 .image-box::before {
	right: initial;
	top: initial;
	margin-right: initial;
	content: url(../img/shapes/wave-2.png);
	left: 100%;
	bottom: -17%;
	margin-left: -16%;
}

.feature-item.style-3 .image-box::before {
	top: initial;
	content: url(../img/shapes/wave-3.png);
	bottom: 10%;
	margin-right: initial;
}

/**----------------------------------------
START: FAQs Section CSS
----------------------------------------*/
.section_title .title {
	font-size: 48px;
	line-height: 1.2;
	margin-bottom: 0;
}
.faq-section {
	padding-top: 110px;
	padding-bottom: 110px;
	overflow: hidden;
}
.faq-section .container {
	position: relative;
	z-index: 1;
}
.faq-section .shapes .left_shape,
.faq-section .shapes .right_shape {
	background-image: url(../img/shapes/faq-left.svg);
	max-width: 335px;
	width: 100%;
	height: 210px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top right;
	position: absolute;
	left: -160px;
	top: 68px;
	z-index: -1;
}
.faq-section .shapes .right_shape {
	background-image: url(../img/shapes/faq-right.svg);
	max-width: 277px;
	height: 247px;
	background-position: bottom right;
	left: auto;
	top: auto;
	right: -160px;
	bottom: -55px;
}
.faq-section .section_title {
	margin-bottom: 10px;
}
.faq_content .accordion-item:not(:last-child) {
	margin-bottom: 27px;
}
.faq_content .accordion-item {
	background-color: rgba(245, 248, 253, 0.86);
}
.faq_content .accordion-item .accordion-header {
	cursor: pointer;
	padding: 30px 85px 30px 40px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.77px;
	color: var(--tj-color-theme-primary);
	position: relative;
}
.faq_content .accordion-item .accordion-header::after {
	content: "";
	background-image: url(../img/icons/angle-down.svg);
	position: absolute;
	right: 40px;
	top: 27px;
	width: 40px;
	height: 40px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 50%;
}
.faq_content .accordion-item .accordion-header:not(.collapsed):after {
	background-image: url(../img/icons/angle-up.svg);
}
.faq_content .accordion-item .faq_desc {
	font-size: 20px;
	line-height: 1.5;
	font-weight: 400;
	letter-spacing: 0.7px;
	font-family: var(--tj-ff-heading);
	max-width: 1165px;
	width: 100%;
	padding: 0 40px 40px 40px;
}

/**----------------------------------------
START: Brands Section CSS
----------------------------------------*/
.portfolio-section {
	padding-top: 110px;
	padding-bottom: 110px;
	overflow: hidden;
}
.portfolio-section .container {
	position: relative;
}
.portfolio-section .shape {
	background-image: url(../img/shapes/brand.svg);
	position: absolute;
	right: -160px;
	bottom: -100px;
	max-width: 328px;
	width: 100%;
	height: 129px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right bottom;
}
.portfolio-section .section_title {
	margin-bottom: 60px;
}
.portfolio_logo {
	display: flex;
	align-items: center;
}
.portfolio_logo .single_logo a {
	display: inline-block;
}
.portfolio_logo .single_logo {
	position: relative;
}
.portfolio_logo .single_logo:not(:last-child) {
	margin-right: 40px;
	padding-right: 41px;
}
.portfolio_logo .single_logo:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 85px;
	background-color: #d3d3d3;
}

/**----------------------------------------
START: Contact Tab Section
----------------------------------------*/
.contact-tab-section {
	padding-top: 75px;
	padding-bottom: 90px;
	position: relative;
	z-index: 1;
	overflow: hidden;
}
.contact-tab-section .shape {
	background-image: url(../img/shapes/contact.svg);
	width: 274px;
	height: 268px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	position: absolute;
	left: -125px;
	top: 160px;
	z-index: -1;
}
.contact-tab-section .section_title {
	margin-bottom: 45px;
}
.contact-tab-section .section_title .desc {
	margin-top: 5px;
	font-size: 32px;
	line-height: 1.5;
	color: #646464;
}
.contact-tab-section .section_title .desc p:last-child {
	margin-bottom: 0;
}
.contact_tabs {
	border-bottom: 3px solid var(--tj-color-theme-primary);
	list-style: none;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 25px;
	margin-bottom: 25px;
	gap: 140px;
}
.contact_tabs .nav-item {
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: 0.055em;
	color: #061e11;
	font-family: var(--tj-ff-heading);
	position: relative;
	z-index: 1;
	padding-left: 45px;
	cursor: pointer;
}
.contact_tabs .nav-item::before,
.contact_tabs .nav-item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	border: 1px solid #e7e7e7;
	border-radius: 50%;
	background-color: #e7e7e7;
}
.contact_tabs .nav-item::after {
	width: 20px;
	height: 20px;
	background-color: var(--tj-color-theme-primary);
	left: 6px;
	visibility: hidden;
}
.contact_tabs .nav-item.active::before {
	background-color: var(--tj-color-common-white);
}
.contact_tabs .nav-item.active::after {
	visibility: visible;
}
.form_group {
	margin-bottom: 13px;
}
.form_group label {
	display: block;
	font-family: var(--tj-ff-heading);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.055em;
	text-align: left;
	margin-bottom: 6px;
	text-transform: capitalize;
}
.form_group select,
.form_group .nice-select,
.form_group
	input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.form_group textarea {
	background-color: rgba(100, 100, 100, 0.08);
	padding: 14px 15px;
}
.form_group textarea {
	min-height: 135px;
	resize: none;
}
.form_btn {
	margin-top: 20px;
}
.form_btn .btn {
	font-family: var(--tj-ff-heading);
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	width: 100%;
	border-radius: 33px;
	padding: 20px 30px;
}

@media only screen and (min-width: 1600px) {
	.hero-section {
		background-size: contain;
		background-repeat: no-repeat;
	}
}

/* Large devices (desktops, 992px to 1199px) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.feature-item.style-2 .image-box::before {
		margin-left: -8%;
	}
	.feature-item.style-2 {
		margin-top: -50px;
	}
	.portfolio_logo .single_logo:not(:last-child)::after {
		height: 65px;
	}
}

/* Medium devices (tablets, 768px to 991px) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.hero-section .image-box img {
		margin-top: 35%;
		margin-right: -15%;
	}

	.feature-item {
		margin-bottom: 50px;
	}

	.feature-item.style-2 .image-box::before {
		bottom: -41%;
	}
	.feature-item.style-2 {
		margin-top: -50px;
	}

	.feature-item.style-3 {
		margin-top: 75px;
	}

	.feature-item.style-3 .image-box::before {
		bottom: -15%;
	}
	.faq_content .accordion-item .accordion-header {
		padding: 20px 45px 20px 20px;
		font-size: 18px;
	}
	.faq_content .accordion-item .accordion-header::after {
		right: 15px;
		top: 18px;
		width: 30px;
		height: 30px;
	}
	.faq_content .accordion-item .faq_desc {
		font-size: 18px;
		padding: 0 20px 20px 20px;
	}

	.portfolio_logo .single_logo:not(:last-child)::after {
		height: 65px;
	}
	.contact-tab-section .shape {
		top: 50px;
	}
	.contact_tabs {
		gap: 100px;
	}
}

/* X-Small devices (small mobile) (portrait phones, less than 767px) */
@media only screen and (max-width: 767px) {
	.hero-section .contents-box h1 {
		font-size: 40px;
	}

	.hero-section {
		padding: 0;
		min-height: initial;
	}

	.hero-section .contents-box p {
		font-size: 22px;
	}

	.hero-section .image-box img {
		max-width: 100%;
		float: initial;
		margin-right: initial;
		width: 100%;
	}

	.features-section {
		margin-top: 0;
		padding-bottom: 50px;
		padding-top: 50px;
	}

	.feature-item {
		margin-bottom: 50px;
	}

	.feature-item .contents-box h2 {
		font-size: 30px;
	}

	.feature-item .image-box::before {
		display: none;
	}

	.feature-item.style-2 {
		margin-top: 0;
	}

	.feature-item .image-box {
		max-width: 400px;
		width: 100%;
		margin: 0 auto;
	}

	.feature-item .contents-box {
		max-width: auto;
		margin-bottom: 25px;
	}
	.section_title .title {
		font-size: 30px;
	}
	.faq-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.faq_content .accordion-item .accordion-header {
		padding: 20px 45px 20px 20px;
		font-size: 18px;
	}
	.faq_content .accordion-item .accordion-header::after {
		right: 15px;
		top: 18px;
		width: 30px;
		height: 30px;
	}
	.faq_content .accordion-item .faq_desc {
		font-size: 18px;
		padding: 0 20px 20px 20px;
	}
	.portfolio-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.portfolio-section .section_title {
		margin-bottom: 30px;
	}
	.portfolio_logo {
		flex-wrap: wrap;
		column-gap: 15px;
		row-gap: 20px;
		justify-content: center;
	}
	.portfolio_logo .single_logo:not(:last-child) {
		padding: 0;
		margin: 0;
	}
	.portfolio_logo .single_logo:not(:last-child)::after {
		display: none;
	}
	.portfolio-section .shape {
		bottom: -50px;
	}
	.contact-tab-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.contact-tab-section .shape {
		display: none;
	}
	.contact-tab-section .section_title .desc {
		font-size: 22px;
	}
	.contact_tabs {
		gap: 50px;
	}
	.portfolio_logo .single_logo img {
		max-height: 60px;
		width: auto;
	}
}