/*------------------------------------------------------------------
Project: laundry
Author: Webotix    
Last change: 05/19/2024  
-------------------------------------------------------------------*/
/************************ 1.Default CSS ***************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400..700&display=swap');

body {
    margin: 0;
    padding: 0;
    /* font-family: 'Poppins', sans-serif; */
     font-family: "Noto Naskh Arabic", serif;
    font-size: 16px;
    position: relative;
    width: 100vw;
    overflow-x: hidden;
    color: #231f20;
    box-sizing: border-box;
    background-color: var(--white);
}



@font-face {
    font-family: "Satoshi";
    src: url('../font/Satoshi-Medium.ttf');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

ul {
    padding: 0;
    margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: 'Poppins', sans-serif; */
    font-family: "Noto Naskh Arabic", serif;
}

p {
    font-family: "Noto Naskh Arabic", serif;
        font-weight: normal;
}

button {
    border: none;
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    color: inherit;
    /* color: #000; */

}

a.disabled {
    pointer-events: none;
    opacity: 0.65;
    cursor: default;
}

:root {

    --brand: #0E2D6D;
    --transparent-brand: #0e2e6ddf;
    --primary: #1A8CE8;
    --cyan: #4DCFFC;
    --light-gray: #6B7280;
    --primary-black: #222222;
    --gradient-primary: linear-gradient(0deg, #0E2D6D, #0E2D6D), linear-gradient(0deg, rgba(20, 43, 105, 0.62), rgba(20, 43, 105, 0.62));
    --ash-brand: #E2E9F1;
    --bluish-ash: #F0F4FA;
    --bluish-light: #CAD7FF;
    --orange: #F89F1A;

    /* border */
    /* --bs-border-color:#C3C3C3 !important; */
    --transition-brand: all .25s ease;
    --primary-color: #F0FDFF;
    --text-color: #0F0F0F;
    --sub-text-color: #555;
    --border-colors: #00184214;
    --downarrowlight: url(../images/down-arrow-light.svg);
    --apple-icon: brightness(0) saturate(100%) invert(0%) sepia(99%) saturate(5%) hue-rotate(317deg) brightness(103%) contrast(103%);
    --sign-in-bg: #E4FFEE;
    --cal-icon: brightness(0) saturate(100%) invert(0%) sepia(23%) saturate(2539%) hue-rotate(118deg) brightness(92%) contrast(89%);
    --language-color: #FFF;
    --visa-color: #172B85;
    --box-color: #FFFFFF;
    --border-colors-second: #F5F5F5;
    --dots-img: brightness(0) saturate(100%) invert(100%) sepia(19%) saturate(5777%) hue-rotate(182deg) brightness(120%) contrast(88%);
    --order-number: #00112E;
    --brown: #6A4E07;
    --dark-green: #0E5B02;
    --indigo: #005B78;
    --violet: #610247;
    --maroon: #720000;
    --red: #FF0000;
    --yellow: #fff700;
    --green: #00ff5e;
    --blue: #004CE6;
    --orange-bg: #FF7A00;
    --orange-text: #FF7A00;
    --green-text: #4BD136;
    --dark-green-text: #04461E;
    --green-bg: #4BD136;
    --pink-text: #EE1F76;
    --dark: #000;
    --dark-secondary: #1A1A1A;
    --dark-3rd: #1A1A1A;
    --dark-thrd: #252525;
    --light-black: #252525;
    --sky-blue: #00FFF0;
    --white: #ffff;
    --theme-black: #222222;
    --dark-light: #181818;
    --blue-dark: #001842;
    --theme-blue: #029fd5;
    --bg-yellow: #FAEA25;
    --bg-red: #FE1F1F;
    --bg-white: #DFDFDF;
    --ash-color: #DFDFDF;
    --bg-green: #00E074;
    --bg-dark-green: #04461E;
    --bg-gray: #676767;
    --bg-dark-gray: #525252;

    --bg-pink: #DD1B6C;
    --darkgey: #27425F;
    --bggray-badge: #DFDFDF;
    --bg-gray-text: #27425F;
    --bg-gray-light: #C4C4C4;
    --light-yellow: #DCCE21;
    --graylight: #A3A3A3;
    --dull-orange: #F8C566;
    --black-violet: #680099
        /* border */

}

/* custom btn */
.btn {
    --bs-btn-font-weight: 500 !important;
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-border-radius: 10px !important;
    position: relative;
    z-index: 1;
    
}
.btn:hover{
    border-color: rgba(20, 20, 20, 0.1);
}

.btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: scale(0, 1);
    -moz-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
  }

  
.btn-light:before{
    background: rgba(20, 20, 20, 0.1) !important;
    /* opacity: 0.1; */
}
.btn-light:hover{
    border-color: rgba(20, 20, 20, 0.1) !important;
}
  .btn:hover:before {
    -webkit-transform-origin: right center;
    -moz-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
  }

  .btn i,
  .btn i:before{
    transition: all .3s ease-in-out;

  }
  .btn:hover i.bi-arrow-up-right:before,
  .btn:hover i.lni-arrow-top-right{
    transform: rotate(225deg);
  }

.btn-sm {
    --bs-btn-padding-y: 0.25rem;
}

/* Dismiss btn */
.alert-dismissible .btn:hover:before{
    background: var(--brand) !important;
}
.alert-dismissible .btn:hover{
    color: #fff !important;
}

.btn-purple {

    --bs-btn-color: #fff;
    --bs-btn-bg: #CE02F3;
    --bs-btn-border-color: #CE02F3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #be03e0;
    --bs-btn-hover-border-color: #b806d7;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b806d7;
    --bs-btn-active-border-color: #a107bc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #CE02F3;
    --bs-btn-disabled-border-color: #CE02F3;

}

.btn-orange {

    --bs-btn-color: #fff;
    /* --bs-btn-bg: #FF7A00;
    --bs-btn-border-color: #FF7A00; */
    --bs-btn-bg: #ffa908;
    --bs-btn-border-color: #ffa908;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg:#ffa908 ;
    --bs-btn-hover-border-color:#ffa908 ;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f87c08;
    --bs-btn-active-border-color: #f87c08;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #FF7A00;
    --bs-btn-disabled-border-color: #FF7A00;

}

.btn-green {

    --bs-btn-color: #fff;
    --bs-btn-bg: #10DB79;
    --bs-btn-border-color: #10DB79;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0ebc68;
    --bs-btn-hover-border-color: #0ebc68;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0dbf69;
    --bs-btn-active-border-color: #0dbf69;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #10db7985;
    --bs-btn-disabled-border-color: #10db7985;

}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1A8CE8;
    --bs-btn-border-color: #1A8CE8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1A8CE8;
    --bs-btn-hover-border-color: #1A8CE8;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1674c0;
    --bs-btn-active-border-color: #1674c0;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(26, 140, 232, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1068b0;
    --bs-btn-disabled-border-color: #1674c0;
}

