@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-Thin.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-Thin.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-Thin.ttf) format("truetype");

  font-weight: 100;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-Light.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-Light.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-Light.ttf) format("truetype");

  font-weight: 300;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-Light.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-Light.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-Light.ttf) format("truetype");

  font-weight: 300;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-Regular.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-Regular.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-Regular.ttf) format("truetype");

  font-weight: normal;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-SemiBold.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-SemiBold.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-SemiBold.ttf) format("truetype");

  font-weight: 600;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-Bold.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-Bold.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-Bold.ttf) format("truetype");

  font-weight: bold;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-ExtraBold.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-ExtraBold.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-ExtraBold.ttf) format("truetype");

  font-weight: 800;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanBakhFaNum;

  src:

    url(../fonts/YekanBakhFaNum/woff2/YekanBakhFaNum-Black.woff2) format("woff2"),

    url(../fonts/YekanBakhFaNum/woff/YekanBakhFaNum-Black.woff) format("woff"),

    url(../fonts/YekanBakhFaNum/ttf/YekanBakhFaNum-Black.ttf) format("truetype");

  font-weight: 900;

  font-style: normal;

  font-stretch: normal;

}

/*-------------------*/
@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-Thin.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-Thin.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-Thin.ttf) format("truetype");

  font-weight: 100;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-Light.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-Light.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-Light.ttf) format("truetype");

  font-weight: 300;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-Light.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-Light.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-Light.ttf) format("truetype");

  font-weight: 300;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-Regular.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-Regular.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-Regular.ttf) format("truetype");

  font-weight: normal;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-SemiBold.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-SemiBold.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-SemiBold.ttf) format("truetype");

  font-weight: 600;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-Bold.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-Bold.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-Bold.ttf) format("truetype");

  font-weight: bold;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-ExtraBold.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-ExtraBold.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-ExtraBold.ttf) format("truetype");

  font-weight: 800;

  font-style: normal;

  font-stretch: normal;

}



@font-face {

  font-family: YekanEn;

  src:

          url(../fonts/YekanEn/FaNum/woff2/YekanBakhFaNum-Black.woff2) format("woff2"),

          url(../fonts/YekanEn/FaNum/woff/YekanBakhFaNum-Black.woff) format("woff"),

          url(../fonts/YekanEn/FaNum/ttf/YekanBakhFaNum-Black.ttf) format("truetype");

  font-weight: 900;

  font-style: normal;

  font-stretch: normal;

}



/* base  */



:root {

  --color1: #1d1d1d;

  --color2: #d99d1c;

  --back: #fff;

  --font1: YekanBakhFaNum;
  --font2: YekanEn;

}



body {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: var(--font2);

  direction: rtl;

  background-color: var(--back);

}



a {

  text-decoration: none;

  color: #555;

}



a:hover {

  text-decoration: none;

  color: var(--color2)
}



.ltr {

  direction: ltr;

}



.rtl {

  direction: rtl;

}



@media (min-width: 1400px) {



  .container,

  .container-lg,

  .container-md,

  .container-sm,

  .container-xl,

  .container-xxl {

    max-width: 1320px;

  }

}



@media (max-width: 767px) {

  .d-m-none {

    display: none !important;

  }



}



.col-20 {

  -ms-flex: 0 0 20%;

  flex: 0 0 20%;

  max-width: 20%;

  position: relative;

  width: 100%;

  padding-right: 15px;

  padding-left: 15px;

}



@media (min-width: 768px) {

  .col-md-20 {

    -ms-flex: 0 0 20%;

    flex: 0 0 20%;

    max-width: 20%;

    position: relative;

    width: 100%;

    padding-right: 15px;

    padding-left: 15px;

  }

}



@media (min-width: 992px) {

  .col-lg-20 {

    -ms-flex: 0 0 20%;

    flex: 0 0 20%;

    max-width: 20%;

    position: relative;

    width: 100%;

    padding-right: 15px;

    padding-left: 15px;

  }

}



@media (max-width: 767.98px) {



  .navbar-expand-md>.container,

  .navbar-expand-md>.container-fluid,

  .navbar-expand-md>.container-lg,

  .navbar-expand-md>.container-md,

  .navbar-expand-md>.container-sm,

  .navbar-expand-md>.container-xl {

    padding-right: 15px;

    padding-left: 15px;

  }

}



@media (min-width: 768px) {

  .container-fluid {

    padding-right: 30px;

    padding-left: 30px;

  }

}



/* navbar */



.navbar-custom {

  background-color: rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(2.5px);

  height: 75px;

  padding: 0;

  z-index: 1000;

  transition: 0.3s;

  position: absolute;

  width: 100%;

  z-index: 999;

  top: -100px;

  margin-top: 100px;

  transition: transform 0.5s ease-out, top 0.5s ease-out;

  box-shadow: 0px 0px 6px 0px #11100f1c;

}



.navbar-custom.fixed {

  top: 0;

  margin-top: 0;

  position: fixed;



}



.navbar-fill {

  height: 75px;

}



.navbar-logo img {

  width: auto;

  height: 36px;

  object-fit: contain;

}



.navbar-logo {

  display: flex;

  align-items: center;

}



.nav-item {

  margin-left: 6px;

  white-space: nowrap;

}



.nav-item a.active {

  background: var(--color1);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 32px;

  border-radius: 40px;

  padding: 0 15px;

}



.nav-item a.active:hover {

  color: #fff !important;

  background: var(--color1);

}



.nav-item a {

  display: flex;

  align-items: center;

  padding: 28px 0px;

  font-size: 12px;

  font-weight: 700;

  color: #252525;

  padding: 11px 8px;

}



.nav-item.dropdown {

  margin-top: -2px;

}



/* border hover  */



@media (min-width:768px) {

  .nav-item a {

    display: inline-block;

  }



  .nav-item:not(.dropdown) a::after {

    content: '';

    display: block;

    width: 0;

    height: 1px;

    /*background-image: linear-gradient(90deg, #ffffff00 0%, var(--color2) 50.48%, #ffffff00 100%);*/
    background-image: linear-gradient(90deg, #ffffff00 0%, #bbbbbb 50.48%, #ffffff00 100%);

    transition: width .2s;

    border-radius: 5px;

    margin-top: 5px;

    margin-bottom: -5px;

  }



  .nav-item:not(.dropdown) a:hover::after {

    width: 100%;

    transition: width .3s;

  }

}



.nav-item a:hover {

  color: #bbbbbb !important;

}



.navbar-right {

  display: flex;

  align-items: center;

  width: 100%;

}



.navbar-left {

  display: flex;

  align-items: center;

  justify-content: end;

  gap: 10px;

  width: 100%;

  line-height: 1;

}



.navbar-btn {

  color: #8d8b8a;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  transition: 0.3s;

  position: relative;

  cursor: pointer;

}



.navbar-btn:hover {

  color: var(--color1);

}



.navbar-social {

  color: #8d8b8a;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  transition: 0.3s;

  position: relative;

}



.navbar-social:hover {

  color: var(--color1);

}



.icon-hk-user {

  font-size: 22px;

}



.navbar-btn-badge {

  background: var(--color1);

  width: 14px;

  height: 14px;

  position: absolute;

  left: -2px;

  top: -2px;

  color: #fff;

  font-size: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 4px;

  padding-top: 4px;

}



.navbar-search {

  position: relative;

}



.navbar-search-form {

  position: absolute;

  left: 0;

}



.navbar-search-btn:hover {

  color: #000;

}



.navbar-search-btn {

  color: #8d8b8a;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  transition: 0.3s;

  position: relative;

  background: transparent;

  border: 0;

  margin: 0;

  padding: 0;

}



.icon-hk-instagram {

  font-size: 23px;

}



.navbar-hr {

  background: #a9a7a5;

  width: 2px;

  height: 18px;

  border-radius: 20px;

}



.navbar-search-form {
  position: absolute;
  left: -130px;
  top: 60px;
  display: flex;
  background: #fff;
  height: 42px;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  width: 319px;
  flex-direction: row-reverse;
  justify-content: space-between;
  border-bottom: 2px solid #565656;
  border-left: 2px solid #565656;
}



.navbar-search-form.active {

  visibility: visible;

  opacity: 1;

}



.navbar-search-form button {
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #717172;
  padding: 0;
}



.navbar-search-form input {

  font-size: 11px;
  border: 0;
  outline: none;
  width: 100%;

}



.navbar-mobile-section {

  display: none;

}



.navbar-mobile-bottom {

  display: none;

}



.lines {

  display: inline-block;

  height: 2px;

  width: 16px;

  border-radius: 4px;

  transition: .3s;

  position: relative;

  top: -4px;

}



.lines,

.lines:after,

.lines:before {

  background-color: #111;

}



.lines::after,
.lines::before {

  display: inline-block;

  height: 2px;

  width: 16px;

  border-radius: 4px;

  transition: .3s;

  content: '';

  position: absolute;

  left: 0;

  -webkit-transform-origin: 2.85714px center;

  transform-origin: 2.85714px center;

  width: 100%;

}



.lines::before {

  top: 5px;

}



.lines::after {

  top: -5px;

}



.navbar-toggler.active .lines {

  -webkit-transform: scale3d(.8, .8, .8);

  transform: scale3d(.8, .8, .8);

}



.navbar-toggler.active .lines {

  top: 4px;

  width: 19px;

}



.navbar-toggler.active .lines::after,
.navbar-toggler.active .lines::before {

  -webkit-transform-origin: 50% 50%;

  transform-origin: 50% 50%;

  top: -8px;

  width: 20px !important;

}



.navbar-toggler.active .lines::before {

  top: -16px;

  width: 20px;

}



.navbar-toggler.active .lines::after {

  -webkit-transform: rotate3d(0, 0, 1, 144deg);

}





/* responsive navbar*/



@media (max-width:767.5px) {

  .navbar-search-form {
    display: none;
  }

  .navbar .container,

  .navbar .container-fluid,

  .navbar .container-lg,

  .navbar .container-md,

  .navbar .container-sm,

  .navbar .container-xl {

    -ms-flex-wrap: nowrap;

    flex-wrap: nowrap;

  }



  .navbar-custom {

    height: 55px;

    padding: 10px 0;

    backdrop-filter: unset;

  }



  .navbar-fill {

    height: 55px;

  }



  .navbar-search-btn {

    display: none;

  }



  .navbar-social {

    display: none;

  }



  .navbar-hr {

    display: none;

  }



  .navbar-logo img {

    height: 25px;

  }



  .navbar-btn {

    font-size: 18px;

  }



  .icon-hk-user {

    font-size: 20px;

  }



  .navbar-btn-badge {

    width: 12px;

    height: 12px;

    left: -2px;

    top: -2px;

  }



  .navbar-left {

    gap: 5px;

  }





  .navbar-mobile-section {

    display: block;

    padding: 20px;

    padding-bottom: 10px;

  }



  .navbar-mobile-search {

    border: 1px solid #AEAEAE;

    height: 40px;

    display: flex;

    align-items: center;

    padding: 5px 10px;

    font-size: 12px;

  }



  .navbar-mobile-search input::placeholder {

    color: var(--color1);

  }



  .navbar-mobile-search input {

    width: 100%;

    height: 100%;

    border: 0;

    outline: none;

  }



  .navbar-mobile-search button {

    border: 0;

    outline: none;

    background: transparent;

    font-size: 22px;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    line-height: 0;

  }



  .navbar-mobile-flex {

    display: flex;

    gap: 10px;

    margin-top: 10px;

  }



  .navbar-mobile-btn {

    width: 100%;

    border: 1px solid #AEAEAE;

    height: 48px;

    display: flex;

    align-items: center;

    padding: 5px;

    line-height: 1;

    justify-content: space-between;

    flex-direction: column-reverse;

    color: var(--color1);

    font-size: 12px;

  }



  .navbar-mobile-btn i {

    font-size: 18px;

  }





  .modern-sidebar.active {

    right: 0 !important;

    border-left: 1px solid #dddd;

    box-shadow: 5px 0 20px #00000070;

  }



  .navbar-mobile-bottom {

    position: fixed;

    bottom: 0px;

    left: 0px;

    right: 0px;

    height: 50px;

    background-color: #ffffff;

    width: 100%;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    -webkit-box-pack: justify;

    justify-content: space-between;

    z-index: 9;

    direction: rtl;

    border-top: 1px solid #f0f0f1;

  }



  .navbar-mobile-bottom-item svg {

    color: #000;

    width: 18px;

  }



  .navbar-mobile-bottom-item img {

    width: auto;

    height: 32px;

    margin-bottom: 5px;

    margin-top: 4px;

  }



  .navbar-mobile-bottom-item i {

    color: #000;

    font-size: 20px;

    margin-bottom: -8px;

  }





  .navbar-mobile-bottom-item span {

    display: block;

    font-size: 10px;

    margin-bottom: -2px;

    margin-top: 1px;

    z-index: -1;

    color: #000;

    font-weight: 800;

  }



  .navbar-mobile-bottom-item span.active {

    color: var(#000);

  }



  .navbar-mobile-bottom-item {

    flex: 1 1 0%;

    display: flex;

    flex-direction: column;

    -webkit-box-align: center;

    align-items: center;

    -webkit-box-pack: center;

    justify-content: center;

    height: 100%;

  }



  .navbar-mobile-bottom-item.active {

    background: #eee;

  }



  .navbar-mobile-bottom-item.active span {

    z-index: 1;

  }







}





@media (min-width:768px) {

  .navbar-nav {

    align-items: center;

  }

}





/* dropdown */

.dropdown a::after {

  margin-top: -2px;

  margin-right: 10px;

  border: 0;

  font-family: "raya-icon";

  content: '\f107';

}



.dropdown ul li a::after {

  content: unset;

}



.dropdown .dropdown>a:after {

  display: block;

  content: " ";

  float: left;

  border: 0;

  font-family: "raya-icon";

  content: '\f104';

  margin-top: 5px;

  margin-right: -10px;

}



.dropdown ul {

  left: 0;

  z-index: 1000;

  display: none;

  padding: 0.5rem 0;

  margin: 0.125rem 0 0;

  color: #212529;

  text-align: right;

  list-style: none;

  background-color: #fff;

  background-clip: padding-box;

  position: absolute;

  border: 0;

  margin-top: 0px;

  border: 1px solid #e0e0e0;

  border-radius: 0;

  min-width: 200px;

  font-size: 14px;

  transition: opacity 0.3s ease-in-out;

  right: 0;

}



.dropdown ul li a {

  color: #444;

  font-size: 12px;

  display: block;

  white-space: nowrap;

  width: 100%;

  padding: 7px 14px;

  font-weight: normal;

}



.dropdown ul li a:hover {

  color: var(--color1);

}









@media (min-width:767.5px) {

  .dropdown ul::before {

    content: "";

    position: absolute;

    top: -10px;

    right: 5px;

    transform: translateX(-50%) rotate(180deg);

    border-top: 10px solid var(--color1);

    border-right: 10px solid transparent;

    border-left: 10px solid transparent;

  }



  .dropdown .dropdown ul::before {

    content: unset;

  }



  .dropdown .dropdown {

    position: relative;

  }



  .dropdown .dropdown>ul {

    top: 0;

    right: 100%;

  }



  #overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: transparent;

    z-index: -20;

    transition: background 0.1s ease, z-index 0s;

    transition-delay: 0.1s, 0.4s;

  }



  #overlay.active {

    visibility: visible;

    transition: background 0.1s ease, z-index 0s;

    transition-delay: 0s, 0s;

    background: rgba(72, 72, 72, 0.6);

    z-index: 100;

  }



  .dropdown .dropdown:hover>a:after {

    border-left-color: #000;

  }



  .dropdown .dropdown:hover>ul {

    display: block;

  }



  .dropdown:hover>ul {

    display: block;

  }

}



