html {
    direction: rtl;
    line-height: normal;
}

@font-face { 
    font-family: 'Persian Font';
    src: url('font/IRANSansXV.woff2') format('woff-variations'),
    url('font/IRANSansXV.woff2') format('woff2');
    font-display: fallback;
}
/*@font-face { 
    font-family: 'Persian Font';
    src: url('font/IRANSansXFaNum-DemiBold.woff2') format('woff-variations'),
    url('font/IRANSansXFaNum-DemiBold.woff2') format('woff2');
    font-display: fallback;
}*/

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
@supports (font-variation-settings: normal) {
    body {
     font-family: 'Persian Font', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
}

.font-farsi {
    font-family: 'Persian Font';
}
/* .font-farsi-numeral {
    font-family: 'Persian Font Numeral';
} */
.font-tahoma {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Headings with explicit weights */
h1{font-size:2.5rem;font-weight:700;line-height:1.2;}h2{font-size:2rem;font-weight:700;}h3{font-size:1.75rem;font-weight:600;}h4{font-size:1.5rem;font-weight:600;}h5{font-size:1.25rem;font-weight:500;}h6{font-size:1rem;font-weight:500;}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: #4169E1;
}

.text-center {
    text-align: center;
}

.hidden {visibility: hidden;}
.dark {
    color: antiquewhite;
    background-color: rgb(50, 50, 50);
}

.cart-btn {
    position: relative;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 50%;
  padding: 2px 6px;
  min-width: 18px;
  text-align: center;
  line-height: 1.2;
  display: none;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.25s ease-out;
}
.cart-count.show {
  display: inline-block;
  animation: popIn 0.25s ease-out forwards;
}
@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

.card {
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

.fix-media img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

.stick-top {
	position: sticky;
	top: 0;
    z-index: 100;
}

.navbar {
	display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 20px 0;
	background:white;
	border-bottom: 1px solid black;
}

/* Grid Classes */
.grid {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on small screens */
    padding: 10px;
}
@media(min-width: 768px) {
    .grid {
      grid-template-columns: repeat(4, 1fr); /* 6 columns on larger screens */
    }
}
@media(min-width: 1100px) {
    .grid {
      grid-template-columns: repeat(6, 1fr); /* 6 columns on larger screens */
    }
}

.grid1 {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(1, 1fr); /* 1 columns on small screens */
    padding: 10px;
}
@media(min-width: 768px) {
    .grid1 {
      grid-template-columns: repeat(4, 1fr); /* 4 columns on larger screens */
    }
}
@media(min-width: 1100px) {
    .grid1 {
      grid-template-columns: repeat(6, 1fr); /* 6 columns on larger screens */
    }
}
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
  justify-content: center;
  gap: 1px;
  padding: 5px;
}

/* Respansive Classes */
.flex {display: flex;}
input[type="number"] {
    min-width: 60px;
}
.justify-center {justify-content: center;}
.inline {display: inline-block;}
.block {display: block;}
@media only screen and (max-width: 768px) {.small-hidden-flex {display: none;}}
@media only screen and (min-width: 768px) {.small-hidden-flex {display: flex;}}
@media only screen and (max-width: 768px) {.small-hidden-block {display: none;}}
@media only screen and (min-width: 768px) {.small-hidden-block {display: block;}}
@media only screen and (max-width: 768px) {.small-show-flex {display: flex;}}
@media only screen and (min-width: 768px) {.small-show-flex {display: none;}}
@media only screen and (max-width: 768px) {.small-show-block {display: block;}}
@media only screen and (min-width: 768px) {.small-show-block {display: none;}}

/* Form Inputs */
.form-control {
    width: 100%;
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    transition: border-color 0.3s ease; /* Smooth transition */
    /*background-color: #fff; /* White background */
    /*color: #333; /* Dark text color */
    direction: ltr;
}

.form-control:focus {
    border-color: #007bff; /* Highlight on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); /* Subtle shadow on focus */
}

.form-control::placeholder {
    /* color: #999; Light gray placeholder color */
    opacity: 1; /* Ensure placeholder is visible */
    text-align: right; /* Placeholder is always RTL */
}

.form-label {
    text-align: right;
    font-size: 16px;
    font-weight: 500;
    /* color: #383838; */
}

/* Optional: Add a box-shadow for depth */
.form-control {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Optional: Style the focus state with a more vibrant color */
.form-control:focus {
  border-color: #28a745; /* Example: Green */
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.2); /* Green shadow */
}

textarea {
    width: 100%;
    margin: 5px;
    padding: 10px;
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Comfortable font size */
    resize: vertical; /* Allow vertical resizing */
    box-sizing: border-box; /* Include padding in width calculation */
    outline: none; /* Remove default focus outline */
    transition: border-color 0.3s ease; /* Smooth border color transition */
    font-family: sans-serif; /* Use a standard font */
}

textarea:focus {
    border-color: #007bff; /* Blue border on focus */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.2); /* Subtle blue shadow on focus */
}

.btn{display:inline-block;padding:10px 15px;font-size:16px;font-weight:700;text-align:center;text-decoration:none;border:none;border-radius:5px;cursor:pointer;transition:background-color 1s ease}.btn.sm-btn{padding:5px 10px;font-size:14px;font-weight:300}.btn.blue{background-color:#2196F3;color:#fff}.btn.green{background-color:#01a107;color:#fff}.btn.purple{background-color:#90f;color:#fff}.btn.red{background-color:#F44336;color:#fff}.btn.orange{background-color:#ff7b00dc;color:#fff}.btn.yellow{background-color:#ffd900;color:#000;border:gray solid .5px}.btn.white{background-color:#fff;color:#000}.btn.gray{background-color:#707070;color:#fff}.btn.black{background-color:#000;color:#fff}.btn:hover{opacity:.8}.btn:active{transform:translateY(1px)}.m-0{margin:0}.m-1{margin:.25rem}.m-2{margin:.5rem}.m-3{margin:.75rem}.m-4{margin:1rem}.m-5{margin:1.25rem}.mx-0{margin-left:0;margin-right:0}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.my-4{margin-top:1rem;margin-bottom:1rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.mt-0{margin-top:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.ml-0{margin-left:0}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-5{margin-left:1.25rem}.mr-0{margin-right:0}.mr-1{margin-right:.25rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mr-4{margin-right:1rem}.mr-5{margin-right:1.25rem}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-0{padding-left:0;padding-right:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0{padding-top:0;padding-bottom:0}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pt-0{padding-top:0}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.pb-0{padding-bottom:0}.pb-1{padding-bottom:.25rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pb-5{padding-bottom:1.25rem}.pl-0{padding-left:0}.pl-1{padding-left:.25rem}.pl-2{padding-left:.5rem}.pl-3{padding-left:.75rem}.pl-4{padding-left:1rem}.pl-5{padding-left:1.25rem}.pr-0{padding-right:0}.pr-1{padding-right:.25rem}.pr-2{padding-right:.5rem}.pr-3{padding-right:.75rem}.pr-4{padding-right:1rem}.pr-5{padding-right:1.25rem}.rtl{direction:rtl}.ltr{direction:ltr}.my-1x{margin-top:2.5rem;margin-bottom:2.5rem;}.my-2x{margin-top:3.5rem;margin-bottom:3.5rem;}.my-3x{margin-top:4.5rem;margin-bottom:4.5rem;}.my-4x{margin-top:5.5rem;margin-bottom:5.5rem;}.my-5x{margin-top:6.5rem;margin-bottom:6.5rem;}.p-5x{padding:6.5rem;}.mb-5x{margin-bottom:6.5rem;}.mt-5x{margin-top:6.5rem;}