html,
 body {
     height: auto;
 }

 body {
     font-family: "kalameh", "Dana", "anjoman", sans-serif;
     background-color: var(--white);
     position: relative;
     /* overflow: hidden; */
     /* margin-top: 120px; */

     overflow-x: hidden;

     display: block;

     animation: mb 0.8s forwards;
 }

 @keyframes mb {
     from {
         margin-top: 0;
     }

     to {
         margin-top: 110px;

     }

 }

 main {
     flex: auto;
 }

 .loader {
     position: fixed;
     inset: 0;
     z-index: 1000000000;
     overflow: hidden;
     display: flex;
     animation: dispear 0.6s forwards;

     .loader-section {
         width: 15%;
         height: 100%;
         background-color: var(--main);
     }

     #loader-section-2 {
         animation: toleft 0.6s forwards;
     }

     #loader-section-1 {
         animation: toright 0.6s forwards;
     }
 }

 @keyframes toleft {
     to {
         transform: translateX(-100%);

     }
 }

 @keyframes toright {
     to {
         transform: translateX(100%);

     }
 }

 @keyframes dispear {
     to {
         display: none;
     }

 }

 #home-bottom {
     fill: var(--main);
     color: var(--main);
 }

 .site-banner {
     width: 100%;
     height: 35vw;
     max-width: 100vw;
     position: relative;
     overflow: hidden;
     cursor: grab;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--mid-gray);
     /* padding: 50px; */
     margin-bottom: var(--margin-b);
 }

 .site-banner:active {
     cursor: grabbing;
 }

 .banner-img-holder {
     position: absolute;
     /* top: 0; */
     /* transform: translateY(-50%); */
     height: 90%;
     width: 92%;
     transition: all 750ms cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     overflow: hidden;
     border-radius: var(--border-r);
     filter: brightness(1.1) !important;


 }

 .banner-img-holder img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;

     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
     user-select: none;
     -webkit-user-drag: none;
     pointer-events: none;
     z-index: 1;
 }

 .banner-content {
     /* position: absolute; */
     padding-right: 3%;

     text-align: center;
     z-index: 2;
     display: flex;
     justify-content: center;
     height: 100%;
     flex-direction: column;
     align-items: flex-start;
     gap: 2px;
     width: 100%;
 }

 .brand-banner {
     display: flex;
     width: 100%;
     height: 100%;
     align-items: flex-end;
     justify-content: center;
     z-index: 2;

     .try-on-btn {
         margin-bottom: 5% !important;
     }

 }

 .mid-bnr-wrapper {
     display: grid;
     gap: 25px;
     grid-template-columns: repeat(2, minmax(100px, 1fr));
     margin-bottom: var(--margin-b);
     grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));

     img {
         border-radius: 25px;
     }

     &.cus {
         grid-template-columns: repeat(2, minmax(100px, 1fr));
         grid-template-rows: repeat(1, minmax(80px, 1fr));
     }

 }

 .try-on-btn {
     display: inline;
     user-select: none;
     text-decoration: none;

     font-family: "anjoman";
     width: 100px;
     height: 4cqh;
     color: var(--white);
     background: var(--main) !important;
     border: 1px solid var(--main);
     /* padding: 25px ; */
     font-size: 15px;
     font-weight: 600;
     border-radius: var(--border-r);
     cursor: pointer;
     /* box-shadow: 0 4px 15px rgba(99, 50, 50, 0.4); */
     display: flex;
     justify-content: center;
     gap: 15px;
     /* flex-direction: column; */
     align-items: center;
     transition: all 250ms;
     position: relative;
     overflow: hidden;

     /* transition: all 250ms; */
     &::before {
         content: "";
         position: absolute;
         background-color: var(--white);

         left: 50%;
         top: 5%;
         transform: translate(-50%, -100%) scale(0);

         height: 170px;
         width: 170px;

         /* z-index: -1; */
         border-radius: 50%;
         opacity: 0;

         transform-origin: center center;
         transition: transform 250ms ease-in, opacity 250ms ease-in;
     }

     &:hover::before {
         top: 50%;
         transform: translate(-50%, -50%) scale(1.3);
         opacity: 1;
     }

     &:hover {
         color: var(--main);
     }

     & h5 {
         z-index: 0;
     }
 }

 .try-on-btn svg {
     width: 45px;
     height: var(--border-r);
     transition: all 250ms;
 }


 .act-btns {
     width: 100%;
     display: flex;
     justify-content: space-between;
     height: 100%;
     align-items: end;
     padding: 3% 9%;

 }

 .action-btn {
     box-shadow: 0 0px 11px rgba(0, 0, 0, 0.4);
     background-color: var(--main);
     border-radius: 100%;
     padding: 10px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--white) !important;

     & svg {
         color: var(--white) !important;
     }

     &:after {
         content: "";
         background-color: transparent;
         border: 2px solid var(--main);
         position: absolute;
         inset: 0;
         border-radius: 100%;
         z-index: -1;
         overflow: visible;
     }

     &.active:after {
         animation: actbtnanim forwards 450ms;
     }

     &.active {
         animation: scaledown 250ms forwards;
     }
 }

 @keyframes actbtnanim {
     from {
         inset: 0;
         opacity: 1;
     }

     to {
         inset: -20px;
         opacity: 0;
     }

 }

 @keyframes scaledown {
     0% {
         scale: 1;
     }

     50% {
         scale: 0.95;
     }

     100% {
         scale: 1;
     }
 }

 .try-on-btn:hover svg {
     /* fill: var(--white) !important;
    color: var(--white); */
 }

 #banner1-sidetxt {
     color: var(--black);
     font-size: 25px !important;
     font-weight: 700;
 }

 .banner-img-holder button:active {
     transform: translateY(0);
 }

 .banner-img-holder h4 {
     color: var(--black);
     font-size: 42px;
     font-weight: 1000;
     /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); */
     text-align: center;

 }

 @keyframes tryontxt {
     from {
         opacity: 0;
         padding: 0;

     }

     to {
         opacity: 1;

         padding: 3%;
     }

 }

 .category-title {
     color: var(--main);
     /* padding-right: 25px; */
     margin-bottom: var(--margin-b);
 }

 .banner-img-holder.active {
     left: 50%;
     transform: translateX(-50%) scale(1);
     z-index: 3;
     opacity: 1;
     filter: brightness(1) !important;
     background-color: #fff;
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);

     .banner-content {

         animation: tryontxt 1.2s ease-in-out;
     }
 }

 .banner-img-holder.next {
     left: 98%;
     transform: translateX(0) scale(1);
     z-index: 2;
     opacity: 0.2;
     filter: brightness(0.7) !important;
     background-color: #fff;

 }

 .banner-img-holder.prev {
     left: 2%;
     transform: translateX(-100%) scale(1);
     z-index: 2;
     opacity: 0.2;
     filter: brightness(0.7) !important;
     background-color: #fff;

 }

 .banner-img-holder.hidden {
     left: 110%;
     transform: translateX(0) scale(0.7);
     z-index: 1;
     opacity: 0;
 }

 .controls {
     position: absolute;
     bottom: 8%;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     display: flex;
     gap: 10px;
     display: flex;
     flex-direction: row-reverse;

 }

 .dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: rgb(151 151 151);
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid transparent;
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
 }

 .dot.active {
     background: var(--white);
     border: 1px solid var(--main);
     transform: scale(1.3);

 }


 /* Section Titles */




 .show-card:hover {
     cursor: pointer;
     margin: 0 15px;
     border-radius: var(--border-r) !important;
 }

 .show-card:hover .show-product-image img {
     transform: scale(1.04);
 }

 /* عنوان */
 .containter-title {}

 .containter-title-holder {
     /* font-family: "kalameh"; */
     text-align: center;
     font-size: 20px;
     color: var(--black);
     /* text-shadow: 1px 1px 1px var(--black); */
     word-spacing: 4px;
     font-weight: 100;
     position: relative;
     margin-bottom: 15px;
     /* background-color: var(--mid-main); */
 }

 .containter-title-holder::after {
     content: "";
     position: absolute;
     bottom: -5px;
     width: 100%;
     height: 3px;
     left: 50%;
     transform: translateX(-50%);
     background: linear-gradient(to right, transparent, var(--main), transparent);
 }


 .show-cards-holder {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 380px;

     margin-bottom: var(--margin-b);
     background-color: var(--main);
     width: 100%;
     background-color: var(--main);
     display: flex;
     justify-content: right;
     border-radius: 30px;
     padding: 55px;
     padding-left: 0;
     overflow: hidden;
     transition: all 250ms;


 }

 #show-2 {
     background-color: var(--black);
 }

 .show-cards-cardsection {
     width: 100%;
     height: 100%;

     display: flex;
     align-items: center;
     justify-content: right;
     gap: 3px;
     padding-left: 55px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     overflow-y: hidden;
 }

 .show-cards-cardsection::-webkit-scrollbar {
     display: none;
 }

 .show-product-image {
     width: 100%;
     height: 50%;
     overflow: hidden;
     /* padding: 8px; */

 }

 .cats {

     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     justify-content: center;
     align-items: center;
     gap: 30px;
     margin-bottom: var(--margin-b);
     flex-wrap: wrap;
     padding: 0 10%;

     @media (width < 500px) {
         padding: 0 7%;
         gap: 15px;

     }

     &:has(.cat:hover) {
         /* gap: 40px; */
     }

     #eye-fs-w {
         background-image: url("/images/banners/sun-fs.png");
     }

     .cat {
         background-color: var(--main);
         border-radius: var(--border-r);
         padding: 18% 20px;

         text-align: center;
         color: var(--white);
         font-weight: 700;
         box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

         position: relative;
         transition: all 250ms 70ms;
         animation: none;
         display: flex;
         align-items: center;
         justify-content: center;
         border: 1px solid transparent;

         a {
             font-size: 15px;
             background-color: var(--main);
             display: inline;
             padding: 10px 15px;
             border-radius: var(--border-r);
             position: relative;
             z-index: 2 !important;
             transition: all 150ms;

             &:hover {
                 background-color: var(--black);
             }
         }

         @media (width < 500px) {
             a {
                 font-size: 13px;
                 -webkit-tap-highlight-color: initial !important;
             }

             -webkit-tap-highlight-color: transparent !important;

         }

         background-image: url("/images/banners/eye-fs.png");
         background-position: center;
         background-size: cover;

         &:hover {
             /* margin: 0 10px; */
             /* padding: 30px 20px; */
             transform: scale(.95);





             animation: grow 4s infinite;

             cursor: pointer;
             border-color: var(--main);

             @media (width < 500px) {
                 /* margin: 5px 0; */
             }

             #right-ch {
                 left: 10px;

                 opacity: 1;
             }

             #left-ch {
                 right: 10px;

                 opacity: 1;
             }
         }

     }

 }

 .cat #right-ch,
 .cat #left-ch {
     position: relative;
     z-index: -1 !important;
     transition: all 150ms ease, left 0.40s 60ms ease, right 0.40s 60ms ease, opacity 250ms ease;
     background-color: var(--black);
     opacity: 0;

     &:hover {
         background-color: var(--main);
     }
 }

 .cat #right-ch {

     left: -17%;

 }

 .cat #left-ch {
     right: -17%;
 }

 @keyframes grow {
     0% {
         background-size: 100%;
     }

     50% {
         background-size: 105%;
     }

     100% {
         background-size: 100%;
     }
 }

 .show-card {
     font-family: "Dana";
     height: 100%;
     flex: 0 0 180px;
     width: 250px;
     padding: 12px;
     display: block;
     background-color: var(--white);
     border-radius: 0;
     overflow: hidden;
     user-select: none;
     color: inherit;
     text-decoration: none;
     -webkit-user-drag: none;
     display: flex;
     flex-direction: column;
     transition: all 250ms 1s  ease !important;
     /* justify-content: center; */
     /* align-items: center; */
 }

 .show-card:first-child {
     border-top-right-radius: var(--border-r);
     border-bottom-right-radius: var(--border-r);
 }

 .show-card:last-child {
     border-top-left-radius: var(--border-r);
     border-bottom-left-radius: var(--border-r);
 }

 .show-card {
     display: flex !important;
     align-items: center;
     justify-content: center;
 }

 #see-1 {
     color: var(--main) !important;

 }

 #see-1 h5:hover {
     color: var(--black) !important;
 }

 .show-card h5 {
     font-size: 15px;
 }

 .show-card h5,
 svg {
     transition: all 450ms;
 }

 .show-card:hover h5,
 .show-card:hover svg {
     color: var(--main);
 }

 #see-more-card:hover h5,
 #see-more-card:hover svg {
     color: var(--black);
 }

 .show-card:hover {
     cursor: pointer;
 }

 .show-product-name {
     width: 100%;
     text-align: center;
     font-family: "kalameh";
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .show-product-name,
 .show-product-price {
     user-select: none;
 }

 .show-product-brand {
     font-size: 14px;
     font-weight: 900;
 }

 .show-product-model,
 .show-product-brand {
     color: var(--main);
 }

 #show-2 .show-product-model,
 #show-2 .show-product-brand {
     color: var(--black);
 }

 .show-product-model {
     font-size: 12px;
     font-weight: 700;
 }

 .show-product-price {
     /* margin-top: auto; */
 }

 .show-main-price-holder {
     margin-top: 10px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-direction: row-reverse;
     /* gap: 25px; */
 }

 .show-off-percent {
     display: flex;
     align-items: center;
     justify-content: center;
     font-family: "IranYekan";
     border-radius: 12px;
     padding: 0px 5px;
     font-size: 13px;
     color: var(--white);
     background-color: var(--main);
 }

 #show-2 .show-off-percent {
     background-color: var(--black);
 }

 .show-price-without-discount {
     font-family: "Kalameh";
     display: flex;
     width: 100%;
     justify-content: left;
     color: var(--gray);
     font-size: 14px;
     text-decoration: line-through;
 }

 .show-card-left-section {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     /* gap: 22px; */
     margin-top: 3px;
     /* height: 160px; */
     flex: 1;
     padding-top: 15px;
     width: 100%;
 }

 .show-final-price {
     display: flex;
     align-items: center;
     gap: 3px;
     font-size: 16px;
     font-family: "Kalameh";
     font-weight: 600;
 }

 .showtoman {
     font-size: 13px;

 }

 .show-product-image img {
     transition: all 250ms;
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* border-radius: 45px; */
     user-select: none;
     border-radius: var(--border-r);
     -webkit-user-drag: none;

 }

 /* .show-cards-holder:last-child{
    transform: rotate3d(0,1,0,180deg);
} */
 .line {
     width: 100%;
     height: 0.25vw;
     background-color: var(--black);
     margin-bottom: 8vw;

 }

 .categories-holder {
     width: 100%;
     /* height: 12vw; */
     /* width: 100vw; */
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(50px, 3fr));
     gap: 20px;



     scroll-behavior: smooth;
     cursor: grab;
     user-select: none;

     -webkit-user-drag: none;

 }

 .category-section {
     background-color: var(--mid-gray);
     margin-bottom: var(--margin-b);
 }

 .categories-holder::-webkit-scrollbar {
     display: none;
 }

 .category {}

 .category img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     user-select: none;
     border-radius: var(--border-r);

     -webkit-user-drag: none;
 }

 .category img:hover {
     cursor: pointer;
 }

 main {
     padding: 0 6vw;
 }

 .off-section h2 {
     width: 300px;
     font-size: 45px;
     color: var(--white);
     transform: rotate(20deg);
     user-select: none;
     transition: all 250ms;

 }

 .off-section {
     display: flex;
     height: 100%;
     align-items: center;
     justify-content: center;
     line-height: 1.7;
     /* font-family: "Dana"; */
     transition: all 250ms;

 }

 .mid-grid-images {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: repeat(2, 250px);
     margin-bottom: var(--margin-b);
     gap: 10px;
     /* Optional: adds spacing between images */


     img {
         border-radius: 45px;
     }
 }

 .mid-big {
     grid-row: 1/3;
     /* Spans both rows */
     grid-column: 1/2;
     /* First column */
 }

 .mid-norm-top {
     grid-row: 1/2;
     /* First row */
     grid-column: 2/ span 2;
     /* Spans columns 2 and 3 */
 }

 .mid-norm-bottom {
     grid-row: 2/3;
     /* Second row */
     grid-column: 2/span 2;
     /* Spans columns 2 and 3 */
 }

 .mid-grid-images img {
     width: 100%;
     height: 100%;
     object-fit: cover;

 }

 .middle-banner {
     /* width: 100%;
    height: 380px; */

 }


 .middle-banner img {

     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .mid-bann-content {
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     z-index: 45;
     font-size: 38px;
     color: var(--main);
 }

 #sec-mid {
     color: var(--black);
 }

 #sec-mid {
     color: var(--black);
 }

 #third-mid {
     color: var(--main) !important;
 }

 @keyframes gettingbig {
     from {
         scale: 1;
     }

     to {
         scale: 1.34;


     }
 }

 .title-container {
     width: 100%;
     display: flex;
     position: relative;
     height: fit-content;
     margin-bottom: 15px;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
 }

 .section-title {
     /* background-color: white; */
     /* text-shadow: 12px 12px 0px rgb(0, 0, 0); */
     width: fit-content;
     background-color: #fff;
     box-sizing: content-box;
     color: var(--main);
     position: relative;

     position: relative;
     font-size: 28px;
     font-weight: 600;
 }

 .banner-sc-txt {
     margin-bottom: 15px;
 }

 .action-btn {
     z-index: 44;
 }

 #blog-link {

     color: var(--high-red);
     font-size: 15px;
     transition: all 250ms;
     font-weight: 600;
     position: relative;
     top: 4px;

     &:hover {
         color: var(--main);
     }
 }

 .devider {
     height: 2px;
     flex: 1;
     background: linear-gradient(45deg, transparent, var(--main), transparent);
     margin-top: 11px;
 }

 .blogs {
     padding: 10px 3px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 20px;
     overflow-x: auto;
     /* overflow-y: visible; */
     scroll-snap-type: x mandatory;
     width: 100%;
     margin-bottom: var(--margin-b);

     &::-webkit-scrollbar {
         display: none;
     }
 }

 .blog {
     user-select: none;
     -webkit-user-drag: none;
     /* flex: 0 0 280px; */

     color: inherit;
     /* padding: 15px; */
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
     border-radius: var(--border-r);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     position: relative;
     gap: 10px;
     width: 20vw;

     &.next {
         /* scale: 0.95; */
     }

     &::before {
         content: "";
         position: absolute;
         background-color: var(--mid-main);

         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%) scale(0);

         height: 400px;
         width: 400px;


         border-radius: 50%;
         opacity: 0;

         transform-origin: center center;
         transition: transform 250ms ease-in, opacity 250ms ease-in;
     }

     &:hover::before {
         transform: translate(-50%, -50%) scale(1.3);
         opacity: 1;
     }

 }

 .blog img {
     width: 100%;
     height: 200px;
     object-fit: cover;
     /* border-radius: 20px; */
     user-select: none;

     -webkit-user-drag: none;
 }

 .blog-title {
     font-size: 12px;
     font-weight: 400;
     line-height: 180%;
     font-family: "IranYekan";
 }

 .blog-bottom-section {
     padding: 0 10px;
     height: 55px;
 }

 .new-arrivals {


     width: 100%;
     margin-bottom: var(--margin-b, 48px);
     direction: rtl;
     font-family: "Dana", sans-serif;
     position: relative;
     overflow: hidden;
     padding: 30px 30px 0;
     border-radius: var(--border-r);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
     /* max-width: 95%; */

     /* margin: 0 auto var(--margin-b); */

     &::after {
         position: absolute;
         content: "";
         background-color: var(--main);
         right: 0;
         bottom: -60px;
         width: 100%;
         height: 60px;
         transition: all 250ms ease;
         /* border-radius: var(--border-r) var(--border-r) 0 0; */
         z-index: 4;
         padding-bottom: 0;
     }

     &:has(.new-arrivals__all:hover)::after {
         bottom: 0;
     }
 }

 /* ── هدر ── */
 .new-arrivals__head {
     display: flex;
     align-items: center;
     gap: 14px;
     margin-bottom: 28px;
     flex-wrap: wrap;
 }

 .new-arrivals__label {
     background: var(--main);
     color: #fff;
     font-size: .7rem;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     padding: 4px 12px;
     border-radius: 99px;
     font-family: "IranYekan", sans-serif;
 }

 .new-arrivals__title {
     font-family: "kalameh", sans-serif;
     font-size: clamp(1.3rem, 3vw, 2.2rem);
     color: #040404;
     margin: 0;
     flex: 1;
     border-right: 4px solid var(--main);
     padding-right: 12px;
 }

 .new-arrivals__all {
     color: var(--main);
     text-decoration: none;
     font-size: .85rem;
     /* border-bottom: 1.5px solid transparent; */
     transition: border-color .2s;
     white-space: nowrap;
     margin-top: 20px;
     width: 100%;
     display: flex;
     justify-content: center;
     height: 100%;
     position: relative;
     z-index: 5;
     padding-bottom: 20px;

     &:hover {
         color: var(--white) !important;
         /* border-color:var(--main); */
     }
 }

 .new-arrivals__all:hover {}

 /* ── گرید ── */
 .new-arrivals__grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(49%, 1fr));

     gap: 15px;

 }


 /* ── کارت ── */
 .na-card {
     flex: 1;
     position: relative;
     display: flex;
     /* flex-direction: column; */
     background: var(--white);
     border-radius: 20px;
     overflow: hidden;
     text-decoration: none;
     color: inherit;
     border: 1.5px solid #f0f0f0;
     transition: all 250ms;

 }

 .na-card:hover {
     border-color: var(--main);
     transform: translateY(-5px);
     box-shadow: 0 12px 32px rgba(99, 50, 50, .12);
 }

 /* ── badge ها ── */
 .na-card__new {
     position: absolute;
     top: 12px;
     right: 12px;
     background: var(--black);
     color: #fff;
     font-size: .65rem;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     padding: 3px 9px;
     border-radius: 6px;
     z-index: 2;
     font-family: "IranYekan", sans-serif;
 }

 .na-card__disc {

     background: var(--main);
     color: var(--white);
     font-size: .75rem;
     padding: 3px 9px;
     border-radius: var(--border-r);
     z-index: 2;
     font-family: "IranYekan", sans-serif;
     font-weight: 700;
 }

 /* ── تصویر ── */
 .na-card__img {
     width: 100%;
     overflow: hidden;
     background: #f8f5f5;
     width: 160px;
     height: 150px;
 }

 .na-card__img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .4s ease;
 }

 .na-card:hover .na-card__img img {
     transform: scale(1.06);
 }

 /* ── اطلاعات ── */
 .na-card__info {
     padding: 14px 16px 12px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     flex: 1;
 }

 .na-card__brand {
     font-size: .72rem;
     color: var(--main);
     font-weight: 700;
     letter-spacing: .5px;
     text-transform: uppercase;
     font-family: "IranYekan", sans-serif;
 }

 .na-card__model {
     font-size: .82rem;
     color: #666;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .na-card__price-row {

     display: flex;
     align-items: flex-end;
     justify-content: flex-end;
     gap: 4px;
     align-content: stretch;
     flex-direction: column;
     height: 100%;
 }

 .na-card__price {
     flex-direction: row-reverse;
     font-size: 1rem;
     width: 100%;
     font-weight: 700;
     color: #040404;
     font-family: "Kalameh", "IranYekan", sans-serif;
     display: flex;
     align-items: baseline;
     justify-content: space-between;
 }

 .na-card__unit {
     font-size: .72rem;
     color: #888;
     font-weight: 400;
 }

 .na-card__original {
     font-size: .75rem;
     color: #bbb;
     text-decoration: line-through;
     font-family: "Kalameh";
 }

 .card-info-wrapper {
     width: 100%;
     display: flex;
     flex-direction: column;
     /* justify-content: space-between; */
 }

 /* ── hover دکمه ── */
 .na-card__hover-btn {
     position: absolute;
     bottom: 0;
     right: 0;
     left: 0;
     background: ;
     color: #fff;
     text-align: center;
     padding: 8px;
     font-size: .82rem;
     font-weight: 600;
     transform: translateY(100%);
     transition: transform .25s ease;
     z-index: 55;
 }

 .na-card:hover .na-card__hover-btn {
     transform: translateY(0);
 }

 /* ── انیمیشن ورود ── */
 @keyframes naFadeUp {
     from {
         opacity: 0;
         transform: translateY(24px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* ── ریسپانسیو ── */
 @media (max-width: 920px) {


     @keyframes mb {
         from {
             margin-top: 0;
         }

         to {
             margin-top: 95px;

         }

     }
 }

 @media (max-width: 480px) {


     .na-card__info {
         padding: 10px 12px;
     }

     .na-card__price {
         font-size: .88rem;
     }
 }








 @media (max-width: 1340px) {}


 /* ریسپانسیو */
 @media (max-width: 1340px) {
     .blog img {
         height: 120px;
     }

     #banner1-sidetxt {
         font-size: 16px !important;
     }

     .banner-img-holder h4 {
         font-size: 25px;
     }
 }

 @media (max-width: 1020px) {
     .title-container {
         margin: 0 auto 10px;
         width: 90%;

     }

     .mid-bnr-wrapper {
         margin: 0 20px var(--margin-b);
     }

     .banner-img-holder h4 {
         font-size: 20px;
     }

     .try-on-btn {
         width: 65px;
         height: 30px;
         margin: 0 !important;
         margin: 0 !important;

     }

     .blog::after {
         transition: all 250ms 100ms ease-in;

     }

     .section-title {}

     #blog-link {}

     .blog-title {
         font-size: 12px;
     }

     /* .show-card{
            flex: 0 0 200px;
        } */
     .show-product-model {
         font-size: 13px;

     }

     .show-product-brand {
         font-size: 14px;
     }

     /* .show-card-left-section{
    gap: 10px;
} */
     .middle-banner {

         /* height: 180px;
    width: 95%; */



     }

     .mid-bann-content {
         font-size: 30px;
     }

     .categories-holder {
         /* height: 18vw; */


         /* width: fit-content; */

     }

     .categories-holder {

         padding: 0 20px;
         gap: 20px;
     }

     .category-title {

         font-size: var(--border-r);
         padding-right: 25px;
         margin-bottom: 10px;

     }

     main {
         padding: 0;
     }

     /* .categories{
    width: 100%;
   /* padding: 0 5vw; */

     .category {
         /* width: 450px; */
         /* flex: 0 0 25%; */
     }

     .show-cards-holder {
         border-radius: 0;
         display: grid;
         padding: 15px;
         padding-left: 0;
         padding-bottom: 33px;
         height: 380px;

     }

     .show-cards-cardsection {
         padding-left: 15px;
     }

     .off-section h2 {
         width: 100%;
         font-size: 21px;

         transform: none;


     }

     .off-section {
         height: 50px;
         margin-bottom: 17px;
     }




     .banner-content {
         right: 5%;
         bottom: 3%;

     }

     .site-banner {
         height: 49vw;
         border-radius: 2px;
     }

     .banner-img-holder {
         border-radius: var(--border-r);

     }

     .banner-img-holder {

         height: 90%;
         width: 95%;
     }

     .banner-img-holder.next {
         left: 99%;


     }

     .banner-img-holder.prev {
         left: 1%;


     }

     /* .off-section h2{
    width: 200px;
    font-size: var(--border-r);


} */
     .new-arrivals {
         width: auto;
         margin: 0 20px var(--margin-b);
         padding: 25px 25px 0;

     }

     .blog {
         min-width: 250px;
     }

     .blogs {
         justify-content: right;
         padding: 5px 20px;
     }

     .blog-title {
         font-size: 12px;
     }

 }


 @media (max-width: 7var(--border-r)) {
     .middle-banner {

         /* width: 90%; */




     }

     .action-btn {
         padding: 6px;

     }

     .banner-img-holder h4 {
         font-size: 14px;
     }

     #banner1-sidetxt {
         font-size: 12px !important;

     }

 }

 @media (max-width: 500px) {
     .mid-bnr-wrapper {

         &.cus {
             grid-template-rows: repeat(1, 90px);
         }

     }

     .mid-bnr-wrapper {

         display: grid;
        
         grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
         margin-bottom: var(--margin-b);
         grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));

     }

     .banner-sc-txt {
         margin-bottom: 6px;
     }

     .new-arrivals__grid {}

     .na-card {
         display: block;
     }

     .na-card__img {
         width: 100%;
     }



     .mid-bann-content {
         font-size: 15px;
     }

     .act-btns {
         display: none;
     }

     #banner1-sidetxt {
         font-size: 10px !important;
     }

     .banner-img-holder h4 {
         font-size: 13px;
     }

     .try-on-btn {
         font-size: 10px;
     }

     .blog-title {
         font-size: 12px;
     }

     .show-cards-holder {}


     .try-on-btn {
         width: 70px;
         height: 25px;
         margin: 0 !important;
         margin: 0 !important;

     }

     .off-section {
         display: flex;
         height: auto;
         align-items: center;
         line-height: 1.7;
         font-weight: 200;
     }



     .rainbow {
         width: 300px;
         height: 150px;
         background: radial-gradient(circle at 50% 150%, violet 0%, violet 16.6%, indigo 16.8, indigo 33.3%, blue 33.3%, blue 50%, green 50%, green 66.6%, yellow 66.6%, yellow 83.3%, orange 83.3%, orange 100%);
         border-radius: 0 0 150px 150px;
         overflow: hidden;
     }

     .middle-banner img {}
 }