/* offcanvas */

@media (max-width: 767.5px) {



  .nav-item.dropdown {

    flex-direction: column;

  }



  li.dropdown li.dropdown ul {

    padding-right: 15px;

  }



  li.dropdown li.dropdown {

    border-right: 1px solid var(--color1);

    margin-top: 15px;

  }





  .dropdown ul::before {

    content: unset;

  }



  .dropdown a::after {

    content: '\f107';

    font-size: 16px;

    flex-grow: 1;

    justify-content: end;

    display: flex;

    align-items: center;

  }



  .dropdown .dropdown>a:after {

    margin-top: -2px;

    font-size: 16px;

    content: '\f107';

  }



  .nav-item a.open::after {

    content: '\f106';

  }



  .offcanvas-nav {

    position: absolute;

    top: -100%;

    right: 0;

    width: 100%;

    height: 100%;

    background-color: #f2f2f2;

    /* transition: all 0.3s ease-in-out; */

    visibility: hidden;

    z-index: -1;

  }



  .dropdown ul {

    display: none;

    position: relative;

    margin: 0;

    padding: 0;

    border: 0;

  }



  .dropdown ul.active {

    display: block;

  }



  .offcanvas-nav.active {

    top: 0;

    visibility: visible;

    margin-top: 55px;

    background: #fff;

    height: auto;

    box-shadow: 0px 0px 6px 0px #11100f1c;

    overflow: auto;

    max-height: 500px;

    z-index: 999;

  }





  .offcanvas-header {

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: var(--color1);

    background-color: #fff;

    padding: 0 15px;

    margin-bottom: 10px;

    display: none;

  }





  .offcanvas-header .close {

    background: transparent;

    border: 0;

    color: var(--color1);

    font-size: 20px;

  }



  .offcanvas-header .back {

    background: transparent;

    border: 0;

    color: var(--color1);

    font-size: 20px;

  }



  .nav-item {

    padding: 8px 20px;

    margin-left: 0px;

    display: flex;

  }



  .dropdown ul li a {

    padding: 10px 20px;

  }



  .nav-item a {

    padding: 0;

    display: flex;

    align-items: center;

    width: 100%;

    font-size: 12px;

    font-weight: normal;

  }



  .navbar-toggler {

    border: 0;

    margin: 0;

    padding: 0;

    color: var(--color1) !important;

    display: flex;

    font-size: 26px;

  }



  .navbar-toggler.active i::before {

    content: '\e8a5';

    font-size: 16px;

    padding-right: 7px;

  }

}





@media (min-width:768px) {

  .offcanvas-header {

    display: none;

  }

}





/* mega */



@media (min-width:768px) {



  .offcanvas-header {

    display: none;

  }



  .navbar-category a::after {

    content: unset;

  }



  .navbar-category.dropdown ul {

    min-width: 275px;

    border-radius: 0;

    background-color: #fff;

    padding: 4px 0;

    margin-top: 0px;

  }



  .navbar-category.dropdown ul ul {

    margin-top: 0px;

  }



  .navbar-category.dropdown ul ul ul {

    margin-top: 0px;

  }



  .navbar-category.dropdown ul li {

    padding: 0px 20px;

  }



  .navbar-category.dropdown ul li:last-child a {

    border-bottom: 0;

  }



  .navbar-category.dropdown .dropdown ul li a {

    border-bottom: solid 1px #dcdcdc;

  }







  .navbar-category.dropdown .dropdown ul {

    right: 100%;

  }



  .navbar-category.dropdown ul li a {

    font-size: 12px;

    font-weight: 500;

    color: #646464;

    padding: 10px 14px;

    border-bottom: solid 1px #dcdcdc;

  }



  .navbar-category.dropdown .dropdown>a:after {

    margin-top: 0;

  }



  .navbar-category.dropdown ul::before {

    content: unset;

  }



  .navbar-category.dropdown .dropdown ul {

    width: 800px;

    flex-wrap: wrap;

    direction: rtl;

    height: 358px;

    overflow-y: auto;

    margin-top: -1px;

  }



  .navbar-category.dropdown .dropdown ul li a {

    font-weight: bold;

    color: var(--color2);

  }



  .navbar-category.dropdown .dropdown ul ul li a {

    font-weight: normal;

  }



  .navbar-category.dropdown .dropdown ul li {

    min-width: 25%;

  }



  .navbar-category.dropdown .dropdown ul a::after {

    content: unset;

  }



  .navbar-category.dropdown .dropdown:hover>ul {

    display: flex;

  }



  .navbar-category.dropdown .dropdown ul ul {

    width: auto;

    position: relative;

    width: auto;

    min-width: auto;

    height: auto;

    display: flex;

    right: 0;

    flex-direction: column;

    box-shadow: unset;

    overflow: unset;

    border: 0;

    margin: 0;

  }



  .navbar-category.dropdown .dropdown ul ul li {

    width: auto;

    padding: 0;

  }



  .navbar-category.dropdown .dropdown ul ul li a {

    border-bottom: 0;

    color: #323232;

  }



  .navbar-category.dropdown .dropdown {

    position: unset;

  }



  .mega-scroll {

    height: 350px;

    overflow-y: auto;

    direction: ltr;

  }

}



@media (min-width:767px) and (max-width:991px) {

  .navbar-category.dropdown .dropdown ul {

    width: 385px;

  }



  .navbar-category.dropdown .dropdown ul li {

    width: 33%;

  }

}







.btn.btn-custom {

  background: var(--color1);

  color: #fff;

}



/* jconfirm  */

.btn.btn-custom:hover {

  opacity: 0.8;

}



.jconfirm-box {

  border-radius: 10px !important;

}



/* basket offcanvas - Redesigned */



.offcanvas {

  position: fixed;

  bottom: 0;

  z-index: 1050;

  display: flex;

  flex-direction: column;

  max-width: 100%;

  background-color: #fff;

  background-clip: padding-box;

  outline: 0;

  transition: transform .3s cubic-bezier(0.2, 0.9, 0.4, 1.1);

  top: 0;

  left: 0;

  width: 100%;

  max-width: 380px;

  border-right: none;

  transform: translateX(-100%);

  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.08);

}



.offcanvas.show {

  transform: none;

}



.offcanvas-body {

  padding: 0;

  height: 100%;

  overflow: auto;

  background: #fafbfc;

}



.offcanvas-head {

  padding: 20px 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #f0f0f0;

  background: #ffffff;

  border-radius: 0 20px 0 0;

}



.offcanvas-footer {

  padding: 20px 24px 24px;

  border-top: 1px solid #f0f0f0;

  background: #ffffff;

  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.02);

}



.offcanvas-close {

  background: #f5f5f7;

  border: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  line-height: 1;

  color: #666;

  padding: 0;

  width: 32px;

  height: 32px;

  border-radius: 50%;

  transition: all 0.2s ease;

  cursor: pointer;

}



.offcanvas-close:hover {

  background: #e8e8ec;

  color: #000;

  transform: rotate(90deg);

}



.basket-item {

  display: flex;

  align-items: center;

  gap: 16px;

  padding: 20px 24px;

  background: #ffffff;

  border-bottom: 1px solid #f0f2f5;

  transition: all 0.2s ease;

}



.basket-item:hover {

  background: #fefefe;

}



.basket-item:first-child {

  padding-top: 20px;

}



.basket-total {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  margin-bottom: 16px;

  flex-wrap: wrap;

  gap: 8px;

}



.basket-total-title {

  font-size: 16px;

  font-weight: 500;

  color: #5a5c6e;

}



.basket-item-img {

  width: 88px;

  height: 88px;

  /*border-radius: 16px;*/

  object-fit: cover;

  border: 1px solid #f0f0f0;

  background: #ffffff;

  transition: transform 0.2s ease;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);

}



.basket-item-img:hover {

  transform: scale(1.02);

}



.basket-item-info {

  flex: 1;

  white-space: normal;

}



.basket-item-count {

  margin-top: 10px;

  display: flex;

  align-items: end;

  gap: 5px;

  flex-wrap: wrap;

}



.basket-item-title {

  font-size: 15px;

  font-weight: 500;

  text-wrap: initial;

  color: #1e1f2a;

  line-height: 1.45;

  text-decoration: none;

  transition: color 0.2s;

  display: inline-block;

}



.basket-item-title:hover {

  color: var(--color1);

}



.basket-item-count span {

  color: #000;

  font-size: 17px;

  font-weight: 600;

  letter-spacing: -0.2px;

}



.basket-item-discount {

  color: #9aa0b0 !important;

  text-decoration: line-through;

  font-size: 13px !important;

  font-weight: 400 !important;

}



