/*=======================
      font
=========================*/
/*hanno*/
@font-face {
  font-family: 'hanno regular';
  src: url(../fonts/hanno/hannotest-regular.otf);
}

/*Montserrat*/
@font-face {
  font-family: 'Montserrat regular';
  src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
}
@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url(../fonts/Montserrat/Montserrat-SemiBold.ttf);
}
/*popines*/
@font-face {
  font-family: 'Poppins-bold';
  src: url(../fonts/DINNextLTArabic-Bold-4.ttf);
}

@font-face {
  font-family: 'Poppins-SemiBold';
  src: url(../fonts/Poppins/Poppins-SemiBold.ttf);
}

@font-face {
  font-family: 'Poppins-Medium';
  src: url(../fonts/Poppins/Poppins-Medium.ttf);
}

/*arp-font*/
@font-face {
  font-family: 'ArbFONTS-GE_SS_Two';
  src: url(../fonts/GE_SS_Two/ArbFONTS-GE_SS_Two_Medium.otf);
}
/*Roboto*/
@font-face {
  font-family: 'Roboto-Regular';
  src: url(../fonts/Roboto/static/Roboto-Regular.ttf);
}

/*========================
        global
  ========================*/
:root {
  --font-regular: 'hanno regular' !important;
  --font-mont: 'Montserrat regular' !important;
  --font-pop-medium: 'Poppins-Medium' !important;
  --font-semi: 'Poppins-SemiBold' !important;
  --font-bold: 'Poppins-bold' !important;
  --font-arp: 'ArbFONTS-GE_SS_Two' !important;
  --font-robo: 'Roboto-Regular' !important;
  --font-montsemi: 'Montserrat-SemiBold' !important;
  --primary-color: #E7E4DD;
  --secound-color: #F7F7F7;
  --third-color: #545454;
  --forth-color: #737272;
  --text-sign: #111111;
  --color-black: #0C0C0C;
  --color-sr: #62493B;
  --color-fully: #907E6F;
  --color-gift: #ffffff;
  --text-color: #f7f7f7;
  --sup-color: #f9f9f9;
  --card-color: #717276;
  --color-main: #353333;
  --color-arp: #0F1125;
  --color-foot: #67645F;
  --color-sign: #BDBDBD;
  --color-bord: #ADB2C8;
  --color-perf: #070707;
  --color-look: #000000;
  --color-full: #332826;
  --color-luci: #fcfcfc;
  --color-gift: #f1f1f1;
  --color-image: #ffffff;
  --color-ent: #9B9B9B;
  --color-sold: #838383;
  --color-time: #2B2929;
  --color-shop: #f6f6f6;
  --color-feel: #f5f5f5;
  --color-gels: #707070;
  --color-shad: #D9D9D9;
  --color-forg: #111111;
  --color-can: #a4a3a3;
  --color-ceer: #666666;
  --color-skin: #a2a2a2;
  --color-cons: #ECEAE4;
  --color-res: #5E5B5B;
  --color-line: #B7B5B5;
  --color-divi: #DEDEDE;
  --color-free: #907e6f;
  --color-birth: #B9BDCB;
  --color-bery: #646363;
  --color-ropo: #999999;
  --color-canv: #CECACA;
  --color-currancy:#727070;
  --color-canc: #646464;
  --color-acc: #333333;
  --color-crumb: #999;
  --color-brod: #f2f2f2;
  --color-send:#B3A080;
  --font-60: 60px;
  --font-48: 48px;
  --font-42: 42px;
  --font-36: 36px;
  --font-30: 30px;
  --font-26: 26px;
  --font-24: 24px;
  --font-22: 22px;
  --font-20: 20px;
  --font-18: 18px;
  --font-16: 16px;
  --font-14: 14px;
  --font-12: 12px;
  --font-28: 28px;
  --font-21: 21px;
  --font-11: 11px
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-shad {
  background-color: var(--color-shad) !important;
}
.bg-acc{
  background-color: var(--color-acc) !important;
}
.bg-brod{
  background-color: var(--color-bord) !important;
}
.bg-send{
  background-color: var(--color-send) !important;
}
.text-primary {
  color: var(--primary-color) !important;
}

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

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

.text-forth {
  color: var(--forth-color) !important;
}
.text-sign-color {
  color: var(--text-sign) !important;
}
.text-black {
  color: var(--color-black) !important;
}

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

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

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

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

.text-foot {
  color: var(--color-foot);
}

.text-ropo {
  color: var(--color-ropo);
}

.text-sign {
  color: var(--color-sign);
}

.text-bord {
  color: var(--color-bord);
}

.text-pref {
  color: var(--color-perf);
}

.text-luci {
  color: var(--color-luci);
}

.text-gift {
  color: var(--color-gift);
}
.text-ope{
   color: var(--color-look);
   opacity: 56%;
}
.text-look {
  color: var(--color-look);
}

.text-full {
  color: var(--color-full);
}

.text-ent {
  color: var(--color-ent);
}

.text-sold {
  color: var(--color-sold);
}

.text-time {
  color: var(--color-time);
}

.text-perf {
  color: var(--color-perf);
}

.text-gels {
  color: var(--color-gels);
}

.text-forg {
  color: var(--color-forg);
}

.text-ceer {
  color: var(--color-ceer);
}

.text-skin {
  color: var(--color-skin);
}

.text-res {
  color: var(--color-res);
}

.text-bery {
  color: var(--color-bery);
}
.text-canc {
  color: var(--color-canc);
}
.text-acc{
  color: var(--color-acc);
}
.text-crumb{
  color: var(--color-crumb);
}
.border-text-black {
  border-color: var(--text-black) !important;
}

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

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

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

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

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

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


.color-divi {

  border-color: var(--color-divi) !important
}

.color-free {
  border-color: var(--color-free) !important
}

.shadow-bottom-ashen {
  box-shadow: var(--color-shad) !important;
}

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

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

.border-butn-color {
  border-color: var(--color-perf) !important;
}
.border-look{
  border-color: var(--color-look) !important;
}
.text-shadow {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
}
.border-input-bottom {
  border-bottom: 1px solid var(--color-shad);
}
.border-input-bottom:focus-within {
  background-color: #fff !important; 
  border: 1px solid var(--color-shad);
}

.color-currancy {
color: var(--color-currancy);
}
.dropdown-menu.profile[data-bs-popper] {
     width: 350px !important;
}
.dropdown-menu.profile[data-bs-popper] {
    right: auto !important;
    left: -35px !important;
}



body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  overflow-x: hidden !important;
  font-family: var(--font-regular);
}
.nav-pills .shop-padge {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-pills .shop-padge:hover {
  background-color: var(--primary-color) !important; /* الأصفر */
  color: #000 !important; /* يخلي النص واضح */
}
.breadcrumb_content ul li::before {
    position: absolute;
    content: "/";
    right: 0;
    top: 50%;
    transform: translatey(-50%);
}
.modal-footer .bg-fully:hover {
    background-color: yellow; /* أو أي لون أصفر تريده */
    color: black; /* لتغيير لون النص إذا تحب */
    transition: background-color 0.3s ease; /* تأثير سلس */
}
.prod{
  background-color: var(--color-brod);
}
.shop-padge {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.tab-content button{
  float: right !important;
}

.pad-100 {
  padding-bottom: 350px;
  padding-right: 150px;
}

.vh-100 {
  height: 100vh !important;
}

.w-327 {
  width: 327px;
}

.w-538 {
  max-width: 538px;
  width: 100%;
}

.lin-120 {
  line-height: 130%;
}

.lin-18 {
  line-height: 30px;
}

.w-332 {
  max-width: 332px;
  width: 100%;
  height: 96px;
  border-radius: 14px;
}

.elbow {
  max-height: 100%;
  object-fit: contain
}

a {
  text-decoration: none;
}

a:hover {
  color: none;
  cursor: pointer;
}

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

li {
  margin: 0;
  padding: 0;
}

p {
  /* margin: 0; */
  padding: 0;
}

svg:hover {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: var(--color-look);
  border-color: var(--color-look);
}

.hover-white:hover {
  background-color: transparent !important;
  color: var(--color-black);
  transition: all 0.3s ease-in-out;
}

.preview {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-null:hover {
  background-color: var(--color-sign) !important;
  color: #ffffff !important;
  transition: all 0.5s ease-in-out;
}

.hover-black:hover {
  background-color: #332826;
}


.hover-black-white {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  z-index: 1;
}

.hover-black-white::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #332826;
  transition: all 0.4s ease;
  z-index: -1;
}

.hover-black-white:hover::before {
  left: 0;
}

.hover-black-white:hover {
  color: #fff !important;

}

.hover-black-white:hover a,
.hover-black-white:hover p {
  color: #fff !important;
}


.shop-hover:hover {
  color: var(--color-sr);
}

.btn:focus {
  border: 0;
}

input:focus {
  box-shadow: none !important;
  outline: none;
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--color-gift);
  width: 25px;
}

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

.accordion-button:not(.collapsed) {
  color: var(--color-perf) !important;
  background-color: transparent !important;
  border-top-left-radius: none !important;
  border-top-right-radius: none !important;
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 10%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--color-perf);
}

