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

:root {
   --main: #006A3E;
   --lite: #F3F3F3;
   --ultra-lite: #F9F9F9;
   --placeholder: #ADAFB0;
   --gray: #F3F3F3;
   --gray-txt: #9E9E9E;
   --dark-gray-txt: #2A2A2A;
   --label: #8F95A3;
   --border: #DFDFDF;
   --mid-dark: #929FA5;

   --white: #fff;
   --black: #000000;
   --red: #F50000;

   /* Layout */
   --gutter-x: 7rem;

   --mainOp: 0, 106, 62;
   --whiteOp: 255, 255, 255;
   --blackOp: 0, 0, 0;
   --redOp: 231, 76, 60;
}

* {
   font-family: 'Almarai', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
   transition: .4s all;
   -webkit-transition: .4s all;
   -moz-transition: .4s all;
   -ms-transition: .4s all;
   -o-transition: .4s all;
}

.bi::before {
   line-height: 1.8;
}

html[dir="ltr"] *:not(input) {
   text-transform: capitalize;
}

html {
   font-size: 16px;
   /* للموبايل والشاشات الصغيرة */
   overflow-x: hidden;
   scroll-behavior: smooth;
}

body {
   overflow-y: hidden;
   padding: 0 !important;
   background: #FAFAFA !important;
   direction: rtl;
}

html[dir="ltr"] body {
   direction: ltr;
}

html[dir='rtl'] [type=email],
html[dir='rtl'] [type=number],
html[dir='rtl'] [type=tel],
html[dir='rtl'] [type=url] {
   direction: rtl;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   vertical-align: middle;
   background: transparent;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
   display: block;
}

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

a {
   text-decoration: none;
   color: inherit;
}



.Stars {
   --percent: calc(var(--rating) / 5 * 100%);
   font-size: 1.1rem;
}