.btn-bluish-gray {
    --bs-btn-color: #fff;
    --bs-btn-bg: #506EBE;
    --bs-btn-border-color: #506EBE;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #506EBE;
    --bs-btn-hover-border-color: #506EBE;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #425a9c;
    --bs-btn-active-border-color: #425a9c;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(26, 140, 232, .125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #56699e;
    --bs-btn-disabled-border-color: #56699e;
}

.btn-light {
    --bs-btn-color: #142B69;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #142B69;
    --bs-btn-hover-bg: #f8f9fa;
    --bs-btn-hover-border-color: #f8f9fa;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #142B69;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #142B69;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-outline-light {
    --bs-btn-color: #142B69;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--bluish-light);
    --bs-btn-hover-color: #142B69;
    --bs-btn-hover-bg: var(--bluish-light);
    --bs-btn-hover-border-color: var(--bluish-light);
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #142B69;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}


.bg-circle,
.bg-circle-brand {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 20px;
    background-color: #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bg-circle-brand {
    width: 3rem;
    height: 3rem;
    font-size: 24px;
    background-color: var(--brand);
    color: #fff;
}

.bg-rect {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 20px;
    background-color: #f9f9f9;
    color: #212529;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25%;
}


/* Custom Animation */
@-webkit-keyframes spin-horizontal {
	0% {
		-webkit-transform:  scaleX(1);
		transform:  scaleX(1)
	}
	100% {
		-webkit-transform:  scaleX(-1);
		transform: scaleX(-1)
	}
}
@keyframes spin-horizontal {
	0% {
		-webkit-transform:  scaleX(1);
		transform: scaleX(1)
	}
	100% {
		-webkit-transform:  scaleX(-1);
		transform: scaleX(-1)
	}
}

/* Hover Tramsition Effects */
[class*="hover-"]{
    -webkit-transition: var(--transition-brand);
    -moz-transition: var(--transition-brand);
    transition:var(--transition-brand);
}



.hover-bg-brand:hover {
    background-color: var(--brand) !important;
    color: #fff !important;
    border: 1px solid var(--brand);
}


.hover-spin-horizontal:hover{
    -webkit-animation: spin-horizontal 2s linear infinite;
    animation: spin-horizontal 2s linear infinite;
}

.hover-flip-horizontal:hover{
    transform: scaleX(-1);
}


.hover-shadow:hover {
    border-color: transparent !important;
    box-shadow: 0px 0px 25px 5px #CAD7FF;

}


.hover-opacity:hover {
    opacity: 0.75;
}

.hover-zoom {
    overflow: hidden;
}

.hover-zoom img {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;

}

.hover-zoom:hover img {
    transform: scale(1.15);
}

.hover-translateX,
.hover-translateY {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all .25s ease-in-out;
}

.hover-translateX:hover {
    transform: translateX(-5px);
}

.hover-translateY:hover {
    transform: translateY(-5px);
}
/* Effects End */

/* ----------------Skeleton Loader---------------- */

.loading{
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.24); */
    background-color: #dde4f6 !important;
    background: #dde4f6 !important;
    color: #dde4f6 !important;
    border-color: #dde4f6 !important;
    overflow: hidden;
    border-radius: 15px;
    transition-duration: 0.3s !important;
}
.banner-section.loading,
.legacy-bg.loading{
    border-radius: 0 !important;

}
.loading *{
    visibility: hidden;
    opacity: 0;
}
.loading:before{
    content:'';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    background:linear-gradient(90deg, transparent, #EFFDFF,transparent);
    transform: translateX(-100%);
    animation: loading 1.9s infinite;
    -webkit-animation: loading 1.9s infinite;
    z-index: 99;
    transition-duration: 1s;
}
@keyframes loading{
    100%{
        transform: translateX(100%);
    }
    
}
@-webkit-keyframes loading{
    100%{
        transform: translateX(100%);
    }
    
}

/* odometer */
.odometer .odometer-inside{
    display: flex !important;
    align-items: center;
}
.odometer.odometer-auto-theme, .odometer.odometer-theme-default{
    font-family: "Noto Naskh Arabic", serif !important;
}
/*-------------------------- Header------------------------------ */

header {
    width: 100%;
    position: relative;
    background-color: var(--brand);
    border-bottom: 2px solid #FFFFFF;
    color: var(--text-white);
    background-size: cover;
    padding:0.5rem 1rem;
    z-index: 100;
    animation: fadeIn 400ms linear


}

header.fixed-top {
   
    width: 100%;
    background: var(--transparent-brand);
    animation: fadeInDown 400ms linear
}

header .header-menu {
    display: flex;
    /* flex-direction: row-reverse; */
    justify-content: space-between;
    align-items: center;
    margin: 1rem auto;
    gap: 0.5rem;
}

header .header-menu .left-div a {
    display: flex;
    justify-content: flex-start
}

header .header-menu .left-div a img {
    width: 50%
}

header .header-menu .center-div {
    display: flex;
    justify-content: flex-end;
    /* width: 65%; */
    margin-right: auto;
    align-items: center;
    gap: 0 35px
}

/* header .header-menu .center-div .registration-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 29px;
    border-radius: 10rem;
    color: #fff;
    font-size: 1rem;
    letter-spacing: .15rem;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #e20f19;
    font-size: 1.1rem;
    height: 30px;
    text-decoration: none;
    height: 40px;
    border: none;
    letter-spacing: 0;
    font-size: .875rem
}

header .header-menu .center-div .registration-btn:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    z-index: -2
}

header .header-menu .center-div .registration-btn:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #000;
    transition: all .3s;
    border-radius: 10rem;
    z-index: -1
}

header .header-menu .center-div .registration-btn:hover {
    color: #fff
}

header .header-menu .center-div .registration-btn:hover:before {
    width: 100%
}

header .header-menu .center-div .logout-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 29px;
    border-radius: 10rem;
    color: #fff;
    font-size: 1rem;
    letter-spacing: .15rem;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #e20f19;
    line-height: 32px;
    font-size: 1.1rem;
    height: 30px;
    text-decoration: none;
    height: 40px;
    border: 1px solid #303030;
    color: #303030;
    letter-spacing: 0;
    font-size: .875rem;
    background: none;
    font-weight: 600
}

header .header-menu .center-div .logout-btn:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    z-index: -2
}

header .header-menu .center-div .logout-btn:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #000;
    transition: all .3s;
    border-radius: 10rem;
    z-index: -1
}

header .header-menu .center-div .logout-btn:hover {
    color: #fff
}

header .header-menu .center-div .logout-btn:hover:before {
    width: 100%
}

header .header-menu .center-div .language-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 29px;
    border-radius: 10rem;
    color: #fff;
    font-size: 1rem;
    letter-spacing: .15rem;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: #e20f19;
    line-height: 32px;
    font-size: 1.1rem;
    height: 30px;
    text-decoration: none;
    height: 30px;
    border: none;
    border-radius: 20px;
    box-shadow: 0 7px 12px 0 rgba(0, 0, 0, .24);
    background-color: #000 !important;
    font-size: .8rem;
    padding: 5px 20px;
    letter-spacing: inherit
}

header .header-menu .center-div .language-btn:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    z-index: -2
}

header .header-menu .center-div .language-btn:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #000;
    transition: all .3s;
    border-radius: 10rem;
    z-index: -1
}

header .header-menu .center-div .language-btn:hover {
    color: #fff
}

header .header-menu .center-div .language-btn:hover:before {
    width: 100%
}

header .header-menu .center-div .language-btn:before {
    background-color: #e20f19
} */

header .header-menu ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    gap: 1rem;
    margin-bottom: 0;
    align-items: center;
}

