:root{
    --primary-color : #afdbbe;
    --secondary-color : #939598;
    --third-color : #ffd600;
    --fourth-color : #a9c4d4;
    --dark-color : #313233;
    --light-color : #FBFBFB;
    --white-smoke: #F5F5F5;
    --white : #fff;
    --black : #000;
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    direction: rtl;
    font-family: "W_Roya", "B_roya";
}

@font-face{
    font-family: W_Roya;
    src: url('fonts/W_roya_mypsdshop.ir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: W_Roya_bold;
    src: url('fonts/W_roya\ Bold_mypsdshop.ir.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'B_roya';
    src: url('fonts/BRoya.woff2') format('woff2'),
         url('fonts/BRoya.woff') format('woff'),
         url('fonts/BRoya.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'B_roya_bold';
    src: url('fonts/BRoyaBold.woff2') format('woff2'),
         url('fonts/BRoyaBold.woff') format('woff'),
         url('fonts/BRoyaBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

.ltr{
    direction: ltr;
}

.desktop{
    display: none;
}

.body-container{
    min-height: 100vh;
    padding-bottom: 50px;
}

.type-one{
    background-color: var(--white-smoke);
}

.light-background{
    background-color: var(--light-color) !important;
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a:hover{
    color: unset;
}

a:visited{
    color: inherit;
}

.top-section{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 30px;
    border-bottom: 1px solid var(--secondary-color);
    max-height: 100px;
    align-items: center;
    background-color: var(--white);
}

.top-logo-container{
    display: flex;
    align-items: center;
    max-height: 90px;
}

.top-logo-container img{
    max-width: 100%;
    max-height: 80px;
}

.tag-liner{
    font-size: 20px;
    font-weight: 550;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
}

.navbar{
    height: 70px;
    width: 100%;
    padding: 10px 20px;
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 30px;
    row-gap: 20px;
    background-color: var(--white);
    border-radius: 0 0 10px 10px;
    box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.nav-items{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    align-items: center;
}

.nav-item{
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--primary-color);
    border-radius: 12px;
}

.nav-item a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-item img {
    max-width: 80%;
    height: auto;
}


#menu{
    background-color: var(--primary-color);
}

.account-action{
    height: 44px;
    background-color: #afdbbe;
    border-radius: 12px;
    align-self: center;
    color: var(--white);
    display: flex;
    align-items: center;
    padding-right: 5px;
    justify-content: space-evenly;
    max-width: 100px;
    justify-self: end;
    width: 90px;
}

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

.account-action-icon img{
    height: 36px;
}

/* بعدا در دیوایس های مختلف چک شود که آیا از نظر ارتفاعی در وسط هست یا خیر*/
.account-action a{
    position: relative;
    top: -2px;
    font-size: 18px;
}

.login-image{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.login-image img{
    max-width: 50%;
}

.register-image img{
    max-width: 60%;
}

.congrat-image img{
    max-width: 70%;
}

.main-container{
    width: 90%;
    border: 1px solid var(--secondary-color);
    margin: 50px auto 0;
    background-color: var(--white);
    border-radius: 16px;

}

.main-heading{
    margin: 20px auto 30px auto;
    font-size: 22px;
    width: 84%;
}

.center{
    text-align: center;
}

.form-one{
    margin-bottom: 50px;
}

.input-one-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-one{
    height: 48px;
    width: 84%;
    border: 1px solid var(--secondary-color);
    border-radius: 16px;
    padding-right: 16px;
    margin-top: 20px;
}

input::placeholder {
    color: var(--secondary-color);
    opacity: 1;
}
  
input::-ms-input-placeholder { 
    color: var(--secondary-color);
}

.input-one:focus{
    outline: 2px solid var(--primary-color);
    border: 1px solid var(--primary-color);
}

.form-links-one{
    font-size: 12px;
    display: flex;
    width: 84%;
    justify-content: space-between;
    padding: 0 10px;
    margin: 0 auto;
    color: var(--secondary-color);
    margin-top: 10px;
}

.form-links-one a{
    color: var(--primary-color);
    font-weight: 600;
}

.submit-one{
    background-color: var(--primary-color);
    border: none;
    color: var(--white);
    margin-top: 40px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    height: 44px;
    padding: 0;
}

.form-links-center{
    justify-content: center;
    gap: 10px;
}

.mt-0{
    margin-top: 0 !important;
}

.mt-10{
    margin-top: 10px !important;
}

.mt-20{
    margin-top: 20px !important; 
}

.mt-30{
    margin-top: 30px !important;
}

.mt-50{
    margin-top: 50px !important;
}

.mb-50{
    margin-bottom: 50px !important;
}

.mb-30{
    margin-bottom: 30px !important;
}

.form-one-text{
    text-align: center;
    width: 84%;
    margin-bottom: 20px;
}

.auth-code-container{
    display: grid;
    grid-template-columns: repeat(5, 40px);
    justify-content: center;
    gap: 5px;
    direction: ltr;
}

.auth-code{
    height: 44px ;
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
    direction: ltr;
    padding: 0px 14px;
    font-size: 18px;
}

.auth-code:focus{
    outline: 2px solid var(--primary-color);
    border: 1px solid var(--primary-color);
}

.welcome-text{
    width: 84%;
    margin: 10px auto;
    font-weight: 700;
}

.input-two-container{
    display: grid;
    width: 84%;
    margin: 30px auto;
    gap: 10px;
}

.input-two{
    height: 48px;
    border: 1px solid var(--secondary-color);
    border-radius: 16px;
    padding-right: 16px;
}

.input-two:focus{
    outline: 2px solid var(--primary-color);
    border: 1px solid var(--primary-color);
}

.input-two-container label{
    font-weight: 600;
    padding-right: 10px;
}

.input-small::placeholder {
    font-size: 11px;
}
  
.input-small::-ms-input-placeholder { 
    font-size: 11px;
}

.div-button{
    width: 84%;
    margin: 30px auto 50px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 16px;
    color: var(--white);
    background-color: var(--primary-color);
    font-size: 16px;
    font-weight: 700;
}

.form-text-two{
    width: 84%;
    margin: 10px auto;
}

.top-heading{
    width: 90%;
    font-size: 22px;
    margin: 40px auto;
}

.account-item-container{
    width: 92%;
    height: 80px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 20px;
    align-items: center;
    background-color: var(--white);
    border: 0.5px solid var(--secondary-color);
    border-radius: 12px;
    margin: 0 auto 20px;
}

.account-item-image-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.account-item-image{
    width: 44px;
    height: 44px;
}

.account-item-title{
    font-size: 18px;
    font-weight: bold;
}

.current-pass{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 30px auto;
    padding: 0 10px;
}

.ticket-text-input{
    width: 100%;
    border: 1px solid var(--secondary-color);
    border-radius: 16px;
    height: 250px;
    resize: none;
    padding: 20px;
}

.ticket-text-input:focus{
    outline: 2px solid var(--primary-color);
}

.ticket-header, .order-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-weight: bold;
}

.ticket-subject{
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.ticket-text{
    padding: 20px;
    text-wrap: wrap;
}

.ticket-response-text{
    text-wrap: wrap;
    padding: 20px;
}

.no-response{
    font-weight: bold;
    padding: 20px;
}


.order-items-header, .order-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.order-items-header{
    font-weight: bold;
    margin: 20px 0;
}

.order-items{
    padding-bottom: 30px;
}

.order-reciever{
    padding: 20px;
}

.order-reciever-one{
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.order-reciever-one :first-child{
    font-weight: bold;
}

.order-reciever-two :first-child{
    font-weight: bold;
    margin-bottom: 10px;
}

.order-reciever-two :nth-child(2){
    padding-right: 10px;
    font-size: 14px;
}

.order-status{
    padding: 30px 20px;
}

.order-status-item{
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    margin-bottom: 10px;
}

.primary-color{
    color: var(--primary-color);
}

.red{
    color: red;
}

.login-error-message{
    width: 84%;
    margin: 20px auto;
    color: red;
    text-align: center;
}

.div-button-secondary{
    color: var(--primary-color);
    background-color: var(--white);
    border: 2px solid var(--primary-color);
    margin-bottom: 20px;
}

.list{
    max-width: 84%;
    margin: 0 auto;
    padding-right: 20px;
}

.confirm-container{
    width: 84%;
    margin: 20px auto;
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 10px;
}

.confirm-button{
    width: 20px;
    height: 20px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    cursor: pointer;
}

.disabled{
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.50;
    filter: alpha(opacity=50%);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.mobile-banners-container{
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.mobile-banner{
    width: 94%;
    height: fit-content !important;
    /* چک کردن مجدد ابعاد */
    margin: 10px auto;
    position: relative;
    border-radius: 10px;
}

.mobile-banner-description{
    position: absolute;
    bottom: 16px;
    z-index: 2;
    width: 92%;
    margin: 0 auto;
}

.mobile-banner-title{
    font-size: 18px;
    margin-bottom: 5px;
}

.banner-button{
    color: var(--white);
    width: 70px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    border-radius: 5px;
    cursor: pointer;
}

.cta-section{
    display: grid;
    grid-template-columns: 7fr 2fr;
}

.secondary-text{
    color: var(--secondary-color);
}

.categories{
    width: 92%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0px auto 70px;
    gap: 20px;
}

.category{
    background-color: var(--white);
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 10px;
    height: 60px;
    align-items: center;
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
}

.category-image-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-image-container a{
    display: flex;
    justify-content: center;
    align-items: center;
}

.category-image{
    max-height: 44px;
}

.hero-section {
    height: 380px;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding-left: 30px;
    overflow-x: scroll;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.07) 0px 4px 6px -2px;
}

.hero-section::-webkit-scrollbar {
    display: none;
}

.hero-image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 180px;
}

.hero-image{
    width: 120px;
}

.hero-section-title{
    font-size: 20px;
    margin: 15px 0 5px;
    font-weight: bold;
    color: var(--white);
}

.hero-link{
    font-size: 14px;
}

.product-card-one{
    background-color: var(--white);
    height: 340px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    position: relative;
    min-width: 200px;
}

.product-one-image-container{
    height: 180px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-one-image{
    object-fit: cover;
    max-height: 180px;
    max-width: 200px;
    border-radius: 20px 20px 0 0;
}

.product-one-title{
    padding: 10px;
    font-size: 16px;
}

.product-one-price-before{
    padding-right: 10px;
    font-size: 14px;
    color: var(--secondary-color);
    text-decoration: line-through;
}

.product-one-price{
    padding-right: 10px;
    font-weight: bold;
    margin-top: 5px;
}

.add-cart{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    border-radius: 12px;
    cursor: pointer;
}

.add-cart img{
    width: 32px;
}

.add-favorit img {
    width: 36px;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 8px;
    cursor: pointer;
}

.price-section{
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: flex-start;
    position: absolute;
    width: 100%;
    bottom: 15px;
}

.new{
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    border-radius: 0 20px;
    font-size: 12px;
    color: var(--white);
    font-weight: bold;
}

.card-toman{
    margin-right: 5px;
}

.advantages-section{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    gap: 30px;
    align-items: center;
    justify-content: space-evenly;
    margin: 70px 0;
    padding: 0 20px;
}

.advantage-item{
    height: 110px;
    background-color: var(--white);
    border: 1px solid var(--secondary-color);
    border-radius: 16px;
}

.advantage-image-container{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    margin-top: 2px;
}

.advantage-image-container img{
    max-width: 100%;
    max-height: 100%;
    transform: translateX(2px);
}

.advantage-text{
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
}

.dark-background{
    background-color: var(--dark-color);
}

.white-color{
    color: var(--white);
}

.hero-button{
    color: var(--white);
    margin: 15px;
    width: 80px;
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 8px;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
}

.users-benefits-section{
    margin: 70px 0;
}

.user-benefit-item{
    padding: 0 20px;
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 20px;
    margin: 20px 0;
}

.user-benefit-image{
    height: 50px;
    width: 50px;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
}

.user-benefit-image img{
    height: 40px;
    width: 40px;
}

.user-benefit-text{
    height: 50px;
    background-color: var(--white);
    line-height: 50px;
    font-weight: bold;
    padding-right: 30px;
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
    font-size: 15px;
}

.home-posts-container{
    height: 240px;
    width: 100%;
    background-color: var(--white);
    padding: 15px;
    display: flex;
    flex-direction: row;
    gap: 30px;
    overflow-x: scroll;
    position: relative;
    padding-top: 25px;
}

.home-posts-container::-webkit-scrollbar {
    display: none;
}

.post-card{
    min-width: 90vw;
    height: 190px;
    border: 1px solid var(--secondary-color);
    margin: 0px auto;
    border-radius: 12px;
    position: relative;
    display: grid;
    grid-template-columns: 3fr 5fr;
    gap: 20px;
    background-color: var(--white);
}

.post-card-button{
    font-size: 14px;
    height: 36px;
    line-height: 36px;
    width: 80px;
    text-align: center;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 10px;
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.post-card-image img{
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    margin: 10px;
}

.post-card-title {
    margin: 10px;
    font-size: 15px;
    line-height: 26px;
    cursor: pointer;
}

.post-card-date{
    font-size: 14px;
    color: var(--secondary-color);
    position: absolute;
    bottom: 18px;
    margin-right: 10px;
}

.post-card-description{
    font-size: 12px;
    margin: 10px;
    color: var(--secondary-color);
}

.show-more-posts{
    height: 40px;
    background-color: var(--white);
    position: relative;
    margin-bottom: 100px;
}

.show-more-posts a{
    position: absolute;
    left: 20px;
    bottom: 15px;
    font-weight: bold;
    color: var(--primary-color);
}

.mb-20{
    margin-bottom: 20px;
}

.home-products-container{
    width: 100%;
    padding: 30px 10px;
    background-color: var(--white);
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.no-background{
    background-color: var(--white-smoke);
}


.product-card-two{
    width: 100%;
    height: 160px;
    background-color: var(--white);
    border: 1px solid var(--secondary-color);
    border-radius: 12px;
    position: relative;
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.no-border{
    border: none;
}

.add-cart-two{
    position: absolute;
    bottom: 10px;
    left: 10px;
}

.product-card-two-image{
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-card-two-image img{
    max-height: 145px;
    max-width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.product-card-two-title{
    max-width: calc(100% - 46px);
    font-size: 15px;
    margin: 12px 0;
    line-height: 26px;
}

.product-card-two-price{
    font-weight: bold;
    position: absolute;
    bottom: 12px;
}

.price-before{
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: 44px;
    align-items: center;
}

.price-before-text{
    font-size: 14px;
    color: var(--secondary-color);
    text-decoration: line-through;
}

.disscount{
    height: 20px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
}

footer{
    width: 100%;
    position: absolute;
    /* bottom: 0; */
    background-color: var(--primary-color);
    text-align: center;
    border-radius: 20px 20px 0 0;
    color: var(--white);
    padding-bottom: 50px;
}

.footer-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto 0;
}

.footer-logo img{
    max-width: 90px;
}

.footer-tag-line{
    font-weight: bold;
    margin: 10px 0 30px;
}

.footer-description{
    max-width: 90%;
    margin: 0 auto;
}

.footer-break-line{
    height: 1px;
    width: 90%;
    margin: 30px auto;
    background-color: var(--secondary-color);
}

.footer-certificates{
    display: flex;
    gap: 50px;
    padding: 10px 30px;
    align-items: center;
    justify-content: space-evenly;
}

.footer-certificate img{
    width: 100px;
}

.footer-info-section{
    width: 90%;
    margin: 0px auto;
    font-size: 14px;
}

.footer-info-item{
    display: grid;
    grid-template-columns: 1fr 2fr;
    text-align: right;
    gap: 20px;
    /*border-bottom: 1px solid var(--secondary-color);*/
}

.footer-info-title{
    display: flex;
    gap: 10px;
}

.footer-info-title-text{
    margin-top: 2px;
    line-height: 20px;
}

.footer-infos{
    margin-bottom: 20px;
}

.footer-nav-title, .footer-social-title{
    font-size: 18px;
    font-weight: bold;
}

.footer-social-items{
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.footer-nav-items{
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 40px auto;
    text-align: right;
    padding: 0 20px;
    gap: 20px;
}

.footer-nav-item{
    display: flex;
    gap: 10px;
}

.footer-nav-item p{
    transform: translateY(-3px);
}

.form-filter{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 15px;
    padding-top: 0;
    margin-bottom: 10px;
}

.select-filter{
    height: 40px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
    border-radius: 8px;
    padding: 3px;
    background-color: var(--white);
    cursor: pointer;
}

.select-filter:focus{
    outline: 2px solid var(--primary-color);
}

select option:checked{
    background-color: var(--primary-color);
    color: var(--white);
}

.pagination-section{
    display: flex;
    gap: 10px;
    margin: 20px auto 50px;
    font-weight: bold;
    color: var(--secondary-color);
    justify-content: center;
    align-items: center;
}

.pagination-item{
    background-color: var(--white);
    padding: 3px 10px;
    text-align: center;
    min-width: 25px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vertical-line{
    width: 2px;
    height: 25px;
    background-color: var(--secondary-color);
}

.large-paginate{
    min-width: 64px;
}

.active-paginate{
    background-color: var(--primary-color);
    color: var(--white);
}

.all-posts-container{
    width: 100%;
    padding: 30px 10px;
    background-color: var(--white-smoke);
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 10px;
}

.contact-us-tel-sec{
    width: 90%;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 50px auto;
    gap: 30px;
}

.contact-us-tel{
    flex: 50%;
    padding: 20px 0;
    background-color: var(--white);
    border-radius: 16px;
    border: 1px solid var(--secondary-color);
    color: var(--secondary-color);
}

.tel-title{
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--black);
}

.contact-us-address-container{
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 20px;
    margin: 0 auto 30px;
    background-color: var(--white);
    height: 180px;
    padding: 10px;
    border: 1px solid var(--secondary-color);
    border-radius: 16px;
}

.address-title{
    font-weight: bold;
    margin: 10px 5px;
}

.address-text{
    margin: 0px 5px;
    font-size: 14px;
    color: var(--secondary-color);
}

.map-container{
    display: flex;
    align-items: center;
}

.map{
    border: 0;
    max-width: 100%;
    height: 150px;
    border-radius: 12px;
}

.contact-us-info{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 90%;
    margin: 50px auto 50px;
    text-align: center;
    color: var(--secondary-color);
}

.contact-us-info-sec{
    padding: 10px;
    background-color: var(--white);
    border-radius: 12px;
    border: 1px solid var(--secondary-color);
}

.info-title{
    color: var(--black);
    font-weight: bold;
    margin-bottom: 10px;
}

.contact-us-email, .contact-us-post{
    background-color: var(--white);
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 15px;
}

.contact-us-post{
    margin-bottom: 0;
}

.post-info{
    display: grid;
    grid-template-columns: 3fr 1fr;
    width: 90%;
    margin: 0px auto;
    color: var(--secondary-color);
    font-weight: bold;
    margin-bottom: 10px;
}

.post-info-time-sec{
    display: flex;
    gap: 10px;
}

.post-time{
    display: flex;
    gap: 10px;
    align-items: center;
}

.post-time-icon{
    display: flex;
}

.post-main-image{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin: 30px auto;
    border-radius: 12px;
}

.post-main-image img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.post-content{
    width: 90%;
    margin: 30px auto;
    color: var(--secondary-color);
    font-weight: 600;
}

.post-sub-heading{
    color: var(--black);
    font-size: 20px;
    margin: 10px 0 20px;
}

.post-list-unordered, post-list-ordered{
    padding-right: 30px;
}

.other-posts{
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 50px auto 20px;
}

.other-posts-link{
    font-size: 18px;
    color: var(--primary-color);
    font-weight: bold;
}

.hidden{
    display: none !important;
}

.cart-heading{
    display: flex;
    width: 90%;
    margin: 0 auto;
    align-items: center;
}

.remove-cart{
    display: flex;
    align-items: center;
    width: 40%;
    gap: 10px;
    height: 40px;
    background-color: var(--secondary-color);
    color: var(--white);
    padding: 0 5px;
    font-weight: bold;
    border-radius: 8px;
    font-size: 14px;
}

.remove-cart img{
    height: 30px;
    border-radius: 8px;
}

.cart-remove-item{
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    left: 8px;
    cursor: pointer;
}

.cart-remove-item img{
    height: 36px;
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
}

.relative{
    position: relative;
}

.cart-price-before{
    display: flex;
    gap: 10px;
    position: absolute;
    left: 10px;
    bottom: 56px;
    align-items: center;
}

.cart-price-section{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-left: 10px;
    position: absolute;
    bottom: 20px;
    width: 100%;
    gap: 10px;
    font-weight: bold;
}

.cart-form{
    display: flex;
    flex-direction: row-reverse;
    gap: 5px;
    align-items: center;
}

.cart-input{
    border: 1px solid var(--secondary-color);
    width: 26px;
    height: 26px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.cart-counter{
    height: 24px;
    width: 22px;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--white);
    border-radius: 5px;
    cursor: pointer;
}

.cart-break{
    height: 2px;
    width: calc(100% - 20px);
    margin: 30px auto;
    background-color: var(--secondary-color);
}

.payroll-title{
    padding: 20px;
    font-size: 20px;
}

.coupon-title{
    margin: 20px;
    margin-bottom: 10px;
}

.coupon-container p{
    margin: 0px 20px 10px;
}

.coupon-form{
    margin: 30px 20px;
    display: flex;
    gap: 30px;
}

.coupon-input{
    flex: 1;
    padding: 0px 10px;
    color: var(--secondary-color);
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--secondary-color);
}

.coupon-input:focus{
    outline: 2px solid var(--primary-color);
}

.coupon-submit{
    background-color: var(--primary-color);
    color: var(--white);
    width: 72px;
    height: 36px;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.payroll-break{
    height: 3px;
    background-color: var(--light-color);
}

.cart-items{
    font-weight: bold;
    padding-top: 30px;
}

.cart-item{
    margin-bottom: 20px;
    font-size: 14px;
}

.pb-40{
    padding-bottom: 40px;
}

.pb-100{
    padding-bottom: 100px;
}

.fixed-bottom-one{
    position: fixed;
    bottom: 0;
    height: 104px;
    width: 100%;
    background-color: var(--white);
    display: grid;
    grid-template-columns: 1fr 1fr;
    box-shadow: rgba(0, 0, 0, 0.2) 0px -8px 12px -8px, rgba(0, 0, 0, 0.07) 0px -2px 3px -1px;
}

.favourites-price-sec{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
}

.favourites-count{
    color: var(--secondary-color);
    font-size: 12px;
}

.favourites-price{
    font-size: 18px;
    font-weight: bold;
}

.favourites-toman{
    margin-right: 10px;
}

.favourites-button-sec{
    display: flex;
    align-items: center;
    justify-content: center;
}

.favourites-button{
    height: 50px;
    padding: 0px 20px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 12px;
    color: var(--white);
    font-weight: bold;
    cursor: pointer;
}

.checkout-break{
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 5px;
}

.checkout-break-item{
    background-color: var(--white-smoke);
    border-radius: 3px;
    height: 3px;
}

.checkout-item{
    padding: 20px;
    font-weight: bold;
}

.checkout-header{
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.change-recipent{
    padding: 20px;
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: 20px;
}

.change-recipent> p{
    font-size: 14px;
    color: var(--secondary-color);
}

.change-recipent> div{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 44px;
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
}

.main-checkout{
    padding-bottom: 10px;
    padding-top: 40px;
    font-weight: bold;
}

.last-hole{
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: var(--white-smoke);
    position: absolute;
    left: 4px;
    transform: translateY(-11.5px);
}

.first-hole{
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background-color: var(--white-smoke);
    position: absolute;
    right: 4px;
    transform: translateY(-11.5px);
}

.checkout-break-start{
    margin-right: 20px;
}

.empty-result{
    height: 400px;
    padding: 0 20px;
    font-weight: bold;
}

.mb-0{
    margin-bottom: 0;
}

.search-results{
    margin-bottom: 50px;
}

.question-container{
    width: 92%;
    min-height: 56px;
    background-color: var(--white);
    margin: 0 auto 20px;
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid var(--secondary-color);
}

.question{
    display: grid;
    grid-template-columns: 9fr 1fr;
    gap: 20px;
}

.bold{
    font-weight: bold;
}

.extend{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.answer-seprator{
    margin: 20px auto;
    height: 1px;
    background-color: var(--secondary-color);
}

.answer{
    margin-bottom: 10px;
    color: var(--dark-color);
}

.not-found-image{
    margin: 50px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.not-found-image img{
    max-width: 90%;
}

.not-found-title{
    font-size: 24px;
    text-align: center;
    margin: 20px;
}

.not-found-text{
    text-align: center;
    margin: 0px 20px;
}

.not-found-button{
    width: 50%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto 100px;
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: bold;
    border-radius: 12px;
}

.order-seprator{
    height: 1px;
    background-color: var(--secondary-color);
    margin: 15px 0;
}

.mobile-hide{
    display: none;
}

.ltr-input{
    direction: ltr;
    padding-left: 16px;
}

.bread-crumbs{
    color: var(--secondary-color);
    margin: 30px 10px;
}

.product-images-container{
    display: flex;
    flex-direction: column;
}

.product-main-image{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

.product-main-image img{
    max-width: 84%;
    border-radius: 10px;
    height: 380px;
}

.product-other-images{
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px auto;
}

.product-other-image{
    width: 70px;
    height: 70px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-other-image img{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.product-main{
    width: 100%;
    background-color: var(--white);
    padding: 20px;
    border-radius: 20px 20px 0 0;
    margin-top: 20px;
}

.product-title-container{
    display: grid;
    grid-template-columns: 1fr 50px;
    gap: 20px;
    margin: 10px 0 20px;
}

.product-title-container h1{
    font-size: 22px;
}

.product-add-favourite{
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.product-add-favourite img{
    width: 50px;
    height: 50px;
}

.product-stats{
    display: none;
}

.product-seprator{
    height: 1px;
    background-color: var(--secondary-color);
    margin-bottom: 20px;
}

.product-description{
    margin-bottom: 20px;
}

.choose-spec{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    height: 40px;
    margin-bottom: 15px;
}

.choose-spec p{
    font-size: 16px;
    font-weight: bold;
}

.choose-spec select{
    background-color: var(--white);
    height: 36px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    width: 100px;
    justify-self: left;
}

.product-more{
    background-color: var(--white);
    padding-bottom: 20px;
    padding-top: 30px;
    border-top: 1px solid var(--secondary-color);
    border-radius: 0 0 20px 20px;
}

.product-more-titles{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.product-more-title{
    cursor: pointer;
}

.more-selected{
    height: 3px;
    background-color: var(--primary-color);
    width: 80%;
    margin: 10px auto;
    border-radius: 10px;
}

.product-features{
    padding: 20px;
}

.product-feature{
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}

.product-feature-title{
    font-size: 18px;
    font-weight: bold;
}

.full-description{
    padding: 20px;
}

.comments{
    padding: 20px;
}

.comment{
    padding: 20px 10px;
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    margin-bottom: 20px;
}

.comment-header{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.user-name-comment{
    font-weight: bold;
}

.similar-products-container{
    margin-top: 50px;
    background-color: var(--white);
    padding: 20px 10px;
    margin-bottom: 100px;
}

.similar-products-container h3{
    margin-bottom: 30px;
}

.similar-products{
    display: flex;
    gap: 30px;
    overflow-x: scroll;
    height: 180px;
}

.similar-products::-webkit-scrollbar{
    display: none;
}

.similar-product{
    min-width: 90vw;
}

.fixed-bottom-two{
    position: fixed;
    bottom: 0;
    background-color: var(--white);
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.2) 0px -8px 12px -8px, rgba(0, 0, 0, 0.07) 0px -2px 3px -1px;
}

.fixed-specs{
    display: grid;
    grid-template-columns: 5fr 2fr;
    margin: 15px 10px;
    align-items: center;
}

.fixed-specs:first-child{
    font-weight: bold;
}

.fixed-price-before{
    text-decoration: line-through;
    color: var(--secondary-color);
    font-size: 14px;
}

.fixed-cta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 15px;
    margin-bottom: 10px;
}

.fixed-price{
    font-size: 20px;
    font-weight: bold;
}

.fixed-cta-btn{
    width: 90%;
    height: 44px;
    text-align: center;
    line-height: 44px;
    background-color: var(--primary-color);
    color: var(--white);
    font-weight: bold;
    border-radius: 12px;
    cursor: pointer;
    justify-self: left;
}

.fixed-seprator{
    height: 1px;
    background-color: var(--secondary-color);
}

.full-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.add-comment{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.comment-input{
    width: 100%;
    margin: 5px 0 15px;
    height: 40px;
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
    padding: 0 5px;
}

.comment-input:focus{
    outline: none;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    padding: 0 5px;
}


.comment-submit{
    width: 80px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    align-self: flex-end;
    color: var(--white);
    border: none;
    background-color: var(--primary-color);
    border-radius: 7px;
}

.comment-login{
    color: var(--primary-color) !important;
    cursor: pointer;
}

.store-filter-submit{
    cursor: pointer;
    border-radius: 8px;
    border: none;
    color: var(--white);
    background-color: var(--primary-color);
    font-size: medium;
    font-weight: bold;
}

.remove-cart-link{
    display: flex;
}



.drop-down-menu{
    background-color: var(--primary-color);
    grid-column: 1 / -1;
    margin: -10px -20px;
    padding: 10px 20px;
    padding-bottom: 30px;
    border-radius: 0 0 15px 15px;
    color: var(--white);
    font-size: 18px;
    font-weight: bold;
    display: none;
}


.show-dropdown{
    display: block;
}

.no-nav{
    display: none;
}

#menu, #drop-down{
    background-color: var(--primary-color);
}


.primary-background{
    background-color: var(--primary-color);
}


.back-to-cart-btn{
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    background-color: var(--primary-color);
    color: var(--white) !important;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
}

.check-code-input{
    width: 80%;
    margin-left: 10px;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    height: 36px;
    padding-right: 5px;
}

.check-code-input:focus{
    border: 2px solid var(--primary-color);
    outline: none;
}

.check-code-btn{
    cursor: pointer;
    width: 60px;
    background-color: var(--primary-color);
    border: none;
    height: 36px;
    border-radius: 6px;
    color: var(--white);
    font-weight: bold;
}


.back-end-message-container{
    position: fixed;
    top: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    height: 40px;
    line-height: 40px;
    z-index: 1000;
}

.back-end-message{
    width: 90%;
    background-color: var(--primary-color);
    opacity: .7;
    border-radius: 8px;
}

.back-end-message p{
    opacity: 1;
    font-weight: bold;
}

@keyframes message {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    25%{
        visibility: visible;
        opacity: 100;
    }
    75%{
        visibility: visible;
        opacity: 100;
    }
    100%{
        visibility: hidden;
        opacity: 0;
    }
}


.message-hidden{
    display: none !important;
}


.cart-submit-link{
    line-height: 44px;
    text-align: center;
    color: var(--white) !important;
}


.active-image{
    outline: 4px solid var(--primary-color);
    border-radius: 8px;
}

.mobile-banner-image{
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.size-guid-image-container{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.size-guid-image{
    max-width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.size-guid-image img{
    max-width: 100%;
    border-radius: 10px;
}

.full-description h4{
    margin: 40px 0;
}

.add-cart a{
    display: flex;
    justify-content: center;
    align-items: center;
}


.top-logo-container a{
    display: flex;
    justify-content: center;
    align-items: center; 
}


.product-one-image-container a, .product-card-two-image a, .post-card-image a{
    display: flex;
    justify-content: center;
    align-items: center;
}



/* کدهای مربوط به دیزاین صفحه در دستگاه‌های بزرگتر */



@media screen and (min-width:770px) {
    .mobile{
        display: none !important;
    }

    .mobile-hide{
        display: initial;
    }

    .desktop-nav{
        display: unset;
    }

    .desktop-nav{
        display: grid;
        grid-template-columns: 120px 1fr 120px;
        gap: 50px;
        height: 70px;
        background-color: var(--white);
        border-radius: 0 0 20px 20px;
        padding: 0px 30px;
        position: sticky;
        top: 0px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.07) 0px 4px 6px -2px;
        max-width: 2000px;
        margin: 0 auto;
        z-index: 100;
    }


    .back-end-message{
        width: 50%;
    }

    .nav-logo{
        height: 100%;
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-logo a{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-logo img{
        max-height: 60px;
    }

    .nav-links{
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        font-size: 16px;
        gap: 10px;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        color: var(--secondary-color);

    }

    .nav-login-button{
        display: flex;
        height: 44px;
        font-size: 18px;
        gap: 10px;
        align-items: center;
        color: var(--white);
        background-color: var(--primary-color);
        font-weight: bold;
        justify-content: center;
        align-self: center;
        border-radius: 10px;
        width: 110px;
    }

    .nav-login-icon{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .nav-login-icon img{
        height: 36px;
    }

    .nav-link:hover{
        color: var(--primary-color);
    }

    .main-container, .main-heading, .top-heading{
        max-width: 1920px;
    }

    .top-heading{
        margin: 80px auto;
        font-size: 24px;
    }

    .not-found-image{
        margin: 0;
    }

    .not-found-image img{
        max-width: 460px;
    }

    .not-found-title{
        margin-top: 0;
    }

    .not-found-button{
        max-width: 360px;
    }

    .footer-description{
        max-width: 680px;
    }

    .footer-desktop-certificates{
        display: flex;
        gap: 30px;
        justify-content: center;
        margin: 30px;
    }

    .footer-nav-items{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 50px auto;
        max-width: 720px;
        transform: translateX(-8%);
    }

    .footer-info-desktop{
        display: grid;
        grid-template-columns: 6fr 3fr;
        margin: 30px auto;
        max-width: 768px;
        gap: 159px;
        margin-bottom: 30px;
    }

    .footer-address-item{
        text-align: right;
        display: grid;
        grid-template-columns: 2fr 3fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .address-container img{
        height: 200px;
    }

    .desktop-address-text{
        max-width: 240px;
        margin: 20px 0;
    }

    .footer-info-title-text{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .footer-contact-desktop-section{
        margin-top: 20px;
    }

    .footer-info-item{
        display: grid;
        grid-template-columns: 1fr;
        text-align: right;
        gap: 0px;
        margin-bottom: 30px;
    }

    .footer-info-title{
        display: flex;
        gap: 30px;
    }

    .footer-info-title-text{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .footer-infos{
        margin-right: 54px;
    }

    .two-side-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 100px;
        padding: 20px 50px;
        max-width: 2000px;
        margin: 0 auto;
    }

    .right-side{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-image img{
        max-width: 300px;
        max-height: 740px;
        position: fixed;
    }

    .left-side{
        max-height: 100%;
        overflow-y: scroll;
    }

    .left-side::-webkit-scrollbar{
        display: none;
    }

    .small-main{
        max-width: 380px;
    }

    .input-one{
        margin-top: 40px;
    }

    .image-up{
        transform: translateY(-50px);
    }

    .two-column-form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-top: 50px;
    }

    .wider-width{
        width: 92%;
    }

    .account-items{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 96%;
        margin: 0 auto;
    }

    .left-justified{
        justify-content: left;
        padding-left: 8%;
    }

    .smaller-width{
        max-width: 68%;
    }

    .smaller-width-smaller{
        max-width: 720px;
    }

    .smaller-btn{
        width: 36%;
    }

    .second-row{
        grid-column: 2;
        margin-top: 30px;
    }

    .order-container{
        min-width: 768px;
        max-width: 940px;
    }

    .order-status{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 50px;
    }

    .order-status-item{
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .desktop-order{
        display: grid;
        grid-template-columns: 1fr 1px 1fr;
    }

    .order-seprator{
        height: 100%;
        width: 1px;
        background-color: var(--secondary-color);
        margin: 0;
    }

    .all-posts-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        max-width: 940px;
        margin: 10px auto;
    }

    .post-card{
        min-width: unset;
    }

    .all-posts-heading{
        max-width: 940px;
    }

    .questions-section{
        max-width: 940px;
        margin: 0 auto;
    }

    .question-container{
        width: 100%;
    }

    .desktop-post{
        max-width: 940px;
        margin: 0 auto;
    }

    .post-main-image{
        width: 100%;
        margin: 60px auto;
    }

    .post-main-image img{
        width: 90%;
    }

    .post-info > p{
        text-align: left;
    }

    .other-posts{
        width: 100%;
        padding: 0 15px;
        margin: 80px auto 40px;
    }

    .post-hero{
        max-width: 540px;
        margin: 50px auto;
        justify-content: center;
        gap: 80px;
        padding-left: 0px;
        border-radius: 20px;
        padding-right: 40px;
    }

    .cart-heading{
        max-height: 150px;
        max-width: 940px;
        justify-content: space-between;
    }

    .remove-cart{
        max-width: 110px;
    }

    .desktop-cart{
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 940px;
        margin: 0 auto;
        gap: 30px;
    }

    .desktop-payroll{
        margin: 30px 10px;
        width: 100%;
        height: max-content;
    }

    .change-recipent-width{
        max-width: 640px;
    }

    .fixed-bottom-one{
        text-align: left;
        justify-content: end;
        grid-template-columns: 3fr 1fr;
        max-width: 2000px;
    }

    .favourites-button{
        padding: 0px 35px;
    }

    .desktop-favourites{
        display: grid;
        grid-template-columns: 20px 2fr 1fr;
        gap: 10px;
        padding: 20px 20px;
        align-items: center;
    }

    .desktop-favourites-check{
        border: 1px solid var(--secondary-color);
        height: 20px;
        border-radius: 4px;
        cursor: pointer;
    }

    .desktop-favourites p{
        font-weight: normal;
    }

    .favourite-price{
        text-align: left;
    }

    .primary-background{
        background-color: var(--primary-color);
    }

    .checkout-break{
        position: relative;
    }

    .first-hole{
        right: -13px;
    }

    .last-hole{
        left: -13px;
    }

    .checkout-payroll{
        height: fit-content;
    }

    .checkout-no-mt{
        margin-top: 0;
    }

    .checkout-break-start{
        margin-right: 25px;
    }

    .two-to-one{
        background-color: var(--white);
        height: 340px;
        border-radius: 20px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        position: relative;
        min-width: 200px;
        display: flex;
        flex-direction: column;
        width: min-content;
        gap: 0;
        justify-self: center;
    }

    .two-to-one .product-card-two-image{
        height: 180px;
        width: 225px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .two-to-one .product-card-two-image img{
        object-fit: cover;
        max-height: 170px;
        max-width: 220px;
        border-radius: 20px 20px 0 0;
    }

    .two-to-one .product-card-two-title{
        padding: 0 15px;
        max-width: 100%;
        font-size: 16px;
    }

    .two-to-one .product-card-two-price{
        padding-right: 15px;
        font-size: 18px;
    }

    .two-to-one .price-before{
        bottom: 56px;
        right: 15px;
    }

    .store-container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 80px;
        margin: 0 auto;
        justify-content: space-around;
        max-width: 1024px;
    }

    .filter{
        max-width: 1024px;
        margin: 0 auto;
    }

    .form-filter{
        gap: 50px;
    }

    .store-heading{
        max-width: 1024px;
    }

    .pagination-section{
        margin: 50px auto 80px;
    }

    .search-box{
        height: max-content;
    }

    .answer-break{
        transform: translateY(-50px);
    }

    .full-posts{
        grid-template-columns: 1fr;
    }

    .lower-margin{
        margin: 30px auto;
    }

    .contact-us-container{
        transform: translateY(-70px);
        gap: 30px;
    }

    .mobile-banners-container{
        display: grid;
        grid-template-columns: 2fr 1fr;
        width: 94%;
        max-width: 1940px;
        margin: 0 auto;
        column-gap: 0;
    }

    .banner-one{
        height: 480px;
    }

    .banner-two{
        height: 235px;
    }

    .banner-three{
        height: 235px;
    }

    .categories{
        max-width: 1120px;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 100px;
        row-gap: 40px;
    }
   
    .category{
        height: 74px;
    }

    .category-image-container img{
        max-height: 54px;
    }

    .hero-section{
        width: 94%;
        max-width: 1120px;
        margin: 0 auto;
        border-radius: 30px;
    }
    
    /*.hero-section::-webkit-scrollbar{
        display: initial;
        width: 5px;
        height: 5px;
    }

    .hero-section::-webkit-scrollbar-track{
        background-color: var(--dark-color);
        border-radius: 30px;
        height: 5px;
        width: 5px;
    }

    .hero-section::-webkit-scrollbar-thumb{
        background-color: var(--primary-color);
        border-radius: 30px;
    }*/

    .advantages-section{
        grid-template-columns: repeat(6, 1fr);
        max-width: 1024px;
        margin: 80px auto;
        gap: 50px;
    }

    .advantage-item{
        height: 140px;
    }

    .advantage-image-container img{
        margin-top: 10px;
    }

    .advantage-text{
        width: 80%;
        margin: 20px auto;
    }

    .users-benefits-section{
        display: grid;
        grid-template-columns: 1fr 1fr;
        max-width: 1024px;
        margin: 80px auto;
        column-gap: 30px;
    }

    .user-benefit-item{
        grid-template-columns: 60px 1fr;
    }

    .user-benefit-image{
        height: 60px;
        width: 60px;
    }

    .user-benefit-text{
        height: 60px;
        line-height: 60px;
    }

    .home-posts-container{
        width: 94%;
        max-width: 940px;
        margin: 0 auto;
        border-radius: 20px 20px 0 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: auto;
        gap: 50px;
        background-color: var(--white-smoke);
    }

    .show-more-posts{
        display: none;
    }

    .home-products-container{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        row-gap: 80px;
        margin: 0 auto;
        margin-bottom: 100px;
        justify-content: space-around;
        max-width: 1024px;
        background-color: var(--white-smoke);
    }

    .cart-product-container{
        grid-template-columns: 1fr;
        row-gap: 30px;
        height: fit-content;
    }

    .desktop-product{
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 90%;
        margin: 0 auto 50px;
        max-width: 1120px;
    }


    .product-stat{
        display: flex;
        gap: 10px;
        font-size: 14px;
    }

    .product-stat-img img{
        width: 30px;
    }

    .product-stats{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .self-left{
        justify-self: left;
    }

    .self-center{
        justify-self: center;
    }

    .product-main{
        margin-top: 0;
        border-radius: 20px;
    }

    .product-description{
        margin-bottom: 30px;
    }

    .product-more{
        width: 90%;
        margin: 0 auto;
        max-width: 1120px;
        border: none;
        border-radius: 20px;
    }

    .similar-products-container{
        width: 90%;
        max-width: 1120px;
        margin: 50px auto;
        border-radius: 20px;
    }

    .similar-products{
        height: 400px;
        justify-content: center;
    }

    .similar-product .product-card-two-image{
        width: 200px;
    }

    .similar-product .product-card-two-image a>img{
        max-width: 200px;
    }

    .desktop-product-cta{
        display: block;
        margin-top: 30px;
    }

    .price-before-container{
        display: flex;
        align-items: center;
        gap: 30px;
    }

    .product-disscount{
        width: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        background-color: var(--primary-color);
        border-radius: 5px;
    }

    .product-price-before{
        color: var(--secondary-color);
        text-decoration: line-through;
    }

    .cta-btn{
        width: 84%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary-color);
        color: var(--white);
        font-weight: bold;
        border-radius: 10px;
        justify-self: left;
        margin: 0 auto;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .desktop-product-price{
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    .desktop-product-price:first-child{
        font-size: 16px;
        font-weight: bold;
    }

    .product-price-container{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        font-size: 16px;
        font-weight: bold;
    }

    .similar-products-container h3 {
        margin-bottom: 20px;
        padding: 20px;
    }
    
    .bread-crumbs{
        max-width: 1120px;
        margin: 50px auto;
    }

    .full-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .no-background{
        background-color: var(--white-smoke);
    }

    .mb-30{
        margin-bottom: inherit !important;
    }

}



@media screen and (max-width:770px) {
    .desktop{
        display: none;
    }
}

.pagination-section{
    display: flex;
    gap: 10px;
    margin: 20px auto 50px;
    font-weight: bold;
    color: var(--secondary-color);
    justify-content: center;
    align-items: center;
}

.pagination-item{
    background-color: var(--white);
    padding: 3px 10px;
    text-align: center;
    min-width: 25px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.large-paginate{
    min-width: 64px;
}

.active-paginate{
    background-color: var(--primary-color);
    color: var(--white);
}

.pagination-section{
    margin: 50px auto 80px;
}