.Stars::before {
   content: "★★★★★";
   background: linear-gradient(-90deg, #FA8232 var(--percent), #E6E6E6 var(--percent));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

#loading {
   position: fixed;
   top: 0;
   inset-inline-end: 0;
   width: 100%;
   height: 100%;
   z-index: 999999;
   background-color: #fff;
   display: flex;
   gap: 1rem;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.logo-spinner-wrapper {
   position: relative;
   width: 120px;
   height: 120px;
}

.spinner {
   width: 100%;
   height: 100%;
   border: 5px solid #eee;
   border-top: 5px solid var(--main);
   border-radius: 50%;
   animation: spin 2s linear infinite;
}

.center-logo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 60px;
}

.name-animation {
   text-transform: uppercase;
   font-size: 4rem;
   text-align: center;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   margin: 0;
   background: white;
   position: relative;
   color: #afafaf;
}

.name-animation:before {
   content: attr(data-text);
   position: absolute;
   background: var(--main);
   -webkit-background-clip: text;
   color: transparent;
   background-size: 100% 90%;
   line-height: 0.9;
   clip-path: ellipse(120px 120px at -2.54% -9.25%);
   animation: swing 4s infinite;
   animation-direction: alternate;
   -webkit-animation: swing 4s infinite;
}

@keyframes swing {
   0% {
      -webkit-clip-path: ellipse(120px 120px at -2.54% -9.25%);
      clip-path: ellipse(120px 120px at -2.54% -9.25%);
   }

   50% {
      -webkit-clip-path: ellipse(120px 120px at 49.66% 64.36%);
      clip-path: ellipse(120px 120px at 49.66% 64.36%);

   }

   100% {
      -webkit-clip-path: ellipse(120px 120px at 102.62% -1.61%);
      clip-path: ellipse(120px 120px at 102.62% -1.61%);
   }
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

iframe {
   width: 100%;
   border: 0;
   height: 100%;
}

.modal-backdrop.show {
   display: none !important;
}

.dropdown-menu {
   background-clip: none;
}

.dropdown-item:focus {
   background-color: var(--light-orange);
}


.main-btn,
.main-outline-btn {
   display: inline-block;
   background: var(--main) !important;
   color: var(--white) !important;
   border: 1px solid var(--main) !important;
   font-weight: 500;
   max-width: 100%;
   min-width: 9.375rem;
   text-align: center;
   padding: .5rem .625rem;
   border-radius: 6px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -ms-border-radius: 6px;
   -o-border-radius: 6px;
}

.main-outline-btn {
   background: transparent !important;
   color: var(--main) !important;
}

.form-label {
   font-size: .9rem;
   margin-bottom: 0.5rem;
   color: var(--dark);
   font-weight: 700;
}

.form-label span {
   color: var(--red);
   font-size: 1.2rem;
   font-weight: 800;
}

.form-control {
   border: 1px solid #DFDFDF;
   padding: .625rem .9375rem;
   background-color: var(--white);
   transition: .3s;
   -webkit-transition: .3s;
   -moz-transition: .3s;
   -ms-transition: .3s;
   -o-transition: .3s;
}

.form-control:focus {
   border: 1px solid var(--main) !important;
   box-shadow: none;
}

.form-control+svg {
   position: absolute;
   inset-inline-start: 15px;
   bottom: 15px;
   color: var(--lite);
}

.form-select,
.form-select:focus {
   padding: .375rem .75rem .375rem 2.25rem;
   font-size: 0.8rem;
   font-weight: 400;
   line-height: 1.3;
   background-position: end .75rem center;
   box-shadow: none;
   outline: 0;
}

.form-select {
   font-size: 1.1rem;
   border: 1px solid #DFDFDF;
   padding: 10px 15px;
   background-color: var(--white);
   background-position: start 0.75rem center;
}

.form-select:focus {
   font-size: 1.1rem;
   padding: 10px 15px;
   background-color: var(--white);
   box-shadow: white;
   background-position: start 0.75rem center;
}


.select2-selection {
   border: 1px solid #DFDFDF !important;
   height: 48.75px !important;
   border-radius: 6px !important;
   -webkit-border-radius: 6px !important;
   -moz-border-radius: 6px !important;
   -ms-border-radius: 6px !important;
   -o-border-radius: 6px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
   line-height: 48px !important;
}

.select2-selection:focus {
   border-color: var(--main) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
   height: 45.75px;
   inset-inline-end: 6px !important;
   inset-inline-start: unset !important;
}

.form-check {
   display: flex;
   align-items: center;
   gap: .375rem;
   min-height: 1.5rem;
   padding-inline-start: 0;
   margin-bottom: 0.125rem;
   margin-inline-start: 1.5rem;
}

.form-check .form-check-input {
   margin-inline-end: 0em;
   background-color: var(--ultra-lite);
}

.form-check-input,
.form-check-input:focus {
   float: unset !important;
   margin-inline-end: 0;
   width: 1.4em;
   height: 1.4em;
   box-shadow: none;
}

.form-check-input[type=radio] {
   border-radius: 5px !important;
}

.form-check-input:checked[type=radio],
.accordion-item .form-check-input:checked[type=checkbox] {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29.663' height='37.45' viewBox='0 0 29.663 37.45'%3E%3Cg id='svgexport-6_-_2022-09-12T102525.689' data-name='svgexport-6 - 2022-09-12T102525.689' transform='translate(-4 -0.936)'%3E%3Cpath id='Path_82' data-name='Path 82' d='M12.041,14.133l-1.748,1.748L15.8,21.389l8.6-8.6-1.748-1.748L15.8,17.894Z' transform='translate(1.485 2.385)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A");
   background-repeat: no-repeat no-repeat;
   background-position: center center;
   background-size: cover;
   border: 1px solid #8CBF48;
   background-color: #8CBF48;
}

.accordion-button::after {
    margin-inline-end: unset !important;
    margin-inline-start: auto !important;
}

/* Toggle Button */
.cm-toggle {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    outline: 0;
    cursor: pointer;
}


/* To create surface of toggle button */
.cm-toggle:after {
    content: '';
    width: 54px;
    height: 22px;
    display: inline-block;
    background: rgba(196, 195, 195, 0.55);
    border-radius: 18px;
    clear: both;
}


/* Contents before checkbox to create toggle handle */
.cm-toggle:before {
    content: '';
    width: 26px;
    height: 26px;
    display: block;
    position: absolute;
    left: 0;
    top: -2px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Transition for smoothness */
.cm-toggle,
.cm-toggle:before,
.cm-toggle:after,
.cm-toggle:checked:before,
.cm-toggle:checked:after {
    transition: ease .3s;
    -webkit-transition: ease .3s;
    -moz-transition: ease .3s;
    -o-transition: ease .3s;
}

/* Shift the handle to left on check event */
.cm-toggle:checked:before {
    left: unset;
    right: 0;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Background color when toggle button will be active */
.cm-toggle:checked:after {
    background: #16a085;
}
   

textarea {
   resize: none;
}

::selection {
   color: #fff;
   background-color: var(--main);
}

::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: #808080;
}

:-ms-input-placeholder {
   /* Internet Explorer 10-11 */
   color: var(--lite);
}

::-ms-input-placeholder {
   /* Microsoft Edge */
   color: var(--lite);
}

.pagination {
   align-items: center;
   gap: 1rem !important;
}

.pagination * {
   color: #B1B1B1;
}

.pagination .currunt {
   border-bottom: 2px solid;
}

.pagination {
   margin: 3rem auto 0;
   justify-content: center;
   align-items: center;
   gap: 10px;
   overflow: hidden;
   width: fit-content;
   box-shadow: 0px 3px 6px #B4B4B41C;
   border: 1px solid #EBEBEB;
   border-radius: 35px;
   padding: .5rem 1.5rem;
   background-color: var(--main)
}

.page-item {
   border-radius: 0 !important;
   -webkit-border-radius: 0 !important;
   -moz-border-radius: 0 !important;
   -ms-border-radius: 0 !important;
   -o-border-radius: 0 !important;
   background: transparent;
}

.page-link {
   padding: 0;
   background: transparent;
   border: unset !important;
   color: var(--white);
   display: flex;
   justify-content: center;
   align-items: center;
   width: 30px;
   height: 30px;
   border-radius: 50% !important;
   -webkit-border-radius: 50% !important;
   -moz-border-radius: 50% !important;
   -ms-border-radius: 50% !important;
   -o-border-radius: 50% !important;
   -webkit-border-radius: 50%;
}

.active>.page-link,
.page-link.current {
   background: var(--white);
   color: var(--main) !important;
}

html[dir='ltr'] [class*='bi-chevron-right']::before,
html[dir='ltr'] [class*='bi-chevron-left']::before,
html[dir='ltr'] [class*='fa-arrow-left'],
html[dir='ltr'] [class*='fa-chevron'] {
   transform: rotate(180deg);
}

img {
   width: 100%;
}

.btn,
.btn:focus,
.btn-close,
.btn-close:focus {
   outline: none;
   box-shadow: none;
}

::-webkit-scrollbar {
   width: 0.8rem;
}

::-webkit-scrollbar-track {
   background-color: var(--lite);
}

::-webkit-scrollbar-thumb {
   background-color: var(--main);
   border-radius: 0px;
}

.nice-select-container {
   display: flex;
   flex-direction: column;
}

.nice-select .option {
   text-align: start;
}

.nice-select {
   font-size: 1.1rem;
   padding: 0 15px 10px;
   height: 49px;
   border: 0px solid var(--white);
   background-color: transparent;
   color: var(--mid-dark);
   text-align: start !important;
}

.nice-select.open {
   border: 1px solid var(--orange);
}

.nice-select .current {
   float: inline-start;
}

.nice-select:after {
   inset-inline-start: unset;
   inset-inline-end: 12px;
   top: 50%;
}

.owl-carousel .owl-stage-outer {
   padding: 10px 1px;
   margin: -10px 0;
}

.owl-carousel .owl-stage {
   display: flex;
}

#scroll-top {
   position: fixed;
   bottom: 60px;
   inset-inline-start: calc(var(--gutter-x) / 2);
   width: 3.125rem;
   height: 3.125rem;
   border-radius: 50%;
   color: var(--white);
   background-color: var(--main);
   font-size: 1.5rem;
   line-height: 2px;
   vertical-align: middle;
   z-index: 1000;
   display: flex;
   visibility: hidden;
   justify-content: center;
   align-items: center;
   filter: drop-shadow(2px 4px 6px #00000020);
   transition: all 0.3s;
}

#scroll-top.show {
   visibility: visible;
}

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

.link {
   position: absolute;
   inset: 0;
   z-index: 2;
}

.nice-select .option {
   text-align: start;
   color: #454545;
}

.container-fluid {
   --bs-gutter-x: var(--gutter-x) !important;
}

/* ---------------------------------- */
/*  1. Top Bar Styles  */
/* ---------------------------------- */

.top-bar {
   padding: 0.5rem 0;
   background: var(--lite);
}

.top-bar .nav-link {
   color: var(--black);
}

.top-bar .auth {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
}

.top-bar .auth li a {
   position: relative;
   display: flex;
   width: 2rem;
   height: 2rem;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   color: var(--main);
   font-size: 1.125rem;
   transition: transform 0.2s;
}

.top-bar .auth li a.user {
   background: var(--white);
   box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

}

.top-bar .auth li i::before {
   line-height: 1.8;
}

.top-bar .auth li a:hover {
   transform: translateY(-4px);
   -webkit-transform: translateY(-4px);
   -moz-transform: translateY(-4px);
   -ms-transform: translateY(-4px);
   -o-transform: translateY(-4px);
}

.top-bar .auth li a .count-num {
   border: 1.4px solid var(--main);
   background: var(--lite);
   width: 1.125rem;
   height: 1.125rem;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   font-size: .875rem;
   line-height: normal;
   position: absolute;
   top: -4px;
   inset-inline-start: -1px;
}


/* ---------------------------------- */
/*  3. Bottom Bar Styles  */
/* ---------------------------------- */
.bottom-bar {
   padding: 0.5rem 0;
   background-color: #fefefe;
}

.bottom-bar .logo img,
footer .logo img {
   width: 4.06rem;
}

.search-box {
   display: flex;
   align-items: center;
   flex: 1;
   max-width: 31.25rem;
   height: 3rem;
   border: 1px solid #55CF9C;
   border-radius: 50px;
   position: relative;
   margin: 0 1rem;
   -webkit-border-radius: 10px;
   -moz-border-radius: 50px;
   -ms-border-radius: 50px;
   -o-border-radius: 50px;
}

.bottom-bar .nice-select {
   display: flex;
   align-items: center;
   padding: 0rem 1.125rem;
   padding-inline-start: 2.5rem;
   border-radius: 0;
}


.bottom-bar .nice-select .current {
   color: var(--black);
   font-weight: 500;
   position: relative;
}

.search-box .current::before {
   content: '';
   position: absolute;
   top: 50%;
   height: 55%;
   transform: translateY(-50%);
   inset-inline-end: -0.875rem;
   width: 1px;
   display: block;
   border-inline-start: 1px solid #BBBBBB !important;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
}

.bottom-bar .nice-select:after {
   inset-inline-start: 1.375rem;
   inset-inline-end: unset;
   top: 50%;
   border-bottom: 2px solid #fff;
   border-inline-start: 2px solid #fff;
   width: .3125rem;
   height: .3125rem;
}

.search-box .nice-select::before {
   content: '';
   position: absolute;
   inset-inline-start: 12px;
   inset-inline-end: unset;
   top: 50%;
   transform: translateY(-50%);
   width: 1.5rem;
   height: 1.5rem;
   border-radius: 50%;
   background: var(--main);
}

.search-box input {
   width: 100%;
   height: 100%;
   padding: 0 12px 0 40px;
   border: none;
   background: transparent;
   outline: none;
   position: relative;
}


.search-box button {
   position: absolute;
   inset-inline-end: 0;
   top: 0;
   background: transparent;
   padding: 0 24px;
   height: 100%;
   border: none;
   border-radius: 0 40px 40px 0;
   cursor: pointer;
}

.search-box i {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--main);
}

/* ---------------------------------- */
/*  3. category Bar Styles  */
/* ---------------------------------- */

.category-bar {
   background-color: var(--main);
   padding: 1rem 0;
}

.category-bar .nav-link {
   display: flex;
   color: var(--white);
   align-items: center;
   gap: 10px;
}

.category-bar .nav-link img {
   width: 1.125rem;
}

.category-bar .nav-link.active {
   font-weight: bold;
}

/* ---------------------------------- */
/*   main section Styles  */
/* ---------------------------------- */
.advertisements .card {
   border-radius: 18px;
   background: var(--white);
   border: unset;
   -webkit-border-radius: 18px;
   -moz-border-radius: 18px;
   -ms-border-radius: 18px;
   -o-border-radius: 18px;
}

.advertisements .card .card-body {
   padding-inline: 1.5rem;
}

.advertisements .card .card-body .ad-info {
   color: #636363;
}

.advertisements .card .card-body .ad-info i {
   margin-inline-end: 2px;
}

.advertisements .adv-img img {
   width: 17.5rem;
   object-fit: cover;
   aspect-ratio: 15 / 8;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}
.adv-img .ad-logo{
    object-fit : contain !important
}

/* ---------------------------------- */
/*  ad banner Styles  */
/* ---------------------------------- */
.add-ad-banner {
   background: url('../images/banner.png');
   padding: 4rem 0;
   text-align: center;
}


/* ---------------------------------- */
/*  ad banner Styles  */
/* ---------------------------------- */
.app-img img {
   width: 60%;
   margin: auto;
}


.apps-btns {
   gap: 1rem
}

.apps-btns a {
   background-color: #fff;
   border: 1px solid var(--main);
   display: inline-flex;
   align-items: center;
   justify-content: end;
   padding: .4rem 1.25rem;
   text-align: end;
   transition: .3s;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.apps-btns a.main-btn * {
   color: #fff !important
}

.apps-btns img {
   object-fit: scale-down;
   width: 1.4rem;
   margin-inline-start: .5rem;
   transition: .3s;
   -webkit-transition: .3s;
   -moz-transition: .3s;
   -ms-transition: .3s;
   -o-transition: .3s;
}

.apps-btns span {
   color: var(--main);
   font-weight: 400;
   font-size: .68rem;
   margin-bottom: -3px;
   display: block
}

.apps-btns h5 {
   color: var(--main);
   font-size: 1.1rem;
   margin-bottom: 0;
   font-weight: 700
}

/* ---------------------------------- */
/*  breadcrumb Styles  */
/* ---------------------------------- */
.breadcrumb-wrapper {
   background: url('../images/banner-bredcumb.png');
   background-size: cover;
   padding: 3rem 0;
   margin-bottom: 3rem;
}

.breadcrumb {
   font-weight: 500;
}

.breadcrumb-item a {
   color: #000;
}

.breadcrumb-item.active {
   color: var(--main);
   font-weight: bold;
}


.loading-indicator {
   position: relative;
   width: fit-content;
   margin-inline: auto;
}

.loading-indicator p {
   position: absolute;
   inset: 0;
   background: var(--main);
   color: var(--white) !important;
   padding: 10px 48px;
   display: block;
   text-align: center;
   border-radius: 10px;
   cursor: not-allowed;
   z-index: 1009;
}

/* ---------------------------------- */
/*  carousel Styles  */
/* ---------------------------------- */
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
   position: absolute;
   top: 50%;
   background: var(--main);
   color: var(--white);
   width: 36px;
   height: 36px;
   inset-inline-start: -14px;
   transform: translateY(-50%);
   border-radius: 10px;
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.owl-carousel .owl-nav button.owl-next {
   inset-inline-start: unset;
   inset-inline-end: -14px;
}

/* ---------------------------------- */
/*  products Styles  */
/* ---------------------------------- */
.product {
   height: 100%;
}

/* card */
/* .card {
   background: var(--white);
   border-radius: 4px;
   height: 100%;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
   transition: .5s;
   border: 1px solid var(--border);
   overflow: hidden;
}

*/
.card:hover {
   transform: translateY(-6px);
   -webkit-transform: translateY(-6px);
   -moz-transform: translateY(-6px);
   -ms-transform: translateY(-6px);
   -o-transform: translateY(-6px);
}


/* ---------------------------------- */
/*  Subscribe email  */
/* ---------------------------------- */
.subscribe {
   color: var(--white);
   background: var(--main);
   margin-bottom: 2rem;
}

.subscribe input {
   background: var(--white) !important;
   color: var(--black);
}

.subscribe input::placeholder {
   color: #ADAFB0;
}

.subscribe_btn {
   color: var(--main);
   font-weight: 500;
   padding-inline: 1.5rem;
   background: var(--white);
   font-weight: bold;
}

/* ---------------------------------- */
/*  Footer Styles  */
/* ---------------------------------- */
footer h5 {
   color: var(--main);
   font-size: 1.125rem;
   font-weight: bold;
   margin-bottom: 1.5rem;
}

footer li a {
   color: var(--dark-gray-txt);
   display: inline-block;
   margin-bottom: .9rem;
   width: max-content;
}


p.description {
   font-size: .94rem;
   color: var(--dark-gray-txt);
   text-transform: capitalize;
   margin-bottom: 1rem;
}

.social-icons {
   display: flex;
   gap: 10px;
   margin-top: .5rem;
}


.fav,
.share,
.social-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--main);
   background: var(--white);
   width: 2.5rem;
   height: 2.5rem;
   font-size: 1.125rem;
   box-shadow: 0px 3px 6px #00000029;
   border-radius: 50%;
   transition: .5s;
   -webkit-transition: .5s;
   -moz-transition: .5s;
   -ms-transition: .5s;
   -o-transition: .5s;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   z-index: 9;
}