header .header-menu ul a {
    text-decoration: none;
    /* color: #231f20 */
}

header .right-div {
    display: flex;
    align-items: center
}

header .right-div .top-menu-div{
    z-index: 999;

}

header .right-div .button_container {
    position: relative;
    height: 20px;
    width: 36px;
    cursor: pointer;
    z-index: 100;
    transition: opacity .25s ease;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

header .right-div .button_container:hover {
    opacity: .7;
    transition: all .35s ease !important;


}

header .right-div .button_container.active {
    right: 0;
    left: inherit;

}

header .right-div .button_container.active .top {
    transform: translateY(11px) translateX(0) rotate(45deg);
    background: #fff;
    transition-delay: 0s !important;
}

header .right-div .button_container.active .middle {
    opacity: 0;
    background: #fff;
    transition-delay: 0s !important;
}

header .right-div .button_container.active .bottom {
    transform: translateY(-11px) translateX(0) rotate(-45deg);
    background: #fff;
    opacity: 1;
    top: 22px;
    width: inherit;
    transition-delay: 0s !important;
}

header .right-div .button_container span {
    background: var(--white);
    border: none;
    height: 3px;
    width: 100%;
    position: absolute;
    top: 0;
    transition: all .35s ease;
    cursor: pointer;
    border-radius: 11px
}

header .right-div .button_container span:nth-of-type(2) {
    top: 8px;
}

header .right-div .button_container span:nth-of-type(3) {
    top: 16px;
    /* opacity: 1; */
    width: 70%
}

header .right-div .offcanvas {
   
    /* animation: fadeInRight 400ms ease; */
   /* transition:  all .3s ease-in-out !important; */
    opacity: 0;
    background-color: #163483f7;
}

header .right-div .offcanvas .container .menu-div {
    opacity: 0;
    padding-bottom: 3rem !important;
}

header .right-div .offcanvas.show {
     opacity: 1;

  
}

header .right-div .offcanvas.show .offcanvas-body {
    height: 100%
}

header .right-div .offcanvas.show .offcanvas-body .menu-div {
    /*top: 60%;*/
    position: relative;
    /* transform: translate(0%, 5%); */
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 1;
    transition: opacity .35s, visibility .35s, width .35s, height .35s;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem
}

header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem
}

header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li {
    width: 100%
}

header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li a {
    display: inline-flex;
    gap: .5rem;
    transform: translateX(20px);
     width: 100%; 
    /* margin-left: -35px; */
    text-shadow: 2px 4px rgba(0, 0, 0, .1);
    text-decoration: none;
    /* font-size: 2rem; */
    font-size: 24px;
    line-height: 2.5rem;
    font-weight: 600;
    /* background: linear-gradient(to right, #231f20, #231f20 50%, #fff 50%); */
    background: linear-gradient(to right, #0500ffe8, #20bcfff8 50%, #fff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background-size: 200% 100%;
    background-position: 100%;
    transition: background-position 275ms ease, transform 275ms ease;
    /* transition: all .275s ease-in-out; */
    text-decoration: none
}

header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li a:hover {
    transform: translateX(-10px);
    background-position: 0 100%;

}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li a:before{
    content:"\F12F";
    font-family:'bootstrap-icons';
    background: linear-gradient(to right, #0500ffe8, #20bcfff8 50%, #fff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background-size: 200% 100%;
    background-position: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;

}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li a:hover:before{
    opacity: 1;
    visibility: visible;

}




/* header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:first-child a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 100ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(2) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 200ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(3) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 300ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(4) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 400ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(5) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 500ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(6) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 600ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(7) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 700ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(8) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 800ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(9) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 900ms;
}
header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li:nth-child(10) a{
    animation: fadeInBottomRight 1000ms ease;
    animation-delay: 1000ms;
} */



header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li a:hover i.bi {
    visibility: visible !important;
    opacity: 1;
    background-position: 100% !important;

}

header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li a i {
    visibility: hidden;
    opacity: 0;
    transition: visibility 275ms ease, opacity 275ms ease;

    background: inherit;
    background-clip: text;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
    background-size: inherit;
    background-position: inherit;
}

header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-copy-right p {
    color: #fff;
    text-decoration: none;
    text-shadow: 2px 4px rgba(0, 0, 0, .1);
    font-size: .8rem;
    margin-bottom: 0
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%
    }

    100% {
        opacity: 1;
        left: 0
    }
}


section {
    padding-top: 6rem;
}

.section-theme {
    padding: 6rem 0 !important;

}

.banner-section {
    padding-top: 2rem;
}

/************************ Page Breadcrumb ***************************/

.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    font-family: LineIcons;
    content: "\ea5c";
    color: #fff;
    font-size: 10px;
    transform: rotate(180deg);
    float: right !important;
}

.page-breadcrumb .breadcrumb li.breadcrumb-item {
    color: #fff !important;
    font-size: 11px !important;
}

.page-breadcrumb .breadcrumb li.breadcrumb-item:first-child a {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.breadcrumb-item.active {
    font-weight: 600;

}

.page-breadcrumb .breadcrumb li .home-icon {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 9px !important;
    background-color: var(--brand);
    color: var(--white);

}

/************************ Banner ***************************/
.banner {
    display: flex;
    align-items: center;
    color: var(--white);
    min-height: 50vh;
    /* background:url(../images/banner/aboutUs-banner.png)  #163483C2 ; */
    background-blend-mode: multiply !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    padding: 2rem;
    /* border-radius: 2rem; */
}
.banner-rounded{
    border-radius: 2rem;
}

.banner .heading {
    font-size: 40px;
    text-transform: capitalize;
    font-weight: 600;
}

.banner .heading .sub-heading {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 500;
}

.aboutUs-container .main-desc {

    font-size: 20px;
    color: #000;

}
.aboutUs-container .aboutUs-card{
    background-color: var(--bluish-ash);
    border: 1px solid #CAD7FF;
    border-radius: 18px !important;
}
.aboutUs-container .aboutUs-card .heading {
    color: var(--brand);
    font-size: 36px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 1.5rem;

}

.aboutUs-container .aboutUs-card .main-heading {
    font-size: 26px !important;
}
.aboutUs-container .aboutUs-card .sub-heading {
    font-size: 24px !important;
    color: #170F49 !important;
}

.aboutUs-container .aboutUs-card .desc {
    /* color: var(--light-gray); */
    color: #000;
    font-size: 22px;
    margin-bottom: 1.5rem;
}

.aboutUs-container .aboutUs-card ul li{
    color: #000;
    font-size: 20px;
    font-weight: 500;
}

.aboutUs-container p {
    /* text-align: justify; */
    line-height: 130%;
    font-size: 18px;

}

.legacy-bg {
    background: #0E2D6D;


}

.legacy-bg #legacy-bg-video {
    width: 100vw;
    height: 620px;
    object-fit: cover;
    /* position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0; */
    z-index: -1;
    scale: Crop;
    opacity: 0.2;
}