.fw-regular {
  font-family: var(--font-regular);
}

.fw-mont {
  font-family: var(--font-mont);
}

.fw-pop-medium {
  font-family: var(--font-pop-medium);
}

.fw-semi {
  font-family: var(--font-semi);
}

.fw-bold {
  font-family: var(--font-bold);
}

.fw-arp {
  font-family: var(--font-arp);
}

.fw-arp-bold {
  font-family: var(--font-arp-bold);
}
.fw-robo {
  font-family: var(--font-robo);
}
.fw-montsemi{
  font-family: var(--font-montsemi);
}
.fs-60 {
  font-size: var(--font-60);
}

.fs-48 {
  font-size: var(--font-48);
}

.fs-42 {
  font-size: var(--font-42);
}

.fs-36 {
  font-size: var(--font-36);
}

.fs-30 {
  font-size: var(--font-30);
}

.fs-26 {
  font-size: var(--font-26);
}

.fs-24 {
  font-size: var(--font-24);
}

.fs-28 {
  font-size: var(--font-28);
}

.fs-20 {
  font-size: var(--font-20);
}

.fs-22 {
  font-size: var(--font-22);
}

.fs-21 {
  font-size: var(--font-21);
}

.fs-18 {
  font-size: var(--font-18);
}

.fs-16 {
  font-size: var(--font-16);
}

