/* -------- used fonts -------- */
/* 1- Tajawal for <p>  */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;700;800;900&display=swap');
/* 2- Neckar for titles  */
@font-face {
   font-family: 'Neckar';
   src: url('../Fonts/Neckar/NeckarFontBold.ttf') format('truetype');
   font-weight: bold;
}
@font-face {
   font-family: 'Neckar';
   src: url('../Fonts/Neckar/NeckarFontRegular.ttf') format('truetype');
   font-weight: normal;
}
/* 3- Elmessiri for all */
@font-face {
   font-family: 'Elmessiri';
   src: url('../Fonts/ELMessiri/ElMessiriBold-vm3ZO.otf') format('truetype');
   font-weight: bold;
}
@font-face {
   font-family: 'Elmessiri';
   src: url('../Fonts/ELMessiri/ElmessiriMedium-K7BOp.otf') format('truetype');
   font-weight: normal;
}
@font-face {
   font-family: 'Elmessiri';
   src: url('../Fonts/ELMessiri/ElmessiriSemibold-2O74K.otf') format('truetype');
   font-weight: 500;
}
@font-face {
   font-family: 'Elmessiri';
   src: url('../Fonts/ELMessiri/ElmessiriRegular-MVYOr.otf') format('truetype');
   font-weight: lighter;
}

/* -------- used colors -------- */
:root {
   --white: #fff;
   --lite: #DBDBDB;
   --ultra-lite: #F9F9F9;
   --gray: #BCBCBC;
   --mint: #56878B;
   --red: #060505;
   --dark-green: #4B7621;
   --mid-dark: #7D7D7D;
   --dark: #303030;
   --black: #000000;
   --red: #e50b4e;
   --yellow: #f7b602;
   --sky: #02c4b2;
   --blue: #0271ab;
}

/* -------- global style -------- */
* {
   font-family: 'Elmessiri', sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}