.legacy-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.legacy-content .main-heding {
    color: var(--white);
    font-size: 66px;
    font-weight: 600;

}

.legacy-content .count-row .count-heading {
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    direction: ltr;

}

.legacy-content .count-row .count-heading span.text-info{
    font-size: 64px ;
    color: var(--cyan);
    font-weight: 600;

}
.legacy-content .count-row .count-heading span.text-info:not(:first-child),
.legacy-content .count-row .count-heading span.text-info:last-child{
    font-size: 41px;
}

.count-heading .title .odometer{
    font-size: 41px !important;
}

.legacy-content .count-row .col:last-child .count-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 20px;
    font-weight: 400;
    text-align: left !important;
}

.mobileApp-bg {
    position: relative;

}

.mobileApp-bg .img-container img {
    object-fit: fill;
    width: 100%;
}

.mobileApp-bg .content {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-top: 11rem;
}

.mobileApp-bg .content .heading {

    font-size: 36px;
    font-weight: 600;

}

.mobileApp-bg .content .btn-container {
    display: flex;
    align-items: center;
    gap: 1rem;

}

.mobileApp-bg .content .btn-container .dwnld-btn {
    cursor: pointer;
    transition: .3s all ease-in-out;
}

.mobileApp-bg .content .btn-container .dwnld-btn:hover {
    transform: scale(1.05);
}

.guidelines-container .accordion-item .accordion-button{
    background-color: transparent;
    border-radius: 24px 24px 0 0;
    box-shadow:none !important;
    /* border-radius: 24px; */
    color: #142B69;

}
.guidelines-container .accordion-item .accordion-button::after,
.guidelines-container .accordion-item .accordion-button:not(.collapsed)::after{
    background-image: url(../images/icons/acc_arrow_down.svg);
}

.guidelines-container .accordion-item .accordion-body .desc{
    color: var(--light-gray);
}

.guidelines-container .card .bg-circle {
    font-weight: 600;
}
.guidelines-container .card p{
    user-select: none;

}

section.about-CEO {
    min-height: 80vh;
    background: url('../images/icons/quotes-icon.png'), linear-gradient(0deg, #0E2D6D, #0E2D6D), linear-gradient(0deg, rgba(20, 43, 105, 0.62), rgba(20, 43, 105, 0.62));
    color: var(--white);
    margin-top: 6rem;
    position: relative;
    padding: 4rem 0;
    background-repeat: no-repeat;
    background-size: auto;
    background-position-x: 4.5%;

}



.about-CEO-container .main-desc {
    font-size: 24px;
}

.about-CEO-container .heading {
    font-size: 32px;
    font-weight: 600;

}

.about-CEO-container .heading span {
    font-size: 24px;
    font-weight: 500;
}

.about-CEO-container .img-container img {
    position: absolute;
    bottom: 0;
    left: 6rem;
    width: 38%;
    transform: rotateY(180deg) !important;

}

.about-CEO-container .img-container img.shade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 33%;
    opacity: 0.35;
}

.about-CEO-container .img-container img.quote-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 33%;
}

/* section.leadership-team{

} */

.team-container .card {

    box-shadow: 0px 10px 10px 0px #0000000A;
    box-shadow: 0px 20px 25px -5px #0000001A;
    font-weight: 500;
    border-radius: 24px !important;
    transition: all .275s ease;

}

.team-container .card:hover {
    box-shadow: 0px 0px 25px -5px #0000001A;
}

.team-container .card .card-body {
    padding: 1.5rem !important;
}

.team-container .card .card-body .img-container {
    border-radius: 1.5rem;
    overflow: hidden;
}

.team-container .card .card-title {
    color: var(--brand);
}

.team-container .card .card-text {
    color: var(--light-gray);
    font-weight: 500;

}