.fs-14 {
  font-size: var(--font-14);
}

.fs-12 {
  font-size: var(--font-12);
}
.fs-11 {
  font-size: var(--font-11);
}

.form-control:focus,
.form-select:focus {
  outline: none;
}

.w-circle {
  width: 140px;
  height: 140px;
}

.shadow-bottom {
  box-shadow: 0px 5px 5px -5px rgba(200, 200, 200, 0.5);
  border-radius: 6px;
}

.form-control:focus {
  background-color: transparent !important;
  box-shadow: none !important;
}

.end-img {
  inset-inline-end: 10px;
}

.max-width716 {
  max-width: 1150px;
  width: 100%;
}

/*========================
        navbar
  ========================*/
.navbar-expand-lg .navbar-nav .nav-link{
  padding-right: 20px;
  padding-left: 20px;
}

.uper-nav {
  width: 310px;
  margin-inline: auto;
}

.uper-nav img {
  max-width: 300px;
  width: 100%;
  margin-inline: auto;
}

nav .nav-link {
  margin-inline-end: 15px;
}

.navbar-nav .nav-link {
  transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link:hover {
  color: #907E6F !important;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler {
  border: none;
}

nav .dropdown-menu[data-bs-popper] {
  top: 100% !important;
  left: -130px !important;
  margin-top: var(--bs-dropdown-spacer);
}

.postion-brand {
  position: absolute;
}

.navbar .dropdown-menu li a img {
  width: 27px;
}


#mainNavbar {
  transition: background-color 0.3s ease;
}

#mainNavbar.scrolled {
  background-color: red !important; /* الخلفية الحمرا */
}
#upNav {
  transition: opacity 0.3s ease, height 0.3s ease;
}

#upNav.hidden {
  opacity: 0;
  height: 0;
  
}
.mainNavbar {
  
position: fixed;
  top: 0px; 
  left: 0;
  right: 0;
  z-index: 1000;
  transition: top 0.3s ease;
  
}
/*========================
        landing
  ========================*/