html[dir="ltr"] *:not(input) {
   text-transform: capitalize;
}
html {
   overflow-x: hidden;
   scroll-behavior: smooth;
}
body {
   overflow-x: hidden;
   padding: 0 !important;
   background: #f3f9f9 !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;
}
p {
   font-size: 16px;
   font-family: 'Tajawal', sans-serif;
}
img {
   width: 100%;
}
::-webkit-scrollbar {
   width: 0.5rem;
}
::-webkit-scrollbar-track {
   background-color: var(--lite);
}
::-webkit-scrollbar-thumb {
   background: var(--yellow);
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}
::selection {
   color: #fff;
   background-color: var(--sky);
}
iframe {
   width: 100%;
   border: 0;
   height: 100%;
}
.dropdown-menu {
   background-clip: none;
}
.dropdown-item:hover {
   color: var(--dark);
   background-color: #ff54164b;
}
/* -------- rotate chevron icon  -------- */
html[dir='ltr'] [class*='bi-chevron']::before,
html[dir='ltr'] [class*='fa-chevron'] {
   transform: rotate(180deg);
}
/* -------- rate stares -------- */
.Stars {
   --percent: calc(var(--rating) / 5 * 100%);
   font-size: 18px;
}
.Stars::before {
   /* content: "★★★★★"; */
   content: "\f005 \f005 \f005 \f005 \f005";
   font-family: fontAwesome;
   background: linear-gradient(-90deg, var(--yellow) var(--percent), #E6E6E6 var(--percent));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
/* -------- toast -------- */
.toast-container .toast-header {
   background: var(--yellow);
   color: #fff;
}
.toast-container .toast {
   background-color: rgb(255 255 255 / 85%);
   text-align: center;
}
.toast-container .toast .main-btn {
   background: var(--yellow) !important;
}
/* -------- site loader -------- */
#loading {
   position: fixed;
   top: 0;
   inset-inline-end: 0;
   width: 100%;
   height: 100%;
   z-index: 999999;
   background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
}
.loader {
   position: relative;
   width: 150px;
   letter-spacing: 2px;
   display: inline-block;
   box-sizing: border-box;
   animation: floating 1s ease-out infinite alternate;
}
.loader::after {
   content: '';
   width: 80%;
   height: 20px;
   background: rgba(0, 0, 0, 0.424);
   position: absolute;
   inset-inline-end: 10%;
   top: 110%;
   filter: blur(4px);
   border-radius: 50%;
   box-sizing: border-box;
   animation: animloader 1s ease-out infinite alternate;
}
/* -------- icon hover animation  -------- */
:not(.pass-input,.input-group, .quantity, .fav ,.bookmark):has(i):hover>i {
   animation: toBottomFromTop .5s forwards;
   -webkit-animation: toBottomFromTop .5s forwards;
}
/* -------- animation keyframes -------- */
@keyframes floating {
   0% {
      transform: translateY(0);
   }

   100% {
      transform: translateY(-25px);
      -webkit-transform: translateY(-25px);
      -moz-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
      -o-transform: translateY(-25px);
   }
}
@keyframes rotate45 {
   0% {
      transform: rotate(0);
   }

   50% {
      transform: rotate(5deg);
   }

   100% {
      transform: rotate(-5deg);
   }
}
@keyframes rt-circle {
   0% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
   }

   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
@keyframes move1 {
   0% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
   }

   50% {
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
   }

   100% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
   }
}
@keyframes move2 {
   0% {
      -webkit-transform: translateX(-20px);
      transform: translateX(-20px);
   }

   50% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
   }

   100% {
      -webkit-transform: translateX(-20px);
      transform: translateX(-20px);
   }
}
@keyframes rt-scale {
   0% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }

   50% {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
   }

   100% {
      -webkit-transform: scale(1);
      transform: scale(1);
   }
}
@keyframes animloader {
   0% {
      transform: scale(0.8);
   }

   100% {
      transform: scale(1.2);
   }
}
@keyframes moveclouds {
   0% {
      margin-inline-start: 2e3px;
   }

   100% {
      margin-inline-start: -2e3px;
   }
}
@keyframes zoom-in-zoom-out {
   0% {
      transform: scale(1, 1);
   }

   50% {
      transform: scale(1.1, 1.1);
   }

   100% {
      transform: scale(1, 1);
   }
}
@keyframes toBottomFromTop {
   49% {
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%);
   }

   50% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      transform: translateY(100%);
   }

   51% {
      opacity: 1;
   }
}
/* -------- btns -------- */
.btn,
.btn:focus,
.btn-close,
.btn-close:focus {
   outline: none;
   box-shadow: none;
}
.main-btn {
   background: var(--red) !important;
   color: var(--white) !important;
   border-radius: 25px;
   display: block;
   width: 100%;
   font-weight: 500;
   text-align: center;
   padding: .4rem;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   -ms-border-radius: 25px;
   -o-border-radius: 25px;
   margin-bottom: 1rem;
}
.main-btn:hover {
   background: var(--sky) !important;
}
.main-outline-btn {
   border: 1px solid var(--red) !important;
   background: transparent;
   color: var(--red) !important;
   border-radius: 25px;
   width: 100%;
   font-weight: 500;
   text-align: center;
   padding: .4rem;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   -ms-border-radius: 25px;
   -o-border-radius: 25px;
   margin-bottom: 1rem;
}
/* -------- form inputs -------- */
.form-label {
   font-size: 14px;
   margin-bottom: 0.5rem;
   color: var(--dark);
   font-weight: 700;
}
.form-label span {
   color: var(--sky);
   font-size: 20px;
   font-weight: 800;
}
.form-control {
   border: 1px solid var(--lite);
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
}
.form-control:focus {
   border: 1px solid var(--lite);
   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 var(--lite);
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
   background-position: start 0.75rem center;
}
.form-select:focus {
   font-size: 1.1rem;
   padding: 10px 15px;
   background-color: var(--white);
   color: var(--mid-dark);
   border: 1px solid var(--sky);
   box-shadow: white;
   background-position: start 0.75rem center;
}
.form-check {
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: 1.5rem;
   padding-inline-start: 0;
   margin-bottom: 0.125rem;
   margin-inline-start: 1.8rem;
}
.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.2em;
   height: 1.2em;
   box-shadow: none;
}
.form-check-input:checked[type=radio] {
   background-color: var(--blue);
   border-radius: 50%;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
}
textarea {
   resize: none;
}
.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;
   background-color: transparent;
   color: var(--mid-dark);
   float: none;
   text-align: start !important;
}
.nice-select .current {
   float: inline-start;
}
.nice-select .list {
   inset-inline: 0;
   min-width: max-content;
}
.nice-select:after {
   inset-inline-start: unset;
   inset-inline-end: 12px;
   top: 50%;
}
::placeholder {
   color: var(--mid-dark);
}
:-ms-input-placeholder {
   color: var(--mid-dark);
}
::-ms-input-placeholder {
   color: var(--mid-dark);
}
/* -------- accordions -------- */
.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 var(--blue);
   background-color: var(--blue);
}
/* -------- pagination -------- */
.pagination {
   align-items: center;
   gap: 1rem !important;
   justify-content: center;
   margin-block: 1rem;
   flex-wrap: wrap;
}
.pagination * {
   color: #707070;
   background: transparent;
   border: none;
}
.pagination .currunt {
   border-bottom: 2px solid;
   color: var(--blue)
}
/* -------- float icons -------- */
#scroll-top {
   position: fixed;
   bottom: 60px;
   inset-inline-start: 60px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   color: var(--white);
   background-color: var(--sky);
   font-size: 24px;
   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;
}
#float {
   position: fixed;
   bottom: 60px;
   inset-inline-end: 60px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   color: var(--white);
   background-color: #25d366;
   font-size: 24px;
   line-height: 2px;
   vertical-align: middle;
   z-index: 1000;
   display: flex;
   justify-content: center;
   align-items: center;
   filter: drop-shadow(2px 4px 6px #00000020);
   transition: all 0.3s;
}
/* -------- global classes -------- */
.mint {
   color: var(--sky);
}
.title {
   font-family: 'Neckar', sans-serif;
   font-weight: bold;
   font-size: 1.8rem;
   padding-inline: .55rem;
   position: relative;
   color: var(--blue);
   width: max-content;
}
.title::before {
   content: url('../images/Pattern/leaves.svg');
   opacity: .15;
   width: 100%;
   position: absolute;
   bottom: 0;
   height: auto;
   border-radius: 4px;
   position: absolute;
   inset-inline-start: 0;
   display: block;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   -ms-border-radius: 4px;
   -o-border-radius: 4px;
}
.title-link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 3rem;
}
.title-link a {
   font-size: 16px;
   font-weight: bold;
   color: var(--blue) !important;
   margin-inline-start: 0px;
   transition: all 0.3s;
}
.title-link a>i {
   margin-inline-start: 2px;
   font-weight: bold;
   color: var(--blue);
}
.link {
   position: absolute;
   inset: 0;
   z-index: 2;
}
.note {
   background: rgba(255, 0, 0, 0.007);
}
.white-bg-wrapper {
   background: var(--white);
   border-radius: 16px;
   padding: 2rem;
   height: 100%;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   -ms-border-radius: 16px;
   -o-border-radius: 16px;
}
/* -------- breadcrumb -------- */
.breadcrumb-wrapper {
   background: url(../images/footer-bottom-shape-3.svg);
   background-size: cover;
   border-radius: 18px;
}
.breadcrumb {
   font-weight: 500;
   border-radius: 18px;
   border: 1px dashed var(--sky);
   background: linear-gradient(to right, rgba(237, 251, 250, 0) 0%, #EDFBFA 100%);
   padding: 3rem;
   margin-bottom: 4rem;
   position: relative;
}
.breadcrumb-wrapper img {
   position: absolute;
   bottom: -8px;
   inset-inline-end: 0;
}
.breadcrumb-item a {
   color: #000;
}
.breadcrumb-item.active {
   color: var(--sky);
   font-weight: bold;
}
/* -------- top nav -------- */
.top-nav {
   padding: 8px 0;
   background: #029e8f;
}
.top-nav ul {
   color: gray;
   display: flex;
   gap: 15px;
   align-items: center;
}
.top-nav li,
.top-nav li a {
   font-size: 14px;
   color: #fff;
   font-weight: normal;
}
.top-nav li i {
   font-size: 18px;
   padding-inline-end: 4px;
}
/* -------- middle nav -------- */
.middle-nav {
   background: #02c4b2;
   padding: .5rem 0;
   border-bottom: 1px solid #d9d9d9;
}
/* 1- logo */
.middle-nav .logo {
   width: 85px;
}
.middle-nav .logo img {
   width: 100%;
}
/* 2- search box */
.middle-nav .nice-select {
   display: flex;
   align-items: center;
   padding: 0px 15px;
   padding-inline-end: 25px;
   border-radius: 0;
   border-width: 0px;
}
.middle-nav .nice-select:after {
   border-color: var(--red);
}
.middle-nav .search-box {
   min-width: 40%;
   max-width: 50%;
   margin: auto;
   display: flex;
   align-self: center;
   height: 50px;
   border-radius: 50px;
   position: relative;
   background: #F8F8F8;
}
.middle-nav .search-box form{
    width: 100%;
    display: flex;
    align-items: center;
}
.middle-nav .search-box .current {
   font-size: 15px;
   font-weight: bold;
   color: var(--red);
}
.middle-nav .search-box .nice-select .option {
   font-size: 15px;
   padding-left: 8px;
   padding-right: 8px;
}
.middle-nav .search-box i {
   font-size: 16px;
   color: #BFBFBF;
   display: contents;
   color: var(--red);
}
.middle-nav .search-box input {
   width: 100%;
   height: 100%;
   padding: 10px;
   font-size: 16px;
   border-radius: 0px;
   background: transparent;
   position: relative;
}
.middle-nav .search-box .nice-select::before {
   content: '';
   color: var(--red);
   position: absolute;
   top: 8px;
   bottom: 8px;
   inset-inline-end: 0;
   width: 1px;
   display: block;
   border-inline-start: 1px solid var(--red) !important;
}
.middle-nav .search-box button {
   position: absolute;
   inset-inline-end: 0px;
   top: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #F8F8F8;
   color: #fff;
   padding: 1px 0px;
   height: 40px;
   width: 40px;
   font-size: 16px;
   border-radius: 40px;
   transform: translate(4.5px, 4.5px);
}
[dir="ltr"] .middle-nav .search-box button{
    transform: translate(-4.5px, 4.5px);
}
/* 3- phone number */
.middle-nav .phone-wrap {
   display: flex;
   align-items: center;
   column-gap: 10px;
   border-radius: 50px;
   color: var(--toyup-white-color);
   border: 1px solid rgba(255, 255, 255, .35);
   background-color: rgba(255, 255, 255, .1);
   padding: 5px 30px 5px;
   color: #fff;
}
.middle-nav .phone-wrap .info-text {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.3;
   display: flex;
   flex-direction: column;
}
.middle-nav .phone-wrap .info-text a {
   color: #fff !important;
}
/* -------- bottom nav -------- */
/* 1- links */
.bottom-nav .nav-links {
   display: flex;
   align-items: center;
   justify-content: center;
}
.bottom-nav .nav-links>li>a {
   color: var(--dark);
   font-size: 18px;
   font-weight: 400;
   padding: 10px 25px;
   padding-inline-start: 0;
   white-space: nowrap;
   position: relative;
   transition: all 0.3s;
}
.bottom-nav .nav-links>li:hover a {
   color: var(--red);
}
.bottom-nav .nav-links>li>a.active {
   color: var(--red);
   font-weight: 600;
}
/* 2- icons */
.bottom-nav .auth {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}
.bottom-nav .auth>li {
   margin: 0px;
}
.bottom-nav .auth>li>a {
   display: flex;
   width: 38px;
   height: 38px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   /* background: #e50b4eab; */
   background: var(--red);
   color: var(--white);
   font-size: 14px;
   font-weight: 400;
   transition: all 0.3s;
   position: relative;
}
.bottom-nav .auth>li>a .count {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
   display: flex;
   width: 18px;
   height: 18px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--yellow);
   color: var(--white);
   font-size: 12px;
   font-weight: bold;
   transform: translate(5px, -5px);
}
html[dir="ltr"] .bottom-nav .auth>li>a .count{
    transform: translate(-5px, -5px);
}
/* for responsive */
.bottom-nav .navbar-toggler {
   padding: 0 !important;
   border: unset !important;
}
.bottom-nav {
   padding: .75rem 0;
   background: #fff;
   box-shadow: 0 12px 12px rgba(0, 80, 191, 3%);
}