section.mission-and-vision {
    /* background:var(--gradient-primary); */
    background: linear-gradient(0deg, #0E2D6D, #0E2D6D), linear-gradient(0deg, rgba(20, 43, 105, 0.62), rgba(20, 43, 105, 0.62));
    color: var(--white);
    margin-top: 6rem;
}

.mission_vision-container .heading {
    font-size: 48px;
    font-weight: 600;

}

.mission_vision-container .desc {
    font-size: 20px;

}

/************************ Home Page ***************************/

/* home slider */
.home-banner {
    background-color: var(--brand);
}
.owl-nav button.disabled{
    pointer-events: none;
    opacity: 0.65 !important;
    cursor: default !important;
}
.owl-carousel.home-slider .owl-nav button {
    position: absolute;
    top: 40%;
    color: #fff !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    opacity: 1;
    transition: opacity .25s ease;
    /* background-color: black !important;*/
}

.owl-carousel.home-slider .owl-nav button:hover {
    opacity: 0.7;
}

.owl-carousel.home-slider .owl-nav .owl-prev {
    left: 30px;
}

.owl-carousel.home-slider .owl-nav .owl-next {
    right: 30px;
}

.home-slider .item {
    background-color: var(--brand);
}

.home-slider .slider-content {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    color: var(--white);
    z-index: 1;
    display: flex;
    /* align-items: center; */
    align-items: start;
    justify-content: center;
}

.home-slider .slider-content .heading {
    font-size: 61px;
    font-weight: 600;
}
.home-slider .slider-content .subheading {
    font-size: 43px;
    font-weight: 600;
}

.home-slider .slider-content .desc {
    font-size: 25px;
}

/* Trading Types */

section.trading-types {
    background-color: #EFFDFF;
    margin-bottom: -6rem;
    padding-bottom: 6rem;

}


.tradingTypes-container .card-brand {
    /* border-radius: 24px; */
    border-radius: 48px !important;
    overflow: hidden;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;
    background-color: transparent !important;
    cursor: pointer;

}
.tradingTypes-container .card-brand .card-img{
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;
}

.tradingTypes-container .card-brand:hover .card-img {
    /* box-shadow: 0px 0px 60px 30px #00000008; */
    
    transform: scale(1.15);

}

.tradingTypes-container .card-brand .card-body {
    padding: 0 !important;

}

.tradingTypes-container .card .card-img-overlay {
    /* position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0; */
    display: grid;
    justify-items: start;
    align-content: space-between;
    padding: 2.5rem 2rem;
    color: var(--white);
    transition: all .25s ease;
}

.tradingTypes-container .card-brand:hover .card-img-overlay {
    background: #0e2e6d75;
}

.tradingTypes-container .card .card-img-overlay .card-title {
    font-size: 30px;
    font-weight: 600;
}

.tradingTypes-container .card .card-img-overlay .card-desc {
    font-size: 20px;
}

/* .tradingTypes-container .card .card-img-overlay .btn {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;
}


.tradingTypes-container .card-brand:hover .btn {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);

} */

/* @keyframes showContent{
    to{
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
} */

/************************ Defintions page ***************************/
.card-rounded-shadow {
    border: 1px solid #E8E8E8;
    box-shadow: 0px 10px 10px 0px #0000000A;
    box-shadow: 0px 20px 25px -5px #0000001A;
    padding: 30px;
    border-radius: 24px;

}

.card-rounded-shadow .heading {
    font-size: 30px;
    font-weight: 600;

}

.card-rounded-shadow .desc {
    font-weight: 500;

}



/* disclaimer */
.page-desc-container {
    margin-top: -1rem;

}

.page-desc-container .main-desc {
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}

.page-desc-container .desc {
    text-align: center;
}

/* terms & conditions */
.card-rounded-border {
    padding: 26px 16px;
    border-radius: 22px;

}

.card-rounded-border .desc {
    font-weight: 500;

}

/************************ Services ***************************/
.sub-banner {
    color: var(--white);
    padding: 2rem;
    border-radius: 1.5rem;
}

.ourClientsWith-container .heading {
    font-size: 24px;
    font-weight: 700;
}

.ourClientsWith-container .card {
    border-radius: 22px !important;
    padding: 10px !important;
}

.ourClientsWith-container .card .desc {
    font-weight: 500;
}

.cardHeadBody.card {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    height: 100%;
}
 .cardHeadBody.card .card-header {
    background-color: inherit !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 2.25px solid var(--bluish-ash);
    padding: 3rem 3rem 2rem 3rem;
    text-align: center;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

 .cardHeadBody.card .card-body {
    padding: 2rem;
}

.cardHeadBody.card .card-body .card-text {
    font-size: 18px;
    font-weight: 500;
}

.trading-types-container .UAE-markets-content .card {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 12px !important;
    height: 100%;
}

.trading-types-container .UAE-markets-content .card .card-header {
    background-color: inherit !important;
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 2.25px solid var(--bluish-ash);
    padding: 3rem 3rem 2rem 3rem;
    text-align: center;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.trading-types-container .UAE-markets-content .card .card-body {
    padding: 2rem;
}

.trading-types-container .UAE-markets-content .card .card-body .card-text {
    font-size: 18px;
    font-weight: 500;

}


.trading-types-container .service-card{
    background-color: #F0F4FA;
}

.trading-types-container .heading {
    color: var(--brand);
    font-size: 28px;
    font-weight: 700;
    /* line-height: 28px; */
    margin-bottom: 1rem;

}

.trading-types-container .main-heading {
    font-size: 36px !important;

}

.trading-types-container .sub-heading {
    font-size: 24px !important;
    font-weight: 600 !important;

}

.trading-types-container .desc {
    color: #000;
    font-size: 22px;
    margin-bottom: 1rem;

}

.trading-types-container .tradingServices-list {
    color: #000;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 1rem;

}

.trading-types-container .requiredDocuments-container .accordion-brand {
    --bs-accordion-bg: var(--bluish-ash) !important
}

.requiredDocuments-container .accordion .box-rounded {
    border: 1px solid #C8D9EE;
    background-color: var(--bluish-ash);
    color: #000;
    gap: 1rem !important;
    padding: 1rem 1.5rem !important;

}

.requiredDocuments-container .accordion .box-rounded .text p {
    /* color: #000 !important; */
    font-weight: 500;
    line-height: 23.04px;

}

.requiredDocuments-container .accordion .box-rounded .icon:last-child {
    transition: inherit;
}

.requiredDocuments-container .accordion .box-rounded:hover .icon:last-child {
    transform: rotate(45deg);
}

.trading-types-container .requiredDocuments-container .accordion-brand .accordion-body {
    padding: 2.25rem !important;
}

.trading-types-container .nav-btns.d-grid.gap-3 {
    margin-right: -55px;
}

/************************ Downloads Page ***************************/
.downloads-container .card .card-title,
.relatedWebsites-container .card .card-title,
.News-container .card .card-title {
    color: var(--brand);
    /* font-size: 30px; */
    font-size: 24px;
    font-weight: 700;
    text-align: center;

}

.downloads-container .card .card-body,
.relatedWebsites-container .card .card-body {
    padding-top: 0 !important;
}

.downloads-container .card .card-header .img-container,
.relatedWebsites-container .card .card-header .img-container {
    /* background-color: var(--bluish-ash); */
    background-color: #F3F8FC;
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 24vh;
    max-height: 24vh;

}

.downloads-container .card .list-group .list-group-item {
    font-size: 16px;
    font-weight: 500;
    display: flex !important;
    align-items: center;
    gap: .75rem;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;
    user-select: none;
}

.downloads-container .card .list-group .list-group-item .icon i {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;
}

.downloads-container .card .list-group .list-group-item:hover .icon i {
    transform: rotate(-90deg);
}

/************************ News Page ***************************/

.News-container .card .card-title {
    font-size: 16px !important;
}

.News-container .card .card-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--light-gray);

}

.News-container .card-brand .icon,
.News-container .card-brand .icon i {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;
}

.News-container .card-brand .icon:hover {
    opacity: 0.85;
    /* border: 1px solid var(--brand); */
}

.News-container .card-brand:hover .icon i {
    -webkit-animation: tada 1.5s ease infinite;
    animation: tada 1.5s ease infinite;
}

.News-items-row:not(.d-none) .tab-content .title-conainer{
    animation: fadeInUp 1000ms ease;
}
.News-items-row:not(.d-none) .tab-content .tab-pane .animate{
    animation: zoomIn 1000ms ease;
}
.News-items-row:not(.d-none) .tab-content .tabBack-btn{
    animation: fadeInLeft 1000ms ease;
}
/* Events */
.News-items-row .title-conainer .sub-title {
    font-weight: 500 !important;

}

/************************ Contact Us Page ***************************/
.contactUs-container .contactDetails-card.card-brand {
    background-color: var(--brand);
    color: var(--white);
    padding: 2rem 1.5rem !important;
}

.contactUs-container .contactDetails-card .card-title {
    font-size: 30px !important;
    font-weight: 600 !important;
}

.contactUs-container .contactDetails-card .card-text {
    /* color: var(--light-gray); */
    color: #93A8E0;
    font-size: 18px;
    font-weight: 600;
}

.contactUs-container .contactDetails-card .contactDetails-list li a {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all .25s ease;
    direction: rtl;
}
.contactUs-container .contactDetails-card .contactDetails-list li p{
    direction:rtl;
}
.contactUs-container .contactDetails-card .contactDetails-list  .num-{
    direction: ltr;
}
.contactUs-container .contactDetails-card .contactDetails-list li .bar{
    color: #4F7CF4;
}

.contactUs-container .contactDetails-card .contactDetails-list li:hover {
    color: var(--cyan);
}

.contactUs-container .contactDetails-card .contactDetails-list li:hover i {
    -webkit-animation: tada 1.5s ease infinite;
    animation: tada 1.5s ease infinite;
}

.contactUs-container .contactDetails-card .contactDetails-list a.btn {
    box-shadow: 0px 0px 14px 0px #0000001F;
}

.contactUs-container .officeTimmings-container .heading {

    color: var(--brand);
    font-size: 20px;
    font-weight: 600;

}

.contactForm-container .card-brand,
.contactForm-container .card-brand .card-body {
    background-color: var(--ash-brand) !important;
    border-radius: 40px !important;
    z-index: 999;

}

.contactForm-container .heading {
    font-size: 30px;
    font-weight: 700;
    color: var(--brand);
}

form.contact-form {
    color: #8D8D8D;
}

form.contact-form input,
form.contact-form textarea {
    background-color: transparent;
    font-size: 14px;
    font-weight: 500;
    border: 0;
    border-bottom: 1px solid #8D8D8D;
    border-radius: 0;
    margin-top: 2rem;
    color: var(--brand);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;


}


label.form-label {
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(50%);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    position: absolute;
    top: 35%;
    /* left: 1em; */
    font-weight: normal;
    cursor: text;
    pointer-events: none;
    font-family: sans-serif;
}

textarea~label.form-label {
    top: 45%;

}

form.contact-form input:focus,
form.contact-form textarea:focus,
form.contact-form input.hascontent {
    background-color: transparent;
    border-bottom: 1px solid var(--brand);
    box-shadow: none !important;

}

form.contact-form.was-validated .form-control:valid {
    background-image: none !important;
    border-color: var(--brand);
}

form.contact-form .form-control:focus~label.form-label,
form.contact-form .form-control.hascontent~label.form-label {
    top: 0;
    font-size: 14px;
    /* padding: 0 .3em; */
    color: var(--brand);
}

/* Custom Form Field Css For Arabic v */
.form-control.is-invalid, .was-validated .form-control:invalid{
    background-position: left calc(.375em + .1875rem) center !important;
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid{
    background-position: top calc(.375em + .1875rem) left calc(.375em + .1875rem) !important;
}


/* Location Map */

section.location-map {
    margin-bottom: -6rem;
}

/* Custom Tab */
.tabs-theme .tab-card {
    background-color: var(--bluish-ash);
    border: 1px solid #CAD7FF;
    border-radius: 18px !important;
}

/* Custom Box */
.box-rounded {
    /* width: 52px; */
    /* height: 52px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px;
    cursor: pointer;
    background-color: #ffffff;
    gap: 0.5rem;
}

/* Contact Now section */
section.contact-now {
    margin-bottom: -6rem;
}

.contactNow-banner .banner {
    border-radius: 0 !important;
    padding: 4rem 2rem !important;
}

.contactNow-banner .banner .heading {
    font-size: 40px;
    font-weight: 700;
}

.contactNow-banner .banner .desc {
    font-size: 26px;
    font-weight: 300;

}

/* .contactNow-banner .banner .contact-details{
    display: flex;
    flex-direction: column;
    align-items: center;
} */
.contactNow-banner .banner .contact-details .phNo {
    font-size: 40px;
    font-weight: 600;
    color: var(--cyan);
    direction: ltr;
}
.contactNow-banner .banner .contact-details .phNo a,
.contactNow-banner .banner .contact-details .mail-id a{
    transition: var(--transition-brand);

}
.contactNow-banner .banner .contact-details .phNo a:hover,
.contactNow-banner .banner .contact-details .mail-id a:hover{
        color: var(--primary);
    }


.contactNow-banner .banner .contact-details .mail-id {
    font-size: 30px;
    font-weight: 300;
    word-wrap: break-word;

}


/* Shades CSS */

.shades{
    display: none;
}
.shade.top-right img {
    position: absolute;
    bottom: 65%;
    top: 0;
    right: 0;
    width: 28%;
    height: 75%;
    z-index: -1;

}

.shade.bottom-left img {
    position: absolute;
    top: 75%;
    bottom: 0;
    left: 0;
    width: 28%;
    height: 65%;
    transform: rotate(180deg);
    z-index: -1;
}
.pattern.bottom-right img {
    position: absolute;
    bottom: 0;
    right: 0;
    /* width: 28%;
    height: 65%; */
    z-index: -1;
}

.shade.top-left img {
    position: absolute;
    bottom: 75%;
    top: 0;
    left: 0;
    width: 28%;
    height: 65%;
    transform: rotate(180deg);
    z-index: -1;
}

.whatsap-link{
    position: fixed;
    display: block;
    bottom: 0;
    z-index: 2;
    padding: 17px;
}
.whatsap-link a img{
    width:100%;
}

/* Trade together-banner */
.trade-together .heading {
    font-size: 48px;
}

/************************ Footer ***************************/

footer {
    background-color: var(--brand) !important;
    color: var(--white) !important;
    margin-top: 6rem !important;
    /* padding: 6rem 0 !important; */
}

.btn-orange i{
    padding:0 10px;
}
.font-size-20{
    font-size: 19px;
    font-weight: 600;
}
.lifont-size-20{
    font-size: 21px;
    font-weight: 600;
}
.list-group-brand .list-group-item{
    cursor: pointer;
}
footer.bd-footer ul li a{
    /* transform: translateX(-20px); */
    /* background: linear-gradient(to right, #0500ffe8, #20bcfff8 50%, #fff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background-size: 200% 100%;
    background-position: 100%; */
    color: #FFF;
    transition:all .25s ease;
    font-size: 21px;

}
.sub-title{
    font-size: 15px;
    margin-top: 23px;
}

footer.bd-footer ul li a:hover{
    color: var(--cyan);
    /* transform: translateX(10px);
    background-position: 0 100%; */
}
/* footer.bd-footer ul li a:before{
    content:"\F138";
    font-family:'bootstrap-icons';
    background: linear-gradient(to right, #0500ffe8, #20bcfff8 50%, #fff 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0, 0, 0, 0);
    background-size: 200% 100%;
    background-position: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
} */
/* footer.bd-footer ul li a:hover:before{
    opacity: 1;
    visibility: visible;
} */

footer .heading {
    font-size: 24px !important;
    font-weight: 600;
    margin-bottom: 1.25rem !important;
    text-transform: capitalize;
}

footer .footer-bottom {
    background: #0B101E;
    color: var(--light-gray);
}




/* custom title for all pages */
.title-conainer {
    margin-bottom: 3rem;
}

.title-conainer .main-heading {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-black);

}

.title-conainer .sub-title {
    /* font-size: 16px; */
    font-size: 20px;
    font-weight: 400;
    margin-top: 1rem;
}


/************************ Custom Bootstap ***************************/

/* Custom Card */
.card.card-brand {
    border-radius: 1.5rem;

}

.card-brand .card-body,
.card-brand.card-body,
.card-brand .card-header {
    padding: 1.5rem !important;
    border-radius: 1.5rem !important;
    background-color: var(--white);
}

.card-brand .card-header {
    border: 0 !important;

}

.card-brand .card-img-top,
.card-brand .img-fluid {
    border-radius: 24px;
}

.card.card-brand .card-title {
    font-size: 24px;
    font-weight: 700;
}

.card-bordered-shadow {
    border: 1px solid #F0F0F0;
    box-shadow: 0px 10px 10px 0px #0000000A;
    box-shadow: 0px 20px 25px -5px #0000001A;

}

.card-shadow {
    border: 0;
    box-shadow: 0px 0px 60px 30px #00000008;


}

/* Tab Custom */
.tabBack-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--brand);
    font-weight: 500;
}

