:root{
    --theme-color: rgb(13, 89, 165);
    --theme-100-color: rgba(13, 89, 165, 0.1);
    --theme-200-color: rgba(13, 89, 165, 0.2);
    --theme-300-color: rgba(13, 89, 165, 0.3);
    --theme-400-color: rgba(13, 89, 165, 0.4);
    --theme-500-color: rgba(13, 89, 165, 0.5);
    --theme-600-color: rgba(13, 89, 165, 0.6);
    --theme-700-color: rgba(13, 89, 165, 0.7);
    --theme-800-color: rgba(13, 89, 165, 0.8);
    --theme-900-color: rgba(13, 89, 165, 0.9);
    --secondary-color: #FFCD3D;
    --white-color: #FFFFFF;
    --blue-100-color: #cfe2ff;
    --blue-500-color: #0d6efd;
    --indigo-100-color: #e0cffc;
    --indigo-500-color: #6610f2;
    --purple-100-color: #e2d9f3;
    --purple-500-color: #6f42c1;
    --purple-700-color: #432874;
    --purple-800-color: #2c1a4d;
    --pink-100-color: #f7d6e6;
    --pink-500-color: #d63384;
    --pink-700-color: #801f4f;
    --red-100-color: #f8d7da;
    --red-500-color: #dc3545;
    --red-700-color: #842029;
    --orange-100-color: #ffe5d0;
    --orange-500-color: #fd7e14;
    --orange-700-color: #984c0c;
    --yellow-100-color: #fff3cd;
    --yellow-500-color: #ffc107;
    --green-100-color: #d1e7dd;
    --green-500-color: #198754;
    --green-700-color: #0f5132;
    --teal-100-color: #d2f4ea;
    --teal-500-color: #20c997;
    --cyan-100-color: #cff4fc;
    --cyan-500-color: #0dcaf0;
    --grey-100-color: #f8f9fa;
    --grey-200-color: #e9ecef;
    --grey-300-color: #dee2e6;
    --grey-400-color: #ced4da;
    --grey-500-color: #ADB5BD;
    --grey-600-color: #6c757d;
    --grey-700-color: #495057;
    --grey-800-color: #343a40;
    --black-color: #000000;
    --transition-delay-03: all 0.3s ease;
}
*, *::after, *::before{
    box-sizing: border-box;
}
body::-webkit-scrollbar, body ::-webkit-scrollbar{
    height: 10px;
    width: 10px;
    border-radius: 20px;
}
body::-webkit-scrollbar-track, body ::-webkit-scrollbar-track{
    background-color: var(--grey-200-color);
    border-radius: 20px;
}
body::-webkit-scrollbar-thumb, body ::-webkit-scrollbar-thumb{
    background-color: var(--grey-600-color);
    border-radius: 20px;
}
body::-webkit-scrollbar-thumb:hover, body ::-webkit-scrollbar-thumb:hover{
    background-color: var(--grey-400-color);
}
html[dir="rtl"] body{
    font-family: "iran-sans", system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    margin: 0;
}
body:has(.cart-sidebar.show), body:has(.overlay-search.show){
    overflow: hidden;
}
button{
    cursor: pointer;
}
button:is(:disabled){
    cursor: not-allowed;
}
/* Border Color */
.border-color-blue-500{
    border-color: var(--blue-500-color);
}
.border-color-indigo-500{
    border-color: var(--indigo-500-color);
}
.border-color-purple-500{
    border-color: var(--purple-500-color);
}
.border-color-pink-500{
    border-color: var(--pink-500-color);
}
.border-color-red-500{
    border-color: var(--red-500-color);
}
.border-color-orange-500{
    border-color: var(--orange-500-color);
}
.border-color-yellow-500{
    border-color: var(--yellow-500-color);
}
.border-color-green-500{
    border-color: var(--green-500-color);
}
.border-color-teal-500{
    border-color: var(--teal-500-color);
}
.border-color-cyan-500{
    border-color: var(--cyan-500-color);
}
/* Background Color */
.bg-blue-100{
    background-color: var(--blue-100-color);
}
.bg-indigo-100{
    background-color: var(--indigo-100-color);
}
.bg-purple-100{
    background-color: var(--purple-100-color);
}
.bg-pink-100{
    background-color: var(--pink-100-color);
}
.bg-red-100{
    background-color: var(--red-100-color);
}
.bg-orange-100{
    background-color: var(--orange-100-color);
}
.bg-yellow-100{
    background-color: var(--yellow-100-color);
}
.bg-green-100{
    background-color: var(--green-100-color);
}
.bg-teal-100{
    background-color: var(--teal-100-color);
}
.bg-cyan-100{
    background-color: var(--cyan-100-color);
}
/* Size */
.w-100{
    width: 100%;
}
/* Form */
form{
    width: 100%;
}
/* Form Group */
.form-group{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    margin-bottom: 10px;
}
.form-group .from-label{
    font-size: 14px;
}
.form-group .form-control{
    font-family: inherit;
    width: 100%;
    border: 1px solid var(--grey-500-color);
    font-size: 16px;
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 10px;
    outline: none;
    transition: var(--transition-delay-03);
}
.form-group .form-control:focus, .form-group .form-control:active{
    border-color: var(--theme-color);
}
html[dir="rtl"] .form-check:not(.form-switch){
    padding-left: unset;
    padding-right: 30px;
}
html[dir="rtl"] .form-check:not(.form-switch) .form-check-input{
    float: right;
    margin-left: 10px;
    margin-right: -30px;
    margin-top: 0;
    height: 25px;
    width: 25px;
}
/* Button */
.btn{
    background-color: var(--theme-900-color);
    color: var(--white-color);
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: none;
    outline: none;
    font-family: "iran-sans";
    font-size: 17px;
    padding: 10px 30px;
    transition: var(--transition-delay-03);
}
.btn:active, .btn:focus, .btn:hover{
    background-color: var(--theme-color);
}
.btn-secondary{
    background-color: var(--secondary-color);
    color: var(--black-color);
    opacity: 0.9;
}
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover{
    background-color: var(--secondary-color);
    opacity: 1;
}
/* Wrapper */
.loading{
    position: fixed;
    background-color: var(--white-color);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
}
.loading.show{
    opacity: 1;
    visibility: visible;
    z-index: 5;
}
body:has(.loading.show){
    overflow: hidden;
}
.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px;
  width: 200px;
  height: 200px;
  background-color: transparent;
  border: none;
}
.wrapper .box-wrap {
  width: 70%;
  height: 70%;
  margin: calc((100% - 70%)/2) calc((100% - 70%)/2);
  position: relative;
  transform: rotate(-45deg);
}
.wrapper .box-wrap .box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(135, 0, 0, 0.6);
  background: linear-gradient(to right, #141562, #486FBC, #EAB5A1, #8DD6FF, #4973C9, #D07CA7, #F4915E, #F5919E, #B46F89, #141562, #486FBC);
  background-position: 0% 50%;
  background-size: 1000% 1000%;
  visibility: hidden;
}
.wrapper .box-wrap .box.one {
  -webkit-animation: moveGradient 15s infinite, oneMove 3.5s infinite;
          animation: moveGradient 15s infinite, oneMove 3.5s infinite;
}
.wrapper .box-wrap .box.two {
  -webkit-animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
          animation: moveGradient 15s infinite, twoMove 3.5s 0.15s infinite;
}
.wrapper .box-wrap .box.three {
  -webkit-animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
          animation: moveGradient 15s infinite, threeMove 3.5s 0.3s infinite;
}
.wrapper .box-wrap .box.four {
  -webkit-animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
          animation: moveGradient 15s infinite, fourMove 3.5s 0.575s infinite;
}
.wrapper .box-wrap .box.five {
  -webkit-animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
          animation: moveGradient 15s infinite, fiveMove 3.5s 0.725s infinite;
}
.wrapper .box-wrap .box.six {
  -webkit-animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
          animation: moveGradient 15s infinite, sixMove 3.5s 0.875s infinite;
}
/* Pagination */
nav .pagination{
    margin-top: 15px;
    margin-bottom: 30px;
    justify-content: center;
}
nav:has(ul.pagination) ul{
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}
nav:has(ul.pagination) ul li.page-item .page-link{
    font-size: 14px;
}
.products .page-item:first-child .page-link {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
nav:has(.pagination) .page-item:last-child .page-link {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Header */
header{
    background-color: var(--bs-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
header .main-header{
    padding-top: 20px;
    padding-bottom: 10px;
}
header .mobile-menu-header #toggle-mobile-menu{
    display: none;
}
header .main-header .logo{
    display: block;
    height: 40px;
    max-width: 100%;
}
header .main-header .logo img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
header .main-header form.form-search{
    display: flex;
    position: relative;
}
header .main-header form.form-search input{
    background-color: #F5F5F5;
    border-radius: 50px;
    width: 100%;
    padding: 10px 50px 10px 15px;
    border: none;
    outline: none;
    box-shadow: none;
    font-weight: 500;
    color: var(--grey-700-color);
    z-index: 2;
}
header .main-header form.form-search input::placeholder{
    color: #747474;
    font-weight: 300;
}
header .main-header form.form-search::before{
    content: '';
    background-image: url('../media/svg/search.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 25px;
    width: 25px;
    top: 10px;
    right: 13px;
    position: absolute;
    z-index: 3;
}
header .form-search .search-box{
    position: absolute;
    left: 0;
    top: 0;
    background-color: var(--grey-100-color);
    right: 0;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding-top: 50px;
    z-index: 0;
    opacity: 0;
    max-height: 450px;
    overflow: hidden;
    visibility: hidden;
    transition: var(--transition-delay-03);
}
header .main-header form.form-search .search-box ul{
    border-top: 1px solid var(--theme-color);
    padding: 10px 0 10px 0;
    overflow: auto;
    max-height: 400px;
}
header .main-header form.form-search .search-box ul li{
    list-style: none;
}
header .main-header form.form-search .search-box ul li a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    padding: 5px 10px;
    width: calc(100% - 10px);
    text-decoration: none;
}
header .main-header form.form-search .search-box ul li a .image{
    height: 70px;
    width: 70px;
    border-radius: 5px;
    overflow: hidden;
}
header .main-header form.form-search .search-box ul li a .image img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
header .main-header form.form-search .search-box ul li a .content{
    padding: 0 10px;
    width: calc(100% - 90px);
}
header .main-header form.form-search .search-box ul li a .content .name{
    font-size: 14px;
    text-decoration: none;
    color: var(--grey-700-color)
}
header .main-header form.form-search .search-box ul li a .content .price{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 10px;
    font-size: 13px;
    color: var(--theme-color);
}
header .main-header form.form-search .search-box ul li a .content .price .sale{
    font-size: 12px;
    color: var(--grey-600-color);
    text-decoration: line-through;
}
header .main-header form.form-search .search-box .message{
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
}
.overlay-search.show{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.2);
}
body:has(.overlay-search.show) header .main-header form.form-search{
    z-index: 2;
}
body:has(.overlay-search.show) header .form-search .search-box{
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
header .main-header .actions{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
header .main-header .actions div:not(:last-child){
    border-left: 1px solid #747474;
}
header .main-header .actions .time-work{
    font-size: 14px;
    color: #747474;
    font-weight: 400;
    padding-left: 30px;
    padding-right: 30px;
    height: 45px;
}
header .main-header .actions .cart,
header .main-header .actions .account{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
    max-width: 100%;
    padding: 5px 15px;
}
header .main-header .actions .account{
    padding-left: 0;
}
header .main-header .actions .cart a,
header .main-header .actions .account a{
    display: flex;
    height: 25px;
    max-width: 100%;
    cursor: pointer;
}
header .main-header .actions .cart a img,
header .main-header .actions .account a img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
header .bottom-header nav ul{
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
}
header .bottom-header nav ul li{
    list-style: none;
    display: block;
}
header .bottom-header nav ul li a{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 7px;
    text-decoration: none;
    color: #3E3E3E;
    font-size: 15px;
    font-weight: 300;
    padding: 10px 0 15px 20px;
}
header .bottom-header nav ul li a .icon{
    height: 18px;
    width: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}
header .bottom-header nav ul li a .icon img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
header .bottom-header .mega-menu{
    position: relative;
}
header .bottom-header .mega-menu-container{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
}
header .bottom-header .mega-menu-container,
.mobile-main-menu .mega-menu-container{
    background-color: white;
    transition: var(--transition-delay-03);
    overflow: hidden;
    height: 100%;
}
header .bottom-header .mega-menu-container{
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    margin-top: 15px;
    transform: var(--transition-delay-03);
}
header .bottom-header .mega-menu-container, header .bottom-header .mega-menu-container .parent-nav,
header .bottom-header .mega-menu-container .parent-container{
    min-height: 350px;
}
header .bottom-header .mega-menu-container .parent-nav{
    background-color: var(--grey-100-color);
}
header .bottom-header .mega-menu-container.show{
    z-index: 10;
    opacity: 1;
    visibility: visible;  
    margin-top: 5px;
}
header .bottom-header .mega-menu-container .parent-nav,
header .bottom-header .mega-menu-container .parent-container,
.mobile-main-menu .mega-menu-container .parent-nav,
.mobile-main-menu .mega-menu-container .parent-container{
    overflow: auto;
}
header .bottom-header .mega-menu-container .parent-nav,
.mobile-main-menu .mega-menu-container .parent-nav{
    direction: ltr;
}
header .bottom-header .mega-menu-container .parent-nav::-webkit-scrollbar,
.mobile-main-menu .mega-menu-container .parent-nav::-webkit-scrollbar{
    width: 10px;
}
header .bottom-header .mega-menu-container .parent-nav::-webkit-scrollbar-track,
.mobile-main-menu .mega-menu-container .parent-nav::-webkit-scrollbar-track {
    background: var(--grey-300-color);
}
header .bottom-header .mega-menu-container .parent-nav::-webkit-scrollbar-thumb,
.mobile-main-menu .mega-menu-container .parent-nav::-webkit-scrollbar-thumb {
    background: var(--grey-500-color);
    border-radius: 5px;
}
header .bottom-header .mega-menu-container .parent-nav::-webkit-scrollbar-thumb:hover,
.mobile-main-menu .mega-menu-container .parent-nav::-webkit-scrollbar-thumb:hover{
    background: var(--grey-600-color);
}
header .bottom-header .mega-menu-container .parent-nav a,
.mobile-main-menu .mega-menu-container .parent-nav a{
    display: block;
    padding: 13px 30px;
    background-color: var(--grey-100-color);
    cursor: pointer;
    font-size: 16px;
    color: var(--grey-800-color);
    direction: rtl;
    transition: all 0.2s ease;
    text-decoration: none;
}
.mobile-main-menu .mega-menu-container .parent-nav a{
    padding: 10px 30px;
}
header .bottom-header .mega-menu-container .parent-nav a:nth-child(1){
    padding-top: 15px;
}
header .bottom-header .mega-menu-container .parent-nav a:last-child{
    padding-bottom: 15px;
}
header .bottom-header .mega-menu-container .parent-nav a.active, 
header .bottom-header .mega-menu-container .parent-nav a:hover,
.mobile-main-menu .mega-menu-container .parent-nav a.active{
    background-color: var(--white-color);
    color: var(--theme-color);
    font-weight: bold;
}
header .bottom-header .mega-menu-container .parent-container-item,
.mobile-main-menu .mega-menu-container .parent-container-item{
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
    display: none;
    background-color: var(--white-color);
    padding: 15px;
}
header .bottom-header .mega-menu-container .parent-container-item.active,
.mobile-main-menu .mega-menu-container .parent-container-item.active{
    opacity: 1;
    visibility: visible;
    display: block;
    height: 100%;
    width: 100%;
}
header .bottom-header .mega-menu-container .parent-container-item .title,
.mobile-main-menu .mega-menu-container .parent-container-item .title{
    font-size: 15px;
    font-weight: bold;
    position: relative;
    padding-right: 15px;
    margin-bottom: 15px;
    color: var(--grey-700-color);
}
header .bottom-header .mega-menu-container .parent-container-item .title::before,
.mobile-main-menu .mega-menu-container .parent-container-item .title::before{
    position: absolute;
    content: '';
    background-color: var(--theme-color);
    height: 100%;
    width: 3px;
    right: 3px;
}
header .bottom-header .mega-menu-container .parent-container-item .item-box a.title,
.mobile-main-menu .mega-menu-container .parent-container-item .item-box a.title{
    color: var(--grey-700-color);
    font-size: 13px;
    padding: 5px;
    display: block;
    text-decoration: none;
    font-weight: bold;
}
header .bottom-header .mega-menu-container .parent-container-item .item-box a.title::before,
.mobile-main-menu .mega-menu-container .parent-container-item .item-box a.title::before{
    width: 0;
    height: 0;
}
header .bottom-header .mega-menu-container .parent-container-item .item-box ul,
.mobile-main-menu .mega-menu-container .parent-container-item .item-box ul{
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    list-style: none;
}
header .bottom-header .mega-menu-container .parent-container-item .item-box ul li a,
.mobile-main-menu .mega-menu-container .parent-container-item .item-box ul li a{
    color: var(--grey-600-color);
    font-size: 13px;
    padding: 5px;
    display: block;
    text-decoration: none;
}
header .bottom-header .mega-menu-container .parent-container-item .item-box ul li a:hover,
.mobile-main-menu .mega-menu-container .parent-container-item .item-box ul li a:hover{
    color: var(--theme-color);
}
/* Mobile Main Menu */
.mobile-main-menu{
    display: none;
}
.mobile-main-menu .mega-menu-container .parent-nav a{
    font-size: 14px;
    border-left: 1px solid var(--theme-color);
    border-bottom: 1px solid var(--theme-color);
    height: 60px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
    text-decoration: none;
}
.mobile-main-menu .mega-menu-container .parent-nav a:last-child{
    border-bottom: none;
}
.mobile-main-menu .mega-menu-container .parent-nav a.active{
    border-left-color: var(--white-color);
}
/* Cart Sidebar */
.cart-canvas .btn-close{
    margin: calc(-.5* var(--bs-offcanvas-padding-y)) auto calc(-.5* var(--bs-offcanvas-padding-y)) calc(-.5* var(--bs-offcanvas-padding-x));
}
.cart-canvas .offcanvas-body{
    background-color: #F5F5F5;
}
.cart-canvas .offcanvas-body{
    overflow: auto;
}
.cart-canvas .items{
    display: block;
}
.cart-canvas .items .product-item, .page-cart .cart .product-item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    height: auto;
}
.cart-canvas .items .product-item .image, .page-cart .cart .product-item .image{
    width: 30%;
    height: 60px;
}
.cart-canvas .items .product-item .content, .page-cart .cart .product-item .content{
    width: 70%;
}
.cart-canvas .items .product-item .image img, .page-cart .cart .product-item .image img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.cart-canvas .item .product-item a.name, .page-cart .cart .product-item a.name{
    display: block;
    color: #747474;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    height: 60px;
}
.cart-canvas .item .product-item .cart{
    height: 35px;
}
.product-item .cart .plus-cart, .product-item .cart .minus-cart{
    height: 25px;
    width: 25px;
}
.cart-canvas .offcanvas-footer{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--grey-400-color);
    padding: 10px 15px;
}
.cart-canvas .offcanvas-footer .total, .cart-canvas .offcanvas-footer .reduction,
.cart-canvas .offcanvas-footer .final{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-direction: row;
}
.cart-canvas .offcanvas-footer .total .title, .cart-canvas .offcanvas-footer .reduction,
.cart-canvas .offcanvas-footer .final{
    font-size: 16px;
    color: var(--grey-700-color);
}
.cart-canvas .offcanvas-footer .total .price, .cart-canvas .offcanvas-footer .reduction .price,
.cart-canvas .offcanvas-footer .final .price{
    font-size: 16px;
    font-weight: bold;
    color: var(--black-color);
}
.cart-canvas .offcanvas-footer a{
    width: 100%;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
}
/* Main */
main{
    padding: 20px 0;
    background-color: #F5F5F5;
}
main .bread-crumb{
    background-color: var(--grey-100-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 40px 0;
    overflow: hidden;
}
main .bread-crumb .title{
    font-size: 40px;
    font-family: 'aviny';
    line-height: 30px;
}
main .bread-crumb div:last-child{
    margin-top: 20px;
    width: calc(100% - 20px);
    overflow: auto;
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
main .bread-crumb div a{
    color: var(--grey-700-color);
    text-decoration: none;
    transition: var(--transition-delay-03);
    text-wrap: nowrap;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
}
main .bread-crumb div a:not(:last-child){
    position: relative;
}
main .bread-crumb div a:not(:last-child):after{
    position: absolute;
    content: '/';
    left: 7px;
    font-size: 20px;
    color: var(--grey-700-color);
}
main .bread-crumb div a:not(:last-child):hover{
    color: var(--theme-color);
}
main .bread-crumb ul{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    list-style: none;
    padding: 0;
    gap: 10px;
    margin: 15px 0;
    width: calc(100% - 15px);
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 10px;
}
main .bread-crumb ul li{
    font-size: 15px;
    font-weight: bold;
    width: 100%;
    overflow: hidden;
}
main .bread-crumb ul li:not(:last-child){
    padding-left: 20px;
    position: relative;
}
main .bread-crumb ul li:not(:last-child):before{
    position: absolute;
    content: '/';
    left: 0;
    top: -1px;
    font-size: 20px;
    color: var(--grey-700-color);
}
main .bread-crumb ul li a{
    color: var(--grey-700-color);
    text-decoration: none;
    transition: var(--transition-delay-03);
    text-wrap: nowrap;
    word-wrap: normal;
    
}
main .bread-crumb ul li:hover a{
    color: var(--theme-color);
}
main #product-offs-carousel{
    background-color: var(--theme-color);
    border-radius: 15px;
}
main #product-offs-carousel .owl-stage-outer{
    padding: 15px 10px;
}
main #product-offs-carousel .owl-nav .owl-prev{
    position: absolute;
    top: 200px;
    right: 10px;
    background-color: var(--white-color);
    color: var(--black-color);
    padding: 10px 15px 10px 15px;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
main #product-offs-carousel .owl-nav .owl-next{
    position: absolute;
    top: 200px;
    left: 10px;
    background-color: var(--white-color);
    color: var(--black-color);
    padding: 10px 15px 10px 15px;
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
main #product-offs-carousel .owl-nav .owl-prev.disabled,
main #product-offs-carousel .owl-nav .owl-next.disabled{
    opacity: 0;
    visibility: hidden;
}
main #product-offs-carousel .item.first{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding-top: 40px;
}
main #product-offs-carousel .item.first img{
    width: 120px;
    height: 120px;
    object-fit: contain;
}
main #product-offs-carousel .item.first a{
    border: 1px solid var(--white-color);
    border-radius: 5px;
    padding: 10px 15px 10px 35px;
    color: var(--white-color);
    position: relative;
    text-decoration: none;
}
main #product-offs-carousel .item.first a::before{
    position: absolute;
    content: '\F284';
    font-family: "bootstrap-icons";
    font-weight: 900;
    left: 15px;
}
main #product-offs-carousel .item:not(.first){
    background-color: var(--white-color);
    border-radius: 10px;
    margin-left: 20px;
    margin-top: 10px;
    padding: 10px;
}
main #product-offs-carousel .item:not(.first) .top{
    height: 15px;
}
main #product-offs-carousel .item:not(.first) .image{
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
main #product-offs-carousel .item:not(.first) .top img,
main #product-offs-carousel .item:not(.first) .image img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
main #product-offs-carousel .item:not(.first) .title{
    margin-top: 10px;
}
main #product-offs-carousel .item:not(.first) .title a{
    font-size: 13px;
    color: var(--theme-color);
    font-weight: bold;
    text-decoration: none;
}
main #product-offs-carousel .item:not(.first) .stock{
    font-size: 12px;
    color: var(--green-500-color);
    margin-top: 10px;
}
main #product-offs-carousel .item:not(.first) .stock.danger{
    color: var(--red-500-color);
}
main #product-offs-carousel .item:not(.first) .cart .add-to-cart{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 5px;
    right: 0;
    border: 2px solid var(--theme-color);
    border-radius: 50%;
    padding: 3px 7px 0 7px;
    font-size: 20px;
    font-weight: bold;
    height: 35px;
    width: 35px;
}
main #product-offs-carousel .item:not(.first) .cart .add-to-cart:has(.spinner-border){
    cursor: not-allowed;
    opacity: 0.5;
    padding-top: 0;
}
main #product-offs-carousel .item:not(.first) .cart .cart-box{
    position: absolute;
    background-color: var(--white-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 120px;
    max-width: 140px;
    bottom: 5px;
    right: 0;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
}
main #product-offs-carousel .item:not(.first) .cart.show .cart-box{
    opacity: 1;
    visibility: visible;
}
main #product-offs-carousel .item:not(.first) .cart .cart-box .plus-to-cart,
main #product-offs-carousel .item:not(.first) .cart .cart-box .remove-from-cart{
    font-size: 25px;
    padding-top: 3px;
}
main #product-offs-carousel .item:not(.first) .title{
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    height: 40px;
    overflow: hidden;
}
main #product-offs-carousel .item:not(.first) .title a{
    color: var(--theme-color);
}
main #product-offs-carousel .item:not(.first) .stock{
    font-size: 12px;
}
main #product-offs-carousel .item:not(.first) .price{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    padding: 15px 0;
}
main #product-offs-carousel .item:not(.first) .price .off{
    background-color: var(--red-500-color);
    color: var(--white-color);
    padding: 2px 10px 1px 10px;
    border-radius: 20px;
    font-size: 11px;
}
main #product-offs-carousel .item:not(.first) .price .final{
    font-size: 13px;
    font-weight: bold;
}
main #product-offs-carousel .item:not(.first) .price .sale{
    text-decoration: line-through;
    font-size: 12px;
    color: var(--grey-500-color);
}
main #product-offs-carousel .item:not(.first) .timer{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row-reverse;
    gap: 3px;
}
main #product-offs-carousel .item:not(.first) .timer .hour,
main #product-offs-carousel .item:not(.first) .timer .minute{
    position: relative;
    padding-right: 6px;
}
main #product-offs-carousel .item:not(.first) .timer .hour::after,
main #product-offs-carousel .item:not(.first) .timer .minute::after{
    position: absolute;
    content: ':';
    font-size: 13px;
    right: 0;
}
main #product-offs-carousel .item:not(.first) .timer .hour,
main #product-offs-carousel .item:not(.first) .timer .minute,
main #product-offs-carousel .item:not(.first) .timer .second{
    color: var(--red-500-color);
    font-size: 13px;
    font-weight: bold;
}
main .new-products{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    border: 1px solid var(--grey-400-color);
    padding: 0 10px 20px 10px;
    border-radius: 10px;
    margin-top: 20px;
}
main .new-products .header {
    margin-right: 10px;
    margin-bottom: 30px;
}
main .new-products .header .title{
    font-family: "aviny", "iran-sans";
    font-weight: 500;
    font-size: 40px;
    position: relative;
    display: inline-flex;
    margin-bottom: 10px;
}
main .new-products .header .title::before{
    position: absolute;
    content: '';
    bottom: 2px;
    width: 100%;
    height: 4px;
    background-color: var(--theme-color);
}
main .new-products .header .subtitle{
    font-size: 14px;
    color: var(--grey-700-color);
}
main .new-products .product-carousel .owl-stage{
    padding-left: 30px !important;
    padding-right: 0 !important;
}
main .new-products .product-carousel .item{
    margin-left: 20px;
    padding: 10px;
}
main .new-products .product-carousel .item:not(.last){
    border-left: 1px solid var(--theme-200-color);
}
main .new-products .product-carousel .image{
    height: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
main .new-products .product-carousel .image img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
main .new-products .product-carousel .title{
    margin-top: 10px;
}
main .new-products .product-carousel .title a{
    font-size: 13px;
    color: var(--theme-color);
    font-weight: bold;
    text-decoration: none;
}
main .new-products .product-carousel .stock{
    font-size: 12px;
    color: var(--green-500-color);
    margin-top: 10px;
}
main .new-products .product-carousel .stock.danger{
    color: var(--red-500-color);
}
main .new-products .product-carousel .cart .add-to-cart{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 5px;
    right: 0;
    border: 2px solid var(--theme-color);
    background-color: var(--white-color);
    border-radius: 50%;
    padding: 3px 7px 0 7px;
    font-size: 20px;
    font-weight: bold;
    height: 35px;
    width: 35px;
}
main .new-products .product-carousel .cart .add-to-cart:has(.spinner-border){
    cursor: not-allowed;
    opacity: 0.5;
    padding-top: 0;
}
main .new-products .product-carousel .cart .cart-box{
    position: absolute;
    background-color: var(--white-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    min-width: 120px;
    max-width: 140px;
    bottom: 5px;
    right: 0;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
}
main .new-products .product-carousel .cart.show .cart-box{
    opacity: 1;
    visibility: visible;
}
main .new-products .product-carousel .cart .cart-box .plus-to-cart,
main .new-products .product-carousel .cart .cart-box .remove-from-cart{
    font-size: 25px;
    padding-top: 3px;
}
main .new-products .product-carousel .title{
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    height: 40px;
    overflow: hidden;
}
main .new-products .product-carousel .title a{
    color: var(--theme-color);
}
main .new-products .product-carousel .stock{
    font-size: 12px;
}
main .new-products .product-carousel .price{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    padding: 15px 0 0 0;
}
main .new-products .product-carousel .price .off{
    background-color: var(--red-500-color);
    color: var(--white-color);
    padding: 2px 10px 1px 10px;
    border-radius: 20px;
    font-size: 11px;
}
main .new-products .product-carousel .price .final{
    font-size: 13px;
    font-weight: bold;
}
main .new-products .product-carousel .price .sale{
    text-decoration: line-through;
    font-size: 12px;
    color: var(--grey-500-color);
}
/* Footer */
footer .top-footer{
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #F5F5F5;
}
footer .top-footer .owl-carousel .item{
    border: 1px solid #747474;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    padding: 30px;
    border-radius: 5px;
    gap: 10px;
}
footer .top-footer .owl-carousel .item .icon{
    height: 30px;
    display: flex;
}
footer .top-footer .owl-carousel .item .icon img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
footer .top-footer .owl-carousel .item .text{
    font-size: 15px;
    font-weight: 500;
}
footer .footer{
    padding-top: 50px;
    padding-bottom: 30px;
    background-color: var(--theme-color);
}
footer .footer .about-footer-box{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
}
footer .footer .about-footer-box .logo{
    height: 40px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 20px;
}
footer .footer .about-footer-box .logo img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
footer .footer .link-footer-box,
footer .footer .social-footer-box{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 10px;
}
footer .footer .link-footer-box .title,
footer .footer .social-footer-box .title{
    position: relative;
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
    color: var(--bs-white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
footer .footer .link-footer-box ul{
    list-style: none;
    margin: 15px 0;
    padding: 0 10px;
}
footer .footer .link-footer-box ul li a{
    text-decoration: underline;
    padding-bottom: 7px;
    color: var(--bs-white);
    font-size: 16px;
    transition: var(--transition-delay-03);
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}
footer .footer .social-footer-box .social-box{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    gap: 15px;
    margin-bottom: 15px;
    margin-left: 5px;
}
footer .footer .social-footer-box .social-box .icon{
    font-size: 22px;
    font-weight: bold;
}
footer .footer .social-footer-box .social-box .content{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
}
footer .footer .social-footer-box .social-box .content .title{
    font-size: 15px;
    color: var(--bs-white);
    margin: 0;
    padding: 0;
}
footer .footer .social-footer-box .social-box .content .title::before{
    width: 0;
    height: 0;
}
footer .footer .social-footer-box .social-box .content .text{
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-white);
    margin-top: 0px;
    text-decoration: none;
}
footer .footer .e-namad-footer-box{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    max-height: 200px;
    width: 100%;
}
footer .footer  .e-namad-footer-box a{
    height: 120px;
    width: 120px;
    display: block;
    text-align: center;
    background-color: var(--bs-white);
    border-radius: 9px;
    box-shadow: 0px 2px 7px rgba(255, 255, 255, 0.5);
}
footer .footer .e-namad-footer-box a img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
footer .bottom-footer {
    margin-top: 30px;
    margin-bottom: 10px;
}
footer .bottom-footer .copy-right{
    color: var(--bs-white);
    font-weight: 500;
    font-size: 14px;
    text-align: center;
}
footer .bottom-footer .copy-right a{
    color: inherit;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}
/* Bottom Navigation */
.bottom-navigation{
    height: 70px;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    width: 100%;
    box-shadow: 0px -10px 30px rgba(0, 0, 0, 0.1);
    z-index: -1;
}
.bottom-navigation ul{
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin: 0;
    width: 100%;
}
.bottom-navigation ul li{
    list-style: none;
    position: relative;
    min-width: 70px;
    width: 100%;
    height: 70px;
    z-index: 1;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom-navigation ul li a{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-delay-03);
}
.bottom-navigation ul li a .bi{
    position: relative;
    display: block;
    line-height: 20px;
    font-size: 24px;
    text-align: center;
    transition: 0.5s;
    color: var(--grey-600-color);
    transition: var(--transition-delay-03);
}
.bottom-navigation ul li.active a .bi{
    color: var(--theme-color);
}
.bottom-navigation ul li a span:nth-child(2){
    color: var(--grey-600-color);
    font-weight: 400;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    opacity: 1;
    text-wrap: nowrap;
    transition: var(--transition-delay-03);
}
.bottom-navigation ul li a span:nth-child(3){
    position: absolute;
    background-color: var(--yellow-500-color);
    color: var(--black-color);
    top: -5px;
    left: -5px;
    padding: 0px 8px;
    border-radius: 50px;
    font-size: 12px;
}
.bottom-navigation ul li.active a span:first{
    color: var(--theme-color);
}
/* Move top */
#move-top{
    position: fixed;
    bottom: 15px;
    left: 15px;
    background-color: var(--secondary-color);
    color: var(--black-color);
    height: 40px;
    width: 40px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
    transition: var(--transition-delay-03);
}
#move-top.show{
    z-index: 2;
    opacity: 1;
    visibility: visible;
}
/* Modal */
.modal .modal-dialog{
    position: relative;
}
.modal .modal-dialog .btn-close{
    position: absolute;
    top: -15px;
    left: -15px;
    background: none;
    background-color: var(--theme-color);
    padding: 10px;
    fill: var(--white-color);
    opacity: 1;
    color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.modal .modal-dialog .btn-close::before{
    position: absolute;
    content: '\F62A';
    font-family: "bootstrap-icons";
    font-size: 36px;    
    font-weight: bold;
    pointer-events: painted;
}
/* Product Item */
.product-item{
    background-color: var(--bs-white);
    border-radius: 5px;
    height: 355px;
    padding: 10px;
    margin-bottom: 10px;
}
.product-item .image{
    padding-top: 10px;
    height: 130px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.product-item .image img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.product-item .content{
    padding: 0 5px;
}
.product-item .cart{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background-color: #FAFAFA;
    border-radius: 50px;
    padding: 5px 0;
    height: 40px;
    margin-top: 20px;
    margin-bottom: 10px;
}
.product-item .cart .plus-cart, .product-item .cart .minus-cart{
    height: 30px;
    width: 30px;
}
.product-item:not(.disabled) .cart .plus-cart, .product-item:not(.disabled) .cart .minus-cart{
    cursor: pointer;
}
.product-item .cart .plus-cart img, .product-item .cart .minus-cart img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.product-item .cart .quantity{
    font-size: 24px;
    font-weight: 100;
    color: #747474;
}
.product-item .name{
    display: block;
    color: #747474;
    font-size: 15px;
    font-weight: 300;
    text-decoration: none;
    height: 60px;
}
.product-item .extra{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 15px;
}
.product-item .extra .weight{
    display: block;
    color: #747474;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
}
.product-item .extra .text{
    display: block;
    color: #FF6363;
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
}
.product-item .price{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 5px;
}
.product-item .price .add-to-cart{
    height: 30px;
    width: 30px;
    display: flex;
    text-decoration: none;
}
.product-item:not(.disabled) .price .add-to-cart{
    cursor: pointer;
}
.product-item .price .add-to-cart img{
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}
.product-item .price .final{
    color: #0E5AA7;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
}
.product-item.disabled .price .final{
    color: #CCCCCC;
}
.product-item .price .sale{
    color: #CCCCCC;
    font-size: 14px;
    font-weight: 300;
    text-decoration: line-through;
    text-align: left;
}
/* Animation */
@-webkit-keyframes moveGradient {
    to {
        background-position: 100% 50%;
    }
}
@keyframes moveGradient {
    to {
        background-position: 100% 50%;
    }
}
@-webkit-keyframes oneMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@keyframes oneMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@-webkit-keyframes twoMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@keyframes twoMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@-webkit-keyframes threeMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@keyframes threeMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(0% 70% 70% 0 round 5%);
                clip-path: inset(0% 70% 70% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(0% 35% 70% round 5%);
                clip-path: inset(0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(35% 70% 35% 0 round 5%);
                clip-path: inset(35% 70% 35% 0 round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@-webkit-keyframes fourMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@keyframes fourMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@-webkit-keyframes fiveMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@keyframes fiveMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@-webkit-keyframes sixMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
@keyframes sixMove {
    0% {
        visibility: visible;
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    14.2857% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    28.5714% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    42.8571% {
        -webkit-clip-path: inset(70% 0 0 70% round 5%);
                clip-path: inset(70% 0 0 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    57.1428% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    71.4285% {
        -webkit-clip-path: inset(35% 0% 35% 70% round 5%);
                clip-path: inset(35% 0% 35% 70% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    85.7142% {
        -webkit-clip-path: inset(35% round 5%);
                clip-path: inset(35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
    100% {
        -webkit-clip-path: inset(70% 35% 0% 35% round 5%);
                clip-path: inset(70% 35% 0% 35% round 5%);
        -webkit-animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
                animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    }
}
/* Responsive */
@media(max-width: 991.98px){
    /* Header */
    header .mobile-menu-header{
        position: relative;
    }
    header .mobile-menu-header #toggle-mobile-menu{
        display: block;
        position: absolute;
        font-size: 40px;
        top: -5px;
        color: var(--theme-color);
    }
    header .main-header .logo{
        text-align: center;
        margin-bottom: 15px;
    }
    header .main-header .actions{
        display: none;
    }
    header .bottom-header nav{
        display: none;
    }
    body:has(.mobile-main-menu.show){
        overflow: hidden;
    }
    .mobile-main-menu{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 71px;
        display: block;
        opacity: 0;
        visibility: hidden;
        z-index: -1;
        transition: var(--transition-delay-03);
    }
    .mobile-main-menu .close{
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 20px;
        padding: 5px 5px 3px 5px;
        background-color: var(--secondary-color);
        color: var(--black-color);
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        outline: none;
        border: none;
        transition: var(--transition-delay-03);
    }
    .mobile-main-menu .close:hover{
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
    }
    .mobile-main-menu.show{
        opacity: 1;
        visibility: visible;
        z-index: 3;
    }
    nav:has(ul.pagination) ul li.page-item .page-link{
        font-size: 12px;
    }
    body footer{
        margin-bottom: 70px;
    }
    body:has(main.order) footer{
        margin-bottom: 130px;
    }
    main #product-offs-carousel .owl-stage-outer{
        padding: 15px 6px;
    }
    .bottom-navigation{
        display: flex;
        z-index: 4;
    }
    #move-top{
        bottom: 80px
    }
    body:has(main.order) #move-top{
        bottom: 140px;
    }
}
@media(max-width: 767.98px){
    main .bread-crumb .title{
        font-size: 26px;
    }
    main .bread-crumb div:last-child{
        justify-content: flex-start;
    }
    nav:has(ul.pagination) ul li.page-item .page-link{
        font-size: 11px;
    }
    .top-banner .owl-carousel .item{
        font-size: 11px;
    }
    footer .footer .link-footer-box > .title,
    footer .footer .social-footer-box > .title{
        cursor: pointer;
        padding-bottom: 10px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.5);
    }
    footer .footer .link-footer-box.show .title{
        padding-bottom: 0;
        border-bottom-width: 0;
    }
    footer .footer .social-footer-box.show > .title{
        border-bottom-width: 0;
    }
    footer .footer .link-footer-box .title span:nth-child(2),
    footer .footer .social-footer-box .title span:nth-child(2){
        height: 20px;
        width: 20px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--white-color);
    }
    footer .footer .link-footer-box .title span:nth-child(2)::before,
    footer .footer .social-footer-box .title span:nth-child(2)::before{
        position: absolute;
        content: '\F282';
        font-family: "bootstrap-icons";
        font-size: 20px;
        font-weight: bold;
        transition: transform 0.3s ease;
    }
    footer .footer .link-footer-box.show .title span:nth-child(2)::before,
    footer .footer .social-footer-box.show .title span:nth-child(2)::before{
        transform: rotate(180deg);
    }
    footer .footer .link-footer-box ul,
    footer .footer .social-footer-box .content{
        visibility: hidden;
        opacity: 0;
        height: 0;
        padding: 0;
        margin: 0;
        transition: all 0.1 ease-out;
    }
    footer .footer .link-footer-box.show ul,
    footer .footer .social-footer-box.show .content{
        visibility: visible;
        opacity: 1;
        height: auto;
        transition: all 0.3s ease-in;
    }
    footer .footer .link-footer-box.show ul{
        margin: 15px 0;
        padding: 0 10px;
    }
    footer .footer .e-namad-footer-box{
        justify-content: center;
    }
    footer .bottom-footer .social-box{
        justify-content: center;
        margin-top: 15px;
    }
}