@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

/* Main Colors */
:root { --mainBrown      : #dad7c5; }
:root { --mainBrownLight : #f2f2f2; }
:root { --mainRed        : #d4403c; }
:root { --mainGreen      : #9dd195; }
:root { --mainAlert      : #fcd4d4; }
:root { --mainWarning    : #ffde17; }
/* BS colors */
:root { --bs-default      : #333333; }
:root { --bs-primary      : #2375b7; }
:root { --bs-success      : #4cae4c; }
:root { --bs-info         : #5bc0de; }
:root { --bs-warning      : #f0ad4e; }
:root { --bs-danger       : #d9534f; }
/* Sub Colors */
:root { --Black    : #000000; }
:root { --White    : #FFFFFF; }
:root { --grey     : #eaeaea; }
/* border Color */
:root { --borderColor : #000000; }

html {
    overflow-x: hidden;
	 box-sizing: border-box;
}

body {
	width:100%;
	margin:0 auto;
	min-width: 1026px;
	max-width: 3500px;
	font-size:100%;
  font-family: 'Tajawal', sans-serif;
	overflow-x: hidden !important;
}

* {
	transition: all 0.3s ease;
	margin:0;
	padding:0;
}
*,
*::before,
*::after {
  box-sizing: inherit; 
}

.pc_only {
	display: block;
}

.mob_only {
	display: none !important;
}

.tablet_only {
	display: none;
}

.text-start {
	text-align: start;
}
.text-center {
	text-align: center !important;
}
.text-end {
	text-align: end;
}
a {
	text-decoration: none;
	color: inherit;
}










.row {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.col-1 {
	width: 100%;
}
.col-2 {
	width: 49%;
	margin: 1% 0;
}
.col-3 {
	width: 32%;
	margin: 1% 0;
}
.col-4 {
	width: 24%;
	margin: 1% 0;
}

header {
	width: 100%;
	margin: 0 auto;
	background: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	color: #FFF;
}

header .logoContainer {
	width: 75%;
	text-align: start;
	display: flex;
	justify-content: start;
	align-items: center;
}
header .logoContainer img {
	width: 8%;
	margin-left: 5%;
}


header .mobMnuBtn {
	width: 5%;
	display: flex;
	justify-content: center;
	align-items: center;
}
header .mobMnuBtn i {
	font-size: 1.2em;
}

header .languageSelector {
	width: 5%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5em 0;
	background: #FFF;
	cursor: pointer;
}
header .languageSelector span {
	font-size: 1.0em;
	color: #000;
}

header .loginBtn {
	width: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.1em;
	border: 1px solid #FFF;
	cursor: pointer;
}
header .loginBtn span {
	font-size: 1.0em;
	color: #FFF;
	text-transform: capitalize;
}

.mobNav {
	width: 100%;
	height: 100%;
	position: fixed;
	top: -150%;
	opacity: 0;
	left: 0;
	z-index: 500;
	background: var(--mainBrown);
	transition: all 1s ease-in-out !important;
}
.mainNavShowed {
	top: 0 !important;
	opacity: 1 !important;
	transition: all 1s ease-in-out !important;
}
.mobNav .logoContainer {
	width: 70%;
	margin: 0 auto;
	display: block;
	text-align: center;
	padding: 3% 0;
}
.mobNav .logoContainer img {
	width: 10%;
}

.mobNav a {
	width: 50%;
	display: block;
	margin: 0 auto;
	text-align: center;
	font-size: 1.2em;
	border-bottom: 1px dotted #000;
	padding: 1em 0;
	text-transform: uppercase;
	cursor: pointer;
}
.mobNav a.hasActionMnu {
	background: #000;
	color: #FFF;
}



article {
	width: 100%;
	margin: 0 auto;
	margin-top: 1%;
	padding-top: 1%;
	min-height: 100px;
}

.pageStarter {
	width: 100%;
	margin: 0 auto;
	padding: 0.5em 0;
	padding-top: 3%;
	background: #e8e8e8;
	background: -moz-radial-gradient(center, ellipse cover,  #e8e8e8 0%, #dad7c5 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  #e8e8e8 0%,#dad7c5 100%);
	background: radial-gradient(ellipse at center,  #e8e8e8 0%,#dad7c5 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#dad7c5',GradientType=1 );
}

.pageStarter .pageStarterImg {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.pageStarter .pageStarterImg img {
	width: 100%;
	height: 20em;
	object-position: center center;
	object-fit: contain;
}
.shipNowPage {
	background: #E5E2D3 !important;
}
.shipNowPage .pageStarterImg img {
	width: 50% !important;
	height: 15em !important;
	object-fit: cover !important;
}

.pageStarterContent {
	width: 40%;
	margin: 3% auto;
}
.atMiniModal {
	display: none !important;
}
.pageStarterContent h2 {
	width: 100%;
	margin: 1% auto;
	font-weight: normal;
	text-transform: capitalize;
	font-size: 1.4em;
}

.pageStarterContent .trackForm {
	width: 100%;
	margin: 0 auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-wrap: nowrap;
}
.pageStarterContent .trackForm input {
	width: 100%;
	margin: 0 auto;
	display: block;
	border: none;
	background: #FFF;
	font-size: 1.0em;
	padding: 0.5em;
}
.pageStarterContent .trackForm .trackBtn {
	width: 20%;
	background: #000;
	color: #FFF;
	text-transform: capitalize;
	border: none;
	padding: 0.5em;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
.pageStarterContent .trackForm .trackBtn img {
	width: 30%;
	margin-right: 5%;
}
.pageStarterContent .trackForm .trackBtn span {
	width: 70%;
	font-size: 1em;
}





/*
HHHHHHHHHHHHHH
*/

.pickUpReq {
	width: 30%;
	margin: 0 !important;
	margin-left: 30% !important;
	margin-bottom: 5% !important;
}
.pickUpReq .actionLink {
	background: #9ed195 !important;
}
.pickUpReq .actionLink h3 {
	width: 60% !important;
	text-transform: capitalize;
	font-size: 1.2em;
}
.pickUpReq .actionLink .actionText {
	width: 15% !important;
	display: flex;
	justify-content: start;
	align-items: center;
	flex-wrap: nowrap;
}
.pickUpReq .actionLink .actionText img {
	width: 100%;
}
/*
HHHHHHHHHHHHHH
*/

.contentWhiteBg {
	width: 100%;
	margin: 0 auto;
	background: #FFF;
	padding: 0.3em;
}

.actionLink {
	background: var(--mainRed);
	color: #FFF;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: nowrap;
	border-radius: 3px;
	cursor: pointer;
}
.actionLink h3 {
	width: 45%;
	text-transform: capitalize;
	font-size: 1.5em;
}

.actionLink .actionText {
	width: 48%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
.actionLink .actionText img {
	width: 20%;
	padding: 0.3em;
}

.actionLink .actionText .texter {
	width: 62%;
	padding: 0.3em;
}
.actionLink .actionText .texter span {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 1.2em;
	text-transform: capitalize;
	font-weight: bold;
	line-height: 1;
}
.actionLink .actionText .texter p {
	width: 100%;
	margin: 0 auto;
	display: block;
	font-size: 1em;
	line-height: 1;
}

.pageContent {
	width: 80%;
	margin: 1% auto;
}

.pageContentSection {
	width: 100%;
	margin: 3% auto;
}
.pageContentSection h1 {
	width: 100%;
	margin: 0% auto;
	text-align: center;
	text-transform: capitalize;
	font-size: 2em;
	font-weight: normal;
}
.pageContentSection h1 .dec {
	width: 40%;
	margin: 1% auto;
	display: block;
	height: 3px;
	background: var(--mainRed);
	border-radius: 3px;
}
.pageContentSection p {
	width: 100%;
	margin: 0% auto;
	text-align: center;
	font-size: 1.2em;
}


.servicesContainer {
	width: 100%;
	margin: 1% auto;
	display: flex;
	justify-content: space-between;
	align-content: center;
	flex-wrap: wrap;
}
.servicesContainer .service {
	width: 46%;
	margin: 5% 0;
	text-align: center;
}
.servicesContainer .service img {
	width: 6em;
	height: 6em;
	object-fit: contain;
	object-position: center center;
	margin-bottom: 2%;
}
.servicesContainer .service h4 {
	width: 100%;
	text-transform: uppercase;
	font-weight: normal;
	font-size: 1.5em;
	border-left: 3px solid;
	border-right: 3px solid;
	padding: 0.5em 0;
}
.servicesContainer .service .decA {
	width: 5%;
	margin: 0 auto;
	height: 3px;
	background: #000;
	margin-bottom: 1px;
}
.servicesContainer .service .decB {
	width: 5%;
	margin: 0 auto;
	height: 3px;
	background: #000;
	margin-top: 1px;
}
.servicesContainer .service .decC {
	width: 100%;
	margin: 0 auto;
	height: 3px;
	display: flex;
	justify-content: space-between;
	align-content: center;
	flex-wrap: nowrap;
}
.servicesContainer .service .decC .decShort {
	width: 15%;
	height: 3px;
	background: #000;
}
.servicesContainer .service .decC .decLong {
	width: 30%;
	height: 3px;
	background: #000;
}



/*
TRACKING PAGE
*/
.trackDetails {
	width: 80%;
	margin: 0 auto;
	text-align: center;
	margin-top: 3%;
}
.trackDetails h6 {
	text-transform: capitalize;
	font-size: 2em;
}
.trackDetails h5 {
	font-weight: normal;
	text-transform: capitalize;
	font-size: 1.8em;
}
.trackDetails h5 span {
	margin-left: 2%;
	color: var(--mainRed);
}
.trackDetails .dec {
	width: 100%;
	margin: 2% auto;
	background: #FFF;
	height: 4px;
	border-radius: 5px;
	margin-bottom: 2%;
}





.trackFromTo {
	width: 50%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 5%;
}

.trackFromTo .fromTo {
	width: 35%;
}
.trackFromTo .fromTo .dester {
	display: block;
	font-size: 1.8em;
	text-transform: capitalize;
}
.trackFromTo .fromTo .dater {
	display: block;
	font-size: 1em;
	text-transform: capitalize;
}

.trackFromTo img {
	width: 5%;
	text-align: center;
	font-size: 1em;
}




.tabsMain {
	width: 90%;
	margin: 0 auto;
	margin-top: 5%;
}
.tabsMain .tabsHeader {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
}
.tabsMain .tabsHeader .tabTitle {
	width: 50%;
	text-align: center;
	text-transform: uppercase;
	border-bottom: 1px solid;
	padding: 0.8em 0;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	font-size: 1.3em;
}
.tabsMain .tabsHeader .dec {
	width: 90%;
	margin: 0 auto;
	height: 3px;
	border-radius: 300px;
}


.tabsMain .tabsHeader .tabActive {
	border: 1px solid;
	border-bottom: none !important;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
}

.tabsMain .tabsHeader .tabActive .dec {
	background: var(--mainRed);
}


.tabsContent {
	width: 99%;
	margin: 0 auto;
	margin-top: 2%;
}
.tabsContent .tabData {
	width: 100%;
	margin: 0 auto;
	display: none;
}
.tabsContent .tabDataActive {
	display: block !important;
}







.updatesTable {
	width: 60%;
	margin: 0 auto;
}

.updatesTable .updatesTableHeader {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	text-transform: capitalize;
}
.updatesTable .updatesTableHeader .th1 {
	width: 25%;
	text-align: center;
	font-size: 1.2em;
}
.updatesTable .updatesTableHeader .th2 {
	width: 25%;
	text-align: center;
	font-size: 1.2em;
}
.updatesTable .updatesTableHeader .th3 {
	width: 50%;
	text-align: start;
	font-size: 1.2em;
}







.updatesTableContent {
	width: 100%;
	margin: 0 auto;
}

.updatesTableRow {
	width: 100%;
	margin: 1% 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	background: #f2f2f2;
	border-radius: 10px;
	overflow: hidden;
}
.updatesTableRow .dater {
	width: 25%;
	padding: 1em 0.5em;
	background: #e6e6e6;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.updatesTableRow .dater .monther {
	display: block;
	width: 100%;
	font-size: 1.2em;
}
.updatesTableRow .dater .timer {
	display: block;
	font-size: 1em;
	color: var(--mainRed);
}

.updatesTableRow .locaer {
	width: 24%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 1em;
}
.updatesTableRow .locaer span {
	text-transform: capitalize;
}

.updatesTableRow .acter {
	width: 50%;
	font-size: 1em;
	background: #FFF;
	padding: 1.4em 0.5em;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.updatesTableRow .acter p {
	font-size: 0.9em;
}





.dataPairContainer {
	width: 60%;
	margin: 0 auto;
}

.dataPair {
	width: 100%;
	margin: 2% auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #f2f2f2;
	padding: 0.5em 0.3em;
	border-radius: 10px;
}
.dataPair .dataName {
	width: 40%;
	padding: 0em 0.5em;
}
.dataPair .dataValue {
	width: 60%;
	background: #FFF;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 0.8em 0.3em;
	color: var(--mainRed);
}


/*
  SHIPNOW PAGE
*/
.stager {
	width: 50%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
}
.stager .stage {
	background: #000;
	width: 2em;
	height: 2em;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 150px;
	position: relative;
	z-index: 2;
}
.stager .stage span {
	font-size: 1.4em;
}
.stager .stagerDec {
	position: absolute;
	width: 100%;
	height: 20%;
	top: 40%;
	left: 0;
	background: #000;
	z-index: 1;
}

.stager .activeStage {
	background: var(--mainGreen);
}








.pageForm {
	width: 60% !important;
	margin: 0 auto;
}
.pageForm .mainFormTitle {
	width: 100%;
	margin: 0 auto;
	text-transform: capitalize;
	font-weight: 300;
	margin-top: 3%;
}
.formGroup {
	text-align: center;
	margin: 0.5em 0;
}
.formGroup label {
	width: 100%;
	margin: 0 auto;
	display: block;
	text-transform: capitalize;
	text-align: start;
}
.formGroup label .noter {
	color: var(--mainRed);
	margin-left: 3%;
}
.formGroup input {
	text-align: start;
	display: block;
	width: 100%;
	border: none;
	background: var(--mainBrownLight);
	padding: 10px;
	font-family: inherit;
	border-radius: 5px;
}
.formGroup textarea {
	text-align: start;
	display: block;
	width: 100%;
	border: none;
	background: var(--mainBrownLight);
	padding: 10px;
	font-family: inherit;
	border-radius: 5px;
}
.formGroup select {
	text-align: start;
	display: block;
	width: 100%;
	border: none;
	background: var(--mainBrownLight);
	padding: 10px;
	font-family: inherit;
	border-radius: 5px;
}

.formGroup button {
	display: inline-block;
	width: 30%;
	margin: 0 2%;
	border: 1px solid #000;
	background: none;
	padding: 10px;
	font-family: inherit;
	border-radius: 5px;
	font-size: 1.2em;
	text-transform: capitalize;
	color: #000;
}
.formGroup .actionBtn {
	background: var(--mainGreen) !important;
	border: 1px solid var(--mainGreen) !important;
}
.formGroup button img {
	width: 5%;
	margin-left: 3%;
	vertical-align: middle;
}


.alerterView {
	background: var(--mainAlert);
	padding: 0.5em;
	border-radius: 5px;
}
.alerterView p {
	font-size: 1.0em;
	display: block;
	width: 100%;
	margin: 2% auto;
	line-height: 1.2;
}



.hasBottomBorder {
	border-bottom: 2px solid #000;
}

.detailsView {
	width: 100%;
	margin: 0% auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: nowrap;
}
.detailsView h3 {
	width: 95%;
	margin: 2% auto;
	font-weight: normal;
}

.detailsView .viewDataContainer {
	width: 50%;
	border-bottom: 1px solid #000;
}
.detailsView .hasStartBorder {
	border-left: 1px solid #000;
}

.detailsView .viewDataContainer .dataPairs {
	width: 90%;
	margin: 0.5% auto;
	display: flex;
	justify-content: space-between;
	align-items: first baseline;
	flex-wrap: nowrap;
}
.detailsView .viewDataContainer .dataPairs .dataNamer {
	width: 50%;
	font-size: 1.2em;
	opacity: 0.7;
}
.detailsView .viewDataContainer .dataPairs .dataValuer {
	width: 50%;
	font-size: 1em;
}
.detailsView .viewDataContainer .dataPairs .dataValuer p {
	width: 100%;
	display: block;
	line-height: 1.2;
}

.detailsView .soloPairs {
	width: 100% !important;
	text-align: start;
}
.detailsView .soloPairs .dataPairs {
	width: 45% !important;
}
.soloPairs{
	text-align: start !important;
}
.atFees {
	justify-content: start !important;
	margin: 3% !important;
}
.infoView {
	
}


.successAlert {
	width: 90%;
	margin: 2% auto;
	text-align: center;
	color: var(--mainGreen);
}
.successAlert i {
	font-size: 1.5em;
}
.successAlert p {
	text-transform: capitalize;
}


.infoView {
	background: var(--mainGreen);
	padding: 0.5em;
	border-radius: 5px;
	margin-top: 5% !important;
}
.infoView p {
	font-size: 1em;
	display: block;
	width: 100%;
	margin: 2% auto;
	line-height: 1.2;
}

.warningView {
	width: 80%;
	margin: 0 auto;
}

.warningView {
	background: var(--mainWarning);
	padding: 0.5em;
	border-radius: 5px;
}
.warningView p {
	font-size: 1em;
	display: block;
	width: 100%;
	margin: 1% auto;
	line-height: 1.2;
}



/*
Mini Modal START
*/
.miniModal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 600;
}
.miniModalHidden {
	display: none !important;
}

.miniModal .darker {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 600;
	background: rgba(0,0,0,0.5);
}
.miniModal .modalContent {
	position: fixed;
	top: 30%;
	left: 25%;
	width: 50%;
	height: 30%;
	z-index: 620;
	background: #FFF;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
}
.miniModal .modalContent .modalContentFlexFix {
	width: 100%;
}
.miniModal .modalCloser {
	position: fixed;
	top: 60%;
	left: 25%;
	width: 50%;
	z-index: 621;
	background: #FFF;
	text-align: center;
	font-size: 1.5em;
	cursor: pointer;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.PageLink {
	width: 50%;
	margin: 0 auto;
	display: block;
	text-align: center;
	background: #f2f2f2;
	padding: 0.5em 0;
	text-transform: capitalize;
	font-size: 1.3em;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.1);
}




/*
  LOGIN PAGE START
*/
.loginBody {
	background: #f2f2f2 !important;
}
.loginArticle {
	width: 100%;
	margin: 0 auto;
	margin-top: 0%;
	padding-top: 0%;
}



.loginForm {
	width: 50%;
	margin: 0 auto;
	padding-top: 1%;
}


.loginForm .logoContainer {
	width: 100%;
	margin: 0 auto;
	text-align: center;
}
.loginForm .logoContainer i {
	width: 100%;
	font-size: 5em;
}
.loginForm .logoContainer img {
	width: 50%;
}

.loginForm .welcomeMessage {
	width: 100%;
	margin: 3% auto;
	margin-bottom: 0%;
}
.loginForm .welcomeMessage h1 {
	font-family: inherit;
	text-align: center;
	font-weight: 300;
	line-height: 1.0;
}

.loginForm .loginFormGroup {
	width: 80%;
	margin: 0 auto;
	text-align: center;
}
.loginForm .loginFormGroup input {
	width: 100%;
	margin: 3% auto;
	display: block;
	border: 2px solid #000;
	border-radius: 5px;
	padding: 0.8em;
	background: none;
}
.loginForm .loginFormGroup select {
	width: 100%;
	margin: 3% auto;
	display: block;
	border: 2px solid #000;
	border-radius: 5px;
	padding: 0.8em;
	background: none;
}
.loginForm .loginFormGroup a {
	width: 100%;
	margin: 3% auto;
	display: block;
	text-align: start;
	font-size: 1.2em;
}
.loginForm .loginFormGroup .logInBtn {
	width: 50%;
	margin: 3% auto;
	border: 2px solid #000;
	border-radius: 5px;
	padding: 0.8em 0.3em;
	background: none;
	font-size: 1.2em;
	cursor: pointer;
}
.loginForm .loginFormGroup .logInBtn:hover {
	background: var(--mainGreen);
}
.loginForm .loginFormGroup .signUpBtn {
	width: 50%;
	margin: 3% auto;
	border: none;
	border-radius: 5px;
	padding: 0.8em 0.3em;
	background: var(--mainGreen);
	font-size: 1.2em;
	cursor: pointer;
	text-align: center;
}
.loginForm .loginFormGroup .signUpBtn:hover {
	opacity: 0.7;
}

.accountCreateBtn {
	width: 100%;
	margin: 0 auto;
	display: block;
	text-align: center;
	background: #FFF;
	border-radius: 5px;
	border: 2px solid #000;
	padding: 0.5em 0;
	font-size: 1.5em;
}
.accountCreateBtn:hover {
	opacity: 0.7;
}


.selector {
	width: 25%;
	margin: 3% 5%;
	display: inline-block;
	border: 2px solid #000;
	border-radius: 5px;
	padding: 0.8em;
	background: none;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
}
.selector i {
	display: block;
	margin: 0.5em auto;
	width: 100%;
	font-size: 2.5em;
}
.selectorSelected {
	background: #000;
	color: #FFF;
}



footer {
	background: var(--mainBrown);
}