.fav {
   color: #F50000;
}

.share {
   color: var(--gray-txt);
}

.social-icons a:hover {
   background: var(--main);
   color: var(--white);
   transform: translateY(-4px);
}


/* ---------------------------------- */
/*  single product Styles  */
/* ---------------------------------- */
.sticky-side {
   display: inline-block;
   position: sticky;
   top: 10px;
   height: fit-content;
}

.main-side {
   display: inline-block;
   vertical-align: top;
}


.adv-details {
   background: rgba(var(--mainOp), .05);
   padding: .6rem .875rem;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

.adv-details .card {
   border-radius: 8px;
   transform: unset !important;
   -webkit-transform: unset !important;
   -moz-transform: unset !important;
   -ms-transform: unset !important;
   -o-transform: unset !important;
}

.adv-assets video,
.adv-assets img {
   aspect-ratio: 7/4;
   object-fit: cover;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
   min-height: 100%;
   width: 100%;
}

.slider-counter-wrapper {
   background: var(--main);
   display: flex;
   align-items: center;
   gap: .35rem;
   width: fit-content;
   padding: .25rem .65rem;
   border-radius: 7px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   -ms-border-radius: 7px;
   -o-border-radius: 7px;
   position: absolute;
   top: 1.5rem;
   inset-inline-end: 1rem;
   z-index: 9;
}

.slider-counter-wrapper svg {
   width: 1.45rem;
   height: 1.45rem;
}

.slider-counter {
   display: flex;
   gap: .1rem;
   color: var(--white);
}

.adv-assets .owl-dots {
   position: absolute;
   line-height: 4;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 3px;
   inset-inline-start: 1rem;
   bottom: 1.5rem;
   margin-top: 3rem;
}

.adv-assets .owl-carousel button.owl-dot {
   width: .5rem;
   height: .5rem;
   border-radius: 50%;
   border: 1px solid var(--main);
   background: transparent;
   box-shadow: 0px 3px 6px #00000029;
}

.adv-assets .owl-carousel button.owl-dot.active {
   background: var(--main);
   width: 1.25rem;
   border-radius: 70px;
   -webkit-border-radius: 70px;
   -moz-border-radius: 70px;
   -ms-border-radius: 70px;
   -o-border-radius: 70px;
}

.related-adv .card .row {
   flex-direction: column-reverse;
}

.related-adv .card img {
   width: 100%;
}

.related-adv .card .d-flex:has(.ad-title) {
   justify-content: space-between !important;
}

.user-comment-container {
   margin-bottom: 1rem;
   border: 1px solid #CCCCCC;
   padding: .75rem 1.25rem;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.user-comment-container .user-comment:not(:last-child) {
   margin-bottom: 1rem;
}

.user-comment-container .replaies {
   margin-inline-start: 1.5rem;
   margin-top: 1rem;
}

.user-comment .avatar img {
   width: 2rem;
   aspect-ratio: 1/1;
   object-fit: cover;
   object-position: center;
   border-radius: 50%;
   background-color: rgba(var(--mainOp), .05);
}

.comment-action .main-btn,
.comment-action .main-outline-btn {
   min-width: unset;
   padding: .15rem .75rem !important;
}

.add-comment .form-control {
   border: 1px solid #CCCCCC;
   padding: .75rem 1.25rem;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}


.advertiser-img {
   width: 5rem;
   height: 5rem;
   overflow: hidden;
   box-shadow: 0px 3px 6px #00000029;
   border: 1px solid #FFFFFF;
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}

.advertiser-contacts .ad-contact {
   flex-grow: 1;
   padding: .4rem .5rem;
   text-align: center;
   font-size: 1.25rem;
   border-radius: 8px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -ms-border-radius: 8px;
   -o-border-radius: 8px;
}

.warning-list li {
   position: relative;
   display: flex;
   align-items: center;
   gap: .5rem
}

.warning-list li:not(:last-child) {
   margin-bottom: 1rem;
}

.warning-list li::before {
   content: '\f005';
   font-family: "Font Awesome 7 Free";
   font-weight: 900;
   display: inline-flex;
   color: var(--main);
}

/* --------== advertiser ads page ==-------- */

.copy-text {
   position: relative;
   padding: 10px 8px;
   min-height: 62px;
   display: flex;
   border-radius: 6px;
   justify-content: space-between;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -ms-border-radius: 6px;
   -o-border-radius: 6px;
   border: 1px solid var(--main);
}

.copy-text input.text {
   color: #555;
   border: none;
   outline: 0
}

.copy-text button {
   color: var(--main);
   border: none;
   outline: 0;
   cursor: pointer;
   border-radius: 6px;
   background: var(--white);
}

.copy-text::before {
   content: attr(data-text);
   position: absolute;
   top: -38px;
   inset-inline-end: 0px;
   padding: 6px 14px;
   border-radius: 6px;
   font-size: 14px;
   z-index: 2;
   display: none;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   -ms-border-radius: 6px;
   -o-border-radius: 6px;
}

.copy-text::after {
   content: "";
   position: absolute;
   top: -12px;
   inset-inline-end: 28px;
   width: 10px;
   height: 10px;
   transform: rotate(45deg);
   display: none;
   z-index: 1
}

.copy-text::after,
.copy-text::before {
   color: var(--white);
   z-index: 3;
   background: var(--main);
}

.copy-text.active::after,
.copy-text.active::before {
   display: block;
}

/* --------== add advertise page ==-------- */

.add-advertisment .add-adv-options {
   background: var(--white);
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   padding: 3rem 4rem;
}

.add-advertisment .add-adv-options .add-adv-title {
   font-weight: 600;
   color: #8F95A3;
}

.add-advertisment .add-adv-options .add-adv-subtitle {
   color: #3E3E3E;
}

.add-advertisment .add-adv-options ul li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1.75rem;
   padding-right: 0;
   padding-left: 0;
   font-size: 1.25rem;
   color: #888888;
   position: relative;

}

.add-advertisment .add-adv-options ul li:not(:last-child) {
   border-bottom: 1px solid #8F95A3;

}

.add-advertisment .add-adv-options ul li:hover {
   color: var(--main);
   cursor: pointer;
}

.add-advertisment .add-adv-options ul li:hover p {
   text-decoration: underline;

}

.add-advertisment .add-option {
   display: flex;
   align-items: center;
   gap: .5rem
}

.add-advertisment .add-option img {
   width: 2.5rem;
   opacity: .75;
   filter: grayscale(.85);
   -webkit-filter: grayscale(.85);
}

.add-advertisment li:hover .add-option img {
   opacity: 1;
   filter: grayscale(0);
   -webkit-filter: grayscale(0);
}

.add-advertisment .add-adv-options ul li p .advertisment-icon {
   padding-left: 10px;
}

/* .add-advertisment label {
   color: var(--main);
} */

.add-advertisment .check-size {
   width: 1.1rem;
   height: 1.1rem;
}


.upload__inputfile {
   inset: 0;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   cursor: pointer;
}

.upload__btn-box button {
   background-color: transparent;
   border: 1px solid #dedede;
   width: 100%;
   aspect-ratio: 3/2;
   padding: .7rem;
   border-radius: 4px;
   margin-bottom: 0.85rem;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}


.upload__btn-box .upload_icon {
   width: 3.5rem;
}


.upload__media-wrap {
   display: flex;
   flex-wrap: wrap;
}

.upload__media-wrap img,
.upload__media-wrap video {
   max-width: 100%;
   object-fit: cover;
   aspect-ratio: 1/1;
}

.upload__media-box {
   position: relative;
   height: 100%;
   border-radius: 10px;
   overflow: hidden;
   background: rgba(var(--mainOp), .05);
   display: flex;
   align-items: center;
   justify-content: center;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.upload__media-close {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 10px;
   inset-inline-start: 10px;
   text-align: center;
   line-height: 24px;
   z-index: 2;
   cursor: pointer;
}

.upload__media-close:after {
   content: "\2716";
   font-size: 14px;
   color: white;
}


/* --------== contact page ==-------- */

.contact .accordion-item {
   margin-bottom: 1.25rem;
   border: 1px solid #EEEEEE !important;
   border-radius: 15px;
   overflow: hidden;
}

.contact .accordion-item .accordion-body {
   background: #DCF8C6;
   border-top: 1px solid #d0d0d0 !important;
   color: #636363;
}

.contact .accordion-item .accordion-header {
   border-radius: 15px;
}

.contact .accordion-button {
   font-weight: bold;
   box-shadow: unset !important;
}

.contact .accordion-button:not(.collapsed) {
   background-color: #DCF8C6;
}



/* --------== common que page ==-------- */

.common-que .accordion-item {
   margin-bottom: 1.25rem;
   padding: 1.5rem;
   border: unset !important;
   border-radius: 10px;
   overflow: hidden;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
}

.common-que .accordion-item:has(.accordion-button:not(.collapsed)) {
   background-color: #F2F4FA;

}

.common-que .accordion-item .accordion-body {
   background: #F2F4FA;
   color: #636363;
   padding-top: .5rem;
   background: transparent;
}

.common-que .accordion-item .accordion-header {
   border-radius: 15px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   -ms-border-radius: 15px;
   -o-border-radius: 15px;
   background: transparent;
}

.common-que .accordion-button {
   font-weight: bold;
   box-shadow: unset !important;
   display: flex;
   align-items: center;
   gap: .7rem;
}

.common-que .accordion-button img {
   width: 1.8rem;
}

.common-que .accordion-button:not(.collapsed) {
   background-color: transparent;
}

/* --------== notification page ==-------- */
.notifi_item {
   position: relative;
   background-color: var(--white);
   border-radius: 20px;
   padding: 2rem 2.2rem;
   color: #949494;
   margin-bottom: .8rem;
}

.notifi_item .new {
   width: .5rem;
   aspect-ratio: 1/1;
   background-color: var(--red);
   border-radius: 50%;
   position: absolute;
   top: .9rem;
   inset-inline-end: .9rem;
   transform-origin: center;
   animation: notif-pulse-soft 1.2s ease-in-out infinite;
   will-change: transform, box-shadow, opacity;
   -webkit-animation: notif-pulse-soft 1.2s ease-in-out infinite;
}

@keyframes notif-pulse-soft {
   0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(var(--redOp), .7);
   }

   50% {
      transform: scale(1.01);
      box-shadow: 0 0 8px 6px rgba(var(--redOp), .08);
      -webkit-transform: scale(1.01);
      -moz-transform: scale(1.01);
      -ms-transform: scale(1.01);
      -o-transform: scale(1.01);
   }

   100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(var(--redOp), 0);
   }
}

