html {
  scroll-behavior: smooth;
}

/* Global Box-Sizing and Reset */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Root Variables */
:root {
  --cwhite: #ffffff;
  --cblack: #0C0C0C;
  --gray-darker: #505050;
  --gray-neutral: #cbcbcb;
  --primary-900: #021736;
  --primary-700: #042352;
  --primary-600: #2f0155;
  --primary-500: #063a88;
  --primary-400: #0951be;
  --primary-100: #428af6;
  --primary-75: #78abf9;
  --primary-50: #e2beff;
  --primary-25: #e4eefe;
  --primary-color: #4c0387;
  --primary-alt: #f45e0c;
  --secondary-color: #a34fde;
  --secondary-alt-100: #fddbc9;
  --neutral-light: #ededed;
  --natural-lighter: #F9F9F9;
  --success-light: #d1f7e5;
  --success: #146c43;
  --error: #c91433;
}

/* CSS for modal overlay */
#header-container {
  z-index: 100;
}

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 40;
}

.modal-overlay.active-modal {
  display: block;
}

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

.special-button {
  font-size: 14px;
  padding: 10px 20px !important;
  transition: background-color .2s;
  border-radius: 5px;
}

.special-button:hover {
  background-color: var(--primary-400) !important;
}

@media (max-width: 640px) {
  .landing-page-banner__button {
    font-size: 12px;
    margin-top: 5px !important;
  }
}

/* custom input: checkbox */
input[type='checkbox'] {
  accent-color: var(--primary-color);
}

input[type="radio"] {
  accent-color: var(--primary-color);
}



/* custom input: radio */




input[type="radio"] {
  appearance: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  border: 2px solid #aaa;
  outline: none;
  transition: border-color 0.3s ease;
  position: relative;
}

input[type="radio"]:checked {
  border-color: var(--primary-color);
}

input[type="radio"]::before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background-color: var(--primary-color);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease, opacity 0.3s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  opacity: 0;
}

input[type="radio"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}


/* switcher */
/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #adb5bd;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  border-radius: 20px;
  left: 0.27em;
  bottom: 0.25em;
  background-color: #adb5bd;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

input:focus+.slider {
  box-shadow: 0 0 1px var(--primary-color);
}

input:checked+.slider:before {
  transform: translateX(1.4em);
  background-color: #fff;
}

/* custom classes */
.custom-rtl {
  direction: rtl;
}

.custom-ltr {
  direction: ltr;
}

.cutom-grid-6 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cutom-grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.active {
  color: var(--primary-color);
}

/* active border create or login */

.model-popup {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 110;
}

.hidden-login-create {
  display: none;
}

.create-or-login span {
  position: relative;
}

.create-or-login span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
}

.create-or-login span:hover::before {
  background: var(--primary-color);
}

.active-create-or-login {
  color: var(--primary-color);
}

.active-create-or-login::before {
  background: var(--primary-color);
}

/* start page */
body {
  /* direction: rtl; */
  font-family: "Cairo", sans-serif;
}

.hidden-scroll {
  overflow: hidden;
}

/* header */
.header__icons>li:hover {
  box-shadow: 0px -50px 50px -25px hsl(0deg 0% 96% / 85%) inset;
}

.user-info-menu,
.user-items-menu {
  visibility: hidden;
}

.header__user-info-menu:hover .user-info-menu,
.header__user-items-menu:hover .user-items-menu {
  visibility: visible;
}


.header .header__menu-item {
  cursor: pointer;
}

.header .header__menu-item:hover a {
  color: var(--secondary-color);
}

.wide-header {
  visibility: hidden;
  opacity: 0;
  /* transition-duration: .5s; */
  transition-property: opacity, visibility;
}

.special-link:hover .wide-header {
  opacity: 1;
  visibility: visible;
}

/* responsive header */
.burger-menu {
  display: none !important;
}

.resposive-header {
  display: none;
  transition: transform 0.3s ease-in-out !important;
  transform: translateX(-100%);
  padding-top: 0px !important;
  padding-bottom: 80px !important;
  overflow-y: auto;
}

.hidden-resposive-header {
  transform: translateX(0%);
}


.responsive-products-header {
  height: 0;

}

/*products section*/
.products-section__item {
  border-radius: 10px;
}

