@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400&family=Tajawal:wght@200;300;400;500;700;800&display=swap');
:root {
    --primary:#092143;
    --secondary:#22668D;
    --white:#fff;
    --black:#333333;
    --gray:#f5f5f5;
    --header-font:'Tajawal', sans-serif;
    --en-font:'Rubik', sans-serif;
}
.active_item {
    background: var(--secondary) !important;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--white);
    transition: .4s;

}
body {
    background: #fafafa;
    font-family: var(--header-font);
}
ul {
    margin: 0;
}
input:focus ,textarea:focus{
    outline: 0;
    border: .1rem solid rgba(0, 0, 0, .2) !important;
}
img {
    object-fit: cover;
}
.active {
    color: var(--secondary);
}

.form__submit button ,.cart__bar .form__submit a ,.read_more a
{
    background: var(--black);
    padding: .4rem 1.5rem;
    color: var(--white);
    border: .1rem solid var(--black);
    text-transform: uppercase;
    transition: .4s;
}
.cart__bar .form__submit a {
    width: 100%;
}
form a {
    color: var(--black);
}

.form__submit button:hover {
    background: transparent;
    color: var(--black);
}
.form__submit a:hover {
    background: transparent;
    color: var(--black);
}

.header__sections {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3rem;
    text-transform: uppercase;
    flex-wrap: wrap;
}

.header__sections h3 {
    position: relative;
}

.header__sections h3::after {
    content: "";
    width: 25%;
    height: .1rem;
    background: #f9a81a;
    position: absolute;
    top: 50%;
    right: -30%;
}
.header__sections h3::before {
    content: "";
    width: 25%;
    height: .1rem;
    background: #f9a81a;
    position: absolute;
    top: 50%;
    left: -30%;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.overlay {
    background: rgba(0, 0, 0, .7);
    min-height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    text-align: center;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--black); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/* start product  */
.new_product_item {
    border: .1rem solid var(--gray);
}
.new_product_item:hover .new_product_item_img img:nth-of-type(2){
    opacity: 1;
}

.new_product_item:hover .new_product_icons {
bottom: .2rem;
}
.new_product_item_img {
    height: 350px;
}
.new_product_item_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


.new_product_item_img img:nth-of-type(2){
        left: 0;
    position: absolute;
    top: 0;
    /* z-index: 1; */
    opacity: 0;
    transition: .4s;
}
.new_product_icons {
    gap: 1rem;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    transition: .4s;
}

.product_icon {
    color: var(--white);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--black);
    border-radius: .3rem;
    transition: .4s;
    cursor: pointer;
}
.product_icon:hover {
    background: var(--secondary);

}
.new_product_rate {
    gap: .2rem;
}
.new_product_rate i {
    font-size: .7rem;
    cursor: pointer;

}
.new_product .discount  ,.filter_product .discount{
    position: absolute;
    top: .3rem;
    left: .3rem;
    width: 5rem;
    text-align: center;
    font-weight: lighter;
    font-size: .8rem;
}

.new_product_price {
    gap: .5rem;
}
.new_product_price span {
    font-weight: bold;
}
@media (max-width:768px) {
    .header__sections h3 {
        font-size: 1rem;
    }
}
.cart img {
    width: 2.5rem;
    margin-left: 1rem;
    object-fit: cover;
}

.cart__bar {
    background: rgba(0, 0, 0, .5);
    width: 100%;
    position: fixed;
    height: 100vh;
    top: 0;
    z-index: 9;
    left: -100%;
    direction: ltr;
    transition: .4s;
}
.cart_container {
    background: var(--white);
    width: 25%;
    height: 100vh;
    overflow-y: auto;
}
.cart__bar i {
    position: absolute;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
}
.count  button{
    border: 0.01rem solid var(--gray);
    /* flex:1; */
    text-align: center;
    cursor: pointer;
    width: 25%;
    background: transparent;
}
.count input {
    border: 0.01rem solid var(--gray);
}

.count img {
    width: 1.3rem;
    object-fit: fill;
    cursor: pointer;
    margin-right: 1rem;
}

.item {
    border-bottom: 0.01rem solid var(--gray);
    padding-bottom: 2rem;
}


@media (max-width:768px) {
    .cart_container {
        width: 100%;
    }
}