.basket-link {

  background: var(--color1);

  border: 1px solid var(--color1);

  color: #fff;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 48px;

  border-radius: 0;

  margin-top: 8px;

  transition: all 0.25s ease;

  font-weight: 500;

  font-size: 16px;

  letter-spacing: 0.3px;

  text-decoration: none;

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

}



.basket-link:hover {

  background-color: #fff;

  border-color: var(--color1);

  color: var(--color1);

  transform: translateY(-1px);

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);

}



.offcanvas-title {

  font-weight: 600;

  color: #111;

  font-size: 20px;

  margin: 0;

  letter-spacing: -0.3px;

}



.basket-total-price {

  display: flex;

  align-items: baseline;

}



.basket-total-price .basket-item-count {

  margin-top: 0;

  align-items: baseline;

}



.basket-total-price .basket-item-count span {

  font-size: 20px;

  font-weight: 700;

  color: #000;

}



body:not([dir="ltr"]) .offcanvas.show {

  transform: none;

}



body:not([dir="ltr"]) .offcanvas-close:hover {

  transform: rotate(-90deg);

}



.offcanvas-body::-webkit-scrollbar {

  width: 4px;

}



.offcanvas-body::-webkit-scrollbar-track {

  background: #f1f1f3;

}



.offcanvas-body::-webkit-scrollbar-thumb {

  background: #cbd0db;

  border-radius: 10px;

}



#overlay-offcanvas {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: transparent;

  z-index: -20;

  transition: background 0.1s ease, z-index 0s;

  transition-delay: 0.1s, 0.4s;

}



#overlay-offcanvas.active {

  visibility: visible;

  transition: background 0.1s ease, z-index 0s;

  transition-delay: 0s, 0s;

  background: rgba(72, 72, 72, 0.6);

  z-index: 1000;

}



@media (max-width:767px) {

  .offcanvas-title {

    font-size: 14px;

  }



  .basket-total-price .basket-item-count span {

    font-size: 16px;

  }



  .basket-total-title {

    font-size: 14px;

  }



  .basket-link {

    height: 38px;

    font-size: 14px;

    margin-top: 0;

  }



  .offcanvas-head {

    padding: 11px 15px;

  }



  .offcanvas-footer {

    padding: 15px;

  }



  .basket-item-title {

    font-size: 12px;

  }



  .basket-item-img {

    width: 75px;

    height: 75px;

  }



  .basket-item-count span {

    font-size: 14px;

  }



  .basket-item-count {

    gap: 0;

    font-size: 12px;

  }



  .basket-total {

    margin-bottom: 10px;

  }



}







/* swiper */

