/* ###########################################

######### Done by Mohamed Elshamhout #########

############# Start 2/1/2024 ################

############################################## */



/* English Fonts  */

@font-face {

    font-family: enFont;

    src: url(../fonts/Poppins-Light.ttf);

    font-weight: 200;

}



@font-face {

    font-family: enFont;

    src: url(../fonts/Poppins-Regular.ttf);

    font-weight: 400;

}



@font-face {

    font-family: enFont;

    src: url(../fonts/Poppins-Medium.ttf);

    font-weight: 500;

}



@font-face {

    font-family: enFont;

    src: url(../fonts/Poppins-SemiBold.ttf);

    font-weight: 600;

}



@font-face {

    font-family: enFont;

    src: url(../fonts/Poppins-Bold.ttf);

    font-weight: bold;

}



/* Arabic Fonts  */

@font-face {

    font-family: arFont;

    src: url(../fonts/ReadexPro-Light.ttf);

    font-weight: 200;

}



@font-face {

    font-family: arFont;

    src: url(../fonts/ReadexPro-Regular.ttf);

    font-weight: 400;

}



@font-face {

    font-family: arFont;

    src: url(../fonts/ReadexPro-Medium.ttf);

    font-weight: 500;

}



@font-face {

    font-family: arFont;

    src: url(../fonts/ReadexPro-SemiBold.ttf);

    font-weight: 600;

}



@font-face {

    font-family: arFont;

    src: url(../fonts/ReadexPro-Bold.ttf);

    font-weight: bold;

}



:root,

[data-theme=light] {

    --black: #000000;

    --dark: #212121;

    --gray: #747474;

    --gray-dark: #343a40;

    --gray-light: #E8E8E8;

    --light: #F9F9F9;

    --white: #ffffff;



    --primary: #26214E;

    --secondary: #2E91D0;

    --tertiary: #4A527D;

    --success: #198754;

    --info: #589BFF;

    --warning: #FFDF0D;

    --danger: #dc3545;

    --breakpoint-xs: 0;

    --breakpoint-sm: 576px;

    --breakpoint-md: 768px;

    --breakpoint-lg: 992px;

    --breakpoint-xl: 1200px;

    --font-ratio: 1;

    --container-padding: calc(4vw + 20px);



}



.bg-primary {

    background-color: var(--primary) !important;

}



.bg-secondary {

    background-color: var(--secondary) !important;

}



.text-primary {

    color: var(--primary) !important;

}



.text-secondary {

    color: var(--secondary) !important;

}





html {

    font-size: 16px;

}



body {

    font-weight: 400;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    justify-content: space-between;

    align-items: stretch;

    overflow-x: hidden;

}



body.modal-open {

    padding: 0 !important;

    overflow-y: scroll;

}



body::-webkit-scrollbar,

.scrolling::-webkit-scrollbar {

    width: 8px;

    background-color: transparent;

}





.xScrolling::-webkit-scrollbar {

    height: 5px;

}



body::-webkit-scrollbar-track,

.scrolling::-webkit-scrollbar-track,

.xScrolling::-webkit-scrollbar-track {

    background-color: transparent;

}



body::-webkit-scrollbar-thumb,

.scrolling::-webkit-scrollbar-thumb,

.xScrolling::-webkit-scrollbar-thumb {

    background-color: var(--primary);

    border-radius: 5px;

}



body.modal-open {

    overflow: hidden;

}



body * {

    font-family: enFont;

    text-align: start;

}



img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

}



.container,

.container-lg,

.container-md,

.container-sm,

.container-xl,

.container-xxl {

    margin-left: auto;

    margin-right: auto;

    padding: 0px;

}



.container {

    max-width: 88vw;

}







.btn {

    line-height: normal;

    height: auto;

    min-height: 40px;

    transition: ease all 1s;

    box-shadow: none !important;

    padding: 10px 15px;

    font-size: calc((10px + .75vw) * var(--font-ratio));

}





.btn:hover {

    transform: scale(.95);

    transition: ease all 1s;

}



.langBtn {

    border: 1px solid var(--gray-light);

    border-radius: 12px;

    padding: 10px;

    font-size: calc((8px + .5vw) * var(--font-ratio));

    min-height: 0px;

    height: auto;

    font-family: arFont;

    font-weight: 600;

    background: var(--white);

    color: var(--tertiary);



}