.m-641 {
  min-height: 641px;
}

.our-product .image {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.our-product .img-prod{
  
  max-width: 200px;
  width: 100%;

}
.filter li a:hover,
.filter li a.active {
    color: #fff !important;
    background-color: #67645e !important;
    text-decoration: none;
}
.filter li a.active label {
    color: #fff !important;
}

/* .page-link:hover{
  color: transparent !important;
} */
/*========================
        Gift
  ========================*/
.gifts {
  min-height: 580px;
  /* background-image: linear-gradient(to left, #f1f1f1 43%, #f5f5f5 43%); */

}

.w-fit {
  width: fit-content;
}

.img-h200 {
  height: 250px;
}

.image-gifts img {
  max-height: 600px;
  height: 100%;
}

.rounded-starts {
  border-radius: 20px 0px 0px 20px;
}

.rounded-ends {
  border-radius: 0px 20px 20px 0px;
}

/*========================
        care
  ========================*/

/*========================
        Products
  ========================*/
.progress-wrapper,
.progress-bar-customer,
.progress-wrapper-takedew,
.progress-wrapper-reserch {
  position: relative;
  height: 10px;
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
  margin-top: 50px;
}

.progress-bar,
.progress-bar-customer,
.progress-bar-takedew,
.progress-bar-reserch {
  width: 390px;
  background: #51565c;
  transition: width 0.5s linear;
  height: 10px;
  border-radius: 25px;
}

#Products img {
  height: 500px;
  object-fit: cover;
  border-radius: 20px;
  position: relative;
}

#Products .owl-nav {
  display: flex;
  position: absolute;
  top: -122px;
  inset-inline-end: 0;
}

#Products .owl-nav img {
  width: 18px;
  height: 18px;
}

#Products .owl-nav .owl-prev,
#Products .owl-nav .owl-next {
  background-color: #E5E5E5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: all 0.3s linear;
}

#Products .owl-nav .owl-prev:hover,
#Products .owl-nav .owl-next:hover {
  background-color: #F3F3F3;
}

#Products .owl-nav .owl-prev:hover img,
#Products .owl-nav .owl-next:hover img {
  filter: invert(67%) sepia(0%) saturate(1293%) hue-rotate(258deg) brightness(112%) contrast(83%);
}

#Products .owl-nav .owl-prev img {
  transform: rotate(180deg);
}

/*========================
        Guess
  ========================*/
.guess .image img {
  /* position: absolute;
  top: -60px;
  right: -80px; */
}

.guess .image .text-overlay {
  color: #fff;
  text-align: center;
  padding-inline: 25px;
}

.h-630 {
  max-height: 740px;
  height: 100%;
  object-fit: fill;
}

.rotate-img {
  transform: rotate(180deg) scale(-1);
  width: 65px;
  margin-inline-end: 10px;
}

.guess-ticket {
  background-image: url(../img/landing/hint.png);
  background-repeat: no-repeat;
  /* background-size: contain; */
  min-height: 213px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  inset-inline-end: -80px;
  width: 100%;
  max-width: 200px;
  top: 104px;
}
.guess textarea{
  outline: none !important;
}
.w-430 {
  max-width: 430px;
  width: 100%;
}

.h-160 {
  height: 160px;
}

.image-arrow {
  position: absolute;
  inset-inline-end: 27%;
  bottom: 25px;
}

.container-cont {
  max-width: 630px;
  width: 100%;
}

/*========================
        customer
  ========================*/
#customer .lama img {
  width: 59px;
}

#customer .card-body img {
  width: 30px;
}

#customer .owl-nav {
  display: flex;
  position: absolute;
  top: -122px;
  inset-inline-end: 0;
}

#customer .owl-nav img {
  width: 18px;
  height: 18px;
}

#customer .owl-nav .owl-prev,
#customer .owl-nav .owl-next {
  background-color: #E5E5E5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: all 0.3s linear;
}

#customer .owl-nav .owl-prev:hover,
#customer .owl-nav .owl-next:hover {
  background-color: #F3F3F3;
}

#customer .owl-nav .owl-prev:hover img,
#customer .owl-nav .owl-next:hover img {
  filter: invert(67%) sepia(0%) saturate(1293%) hue-rotate(258deg) brightness(112%) contrast(83%);
}