.swiper {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-center {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-custom {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-1 {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-2 {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-3 {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-4 {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-5 {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-6 {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}





.swiper-pagination-bullet {

  border-radius: 20px;

  width: 8px;

  height: 8px;

  background: #666;

}





.swiper-pagination-bullet-active {

  width: 20px;

}



.swiper-pagination-bullet.swiper-pagination-bullet-active {

  background: #707070;

}



.swiper-pagination {

  position: absolute;

  text-align: center;

  transition: .3s opacity;

  transform: translate3d(0, 0, 0);

  z-index: 10;

  background: #fff;

  max-width: max-content;

  margin: auto;

  left: 0;

  right: 0;

  height: 20px;

  padding: 0 6px;

  border-radius: 20px;

  margin-top: -4px;

  display: flex;

  align-items: center;

  box-shadow: 0px 0px 6px 0px #11100f1c;

}



.swiper-button-next:after,

.swiper-button-prev:after {

  font-size: 14px;

  font-weight: 600;

  color: var(--color1);

}



.swiper-button-next {

  width: 38px;

  height: 38px;

  background-color: #fff;

  border: 1px solid #c0c2c5;

  border-radius: 50%;

  transition: 0.3s;

}



.swiper-button-prev {

  width: 38px;

  height: 38px;

  background-color: #fff;

  border: 1px solid #c0c2c5;

  border-radius: 50%;

  transition: 0.3s;

}



.swiper-button-next:hover {

  background: var(--color1);

}



.swiper-button-prev:hover {

  background: var(--color1);

}



.swiper-button-next:hover::after {

  color: #fff;

}



.swiper-button-prev:hover::after {

  color: #fff;

}



.swiper-button-next,

.swiper-button-prev {

  opacity: 0;

}



[class^="swiper-"]:hover .swiper-button-next,

[class^="swiper-"]:hover .swiper-button-prev {

  opacity: 1;

}



.swiper-free {

  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;

}



.swiper-free .swiper-wrapper {

  -webkit-transition-timing-function: linear !important;

  -o-transition-timing-function: linear !important;

  transition-timing-function: linear !important;

}



.swiper-free .swiper-slide {

  width: auto;

}



@media (max-width:767px) {

  .swiper-button-next {

    width: 28px;

    height: 28px;

    top: 55%;

  }



  .swiper-button-prev {

    width: 28px;

    height: 28px;

    top: 55%;

  }



  .swiper-button-next:after,

  .swiper-button-prev:after {

    font-size: 10px;

  }

}





/* animate */

.myAnim1 {

  animation: myAnim1 10s linear 0s infinite normal forwards;

}



.myAnim2 {

  animation: myAnim2 15s linear 0s infinite normal forwards;

}



.myAnim2-2 {

  animation: myAnim2 30s linear 0s infinite normal forwards;

}



.myAnim3 {

  animation: myAnim3 10s linear 0s infinite normal forwards;

}



.myAnim4 {

  animation: myAnim4 10s linear 0s infinite normal forwards;

}



@keyframes myAnim1 {



  0%,

  100% {

    transform: rotate(0deg);

    transform-origin: 50% 0;

  }



  10% {

    transform: rotate(2deg);

  }



  20%,

  40%,

  60% {

    transform: rotate(-4deg);

  }



  30%,

  50%,

  70% {

    transform: rotate(4deg);

  }



  80% {

    transform: rotate(-2deg);

  }



  90% {

    transform: rotate(2deg);

  }

}



@keyframes myAnim2 {



  0%,

  100% {

    transform: translateY(0);

  }



  10%,

  30%,

  50%,

  70% {

    transform: translateY(-8px);

  }



  20%,

  40%,

  60% {

    transform: translateY(8px);

  }



  80% {

    transform: translateY(6.4px);

  }



  90% {

    transform: translateY(-6.4px);

  }

}



@keyframes myAnim3 {



  0%,

  100% {

    transform: rotate(0deg);

    transform-origin: 50% 100%;

  }



  10% {

    transform: rotate(2deg);

  }



  20%,

  40%,

  60% {

    transform: rotate(-4deg);

  }



  30%,

  50%,

  70% {

    transform: rotate(4deg);

  }



  80% {

    transform: rotate(-2deg);

  }



  90% {

    transform: rotate(2deg);

  }

}



@keyframes myAnim4 {

  0% {

    animation-timing-function: ease-out;

    transform: scale(1);

    transform-origin: center center;

  }



  10% {

    animation-timing-function: ease-in;

    transform: scale(0.91);

  }



  17% {

    animation-timing-function: ease-out;

    transform: scale(0.98);

  }



  33% {

    animation-timing-function: ease-in;

    transform: scale(0.87);

  }



  45% {

    animation-timing-function: ease-out;

    transform: scale(1);

  }

}



.animate {

  opacity: 0;

  transform: translateY(40px);

  transition: opacity 250ms ease-out, transform 700ms ease-out;

  will-change: opacity, transform;

}



.animate.is-visible {

  opacity: 1;

  transform: translateY(0);

}



/* home */





.banner-desktop {

  width: 100%;

}



.banner-mobile {

  width: 100%;

}



.home-slider video {

  width: 100%;

  margin-bottom: -15px;

}



.home-slider.max .banner-desktop,

.home-slider.max .banner-mobile,

.home-slider.max video {

  height: 100vh;

  max-height: 607px;

  object-fit: cover;

}





@media (max-width:767px) {

  .banner-desktop {

    display: none;

  }

}



@media (min-width:768px) {

  .banner-mobile {

    display: none;

  }

}



.home-grid {

  grid-template-columns: repeat(2, 1fr);

  display: grid;

  position: relative;

  gap: 5px;

  margin-bottom: 5px;

}



.home-grid-item {

  height: 600px;

  background-size: cover;

  background-position: center;

  display: block;

}



.home-grid-btn {

  position: absolute;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  display: flex;

  max-width: max-content;

  max-height: max-content;

  margin: auto;

  background: #fff;

  min-height: 50px;

  align-items: center;

  justify-content: center;

  color: #000;

  padding: 0 40px;

  font-weight: 300;

  transition: 0.3s;

}



.home-grid-btn:hover {

  background: var(--color1);

  color: #fff;

}

.home-product .swiper-4,.swiper-4 {
  padding: 2px;
  margin: -2px;
}

.home-product-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 35px;

  margin-bottom: 15px;

}



.home-product-title {

  color: #000;

}



.home-product-link {

  color: #000;

  font-size: 14px;

  font-weight: 300;

  display: flex;

  align-items: center;

  gap: 8px;

}



.home-product-link:after {

  content: '\f104';

  font-family: "raya-icon";

}



.card-product {

  position: relative;

  display: block;

  color: #000;

}



/*.card-product-like {*/

/*  position: absolute;*/

/*  left: 15px;*/

/*  top: 18px;*/

/*  z-index:998;*/

/*  width: 25px;*/

/*  height: 25px;*/

/*}*/



.card-product-like {

  position: absolute;
  top: 10px;
  z-index: 998;
  height: 35px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
  padding-left: 10px;
  color: #878179;
}



.card-product-img-body {

  position: relative;

  /* height: 367px; */

  display: block;

  aspect-ratio: 2 / 3;
  width: 100%;

}



.card-product-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: 0.5s;

}



.card-product-img-2 {

  object-fit: cover;

  position: absolute;

  visibility: hidden;

  opacity: 0;

  right: 0;

  top: 0;

  width: 100%;

  height: 100%;

  transition: 0.5s;

}



.card-product-img-body:hover .card-product-img-2 {

  opacity: 1;

  visibility: visible;

  z-index: 1;

}



.card-product-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 10px;

  gap: 5px;

  color: #000;

}



.card-product-title {

  text-overflow: ellipsis;

  -webkit-box-orient: vertical;

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 1;

  color: #000;

  font-size: 14px;

}



.card-product-price {

  display: flex;

  margin-top: 10px;

  gap: 3px;

  font-size: 14px;

}



.card-product-price-off {

  background: #111;

  color: #fff;

  height: 20px;

  line-height: 1;

  display: flex;

  align-items: center;

  font-size: 12px;

  padding: 0 8px;

  padding-top: 3px;

  position: absolute;

  top: 20px;
  z-index: 100;

}



.card-product-price-before {

  color: #666;

  text-decoration: line-through;

  font-size: 14px;

}



.card-product-price-main {

  font-size: 14px;

  color: #000;

}



.card-product-price-main i {

  font-size: 13px;

  color: #666;

}



.card-product-color {

  display: flex;

  align-items: center;

  margin-top: 7px;

  /*gap: 7px;*/

}



.card-product-color span {

  display: block;

  width: 17px;

  height: 17px;

  border: 1px solid #cfcfcf;

}



.home-banner {

  width: 100%;

  margin-top: 45px;

}



.home-banner img {

  width: 100%;

}



.home-info {

  /*background: #1d1d1d;*/

  background: #000;

  color: #fff;

  overflow: hidden;

  white-space: nowrap;

  direction: ltr;

}



.home-info-item {

  display: flex;

  align-items: center;

  font-size: 13px;

  text-align: center;

  padding: 35px 0;

  justify-content: center;

  gap: 5px;

  font-weight: 300;

  direction: rtl;

}

.home-info-item img {

  height: 100%;

  width: auto;

  flex-shrink: 0;

  filter: brightness(1);

}

.home-info-loop {

  display: inline-flex;

  align-items: center;

  gap: 0;


  animation: loopMove 29s linear infinite;

  height: 110.83px;

}
.home-info-loop .home-info-item{
  min-width: 500px;
}




@keyframes loopMove {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-50%);



  }

}



@keyframes scrollLeft {

  from {

    transform: translateX(0);

  }



  to {

    transform: translateX(-50%);

  }

}





/* responsive */

@media (max-width:767px) {





  .home-info-loop {

    animation: loopMove 24s linear infinite;

    height: 110.83px;
    gap: 0;

  }
  .home-info-loop .home-info-item {
    min-width: 310px;

  }



  .home-grid {

    grid-template-columns: repeat(1, 1fr);

  }



  .home-grid-item {

    height: 390px;

  }



  .home-grid-btn {

    min-height: 36px;

    padding: 0 15px;

    font-size: 12px;

  }



  .home-product-row {

    margin-top: 25px;

  }



  .home-product-title {

    font-size: 14px;

  }



  .home-product-link {

    font-size: 12px;

  }



  .card-product-img-body {

    /* height: 336px; */

  }



  .card-product-title {

    font-size: 12px;

  }



  .icon-bookmark-empty {

    font-size: 14px;

  }



  .card-product-price-off {

    height: 18px;

    font-size: 12px;

    padding: 0 2px;

    padding-top: 3px;

  }



  .card-product-price-before {

    font-size: 13px;

  }



  .card-product-price-main {

    font-size: 14px;

  }



  .card-product-price-main {

    font-size: 14px;

  }



  .card-product-color span {

    width: 17px;

    height: 17px;

  }



  .card-product-color {

    margin-top: 10px;

    /*gap: 7px;*/

  }



  .home-banner {

    margin-top: 25px;

  }



  .home-info-item {

    font-size: 10px;

    padding: 20px 0;

  }



  .home-info-item i {

    font-size: 16px;

  }

}





/* footer */



.footer {

  position: relative;

  background: #e6e6e6;


  margin-top: 60px;

}





.footer-header {

  font-size: 16px;

  font-weight: 600;

  text-align: right;

  color: #6e6e6e;

  display: flex;

  align-items: start;

  gap: 15px;

  display: flex;

  flex-direction: column;
  padding-top: 80px;
}



.footer-ul {

  list-style: none;

  margin: 0;

  padding: 0;

  margin-top: 15px;

  margin-bottom: 30px;

}



.footer-link {

  font-size: 14px;

  font-weight: normal;

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  color: #606060;

}



a.footer-link {

  width: max-content;

}



.footer-link:hover {

  color: var(--color1);

}



.footer-link i {

  width: 24px;

  margin-left: 10px;

  display: flex;

  font-size: 16px;

  color: #000;

}



.footer-address {

  color: #606060;

  font-size: 14px;

  margin-top: 5px;

}



.footer-address span {

  color: #6e6e6e;



}



.footer-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  border-right: 2px solid #fff;
  height: 100%;
  justify-content: center;
}



.footer-logo {

  height: 50px;

  object-fit: contain;

}



.footer-text {

  text-align: justify;

  font-size: 15px;

  line-height: 2;

  color: #000;

  font-weight: 300;

}



.footer-social img {

  width: 28px;

}



.footer-social a {

  transition: 0.3s;

  filter: grayscale(1);

}



.footer-social a:hover {

  filter: grayscale(0);

}



.footer-social {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 15px;

  margin-top: 30px;

  margin-bottom: 20px;

}



.footer-mute {

  font-size: 12px;

  margin-bottom: 5px;

  color: #3a3a3a;

  display: flex;

  align-items: center;

  gap: 15px;

  font-weight: 600;

  justify-content: center;

}



.footer-mute a,

.footer-mute span {

  color: #3a3a3a;

  display: block;

  direction: ltr;

}



.footer-mute-space {

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  letter-spacing: 6px;

  font-size: 14px;

  text-transform: uppercase;

  color: #666;

}



.footer-bottom {

  margin-top: 10px;

  padding-bottom: 30px;

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.footer-bottom-item {

  font-size: 13px;

  color: #666;

  display: flex;

  align-items: center;

  gap: 2px;

  margin-top: 15px;

}



.footer-bottom-item span {

  margin: 0 2px;

}



.footer-bottom-item a {

  color: #666;

}



.footer-bottom-item a:hover {

  color: var(--color1);

}



.footer-namad {

  display: flex;

  align-items: center;

  margin-top: 20px;

  gap: 20px;

}



.footer-namad img {

  height: 70px;

  max-width: 100%;

  object-fit: contain;

}



/* responsive footer  */



@media (max-width:767px) {

.footer-box {
  border: 0;
}

  .footer {

    padding-top: 30px;

    margin-top: 35px;

  }



  .footer-logo {

    height: 40px;

  }



  .footer-social {

    margin-top: 15px;

    margin-bottom: 15px;

  }



  .footer-social img {

    width: 24px;

  }



  .footer-box {

    margin-bottom: 15px;

  }



  .footer-header {

    font-size: 13px
  }



  .footer-ul {

    margin-top: 10px;

    margin-bottom: 25px;

  }



  .footer-link {

    font-size: 12px;

  }



  .footer-address {

    font-size: 12px;

    margin-top: 0;

    margin-bottom: 20px;

  }



  .footer-bottom {

    margin-top: 5px;

    padding-bottom: 70px;

  }



  .footer-bottom-item {

    /*flex-direction: column;*/

    font-size: 10px;
    display: none;

  }



  .footer-namad {

    margin-top: 0px;

  }



  .footer-namad img {

    height: 60px;

  }



}





/* breadcrumb */



.breadcrumb {

  font-size: 14px;

  margin: 0;

  padding: 0;

  background: transparent;

  margin-top: 25px;

  margin-bottom: 25px;

  justify-content: center;

}



li.breadcrumb-item a {

  color: #4e4e4e;

  font-weight: 500;

}



.breadcrumb-item+.breadcrumb-item::before {

  color: #9b9b9b;

  content: "|";

}



.breadcrumb-item.active a {

  color: var(--color1);

}



li.breadcrumb-item a:hover {

  color: var(--color2);

}



@media (max-width:767px) {

  li.breadcrumb-item {

    white-space: nowrap;

  }



  .breadcrumb {

    font-size: 12px;

    flex-wrap: nowrap;

    overflow: auto;

    margin-top: 20px;

    margin-bottom: 20px;

  }

}





/* pagination */



.pagination {

  justify-content: center;

  padding-top: 40px;

  margin-bottom: 0;

  padding-bottom: 40px;

  padding-left: 0;

}



.page-link {

  width: 38px;

  height: 38px;

  border: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #b2b2b2;

  margin: 0 5px;

  background: unset;

  background: transparent !important;

  border-radius: 12px !important;

  transition: 0.3s;

  border: 0;

  line-height: 1;

  font-size: 20px;

}



a.page-link:hover {

  color: var(--color1);

}



.page-item:first-child .page-link {

  margin-right: 5px;

}



span.page-link:hover {

  color: var(--color1);

}



.page-link:focus {

  box-shadow: unset;

}



.page-item.active .page-link {

  color: #000;

}



.page-item-title .page-link {

  width: auto;

  height: auto;

  font-size: 18px;

  color: #b2b2b2;

}



.page-item-title .page-link {

  width: auto;

  height: 38px;

  font-size: 18px;

  color: #b2b2b2;

}



.page-item-title .page-link:hover {

  background: var(--color2);

  color: #fff;

}



@media (max-width:767px) {

  .pagination {

    padding-top: 20px;

    padding-bottom: 20px;

  }



  .page-link {

    margin: 0;

  }



  .page-link span {

    display: none;

  }





  .page-item-title {

    /*display: none;*/

  }



  .page-link {

    width: 30px;

    height: 30px;

    margin: 0 3px;

  }

}





/* product */



.product-row {

  display: flex;

  flex-direction: column;

  margin-top: 10px;

  gap: 15px;

}



.product-row-flex {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.product-color {

  margin: 0;

}



.product-color input {

  display: none;

}



.product-color .product-color-item span {

  width: 22px;

  height: 22px;

  display: block;

  /*border-radius: 50px;*/

  /*border: 1px solid #ddd;*/

  position: relative;

  top: 0px;

  /*left: 5px;*/

}



.product-color .product-color-item {

  /*height: 34px;*/

  /*padding: 0 6px;*/

  display: flex;

  align-items: center;

  /*gap: 6px;*/

  justify-content: center;



  margin: 0;

  background: #fff;

  color: #666;

  font-size: 14px;

  cursor: pointer;

  user-select: none;

  /*padding-left: 8px;*/
  border: 2px solid transparent;

}



.product-color input:checked+.product-color-item {

  border-color: var(--color1);

  color: var(--color1);

  font-weight: 500;

}

.attribute-item.active .product-color input:checked+.product-color-item{
  border: 2px solid #000;

  border-radius: 6px;
}

.product-color input:disabled+.product-color-item {

  opacity: 0.5;

  cursor: unset;

}



.product-type {

  margin: 0;

}



.product-type input {

  display: none;

}



.product-type span {

  height: 34px;

  min-width: 30px;

  padding: 0 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  /*border: 1px solid #ddd;*/

  border-radius: 3px;

  margin: 0;

  background: #fff;

  color: #A0A0A6;

  font-size: 15px;

  cursor: pointer;

  user-select: none;

  padding-top: 3px;

}


.attribute-item.active .product-type span{
  color: #000;
}

.product-type input:checked+span {

  border-color: var(--color1);

  color: var(--color1);

  font-weight: 500;

}



.product-type input:disabled+span {

  opacity: 0.5;

  cursor: unset;

}



.show-modal-size {

  background: transparent;

  border: 0;

  outline: 0;

  font-size: 14px;

  color: #ff0404;

}



.faq-body {

  margin-top: 40px;

}



.faq-item {

  background: white;

  overflow: hidden;

  transition: all 0.3s ease;

  border-bottom: 1px solid #e7e7e7;

}



.faq-item:last-child {

  border-bottom: 0;

}



.faq-question {

  padding: 15px 0;

  cursor: pointer;

  font-size: 15px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: relative;

}



.faq-question::after {

  content: '\f107';

  font-family: 'raya-icon';

  font-size: 22px;

  color: #000;

  transition: transform 0.3s ease;

  min-width: 26px;

  height: 26px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  padding-top: 3px;

}



.faq-item.active .faq-question::after {

  transform: rotate(180deg);

  padding-top: 1px;

}



.faq-answer {

  height: 0;

  overflow: hidden;

  transition: height 0.4s ease;

}



.faq-answer-content {

  padding-bottom: 15px;

  font-size: 14px;

  line-height: 2;

}



.product-sticky .breadcrumb {

  margin-top: 0;

  justify-content: start;

}



.product-title {

  font-size: 18px;

  font-weight: 500;

  color: #000;

}



.product-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.product-price {

  display: flex;

  align-items: center;

  gap: 10px;

  border: 1px solid #ededed;

  padding: 5px;

  min-width: 300px;

  justify-content: end;

}



.product-price-off {

  font-size: 17px;

  color: #9c9c9c;

  text-decoration: line-through;

  line-height: 1;

}



.product-price-main {

  font-size: 18px;

  font-weight: 600;

}



.product-price-main i {

  font-size: 14px;

}



.product-price-discount {

  background: #000;

  color: #fff;

  height: 32px;

  padding: 0 10px;

  display: flex;

  align-items: center;

  padding-top: 3px;

}



.product-row-title {

  font-size: 16px;

  color: #000;

  font-weight: 500;

}



.product-order {

  display: flex;

  justify-content: end;

  height: 38px;

  margin-top: 20px;

  gap: 5px;

}



.product-btn {

  background: transparent;

  border: 0;

  outline: none;

  font-size: 14px;

}



.product-count {

  user-select: unset;

  text-align: center;

  width: 40px;

  border: 0;

  background: var(--color1);

  color: #fff;

  font-size: 18px;

  outline: none;

  cursor: unset;

  min-height: 37px;

  /*border-radius: 4px;*/

  margin-left: 5px;

}





.product-btn-add {

  background: var(--color1);

  color: #fff;

  border: 0;

  outline: none;

  padding: 8px 30px;

  font-size: 14px;

  /*border-radius: 4px;*/

  width: 220px;

}



.product-snapp img {

  width: 34px;

}



.product-snapp {

  background: #e8f6ff;

  margin-top: 15px;

  font-size: 14px;

  display: flex;

  align-items: center;

  gap: 15px;

  color: #1579d3;

  font-weight: 500;

}



.product-relative {

  margin-top: 70px;

}



.btn-heart {

  border: 0;

  background: transparent;

  padding: 0;

  margin-right: auto;

  display: flex;

  margin-bottom: 5px;

}



@media (max-width:767px) {



  .product-relative {

    margin-top: 30px;

  }



  .product-flex {

    flex-direction: column;

  }



  .product-title {

    font-size: 16px;

    margin-left: auto;

  }



  .product-price {

    margin-top: 10px;

    margin-right: auto;

    width: 260px;

  }



  .product-price-off {

    font-size: 14px;

    text-align: end;

    width: 80px;

  }



  .product-price-main {

    font-size: 15px;

    width: 130px;

  }



  .product-price-discount {

    height: 26px;

    font-size: 14px;

    width: 50px;

  }



  .product-snapp {

    margin-top: 15px;

    font-size: 12px;

    padding: 5px;

    gap: 10px;

  }



  .product-row-title {

    font-size: 14px;

  }



  .product-type span {

    height: 29px;


    font-size: 12px;

  }



  .product-row {

    padding-bottom: 0;

    margin-top: 15px;

    gap: 5px;

  }



  .product-btn-add {

    font-size: 12px;

  }



  .faq-body {

    margin-top: 20px;

  }



  .product-color .product-color-item {

    /*height: 35px;*/

    font-size: 12px;

  }



  .show-modal-size {

    font-size: 12px;

  }



  .product-order {

    height: 34px;

  }



  .product-btn {

    font-size: 12px;

  }



  .product-count {

    font-size: 16px;

  }



  .faq-answer-content {

    font-size: 12px;

  }



  .faq-question::after {

    font-size: 18px;

  }



  .faq-question {

    font-size: 14px;

  }



}



/* swiper gallery  */



.product-wrapper {

  position: relative;

}



.product-img {

  width: 100%;

  cursor: zoom-in !important;

}



.swiper-product {

  position: relative;

}



@media (max-width:767px) {

  .product-sticky {

    margin-top: 15px;

  }



  .product-wrapper {

    margin-top: 135px;

  }



  .swiper-product {

    margin-left: auto;

    margin-right: auto;

    overflow: hidden;

    list-style: none;

    padding: 0;

    z-index: 1;

    /*margin-right: -15px;*/
    /**/
    /*margin-left: -15px;*/

  }



  .product-img {

    height: 500px;

    object-fit: cover;

  }



  .swiper-product .swiper-pagination-bullet-active {

    background: #000;

  }



}



@media (min-width:768px) {

  .pr-md-0 {

    padding-right: 0;

  }



  .product-wrapper {

    margin-bottom: 8%;

  }



  .product-wrapper .row {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

  }





  .swiper-product .swiper-wrapper {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    transform: unset !important;

  }



  .swiper-product .swiper-pagination {

    position: sticky;

    top: 50%;

    margin-right: 1.5625rem;

    display: flex;

    flex-direction: column;

    gap: .625rem;

  }



  .swiper-product .swiper-pagination-bullet {

    height: .4375rem;

    width: .4375rem;

    border: 1px solid #000;

    border-radius: 50%;

    cursor: pointer;

    background: transparent;

    opacity: 1;

  }



  .swiper-product .swiper-pagination-bullet-active {

    background-color: #000;

  }



  .pagination-body {

    position: absolute;

    height: 100%;

  }



  .product-sticky {

    padding-top: 25px;

    padding-left: 25px;

    position: sticky;

    top: 80px;

    padding-bottom: 0;

  }



  .product-info {

    padding: 50px 80px;

    padding-bottom: 0;

  }



  .singel-product-short-desc.singel-product-info__panel--paragraph {

    margin-top: 35px !important;

  }

}



/* gallery*/



#productGalleryModal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.8);

  background: #fff;

  justify-content: center;

  align-items: center;

  z-index: 1000;

}



.gallery-modal-body img {

  user-select: none;

}



.gallery-modal-body {

  position: relative;

  width: 100%;

  max-width: 700px;

  background: #fff;

  padding: 20px;

}



.gallery-modal-body .swiper-button-next,

.gallery-modal-body .swiper-button-prev {

  opacity: 1;

}



.gallery-modal-body .swiper-button-disabled {

  opacity: 0;

}



#closeModalBtn {

  position: fixed;

  right: 10px;

  top: 10px;

  background: transparent;

  border: 0;

  color: #000;

  font-size: 20px;

  z-index: 9;

}



.swiper-slide img.zoomed {

  cursor: grab;

  transform: scale(2);

  transition: transform 0.3s ease;

  transform-origin: top left;

  position: relative;

}



.singel-product__images--display {

  cursor: zoom-in !important;

}



.singel-product__gallery--image {

  cursor: zoom-in !important;

}



.px-3 {

  padding-right: 15px !important;

  padding-left: 15px !important;

}



/* size modal */



.size-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 0 4px 4px 0;

}



.size-container {

  padding: 30px;

  padding-right: 0;

}



.size-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 15px;

}



