:root {
    --background: rgba(255, 255, 255, 0.1);
    --color: #b0bbc7;
    --color2: rgba(255, 255, 255, 0.75);
    --primary-rgb: 77, 238, 234;
    --background-rgb: 18, 55, 61;
    --main-gradient-bg: radial-gradient(circle, rgb(var(--background-rgb)) 0%, #121923, #121923 100%);
    --primary-bg-color: rgb(var(--primary-rgb));
    --primary-bg-hover: rgb(var(--primary-rgb));
    --primary-bg-border: rgb(var(--primary-rgb));
    --primary01: rgba(var(--primary-rgb), 0.1);
    --primary02: rgba(var(--primary-rgb), 0.2);
    --primary03: rgba(var(--primary-rgb), 0.3);
    --primary04: rgba(var(--primary-rgb), 0.4);
    --primary05: rgba(var(--primary-rgb), 0.5);
    --primary06: rgba(var(--primary-rgb), 0.6);
    --primary07: rgba(var(--primary-rgb), 0.7);
    --primary08: rgba(var(--primary-rgb), 0.8);
    --primary09: rgba(var(--primary-rgb), 0.9);
    --primary005: rgba(var(--primary-rgb), 0.05);
    --primary-transparentcolor: rgba(var(--primary-rgb), 0.2);
    --secondary-rgb: 249, 248, 113;
    --secondary: rgb(var(--secondary-rgb));
    --secondary-02: rgba(var(--secondary-rgb), 0.2);
    --secondary-03: rgba(var(--secondary-rgb), 0.3);
    --secondary-05: rgba(var(--secondary-rgb), 0.5);
    --secondary-09: rgba(var(--secondary-rgb), 0.9);
    --dark-body: #161b25;
    --dark-theme: #1e232d;
    --app-color-picker: #4deeea;
    --dark: #191f2b;
    --black: #fff;
    --yellow: #ffc102;
    --muted: #9aa5b9;
    --light: #17171c;
    --gray-100: #110f0f;
    --gray-200: #17171c;
    --gray-300: #393946;
    --gray-400: #505062;
    --gray-500: #73738c;
    --gray-600: #8f8fa3;
    --gray-700: #ababba;
    --gray-800: #c7c7d1;
    --gray-900: #e3e3e8;
    --white-1: rgba(0, 0, 0, 0.1);
    --white-2: rgba(0, 0, 0, 0.2);
    --white-3: rgba(0, 0, 0, 0.3);
    --white-4: rgba(0, 0, 0, 0.4);
    --white-5: rgba(0, 0, 0, 0.5);
    --white-6: rgba(0, 0, 0, 0.6);
    --white-7: rgba(0, 0, 0, 0.7);
    --white-8: rgba(0, 0, 0, 0.8);
    --white-9: rgba(0, 0, 0, 0.9);
    --white-05: rgba(0, 0, 0, 0.05);
    --white-08: rgba(0, 0, 0, 0.08);
    --white-75: rgba(0, 0, 0, 0.075);
    --black-1: rgba(255, 255, 255, 0.1);
    --black-2: rgba(255, 255, 255, 0.2);
    --black-3: rgba(255, 255, 255, 0.3);
    --black-4: rgba(255, 255, 255, 0.4);
    --black-5: rgba(255, 255, 255, 0.5);
    --black-6: rgba(255, 255, 255, 0.6);
    --black-7: rgba(255, 255, 255, 0.7);
    --black-8: rgba(255, 255, 255, 0.8);
    --black-9: rgba(255, 255, 255, 0.9);
    --black-03: rgba(255, 255, 255, 0.03);
    --black-05: rgba(255, 255, 255, 0.05);
    --shadow: 0 0 4px rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --card-background: rgba(255, 255, 255, 0.10);
    --border: rgba(var(--primary-rgb), 0.1);
    --float-start: left;
    --float-end: right;
    --form-border: rgba(255, 255, 255, 0.1);
    --bg-hover: rgba(0, 0, 0, 0.2);
    --bg-white: rgba(0, 0, 0, 0.2);
    --bg-active2: #17171c;
    --header-color: rgba(255, 255, 255, 0.5);
    --header-border: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(0, 0, 0, 0.2);
    --menu-color: rgba(255, 255, 255, 0.5);
    --menu-border: rgba(255, 255, 255, 0.1);
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/******variables Declaration******/
/*gradient variables*/
/*gray variables*/
/*shadow variables*/
/*float variables*/
/*white variables*/
/*black variables*/
/*header variables*/
/*menu variables*/
[dir=rtl] {
    --float-start: right;
    --float-end: left;
}

[data-theme-color=light],
[data-theme-color=glassy] {
    --main-gradient-bg: linear-gradient(72deg, #DADDE2, #ffffff 25% 40%, #ffffff 40% 80%, #DADDE2);
    --background-rgb: 241, 241, 241;
    --primary-rgb: 78, 98, 177;
    --color: #5d6162;
    --color2: #7b8191;
    --muted: #7987a1;
    --border: rgba(0, 0, 0, 0.05);
    --form-border: #cdd4e2;
    --gray-100: #f9fafb;
    --gray-200: #f2f4f5;
    --gray-300: #e6eaeb;
    --gray-400: #dbdfe1;
    --gray-500: #949eb7;
    --gray-600: #7987a1;
    --gray-700: #4d5875;
    --gray-800: #383853;
    --gray-900: #323251;
    --white-1: rgba(255, 255, 255, 0.1);
    --white-2: rgba(255, 255, 255, 0.2);
    --white-3: rgba(255, 255, 255, 0.3);
    --white-4: rgba(255, 255, 255, 0.4);
    --white-5: rgba(255, 255, 255, 0.5);
    --white-6: rgba(255, 255, 255, 0.6);
    --white-7: rgba(255, 255, 255, 0.7);
    --white-8: rgba(255, 255, 255, 0.8);
    --white-9: rgba(255, 255, 255, 0.9);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-08: rgba(255, 255, 255, 0.08);
    --white-75: rgba(255, 255, 255, 0.075);
    --black: rgba(0, 0, 0, 1);
    --black-1: rgba(0, 0, 0, 0.1);
    --black-2: rgba(0, 0, 0, 0.2);
    --black-3: rgba(0, 0, 0, 0.3);
    --black-4: rgba(0, 0, 0, 0.4);
    --black-5: rgba(0, 0, 0, 0.5);
    --black-6: rgba(0, 0, 0, 0.6);
    --black-7: rgba(0, 0, 0, 0.7);
    --black-8: rgba(0, 0, 0, 0.8);
    --black-9: rgba(0, 0, 0, 0.9);
    --black-03: rgba(0, 0, 0, 0.03);
    --black-05: rgba(0, 0, 0, 0.05);
    --bg-hover: #f3f3f3;
    --dark-theme: #fff;
    --header-bg: #f1f1f1;
    --menu-bg: #f1f1f1;
    --bg-white: #f9f9f9;
    --secondary-rgb: 187, 186, 66;
}

[data-theme-color=dark] {
    --main-gradient-bg: linear-gradient(rgb(var(--background-rgb)) 0%, #121923, #121923 100%);
    --background-rgb: 20, 20, 20;
    --color: #dde5ed;
    --color2: rgba(255, 255, 255, 0.5);
    --muted: #bcc3d1;
    --border: rgba(255, 255, 255, 0.1);
    --header-bg: #1e232d;
    --menu--bg: #1e232d;
}


body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a {
    text-decoration: none !important;
    color: black
}

 /* Navbar style Sass File Converted to css */
 .nav-container {
    z-index: 10;
    width: 100%;
    margin: 0px auto;
    background-color: white;
    padding: 0px 20px 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 103;
}
.nav-container .fakhama-icon {
    margin-top: 10px;
    padding-bottom: 15px;
}
.nav-container a image {
    margin-top: 10px;
}
.nav-container .nav-link-items {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: flex-end;
    background-color: white;
}
.nav-container .nav-link-element {
    background-color: white;
    padding: 10px 15px;
}
.nav-container .nav-link-element .close-btn {
    text-align: right;
    margin-right: 10px;
    color: #154170;
    margin-bottom: 10px;
}
.nav-container .nav-link-element .close-btn svg {
    height: 24px;
    cursor: pointer;
    position: relative;
    top: -22px;
}
.nav-container .nav-link-element button {
    background-color: #fff;
    color: #194472;
    margin-top: 10px;
}
.nav-container .nav-link-element a.active {
    font-family: "Poppins" !important;
    color: white !important;
    border-bottom: 2px solid transparent;
    margin-right: 2px;
}
.nav-container .nav-link-element a {
    padding: 8px 4px;
    font-weight: bold;
    letter-spacing: 0.2px;
    line-height: 2;
    margin-bottom: 3px;
    margin-right: 4px;
}
.blue-bg {
    display: none;
    padding-top: 10px;
    border-radius: 0px 0px 30px 30px;
    height: 200px;
    width: 100%;
    position: relative;
    background: #061AFF;
    -webkit-box-shadow: 3.801px 12.432px 24px 0px rgb(150 131 225 / 40%);
    box-shadow: 3.801px 12.432px 24px 0px rgb(150 131 225 / 40%);
    top: -2px;
}
.menu-icon-box {
    margin: 10px 0px;
}
.logged-out {
   
    background: #212130 !important;
    border-bottom:1.5px solid white;
}
.logged-out .nav-link-element,
.logged-out .nav-link-items {
    background:transparent;
}

    .logged-out .nav-link-element a,
    .logged-out .nav-link-items a {
        color: white ;
        font-weight: 400;
        border-bottom: 0px solid white;
    }

    .logged-out .nav-link-element a:hover,
    .logged-out .nav-link-items a:hover {
        border-radius: 0 !important;
        border-bottom: 2px solid white;
    }

.logged-out .nav-link-element button {
    background-image: white;
}

.cart-popup-body-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    text-align: center;
}

.cart-body-item {
    min-height: 350px;
    margin-top: 12px;
}

.cart-body-item .cart-image {
    height: 70px;
    padding-right: 15px;
}

.cart-banner {
    display: flex;
    align-items: center;
    margin-top: 12px;
    background-color: white;
    padding: 8px 12px;
}
.nav-link-items a {
    font-size: 0.85rem;
}

.cart-banner img {
    margin-right: 20px;
}


@media (max-width: 1100px) {
    .nav-container {
        width: 100%;
        position: relative;
    }

        .nav-container .nav-link-element {
            display: flex;
            flex-direction: column;
            position: fixed;
            top: 0px;
            right: 0px;
            /*background: -webkit-linear-gradient(45deg, #1044FF 0%, #071DFF 100%) !important;*/
            background:#000 !important;
            box-shadow: 3.801px 12.432px 24px 0px rgb(150 131 225 / 40%);
            height: 100vh;
            width: 300px;
            border-right: 1px solid #adadad;
            z-index: 1000;
        }

            .nav-container .nav-link-element button .button-t {
                display: flex;
            }

    .menu-btn {
        padding: 5px 10px 5px 0px;
    }

    .nav-container .nav-link-element button .button-t svg {
        margin-right: 5px;
    }

    .nav-container .nav-link-element .close-btn {
        margin-bottom: 30px;
    }

    .nav-container .nav-link-element a {
        color: #fff ;
        font-size: 20px;
        font-weight: normal;
        word-spacing: 23;
        font-size: 16px !important;
    }

    .nav-container .nav-link-element a:hover {
        background-color: #c0bfbf;
    }

    .logged-out .nav-link-element a:hover {
        background-color: unset;
    }
}

.dropdown-btn-el {
    align-self: center;
}

 .dropdown-btn-el .dropdown-menu a {
     color: #154170 !important;
     padding-left: 15px !important;
   }

.dropdown-btn-el .btn-secondary {
    background-color: unset !important;
    border: unset;
}

.dropdown-btn-el .dropdown-toggle {
    background-color: unset !important;
    border: unset;
}

@media (max-width: 950px) {
    .nav-container {
        width: 100%;
    }
}
.dropdown-item {
    border: none !important;
    min-width: 5rem !important; 
    padding: 0.5rem 8px !important;
}

@media (max-width: 720px) {
    .nav-container .nav-logo-image {
        height: 24px;
    }

    .nav-container .nav-link-element {
        padding: 10px 5px;
        z-index: 1000;
    }

    .nav-container .nav-link-element a {
        padding: 5px 10px 5px 18px;
    }

    .nav-container .nav-link-element button {
        margin: 5px 10px 5px 45px;
    }

    .cart-banner img {
        width: 100px;
    }
}

.menu-icon-box, .nav-link-element .close-btn {
    display: none;
}

@media (max-width: 1100px) {
    .nav-container {
        width: 100%;
       
    }

    .menu-icon-box {
        display: block;
    }

    .blue-bg {
        display: block;
    }

    .nav-container .nav-link-element {
        z-index: 1000;
        width: 70%;
        display: none;
    }

    .nav-container .nav-link-element .close-btn {
        display: block;
        margin: 30px 30px -16px 30px;
    }

    .nav-container .nav-logo-image {
        height: 45px;
    }

    .nav-container .cart {
        margin-right: 0px;
    }

    .nav-container .nav-link-items {
        justify-content: flex-end;
    }
    .nav-link-element .button-t.tt {
        background-color: #fff;
        color: #000;
        padding: 4px 0 4px 16px !important;
        border-radius: 6px !important;
       /* margin-left: 45px;*/
    }
}
.nav-link-element .button-t.tt {
    background: #ff4141;
    border-radius: 8px;
    color: white;
}
.nav-link-element .button-t.tt:hover {
    border-radius: 8px !important;
}



@media (max-width: 375px) {
    .pdf {
        padding: -1px 20px;
    }

    .logo-img{
        width:320px;
    }

    .pdf-clone {
        position: absolute;
        inset: 0px 0px auto auto;
        transform: translate(-120px, 426px);
    }
    }
}