* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: url("../images/background.png") #f5f2fc;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top;
  background-color: #ece9f3;
  min-height: 100svh;
}

.card {
  background: #efefef;
  color: #404040;
  backdrop-filter: blur(20px);
  border-radius: 10px;
  padding: 5px 24px;
  box-shadow: 0 20px 40px rgba(58, 5, 25, 0.1);
  border: 1px solid rgba(239, 136, 173, 0.1);
  transition: all 0.3s ease;
  margin-bottom: 25px;
}

.calender {
  width: 133.18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, #429eaa, #17838e);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(58, 5, 25, 0.3);
}

.range-view {
  pointer-events: none;
}

/* فقط مسیر سبز، بدون دکمه */
input[type="range"] {
  -webkit-appearance: none;
  width: 300px;
  height: 8px;
  border-radius: 4px;
  background: #ddd; /* مسیر خالی */
}

/* مسیر پر شده */
input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: #4caf50; /* سبز */
  border-radius: 4px;
}

/* مخفی کردن دکمه */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  background: transparent;
  border: none;
}

@media only screen and (max-width: 768px) {
  header.d-grid {
    display: flex !important;
    justify-content: space-between;
  }

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

  /* .heroSection>div.container>div.row:nth-child(2)>p{
    text-shadow: 0px 0px 6px black;
  } */

  body {
    background-size: 170% 130%;
  }

  footer {
    display: flex !important;
    flex-wrap: wrap;
  }

  .categoryDiv > div {
    flex-basis: 50%;
  }

  .catItem {
    width: 140px !important;
    padding: 12px 16px !important;
  }
}

@media only screen and (max-width: 992px) {
  header {
    grid-template-columns: 1fr 2fr 1fr;
  }

  header .logoName {
    font-size: 16px !important;
  }

  header .square {
    width: 50px;
  }

  div.activeDoreBox > div:nth-child(2) {
    height: auto !important;
  }
}

.aspect1 {
  aspect-ratio: 1/1;
}

.square {
  aspect-ratio: 1/1 !important;
  border-radius: 100%;
  width: 50px;
}

header {
  grid-template-columns: 1fr auto 1fr;
  border-bottom: 2px solid rgba(255, 255, 255, 0.452);
}

.sidebarBtn {
  border: 0px;
  background-color: transparent;
  width: max-content;
  margin-left: 16px;
}