.size-title {

  font-size: 16px;

  color: #1a1a1a;

}



.size-mute {

  font-size: 14px;

}





.size-table {

  border-collapse: collapse;

  width: 100%;

  font-size: 14px;

  text-align: center;

  background-color: white;

  direction: rtl;

}



.size-table th,

.size-table td {

  border: 2px solid #ffffff;

  padding: 10px 8px;

  vertical-align: middle;

}



.size-table th {

  background-color: #000000;

  color: #ffffff;

  font-weight: bold;

  font-size: 14px;

  border-color: #333;

}



.size-table tbody tr:nth-child(even) {

  background-color: #f5f5f5;

}



.size-table tbody tr:nth-child(odd) {

  background-color: #ffffff;

}



.size-table td {

  background-color: inherit;

  color: #000000;

}



.size-end {

  display: flex;

  align-items: center;

  margin-top: 15px;

  gap: 15px;

}



.size-note {

  text-align: center;

  margin-top: 16px;

  font-size: 12px;

  color: #555;

  border-top: none;

}



.size-btn {

  background: #f3f3f3;

  border: 0;

  font-size: 16px;

  padding: 8px 20px;

}



.size-btn:hover {

  background: #ddd;

}



@media (max-width: 767px) {

  .size-container {

    padding: 15px 10px;

    overflow-x: auto;

  }



  .size-table th,

  .size-table td {

    padding: 7px 6px;

    font-size: 10px;

  }



  .size-title {

    font-size: 14px;

  }



  .size-mute {

    font-size: 12px;

  }



  .size-btn {

    font-size: 12px;

    padding: 8px 16px;

  }

}





/* pc */

.product-comment {

  margin-top: 70px;

}



.pc-title {

  color: #000;

  position: relative;

  margin-bottom: 25px;

  padding-bottom: 10px;

}



.pc-title::after {

  content: '';

  position: absolute;

  width: 80px;

  height: 2px;

  background: var(--color2);

  bottom: 0;

  right: 0;

  border-radius: 20px;

}



.pc-side {

  display: flex;

  flex-direction: column;

  gap: 15px;

  position: sticky;

  top: 95px;

}



.pc-side-num {

  font-size: 14px;

}



.pc-side-num span {

  font-size: 30px;

  color: #000;

}



.pc-side-flex {

  display: flex;

  align-items: center;

  gap: 10px;

}



.pc-side-rate {

  display: flex;

  align-items: center;

  color: #f9a825;

}



.pc-side-mute {

  font-size: 12px;

  color: #666;

}



.pc-side-text {

  font-size: 12px;

}



.pc-side-btn {

  height: 40px;

  border: 1px solid var(--color1);

  background: transparent;

  border-radius: 8px;

  font-size: 14px;

  font-weight: 600;

  transition: 0.3s;

}



.pc-side-btn:hover {

  background: var(--color1);

  color: #fff;

}



.pc-side-info {

  font-size: 13px;

  color: #666;

  line-height: 1.8;

}



.comment {

  border-top: 1px solid #ebebeb;

  padding-top: 25px;

  margin-bottom: 25px;

}



.comment-info {

  display: flex;

  align-items: center;

}



.comment-info i {

  width: 36px;

  height: 36px;

  background: #eee;

  border-radius: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #666;

  margin-left: 10px;

}



.comment-user {

  font-size: 15px;

  font-weight: 600;

}



.comment-info span {

  width: 6px;

  height: 6px;

  background: #e0e0e2;

  border-radius: 50px;

  margin: 0 8px;

}



.comment-badge {

  color: #2e7b32;

  font-size: 12px;

  background: rgba(76, 175, 80, 0.1);

  padding: 3px 8px;

  border-radius: 50px;

  font-weight: 600;

}



.comment-rate {

  display: flex;

  color: #ffc850;

  margin-top: 10px;

  font-size: 20px;

}



.comment-rate i {

  text-shadow: 0 0 #b7b7b7;

}



.comment-text {

  text-align: justify;

  font-size: 14px;

  line-height: 2;

  color: #000;

}



.comment-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.comment-time {

  font-size: 12px;

}



@media (max-width:767px) {

  .product-comment {

    margin-top: 35px;

  }



  .pc-title {

    font-size: 14px;

    margin-bottom: 15px;

  }



  .comment-list {

    display: flex;

    flex-wrap: nowrap;

    overflow: auto;

    gap: 10px;

  }



  .comment {

    border: 1px solid #ebebeb;

    padding: 10px;

    border-radius: 8px;

    min-width: 270px;

    margin-bottom: 0;

  }



  .comment-time {

    font-size: 8px;

    white-space: nowrap;

  }



  .comment-info i {

    width: 26px;

    min-width: 26px;

    height: 26px;

    font-size: 12px;

  }



  .comment-info span {

    width: 4px;

    height: 4px;

    margin: 0 4px;

  }



  .comment-user {

    font-size: 11px;

  }



  .comment-info {

    width: 100%;

  }



  .comment-text {

    text-align: right;

    font-size: 9px;

  }



  .comment-badge {

    font-size: 8px;

    padding: 2px 6px;

  }



  .comment-rate {

    margin-top: 5px;

    font-size: 14px;

  }



  .pc-side {

    gap: 5px;

    position: relative;

    top: 10px;

  }



  .pc-side-num span {

    font-size: 20px;

  }



  .pc-side-btn {

    height: 36px;

    font-size: 12px;

  }



  .pc-side-info {

    font-size: 11px;

  }



  .pc-side-text {

    font-size: 10px;

  }



  .pc-side-mute {

    font-size: 10px;

  }

}



/* modal comment */



.modal-comment-show {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 30px;

  background: #f3f3f3;

  border-radius: 10px;

}



.modal-comment-show span {

  font-size: 16px;

  color: #000;

}



.modal-comment-show img {

  width: 70px;

  height: 70px;

  object-fit: cover;

  border-radius: 10px;

}



.modal-comment-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.modal-comment-title {

  color: #000;

  font-weight: 600;

  font-size: 15px;

}



.modal-comment-title span {

  color: red;

}



.wrapper-star {

  display: flex;

  gap: 10px;

  font-size: 20px;

}



.wrapper-star input {

  display: none;

}



.wrapper-star label {

  margin: 0;

  cursor: pointer;

  display: flex;

  flex-direction: column;

  align-items: center;

}



.wrapper-star span {

  font-size: 14px;

}



i.icon-star-empty {

  color: #000;

}



i.icon-star {

  color: #f9bc00;

}





.modal-comment-row {

  border-top: 1px solid #eee;

  margin-top: 20px;

  padding-top: 20px;

}



.modal-comment-text {

  width: 100%;

  border: 1px solid #ddd;

  padding: 10px;

  margin-top: 10px;

  border-radius: 8px;

  font-size: 15px;

}





#modal-comment .modal-content {

  border-radius: 10px;

}



#modal-comment .modal-footer .btn {

  width: 100%;

  height: 42px;

  border-radius: 8px;

  background: var(--color1);

  border-color: var(--color1);

}



.home-info.fixed-footer {

  margin-bottom: -60px;

  margin-top: 60px;

}