.tabBack-btn .bg-circle-brand {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 21px;
    font-weight: 500;

}

.tabBackBtn-container {
    position: -webkit-sticky !important;
    position: sticky !important;
    bottom: 0 !important;
    /* background-color: #fff; */
    z-index: 999;
    display: none;
}


/* custom accordion */
.accordion-brand {
    --bs-accordion-bg: var(--ash-brand) !important;
    --bs-accordion-btn-icon: none !important;
    --bs-accordion-btn-active-icon: none !important;
    --bs-accordion-btn-padding-x: 2.25rem !important;
    --bs-accordion-btn-padding-y: 2rem !important;
    --bs-accordion-body-padding-x: 2.25rem !important;
    --bs-accordion-body-padding-y: 1.5rem !important;
    --bs-accordion-btn-color: var(--brand) !important;
    --bs-accordion-active-bg: var(--brand) !important;
    --bs-accordion-active-color: var(--white) !important;

}

.accordion-brand .accordion-item {
    border: 1.5px solid var(--white) !important;
}

.accordion-brand .accordion-item .accordion-button {
    /* color: var(--brand) !important; */
    font-size: 22px !important;
    font-weight: 500 !important;
}

.accordion-brand .accordion-item .accordion-button:after {
    font-family: bootstrap-icons !important;
    content: "\F64D";
    font-weight: 600;

}