.dropdown:hover .dropdown-menu {

    display: block;

}



.dropdown-item.active,

.dropdown-item:active,

.dropdown-item:focus {

    background-color: var(--primary);

    color: var(--white) !important;

}



.dropdown-toggle {

    padding-inline-end: 16px !important;

}



.dropdown-toggle::after {

    width: 8px;

    height: 8px;

    border: 2px solid;

    border-top: 0px;

    border-left: 0px;

    transform: rotate(45deg) skew(-2deg, -2deg);

}



.row {

    margin: 0px;

}



.row>div {

    padding: 0px;

}



h1 {

    font-size: calc((20px + 2vw) * var(--font-ratio));

    color: var(--primary);

    font-weight: bold;

    line-height: calc((20px + 2.5vw) * var(--font-ratio));

}



h2 {

    font-size: calc((18px + 1.75vw) * var(--font-ratio));

    color: var(--primary);

    font-weight: bold;

    line-height: calc((20px + 2.5vw) * var(--font-ratio));

}



h3 {

    font-size: calc((22px + 1vw) * var(--font-ratio));

    color: var(--dark);

    font-weight: 600;

    line-height: calc((22px + 2.25vw) * var(--font-ratio));

}



h4 {

    font-size: calc((15px + .65vw) * var(--font-ratio));

    color: var(--dark);

    font-weight: bold;

    line-height: calc((15px + 1.4vw) * var(--font-ratio));

}



h5 {

    font-size: calc((10px + .25vw) * var(--font-ratio));

    color: var(--primary);

    font-weight: 500;

    line-height: calc((10px + 1.2vw) * var(--font-ratio));

}



.shadow {

    box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.14) !important;

}



.mediumText,

.normalText {

    font-size: calc((15px + .25vw) * var(--font-ratio));

    line-height: calc((20px + .75vw) * var(--font-ratio));

    font-weight: 500;

    color: var(--gray);

}



.normalText {

    font-weight: 400;

}



/* Start navbar style */

.navbar-toggler {

    background-color: var(--primary);

    width: 40px;

    height: 40px;

    text-align: center;

    padding: 0px;



}



.navbar-toggler span {

    width: 26px;

    height: 2px;

    background-color: var(--white);

    display: inline-block;

    position: relative;

    margin-bottom: 4px;

}



.navbar-toggler span:after,

.navbar-toggler span::before {

    content: '';

    height: 2px;



    top: 10px;

    left: 0px;

    right: 0;

    position: absolute;

    background-color: var(--white);

}



.navbar-toggler span::before {

    bottom: 10px;

    top: auto;

}



.navbar {



    align-items: center;

    padding: 10px 0px;

    /* background-color: var(--white); */

    width: 100%;

    opacity: 1;

    transition: all 0.5s ease-in;

}



.navbar.fixed-top.hide {

    opacity: 0;

    transform: translateY(-100%);

    transition: all 1s ease-out;

}



.navbar .navbar-collapse {

    justify-content: space-between;

}