@media (max-width:767px) {



  .home-info.fixed-footer {

    margin-bottom: -35px;

    margin-top: 35px;

  }



  #modal-comment .modal-title {

    line-height: 2;

    font-size: 14px;

  }



  #modal-comment .modal-footer .btn {

    height: 40px;

    font-size: 13px;

  }



  .modal-comment-show {

    margin-bottom: 20px;

  }



  .modal-comment-show span {

    font-size: 14px;

  }



  .modal-comment-title {

    font-size: 14px;

  }



  .wrapper-star {

    font-size: 16px;

  }



}





/* pagination */



.pagination {

  justify-content: center;

  padding-top: 50px;

  margin-bottom: 0;

  padding-bottom: 20px;

}



.page-link {

  width: 38px;

  height: 38px;

  border: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color1);

  margin: 0 5px;

  background: unset;

  padding-top: 10px;

  background: #0000000D;

  border: 0;

  background: #fff;

  transition: 0.3s;

  font-size: 14px;

}



a.page-link:hover {

  background: var(--color1);

  color: #000;

}



.page-item:first-child .page-link {

  margin-right: 6px;

}



span.page-link:hover {

  background: #fff;

  color: var(--color1);

}



.page-link:focus {

  box-shadow: unset;

}



.page-item.active .page-link {

  color: #000;

  background-color: var(--color1);

  border-color: var(--color1);

}



.page-item-title .page-link {

  height: 38px;

  font-size: 14px;

  width: 38px;

  color: var(--color1);

}



.page-item-title .page-link:hover {

  background: var(--color1);

  color: #fff;

}



@media (max-width:767px) {

  .pagination {

    padding-top: 0;

    padding-bottom: 20px;

  }



  .page-link {

    margin: 0;

  }



  .page-link span {

    display: none;

  }





  .page-item-title {

    /*display: none;*/

  }



  .page-link {

    width: 30px;

    height: 30px;

    margin: 0 3px;

  }



}





/* sort */



.sort-body {

  display: flex;

  align-items: center;

}



.sort-title {

  color: #323232;

  font-size: 14px;

  font-weight: 600;

  margin-left: 15px;

}



.sort-item-flex {

  display: flex;

}



.sort-item:hover {

  color: var(--color2);

  border-color: var(--color2);

}



.sort-item {

  background: #fff;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #666;

  font-size: 14px;

  font-weight: 500;

  padding: 5px 10px;

  border-radius: 30px;

  transition: 0.3s;

}



.sort-item.active {

  border-color: var(--color1);

  color: var(--color1);

}



@media (max-width:767px) {

  .sort-title {

    font-size: 12px;

    white-space: nowrap;

    margin-left: 10px;

  }



  .sort-item-flex {

    overflow: auto;

  }



  .sort-item {

    height: 24px;

    font-size: 12px;

    padding: 0 8px;

    white-space: nowrap;

  }



  .sort-body {

    margin-bottom: 15px;

  }



}



/* product list */



.section-wrapper-title {

  text-align: center;

  font-weight: 600;

  margin-bottom: -15px;

  color: #000;

  font-size: 15px;

}



.section-wrapper-title-en {

  text-transform: uppercase;

  text-align: center;

  z-index: -1;

  font-size: 60px;

  color: #f2f2f2;

  position: absolute;

  right: 0;

  left: 0;

  top: -28px;

}



.section-wrapper {

  margin-top: 60px;

  margin-bottom: 60px;

  position: relative;

}



.product-list .row {

  margin-left: -7px;

  margin-right: -7px;

}



.product-list .col-6 {

  padding-left: 7px;

  padding-right: 7px;

}



.blog-list .row {

  margin-left: -7px;

  margin-right: -7px;

}



.blog-list .col-12 {

  padding-left: 7px;

  padding-right: 7px;

}



.filter-btn {

  color: #323232;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

}



.row-flex {

  display: flex;

  align-items: center;

  gap: 30px;

  margin-bottom: 5px;

  margin-top: 35px;

}







/* switch */



.sort-switch {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 0;

}



.sort-switch span {

  cursor: pointer;

  font-weight: 600;

  color: #000;

  margin: 0;

  font-size: 14px;

}



input[type="checkbox"].switch {

  font-size: 16px;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  width: 3em;

  height: 1.5em;

  background: #ddd;

  border-radius: 3em;

  position: relative;

  cursor: pointer;

  outline: none;

  -webkit-transition: all .2s ease-in-out;

  transition: all .2s ease-in-out;

  opacity: 1;

  right: auto !important;

  left: auto !important;

  position: relative;

}



input[type="checkbox"].switch:after {

  position: absolute;

  content: "";

  width: 1.5em;

  height: 1.5em;

  border-radius: 50%;

  background: #fff;

  -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, .3);

  box-shadow: 0 0 0.25em rgba(0, 0, 0, .3);

  -webkit-transform: scale(.7);

  transform: scale(.7);

  left: 0;

  -webkit-transition: all .2s ease-in-out;

  transition: all .2s ease-in-out;

}



input[type="checkbox"].switch:checked {

  background: var(--color1);

}



input[type="checkbox"].switch:checked:after {

  left: calc(100% - 1.5em);

}



input[type="checkbox"].switch:after {

  position: absolute;

  content: "";

  width: 1.5em;

  height: 1.5em;

  border-radius: 50%;

  background: #fff;

  -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, .3);

  box-shadow: 0 0 0.25em rgba(0, 0, 0, .3);

  -webkit-transform: scale(.7);

  transform: scale(.7);

  left: 0;

  -webkit-transition: all .2s ease-in-out;

  transition: all .2s ease-in-out;

}



/* range  */

.acc-range-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 15px;

  font-weight: 500;

  color: #222222;

  margin-bottom: 10px;

  font-size: 14px;

}



.acc-range-info {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 5px;

  font-size: 12px;

  color: #222222;

  padding: 0 20px;

  padding-bottom: 15px;

}





:root {

  --clr-prim: var(--color1);

  --clr-prim-h: var(--color1);

  --clr-bad: var(--color1);

  --clr-box: #F9F9F9;

  --clr-box-dark: gray;

  --clr-border: #D9D9D9;

  --txt-clr: #333333;

  --shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1);

  --cubic: cubic-bezier(0.11, 0.54, 0.33, 1.01);

}



.dual-range {

  --range-size: 12px;

  --range-width: 100%;

  --handle-size: 1.3;

  height: 6px;

  width: var(--range-width);

  background: #cccccc;

  border-radius: 50px;

  position: relative;

  user-select: none;

  right: 5px;

}



.dual-range .highlight {

  position: absolute;

  height: 6px;

  width: calc(var(--x-2) - var(--x-1) + var(--range-size) * var(--handle-size));

  left: var(--x-1);

  background: var(--clr-prim);

  z-index: 1;

  border-radius: 50px;

}



.dual-range .handle {

  width: calc(var(--range-size) * var(--handle-size));

  height: calc(var(--range-size) * var(--handle-size));

  background: var(--color1);

  position: absolute;

  box-shadow: var(--shadow);

  border-radius: 50%;

  top: 50%;

  transform: translateY(-50%);

  z-index: 2;

  cursor: grab;

}



.dual-range .handle:active {

  cursor: grabbing;

}



.dual-range .handle.left {

  left: var(--x-1);

}



.dual-range .handle.right {

  left: var(--x-2);

}



/* list */



.list-product .row {

  margin-left: -7px;

  margin-right: -7px;

}



.list-product .col-6 {

  padding-left: 8px;

  padding-right: 8px;

}



.head-title {

  font-size: 16px;

  color: #222222;

  margin-top: 15px;

  margin-bottom: 20px;

}



.head-title strong {

  font-weight: 600;

  margin-right: 5px;

}



p#no-results {

  text-align: center;

  font-size: 14px;

  margin-top: 15px;

}



.filter-box {

  border: 1px solid #00000029;

  user-select: none;

  border: 1px solid #F5F5F5;

  border-radius: 12px;

  background: #fff;

}



.filter-title {

  font-size: 16px;

  font-weight: 600;

  color: #222222;

  margin: 20px;

}



.filter-text {

  font-size: 14px;

  font-weight: 700;

  margin-top: 8px;

  color: var(--color2);

}



.filter-row {

  border-bottom: 2px solid #E6EAED;

}



.filter-row:last-child {

  border-bottom: 0;

}



.filter-search {

  display: flex;

  background: #FFFFFF80;

  height: 42px;

  margin-top: 15px;

  align-items: center;

  border-radius: 8px;

  padding: 0 15px;

  border: 2px solid #E4E4E4;

}



.filter-search input {

  background: transparent;

  width: 100%;

  height: 100%;

  border: 0;

  outline: none;

  font-size: 12px;

}



.filter-search button {

  background: transparent;

  padding: 0;

  border: 0;

  display: flex;

  align-items: center;

  color: #787878;

  margin-top: 5px;

  font-size: 14px;

}



.filter-btn-collapce {

  color: #222222;

  font-size: 14px;

  font-weight: 600;

  display: flex;

  align-items: center;

  justify-content: space-between;

  cursor: pointer;

  padding: 18px;

}



.filter-btn-collapce.collapsed:after {

  transform: rotate(180deg);

}



.filter-btn-collapce:after {

  content: '\f107';

  font-family: "raya-icon";

  transition: 0.3s;

}



.filter-check-item:first-child {

  margin-top: 0;

}



.filter-check-item:first-child {

  margin-bottom: 0;

  margin: 20px;

}



.filter-check-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  cursor: pointer;

  font-size: 14px;

  font-weight: 400;

  color: #222222;

  margin: 20px;

}



.filter-check-item div {

  display: flex;

  align-items: center;

}



.filter-check-item input {

  width: 20px;

  height: 20px;

  accent-color: var(--color2);

  margin-left: 10px;

  cursor: pointer;

}



.filter-tag-body {

  display: flex;

  flex-wrap: wrap;

}



.filter-tag {

  border: 1px solid var(--color1);

  font-size: 13px;

  color: var(--color2);

  border-radius: 20px;

  padding: 2px 8px;

  margin-top: 15px;

  margin-left: 10px;

  transition: 0.3s;

}



.filter-tag:hover {

  background: var(--color1);

  color: #fff;

}



.filter-row-title {

  font-size: 14px;

  font-weight: 700;

  color: #222222;

  margin-top: 15px;

}



.filter-row-item {

  display: flex;

  align-items: center;

  color: #222222;

  margin-top: 15px;

  position: relative;

  font-size: 14px;

}



.filter-row-item:after {

  content: '\f104';

  font-family: "raya-icon";

  display: block;

  margin-right: auto;

}



.filter-search {

  background: #eee;

}



.filter-box {

  position: fixed;

  top: 0;

  right: 0;

  height: 100%;

  z-index: 9999;

  transform: translateX(+100%);

  transition: 0.5s;

  width: 70%;

  background: #fff;

  border-radius: 0;

  overflow: auto;

  max-width: 400px;

}



.filter-box.active {

  transform: translateX(0);

}



.filter-btn-mobile {

  position: fixed;

  bottom: 60px;

  left: 20px;

  z-index: 9;

  background: #000;

  color: #fff;

  border-radius: 50px;

  font-size: 14px;

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding-right: 1px;

  padding-top: 2px;

  display: none;

}



@media (max-width:767px) {

  .filter-btn {

    display: none;

  }



  .row-flex {

    display: block;

    margin-bottom: -15px;

    margin-top: 0px;

  }



  .filter-btn-mobile {

    display: flex;

  }



  .section-wrapper {

    margin-top: 30px;

    margin-bottom: 20px;

  }



  .section-wrapper-title {

    margin-bottom: -10px;

    font-size: 14px;

  }



  .section-wrapper-title-en {

    font-size: 38px;

    top: -16px;

  }



  .filter-title {

    font-size: 14px;

    margin: 15px;

  }



  .filter-btn-collapce {

    font-size: 12px;

    padding: 15px;

  }



  .acc-flex {

    font-size: 12px;

  }



  .acc-range-info {

    margin-top: 10px;

    font-size: 10px;

  }



  .sort-switch span {

    font-size: 12px;

  }



  .filter-check-item {

    font-size: 12px;

  }



  input[type="checkbox"].switch {

    transform: scale(0.8) translateX(-10px);

  }

}