.accordion-brand .accordion-item .accordion-button:not(.collapsed):after {
    content: "\f63b";

}

.accordion-brand .accordion-button:focus {
    box-shadow: none !important;
}

.accordion-brand .accordion-item:first-of-type,
.accordion-brand .accordion-item:first-of-type .accordion-button {
    border-radius: 18px 18px 0 0 !important;
}

.accordion-brand .accordion-item:last-of-type,
.accordion-brand .accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 0 0 18px 18px !important;
}

.accordion-brand .accordion-item .accordion-body {
    color: var(--light-gray) !important;
    font-size: 18px;

}

/* For arabic version */
.accordion-button::after{
    margin-left: 0;
   margin-right: auto;
}

/* Acc flush */
.accordion-flush.accordion-brand .accordion-item:first-child {
    border-top: 0 !important;
}

.accordion-flush.accordion-brand .accordion-item:last-child {
    border-bottom: 0 !important;
}

.accordion-flush.accordion-brand .accordion-item {
    border-right: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
}

.accordion-flush.accordion-brand .accordion-item .accordion-button,
.accordion-flush.accordion-brand .accordion-item .accordion-button.collapsed {
    border-radius: 0 !important;
}



/* Alert static */

.alert-static.alert {
    background: #F0F3FC;
    padding: 1rem !important;
}

.alert-static.alert .alert-body {
    background: #DDE4F6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.justify-items-center {
    justify-items: center;
}

/* border */
.border-light {
    border-color: var(--bluish-light) !important;
}

.border-transparent {
    border-color: transparent !important
}

/* List group */
.list-group-brand .list-group-item {
    border-color: #C3C3C3 !important;
    padding: 1rem 0 !important;

}

/* Custom List style */
.list-style-dot {
    list-style-image: url('../images/icons/dot.svg');
    /* margin-left: 2rem; */
}


/* custom bg colors */

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

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

.bg-primary {
    background: var(--primary) !important;

}

.bg-light-gray {
    background-color: var(--light-gray) !important;

}


/* custom text colors */
.text-primary {
    color: var(--primary) !important;

}