/* -------- header -------- */

.banner-slider {
   position: relative;
   margin-top: 3rem;
}
.banner-slider .single-slider {
   display: flex;
   align-items: center;
   justify-content: space-between;
   background-color: var(--yellow);
   border-radius: 24px;
   position: relative;
   overflow: hidden;
}
/*  background cloud shape */
.banner-slider .rt-banner-shape li {
   position: absolute;
}
.rt-banner-shape li:nth-child(1) {
   bottom: 0;
   inset-inline-start: 220px;
}
.banner-slider .rt-banner-shape li:nth-child(2) {
   top: 0;
   inset-inline-start: -18%;
   bottom: auto;
   inset-inline-end: auto;
}
.banner-slider .rt-banner-shape li:nth-child(3) {
   top: 0;
   inset-inline-start: 40%;
}
.banner-slider .rt-banner-shape li:nth-child(4) {
   top: 0;
   inset-inline-end: -18%;
}
/*  1- slider content */
.banner-slider .slider-content {
   position: relative;
   flex: 0 50%;
   z-index: 9;
}
.banner-slider .slider-content .slider-title {
   font-size: 60px;
   font-weight: 700;
   color: var(--white);
   margin-bottom: 20px;
   line-height: 1.1;
}
.banner-slider .slider-content .slider-text {
   color: var(--white);
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 30px;
}
a.button-style-4 {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50px;
   background-color: var(--white);
   font-size: 16px;
   font-weight: 600;
   padding: 17px 30px 15px;
   overflow: hidden;
   line-height: 1;
   z-index: 1;
}
/*  2- slider images */
.banner-slider .slider-image {
   position: relative;
   padding: 30px 70px 0 0;
   align-self: end;
   z-index: 1;
   height: 100%;
}
.banner-slider .slider-image img {
   width: auto;
   height: auto;
   max-width: 316px;
   max-height: 550px;
   border: none;
   border-radius: 0;
   box-shadow: none;
}
/* slider images animated shapes */
.banner-slider .rt-banner-shape2 li {
   position: absolute;
}
.banner-slider .rt-banner-shape2 li:nth-child(1) {
   top: 50%;
   inset-inline-start: 10px;
   animation: move2 3s linear infinite;
   width: 140px !important;
   z-index: -1;
}
.banner-slider .rt-banner-shape2 li:nth-child(2) {
   top: 15px;
   transform: rotateY(180deg);
   inset-inline-start: 30px;
   animation: rt-scale 3s linear infinite;
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
}
.banner-slider .rt-banner-shape2 li:nth-child(2) img {
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
}
.banner-slider .rt-banner-shape2 li:nth-child(3) {
   top: 100px;
   inset-inline-end: 40px;
   animation: move2 3s linear infinite;
   width: 100px !important;
   z-index: -1;
}
.banner-slider .rt-banner-shape2 img {
   width: 100%;
}
/* header dot carousel */
header .owl-carousel .owl-dots {
   position: absolute;
   z-index: 3;
   bottom: 10px;
   inset-inline-end: 50%;
   transform: translate(-50%, 0%);
}
html[dir="ltr"] header .owl-carousel .owl-dots {
   transform: translate(50%, 0%);
}
header .owl-carousel button.owl-dot.active {
   opacity: 1;
}
header .owl-carousel button.owl-dot {
   margin: 0 4px;
   width: 12px;
   height: 12px;
   background: var(--white);
   border-radius: 50%;
   opacity: .5;
}

/* -------- product card -------- */
.product {
   height: 100%;
}
.product .card {
   background: var(--white);
   border: unset;
   border-radius: 12px;
   height: 100%;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
   padding: 12px;
   padding-top: 10px;
   text-align: center;
   transition: .5s;
   overflow: hidden;
}
.product .card:hover {
   transform: translateY(-10px);
}
/* product discount */
.discount {
   position: absolute;
   z-index: 2;
   background: var(--blue) !important;
   width: 48px;
   padding: 7px;
   border-radius: 6px !important;
   -webkit-border-radius: 6px !important;
   -moz-border-radius: 6px !important;
   -ms-border-radius: 6px !important;
   -o-border-radius: 6px !important;
}
/*  fav product */
.fav {
   position: absolute;
   top: 12px;
   inset-inline-end: 15px;
   font-size: larger;
   z-index: 5;
   opacity: 0;
   transition: 1s;
   cursor: pointer;
   background: transparent !important;
}
.card:hover .fav {
   animation: zoom-in-zoom-out .8s ease-out infinite;
   opacity: 1;
}
.card .fav:has(.fa-solid) {
   opacity: 1;
}
.fav i {
   color: var(--red);
   width: 100%;
   height: 100%;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}
/* finished product */
.sold_out{
   top: 1em;
   inset-inline-start: -5.5em;
   color: #fff;
   display: block;
   position: absolute;
   text-align: center;
   text-decoration: none;
   letter-spacing: .06em;
   background-color: var(--red);
   padding: 0.5em 5em 0.5em 5em;
   text-shadow: 0 0 0.75em #444;
   box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
   font: bold 16px / 1.2em ;
   -webkit-text-shadow: 0 0 0.75em #444;
   -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.247);
   -webkit-transform: rotate(45deg) scale(0.75, 1);
   z-index: 10;
}
html[dir="ltr"] .sold_out{
    inset-inline-start: -5em;
   -webkit-transform: rotate(-45deg) scale(0.75, 1);
}
.sold_out:before {
   content: '';
   inset: 0;
   position: absolute;
   margin: -0.3em -5em;
   transform: scale(0.7);
   -webkit-transform: scale(0.7);
   border: 2px rgba(255, 255, 255, 0.7) dashed;
}
/* product image */
.product .card .card-img-top {
   position: relative;
   overflow: hidden;
   object-fit: contain;
   text-align: center;
}
.card-img-top img {
   object-fit: cover;
   margin: auto;
   text-align: center;
   aspect-ratio: 3 / 3;
}
.product .card .card-title p {
   font-size: 1.2rem;
   font-weight: bold;
   margin-bottom: .4rem;
   color: var(--blue);
}
/* product prices */
.card-price {
   color: var(--sky) !important;
   font-weight: bold;
   font-size: 18px;
}
.old-price {
   text-decoration: line-through;
   color: #818181;
}
/* product action */
.product .card-footer {
   position: relative;
   margin-top: .85rem;
   /* margin-bottom: -36px; */
   border: 0;
   padding: 0 !important;
   z-index: 3;
   background: transparent;
}

.product .card:has(.sold_out) .card-footer a,
.product .card:has(.sold_out) .card-footer button{
   background-color: rgb(194, 194, 194) !important;
}
.product .card-footer button,
.product .card-footer a {
   border-radius: 140px !important;
   background-color: var(--red) !important;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
   width: 100%;
   padding: 6px;
}
.product .card-footer button:hover,
.product .card-footer a:hover{
   background-color: var(--sky) !important;
}
/* -------- suggest products -------- */
.suggest .title-link {
   margin-bottom: 1rem;
}
.suggest .product .card {
   margin: 2rem 0rem 0rem 0rem;
}
.suggest .owl-carousel .owl-stage {
   display: flex;
}
.suggest .product {
   padding-bottom: 4rem;
}

