/* pages-list */





/* Hero section */

.hero-section{
    width: 100%;
    max-width: 1300px;
    margin: 0px auto;
    height: 550px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
}

.categoriesherolest{
    height: 100%;
    width: 306px;
    max-width: 306px;
    border: 1px solid rgba(0, 0, 0, 0.089);
    border-top:none;
    border-radius: 0px 0px 8px 8px ;
    background-color: #eef1f62a;
    padding: 5px 0px;
}   

.td-none {
    text-decoration: none;
}

.categories-item {
    width: 282px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    cursor: pointer;
    padding: 8px 8px;
    margin: 6px ;
}

.categorie{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 10px;
}

.categories-icon{
    line-height: 1;
}
.categories-name{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #333D4C;
}


.categories-opne-icon {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black;
    width: 16px;
    height: 16px;
    font-size: 13px;
}

.hero-image{
    display: flex;
    width: 100%;
    height: 540px;
    position: relative;
    overflow:hidden;
}

.hero-container{
    margin-top: auto;

    width: 100%;
    height: 540px;
    position: relative;
}

.hero-image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    margin: auto auto 0px auto;
    position: absolute;
    top:0;
    right: 0;
}

.hero-image .hero-section-content {
    position: absolute;
    top:0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    right: 0;
    border-radius: 8px;
    background:linear-gradient(#00000000,#00000055,#00000088);
    padding: 0px 100px;
    width: 100%;
    height: 100%;
    color: rgb(255, 255, 255);
}

.hero-slide {
    min-width: 100%;
    position: relative;
}



.hero-image .hero-section-content p {
    font-size: 16px;
    font-weight: 400;
}


.hero-image .hero-section-content h1 ,.new-arrival .new-arrival-content h1 {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 16px;
}
.hero-image .hero-section-content a i , .new-arrivals-section .new-arrival .new-arrival-content a i{
    margin-left: 10px;
}

.hero-image .hero-section-content a {
    margin-bottom: 70px;
}
.hero-image .hero-section-content a , .new-arrivals-section .new-arrival .new-arrival-content a {
    font-size: 16px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 12;
    width: fit-content;
    margin-top: 70px;
    text-decoration: none;
    padding: 10px 38px;
    color: var(--primary-color);
    background-color: #F9DECD;
    border: none;
    transition: all .2s ease;
    border-radius: 12px;
}

.hero-image .hero-section-content a:hover , .new-arrivals-section .new-arrival .new-arrival-content button:hover {
    color: #F9DECD;
    background-color: var(--primary-color);
}


.new-arrival {
    position: relative;
}
.new-arrivals-section .new-arrival .new-arrival-content button {
    margin-top: 30px;
}
.new-arrivals-section .new-arrival .new-arrival-content h1 {
    color: white;
}


.active {
    color: rgb(255, 63, 63);
}


.new-arrival .new-arrival-content {
    top:0;
    border-radius: 16px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    z-index: 1;
    right: 0;
    background:linear-gradient(#00000000,#00000000,#00000088);
    padding: 60px 0px;
    width: 100%;
    height: 100%;
}
.progress-line-container-root {
    position: absolute;
    top: 450px;
    width: 100%;
    z-index: 123;
    width: 100%;
    display: flex;
    justify-content: center;
}
.hero-container  .progress-line-container {
    width: 85%;
    background-color: #727272;
    height: 2px;
    border-radius: 50px;
    display: flex;
    justify-content: start;
}

.hero-container  .progress-line-container .progress-line {
    width: 33.33%;
    background-color: #ffffff;
    z-index: 123;
    height: 2px;
    border-radius: 50px;
    transition: transform 0.6s linear;
}


/* about-section */

.about-section{
    max-width: 1300px;
    margin: 40px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px; 
    padding: 30px 0px;
    gap: 20px;
}

.about-cart{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    gap: 20px;
    width: 306px;
}

.about-img{
    line-height: 1;
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-detaile{
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    line-height: 1.5;
    width: 100%;
}
.about-detaile h1{
    font-size: 16px;
    color: #181D25;
}

.about-detaile p {
    font-size: 14px;
    color: #4E5562;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* New-arrivals-title */

.New-arrivals-title{
    max-width: 1300px;
    margin: 0px auto 30px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28px;
}

/* new-arrivals */


.new-arrivals-section{
    max-width: 1300px;
    margin: 0px auto;
    height: 535px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.new-arrival{
    width: 32%;
    height: 100%;
}
.categories-scroll-arrows-buttons {
    display: none;
}
.new-arrival img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.new-arrivals-items {
    width: 68%;
    height: 100%;
    padding: 20px 20px 20px 0px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
}

.new-arrivals-items > * {
    width: 100%;  
    box-sizing: border-box; 
}

.item-detailes{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    width: 100%;
}

.item-price {
    display: flex;
    flex-direction:row;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.item-discount-amount{
    margin-left: 10px;
    background-color: rgb(228, 255, 228);
    color: rgb(68, 144, 68);
    border-radius: 50px;
    line-height: 1;
    padding: 2px 5px;
    font-size: 14px;
    font-weight: 400;
}
.item-old-price {
    color: #6C727F;
    font-size: 14px;
    text-decoration: line-through;
    margin-right: 10px;
}

.new-items{
    display: flex;
    align-items: center;
    justify-content: start;
    max-height: 110px;
    background-color: white;
    border-radius: 8px;
    cursor: pointer;
}

.new-items:hover{
      transition: all 0.2 ease;
    background-color: #F9DECD;
}

.item-image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    min-width: 86px;
    max-width: 86px;
    height: 110px;
    margin-left: 10px;
    border-radius: 12px;
}

.item-image img{
    width: 100%;
    height:100%;
    object-fit: cover;
}
/* item-name */

.item-name{
    font-size: 14px;
}



.Trending-products-view-all {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.trending-products-title-section{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: space-between;
    margin: 70px auto 32px auto;
    max-width: 1300px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E0E5EB;
}

.trending-products-title{
    font-size: 28px;
}



.trending-products-section {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin: 60px auto;
    max-width: 1300px;
    gap: 10px;
}

.trending-products-section > * {
    width: 100%;  
    box-sizing: border-box; 
}

.checkout-card-button {
    margin-top: 5px;
    background-color: var(--primary-color);

    width: 100%;
    color: white;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    padding: 12px;
}

.product-name{
    flex: 1;
}


.checkout-card-button:hover {
    background-color: hsl(156, 95%, 32%);
    color: white;
    transition: all 0.3s ease;
}



.product{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    background-color: white;
    padding:  20px;
    border-radius: 8px;
    position: relative;
    gap: 4px;
}

.batch {
    position: absolute;
}

.batch.batch-danger {
    background-color: rgb(255, 232, 234);
    color: rgb(255, 0, 0);
}

.products-image{
    width: 100%;
    max-height: 288px;
    min-height: 288px;
}

.products-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* product-range */

.product-range{
    display: flex;
    align-items: center;
    justify-content: start;
    padding: 0px 10px ;
    color: #FC9231;
    gap: 5px;
}

.product-name{
    font-size: 16px;
    line-height: 1.5;
}

.price-contener{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    margin-top: 8px;
    margin-bottom: 8px;
}
.price-contener .price .item-old-price {
    color: rgb(255, 81, 81);
    width: 100%;
    margin-right: 0px;
}

.price-contener .price{
    font-size: 20px;
    line-height: 1;
    display: flex;
    padding: 0px;
    flex-direction: column;
    justify-content: end;
    direction: ltr;
    text-align: end;
    align-items: end;
}
.price-contener .cart-btn i {
    margin-top: 8px;
    color: var(--primary-color);
}
.price-contener .cart-btn i.active {
    color: rgb(255, 255, 255);
}
.price-contener .cart-btn{
    line-height: 1;
    background-color: #EEF1F6;
    padding: 12px;
    border-radius: 10px;
}

.price-contener .cart-btn.active {
    background-color: rgb(255, 72, 72);
}

.payment-and-deivary-way{
    display: flex;
    margin: 0px;
    padding: 0px;
    gap: 8px;
}


.payment-and-deivary-way .payment-way , .delivery-way{
    display: flex;
    font-size: 10px;
    padding: 2px 8px;
    position: relative;
    gap: 4px;

}


.payment-and-deivary-way .payment-way {
    background-color: rgb(255, 248, 210);
    border-radius: 4px;
    color: rgb(97, 82, 0);
}

.payment-and-deivary-way .delivery-way {
    background-color: rgb(223, 255, 231);
    border-radius: 4px;
    color: rgb(39, 111, 57);
}


.Special-offers-for-you-title-sction{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 52px auto 32px auto;
    padding-bottom: 20px;
    max-width: 1300px;
    border-bottom: 1px solid #E0E5EB;
}


.Special-offers-for-you-section{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    margin: 32px auto;
    gap: 10px;
    max-width: 1300px;
}

.product-for-you{
    display: flex;
    justify-content: space-between;
    max-height: 448px;
    flex-direction: column;
    padding: 8px;
    transition: all 0.2s linear;
    border-radius: 8px;
    cursor: pointer;
    border: 0.5px solid rgb(230, 230, 230);
}
.product-for-you:hover {
    background-color: white;

}

.qountity-section{
    width: 95%;
    height: 4px;
    margin: 8px auto;
    background-color: #EEF1F6;
    display: flex;
    align-items: center;
    justify-content: end;
}
.qountity-line{
    height: 100%;
    background-color: #F55266;
}

.product-available{
    width: 93%;
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 5px auto;
    color: #6C727F;
}
.availablespan{
    color: #181D25;
    font-size: 14px;
    font-weight: 500;
}

/* subscription-section */

.subscription-section{
    width:100%;
    height: 506px;
    padding-top: 30px;
}

.subscription-contente{
    max-width: 1300px;
    height: 70%;
    margin:0px auto;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    margin-top: 30px;
}

.subscription-forms{
    /* background-color: #F55266; */
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    width: 50%;
    gap: 16px;
    height: 100%;
}
.subscription-forms h3{
    font-size: 24px;
    color: #181D25;
    line-height: 1;
    margin-bottom: 11px;
}
.subscription-forms p{
    font-size: 16px;
    color: #4E5562;
    margin-bottom: 16px;

    
}

.subscription-forms .subscription-title{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
}

.subscription-input{
    display: flex;
    align-items: end;
    justify-content: end;
    gap: 8px;
}

.subscription-input input{
    padding: 11px ;
    width: 392px;
    height: 50px;
    border-radius: 8px;
    color: #9CA3AF;
    font-size: 16px;
    border: 1px solid #9CA3AF;
}

.subscription-input button{
    background-color: #F55266;
    color: #FFFFFF;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    width: 126px;
    cursor: pointer;
}

.about-foolwer{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

.about-foolwer i{
    width: 40px;
    height: 40px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background-color: #EEF1F6;
    color: #333D4C;
}

/* subscription-images */

.subscription-images{
    display: flex;
    align-items: start;
    justify-content: start;
    flex-direction: column;
    width: 50%;
    gap: 16px;
    padding: 10px;
    margin-right: 40px;
}
.subscription-itme{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
}

.subscription-img{
    max-width: 140px;
    height: 86px;
}
.subscription-img img{
    width: 100%;
    height: 100%;
}

.subscription-detailes h6{
    color: #6C727F;
    font-size: 12px;
}
.subscription-detailes p{
    color: #333D4C;
    font-size: 14px;
    line-height: 20px;
    max-width: 260px;
}

.subscription-View-all div{
    color: #333D4C;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
}
.subscription-View-all i{
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 2px;
}

#website-gome-root-container {
    direction: rtl;
}

@media (max-width:1300px) {
    #website-gome-root-container {
        padding-left: 20px;
        padding-right: 20px;
        
    }

   
}