.text-brand {
    color: var(--brand) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.text-cyan {
    color: var(--cyan) !important;
}

.text-light-gray {
    color: var(--light-gray) !important;

}


/* font */
.font-10 {
    font-size: 10px !important;

}

.font-11 {
    font-size: 11px !important;

}

.font-12 {
    font-size: 12px !important;

}

.font-13 {
    font-size: 13px !important;

}

.font-14 {
    font-size: 14px !important;

}

.font-16 {
    font-size: 16px !important;

}

.font-18 {
    font-size: 18px !important;

}

.font-20 {
    font-size: 20px !important;

}

.font-22 {
    font-size: 22px !important;

}

/* Bootsrap Icon custom */
.bi::before,
[class*=" bi-"]::before,
[class^=bi-]::before {
    font-weight: inherit !important;

}

/* For arabic */
.requiredDocuments-container .accordion .box-rounded .icon .bi-arrow-right::before{
    transform: rotateY(180deg);
}
.bi-arrow-up-right:before,
.lni-arrow-top-right{
    transform: rotateY(180deg);
}

/* rotate */

.rotate-45 {
    transform: rotate(45deg);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

/* boreder radius */
.radius-10 {
    border-radius: 10px !important;
}

.radius-12 {
    border-radius: 12px !important;
}

.radius-24 {
    border-radius: 24px !important;

}


/* Fancy Box custom */
.fancybox__backdrop {
    background: #000000BF !important;
    /* opacity: 1 !important; */

}

.fancybox__container {

    padding-top: 2rem !important;
    margin-left: auto !important;
    margin-right: auto !important;

}

.fancybox__slide.has-image>.fancybox__content {
    border: 6px solid #FFFFFF9E;
    border-radius: 24px;
    overflow: hidden;
}

/* Custom Tooltip */

.custom-tooltip {
    --bs-tooltip-bg: var(--primary);
    --bs-tooltip-color: var(--white);
}

/* Customize Dropdown */
.dropdown-menu-brand .dropdown-item.active, .dropdown-menu-brand .dropdown-item:active{
    background-color:var(--brand);
}

/* Resoonsive */

@media(max-width:1200px) {

    .home-slider .slider-content .heading,
    .legacy-content .main-heding {
        font-size: 56px;
    }
    .home-slider .slider-content .subheading,
    .legacy-content .main-heding {
        font-size: 40px;
    }

    .home-slider .slider-content .desc {
        font-size: 18px;
    }

    .tradingTypes-container .card .card-img-overlay .card-desc{
        font-size: 16px !important;
    }


}

@media(max-width:998px) {
    .mobileAppType-container{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .loading {
        font-size: 70px;
    }

    .home-slider .slider-content .heading {
        font-size: 42px;
    }
    .home-slider .slider-content .subheading{
        font-size: 28px;

    }
    .home-slider .slider-content .desc {
        font-size: 18px;
    }

    /* About Us */
    .banner .heading,
    .trade-together .heading {
        font-size: 32px;

    }

    .contactNow-banner .banner .heading {
        font-size: 32px !important;

    }

    .contactNow-banner .banner .desc {
        font-size: 18px;
    }

    .contactNow-banner .banner .contact-details .phNo {
        font-size: 32px;
    }

    .contactNow-banner .banner .contact-details .mail-id {
        font-size: 20px;
    }
}


@media(max-width:768px) {
    footer.bd-footer ul li a{
        font-size: 14px;
    }
    .lifont-size-20 {
        font-size: 16px;
        font-weight: 600;
    }
    .font-size-20 {
        font-size: 16px;
        font-weight: 600;
    }
    .loading {
        font-size: 50px;
    }
    .lifont-size-20{

    }

    /* .home-slider .slider-content .heading,
    .legacy-content .main-heding {
        font-size: 48px;
    }
    .home-slider .slider-content .subheading{
        font-size: 38px;

    }
    .home-slider .slider-content .desc {
        font-size: 20px;
    } */

    /* Main title responsive */
    .title-conainer .main-heading {
        font-size: 42px;

    }

    .legacy-content .main-heding {
        font-size: 48px;
    }

    .legacy-content .count-row .col:last-child .count-heading {
        flex-direction: column;
        gap: 0rem;
    }
}

@media(max-width:576px) {

    
    .loading {
        font-size: 32px;
    }

    .alert-static.alert{
        padding: 0.5rem 1rem !important;
    }

    header .header-menu{
        margin: 0.5rem auto !important;
    }

    header .header-menu .center-div{
        margin-right: 0 !important;

    }

    section {
        padding-top: 4rem;
    }

    footer {
        margin-top: 4rem !important;
    }
   
    .home-slider .slider-content .heading{
        font-size: 38px;
        margin-bottom: 1rem !important;
    }
    .home-slider .slider-content .subheading{
        font-size: 26px;
        margin-bottom: 1rem !important;

    }

    .home-slider .slider-content .desc {
        font-size: 16px;
    }

    .owl-carousel.home-slider .owl-nav button {
        bottom: 0;
        top: auto !important;
    }

    .owl-carousel.home-slider .owl-nav .owl-prev {
        left: 40%;
    }

    .owl-carousel.home-slider .owl-nav .owl-next {
        right: 40%;
    }

    .owl-carousel .owl-item img.inner-img{
        width: 50%;
    }

    /* Main title responsive */
    .title-conainer .main-heading {
        font-size: 32px;

    }

    .title-conainer .sub-title {
        font-size: 16px;
    }

    .page-desc-container .main-desc {
        font-size: 18px;
    }

    section.trading-types {
        background-color: #EFFDFF;
        margin-bottom: -4rem;
        padding-bottom: 4rem;

    }

    .tradingTypes-container .card .content {
        padding: 2.25rem 1.5rem !important;
    }

    .tradingTypes-container .card .content .card-desc {
        font-size: 18px;
    }

    .tradingTypes-container .card .content .card-title {
        font-size: 28px;
    }

    .legacy-content .count-row .count-heading {
        font-size: 20px;
    }


    .legacy-content .count-row .count-heading span {
        font-size: 32px !important;
    }

    .accordion-brand .accordion-item .accordion-button {
        font-size: 20px !important;
    }

    .accordion-brand .accordion-item .accordion-body {
        font-size: 16px;
    }

    /* About Us */

    .banner .heading,
    .trade-together .heading {
        font-size: 30px;

    }

    .banner .heading .sub-heading {
        font-size: 18px;

    }

    .legacy-content .main-heding {
        font-size: 38px;
    }

    section.about-CEO {
        padding: 4rem 0 !important;
        margin-top: 4rem !important;
    }

    section.mission-and-vision {
        padding: 4rem 0 !important;
        margin-top: 1.5rem !important;
    }

    .mission_vision-container .heading {
        font-size: 32px;
    }

    .card-rounded-shadow .heading {
        font-size: 28px;
    }

    /* services */
    section.contact-now {
        margin-bottom: -4rem;

    }

    .contactNow-banner .banner {
        padding: 3rem 1.5rem !important;
    }

    .contactNow-banner .banner .heading {
        font-size: 32px !important;

    }

    .contactNow-banner .banner .desc {
        font-size: 18px;
    }

    .contactNow-banner .banner .contact-details .phNo {
        font-size: 32px;
    }

    .contactNow-banner .banner .contact-details .mail-id {
        font-size: 20px;
    }

    /* contact Us */
    .contactDetailsContainer-card.card-body {
        padding: 0 !important;
        background-color: transparent;
        box-shadow: none;
    }
    .contactForm-container .card-brand, .contactForm-container .card-brand .card-body{
        border-radius: 24px !important;
    }






}

@media(max-width:425px) {

    header .header-menu{
        gap: 1rem !important;
    }
    .banner {
        padding: 1.5rem;
    }

    .about-CEO-container .heading,
    .trade-together .heading {
        font-size: 28px;
    }

    /* About Us */

    .banner .heading {
        font-size: 28px;

    }

    .banner .heading .sub-heading {
        font-size: 16px;

    }

    .card-rounded-shadow .heading {
        font-size: 22px;
    }

    .card-rounded-border .desc {
        font-size: 14px;
    }



}

/* end */

@media(max-width:767px) {

    .nav-btns.d-grid.gap-3 {
        margin-right: auto !important;
    }

    .downloads-container .card .card-header .img-container,
    .relatedWebsites-container .card .card-header .img-container {
        min-height: 30vh;
        max-height: 30vh;
    }

}

@media(max-width:520px) {

    .about-CEO-container .img-container img {
        position: relative;
        width: 100%;
        right: 0;

    }

    header .right-div .button_container {
        width: 30px !important;
    }

    header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal {
        gap: 1rem
    }

    header .right-div .offcanvas.show .offcanvas-body .menu-div .menu-modal li a {
        font-size: 24px !important;
    }



}

@media(max-width:448px) {

    .requiredDocuments-container .accordion .box-rounded .text p {
        font-size: 14px !important;
    }

    .trading-types-container .requiredDocuments-container .accordion-brand .accordion-body {
        padding: 1.25rem !important;
    }

}

@media(max-width:376px) {

    .requiredDocuments-container .accordion .box-rounded {
        justify-content: start !important;
        flex-wrap: wrap;
        border-radius: 1.5rem !important;
        padding: 1rem !important;

    }


}

/* Custom */
@media (min-width: 1200px) {
    /* .home-slider .slider-content .btn-orange{
        --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    } */

    .card.card-brand .card-title {
        font-size: 24px;
    }
    header .header-menu .left-div a img{
        width: 325px !important;
    }
}

@media (min-width: 992px) {
    .home-slider .slider-content .inner-img {
        width: 75%;
    }
    .legacy-content .count-row .col:not(:last-child){
        border-left: 1px solid #dee2e6;
    }
    .legacy-content .count-row .col{
        padding: 0 1.5rem;
    }
    
}

@media (min-width: 576px) {
    .machineNo-row.row-cols-sm-5>* {
        flex: 0 0 auto !important;
        width: 20% !important;
    }

    .contactUs-container .contactDetails-card {
        padding: 2.5rem 2rem !important;
    }



}

@media (min-width: 375px) {
    .row-cols-xs-3>* {
        flex: 0 0 auto !important;
        width: 33.33333333% !important;
    }

    .d-xs-grid {
        display: grid !important;
    }


}

@media (min-width: 320px) {

    .row-cols-xxs-2>*,
    .machineNo-row.row-cols-xxs-2>* {
        flex: 0 0 auto;
        width: 50%;
    }
}