.loginBtn {
  text-decoration: none;
  padding: 4px 24px;
  border-radius: 12px;
  color: white;
  background: linear-gradient(180deg, #4165e6, #0a49d6);
}

aside {
  height: 100svh;
  position: fixed;
  right: -100%;
  background-color: white;
  color: black;
  width: 70svw;
  top: 0px;
  transition: right 0.2s ease-in-out;
  z-index: 10000000000;
}

body.dark aside {
  background-color: rgb(37, 37, 37);
}

aside.active {
  right: 0px;
}

div.antiAside {
  position: fixed;
  height: 100svh;
  width: 100svw;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000000000;
  display: none;
  top: 0px;
}

div.antiAside.active {
  display: block;
}

aside a {
  max-width: fit-content;
  text-decoration: none;
  color: black;
}

.activeDoreBox {
  color: black;
  box-shadow: 0px 4px 16px 16px rgba(58, 5, 25, 0.1);
}

.activeDoreDes {
  color: #6e6e6e;
}

.priceBox {
  background-color: #efefef;
}

.fullProgress {
  /* width: 100%; */
  background-color: #c4c4c4;
  border-radius: 10000px;
  height: 7px;
}

.progressBar {
  /* width: 90%; */
  background-color: #15bf2f;
  border-radius: 10000px;
  height: 7px;
}


.fullProgress1 {
    /* width: 100%; */
    background-color: #c4c4c4;
    border-radius: 10000px;
    height: 7px;
}

.progressBar1 {
    /* width: 90%; */
    background-color: #15bf2f;
    border-radius: 10000px;
    height: 7px;
}

.categoryDiv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.categoryDiv > div {
  flex-basis: 32%;
}

.catItem {
  background-color: white;
  border-radius: 16px;
  width: 250px;
  display: flex;
  justify-content: center;
  justify-self: center;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 10%;
  max-width: 300px;
  flex-wrap: wrap;
  box-shadow: 0px 4px 16px 16px rgba(58, 5, 25, 0.1);
  padding: 24px;
  @media only screen and (max-width: 768px) {
    flex-grow: 0 !important;
  }
}

.catItem p {
  text-align: center;
  display: block;
  width: 100%;
  margin-block: 16px;
}

.catItem img {
  border-radius: 8px;
}

.categorySection > div > div:nth-child(2) {
  column-gap: 20px;
  row-gap: 30px;
}

.catItem a {
  background-image: linear-gradient(180deg, #429eaa, #17838e);
  padding: 8px 24px;
  border-radius: 10px;
  color: white;
  text-decoration: none;
}

.howItWorksDiv {
  border-radius: 16px;
  box-shadow: 0px 4px 16px 16px rgba(58, 5, 25, 0.1);
  background-color: white;
  padding: 12px 24px;
  display: flex;
  column-gap: 16px;
  justify-content: space-between;
  align-items: center;
  /* flex-wrap: wrap; */
  min-width: 250px;
}

.howItem > img {
  width: 50px;
}

.howItem {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.howItem span {
  white-space: nowrap;
}

.row1,
.row2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  padding-bottom: 0px !important;
  border-top: 1px solid gray;
}

footer div:nth-child(2) div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.enamadImg {
  width: 120px;
}

.social-icon {
  width: 30px;
  aspect-ratio: 1/1;
}

/* .infoBox {
  flex-grow: 1;
  box-shadow: 0px 4px 16px 16px rgba(58, 5, 25, 0.1);
  padding: 16px;
  border-radius: 10px;
  flex-direction: row !important;
  @media (max-width: 768px){
    width: 50% !important;
  }
}

.infoText{
  flex-grow: 1;
}

.infoText p{
  margin-bottom: 0px;
  text-align: start;
  color: black;
  text-shadow: 0px 4px 3px rgba(58, 5, 25, 0.1);
}

.icon{
  display: flex;
  align-items: center;
}

.infoBox img{
  width: clamp(20px, 5svw, 50px);
} */

section > div.container > div.d-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  @media (max-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (max-width: 576px) {
    margin-inline: 15px;
  }
}

.card {
  box-shadow: 0px 4px 16px 16px rgba(58, 5, 25, 0.1);
}

.searchBox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 12px;

  @media (max-width: 768px) {
    grid-template-columns: 1fr 1fr;
  }
}

.searchBox > *:focus-visible {
  outline: 0px;
}

.searchBox input {
  grid-column-start: 3;
  grid-column-end: 5;

  @media (max-width: 768px) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row: 2;

    border: 2px solid rgb(203, 203, 203) !important;
    border-radius: 8px;

    margin-top: 12px;
  }
}

.videoContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 16px;

  @media (max-width: 992px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.video .imgContainer {
  border-radius: 8px;
  /* aspect-ratio: 16 / 9; */
}

.video {
  box-shadow: 0px 4px 16px 16px rgba(58, 5, 25, 0.1);
  cursor: pointer;
}

.video:hover {
  transform: scale(0.96);
}

.imgContainer img {
  max-width: 100%;
  max-height: 100%;
}

.videoActive{
    display: flex !important;
}

.videoNotActive {
    display: none !important;
}







.backdrop {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100svw;
    height: 100svh;
    background-color: black;
    transition-property: opacity display overlay;
    transition-duration: 0.3s;
    transition-behavior: allow-discrete;
    z-index: 10000;
}

    .backdrop.active {
        display: block;
        opacity: 0.5;

        @starting-style {
            opacity: 0;
        }
    }

html:has(#light:checked) {
    color-scheme: light;
}

.imgPopover {
    display: none;
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0px;
    /* background: rgba(255, 255, 255, 0.95); */
    /* border-radius: 20px; */
    box-shadow: 0 20px 40px rgba(58, 5, 25, 0.1);
    /* padding: 40px; */
    opacity: 0;
    z-index: 100000;
    width: clamp(200px, 80%, 700px);
    aspect-ratio: 16/9;
    transition-property: opacity display overlay top;
    transition-duration: 0.3s;
    transition-behavior: allow-discrete;
}

    .imgPopover.active {
        display: block;
        opacity: 1;
        top: 50%;
    }

@starting-style {
    .imgPopover.active {
        opacity: 0;
        top: 30%;
    }
}

.imgPopover > img {
    width: 100%;
    height: 100%;
}

video{
    width: 100%;
    height: 100%;
}

.activeDoreBox>div:nth-child(2){
    height: 70%;
}