#customer .owl-nav .owl-prev img {
  transform: rotate(180deg);
}

#customer .owl-stage {
  display: flex;
}

#customer .owl-item {
  padding: 0 10px;
}

/*========================
        takedew
  ========================*/
#takedew .owl-nav {
  display: flex;
  position: absolute;
  top: -130px;
  inset-inline-end: 0;
}

#takedew .owl-nav img {
  width: 18px;
  height: 18px;
}

#takedew .owl-nav .owl-prev,
#takedew .owl-nav .owl-next {
  background-color: #E5E5E5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: all 0.3s linear;
}

#takedew .owl-nav .owl-prev:hover,
#takedew .owl-nav .owl-next:hover {
  background-color: #F3F3F3;
}

#takedew .owl-nav .owl-prev:hover img,
#takedew .owl-nav .owl-next:hover img {
  filter: invert(67%) sepia(0%) saturate(1293%) hue-rotate(258deg) brightness(112%) contrast(83%);
}

#takedew .owl-nav .owl-prev img {
  transform: rotate(180deg);
}
#takedew .img-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 20px; 
  overflow: hidden;  
}

#takedew .img-wrapper img {
  display: block;
  max-width: 300px;
  max-height: 270px;
  width: 100%;
  height: 100%;
  height: auto;

}

#takedew .img-wrapper .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); 
  opacity: 1; 
  pointer-events: none;
  overflow: hidden;
}



/*========================
        who
  ========================*/
.who {
  min-height: 600px;
  height: 100%;
}

.who img {
  object-fit: cover;
}

/*========================
        caard
  ========================*/
.caard img {
  width: 405px;
}


/*========================
        shop
  ========================*/
.mh-600 {
  min-height: 600px;
}
.shop-padge{
    line-height: 100%;
    padding-bottom: 11px;
    padding-top: 13px;
    min-width: 120px;
    width: 100%;
    height: 42px;
}
/*--------------*/

.shop_toolbar.t_bottom {
    justify-content: center;
    margin-bottom: 0;
    margin-top: 30px;
}
.shop_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e5e5e5;
    padding: 8px 10px;
    margin: 0 0 40px;
}
.pagination ul li {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #f1f1f1;
    border-radius: 3px;
    margin-left: 3px;
}
.pagination ul li.current {
    background: var(--color-fully);
    color: #ffffff;
}
.pagination ul li.next {
    min-width: 40px;
    width: auto;
}
.pagination ul li button {
    background: transparent;
    border: 0;
    border-radius: 3px;
    width: 100%;
}
.pagination ul li button:hover {
    background: var(--primary-color);
    color: #000;
}
/*========================
        footer
  ========================*/

.footer a:hover {
  transition: all 0.3s linear;
  color: var(--color-sr) !important;
}

.footer .image-foot img {
  max-width: 100% !important;
  width: 100%;
}

.w-440 {
  max-width: 440px;
  width: 100%;
}

/*========================
        sign
  ========================*/
.sign .image {
  background-image: url(../img/product/back.png)
}

.accordion-button::after {
  background-image: url(../img/icons/add.svg);
}

.accordion-button:not(.collapsed)::after {
  background-image: url(../img/icons/minus.svg);
}

/*========================
        reserch
  ========================*/
#reserch .owl-nav {
  display: flex;
  position: absolute;
  top: -122px;
  inset-inline-end: 0;
}

#reserch .owl-nav .owl-prev,
#reserch .owl-nav .owl-next {
  background-color: #E5E5E5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  transition: all 0.3s linear;
}

#reserch .owl-nav .owl-prev:hover,
#reserch .owl-nav .owl-next:hover {
  background-color: #F3F3F3;
}

#reserch .owl-nav .owl-prev:hover,
#reserch .owl-nav .owl-next:hover {
  background-color: #F3F3F3;
}

#reserch .owl-nav .owl-prev:hover img,
#reserch .owl-nav .owl-next:hover img {
  filter: invert(67%) sepia(0%) saturate(1293%) hue-rotate(258deg) brightness(112%) contrast(83%);
}

#reserch .owl-nav .owl-prev img {
  transform: rotate(180deg);
}

#reserch .owl-stage {
  display: flex;
}

