@charset "UTF-8"; @font-face { font-display: swap; font-family: vazirmatn; src: url(../fonts/vazirmatn.woff2); } :root { --font-regular: vazirmatn, sans-serif; --bs-body-font-family-regular: var(--font-regular); --bs-body-font-size75: 0.75rem; --bs-body-h-font-size15: 1.5rem; --bs-body-h-font-size14: 1.4rem; --bs-body-h-font-size13: 1.3rem; --bs-body-h-font-size12: 1.2rem; --bs-body-h-font-size11: 1.1rem; --bs-body-h-font-size10: 1.0rem; --bs-body-h-font-size9: 0.9rem; --bs-body-h-font-size8: 0.8rem; --bs-body-h-font-size7: 0.7rem; --bs-body-h-font-size6: 0.6rem; --bs-body-h-font-weight: 800; --bs-body-font-size: 1rem; --bs-body-line-height: 2; --color-default: #1a1f24; --color-default-rgb: 26, 31, 36; --color-links: #3279fc; --color-links-hover: #4797ff; --color-green-links-hover: #c26972; --color-primary: #3279fc; --color-primary-light: #4797ff; --color-primary-dark: #1c61e2; --color-primary-rgb: 50, 121, 252; --color-primary-light-rgb: 71, 151, 255; --color-primary-dark-rgb: 28, 97, 226; --color-secondary: #5670a0; --color-secondary-light: #6e87b6; --color-secondary-dark: #3b5380; --color-secondary-rgb: 86, 112, 160; --color-secondary-light-rgb: 110, 135, 182; --color-secondary-dark-rgb: 59, 83, 128; --color-blue: #0d6efd; --color-blue-rgb: 13, 110, 253; --color-indigo: #6610f2; --color-indigo-rgb: 102, 16, 242; --color-purple: #6f42c1; --color-purple-rgb: 111, 66, 193; --color-pink: #f3268c; --color-pink-rgb: 243, 38, 140; --color-red: #df1529; --color-red-rgb: 223, 21, 4; --color-orange: #f75937; --color-orange-rgb: 253, 126, 20; --color-yellow: #ffc107; --color-yellow-rgb: 255, 193, 7; --color-green: #059652; --color-green-rgb: 5, 150, 82; --color-teal: #20c997; --color-teal-rgb: 32, 201, 151; --color-cyan: #0dcaf0; --color-cyan-rgb: 13, 202, 240; --color-white: #ffffff; --color-white-rgb: 255, 255, 255; --color-gray: #6c757d; --color-gray-rgb: 108, 117, 125; --color-dark-gray: #111111; --color-dark-gray-rgb: 17, 17, 17; --color-black: #000000; --color-black-rgb: 0, 0, 0; --color-darkBlue: #3546ae; --color-darkBlue-rgb: 53, 70, 174; --shadow-box: rgba(0, 0, 0, .1) 0px 0px 10px 0px !important; --color-dark-gradient: linear-gradient(90deg, #111111 0%, #1b1c1f 100%); --color-red-gradient: linear-gradient(90deg, #d13a3f 0%, #ff000a 100%); --color-blue-gradient: linear-gradient(90deg, #766e6e 0%, #2e5aff 100%); --color-grean-gradient: linear-gradient(90deg, #a0cd3a 0%, #2cbc9f 100%); --color-grean-gradient-hover: linear-gradient(90deg, #a0cd3a 0%, rgba(17, 178, 75, 0.6) 20%); scroll-behavior: smooth; --bg-darkBlue: var(--color-darkBlue); --bs-blue: var(--color-blue); --bs-indigo: var(--color-indigo); --bs-purple: var(--color-purple); --bs-pink: var(--color-pink); --bs-red: var(--color-red); --bs-orange: var(--color-orange); --bs-yellow: var(--color-yellow); --bs-green: var(--color-green); --bs-teal: var(--color-teal); --bs-cyan: var(--color-cyan); --bs-white: var(--color-white); --bs-gray: var(--color-gray); --bs-gray-dark: #343a40; --bs-gray-100: #f8f9fa; --bs-gray-200: #e9ecef; --bs-gray-300: #dee2e6; --bs-gray-400: #ced4da; --bs-gray-500: #adb5bd; --bs-gray-600: #6c757d; --bs-gray-700: #495057; --bs-gray-800: #343a40; --bs-gray-900: #212529; --bs-primary: var(--color-blue); --bs-secondary: var(--color-blue); --bs-success: #198754; --bs-info: #0dcaf0; --bs-warning: #ffc107; --bs-danger: #dc3545; --bs-light: #f8f9fa; --bs-dark: #212529; --bs-primary-rgb: var(--color-primary-rgb); --bs-secondary-rgb: var(--color-secondary-rgb); --bs-success-rgb: 25, 135, 84; --bs-info-rgb: 13, 202, 240; --bs-warning-rgb: 255, 193, 7; --bs-danger-rgb: 220, 53, 69; --bs-light-rgb: 248, 249, 250; --bs-dark-rgb: 33, 37, 41; --bs-white-rgb: var(--color-white-rgb); --bs-black-rgb: var(--color-black-rgb); --bs-body-color-rgb: var(--color-default-rgb); --bs-body-bg-rgb: 255, 255, 255; --bs-font-sans-serif: var(--font-regular); --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)); --bs-body-color: var(--color-default); --bs-body-bg: #fff; --fc-breakpoint-xs: 0; --fc-breakpoint-sm: 576px; --fc-breakpoint-md: 768px; --fc-breakpoint-lg: 992px; --fc-breakpoint-xl: 1200px; --fc-breakpoint-xxl: 1400px; } .form-control { font-family: var(--font-regular); display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--bs-body-color); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--bs-body-bg); background-clip: padding-box; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; } .bg-danger { --bs-bg-opacity: 1; background-color: rgb(220 53 69 / 24%) !important; } .bg-success { --bs-bg-opacity: 1; background-color: rgb(26 167 102) !important; } .font20PX { font-size: 20px; } #main { padding-top: 70px; padding-bottom: 250px; background-color: #eff1f5; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-regular); font-weight: var(--bs-body-h-font-weight); font-size: var(--bs-body-h-font-size11); line-height: var(--bs-body-line-height); } a { color: var(--color-black); text-decoration: none } a:hover { color: var(--color-gray); text-decoration: none } img, svg { vertical-align: middle; border-radius: 15px; } .justify { text-align: justify; margin-left: 20px; margin-right: 20px; } .btn-red { --bs-btn-color: #fff; --bs-btn-bg: #f4171b; --bs-btn-border-color: #e71212; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #bb676a; --bs-btn-hover-border-color: #bb676a; --bs-btn-focus-shadow-rgb: 49, 132, 253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #d73434; --bs-btn-active-border-color: #c36161; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: rgb(210, 89, 94); --bs-btn-disabled-border-color: rgb(210, 89, 94); } ::-webkit-scrollbar { width: 15px } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey; border-radius: 10px } ::-webkit-scrollbar-thumb { background: #ab3536; border-radius: 10px } ::-webkit-scrollbar-thumb:hover { background: #ef5051; } @media (max-width: 479px) { h1, h2, h3, h4, h5, h6 { font-family: var(--font-regular); font-weight: var(--bs-body-h-font-weight); font-size: var(--bs-body-h-font-size11); } } @media (max-width: 599px) and (min-width: 480px) { h1, h2, h3, h4, h5, h6 { font-family: var(--font-regular); font-weight: var(--bs-body-h-font-weight); font-size: var(--bs-body-h-font-size11); } } @media (max-width: 799px) and (min-width: 600px) { h1, h2, h3, h4, h5, h6 { font-family: var(--font-regular); font-weight: var(--bs-body-h-font-weight); font-size: var(--bs-body-h-font-size11); } } @media (max-width: 900px) and (min-width: 800px) { h1, h2, h3, h4, h5, h6 { font-family: var(--font-regular); font-weight: var(--bs-body-h-font-weight); font-size: var(--bs-body-h-font-size11); } } section { padding: 10px 0; overflow: hidden } @font-face { font-display: block; font-family: "bootstrap-icons"; src: url("./fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff2"), url("./fonts/bootstrap-icons.woff?24e3eb84d0bcaf83d77f904c78ac1f47") format("woff"); } .bi::before, [class*=" bi-"]::before, [class^=bi-]::before { display: inline-block; font-family: bootstrap-icons, serif !important; font-style: normal; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; vertical-align: -.125em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .bi-arrow-up-short::before { content: "\f145" } .bi-chevron-down::before { content: "\f282" } .bi-chevron-right::before { content: "\f285" } .bi-door-open::before { content: "\f308" } .bi-facebook::before { content: "\f344" } .bi-instagram::before { content: "\f437" } .bi-linkedin::before { content: "\f472" } .bi-list::before { content: "\f479" } .bi-telegram::before { content: "\f5b3" } .bi-twitter::before { content: "\f5ef" } .bi-x::before { content: "\f62a"; } .header { padding: 15px 0; transition: all .5s; z-index: 997; background: #345cf7; box-shadow: 0 2px 20px rgba(var(--color-secondary-rgb), .1) } .header .logo img { max-height: 40px; margin-right: 6px; width: 90%; height: auto; } .header .btn-getstarted, .header .btn-getstarted:focus { font-size: 16px; color: var(--color-white); background: var(--color-red-gradient); padding: 8px 23px; border-radius: 4px; transition: .3s; font-family: danaMedium, sans-serif } .header .btn-getstarted:focus:hover, .header .btn-getstarted:hover { color: var(--color-white); background: rgba(var(--color-red-rgb), 0.7); } @media (max-width: 1279px) { .header .btn-getstarted, .header .btn-getstarted:focus { margin-right: 80px } } .nav-link:focus, .nav-link:hover { color: var(--color-black); } @media (min-width: 1280px) { .navbar { padding: 0; position: relative } .navbar ul { margin: 0; padding: 0; display: flex; list-style: none; align-items: center } .navbar li { position: relative } .navbar > ul > li { white-space: nowrap } .navbar a, .navbar a:focus { direction: ltr; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-family: danaLight, sans-serif; font-size: 16px; font-weight: 400; color: white; white-space: nowrap; transition: .3s; position: relative } .navbar a i, .navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px } .navbar > ul > li > a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--color-gray); visibility: hidden; transition: all .3s ease-in-out 0s; transform: scaleX(0) } .navbar .active:before, .navbar a:hover:before, .navbar li:hover > a:before { visibility: visible; transform: scaleX(.7) } .navbar .active, .navbar .active:focus, .navbar a:hover, .navbar li:hover > a { color: #000000; background: #ffffff; border-radius: 20px 20px 0 0; } .navbar .dropdown .active:before, .navbar .dropdown a:hover:before, .navbar .dropdown:hover > a:before { visibility: hidden } .navbar .dropdown .active, .navbar .dropdown .active:focus, .navbar .dropdown a:hover, .navbar .dropdown:hover > a { color: var(--color-black); border-radius: 20px 20px 0 0; } .navbar .dropdown ul { display: block; position: absolute; right: 0; top: 100%; margin: 0; padding: 10px 10px; z-index: 99; opacity: 0; visibility: hidden; background: var(--color-white); transition: .3s; border: 1px solid #e7e7e7; border-radius: 20px 0 0 20px; } .navbar .dropdown ul li { min-width: 200px } .navbar .dropdown ul a { padding: 10px 20px; font-size: 15px; text-transform: none; font-weight: 400; color: rgba(var(--color-black-rgb), 1); direction: rtl } .navbar .dropdown ul a i { font-size: 12px } .navbar .dropdown .active, .navbar .dropdown .active:focus, .navbar .dropdown a:hover, .navbar .dropdown ul .active, .navbar .dropdown ul .active:hover, .navbar .dropdown ul a:hover .navbar .dropdown:hover > a { color: #000000; background: #ffffff; border-radius: 20px 20px 0 0; } .navbar .dropdown ul li:hover > a { background: rgb(239 80 81); border-radius: 10px; color: white; } .navbar .dropdown:hover > ul { opacity: 1; visibility: visible } .navbar .dropdown .dropdown ul { top: 0; right: calc(100% - 0px); visibility: hidden } .navbar .dropdown .dropdown:hover > ul { opacity: 1; top: 0; visibility: visible } } @media (min-width: 1280px) and (max-width: 1366px) { .navbar .dropdown .dropdown ul { left: -90% } .navbar .dropdown .dropdown:hover > ul { left: -100% } } @media (max-width: 1279px) { .navbar { position: fixed; top: 0; left: -100%; width: calc(100% - 100px); bottom: 0; transition: .7s; z-index: 9997 } .navbar ul { position: absolute; inset: 0; padding: 10px 0; margin: 0; background: rgb(237 237 237); overflow-y: auto; transition: .3s; z-index: 9998 } .navbar a, .navbar a:focus { display: flex; align-items: center; justify-content: space-between; padding: 9px 6px; margin-left: 30px; margin-right: 30px; font-size: 0.9em; font-weight: 700; color: rgba(var(--color-black-rgb), .7); white-space: nowrap; border-bottom: 1px solid #e9eaea; } .navbar a i, .navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px } .navbar .active, .navbar .active:focus, .navbar a:hover, .navbar li:hover > a { } .navbar .dropdown .dropdown ul, .navbar .dropdown ul { position: static; display: none; padding: 10px 0; transition: all .5s ease-in-out; background: #f5f5f5; } .navbar .dropdown .dropdown > .dropdown-active, .navbar .dropdown > .dropdown-active { display: block } .mobile-nav-toggle { display: block !important; color: #0c0d0f; font-size: 38px; cursor: pointer; line-height: 0; transition: .5s; position: fixed; top: 20px; z-index: 9999; right: 28px } .mobile-nav-toggle.bi-x { color: var(--color-white) } .mobile-nav-active { overflow: hidden; z-index: 9995; position: relative } .mobile-nav-active .navbar { left: 0 } .mobile-nav-active .navbar:before { content: ""; position: fixed; inset: 0; background: rgb(140 140 140 / 72%); z-index: 9996; } } .nav-link { background: none; border: 0; color: var(--color-black); display: block; font-size: var(--bs-body-h-font-size11); font-weight: var(--bs-body-h-font-weight); padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x); text-decoration: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out } .footer { color: var(--color-black); font-size: 14px; box-shadow: var(--shadow-box); } .footer .footer-content { background: var(--bs-white); padding: 60px 0 30px 0 } .footer .footer-content .footer-info { margin-bottom: 30px; } .footer .footer-content .footer-info p { font-size: 14px; line-height: 24px; margin-bottom: 0; font-family: danaLight, sans-serif; color: var(--color-black) } .footer .footer-content .footer-links { margin-bottom: 30px } .footer .footer-content .footer-links ul { list-style: none; padding: 0; margin: 0 } .footer .footer-content .footer-links ul i { padding-right: 2px; color: var(--color-black); font-size: 12px; line-height: 1 } .footer .footer-content .footer-links ul li { padding: 10px 0; align-items: center } .footer .footer-content .footer-links ul li:first-child { padding-top: 0 } .footer .footer-content .footer-links ul a { color: rgba(var(--color-black), .9); transition: .3s; display: inline-block; line-height: 1; } .footer .footer-legal { padding: 30px 0; background: var(--color-dark-gradient); } .footer .footer-legal .credits { padding-top: 4px; font-size: 13px; color: var(--color-white) } .footer .footer-legal .credits a { color: var(--color-white) } .footer .footer-legal .social-links a { font-size: 18px; display: inline-block; background: rgba(var(--color-white-rgb), .1); color: var(--color-white); line-height: 1; padding: 8px 0; margin-right: 4px; border-radius: 4px; text-align: center; width: 36px; height: 36px; transition: .3s } .footer span { font-family: var(--font-regular), serif; font-weight: bold; font-size: var(--bs-body-h-font-size12) } .footer .footer-legal .social-links a:hover { background: var(--color-cream); text-decoration: none } @media (min-width: 300px) and (max-width: 800px) { .footer .footer-content .footer-info { margin-bottom: 30px; text-align: center; } .footer .footer-content .footer-links { margin-bottom: 30px; text-align: center; } .footer .footer-content .footer-links ul li { padding: 10px 0; align-items: center; text-align: center; } } @media (min-width: 1280px) { .navbar a, .navbar a:focus { direction: ltr; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-family: vazirmatn, sans-serif; font-size: 16px; font-weight: 400; color: white; white-space: nowrap; transition: .3s; position: relative; } } .footerHiddenText { height: 50px; color: #81858b; position: relative; } .footerHiddenText:before { background: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 50%, #eff1f5); content: ""; height: 100%; position: absolute; width: 100%; } .btn-collapse { font-size: .8rem; width: 100%; bottom: 0; } .btn-collapse::before { content: ""; display: block; position: absolute; left: 0; right: 0; } [data-collapse-target] { border: 1px solid var(--color-anchor-200); border-radius: 20px; padding: 8px; background-color: var(--color-white); color: var(--color-secondary-500); display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } [data-collapse-target]::before { content: attr(data-collapsed); } section.inner-page #page-hero { background: linear-gradient(90deg, rgba(208, 208, 208, 1) 7%, rgba(255, 255, 255, 1) 49%, rgba(221, 221, 221, 1) 100%); padding-top: 30px; } @media (min-width: 576px) { .d-sm-inline-block { display: inline-block !important; } } section.inner-page#products-page #order-filters { font-size: 13px; } section.inner-page#products-page #order-filters .order-filter { font-size: 12px; border-radius: 10px; margin: 0 1px; padding: 2px 10px; cursor: pointer; opacity: 1; transition: 0.2s; } section.inner-page#products-page #order-filters .order-filter.active { color: #ffffff; background-color: #f4171b; } svg:not(:root).svg-inline--fa { overflow: visible; } .svg-inline--fa.fa-w-17 { width: 1.0625em; } .svg-inline--fa { display: inline-block; font-size: inherit; height: 1em; overflow: visible; vertical-align: -.125em; } .row > [class*="col-"] { min-width: 0; } .product-card { min-height: 240px; height: 99%; background-color: white; border-radius: 10px 10px; margin: 2px; border: 1px solid #d3d3d3; box-shadow: rgba(0, 0, 0, 0.15) 0 1px 5px; } .product-card { position: relative; /* Needed for absolute positioning of overlay */ min-width: 0; } .product-card-overlay { position: absolute; top: 0; left: 0; /*width: 100%;*/ /*height: 100%;*/ background-color: rgb(255 255 255 / 43%); z-index: 10; pointer-events: none; border-radius: 10px 10px; } .product-card h3 { font-family: var(--font-regular); font-weight: bold; font-size: var(--bs-body-h-font-size9); color: #282828; line-height: 23px; padding-top: 10px; min-height: 56px; transition: 0.2s; } .product-card .image { background-size: contain; background-repeat: no-repeat; background-position: center center; transition: all 1s ease-out; padding: 11px; } .product-card .image img { border-radius: 0; } .product-card:hover .image { opacity: 0.8; transition: all 1s ease-out; } .product-card:hover .details { background-color: #e9e9e9; transition: 0.3s; } .product-card .details { width: 100%; min-width: 0; } .product-card .details > div { min-width: 0; } .product-card .category { font-family: var(--font-regular); font-size: 11px; } .product-card .category a { font-family: var(--font-regular); font-size: 16px; line-height: 23px; padding-top: 10px; min-height: 56px; transition: 0.2s; text-align: justify; color: #282828; } .product-card .rate { padding-top: 5px; font-size: var(--bs-body-h-font-size7); } .product-card .rate svg { font-size: 12px; color: #fcb941; } .product-card .price { font-family: var(--font-regular); font-weight: bold; font-size: var(--bs-body-h-font-size9); color: #020202; } .product-card .tag { font-weight: bold; color: #8b8b8b; background-color: #e3e3e3; } section.inner-page#products-page #pagination-bg { background-color: #fff; border-radius: 5px; padding: 10px 0; margin-top: 15px; border: 1px solid #d4d4d4; } section.inner-page#products-page#pagination-bg .pagination { margin: 0 auto; } section.inner-page#products-page #pagination-bg .pagination li { border: none !important; border-radius: 5px !important; padding: 0 5px; } section.inner-page#products-page #pagination-bg .pagination li a { border: none !important; border-radius: 20px; padding: 5px 10px; color: #000000 !important; font-family: var(--font-regular); font-weight: bold; } section.inner-page#products-page #pagination-bg .page-item.active .page-link { background-color: #345cf7 !important; color: #f1f1f1 !important; } section.inner-page#products-page #pagination-bg .pagination #previous-page { right: 10px; } section.inner-page#products-page #pagination-bg .pagination #next-page { left: 10px; } section.inner-page#products-page #pagination-bg .pagination #next-page, section.inner-page#products-page #pagination-bg .pagination #previous-page { border: 1px solid #d4d4d4 !important; margin: 0 20px; border-radius: 5px !important; } section.inner-page#products-page #pagination-bg .pagination #next-page svg, section.inner-page#products-page #pagination-bg .pagination #previous-page svg { vertical-align: middle; color: #555555 !important; } .accordion-custom { margin-bottom: 0; } .accordion-item:first-of-type .accordion-button { border-top-right-radius: var(--bs-accordion-inner-border-radius); border-top-left-radius: var(--bs-accordion-inner-border-radius); } .accordion-button:not(.collapsed) { color: var(--bs-accordion-active-color); background-color: var(--bs-accordion-active-bg); box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); } .accordion-button:not(.collapsed)::after { background-image: var(--bs-accordion-btn-active-icon); transform: var(--bs-accordion-btn-icon-transform); } .accordion-button::after { flex-shrink: 0; width: var(--bs-accordion-btn-icon-width); height: var(--bs-accordion-btn-icon-width); margin-right: auto; content: ""; background-image: var(--bs-accordion-btn-icon); background-repeat: no-repeat; background-size: var(--bs-accordion-btn-icon-width); transition: var(--bs-accordion-btn-icon-transition); } section.inner-page#products-page .filters-container .accordion-item:first-of-type .accordion-button { color: #1a1f24; background-color: #e9e9e9; font-family: var(--font-regular); font-weight: bold; font-size: 16px; line-height: 23px; padding-top: 10px; min-height: 56px; transition: 0.2s; text-align: justify; box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px; } .accordion-item:last-of-type { border-radius: 0; } section.inner-page#products-page .filters-container .accordion-item a { color: #282828; } section.inner-page#products-page .filters-container .accordion-item a:hover { color: #939393; } [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { cursor: pointer; } section.inner-page#products-page .side-product { border-bottom: 1px solid lightgray; padding-bottom: 5px; } section.inner-page#products-page .side-product .image { min-height: 65px; background-size: contain; background-position: center center; background-repeat: no-repeat; border-radius: 3px; box-shadow: 0 0 2px #c2c2c2; } section.inner-page#products-page .side-product h2 { font-size: 14px; line-height: 23px; color: #282828; margin: 0; transition: 0.1s; } section.inner-page#products-page .side-product h3 { font-size: 14px; line-height: 23px; color: #282828; margin: 0; transition: 0.1s; } section.inner-page#products-page .side-product h2:hover { color: #939393; } section.inner-page#products-page .side-product h2:hover { color: #939393; } section.inner-page#products-page .side-product .price { font-family: var(--font-regular); font-weight: bold; font-size: 13px; color: #020202; line-height: 19px; } section.inner-page#products-page .side-product .views { font-family: var(--font-regular); font-weight: bold; font-size: 13px; color: #020202; line-height: 19px; } section.inner-page .content { padding-top: 30px; padding-bottom: 30px; } section.inner-page .content .title { font-size: 20px; line-height: 37px; } section.inner-page .content p { font-family: var(--font-regular); font-size: 14px; } section.inner-page#product-page #product-intro h1 { font-size: 22px; color: #282828; line-height: 32px; padding: 0; } section.inner-page#product-page #product-intro p { line-height: 22px; } section.inner-page#product-page .swiper-container .image { width: 100%; height: auto; } section.inner-page#product-page .swiper-container.gallery-top { width: 100%; border: 1px solid gray; border-radius: 10px; } section.inner-page#product-page #product-intro .price-container .pre-price { font-size: 21px; color: #605f5f; text-decoration: line-through; } section.inner-page#product-page #product-intro .price-container .price { font-size: 27px; color: #000000; } section.inner-page#product-page #product-intro .price-container .price:hover { font-size: 27px; color: #000000; } section.inner-page#product-page #product-nav-tabs { line-height: 26px; margin-top: 60px; border: 1px solid lightgray; border-radius: 15px; } section.inner-page#product-page #product-nav-tabs #tabs-panel .tab-item.selected { color: #0277C8; } section.inner-page#product-page #product-nav-tabs #tabs-panel .tab-item { font-size: 17px; background: none; border: none; color: dimgray; cursor: pointer; } section.inner-page#product-page #product-nav-tabs .tabs-container { font-size: 14px; } section.inner-page#product-page #product-nav-tabs .tabs-container#details-tab .detail-title { font-size: 16px; } section.inner-page#product-page #product-nav-tabs .tabs-container#details-tab .detail-title svg { color: #fcb941; } section.inner-page#cart-page #cart-products { border: 1px solid lightgray; border-radius: 15px; } section.inner-page#cart-page #cart-products #heading { font-family: var(--font-regular); background-color: rgba(209, 209, 209, 0.2); margin: 0 1px; } section.inner-page#cart-page #cart-products .product .title:hover { opacity: 0.8; } section.inner-page#cart-page #cart-products .product .title { font-family: var(--font-regular); font-size: 14px; color: #282828; line-height: 23px; transition: 0.2s; } section.inner-page#cart-page #cart-products #return-to-shop { font-family: var(--font-regular); font-size: 14px; } section.inner-page#cart-page #cart-products .product .product-remove { color: darkred; } section.inner-page#cart-page #cart-products .product .product-remove:hover { color: #0277C8; } section.inner-page#cart-page #cart-products .product .order-number .btn-outline-secondary.btn-plus { padding: 4px 8px; } section.inner-page#cart-page #cart-products .product .order-number .btn-outline-secondary.btn-minus { padding: 0px 8px 10px 8px; } section.inner-page#cart-page #cart-products .product .order-number .btn-outline-secondary { color: #282828; background-color: rgba(209, 209, 209, 0.3); height: 30px; border-radius: 3px; border-color: dimgray; } section.inner-page#cart-page #cart-products .product .order-number input { font-size: 16px; background-color: whitesmoke; height: 30px; border-radius: 3px; padding: 12px 0; margin: 0 3px; } section.inner-page#cart-page #factor { font-family: var(--font-regular); border: 1px solid lightgray; border-radius: 15px; padding: 10px 0; } .ordered_product h2:hover { opacity: 0.8; } section.inner-page#checkout-page #factor { font-family: var(--font-regular); font-size: 15px; border: 1px solid lightgray; border-radius: 15px; } section.inner-page#checkout-page .title { font-family: var(--font-regular); font-size: 18px; color: #000000; } section.inner-page#checkout-page section#orders { border: 1px solid lightgray; border-radius: 15px; } section.inner-page#checkout-page section#orders .ordered_product { min-height: 150px; border: 1px solid #e9eaea; border-radius: 20px; } section.inner-page#checkout-page section#orders .ordered_product h2 { font-family: var(--font-regular); font-size: 13px; line-height: 18px; padding: 0; margin: 0; } section.inner-page#checkout-page section#orders .ordered_product .number { font-family: var(--font-regular); font-weight: bold; font-size: 13px; color: #020202; } section.inner-page#checkout-page section#order-form { border: 1px solid lightgray; border-radius: 15px; font-family: var(--font-regular); } section.inner-page#checkout-page section#order-form .address-to-send { font-family: var(--font-regular); font-size: 14px; border: 1px solid lightgray; border-radius: 10px; } section.inner-page#checkout-page section#order-form .address-to-send .address-title { font-family: var(--font-regular); font-size: 15px; line-height: 30px; } section.inner-page#checkout-page section#order-form-success { border: 1px solid lightgray; border-radius: 15px; } .loading-state { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 9999; display: flex; justify-content: center; align-items: center; } .loading { width: 100px; height: 100px; border-radius: 50%; border: 10px solid #ddd; border-top-color: #000000; animation: loading 1s linear infinite; } @keyframes loading { to { transform: rotate(360deg); } } .btn-sliver-light { --bs-btn-color: #ffffff; --bs-btn-bg: #8c8f93; --bs-btn-border-color: #8d8f93; --bs-btn-hover-color: #000; --bs-btn-hover-bg: #d3d4d5; --bs-btn-hover-border-color: #c6c7c8; --bs-btn-focus-shadow-rgb: 211, 212, 213; --bs-btn-active-color: #000; --bs-btn-active-bg: #c6c7c8; --bs-btn-active-border-color: #babbbc; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #000; --bs-btn-disabled-bg: #f8f9fa; --bs-btn-disabled-border-color: #f8f9fa; } .share-btn { display: inline-block; color: #ffffff; border: none; padding: 0.1em 0.6em; outline: none; text-align: center; font-size: 0.9em; margin: 0 0.2em; } .share-btn:focus, .share-btn:hover { text-decoration: none; opacity: 0.8; } .share-btn:active { color: #e2e2e2; } .share-btn.twitter { background: #55acee; } .share-btn.facebook { background: #3B5998; } .share-btn.linkedin { background: #0277C8; } .share-btn.telegram { background: #55acee; } .share-btn.whatsapp { background: #53d310; } .absoluteImage { position: absolute; top: 10px; left: 10px; } .scroll-top.active { visibility: visible; opacity: 1; } .scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 995; background: #f60b14; width: 40px; height: 40px; border-radius: 50%; transition: .4s; } .scroll-top i { font-size: 24px; color: var(--color-white); line-height: 0; } .scroll-top:hover { background: #a4a4a4; color: var(--color-white) } #orderContainer form .container .validationErrors { color: #c80202; } .copyright strong { color: white; } .ms-2 { margin-right: .5rem !important } .ms-4 { margin-right: 1rem !important } /* Skeleton styles */ .skeleton { background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); animation: shimmer 1.5s infinite; background-size: 200% 100%; } .skeleton-accordion { height: 58px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-order-filter { border-radius: 4px; height: 70%; width: 18%; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-button { height: 32px; width: 120px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-card { border-radius: 18px; /*background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%);*/ background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-image { height: 116px; width: 100%; margin-top: 10px; border-radius: 18px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-title { height: 16px; width: 150px; margin-top: 15px; border-radius: 18px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-title-2 { height: 16px; width: 100px; margin-top: 15px; border-radius: 18px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-price { height: 30px; width: 70px; margin-top: 20px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-price-currency { height: 30px; width: 30px; margin-top: 20px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-purchase-button { height: 30px; width: 30px; margin-top: 20px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-rate { height: 16px; width: 140px; margin-top: 15px; border-radius: 18px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-visits { height: 16px; width: 50px; margin-top: 15px; border-radius: 18px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-header { height: 40px; width: 20%; margin-bottom: 5px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-group { margin-bottom: 20px; } .skeleton-label { height: 40px; width: 30%; margin-bottom: 8px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-text-muted { height: 20px; width: 60%; margin-bottom: 8px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-input { height: 40px; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } .skeleton-textarea { height: 100px; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #f8f8f8 50%, #e0e0e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* Animation effect */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .shop-skeleton, .skeleton-header, .skeleton-label, .skeleton-input, .skeleton-text-muted, .skeleton-textarea, .skeleton-button, .skeleton-accordion, .skeleton-order-filter, .skeleton-image, .skeleton-card, .skeleton-title, .skeleton-title-2, .skeleton-price, .skeleton-price-currency, .skeleton-purchase-button, .skeleton-rate, .skeleton-visits, .skeleton { animation: shimmer 1.5s infinite ease-in-out; } .marginLeft20 { margin-left: 20px; } .gap-2.w-100 { display: flex; flex-wrap: wrap; gap: 0.5rem; } .badge.rounded-pill.tag.px-3.py-2.text-break { word-break: break-word; white-space: normal; overflow-wrap: break-word; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 0.05rem 0; } .product-title { color: #1a1f24; font-family: var(--font-regular); font-weight: bold; font-size: 13px; line-height: 23px; min-height: 56px; text-align: justify; } .product-card { transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 15px; overflow: hidden; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.15); } .feature-icon { font-size: 2rem; margin-bottom: 15px; } .highlight { background: #ef5051 !important; color: white; padding: 20px; border-radius: 15px; margin: 20px 0; } .section-title { position: relative; padding-bottom: 15px; } .section-title:after { content: ''; position: absolute; bottom: 0; left: 0; width: 80px; height: 4px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 2px; }