.products-section__item:hover {
  transition: .2s;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.products-section__image-container {
  position: relative;
}

.products-section__image-container::before {
  content: '';
  position: absolute;
  left: 5%;
  bottom: 0;
  height: 2px;
  width: 90%;
  background-color: var(--primary-500);
  border-radius: 50%;
}

.products-section__hover {
  transition: bottom .3s;
}

.products-section__item:hover .products-section__hover {
  bottom: 0;
}

.products-section__item .products-section__icon:hover {
  color: var(--error);
}

/* two banner mopiel and playstation 5 in landing page */
.two-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
}

.expired-sale-container__product {
  background-color: var(--primary-600);
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-radius: 10px;
  /* width: 30%; */
}

.expired-sale-container__product::before,
.expired-sale-container__product::after {
  content: '';
  position: absolute;
  background-color: var(--primary-50);
  z-index: -1;
  border-radius: 50%;
}

.expired-sale-container__product::before {
  left: -35px;
  bottom: -250px;
  width: 500px;
  height: 500px;
}

.expired-sale-container__product::after {
  width: 200px;
  height: 200px;
  top: -25%;
  left: -25%;
}


.expired-sale-container__banner {
  border-radius: 10px;
  overflow: hidden;
  padding: 20px;
  background: linear-gradient(143deg, rgba(163, 79, 222, 1) 64%, rgba(255, 255, 255, 1) 100%);
}


/* glid ligrary for custom craousel in landing page */
.glide-75 {
  width: 75%;
}

@keyframes glideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.glide__slide {
  animation: glideUp 0.5s ease-out forwards;
}

@keyframes glideUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.glide__slide {
  animation: glideUp 0.5s ease-out forwards;
}

/* stopwatch banner section in landing page */
.stopwatch-banner__container {
  position: relative;
  overflow: hidden;
}

.stopwatch-banner__container::before {
  content: '';
  position: absolute;
  right: -20%;
  top: 50%;
  transform: translateY(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background-color: var(--primary-50);
  /* z-index: -1; */
}


.stopwatch-banner__content {
  position: relative;
  z-index: 1;
}

.stopwatch-banner__image {
  position: relative;
  z-index: 1;
}

/* blog section in landing page */
.blog-card__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blog-grid {
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 20px;
}

/* video blogs */
.video-container video {
  padding: 10px 0px;
  border: 1px solid gainsboro;
  border-radius: 10px;
}

.video-container {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.readmore-blog {
  border: 1px solid var(--natural-lighter);
  transition: .2s bottom;
  color: var(--secondary-color);
}

.blog-card-hover {
  justify-content: space-between !important;
}

.blog-card-hover:hover .readmore-blog {
  bottom: 0;
}

/* footer */
.footer-arrdown {
  visibility: hidden;
}

/* start products page */
.products-type div {
  padding: 5px;
}

.products-type div {
  position: relative;
}

.products-type div::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background-color: var(--primary-color);
}

.products-type div:hover::before {
  width: 100%;
}

/* customr chat */

/* blog page */
.blog-page-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
  gap: 20px;
}

/* singel product page */
.singel-product-page {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(325px, auto));
}

.product-details__tab--active {
  border-bottom: 3px solid var(--primary-color);
  color: var(--primary-color);
}

.product-details__tab {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}

.product-details__tab:hover {
  border-bottom: 3px solid var(--primary-color);
  color: var(--primary-color);
}

.product-details__list {
  padding: 0;
  list-style: none;
}

.product-details__item {
  padding: 10px 20px;
  border-radius: 5px;
}

.product-details__item:nth-child(odd) {
  background-color: #f7f7f7;
  /* bg-neutral-lighter */
}

.product-details__item:nth-child(even) {
  background-color: transparent;
}

.product-details__label {
  font-weight: 600;
}

.product-details__value {
  font-weight: 300;
  margin-left: 20px;
}

/* payment step 1 page*/
.buy-progres ul {
  position: relative;
}

.buy-progres ul::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 30px;
  width: 75%;
  height: 2px;
  background-color: var(--secondary-color);
  z-index: -1;
}

.buy-progres li:hover div {
  background-color: white;
  border: 2px solid var(--secondary-color);
  scale: 1.2;
}

.buy-progres li:hover span {
  color: var(--secondary-color);
  scale: 1.2;
}

.buy-progres li:hover i {
  color: var(--secondary-color);
  scale: 1.2;
}

.active-buy-progres div {
  background-color: white;
  border: 2px solid var(--secondary-color);
  scale: 1.2;
}