.navbar .navbar-brand {

    padding: 0px;

    margin: 0px;

    font-weight: bold;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.navbar .navbar-brand p {

    margin: 0px;

    font-size: 12px;

    color: var(--primary);

}



.navbar .navbar-brand p span {

    color: var(--secondary);

}



.navbar .navbar-brand img {

    width: 68px;



    /* height: 40px; */

    object-fit: contain;

    /* margin-inline-end: 8px; */

    margin-bottom: 5px;

}



.navbar-nav {

    margin: 0px;

    padding: 0;

    padding-inline-start: 5vw;

}



.navbar .navbar-nav .nav-link {

    font-size: calc((15px + .25vw) * var(--font-ratio));

    line-height: normal;

    padding: 8px calc(10px + 1vw);



    color: var(--dark);

    transition: ease-in-out all .5s;

}



.navbar .navbar-nav .nav-link.active {

    color: var(--secondary);

    font-weight: bold;

}



.navbar .navbar-nav .nav-link:hover {

    transform: scale(.9);

    transition: ease-in-out all .5s;

    color: var(--secondary);

}



.navbar-nav .dropdown-toggle {

    background-color: transparent !important;

    color: var(--dark) !important;

}



/* End navbar style */





/* Start Modal Style  */

.modal-content {

    height: 100%;

    width: 100%;

    border-radius: 16px;

    overflow: hidden;

}



.modal-header {

    padding: 0px;

    border: none;

}



.modal-header .close {

    margin: 0px;

    margin-inline-start: auto;

    opacity: 1;

    padding: 0px;

}



.modal-header .close span {

    font-size: 35px;

    font-weight: 200;

    display: inline-block;

    width: 36px;

    height: 36px;

    color: var(--gray);

    line-height: 36px;

}



/* End Model Styling  */



/* Start intro styling  */

.intro {

    background-image: url(../images/intro_bg.png);

    background-size: 55% 100%;

    background-repeat: no-repeat;

    background-position: 100%;

}



.intro .inner {

    padding-inline-end: 4vw;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

}



.intro .inner p {

    margin: 0px;

}



.intro .inner h2 {

    margin: calc(10px + .5vw) 0 calc(20px + 1vw);

}



/* .intro .inner .storeBtns {

    margin-top: calc(20px + 1vw);

} */



.intro .phoneInner {

    padding: 0px !important;

    align-items: center;





}



.intro .phoneInner img {

    height: calc(90vh - 50px);

}



.storeBtns {

    display: flex;

    align-items: center;

}



.storeBtns .btn {

    height: 44px;

    padding: 0px;

    margin: 0 5px;

}



.storeBtns .btn:first-of-type {

    margin-inline-start: 0px;

}



.storeBtns .btn img {

    height: 100%;

}



/* End intro styling  */

/* Start features styling  */

.features {

    padding: var(--container-padding) 0;

}



.features .inner {

    text-align: center;



    padding: calc(10px + 1vw);

}



.features .icon {

    width: 6.8vw;

    height: 6.8vw;

    min-width: 65px;

    min-height: 65px;

    border-radius: 50%;

    background-color: #EEF4FF;

    padding: 15px;

    display: inline-flex;

    align-items: center;

    justify-content: center;



}



.features h4 {

    margin: 10px 0px 22px;

    text-align: center;

}



.features p {

    --font-ratio: .92;

    text-align: start;

    margin: 0px;

}



/* End features styling  */

/* Strat About us styling  */

.aboutUs {

    padding: var(--container-padding) 0;

    position: relative;



}



.aboutUs .bg {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    max-width: 50%;



}



.aboutUs .container {

    display: flex;

    justify-content: flex-end;

}



.aboutUs .inner {

    width: 46%;



}



.aboutUs h3 {

    margin: 40px 0;

}



.aboutUs p {

    margin-bottom: 40px;

}



/* End About us styling  */

/* Strat trackOrder styling  */



.trackOrder {

    padding: var(--container-padding) 0;

    position: relative;

    margin: var(--container-padding) 0;



}





.trackOrder .bg {

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    max-width: 50%;



}



.trackOrder .container {

    display: flex;

}



.trackOrder .inner {

    width: 46%;



}



.trackOrder h3 {

    margin: 40px 0;

}



.trackOrder p {

    margin-bottom: 40px;

}



/* End trackOrder styling  */



/* Start join us partenrs Styling  */

.joinPartenrs {

    background-image: url(../images/market_bg.png);

    background-size: 100%;

    background-repeat: no-repeat;

    background-position: center;

    margin-bottom: var(--container-padding);

}



.joinPartenrs .inner {

    padding: calc(var(--container-padding)/3) var(--container-padding);



}



.joinPartenrs * {

    text-align: center;

}



.joinPartenrs .inner img {

    height: 85vh;

}



.joinPartenrs .inner h4 {

    color: var(--primary);

    margin-bottom: calc(15px + .5vw);

}



.joinNowBtn {

    background-color: var(--info);

    color: var(--white);

    padding: 10px 25px;

    height: calc(45px + 1.5vw);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: auto;

    max-width: 70%;

    border-radius: 8px;

}



/* End join us partenrs Styling  */



/* start download styling  */

.download {

    /* padding: 0 calc(var(--container-padding)*1.5); */

    margin-bottom: var(--container-padding);



}



.download .inner {

    height: 33vw;

    background-image: url(../images/download_bg.png);

    background-size: cover;

    background-position: center;

    border-radius: 3.5vw;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);

    margin: 10px;

}



.download h3 {

    color: var(--white);

    margin-bottom: calc(15px + 2vw);

}



/* End download styling  */





/* Start Footer Style  */

footer {

    background-color: var(--primary);

    padding: var(--container-padding) 0;

}