/* -------- filter by age -------- */
.age svg {
   width: 100%;
   height: auto;
}
.age .woo-tag-item {
   margin: 2rem 0;
}
.age .woo-tag-item:hover svg {
   animation: rotate45 3s alternate-reverse infinite;
}
.age .rt-tag-title {
   padding: 0 25px;
}
.age .rt-tag-title {
   font-size: 26px;
   font-weight: 600;
   margin-bottom: 3px;
   line-height: 1;
}
.age .rt-tag-shape {
   position: relative;
   display: inline-block;
}
.age .title-count-wrap {
   position: absolute;
   left: 0;
   right: 0;
   text-align: center;
   top: 50%;
   transform: translateY(-50%);
}
.age .rt-tag-title a {
   display: flex;
   flex-direction: column;
   color: var(--white);
   gap: 5px;
}
/* -------- filter by category -------- */
.all_cats .cat {
   position: relative;
   height: calc(100% - 60px);
   background-color: #e50b4e50;
   border-radius: 20px;
   margin-top: 80px;
   padding: 6rem 0 1rem 0;
}
.all_cats :nth-child(2) .cat {
   background-color: #02c4b250;
}
.all_cats :nth-child(3) .cat {
   background-color: #0271ab50;
}
.all_cats :nth-child(4) .cat {
   background-color: #f7b60250;
}
.all_cats .cat .box {
   position: absolute;
   top: 0;
   inset-inline-start: 50%;
   width: 100%;
   transform: translate(50%, -50%);
   -webkit-transform: translate(50%, -50%);
   -moz-transform: translate(50%, -50%);
   -ms-transform: translate(50%, -50%);
   -o-transform: translate(50%, -50%);
   transition: .5s;
   -webkit-transition: .5s;
   -moz-transition: .5s;
   -ms-transition: .5s;
   -o-transition: .5s;
   padding-top: 0;
   max-width: 80%;
   margin-bottom: 1rem;
   margin: auto;
   aspect-ratio: 3 / 3;
   text-align: center;
}
html[dir="ltr"] .all_cats .cat .box{
    transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
   -o-transform: translate(-50%, -50%);
}
.all_cats .cat .box img {
   width: 100%;
   aspect-ratio: 1 / 1;
   filter: drop-shadow(1px 2px 2px#00000010);
   -webkit-filter: drop-shadow(1px 2px2px#00000010);
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -ms-border-radius: 0;
   -o-border-radius: 0;
   transition: all .5s;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
}
.all_cats .cat:hover .box img {
   animation: move1 3s linear infinite;
   -webkit-animation: move1 3s linear infinite;
}
.all_cats .cat .box+p {
   color: #183544;
   font-size: 1.1rem;
   font-weight: bold;
   text-align: center;
   padding-top: 1.5rem;
   padding-inline: 4px;
}
/* -------- banner  -------- */
.discover {
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   overflow: hidden;
}
/* -------- Testimonial cards -------- */
.Testimonial .card {
   background: var(--white);
   border: unset;
   border-radius: 12px;
   height: 100%;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
   padding: 1.5rem;
   /* padding-top: 10px; */
   text-align: center;
   transition: .5s;
   margin-top: 120px;
   margin-inline: 12px;
}
.Testimonial .card .head {
   position: absolute;
   width: 90px;
   top: 0;
   inset-inline: 50%;
   transform: translate(50%, -100%);
   -webkit-transform: translate(50%, -100%);
   -moz-transform: translate(50%, -100%);
   -ms-transform: translate(50%, -100%);
   -o-transform: translate(50%, -100%);
}
html[dir="ltr"] .Testimonial .card .head {
    transform: translate(-50%, -100%);
   -webkit-transform: translate(-50%, -100%);
   -moz-transform: translate(-50%, -100%);
   -ms-transform: translate(-50%, -100%);
   -o-transform: translate(-50%, -100%);
}
.Testimonial .card .hand {
   position: absolute;
   width: 25px;
   top: 25px;
}
.Testimonial .card .hand.hand2 {
   left: -12px;
}
.Testimonial .card .hand.hand1 {
   right: -12px;
}

/* -------- footer -------- */
footer {
   position: relative;
}
/* footer shapes */
.footer-bottom-shape {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 40px;
   transition: all 1.5s ease-in-out;
}
.footer-bottom-shape img {
   height: auto;
}
.rt-shape li {
   position: absolute;
   z-index: 2;
}
.rt-shape1 li:nth-child(1) {
   bottom: 20px;
   left: 35px;
   animation: move1 3s linear infinite;
}
.rt-shape1 li:nth-child(2) {
   bottom: 20px;
   right: 30px;
   animation: move1 3s linear infinite;
}
.rt-shape3 li:nth-child(1) {
   top: 160px;
   inset-inline-start: 0px;
   animation: moveclouds 40s linear infinite;
   -webkit-animation: moveclouds 40s linear infinite;
}
.rt-shape3 li:nth-child(2) {
   right: 0;
   bottom: 10px;
   z-index: -1;
}
.rt-shape3 li:nth-child(3) {
   top: 50px;
   inset-inline-start: 0px;
   animation: moveclouds 55s linear infinite;
   -webkit-animation: moveclouds 55s linear infinite;
}
.rt-shape3 li:nth-child(4) {
   left: 0;
   bottom: 10px;
   z-index: 0;
}

/* footer content */
footer .footer-content {
   background-image: linear-gradient(to top, rgba(237, 251, 250, 0) 0%, #EDFBFA 100%);
   border-radius: 20px;
   padding: 4rem;
   padding-bottom: 200px;
   margin-bottom: 1rem;
   position: relative;
   overflow: hidden;
   box-shadow: 0px 14px 30px #0000001a;
}
/* 1- logo */
footer .footer-content .logo img {
   width: 150px;
   z-index: 4;
   margin-bottom: .5rem;
   position: relative;
}
.logo p {
   font: 16px;
   line-height: 1.4;
   letter-spacing: 0px;
   color: #858585;
   text-transform: capitalize;
}
/* 2- subscribe email */
.subscribe {
   width: 50%;
   margin: auto;
   background: #fff;
   border-radius: 70px;
   -webkit-border-radius: 70px;
   -moz-border-radius: 70px;
   -ms-border-radius: 70px;
   -o-border-radius: 70px;
   margin-bottom: 1.52rem;
}
.subscribe .input-group input.form-control {
   padding-inline-start: 50px;
}
.subscribe .input-group input.form-control:focus {
   border: unset !important;
}
.subscribe .input-group>i {
   position: absolute;
   top: 50%;
   inset-inline-start: 4px;
   color: var(--mid-dark);
   transform: translate(-50%, -50%);
}
html[dir="ltr"] .subscribe .input-group>i{
    transform: translate(50%, -50%);
}
.input-group-text {
   padding: 5px;
}
.subscribe * {
   background: transparent !important;
   border: none;
}
.subscribe_btn {
   color: var(--white);
   background-color: var(--yellow) !important;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   font-weight: 500;
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   transition: all .5s;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -ms-transition: all .5s;
   -o-transition: all .5s;
}
.subscribe_btn:hover {
   background-color: var(--sky) !important;
}
/* 3- social links */
.social-icons {
   display: flex;
   gap: 10px;
   margin-top: .5rem;
}
.social-icons a {
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--sky);
   border: 1px solid #00572D10;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   transition: .5s;
   -webkit-transition: .5s;
   -moz-transition: .5s;
   -ms-transition: .5s;
   -o-transition: .5s;
}
.social-icons a:hover {
   background: var(--sky);
   color: #fff;
}
/* 4-links */
footer h5 {
   position: relative;
   color: var(--red);
   font-size: 1.6rem;
   font-weight: bold;
   margin-bottom: 1rem;
   padding-inline-start: 4px;
}
footer h5::before {
   content: url('../images/Pattern/tree.svg');
   width: 20px;
   display: inline-grid;
   position: absolute;
   top: 50%;
   inset-inline-start: -20px;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   -o-transform: translateY(-50%);
}
footer li a {
   color: #858585 !important;
   display: inline-block;
   margin-bottom: 1rem;
}
/* 5- copy right */
.rights {
   position: relative;
   background: var(--sky);
   color: var(--white);
   text-align: center;
   padding: .5rem;
   font-weight: lighter;
}

/* --------== product details page ==-------- */
.all {
   width: 100%;
   height: auto;
   display: inline-block;
   position: relative;
}
.all .slider {
   width: auto;
   height: auto;
   overflow: hidden;
   border-radius: 3px;
   border: 1px solid var(--light);
   border-radius: 10px;
   position: relative;
}
.all .slider .owl-nav,
.all .slider .owl-dots {
   display: none;
}
.all .slider:hover .left {
   visibility: visible;
   opacity: 1;
   left: 20px;
}
.all .slider:hover .right {
   visibility: visible;
   opacity: 1;
   right: 20px;
}
.all .slider .item-box {
   overflow: hidden;
   width: 100%;
   height: 400px;
   position: relative;
   background-size: cover;
   border-radius: 10px;
   background: #fff;
}
.all .slider .item-box:after {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: absolute;
   content: "";
   display: block;
}
.all .slider .left {
   position: absolute;
   z-index: 1;
   top: 167px;
   left: -20px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   visibility: hidden;
   opacity: 0;
   transition: left ease .25s;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   background: url(http://svgshare.com/i/2V9.svg) top left;
}
.all .slider .left:hover {
   visibility: visible;
   opacity: 1;
   left: 20px;
   background: url(http://svgshare.com/i/2UW.svg) top left;
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}
.all .slider .left.nonl {
   left: -20px;
   opacity: 0;
   visibility: hidden;
}
.all .slider .right {
   cursor: pointer;
   position: absolute;
   z-index: 1;
   top: 167px;
   right: -20px;
   width: 40px;
   height: 40px;
   visibility: hidden;
   opacity: 0;
   transition: right ease .25s;
   background: url(http://svgshare.com/i/2V9.svg) top left;
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
}
.all .slider .right:hover {
   visibility: visible;
   opacity: 1;
   right: 20px;
   background: url(http://svgshare.com/i/2UW.svg) top left;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
}
.all .slider .right.nonr {
   right: -20px;
   opacity: 0;
   visibility: hidden;
}
.all .slider-two {
   width: auto;
   height: auto;
   overflow: hidden;
   position: relative;
   right: 0;
   bottom: 0;
   width: 100%;
   padding: 0;
   z-index: 1;
}
.all .slider-two .owl-nav,
.all .slider-two .owl-dots {
   display: none;
}
.all .slider-two:hover .left-t {
   visibility: visible;
   opacity: 1;
   left: 20px;
}
.all .slider-two:hover .right-t {
   visibility: visible;
   opacity: 1;
   right: 20px;
}
.all .slider-two .item {
   transition: all ease .25s;
   height: 75px;
   border: solid 2px transparent;
   cursor: pointer;
   border-radius: 5px;
   background: #fff;
}
.all .slider-two .item.active {
   border: solid 1px var(--red);
}
.all .slider-two .owl-stage {
   padding: 15px 0 30px;
}
.all .slider-two .left-t {
   cursor: pointer;
   position: absolute;
   z-index: 1;
   top: 38px;
   visibility: hidden;
   opacity: 0;
   transition: all ease .25s;
   width: 35px;
   height: 35px;
   left: -40px;
   background-color: #2b2b2b;
   border-radius: 100%;
   text-align: center;
   line-height: 35px;
   color: #fff;
   font-size: 16px;
}
.all .slider-two .left-t:hover {
   background-color: var(--yellow);

}
.all .slider-two .left-t.nonl-t {
   left: -40px;
   opacity: 0;
   visibility: hidden;
}
.all .slider-two .right-t {
   cursor: pointer;
   position: absolute;
   z-index: 1;
   top: 38px;
   right: -40px;
   visibility: hidden;
   opacity: 0;
   transition: all ease .25s;
   width: 35px;
   height: 35px;
   background-color: #2b2b2b;
   border-radius: 100%;
   text-align: center;
   line-height: 35px;
   color: #fff;
   font-size: 16px;
}
.all .slider-two .right-t:hover {
   background-color: var(--yellow);
}
.all .slider-two .right-t.nonr-t {
   right: -40px;
   opacity: 0;
   visibility: hidden;
}
.all .offer-badge {
   position: absolute;
   left: 0;
   top: 0;
}
.all .offer-badge span {
   left: 7px;
}
.all .slider .item-box img {
   width: 100%;
   height: 100%;
   object-fit: scale-down;
}
.all .slider-two .item img {
   width: 100%;
   height: 100%;
   object-fit: scale-down;
}
.all .slider-two .right-t i,
.all .slider-two .left-t i {
   font-size: 20px;
   text-align: center;
   vertical-align: sub;
}
/*  product details*/
.product_details .discount {
   top: 6px;
   inset-inline-start: 6px;
}
.product_details .p_img img {
   height: 100%;
   border-radius: 22px;
   object-fit: cover;
   border: 1px solid #CECECE;
   position: relative;
}
.cart-product-name h5 {
   color: var(--red);
   font-size: 26px;
}
.product_details p {
   color: #4b4b4b;
   margin-top: .65rem;
   line-height: 1.4;
}
.product_details .fav{
   opacity: 1;
}
.product_details .fav:hover {
   animation: zoom-in-zoom-out .8s ease-out infinite;
   -webkit-animation: zoom-in-zoom-out .8s ease-out infinite;
}
.product-info {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin: 2rem 0 2rem 0;
}
/* product prices */
.product_details .p_price {
   display: flex;
   align-items: center;
   gap: .8rem;
   padding: .75rem 0;
}
.product_details .p_price .old {
   text-decoration: line-through;
   color: #7B7B7B;
}
/* product count */
a.quantity {
   padding: 3px 15px;
   border: 1px solid var(--red);
   font-size: 12px;
   line-height: 0px;
   color: var(--red);
   border-radius: 25px;
   transition: all 0.3s;
   -webkit-border-radius: 25px;
   -moz-border-radius: 25px;
   -ms-border-radius: 25px;
   -o-border-radius: 25px;
}
a.quantity:hover {
   background-color: var(--red);
   color: var(--white);
}
.qty {
   font-size: 18px;
   width: 30px;
   background-color: transparent;
   text-align: center;
   vertical-align: middle;
   color: var(--dark);
}
/* product-tabs */
.product_details .nav-tabs {
   width: max-content;
   border: none;
   margin: 2rem 0;
   gap: 1rem;
}
.product_details .nav-tabs .nav-link {
   color: var(--black);
   font-size: 20px;
   border: unset;
}
.product_details .nav-tabs .nav-link.active {
   color: var(--blue);
   font-weight: bold;
   background: transparent;
   border-bottom: 2px solid var(--blue);
}

/* product description */
.product_details #desc p {
   color: #4b4b4b;
}
.product_details #desc iframe {
   margin-top: 1rem;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
   min-height: 50vh;
}
/* product rate and comments */
.user-comment-container {
   margin-bottom: 1rem;
}
.user-comment {
   display: flex;
   margin-bottom: .5rem;
}
.user-comment .avatar img {
   width: 50px;
   border-radius: 50%;
}
.description-comments .comment-details {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
.comment-details p {
   color: #B7B7B7;
   font-size: 14px;
   margin-top: .4rem;
}
.comment {
   color: #858585;
   font-size: 15px;
}
.your-comment {
   display: flex;
   gap: 1rem;
   flex-direction: column;
}
.your-comment textarea {
   background-color: var(--white);
   border-radius: 15px;
   padding: 15px;
   font-size: 15px;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   -ms-border-radius: 15px;
   -o-border-radius: 15px;
}

/* --------== courses page ==-------- */
.courses .product .card{
   text-align: start;
}
.courses .product .card .card-img-top {
   margin-bottom: .5rem;
   border-radius: 12px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}
.courses .product .card .card-img-top img{
   aspect-ratio: 5 / 3;
}
.courses .product .card .discount {
   border-radius: 0px 12px 0px 12px !important;
   -webkit-border-radius: 0px 12px 0px 12px !important;
   -moz-border-radius: 0px 12px 0px 12px !important;
   -ms-border-radius: 0px 12px 0px 12px !important;
   -o-border-radius: 0px 12px 0px 12px !important;
}
.bookmark{
   color: var(--red);
   background: transparent;
   font-size: 18px;
   z-index: 9;
}
.courses .desc{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;
   /* margin-bottom: .5rem; */
}
.courses .product .card-footer{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.courses .product .card-footer button,
.courses .product .card-footer a {
   width: auto;
   padding: 6px 20px;
}

/* --------== contact page ==-------- */
.contact-info {
   border: 1px solid var(--lite);
   padding: 1.5rem 1.2rem;
   display: flex;
   align-items: center;
   gap: 12px;
   border-radius: 10px;
}
.contact-info:not(:last-child) {
   margin-bottom: 1rem;
}
.white-bg-wrapper .form-control::placeholder {
   font-size: 14px;
}
.contact-info .contact-info-icon {
   color: var(--red);
   line-height: 1;
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   overflow: hidden;
   background: #e50b4c25 !important;
   font-size: 22px;
}
.contact-info .contact-info-content .entry-title {
   display: block;
   color: #8290a3;
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 2px;
   line-height: 1.4;
}
.contact-info .contact-info-content .contact-list a {
   color: var(--black);
   font-weight: 600;
   font-family: 'Tajawal', sans-serif;
}
.contact-info .contact-info-content .contact-list a:hover {
   color: var(--blue);
}
.contact .map {
   overflow: hidden;
   border-radius: 20px;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   -o-border-radius: 20px;
}
.contact .map iframe {
   height: 300px;
   margin-bottom: 3rem;
}



/* --------== cart page ==-------- */
.cart-title span {
   color: var(--yellow);
}
.cart .form-control {
   border: 1px solid var(--lite);
   padding: 8px 15px;
}
.form-address .nice-select,
.cart select {
   font-size: 1.1rem;
   padding: 0px 16px;
   padding-inline-end: 22px;
   height: 42px !important;
   border: 1px solid #DBDBDB;
   background-color: white;
}
.cart .form-check-input[type=radio] {
   border-color: var(--sky) !important;
}
.cart .form-check-input:checked[type=radio] {
   background: white;
   border-width: 5px;
}
.remove-product,
.text-edit {
   position: absolute;
   color: #ffffff !important;
   background: var(--red);
   top: 0;
   inset-inline-end: 0;
   border-radius: 12px 0 12px 0;
   padding: 5px 12px;
   font-size: 12px;
   -webkit-border-radius: 12px 0 12px 0;
   -moz-border-radius: 12px 0 12px 0;
   -ms-border-radius: 12px 0 12px 0;
   -o-border-radius: 12px 0 12px 0;
}
.text-edit {
   background: var(--sky);
}
.cart-item .img-cart {
   border-radius: 12px;
   aspect-ratio: 6 / 5;
   object-fit: cover;
   background: radial-gradient(rgba(237, 251, 250, 0) 0%, #EDFBFA 100%);
   border-radius: 15px;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   -ms-border-radius: 12px;
   -o-border-radius: 12px;
}
.order-summary {
   position: sticky;
   top: 20px;
   overflow: visible;
}
.order-summary .cart-item {
   padding: 1.5rem;
}
.order-summary .count-total {
   color: var(--sky);
}
.order-summary .input-group {
   border: 1px solid #dfd9d9;
   border-radius: 22px;
   -webkit-border-radius: 22px;
   -moz-border-radius: 22px;
   -ms-border-radius: 22px;
   -o-border-radius: 22px;
   padding-inline: 10px;
}
.order-summary .input-group:has(:focus) {
   border-color: var(--red);
}
.order-summary .input-group:has(:focus) i,
.order-summary .input-group .input-group-text button {
   color: var(--red);
}
.order-summary .input-group .input-group-text {
   color: var(--mid-dark);
}
.order-summary .input-group * {
   border: none;
   background: transparent;
}
.summary {
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.summary:not(:last-child) {
   padding-bottom: 14px;
}
.form-payment .form-check-input {
   margin-top: -1px;
}
.credit-img {
   width: 38px;
}

/* --------== about page ==-------- */
.about .about_img {
   position: relative;
   aspect-ratio: 1/1;
}
.about .about_img img {
   border-radius: 50%;
   max-width: 100%;
   aspect-ratio: 1/1;
}
.rt-animate-shape img {
   height: auto;
   aspect-ratio: unset !important;
   width: fit-content;
}
.about li {
   position: absolute;
   z-index: 1
}
.about li:nth-child(1) {
   top: 60px;
   inset-inline-end: -32px;
   animation: move1 3s linear infinite
}
.about li:nth-child(2) {
   top: -10px;
   inset-inline-start: 40px;
   animation: rt-circle 25s linear infinite;
   -webkit-animation: rt-circle 25s linear infinite;
}
.about li:nth-child(3) {
   bottom: 130px;
   inset-inline-start: -60px;
   animation: move1 3s linear infinite;
   -webkit-animation: move1 3s linear infinite;
}
.about li:nth-child(4) {
   bottom: 0;
   inset-inline-start: 60px;
   animation: move2 3s linear infinite
}
.about li:nth-child(5) {
   bottom: 60px;
   inset-inline-end: -96px;
   animation: rt-scale 3s linear infinite
}
/* team members */
.team .card{
   transition: all .3s;
   border-radius: 12px;
   border: unset;
}
.team .col:nth-child(n) .card {
   --color: var(--red);
}
.team .col:nth-child(2n) .card {
   --color: var(--blue);
}
.team .col:nth-child(3n) .card {
   --color: var(--sky);
}
.team .col:nth-child(4n) .card {
   --color: var(--yellow);
}
.team .card {
   border-bottom: 4px solid var(--color) !important;
}
.team .card .card-footer svg,
.team .card .card-footer svg *,
.team .card .card-footer h6 {
   fill: var(--color);
   color: var(--color);
}
.team .card .card-footer svg {
   width: 30px;
}
.team .card img {
   aspect-ratio: 1 / 1;
   object-fit: cover;
   padding: 0;
   transition: all .4s;
   -webkit-transition: all .4s;
   -moz-transition: all .4s;
   -ms-transition: all .4s;
   -o-transition: all .4s;
}
.team .card:hover{
   transform: translate(0 , -10px);
   -webkit-transform: translate(0 , -10px);
   -moz-transform: translate(0 , -10px);
   -ms-transform: translate(0 , -10px);
   -o-transform: translate(0 , -10px);
}
.team .card:hover img{
   transform: scale(1.1);
   filter: grayscale(.1);
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   -ms-transform: scale(1.1);
   -o-transform: scale(1.1);
   -webkit-filter: grayscale(.1);
}
.team .card .card-body {
   padding: 0 0 0 .5rem;
   text-align: end;
}
.team .card .card-footer {
   background-color: #fff;
   border: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
/* .team .card-body h5 {
   color: #4B5563;
} */
.team .card-shape {
   position: relative;
   overflow: hidden;
}
.team .custom-shape-divider-bottom-1634717805 {
   position: absolute;
   bottom: -22px;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
   /* transform: rotate(180deg); */
}
.team .custom-shape-divider-bottom-1634717805 svg {
   position: relative;
   display: block;
   width: 100%;
   /* height: 50px; */
}
.team .custom-shape-divider-bottom-1634717805 .shape-fill {
   fill: #FFFFFF;
}

/* --------== gallery page ==-------- */
.gallery .photo {
   overflow: hidden;
   border-radius: 20px;
}
.gallery .photo img {
   filter: brightness(.9);
   transition: .4s;
   height: 265px;
   object-fit: cover;
   -webkit-filter: brightness(.9);
}
.gallery .photo:hover img {
   transform: scale(1.2);
   filter: brightness(1);
   -webkit-filter: brightness(1);
}


/* --------== products page ==-------- */
.filter-opt,
.cart-item {
   border-radius: 12px;
   padding: 1rem;
   background: var(--white);
   margin-bottom: 1rem;
   position: relative;
}
.filter .accordion-item,
.filter .accordion-button,
.filter .accordion-body {
   padding-inline: 0 !important;
   background: transparent !important;
   outline: unset !important;
   border: unset;
   box-shadow: unset !important;
}
.accordion-button {
   padding-block: 0;
}
.filter .form-check label {
   font-size: 15px;
   margin-top: 8px;
}
.middle {
   position: relative;
   width: 100%;
}
.middle .multi-range-slider {
   direction: ltr;
   /* position: relative; */
}
.middle .slider {
   position: relative;
   z-index: 1;
   height: 6px;
   margin: 15px 0;
}
.middle .slider .track {
   position: absolute;
   z-index: 1;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   border-radius: 5px;
   background-color: #e9e9e9;
}
.middle .slider .range {
   position: absolute;
   z-index: 2;
   inset: 0 25%;
   border-radius: 5px;
   background-color: var(--blue);
}
.middle .slider .thumb {
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3;
   width: 18px;
   height: 18px;
   background-color: var(--white);
   border: 6px solid var(--blue);
   box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
   border-radius: 50%;
}
.middle .slider .thumb.left {
   inset-inline-end: 25%;
   transform: translate(-8px, -6px);
   -webkit-transform: translate(-8px, -6px);
   -moz-transform: translate(-8px, -6px);
   -ms-transform: translate(-8px, -6px);
   -o-transform: translate(-8px, -6px);
}
.middle .slider .thumb.right {
   inset-block-start: 25%;
   transform: translate(6px, -8px);
   -webkit-transform: translate(6px, -8px);
   -moz-transform: translate(6px, -8px);
   -ms-transform: translate(6px, -8px);
   -o-transform: translate(6px, -8px);
}
input[type=range] {
   position: absolute;
   pointer-events: none;
   -webkit-appearance: none;
   z-index: 2;
   height: 10px;
   width: 100%;
   opacity: 0;
}
input[type=range]::-webkit-slider-thumb {
   pointer-events: all;
   width: 30px;
   height: 30px;
   border-radius: 0;
   border: 0 none;
   background-color: red;
   -webkit-appearance: none;
}
.selected-filters {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
}
.selected-filters ul {
   list-style: none;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
}
.selected-filters li {
   display: flex;
   gap: 6px;
   align-items: center;
   margin-bottom: 5px;
   background: var(--white);
   padding: 4px 15px;
   border-radius: 20px;
   position: relative;
   padding-inline-end: 8px;
}
.remove-filter-btn {
   width: 18px;
   height: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 11px;
   border-radius: 50%;
   background-color: var(--red);
   color: var(--white);
   border: none;
   cursor: pointer;
   opacity: .5;
}
.remove-filter-btn:hover {
   opacity: 1;
}
#clear-all-filters {
   min-width: max-content;
   width: auto;
   height: fit-content;
   padding-inline: 14px;
   padding-block: 4px;
   margin-bottom: 0;
}
#filter {
   position: fixed;
   top: 50%;
   right: 0;
   color: #fff !important;
   background-color: var(--sky);
   padding: 0.5rem 1rem;
   border-radius: 5px 0px 0px 5px;
   display: none;
   z-index: 99;
}
.filter-header,
.profile-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 0.75rem;
   padding: 1.25rem;
   border-bottom: 1px solid #dddddd;
}

/* --------== profile page ==-------- */
#profile_nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   background-color: var(--sky);
   border-radius: 10px;
   color: var(--white);
   padding: .5rem 1rem;
   margin-bottom: 1.5rem;
   font-size: 18px;
}
.profile-nav .nav-link {
   display: flex;
   align-items: center;
   gap: 12px;
   color: #2A2A2A;
   margin-bottom: 1rem;
   font-weight: bold;
   background: var(--white);
   border-radius: 70px;
}
.profile-nav .nav-link:hover {
   background: #02c4b21f;
}
.profile-nav .nav-link .icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #02c4b21f;
   color: var(--sky);
   transition: all .3s;
}
.profile-nav .nav-link:hover .icon {
   background: var(--sky);
   color: var(--white);
}
.profile-nav .nav-link.active {
   color: var(--white);
   background: var(--sky);
}
.profile-nav .nav-link.active .icon {
   color: var(--sky);
   background: var(--white);
}
.logout {
   color: #e50b4e;
   display: flex;
   width: 100%;
   align-items: center;
   gap: 10px;
   background-color: transparent;
   font-weight: bold;
   margin-top: 1rem;
   padding-top: 1rem;
   padding-inline-start: 1.8rem;
   border-top: 1px solid #E8E8E8;
}

.pass {
    cursor: pointer;
    position: absolute;
    top: 0;
    inset-inline-end: 10px;
    color: #838383;
    transform: translate(0, 50%);
}

.profile-data.white-bg-wrapper {
   height: auto;
}
.white-bg-wrapper.flex-column {
   padding: 2rem 1rem;
}
.profile-data .text-edit {
   background: var(--red) !important;
}
.profile-data .text-edit:hover {
   background: var(--sky) !important;
}
.profile .profile-pic-icon {
   position: absolute;
   top: 0%;
   bottom: 0%;
   right: 0%;
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   z-index: 3;
   opacity: 0;
   background-color: #02c4b21f;
   color: #fff;
   font-size: xx-large;
   border-radius: 0.35rem;
   transition: 0.2s;
}
.profile .profile-pic {
   width: 160px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   overflow: hidden;
   margin-bottom: 36px;
   padding: 4px;
   border: 1px solid var(--lite);
   background: radial-gradient(rgba(237, 251, 250, 0) 0%, #EDFBFA 100%);
}
.profile .profile-pic img {
   object-fit: cover;
   height: 100%;
}
.profile .profile-pic input {
   cursor: pointer;
   position: absolute;
   inset: 0;
   z-index: 10;
   opacity: 0;
}
.profile .profile-pic:hover .profile-pic-icon {
   opacity: 1;
}
.profile label {
   margin-bottom: .5rem;
}
.profile .cart .cart-address {
   margin-top: 0;
}
.orders .white-bg-wrapper {
   border-radius: 12px;
   padding: 1rem .5rem;
}
.orders .card {
   border: 0;
   border-top: 1px solid var(--lite);
   border-radius: 0;
   margin-top: 10px;
}
.orders .ord {
   color: var(--black);
}
.ord-blue,
.orders .ord i {
   color: var(--blue);
}
.ord-head {
   background: #0271ab90;
   color: var(--white);
   border-radius: 12px;
   padding: .5rem;
   text-align: center;
   margin-bottom: 1rem;
}
.orders .table th {
   background-color: #FCFCFC;
   padding: 10px;
   font-size: 13px;
}
.orders .table tr {
   border-bottom: 15px solid #fff;
}
.orders .table td {
   padding: 10px;
   vertical-align: middle;
   color: #909090;
   font-size: 14px;
   background-color: #fcfcfc;
}
.addr {
   color: #909090;
   font-size: 14px;
   background-color: #fcfcfc;
   padding: 10px;
   margin-block: 1rem;
}
.orders .table td img {
   width: 60px;
   height: 60px;
   min-width: 50px;
   border-radius: 5px;
   object-fit: cover;
}
.Track-shipment-wizard {
   background-color: #ffffff;

   width: 100%;
   min-width: 300px;
}
.profile-data .tab {
   opacity: 0.5;

}
.profile-data .tab.active,
.profile-data .tab.finish {
   opacity: 1;
}

/* --------== trace order page ==-------- */
.steps-container {
   width: 100%;
   margin: 0 auto 30px;
   border-bottom: 1px solid var(--lite);
   display: flex;
   justify-content: space-between;
   align-items: center;
   text-align: center;
}
.Track-shipment-wizard .step {
   padding: 20px 0;
   border: none;
   color: var(--dark);
   display: inline-block;
   opacity: 0.6;
   flex: 1;
   position: relative;
}
.Track-shipment-wizard .tab {
   display: block;
}
.Track-shipment-wizard .step.active,
.Track-shipment-wizard .step.finish {
   opacity: 1;
}
.Track-shipment-wizard .step.active::after,
.Track-shipment-wizard .step.finish::after {
   content: "";
   opacity: 1;
   width: 100%;
   height: 2px;
   background: var(--yellow);
   position: absolute;
   bottom: 0;
   inset-inline-start: 0%;
   transform: translateY(50%);
}
.Track-shipment-wizard .step1.active::after,
.Track-shipment-wizard .step1.finish::after {
   content: "";
   width: 50%;
   inset-inline-start: 50%;
}
.Track-shipment-wizard .step4.active::after,
.Track-shipment-wizard .step4.finish::after {
   content: "";
   width: 50%;
   inset-inline-end: 50%;
}
.Track-shipment-wizard .step.active::before,
.Track-shipment-wizard .step.finish::before {
   content: "\2713";
   width: 30px;
   height: 30px;
   background-color: var(--yellow);
   position: absolute;
   bottom: 0;
   right: 50%;
   color: var(--white);
   vertical-align: sub;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   z-index: 9;
   transform: translate(50%, 50%);
}
.profile-data .tab-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.profile-data .tab-container .tab {
   flex: 1;
   text-align: center;
}
.profile-data .tab-container .tab img {
   width: 60px;
}


/* login modal */
.modal {
   background: #00000054;
}
.modal-content {
   border-radius: 20px !important;
   overflow: hidden;
   border: none;
}
.modal-header,
.modal-footer {
   border: none
}
.modal .form-control {
   margin-bottom: 12px;
   padding: 6px 15px;
}
.modal .form-control::placeholder {
   font-size: 14px;
}
.modal-body {
   padding: 0rem;
}
.login-data {
   padding: 2rem;
}
.login-img {
   max-height: 500px;
   object-fit: cover;
}

/* -------- media -------- */
@media (max-width: 998px) {
   .navbar-collapse {
      position: absolute;
      bottom: 0%;
      background: #fff;
      transform: translateY(100%);
      border-radius: 10px;
      width: 75%;
      z-index: 9;
      padding: 5rem 2rem;
      box-shadow: 0px 1px 8px #00000054;
   }
   nav .bottom-nav .nav-links {
      gap: 1.4rem;
   }
   button:focus:not(:focus-visible) {
      outline: 0;
      box-shadow: unset;
   }
   .banner-slider .slider-content {
      padding-inline-start: 40px;
   }
   .banner-slider .slider-content .slider-title {
      font-size: 46px;
   }
   .middle-nav .search-box {
      max-width: 55%;
   }  
}

@media (max-width: 768px) {
   footer .logo {
      text-align: center;
   }
   #scroll-top {
      inset-inline-start: 1rem;
      bottom: 38px;
   }
   #float {
      inset-inline-end: 1rem;
      bottom: 38px;
   }
   .selected-filters {
      flex-wrap: wrap;
   }
}

@media (max-width: 578px) {
   /* nav */
   .top-nav {
      display: none;
   }
   .middle-nav .search-box {
      max-width: max-content;
      margin: unset;
      margin-inline-start: 10px;
   }
   .middle-nav .phone-wrap {
      display: none;
   }
   /*  breadcrumb */
   .breadcrumb {
      padding: 2rem;
      margin-bottom: 3rem;
   }
   /* header */
   .banner-slider .single-slider {
      display: flex;
      flex-direction: column;
   }
   .banner-slider .slider-content {
      padding: 36px 26px;
      padding-bottom: 0;
   }
   .banner-slider .slider-content .slider-title {
      font-size: 36px;
   }
   .banner-slider .slider-image img {
      max-height: 350px;
   }
   /* filter by age */
   .age .woo-tag-item {
      margin: 2rem 0 0 0;
   }
   .age .rt-tag-title {
      font-size: 20px;
   }
   /* filter by category */
   .cat_bg {
      margin-top: 60px;
      height: calc(100% - 60px);
      padding: 3rem 0 1rem 0;
   }
   /* footer */
   footer li a,
   .search-box .current {
      font-size: 14px;
   }
   .subscribe {
      width: 100%;
   }
   footer .footer-content {
      padding: 2rem 1.8rem;
      padding-bottom: 45px;
      margin-bottom: 0rem;
   }
   .rt-shape3 li:nth-child(4) {
      z-index: -1;
   }
   html[dir='rtl'] .rt-shape1 li:nth-child(2) {
      display: none;
   }
   html[dir='ltr'] .rt-shape1 li:nth-child(1) {
      display: none;
   }
   /* procut page */
   .cart-product-name h5 {
      color: var(--red);
      font-size: 18px;
      width: 100% !important;
   }
   /* card fav */
   .fav {
      opacity: 1;
   }
   /* gallery */
   .gallery .photo img {
      height: 190px;
   }
   /* profile & filter */
   .filter,
   .profile-nav {
      display: block;
      width: 400px;
      transform: translate(400px);
      max-width: 80%;
      position: fixed;
      margin-top: 0;
      z-index: 999;
      top: 0;
      right: 0;
      height: 100%;
      border-radius: 12px 0 0 12px;
      transition: 0.3s;
      background: white;
      box-shadow: -1px 2px 17px 3px #02c4b224;
      -webkit-border-radius: 12px 0 0 12px;
      -moz-border-radius: 12px 0 0 12px;
      -ms-border-radius: 12px 0 0 12px;
      -o-border-radius: 12px 0 0 12px;
   }
   .filter.filter-toggle,
   .profile-nav.Pnav-toggle {
      transform: translate(0);
   }
   #filter {
      display: block;
   }
   /* cart */
   .cart-item .img-cart {
      border-radius: 18px;
      height: 131px;
      width: 131px;
   }
   /* about */
   .about li:nth-child(1) {
      top: 60px;
      inset-inline-end: -25px;
      animation: move1 3s linear infinite
   }
   .about li:nth-child(2) {
      top: -40px;
      inset-inline-start: 6px;
      animation: rt-circle 25s linear infinite;
      -webkit-animation: rt-circle 25s linear infinite;
   }
   .about li:nth-child(3) {
      bottom: 81px;
      inset-inline-end: -27px;
      inset-inline-start: unset;
      animation: move1 3s linear infinite;
      -webkit-animation: move1 3s linear infinite;
   }
   .about li:nth-child(4) {
      bottom: 0;
      inset-inline-start: 21px;
      animation: move2 3s linear infinite
   }
   /* login modal */
   .login-data{
      position: absolute;
      background: #fff;
      border-radius: 22px;
      inset: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }
   .login-img {
      max-height: unset;
   }
}