.notifi_item .notifi_img {
   border: 1px solid #DCDCDC;
   border-radius: 15px;
   width: 6rem;
   height: 4.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.notifi_item .notifi_img img {
   width: 1.8rem;
}

/* --------== products page ==-------- */
.filter {
   border: 1px solid var(--border);
   border-radius: 11px;
   padding: 1.5rem;
   border: 1px solid #E5E5E5;
   border-radius: 11px;
   background: var(--white);
   height: fit-content;
}

.filter .accordion-button {
   font-size: 1.15rem;
}

.accordion-button:not(.collapsed) {
   color: var(--main);
}

.filter .accordion-item,
.filter .accordion-button,
.filter .accordion-body {
   padding-inline: 0 !important;
   background: transparent !important;
   outline: unset !important;
   box-shadow: unset !important;
   border: unset;
}

.filter .accordion-body {
   padding-block: 0;
   max-height: 30vh;
   overflow: auto;
}

.filter .form-check {
   margin-bottom: .75rem !important;
}

#profile_nav,
#filter {
   border: 1px solid var(--main);
   padding: 0.35rem 1rem;
   display: none;
   z-index: 99;
   width: 100%;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   -ms-border-radius: 5px;
   -o-border-radius: 5px;
   background: transparent;
   margin-bottom: 1rem;
}