footer * {

    color: var(--white) !important;

    text-decoration: none !important;

}



footer .normalText {

    margin: 0px;

    width: 77%;

}



footer .brand {

    /* font-size: calc((20px + 1vw) * var(--font-ratio));

    font-weight: bold; */

    padding: 0px;

    margin-bottom: calc(10px + .2vw);



    display: inline-block;

}



/* footer .brand:hover{



} */

footer .brand img {

    width: calc(70px + 10vw);

    /* height: 75px; */

    object-fit: contain;

    /* margin-inline-end: 10px; */

}



footer h3 {

    font-size: calc((15px + .5vw) * var(--font-ratio));

    font-weight: 500;

    /* padding: 0px 8px; */

    margin-bottom: calc(20px + 2vw);

}



footer .footerLink {

    display: block;

    font-size: calc((12px + .27vw) * var(--font-ratio));

    padding: 8px;

    padding-inline-start: 14px;

    position: relative;

}



footer .footerLink::before {

    content: '';

    width: 5px;

    height: 5px;

    background-color: var(--white);

    border-radius: 50%;

    display: inline-block;

    position: absolute;

    top: 16px;

    left: 0px;

}



footer .footerLink:hover {

    color: var(--secondary) !important;

}





footer .groups {

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    min-width: 150px;

    max-width: 100%;

    margin-bottom: calc(20px + 3vw);

}



footer .groups .btn {



    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    padding: 5px;

}



footer .groups .btn:hover {

    transform: scale(.8);

}



.madeBy h4 {

    font-size: calc((12px + .1vw) * var(--font-ratio));

    line-height: normal;

    font-weight: 600;

    color: var(--white);

    margin-bottom: 5px;

}



.madeBy .btn {

    padding: 0px;

    width: 100px;

}







/* End Footer Style  */





/* Start Register Model Styling */

#registerModal {

    padding: 0px !important;

}



#registerModal .modal-header {

    display: flex;

    flex-direction: column;

}



#registerModal .modal-header>div {

    width: 100%;

    display: flex;

}



#registerModal .titleTabs {

    display: inline-flex;

    flex-direction: column;

    align-items: center;

}



#registerModal .modal-dialog {

    max-width: 85%;

}



#registerModal .modal-content {

    padding: calc(var(--container-padding) *.5) calc(var(--container-padding) *.75);

}



#registerModal h3 {

    font-size: calc((15px + 1vw) * var(--font-ratio));

    color: var(--primary);

}







#registerModal h4 {

    margin-inline-end: 15px;
    margin-bottom: 0px;
    font-size: calc((10px + .5vw) * var(--font-ratio));

    font-weight: 600;

}



#registerModal .applyBtn {

    background-color: var(--primary);

    min-width: 22vw;

    height: 65px;

    border-radius: 10px;

    color: var(--white);

    margin: auto;



}



#registerModal .modal-footer {

    padding: 0px;

    border: none;

}



.tabBtns {

    display: inline-flex;

    border-radius: 10px;

    background-color: #F2F2F2cc;

    padding: 8px;

}



.tabBtns .btn {

    font-size: calc(11px + .3vw);

    color: var(--dark);

    font-weight: 600;

    padding: 12px 25px;

    margin: 0px;

    border-radius: 10px;

}



.tabBtns .btn.active {

    background-color: var(--secondary);

    color: var(--white);

}



#registerModal .custom-control-input:checked~.custom-control-label::before {

    background-color: var(--secondary);

    border-color: var(--secondary);

}



#registerModal .custom-radio .custom-control-input:checked~.custom-control-label {

    color: var(--dark);

    font-weight: 600;

}



#registerModal .custom-control-label {

    font-size: calc((12px + .25vw) * var(--font-ratio));

    font-weight: 400;

    color: var(--tertiary);

    display: flex;

    align-items: center;



}



#registerModal .custom-control-label a {

    padding: 0px 10px;

}



#registerModal .radiosBtns {

    margin-bottom: 8px;

}



#registerModal .modal-footer {

    flex-direction: column;

}



#registerModal .modal-footer .custom-radio {

    align-self: flex-start;



}



.formInputs {

    padding: 25px;

    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05) !important;

    border-radius: 15px;

    border: 1px solid var(--gray-light);

}



.formInputs .iti {

    width: 100%;

}



