@font-face {
    font-family: 'hdcolton-light';
    src: url('../fonts/HDColton-Light.woff2') format('woff2'),
    url('../fonts/HDColton-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hdcolton-regular';
    src: url('../fonts/HDColton-Regular.woff2') format('woff2'),
    url('../fonts/HDColton-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hdcolton-medium';
    src: url('../fonts/HDColton-Medium.woff2') format('woff2'),
    url('../fonts/HDColton-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hdcolton-semibold';
    src: url('../fonts/HDColton-Semibold.woff2') format('woff2'),
    url('../fonts/HDColton-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hdcolton-bold';
    src: url('../fonts/HDColton-Bold.woff2') format('woff2'),
    url('../fonts/HDColton-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hdcolton-extrabold';
    src: url('../fonts/HDColton-Extrabold.woff2') format('woff2'),
    url('../fonts/HDColton-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'hdcolton-black';
    src: url('../fonts/HDColton-Black.woff2') format('woff2'),
    url('../fonts/HDColton-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/*
 @font-face {
     font-family: 'hdcolton-medium';
     src: url('../fonts/hdcolton-medium-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-medium-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }

 @font-face {
     font-family: 'hdcolton-regular';
     src: url('../fonts/hdcolton-regular-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }

 @font-face {
     font-family: 'hdcolton-semiboldss';
     src: url('../fonts/hdcolton-semibold-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-semibold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
    font-family: 'hdcolton-semibold';
    src: url('../fonts/HDColton-Semibold.woff2') format('woff2'),
        url('../fonts/HDColton-Semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



 @font-face {
     font-family: 'hdcolton-bold';
     src: url('../fonts/hdcolton-bold-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-bold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }

@font-face {
     font-family: 'hdcolton-wideextrabold';
     src: url('../fonts/hdcolton-wideextrabold-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-wideextrabold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }

 @font-face {
     font-family: 'hdcolton-widesemibold';
     src: url('../fonts/hdcolton-widesemibold-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-widesemibold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }
 @font-face {
    font-family: 'hdcolton-extrabold';
    src: url('../fonts/hdcolton-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
 @font-face {
    font-family: 'hdcolton-black';
    src: url('../fonts/hdcolton-black-webfont.woff2') format('woff2'),
         url('../fonts/hdcolton-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

*/


/*
@font-face {
    font-family: 'bbcnassimregular';
    src: url('../fonts/bbcnassim_regular-webfont.woff2') format('woff2'),
         url('../fonts/bbcnassim_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bbcnassimbold';
    src: url('../fonts/bbcnassim_bold-webfont.woff2') format('woff2'),
         url('../fonts/bbcnassim_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'bbcnassim-exbold';
    src: url('../fonts/bbcnassim-ex_bold-webfont.woff2') format('woff2'),
         url('../fonts/bbcnassim-ex_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
*/

/****************Arabic Fonts***************/

@font-face {
    font-family: 'Noto Kufi Arabic Thin';
    src: url('../fonts/arabic/NotoKufiArabic-Thin.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Kufi Arabic ExtraLight';
    src: url('../fonts/arabic/NotoKufiArabic-ExtraLight.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Kufi Arabic Light';
    src: url('../fonts/arabic/NotoKufiArabic-Light.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Kufi Arabic Regular';
    src: url('../fonts/arabic/NotoKufiArabic-Regular.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Kufi Arabic Medium';
    src: url('../fonts/arabic/NotoKufiArabic-Medium.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Kufi Arabic SemiBold';
    src: url('../fonts/arabic/NotoKufiArabic-SemiBold.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Kufi Arabic Bold';
    src: url('../fonts/arabic/NotoKufiArabic-Bold.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Kufi Arabic ExtraBold';
    src: url('../fonts/arabic/NotoKufiArabic-ExtraBold.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Noto Kufi Arabic Black';
    src: url('../fonts/arabic/NotoKufiArabic-Black.woff2') format('woff2'),
    url('../fonts/arabic/NotoKufiArabic-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* Variables Start */

:root {
    --black: #022F40;
    --lightOrange: #EF8421;
    --lightBGOrange: #ffe0c3;

    --grey: #D9D9D9;
    --grey2: #B7B7B7;
    --grey2Hover: #a0a0a0;
    --grey3: #a1a1a1;
    --grey4: #FAFAFA;
    --grey5: #A4A4A4;
    --grey6: #8f8d8d;
    --grey7: #7c7c7c;
    --greyLight: #ededed;
    --greyLight2: #f7f7f7;
    --border: #d2d2d2;
    --darkGrey: #666666;
    --white: #ffffff;
    --orange: #E95A2C;
    --orangeHover: #f8693a;
    --blackHover: #03526e;
    --backgroundC: #f4f4f4;
    --lightGreen: #E0FFD7;
    --green: #259F00;
    --lightSkyBlue: #E1F9FC;
    --skyBlue: #0ED1E9;
    --lightRed: #FFF0F0;
    --red: #DC3333;
    --error: #ff3535;

    --light: "hdcolton-light";
    --regular: "hdcolton-regular";
    --medium: "hdcolton-medium";
    --semiBold: "hdcolton-semibold";
    --bold: "hdcolton-bold";
    --extraBold: "hdcolton-extrabold";
    --tBlack: "hdcolton-black";
    --wideSemiBold: "hdcolton-widesemibold";
    --wideExtraBold: "hdcolton-wideextrabold";


    --arThin: "Noto Kufi Arabic Thin";
    --arExtraLight: "Noto Kufi Arabic ExtraLight";
    --arLight: "Noto Kufi Arabic Light";
    --arRegular: "Noto Kufi Arabic Regular";
    --arMedium: "Noto Kufi Arabic Medium";
    --arSemiBold: "Noto Kufi Arabic SemiBold";
    --arBold: "Noto Kufi Arabic Bold";
    --arExtraBold: "Noto Kufi Arabic ExtraBold";
    --arBlack: "Noto Kufi Arabic Black";
}

/******************Text All**********/

.__light,
.__light > * {
    font-family: var(--light);
}

body.direction-rtl .light,
body.direction-rtl .light > * {
    font-family: var(--arLight);
}


.__regular,
.__regular > * {
    font-family: var(--regular);
}

body.direction-rtl .__regular,
body.direction-rtl .__regular > * {
    font-family: var(--arRegular);
}

.t__regular {
    font-family: var(--regular) !important;
}

.t__arRegular {
    font-family: var(--arRegular) !important;
}


.__medium, .t__medium,
.__medium > * {
    font-family: var(--medium);
}

body.direction-rtl .__medium, .t__arMedium,
body.direction-rtl .__medium > * {
    font-family: var(--arMedium);
}

.__semiBold, .t__semiBold,
.__semiBold > * {
    font-family: var(--semiBold);
}

body.direction-rtl .__semiBold, .t__arSemiBold,
body.direction-rtl .__semiBold > * {
    font-family: var(--arSemiBold);
}

.t__semiBold {
    font-family: var(--semiBold) !important;
}

.t__arSemiBold {
    font-family: var(--arSemiBold) !important;
}

.__bold,
.__bold > * {
    font-family: var(--bold);
}

body.direction-rtl .__bold,
body.direction-rtl .__bold > * {
    font-family: var(--arBold);
}

.__extraBold,
.__extraBold > * {
    font-family: var(--extraBold);
}

body.direction-rtl .__extraBold,
body.direction-rtl .__extraBold > * {
    font-family: var(--arExtraBold);
}


/* Variables end */
.bgOrange {
    background-color: var(--orange) !important;
}

.bgWhite {
    background-color: var(--white);
}

.bgGrey {
    background-color: var(--grey);
}

.bgBlack {
    background-color: var(--black);
}


/* .text-primary {
    color: var(--primaryText);
}
.bg-secondary {
    background-color: var(--secondaryText);
} */


html {
    width: 100%;
    /*height: 100%;*/
    overflow-x: hidden;
}

body {
    font-family: var(--regular);
    font-style: normal;
    font-size: 14px;
    background-color: var(--bgWhite);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    color: var(--black);
}

body.direction-rtl {
    font-family: var(--arRegular);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bold);
    letter-spacing: .5px;
    margin-top: 0
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
    font-family: var(--semiBold);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;

}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
    color: var(--orange);
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

p {
    color: var(--darkGrey);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 6px
}

/*.container {
    width: 1200px
}
.container-fluid {
    margin-left: -15px;
    margin-right: -15px
}*/
.f-left {
    float: left
}

.f-right {
    float: right
}

.fix {
    overflow: hidden
}

/*a img {
     -webkit-transition: .3s;
     transition: .3s
 }

 a img:hover {
     opacity: .9;
     -ms-filter: "alpha(opacity=90)";
 }*/

a,
.btn {
    -webkit-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s
}

a {
    text-decoration: none;
}

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

a:focus,
a:hover {
    text-decoration: none
}

a,
button {
    outline: medium;

}

h1 {
    font-size: 35px;
    font-weight: 500
}

h2 {
    font-size: 30px;
    font-weight: 600
}

h3 {
    font-size: 18px
}

h4 {
    font-size: 15px
}

h5 {
    font-size: 14px
}

h6 {
    font-size: 11px
}

.text-uppercase {
    text-transform: uppercase
}

.gray-bg {
    background-color: #f7fbfe
}

.white-bg {
    background-color: var(--white) !important;
}

.black-bg {
    background-color: var(--black) !important;
}

.orange-bg {
    background-color: var(--orange) !important;
}

.c-grey {
    color: var(--grey2) !important;
}

.c-black {
    color: var(--black) !important;
}

.c-orange {
    color: var(--orange) !important;
}

label {
    color: var(--black);
    /* cursor: pointer; */
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

*::-moz-selection {
    background: var(--orange);
    color: #fff;
    text-shadow: none
}

*::-moz-selection {
    background: var(--orange) none repeat scroll 0 0;
    color: #fff;
    text-shadow: none
}

::selection {
    background: var(--orange);
    color: #fff;
    text-shadow: none
}

*::-moz-placeholder {
    font-size: 14px;
    color: #c7c7c7 !important;
}

*::-webkit-input-placeholder {
    color: #c7c7c7 !important;
    font-size: 14px
}

*:-ms-input-placeholder {
    color: #c7c7c7 !important;
    font-size: 14px
}

*::placeholder {
    color: #c7c7c7 !important;
    font-size: 14px
}

.text-center {
    text-align: center
}

.textBlack {
    color: var(--black) !important;
}

.textOrange {
    color: var(--orange) !important;
}


.d-flex {
    display: flex;
}

.btn {
    padding: 6px 6px 6px 15px;
    color: #fff;
    border: transparent;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: fit-content;
    min-width: 120px;
    white-space: nowrap;
    gap: 15px;
    text-transform: uppercase;
    -webkit-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

.btn.btn-primary {
    background-color: var(--orange);
    color: var(--white);
}

.btn.btn-primary:hover {
    background-color: var(--orangeHover);
}

.btn-primary-back {
    padding: 6px 15px 6px 6px;
}

.btn-box-reverse {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

.btn.text-center {
    text-align: center !important;
    justify-content: unset !important;
    display: block;
    line-height: 34px;
}

.btn.text-center.btn-small {
    line-height: 28px;
}

.btn.btn-center-wa {
    text-align: center !important;
    justify-content: unset !important;
    display: block;
    line-height: 42px;
    padding: 0px 15px 0px 15px;
}

.btn.btn-center-img img {
    margin-right: 10px;
    max-width: 28px;
    max-height: 28px;
}

.btn.text-center .btn-box {
    float: right;
}

.btn.btn-secondary {
    background-color: var(--black);
    color: var(--white);
}

.btn.btn-secondary:hover {
    background-color: var(--blackHover);
}

.btn.text-center span {
    position: relative;
}


.btn-box {
    max-width: 34px;
    min-width: 34px;
    height: 34px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


.btn-box img {
    max-width: 18px;
    max-height: 18px;
}

.btn-small {
    text-transform: capitalize;
}

.btn-small .btn-box {
    width: 28px;
    height: 28px;
    max-width: 28px;
    min-width: 28px;
}

.btn-small .btn-box img {
    max-width: 14px;
    max-height: 14px;
}

.btn.btn-primary .btn-box {
    background-color: var(--white);
}

.btn.btn-primary-transparent {
    background-color: transparent;
    border: 1px solid var(--orange);
    color: var(--orange);
}

.btn.btn-primary-transparent .btn-box {
    background-color: var(--orange);
}

.btn.btn-primary-transparent:hover {
    background-color: transparent;
    border: 1px solid var(--orangeHover);
    color: var(--orangeHover);
}

.btn.btn-secondary .btn-box {
    background-color: var(--white);
}

.btn.btn-no-icon-center {
    padding: 6px 6px 6px 6px;
}

.btn.btn-secondary-transparent {
    background-color: transparent;
    border: 1px solid var(--black);
    color: var(--black);
}

.btn.btn-secondary-transparent .btn-box {
    background-color: var(--black);
}

.btn.btn-secondary-transparent:hover {
    background-color: transparent;
    border: 1px solid var(--blackHover);
    color: var(--blackHover);
}

.btn.btn-white-transparent {
    background-color: transparent;
    border: 1px solid var(--white);
    color: var(--white);
}

.btn.btn-white-transparent .btn-box {
    background-color: var(--white);
}

.btn.btn-primary .btn-box {
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: center;
}

.btn.btn-primary .btn-box.arrow-w-bg {
    background-image: url(../images/icons/arrow_forward_white.svg);
}

.btn.btn-primary .btn-box.arrow-o-bg {
    background-image: url(../images/icons/arrow_forward_orange.svg);
}

.btn.btn-primary .btn-box.search-o-bg {
    background-image: url(../images/icons/searchBtnIcon.svg);
}

.btn.btn-primary-eq-img {
    padding: 12px 15px 12px 15px;
    gap: 10px;
}

.btn.btn-primary-grey {
    background-color: var(--grey2);
    color: var(--white);
}

.btn.btn-primary-grey:hover {
    background-color: var(--grey2Hover);
}

.btn-center {
    width: 100%;
    padding-left: 10px;
    text-align: center;
}

.btn-simple {
    padding: 12px;
    min-width: 120px;
    text-align: center;
    color: #fff;
    justify-content: center;
    background-color: var(--orange);
}

.btn-simple:hover {
    background-color: var(--orangeHover);
    color: #fff;
}

.btn.btn-red {
    background-color: var(--red);
}


.w-100 {
    width: 100%;
}

img {
    max-width: 100%;
}

.form-group {
    margin-bottom: 15px;
    position: relative;
}

.form-group label {
    font-family: var(--medium);
    color: var(--black);
    font-size: 14px;
    padding-bottom: 5px;
}

.form-group .form-control {
    border-radius: 10px !important;
    background-color: #fff;
    border: 1px solid var(--grey);
    padding: 10px 25px 12px 45px;
    font-size: 14px;
    color: var(--black);
    font-family: var(--regular);
    height: 45px;
}

input[type="text"] {
    height: 45px;
}

.form-control,
.custom-file {
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid var(--grey);
    padding: 10px 10px 12px 52px;
    font-size: 14px;
    color: var(--black);
    font-family: var(--regular);
}

.custom-file {
    display: flex;
    align-items: center;
}

select.form-control {
    height: 45px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 1.1em;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.form-group .form-control.form-control-no-img {
    padding-left: 10px;
}

.form-group #mobile-number.form-control {
    padding-left: 65px;
}

.direction-rtl .form-group #mobile-number.form-control {
    padding-right: 65px;
    padding-left: 15px;
    text-align: right;
}

.group-flex {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 50px;
}

.dropdown-menu-adv-filter .form-group .form-control {
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid var(--grey);
    padding: 10px 10px 12px 10px;
    font-size: 14px;
    color: var(--black);
    font-family: var(--regular);
}

.dropdown-menu-adv-filter .form-control {
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid var(--grey);
    padding: 10px 10px 12px 10px;
    font-size: 14px;
    color: var(--black);
    font-family: var(--regular);
}


.form-group textarea.form-control {
    min-height: auto;
    height: 150px;
    overflow-y: hidden;
    resize: none;
}

.form-group textarea.form-control.h-128 {
    height: 128px;
}

.formInputRow {
    position: relative;
}

.form-control:focus {
    /* box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); */
    box-shadow: none;
}

.mod-form-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 13px;
    left: 13px;
    z-index: 60;
}

.mod-form-icon img {
    float: left;
}

form {
    width: 100%;
}