.about-info {

  margin-top: 30px;

}



.about-img {

  width: 100%;

}



.about-title {

  color: #000;

  margin-bottom: 20px;

}



.about-text {

  text-align: justify;

  font-size: 15px;

  line-height: 1.8;

  color: #666;

}



@media (max-width:767px) {

  .about-info {

    margin-top: 20px;

  }



  .about-title {

    margin-bottom: 10px;

    font-size: 14px;

  }



  .about-text {

    font-size: 13px;

  }



  .about-img {

    margin-top: 15px;

  }

}



.card-blog::before {

  content: '';

  background-image: linear-gradient(0deg, #000000 0%, #00000000 100%);

  position: absolute;

  width: 100%;

  height: 100%;

  right: 0;

  top: 0;

  z-index: -1;

  opacity: 0.8;

  transition: 0.3s;

}



.card-blog {

  background-size: cover;

  background-position: center;

  position: relative;

  height: 350px;

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 15px;

  padding: 20px;

  overflow: hidden;

  z-index: 1;

  color: #fff !important;

  font-size: 15px;

  font-weight: 300;

}



.card-blog:hover::before {

  opacity: 1;

}



.card-blog i {

  min-width: 34px;

  height: 34px;

  border: 1px solid #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50px;

  color: #fff;

  font-size: 18px;

  transition: 0.3s;

}



.card-blog i:hover {

  background: #fff;

  color: #000;

}









/* blog */





.blog-list .card-blog-img-body {

  width: 100%;

  border-radius: 12px 12px 0 0;

}



.blog-list-title {

  font-size: 26px;

  text-align: center;

  margin-bottom: 30px;

  font-weight: 600;

}



.blog-search {

  border-radius: 5px;

  height: 35px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 15px;

  border-radius: 10px;

  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);

  background-color: #fff;

}



.blog-search input {

  outline: none;

  border: 0;

  font-size: 12px;

  padding-right: 15px;

  width: 100%;

}



.blog-search button {

  border-radius: 10px;

  background: var(--color1);

  border: 0;

  height: 100%;

  width: 55px;

  min-width: 55px;

  color: #fff;

  border-radius: 10px;

  transition: 0.3s;

  padding-top: 5px;

}



.blog-search button:hover {

  opacity: 0.8;

}



.blog-img {

  width: 100%;

}



.blog-title {

  font-size: 20px;

  font-weight: 600;

  text-align: right;

  color: var(--color1);

}



.blog-date {

  font-size: 12px;

  font-weight: bold;

  text-align: left;

  color: #969696;

}



.acc-body .nav a,

.acc-body .nav label {

  display: block;

  padding: 5px;

  color: #1a1818;

  transition: all .25s ease-in;

  margin-bottom: 0;

  font-size: 14px;

  font-weight: 500;

}



.nav label {

  cursor: pointer;

}



.group-list a,

.group-list label {

  padding: 5px;

  box-shadow: inset 0 -1px lighten(#252525, 7%);

}



.sub-group-list a,

.sub-group-list label {

  padding-left: 4rem;

  background: #353535;

  box-shadow: inset 0 -1px lighten(#353535, 7%);

}



.sub-sub-group-list a,

.sub-sub-group-list label {

  padding-left: 6rem;

  background: #454545;

  box-shadow: inset 0 -1px lighten(#454545, 7%);

}



.group-list,

.sub-group-list,

.sub-sub-group-list {

  height: 100%;

  max-height: 0;

  overflow: hidden;

  transition: max-height .5s ease-in-out;

  list-style: disc;

  color: var(--color1);

}



.nav__list input[type=checkbox]:checked+label+ul {

  max-height: 1000px;

}



label>span {

  float: right;

  transition: transform .65s ease;

}



.nav__list input[type=checkbox]:checked+label>span {

  transform: rotate(-90deg);

}



.nav__list {

  list-style: none;

  margin: 0;

  padding: 0;

  width: 100%;

}



ul.group-list li a {

  color: #808080;

}



.icon {

  font-size: 18px;

  transition: 0.3s;

  color: var(--color1);

}



.icon.active {

  transform: rotate(180deg);

  color: var(--color1);

}



.acc {

  border-radius: 10px;

  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);

  background-color: #fff;

}



.acc-btn {

  display: flex;

  align-items: center;

  width: 100%;

  background: #f8f8f8;

  height: 45px;

  justify-content: space-between;

  border-radius: 8px 8px 0 0;

  font-size: 14px;

  padding: 0px 15px;

  font-weight: bold;

  border: 0;

  border-bottom: 1px solid #e9e9e9;

  color: #646464;

}



.acc-btn i {

  color: var(--color1);

}



.acc-btn.collapsed {

  border-radius: 5px;

  border-bottom: 0;

}



.acc-body {

  border: 0;

  background-color: #f8f8f8;

  border-top: 0;

  padding: 10px;

  border-radius: 0 0 8px 8px;

}





.blog-comment {

  background: #fff;

  color: #303030;

  padding: 25px;

  margin-top: 30px;

  border: 1px solid #70707026;

}



@media (max-width:767px) {



  .blog-comment {

    padding: 15px;

  }



  .page-link {

    margin: 0;

  }



  .page-link span {

    display: none;

  }



  .page-link {

    font-size: 14px;

  }



  .blog-title {

    font-size: 16px;

  }



  .blog-list-title {

    font-size: 18px;

    margin-bottom: 20px;

  }



}



/* blog content pro max */



.blog-content {

  margin-top: 30px;

  line-height: 1.7;

  color: #334155;

  font-size: 15px;

  background: #fbfbfb;

  padding: 20px;

}



.blog-content h1 {

  font-size: 1.5rem;

  color: #1e293b;

  border-bottom: 2px solid var(--color2);

  padding-bottom: 12px;

  margin: 25px 0 18px;

  font-weight: 700;

}



.blog-content h2 {

  font-size: 1.35rem;

  color: #1e293b;

  margin: 22px 0 12px;

  padding-right: 12px;

  border-right: 4px solid #bbbbbb;

  font-weight: 600;

}



.blog-content h3 {

  font-size: 1.25rem;

  color: #334155;

  margin: 18px 0 10px;

  font-weight: 600;

}



.blog-content h4 {

  font-size: 1.1rem;

  color: #475569;

  margin: 15px 0 8px;

  font-weight: 600;

}



.blog-content p {

  margin-bottom: 18px;

  text-align: justify;

  font-size: 0.95rem;

  line-height: 1.7;

  color: #334155;

}



.blog-content hr {

  margin: 25px 0;

  border: none;

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--color2), transparent);

}



.blog-content img {

  max-width: 100%;

  height: auto;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

  margin: 18px 0;

  display: block;

  margin: auto;

}