.filter-header,
.profile-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.75rem;
   padding-bottom: 1.25rem;
   border-bottom: 1px solid #dddddd;
}

/* --------== profile page ==-------- */
.profile-nav .nav {
   border-top: 1px solid rgba(var(--blackOp), .1);
   padding-top: .75rem;
   margin-top: .5rem;
}

.profile-nav .nav-link {
   background: transparent;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: .6rem;
   color: #0A141B;
   padding: .5rem 1rem;
}

.profile-nav .nav-link.active {
   color: var(--main);
   font-weight: bold;
}

.profile-nav .nav-link .p_nav_icon {
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0px 0px 6px #00000029;
   width: 2.14rem;
   height: 2.14rem;
   border-radius: 50%;
   background: var(--white);
   color: var(--gray-txt);
}

.profile-nav .nav-link.active .p_nav_icon {
   background-color: var(--main);
   color: var(--white);
}

.wrapper-box,
.login-form,
.profile-data {
   padding: 3rem 3rem;
   background: #FCFCFC 0% 0% no-repeat padding-box;
   border-radius: 36px;
}

.profile .profile-pic {
   margin: 1rem auto;
   width: 5rem;
   aspect-ratio: 1 / 1;
   border-radius: 50%;
   object-fit: contain;
   box-shadow: 0px 3px 6px #00000029;
   border: 1px solid #FFFFFF;
}