.formInputs .form-group {

    margin: 0px;

    padding: 12px 10px;

}



.formInputs label {

    margin-bottom: 5px;

}



.formInputs .form-control {

    border: 1px solid #ced4da;

}



.formInputs .form-control-lg {

    font-size: 14px;

    height: 50px;

}

.phoneContent {
    display: flex;
    border: 1px solid #ced4da;
    border-radius: 0.3rem;
    overflow: hidden;

}

.phoneContent .form-control {
    border: none;
    box-shadow: none !important;
    border-radius: 0px;
}

.imageContent {
    position: relative;
    display: inline-block;
}

.imageContent input {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    opacity: 0;
}

.imageContent img {
    width: 100px;
    height: 85px;
    object-fit: cover;
    border-radius: 8px;
}

.myLocation {

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

}



.myLocation>div {

    width: 100%;

}



.myLocation .openMap {

    background-color: var(--secondary);

    border-radius: 10px;

    margin-inline-start: 10px;

    width: 50px;

    height: 50px;

    padding: 0px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;



}



.openMap svg {

    color: var(--white);

    width: 43px;

    height: 28px;

}



.bootstrap-select .dropdown-toggle {

    height: 100%;

    transform: none !important;

    background: transparent !important;

    border: none !important;

    outline: none !important;

}



.bootstrap-select .filter-option {

    font-size: 14px;

    display: flex;

    align-items: center;

}



.formInputs .form-control-lg::placeholder {

    color: #AFB2B6;

}



.form-control:focus,

.bootstrap-select .dropdown-toggle:focus,

.bootstrap-select>select.mobile-device:focus+.dropdown-toggle {

    border-color: var(--info);

    box-shadow: 0 0 1px 2px rgba(0, 0, 0, .15);

    outline: none !important;

}



.mapContainer {

    position: fixed;

    right: 0;

    left: 0;

    top: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, .15);

    z-index: 2000;



}



.mapContainer .formInputs {

    position: absolute;

    top: 60px;

    padding: 0px;

    /* border: none; */

    width: 40%;

    min-width: 250px;

    max-width: 90%;

    display: flex;

    align-items: center;

    background: #fff;

    overflow: hidden;

}



.mapContainer .formInputs input {

    border: none !important;

    box-shadow: none !important;

    outline: none !important;



}



.mapContainer .inner {

    background-color: var(--white);

    border-radius: 16px;

    max-width: 85%;

    margin: 40px auto;

    overflow: hidden;

    height: calc(100% - 80px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

}



.mapContainer #closeMap {

    position: absolute;

    top: 0px;

    background-color: rgba(0, 0, 0, 0.25);

    color: var(--white);

    width: 30px;

    height: 30px;

    min-height: 0;

    border-radius: 50%;

    padding: 0px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    right: 8vw;

    top: 55px;



}



.mapContainer #confirmMap {

    margin: 25px auto;

    background-color: var(--primary);

    width: 220px;

    max-width: 90%;

    color: var(--white);

    flex-shrink: 0;

    height: 65px;

    border-radius: 10px;

}

.requiredImg {
    color: var(--danger);
    font-size: calc((10px + .2vw) * var(--font-ratio));
    display: block;
    margin-bottom: 15px;
}




/* Otp 

 */

.otpContainer,

.thankYouContainer {

    position: fixed;

    top: 0px;

    bottom: 0px;

    left: 0px;

    right: 0px;

    background-color: rgba(0, 0, 0, .15);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2000;

}



.otpContainer *,

.thankYouContainer * {

    text-align: center;

}



.otpContainer .inner,

.thankYouContainer .inner {

    background: var(--white);

    padding: 40px;

    border-radius: 16px;

    text-align: center;

    position: relative;



}



.otpContainer #confirmOtp,

.thankYouContainer #closeThank {

    background-color: var(--primary);

    color: var(--white);

    margin-top: 25px;

    border-radius: 10px;

    width: 180px;

    max-width: 95%;

    height: 58px;

}





.otpContainer #closeOtp {

    position: absolute;

    top: 0px;

    background-color: rgba(0, 0, 0, 0.25);

    color: var(--white);

    width: 30px;

    height: 30px;

    min-height: 0;

    border-radius: 50%;

    padding: 0px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    right: 12px;

    top: 12px;



}



#phoneInput .letter {

    /* margin: 8px; */

    max-width: calc((100% / 6) - 8px);

    min-width: 0;

}