#reserch .owl-item {
  padding: 0 10px;
}

#reserch .card img {
  height: 220px;
}

/*========================
       myConsumerSwiper
  ========================*/
.myConsumerSwiper .swiper-button-next,
.myConsumerSwiper .swiper-button-prev {
  color: #494444;
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.myConsumerSwiper .swiper-button-next:after,
.myConsumerSwiper .swiper-button-prev:after {

  font-size: 26px;
  font-weight: bold;
}

.myConsumerSwiper .swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 77px);
  right: auto;
}

.myConsumerSwiper .swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 77px);
  left: auto;
}

/*========================
       video
  ========================*/
.img-scale {
  transition: transform 0.5s ease;
  display: block;
  width: 100%;
  transform-origin: center center;
}

.play-btn {
  transition: transform 0.5s ease;
}


.position-relative:hover .img-scale {
  transform: scale(1.1);
}

.position-relative:hover .play-btn {
  transform: scale(0.8);
}

/*========================
         checkout
  ========================*/

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #666;
  font-weight: 500;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--color-divi);
}

.divider:not(:empty)::before {
  margin-right: .75em;
}

.divider:not(:empty)::after {
  margin-left: .75em;
}

/*========================
       cart
  ========================*/

  .focus-color:focus {
    background-color: var(--sup-color) !important;
    border-bottom: var(--color-shad) !important;
  }
  .first-name:focus,
  .last-name:focus {
    background-color: var(--sup-color) !important;
  }
  .city:focus
   {
    background-color: var(--sup-color) !important;
  }
  .city-dd:focus{
    background-color: #ffffff !important;
  }
  .notice{
    position: absolute;
    top: -10px; 
    right: -5px;
  }
 /*========================
       cart
  ========================*/
  .modal-serch:focus{
    background-color: var(--color-feel) !important;
    border-bottom: var(--color-feel);
  }
  .number-input {
    display: inline-flex
;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    font-family: Arial, sans-serif;
}
.number-input button {
    background: white;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 18px;
}
.number-input span {
    padding: 8px 16px;
    font-size: 18px;
    font-weight: bold;
    min-width: 40px;
    text-align: center;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
.number-input button {
    background: white;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    font-size: 18px;
}
.cart-canva .swiper-pagination {
  position: relative;
  margin-top: 5px;  
  text-align: center;
}


.canva-w {
  max-width: 585px;
  width: 100% !important;
}
.offcanvas-header .btn-canva {
  padding-block: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
opacity: 1 !important;
}
.maxw-125 {
  max-width: 125px;
  width: 100%;
}
.w-300 {
  max-width: 300px;
  width: 100%;
}
.custom-arrow {
  transform: rotate(180deg);
  margin-inline-end: 10px;
}
.position-img-cart {
  position: absolute;
}



.table_desc .cart_page table thead tr th {
    border-bottom: 3px solid #ffd54c;
    border-right: 1px solid #f0f0f0;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 10px;
    text-align: center;
}


/*========================
       responsive
  ========================*/

@media(max-width:1500px) {
  :root {
    --font-60: 50px;
    --font-48: 38px;
    --font-42: 32px;
    --font-36: 30px;
    --font-30: 25px;
    --font-26: 23px;
    --font-24: 22px;
    --font-22: 20px;
    --font-20: 18px;
    --font-18: 16px;
    --font-16: 14px;
    --font-14: 12px;
    --font-12: 10px;
    --font-28: 24px;
    --font-21: 19px;
    --font-11: 10.5px;
  }

}

@media screen and (max-width:991px) {
  :root {
    --font-42: 35px;
    --font-36: 30px;
  }

  .m-641 {
    min-height: 520px;
  }

  .navbar-nav .nav-item {
    padding: 2px 0;
  }

  .navbar-nav .nav-link {
    text-align: right !important;
  }

  .postion-brand {
    position: relative;
    display: flex;
    flex: auto;
    left: 0px !important;
    transform: translateX(10px) !important;
    z-index: 4;
  }

  .vh-100 {
    height: 80vh !important;
  }

  .pad-100 {
    padding-bottom: 345px;
    padding-left: 15px;
  }

  .landing {
    min-height: 500px;
    height: 100%;
  }
.landing #posterImage,
.landing #video{
  min-height: 500px;
    object-fit: cover;
}
  .image-land {
    object-fit: fill;
  }

  .img-h200 {
    height: 200px;
    object-fit: cover;
    width: 100%;
    max-width: 100%;
  }



  .sign .image img {
    height: 100%;
    object-fit: cover;
  }

  .care .image img {
    height: 100%;
    object-fit: cover;
  }

  .myConsumerSwiper .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 70px);
    right: auto;
  }

  .myConsumerSwiper .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 70px);
    left: auto;
  }

  .navbar-toggler {
    z-index: 4;
  }

  .navbar-toggler img {
    filter: invert(35%) sepia(10%) saturate(4%) hue-rotate(19deg) brightness(93%) contrast(99%);
  }

  .navbar-collapse {
    position: relative;
    right: -120% !important;
    width: 100%;
    height: 100vh;
    transition: right 0.3s ease-in-out;
    -webkit-transition: right 0.3s ease-in-out;
    -moz-transition: right 0.3s ease-in-out;
    -ms-transition: right 0.3s ease-in-out;
    -o-transition: right 0.3s ease-in-out;
    border-radius: 20px;

  }

  .nav-back {
    background-color: var(--primary-color);
  }

  .navbar-collapse.show {
    right: 0 !important;
    height: 100vh;
    min-height: 100vh;
    position: absolute;
    text-align: center;
    background-color: var(--primary-color);
    top: 0px;
    z-index: 3;
    padding-top: 70px;
    padding-inline: 20px;
  }