.profile .profile-pic img {
   object-fit: cover;
   height: 100%;
   border-radius: 50%;
}

.profile .profile-pic-icon {
   position: absolute;
   bottom: -8px;
   inset-inline-end: 0px;
   display: flex;
   width: 1.875rem;
   height: 1.875rem;
   border-radius: 50%;
   align-items: center;
   justify-content: center;
   z-index: 1;
   background-color: var(--white);
   color: var(--gray-txt);
   font-size: 0.875rem;
   transition: 0.2s;
   cursor: pointer;
   box-shadow: 0px 3px 6px #00000029;
}

.profile .profile-pic input {
   cursor: pointer !important;
   position: absolute;
   bottom: -8px;
   inset-inline-end: 0px;
   display: flex;
   width: 1.875rem;
   height: 1.875rem;
   border-radius: 50%;
   z-index: 99;
   opacity: 0;
}

.save_img {
   position: absolute;
   bottom: -8px;
   inset-inline-start: 0px;
   display: flex;
   width: 1.875rem;
   height: 1.875rem;
   border-radius: 50%;
   align-items: center;
   justify-content: center;
   z-index: 3;
   background-color: var(--main);
   color: var(--white);
   font-size: 0.875rem;
   transition: 0.2s;
   opacity: 0;
}