.blog-content video {

  max-width: 100%;

  height: auto;

  border-radius: 12px;

  margin: 18px 0;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



.blog-content table {

  width: 100%;

  border-collapse: collapse;

  margin: 20px 0;

  font-size: 0.9rem;

  overflow: hidden;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

}



.blog-content thead {

  background: linear-gradient(135deg, var(--color1) 0%, #000 100%);

  color: white;

}



.blog-content th {

  padding: 10px 12px;

  text-align: right;

  font-weight: 600;

  font-size: 0.9rem;

  white-space: nowrap;

}



.blog-content td {

  padding: 8px 12px;

  border-bottom: 1px solid #e2e8f0;

}



.blog-content tbody tr:hover {

  background-color: #f8fafc;

}



.blog-content aside {

  background: #fef9e7;

  border-right: 3px solid #f59e0b;

  padding: 15px 18px;

  margin: 20px 0;

  border-radius: 10px;

  font-size: 0.9rem;

}



.blog-content ul,

.blog-content ol {

  margin: 12px 0 18px 25px;

  padding-right: 18px;

}



.blog-content li {

  margin: 6px 0;

  font-size: 0.95rem;

}



.blog-content blockquote {

  background: #f1f5f9;

  border-right: 3px solid var(--color2);

  padding: 12px 18px;

  margin: 18px 0;

  border-radius: 8px;

  font-size: 0.95rem;

  font-style: italic;

}



.blog-content a {

  color: var(--color2);

  text-decoration: none;

  border-bottom: 1px dashed var(--color2);

  transition: all 0.2s;

}



.blog-content a:hover {

  color: #c53030;

  border-bottom-color: #c53030;

}



.blog-content strong {

  color: #1e293b;

  font-weight: 600;

}



/* responsive blog-content */



@media (max-width: 768px) {

  .blog-content h1 {

    font-size: 1.5rem;

  }



  .blog-content h2 {

    font-size: 1.3rem;

  }



  .blog-content h3 {

    font-size: 1.15rem;

  }



  .blog-content p,

  .blog-content li {

    font-size: 0.9rem;

  }



  .blog-content th,

  .blog-content td {

    padding: 6px 10px;

  }



  .blog-content {

    margin-top: 15px;

  }

}



@media (max-width: 480px) {

  .blog-content h1 {

    font-size: 1.1rem;

  }



  .blog-content h2 {

    font-size: 1rem;

    padding-top: 5px;

  }



  .blog-content h3 {

    font-size: 0.9rem;

  }



  .blog-content p,

  .blog-content li,

  .blog-content aside {

    font-size: 0.85rem;

  }



  .blog-content table {

    display: block;

    overflow-x: auto;

    white-space: nowrap;

    font-size: 0.8rem;

  }

}















/* comment */



.comment-form-rate {

  display: flex;

  align-items: center;

  justify-content: end;

}



.comment-form-rate-star {

  margin-right: 15px;

  margin-left: 15px;

  direction: ltr;

}



.comment-form-rate-text {

  font-size: 16px;

  text-align: center;

  color: #000;

}



.wrapper-star input {

  display: none;

}



.wrapper-star label {

  margin: 0;

  cursor: pointer;

}



i.icon-star-empty {

  color: #000;

}



i.icon-star {

  color: #f9bc00;

}



.com-box {

  color: #303030;

}



.com-box-title {

  font-size: 18px;

  font-weight: 500;

  color: #303030;

  margin-bottom: 10px;

}



.com-box-text {

  margin-bottom: 10px;

  color: #303030;

}



.com-box-form {

  display: flex;

  flex-direction: column;

}



.com-box-form input {

  height: 44px;

  margin-top: 5px;

  padding: 10px;

  outline: none;

  background: #fff;

  border: 1px solid #9999996e;

  color: #000;

}



.com-box-form input:focus {

  border-color: var(--color1);

}



.com-box-form textarea {

  margin-top: 5px;

  padding: 10px;

  outline: none;

  background: #fff;

  border: 1px solid #9999996e;

  color: #000;

}



.com-box-form textarea:focus {

  border-color: var(--color2);

}



.com-box-form label {

  font-size: 16px;

}



.com-box-code input {

  border: 0;

  height: 40px;

  background: #fff;

  border: 1px solid #e6eaed6e;

  margin-right: 10px;

  text-align: center;

  outline-color: var(--color1);

  width: 100%;

  border-radius: 10px;

  max-width: 150px;

  /*color: #fff;*/

}



.com-box-code img {

  width: 140px;

}



.com-box-code {

  display: flex;

  align-items: center;

  white-space: nowrap;

  gap: 10px;

}



.com-box-recode {

  font-size: 14px;

  margin-top: 15px;

  font-weight: 300;

  display: block;

  color: var(--color2);

}



.com-box-mute {

  font-size: 14px;

  line-height: 2;

}



.com-box-submit {

  height: 50px;

  background: var(--color2);

  border: 0;

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  padding: 10px;

  margin-top: 10px;

  width: 100%;

  transition: 0.3s;

  margin-top: 15px;

}



.com-box-submit:hover {

  background: var(--color1);

  color: #fff;

}





.comment-item {

  margin-bottom: 20px;

  padding: 20px;

  border: 1px solid #70707026;

}





.comment-item-info {

  display: flex;

  align-items: center;

}



.comment-item-info i {

  background: #C9C9C9;

  color: #fff;

  width: 30px;

  height: 30px;

  line-height: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  border-radius: 30px;

  margin-left: 15px;

}



.comment-item-user {

  font-size: 16px;

  font-weight: 600;

  color: #7A7A7A;

  margin-left: 10px;

}



.comment-item-date {

  font-size: 14px;

  color: #7A7A7A;

}



.comment-item-text {

  font-size: 14px;

  margin-top: 15px;

}



/* responsive comment */



@media (max-width:767px) {

  .comment-item {

    padding: 15px;

    margin-bottom: 15px;

    box-shadow: unset;

  }



  .com-box-title {

    font-size: 14px;

  }



  .comment-item-user {

    font-size: 12px;

  }



  .comment-item-date {

    font-size: 12px;

  }



  .comment-item-text {

    font-size: 12px;

    margin-top: 10px;

  }





  .com-box-text {

    margin-top: 10px;

    font-size: 12px;

  }



  .com-box-form label {

    font-size: 14px;

  }



  .com-box-form input {

    height: 36px;

    margin-top: 0px;

  }



  .com-box-mute {

    font-size: 12px;

  }



  .comment-form-rate-text {

    font-size: 14px;

  }



  .com-box-recode {

    margin-top: 10px;

    font-size: 14px;

    display: block;

  }



  .com-box-submit {

    height: 38px;

    padding: 8px;

    font-size: 14px;

    margin-top: 10px;

    margin-top: 0;

  }

}



.blog-box {

  background: #fbfbfb;

  padding: 20px;

  position: relative;

}



.blog-box-title {

  display: flex;

}





.blog-box-list {

  margin-top: 25px;

}



.blog-box-item:hover {

  color: var(--color2);

}



.blog-box-item {

  background: #fff;

  display: block;

  color: #000;

  font-size: 14px;

  position: relative;

  margin-top: 15px;

  padding: 15px;

}



.blog-box-item:last-child {

  border-bottom: 0;

  padding-bottom: 0;

}





/* .contact */





.contact-us-form input {

  display: block;

  width: 100%;

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #495057;

  background-color: #f3f3f3;

  background-clip: padding-box;

  border: 0;

  border-radius: 0;

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  outline: none;

  border-bottom: 1px solid #dadada;

}



.contact-us-form textarea {

  display: block;

  width: 100%;

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: #495057;

  background-color: #f3f3f3;

  background-clip: padding-box;

  border: 0;

  border-radius: 0;

  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  outline: none;

  border-bottom: 1px solid #dadada;

}



.contact-us-form label {

  font-size: 14px;

  font-weight: 600;

  text-align: right;

  color: #000;

}



.contact-us-form input:focus {

  border-color: var(--color2);

}



.contact-us-form textarea:focus {

  border-color: var(--color2);

}



.contact-us-form button {

  background: var(--color1);

  border: 1px solid var(--color1);

  font-size: 14px;

  font-weight: 600;

  color: #fff;

  padding: 5px 10px;

  transition: 0.3s;

  width: 151.9px;

  height: 45.5px;

}



.contact-us-form button:hover {

  background: transparent;

  color: var(--color1);

}





.contact-social img {

  width: 24px;

}



.contact-social a {

  transition: 0.3s;

  filter: grayscale(1);

}



.contact-social a:hover {

  filter: grayscale(0);

}



.contact-social {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 10px;

}





.contact-row {

  border-bottom: 1px solid #f3f3f3;

  padding-bottom: 20px;

  margin-bottom: 20px;

}



.contact-title {

  font-size: 15px;

  font-weight: 600;

  color: #000;

  margin-bottom: 10px;

}



.contact-text {

  font-size: 14px;

  line-height: 1.8;

}



.contact-text span {

  color: #000;

  font-weight: 600;

}



.contact-text a {

  color: #000;

  direction: rtl;

  display: inline-block;

  margin-right: 15px;

}



.contact-mail {

  color: #000;

  display: block;

  text-align: center;

  text-transform: uppercase;

}



.contact-flex {

  display: flex;

  align-items: center;

  justify-content: space-between;

}





@media (max-width:767px) {



  .contact-title {

    font-size: 13px;

  }



  .contact-text {

    font-size: 12px;

  }



  .contact-row {

    padding-bottom: 15px;

    margin-bottom: 15px;

  }



  .contact-mail {

    font-size: 14px;

  }



  .contact-social img {

    width: 18px;

  }



  .contact-flex {

    align-items: start;

    flex-direction: column;

  }



  .contact-social {

    margin: auto;

    margin-bottom: 10px;

  }



  .contact-us-form label {

    font-size: 12px;

  }



  .contact-us-form button {

    width: 100%;

    height: 40px;

  }





}

/*new*/

.product-card {

  /* min-height: 31rem; */
  position: relative;


}

@media (max-width: 767px) {

  .product-card {

    /* min-height: 29.5rem; */


  }

  .product-add-btn {

    height: 37px !important;

  }

}

/*.card-product-color{*/

/*  bottom: 0;*/

/*  position: absolute;*/

/*}*/

@media (max-width: 767px) {

  .ck-box-item {

    flex-wrap: nowrap !important;

    gap: 10px !important;

  }

  .attribute-options {

    flex-wrap: wrap !important;

  }

}

.shipping-method-radio {

  min-height: 103px !important;

  display: flex !important;

}

.card-product-price {

  min-height: 18px !important;

}

.footer {

  position: relative;

}




.col-12.hidden-xs.col-md-8.order-2.order-md-1 {

  padding: 0 10%;

}

.product-btn-add.product-add-btn.next_it {

  padding: 9px 0;

}

.product-color .product-color-item span {

  height: 29px;
  border-radius: 3px;
}

.modal-header.mymodal-header,
.btn-modal-order-submit {

  background: #000;

  color: #FFF;

}

.suborder,
.cancelBtn {

  border: #000 1px solid;

  background: #000;

  color: #FFF;

}

.suborder:hover,
.cancelBtn:hover {

  color: #FFF;



}

.product-card.js-product-card.sectionscards {

  margin: auto -4px;

}

@media (max-width: 767px) {

  .col-12.hidden-xs.col-md-8.order-2.order-md-1 {

    padding: 0;

  }


  .product-card.js-product-card.sectionscards,
  .card-product.sectionscards .card-product-img-body {

    height: auto;

    min-height: unset;

  }



}

.attribute-item.js-product-color {

  width: 16px;

  height: 16px;

  display: inline-block;

  cursor: pointer;

  border: 2px solid transparent;

  margin-left: 7px;

}



.attribute-item.js-product-color.active {

  box-shadow: 0 0 0 1px #fff, 0 0 0 2px #000;

}

.js-card-next {

  cursor: pointer;

  transition: .2s;

}



.js-card-next svg {

  transition: .2s;

}

.card-product-img-2,
.card-product-img.attr-main-slide.js-product-image {

  /* object-fit: unset; */

}



/*new*/

.swiper-new {
  margin-left: auto;

  margin-right: auto;

  position: relative;

  overflow: hidden;

  list-style: none;

  padding: 0;

  z-index: 1;
}

.dropdown-list-body {
  position: relative;
}

.dropdown-list:before {
  content: " ";
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #fff;
  top: -9px;
  position: absolute;
  left: 11px;
}

.dropdown-list {
  display: none;
  position: absolute;
  box-shadow: 0 -6px 16px rgba(0, 0, 0, .1);
  background-color: #fff;
  padding-inline: 1rem;
  top: 85%;
  left: -5px;
}


.dropdown-list-body:hover .dropdown-list {
  display: block;
}

.list-entry:first-child {
  border-top: none;
}

.list-entry {
  line-height: 30px;
  white-space: nowrap;
  display: block;
  color: #747474;
  padding: 2px 0;
  border-top: 1px #f0f0f0 solid;
  font-size: 13px;
  text-align: center;
}

.list-entry:hover {
  color: black;
}

.product-card .swiper-pagination {
  background: transparent;
  box-shadow: unset;
}

.product-card .swiper-button-next {
  background-color: transparent !important;
  border: 0;
}

.product-card .swiper-button-prev {
  background-color: transparent !important;
  border: 0;
}

.product-card .swiper-pagination-bullet-active {
  width: 8px;
}


.sort-select {
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  border: 0;
  outline: none;
  width: 285px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.product-main-flex{
  direction: ltr;
  float: left;
}
@media (max-width:767px) {
  .sort-select {
    width: auto;
    min-width: 132px;
    font-size: 12px;
  }
  .product-add-btn.product-btn-add{
    width: 163px;
  }
  .product-main-flex{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    direction: unset;
    float: none;
  }
  .product-main-flex button{
    margin-top: 5px;
    margin-bottom: 5px;
  }
}

@media (min-width:767px) {
  .dropdown-list-body {
    position: relative;
    height: 75px;
    display: flex;
  }

  .product-card .swiper-pagination {
    display: none;
  }


}

@media (min-width: 1550px) {
  .col-xl-20 {
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }
}
#new-theme-form-container{
 width: 100%;
}
.editMobile{
  font-size: 12px;
  text-decoration: underline;
}
.new-login-input.text-center{
  font-family: initial;
  color: #777;
  margin-top: 4%;
}

.btn-submitorder{
  background: #dc3545;
}

/* --- تنظیمات کادر اصلی عکس --- */
.swiper-product {
  position: relative;
  width: 100%;
  border-radius: 8px;
}
.swiper-product .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-product .product-img {
  width: 100%;
}
#thumbnailCarousel {
  min-height: 80px;
  display: block;
}

/* --- تنظیمات دقیق و استاندارد Skeleton --- */
.skeleton {
  position: relative !important;
  /* ایجاد گرادیانت برای افکت شبرنگ */
  background: linear-gradient(90deg, #e2e5e7 25%, #f0f2f5 50%, #e2e5e7 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-loading 1.2s infinite linear !important; /* انیمیشن بدون اسکرول */
  border-color: transparent !important;
  pointer-events: none !important;
  color: transparent !important; /* مخفی کردن متن‌های مستقیم */
}

.box-swiper-show.skeleton{
  height: 100vh;
}
@media (max-width: 767px) {
  .box-swiper-show.skeleton{
    height: 500px;
    position: absolute !important;
    z-index: 10;
    width: 100%;
    left: 0;
  }
}
/* انیمیشن حرکت پس‌زمینه */
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* مخفی کردن کامل محتوای داخل اسکلتون بدون به هم ریختن ابعاد */
.skeleton * {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.loading-active {
  overflow: hidden !important; /* جلوگیری از اسکرول خوردن صفحه هنگام لودینگ */
}

#full-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader-logo {
  width: 180px;
  margin-bottom: 20px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

.loader-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--color1, #ff0000);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

.home-product{
  margin-bottom: 2rem;
}

.attribute-item.js-product-color{
  border: 1px solid lab(65.6464% 1.53497 -5.42429);
}
.attribute-item.js-product-color.active{
  border: unset;
}

.icon-toman::before{
  margin-right: 0;
}
.product-no-color span{
  border: 1px solid #a5a3a3;
  min-width: 39px;
}
.product-no-color span:checked{
  border: 1px solid #000;
}
.attribute-item .product-color span{
  border: 1px solid #a5a3a3;
  min-width: 34px;
}
.attribute-item.active .product-color span{
  border: unset;
}

body.loading-active { overflow: hidden !important; }

/* استایل لایه پوششی تمام صفحه */
#global-page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* رنگ پس‌زمینه */
  z-index: 99999999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* کلاس مخفی کننده لودر */
#global-page-loader.hide-loader {
  opacity: 0;
  visibility: hidden;
}

/*.swiper-backface-hidden .swiper-slide{*/
/*  overflow: auto;*/
/*}*/

.gallery-modal-body img {
  height: 100vh !important;
  object-fit: contain;
}
.card-product-color{
  margin-right: 3px;
  margin-bottom: 3px;
}

.home-slider.max .swiper-slide{
  overflow-y: hidden !important;
}


.heart-icon {
  cursor: pointer;
  transition: all 0.25s ease;
}

.heart-icon.filled {
  color: #878179;
}

.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{
  overflow-y: hidden !important;
}

.jconfirm.jconfirm-light .jconfirm-box {
  width: max-content !important;
  min-width: 85% !important;
}
@media (max-width: 767px) {
  .jconfirm.jconfirm-light .jconfirm-box {
    width: auto !important;
  }
}