.modal-backdrop.fade {
  display: none;
}
.modal {
  background: rgba(0, 0, 0, 0.5);
}
.z-indx {
  z-index: 5 !important;
}
}

@media screen and (max-width:768px) {
  .rounded-starts {
    border-radius: 20px 20px 0px 0px;
  }

.position-img-cart {
  position: relative;
}
  .rounded-ends {
    border-radius: 0px 0px 20px 20px;
  }

  .landing .essential {
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    padding-bottom: 20px;
  }
}

@media screen and (max-width:576px) {
  .media-dropdown {
    inset-inline-end: 50% !important;
    transform: translateX(50%) !important;
  }

  :root {
    --font-36: 27px;

  }

  .w-50 {
    width: 75% !important;
  }

  .w-327 {
    width: 200px;
  }

  .pad-100 {
    padding-bottom: 0px;
    padding-right: 0px;
  }

  .vh-100 {
    height: 80vh !important;
  }

 .mh-600 {
  min-height: 400px;
 }

  .image-arrow {
    position: absolute;
    inset-inline-end: 55%;
    margin-top: 10px;
  }
   .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 10px;
}
  .progress-bar,
  .progress-bar-customer,
  .progress-bar-takedew,
  .progress-bar-reserch
    {
    width: 90px;
    background: #51565c;
    transition: width 0.5s linear;
    height: 10px;
    border-radius: 25px;
  }
  .guess .not-tell {
    padding-bottom: 110px !important;
    padding-right: 20px !important;
  }

  .customer .happy {
    margin-bottom: 95px !important;
  }

  #customer .owl-nav {
    display: flex;
    position: absolute;
    top: -90px;
    inset-inline-end: 0;
  }

  .gift {
    min-height: 530px;
  }

  .guess .do img {
    width: 50px;
  }

  .guess .do {
    display: none !important;

  }
 .who .img-dew{
  width: 250px;
 }
  .guess-ticket {
    inset-inline-end: -15px;
  }

  .myConsumerSwiper .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 30px);
    right: auto;
  }

  .myConsumerSwiper .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 30px);
    left: auto;
  }
  .media-dropdown {
inset-inline-end: 50% !important;
transform: translateX(50%) !important;
  }
  .table{
    overflow-x: scroll;
  }
  .dropdown-menu.profile[data-bs-popper] {
    right: auto !important;
    left: -242px !important;
}
}




.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex
;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #000000 !important;
    text-align: center;
    background: 0 0;
   
    border: 0;
    opacity: .5;
    transition: opacity .15s 
ease;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);  /* يخلي الأيقونة تبان بالأسود بدل الأبيض */
  width: 2rem;
  height: 2rem;
}