.profile-title {
   border-bottom: 1px solid rgba(var(--blackOp), .1);
   padding-bottom: 1rem;
   margin-bottom: 2rem;
}

.profile .input-group {
   background: #FFFFFF 0% 0% no-repeat padding-box;
   border: 1px solid #E9E9E9;
   overflow: hidden;
   border-radius: .4rem;
   -webkit-border-radius: .4rem;
   -moz-border-radius: .4rem;
   -ms-border-radius: .4rem;
   -o-border-radius: .4rem;
   background: var(--white);
}

.profile .input-group * {
   border: unset !important;
   background: transparent;
}

.profile .input-group i,
.profile .input-group .form-control::placeholder {
   color: var(--gray-txt);
}

.profile .input-group:focus-within {
   border-color: var(--main);
}

.profile .input-group .pass i,
.profile .input-group:focus-within i {
   color: var(--main);
}

.advertisements.my_adv .dropdown {
   z-index: 99;
}

.advertisements.my_adv .dropdown-toggle {
   padding: 0 !important;
   border: unset;
   box-shadow: unset;
}

.advertisements.my_adv .dropdown-toggle::after {
   content: unset;
}

.advertisements.my_adv .dropdown-menu.show {
   display: block;
   min-width: 6rem;
   max-width: 4rem;
   background: var(--main);
   text-align: center;
   position: absolute;
   inset: unset !important;
   inset-inline-end: 0px !important;
   top: 0 !important;
   margin: 0px;
   transform: translate3d(-0.8px, 36px, 0px);
}