#phoneInput .form-group {

    width: 320px;

}



.thankYouContainer .inner {

    width: 500px;

    max-width: 100%;

}



.thankYouContainer svg {

    width: calc(70px + 2vw);

    height: calc(70px + 2vw);

    color: var(--success);

    margin-bottom: 25px;

}





/* .bootstrap-select:hover .dropdown-menu .inner,

.bootstrap-select:focus .dropdown-menu .inner {

    display: block;

} */



/* .bootstrap-select:focus .dropdown-menu {

    display: block;

} */



.imgBtn {

    border-radius: 10px;

    background-color: var(--gray-light);

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100px;

    height: 100px;

    max-width: 100%;

    padding: 0px;



}



.imgBtn img {

    width: 40px;

    height: 40px;

    object-fit: contain;

}



.imgBtn p {

    font-size: 10px;

    font-weight: 600;

    color: var(--gray);

    margin: 4px 0px 0px;

}



.imgTitle {

    font-size: 12px;

    font-weight: 500;

    color: var(--primary);

    text-align: center;

    margin: 5px 0px 0px;
    min-height: 22px;


}

.errorMsg {
    background: #f4afaf;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    /* display: inline-block; */
    margin-bottom: 20px;
    font-size: medium;

}


.essentialFiles>.row {

    margin: -12px;

}



.essentialFiles .inner {

    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05) !important;

    border-radius: 15px;

    border: 1px solid var(--gray-light);

    padding: calc(var(--container-padding)/4);

    margin: 12px;



}



.essentialFiles h5 {

    margin-bottom: 10px;

}



.essentialFiles .col-auto {

    width: calc(20px + 1vw);

}



/* End Register Model Styling */



/* ===============================

===============================

=============================== */

/* Start media query  */

@media only screen and (max-width: 1199.99px) {}



@media only screen and (max-width: 991.99px) {

    body {

        --font-ratio: .9;

        --container-padding: calc(3vw + 10px);

    }



    .container {

        max-width: 92vw;

    }



    .intro {

        padding-top: 75px;

    }



    .intro .inner {

        min-height: 0px;

        padding-top: 25px;



    }



    .intro .phoneInner img {

        height: 70vh;

    }



    .features .inner {

        padding: calc(10px + 0.2vw);



    }



    .features h4 {

        margin-bottom: 15px;

    }





    .aboutUs .bg {

        max-width: 44%;

    }



    .aboutUs .inner {

        width: 54%;

    }



    /* footer .brand img {

        width: 58px;

        height: 58px;

    } */



    footer .groups {

        margin-bottom: 0;

        height: 50px;

    }



    footer .followUs {

        display: flex;

        margin-top: 40px;

        justify-content: space-between;

        flex-wrap: wrap;

        align-items: flex-end;



    }



    footer .followUs h3 {

        display: inline-block;

        min-width: 100%;

    }



    footer .brand {

        font-size: calc((15px + .5vw) * var(--font-ratio));

        margin-bottom: 20px;

    }

}





@media only screen and (max-width: 768px) {

    body {

        --font-ratio: .8;

    }



    .navbar .navbar-brand img {

        width: 52px;



    }



    .intro .phoneInner img {

        max-height: 70vh;

        width: 30vw;

        height: auto;

    }





    .storeBtns .btn {
        /* height: 38px; */
        height: auto;
    }

    .download .storeBtns {
        padding: 0px 20px;
    }


    .features .inner {

        width: 400px;

        margin: auto;

        max-width: 100%;

    }



    .aboutUs,

    .trackOrder {

        padding: 0px;

    }



    .aboutUs h3,

    .trackOrder h3 {

        margin: 0px 0 20px;

    }



    .aboutUs p,

    .trackOrder p {

        margin-bottom: 0px;

    }



    .joinPartenrs .inner img {

        height: auto;

        width: 200px;

        max-width: 100%;

    }



    .btn {

        --font-ratio: 1.2;

    }



    footer h3 {

        margin-bottom: 0px;

    }



    footer .normalText {

        margin-bottom: 25px;

    }


    .joinNowBtn {
        max-width: 100%;
    }

    .intro .inner {
        padding-inline-end: 0px;
    }
}