.active-buy-progres span {
  color: var(--secondary-color);
  scale: 1.2;
  scale: 1.2;
}

.active-buy-progres i {
  color: var(--secondary-color);
  scale: 1.2;
}


.payment-information {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 20px 100px;
  flex-wrap: wrap;
}

.shoped-items-step-1 {
  flex: 1;
}

.payment-step1 {
  width: 350px;
}

/* payment step 2 page*/

.radio-group {
  border: 2px solid var(--natural-lighter);
}

.radio-group input {
  cursor: pointer;
}

.radio-group:has(input[type="radio"]:checked) {
  background-color: rgba(119, 171, 249, 0.25);
  border: 2px solid var(--primary-75);
}

/* start repeated questions page */
/* Custom CSS for Grid Layout */
.repeated-questions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 20px;
}

@media (min-width: 768px) {
  .repeated-questions {
    grid-template-columns: 300px 1fr;
  }
}

.repeated-questions__sidebar {
  width: 300px;
  min-width: 300px;
}

.search-container-words p {
  padding: 10px;
}

/* start responsive */
/* Media 640 */
@media (max-width: 640px) {

  /* products page */
  #filter-section-id {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-150%);
  }

  #filter-section-id.show {
    transform: translateX(0);
  }

  .filter-section {
    padding-top: 50px !important;
    padding-bottom: 80px !important;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100vw !important;
    height: 100vh !important;
    overflow: auto;
    background-color: var(--cwhite) !important;
    border: 1px solid var(--natural-lighter);
  }

  .for-create-account,
  .for-login {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto;
  }

  .page-path__breadcrumbs {
    flex-wrap: wrap;

    * {
      font-size: 14px !important;
    }
  }
}

/* Media 768 */
@media (max-width: 768px) {
  .landing-page-banner__title {
    font-size: 14px !important;
  }

  .blog-card-to-col {
    flex-direction: column-reverse;
  }

  .blog-section__features {
    flex-direction: column;
  }

  .blog-section__feature {
    margin-bottom: 20px;
    align-self: end;
  }

  /* expierd banner*/
  .expired-sale-container__overlay {
    flex-direction: column;
  }

  /* singel product page */
  .product-details__item {
    flex-direction: column;
    align-items: flex-start;
  }


  /* search */
  .for-search {
    padding-top: 65px !important;
    padding-bottom: 65px !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow-y: auto;
  }
}

/* Media 1024 */
@media (max-width: 1024px) {

  /* header */
  .header__nav {
    display: none;
  }

  .resposive-header {
    display: block;
  }

  .burger-menu {
    display: block !important;
  }

  .resposive-header nav ul li {
    margin-bottom: 20px;
  }

  /* smart watch */
  .stopwatch-banner__content button {
    background-color: var(--primary-600);
    color: var(--cwhite);
  }

  /* two banner mopiel and playstation 5 in landing page */
  .two-banner {
    grid-template-columns: 1fr;
  }

  /* blog section in landing page */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* footer */
  .footer__content {
    flex-direction: column-reverse;
  }

  .footer__left {
    flex-direction: column;
  }

  .footer__social-links {
    justify-content: space-between;
    flex-direction: row !important;
    margin-left: 0 !important;
    margin-bottom: 20px;
  }

  .footer__social-link {
    margin-top: 0 !important;
  }

  .footer__social-icons {
    justify-content: space-between !important;
  }

  .footer__content .footer__left {
    flex-direction: column-reverse;
  }

  .footer__right {
    margin-top: 20px;
    width: 100%;
  }

  .footer__right .footer__sections {
    flex-direction: column;
    margin-left: 0 !important;
  }

  .footer__right .footer__section {
    margin-left: 0 !important;
    margin-top: 10px;
  }

  .footer__info {
    margin-left: 0 !important;
  }

  .footer__right .footer__title {
    position: relative;
    cursor: pointer;
  }

  .footer-arrdown {
    visibility: visible;
    position: absolute;
    right: 0;
    top: 25%;
  }

  .footer__right .footer__list {
    height: 0;
    overflow: hidden;
  }

  /* payment-step 1 page */
  .payment-information {
    flex-direction: column;
  }

  .shoped-items-step-1 {
    width: 100%;
  }

  .payment-step1 {
    width: 100% !important;
  }
}

@media (max-width: 1280px) {
  .singel-product-page__flex {
    flex-wrap: wrap;
  }
}