.advertisements.my_adv .dropdown-menu * {
   color: var(--white);
   font-size: .8rem;
}

/*==-------- login page  --------==*/
.login {
   position: relative;
   background: url('../images/login_bg.png');
   background-size: cover;
   background-position: bottom center;
}

.wrapper-box,
.login-form {
   background: var(--white);
   position: relative;
   width: 50%;
   margin: auto;
}

#verification-input {
   direction: ltr;
   margin: auto;
   margin-bottom: 1.5rem;
   text-align: center;
}

#verification-input>input {
   width: 55px;
   height: 55px;
   margin: 0 6px;
   font-size: 18px;
   border-radius: 12px;
   text-align: center;
   background: transparent;
   border: 1px solid #e9e9e9;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}


.forgot {
   font-size: 12px;
}

/* --------== terms page ==-------- */

.terms p {
   line-height: 1.8;
   color: #353535;
}


/* -------- media -------- */
/* شاشات التابلت */
@media (min-width: 768px) {
   html {
      font-size: 18px;
   }
}

/* الشاشات الكبيرة (لابتوب وديسكتوب) */
@media (min-width: 1200px) {
   html {
      font-size: 17px;
   }

   footer .main-links li {
      width: 40%;
   }

   .advertisements.my_adv .card .card-body>.row {
      flex-direction: row-reverse;
   }

   .advertisements.my_adv .adv-img img {
      width: 8rem;
      aspect-ratio: 5/5;
   }

   .advertiser-ads .advertiser-img {
      width: 75%;
      height: unset;
      aspect-ratio: 1/1;
   }
}

/* الشاشات الأكبر (مثلاً 4K) */
@media (min-width: 1600px) {
   html {
      font-size: 22px;
   }
}

@media (min-width: 2400px) {
   html {
      font-size: 36px;
   }
}

@media (max-width: 998px) {
   :root {
      --gutter-x: 3rem;
   }

   .navbar-collapse {
      position: fixed;
      top: 0;
      bottom: 0%;
      width: 50%;
      inset-inline-end: 0;
      background: var(--main);
      transform: translatex(-100%);
      border-radius: 10px;
      z-index: 9;
      padding: 5rem 2rem;
      box-shadow: 0px 1px 8px #00000054;
   }

   .navbar-collapse.show {
      transform: translatex(0);
      -webkit-transform: translatex(0);
      -moz-transform: translatex(0);
      -ms-transform: translatex(0);
      -o-transform: translatex(0);
   }


   nav .bottom-bar .nav-links {
      gap: 1.4rem;
   }

   button:focus:not(:focus-visible) {
      outline: 0;
      box-shadow: unset;
   }


   .profile-nav,
   .filter {
      display: block;
      width: 400px;
      transform: translate(400px);
      max-width: 80%;
      position: fixed;
      margin-top: 0;
      z-index: 999;
      top: 0;
      right: 0;
      height: 100%;
      padding: 1.5rem;
      border-radius: 0;
      transition: 0.3s;
      background: white;
   }

   .profile-nav.Pnav-toggle,
   .filter.filter-toggle {
      transform: translate(0);
   }

   #profile_nav,
   #filter {
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .wrapper-box,
   .login-form {
      width: 80%;
   }

}

@media (max-width: 768px) {
   footer .logo {
      text-align: center;
   }

   .discover-info img {
      width: 135px;
   }

   .discover-info h3 {
      font-size: 1.3rem;
      margin-bottom: 1rem;
   }
}

@media (max-width: 578px) {

   :root {
      --gutter-x: 1rem;
   }

   .top-nav {
      padding: .5rem 0;
   }

   .top-bar .nav-link {
      font-size: .785rem;
   }

   .top-bar .nav-link,
   .category-bar .nav-link {
      padding-inline: .25rem
   }

   .bottom-bar .search-box {
      margin: 0;
      margin-block: .4rem;
      order: 1;
      flex-grow: 1;
   }

   .advertisements .card .card-body>.row {
      flex-direction: row-reverse;
   }

   .advertisements .card .card-body>.row [class^="col"] {
      order: 2;
   }

   .advertisements .card .card-body>.row .col-12.col-sm-auto {
      order: 1;
   }

   .advertisements .card .card-body {
      padding-inline: .7rem;
   }

   .advertisements .adv-img img {
      width: 100%;
   }

   .advertisements .card .card-body .ad-info div {
      width: 48%;

   }

   .wrapper-box,
   .login-form,
   .profile-data {
      padding: 3rem 1.25rem;
   }

   .wrapper-box,
   .login-form {
      width: 100%;
   }

   /* .bottom-bar {
      padding: 0.5rem 0 1.4rem 0;
   }


   .search-box button {
      padding: 1px 22px;
      background: transparent;
   } */

   .owl-carousel .owl-nav button.owl-next,
   .owl-carousel .owl-nav button.owl-prev {
      inset-inline-start: -5px;

   }

   .owl-carousel .owl-nav button.owl-next {
      inset-inline-start: unset;
      inset-inline-end: -5px;
   }

}