@media only screen and (max-width: 575.99px) {

    body {

        --font-ratio: 1;

    }



    /* footer .brand img {

        width: 35px;

        height: 35px;

    } */



    h3 {

        font-size: calc((15px + .25vw) * var(--font-ratio));

        line-height: calc((15px + 2vw) * var(--font-ratio));

    }



    h1 {

        font-size: calc((15px + 1.5vw) * var(--font-ratio));

    }



    .download h3 {

        margin-bottom: 5px;

    }



    .storeBtns .btn {

        /* height: 40px; */

        min-height: 30px;

    }



    .joinPartenrs .inner img {

        max-height: 50vh;

    }



    .intro .phoneInner img {

        max-height: 50vh;

        width: auto;

    }



    .intro {

        background-size: 100%;

        background-position: 100% 0;

    }



    .aboutUs .bg,

    .trackOrder .bg {

        height: 60vw;

        max-width: 100%;

    }



    .aboutUs,

    .trackOrder {

        padding-top: calc(25px + 60vw);

    }



    .aboutUs .inner,

    .trackOrder .inner {

        width: 100%;

    }



    .download h3 {

        font-size: calc((12px + .25vw) * var(--font-ratio));

        line-height: calc((12px + 2vw) * var(--font-ratio));

    }



    .navbar .container {

        display: flex;

        flex-direction: row-reverse;

    }



    .navbar-collapse {

        background: #190751cc;

        top: 0px;

        position: absolute;

        left: 0px;

        right: 0px;

        padding: 20px;

    }



    .navbar-nav {

        padding: 0px;

    }



    .navbar .navbar-nav .nav-link {

        padding: 10px;

        transform: none !important;

        color: var(--white);

    }



    .langBtn {

        margin-top: 25px;

    }



    .navbar .navbar-nav .nav-link.active {

        background-color: var(--secondary);

        color: var(--white);

        border-radius: 10px;

    }



    .closeBtn {

        background-color: var(--danger);

        width: 40px;

        height: 40px;

        position: relative;

        margin-bottom: 10px;

        border-radius: 50%;

        padding: 0px;

    }



    .closeBtn::after {

        content: 'x';

        position: absolute;

        top: 0px;

        bottom: 0px;

        left: 0px;

        right: 0px;

        margin: auto;

        color: var(--white);

        font-size: 25px;

        font-weight: 200;

    }



    #registerModal .modal-dialog,

    .mapContainer .inner {

        max-width: 100%;

        margin: 20px;



    }





    .otpContainer .inner {

        padding: 40px 16px;

        width: 95%;

    }



    .otpContainer #confirmOtp {

        margin-top: 10px;

        width: 96%;

    }



    .mapContainer #closeMap {



        right: 30px;

        top: 30px;

    }



    .mapContainer #confirmMap {

        margin: 16px auto;

        height: 50px;

        width: 100%;

        border-radius: 12px;

    }



    #registerModal .modal-content {

        padding: 20px 10px;

    }



    #registerModal .modal-body {

        padding: 10px;

    }



    .formInputs {

        padding: 4px;

        margin-top: 25px;

    }



    #registerModal h3 {

        font-size: calc((15px + .5vw) * var(--font-ratio));

    }



    #registerModal .applyBtn {



        max-width: 100%;

        min-width: 200px;

        width: 98%;

    }



    #registerModal h4 {

        min-width: 100%;
        margin: 0px;

    }





    .essentialFiles .col-auto {

        height: calc(10px + 1vw);

    }



    .tabBtns {

        width: 100%;

    }



    .tabBtns .btn {

        padding: 10px;

        width: 50%;

    }

}





/* Arabic style  */



html[dir="RTL"] body * {

    font-family: arFont;

}



html[dir="RTL"] .intro {

    background-image: url(../images/intro_bg_ar.png);

    background-position: 0%;

}



html[dir="RTL"] .aboutUs .bg {

    left: auto;

    right: 0;

    transform: scale(-1, 1);

}



html[dir="RTL"] .trackOrder .bg {

    right: auto;

    left: 0;

    transform: scale(-1, 1);

}



html[dir="RTL"] footer .footerLink::before {

    left: auto;

    right: 0;

}



html[dir="RTL"] .custom-control-label::before,



html[dir="RTL"] .custom-control-label::after {

    left: auto;

    right: -1.5rem;

}



html[dir="RTL"] .custom-control {

    padding-left: 0;

    padding-right: 1.5rem;

}