@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root{
    --body-color:#25262b;
    --card-color:#1b1c21;
    --active-color:#f13d5d;
    --white-color:#fff;
    --light-text-color:#d6d6d6;
    --text-color:#a0a0a0;
}

html{
    overflow-y: scroll;
    overflow-x: hidden;
}
body {
    font-family: "Cairo", sans-serif;
    background-color: var(--body-color);
    color: var(--white-color);
}

.site-wrapper{
    max-width: 900px !important;
    background-color: var(--card-color);
    margin: 0 auto;
    /* overflow: hidden; */
 
}


p{
    font-size: 20px;
    margin: 0;
}

h1{
    font-size: 24px;
    margin: 0;
    font-weight: 700;
}
h2{
    font-size: 22px;
    margin: 0;
    font-weight: 700;
}

h3{
    font-size: 14px;
    margin: 0;
    font-weight: 700;
}


a{
    color: var(--dark-color);
    font-size: 16px;
    margin: 0;
    text-decoration: none;
    transition: all ease-in-out 0.5s;
}

li{
    list-style: none;
    padding: 0;
}

ul{
    padding: 0;
    margin: 0;
}
/* Placeholder Style */

::-webkit-input-placeholder {
    color: var(--text-color) !important;
    font-size: 18px;
    font-weight: 400;
    
}
:-ms-input-placeholder {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color) !important;
     
}
::-moz-placeholder {
    color: var(--text-color) !important;
    opacity: 1;
    font-size: 18px;
    font-weight: 400;
     
}
:-moz-placeholder {
    color: var(--text-color) !important;
    font-size: 18px;
    font-weight: 400;
    opacity: 1;
    
}

textarea::placeholder {
  color: var(--text-color);
  font-size: 18px;
    font-weight: 400;
}





/* Placeholder Style End */

.main_banner img{
    width: 100%;
}

.main_logo img {
    border-radius: 100%;
    height: 85px;
    width: 85px;
    object-fit: cover;
}

.hero_content {
    display: flex;
    gap: 30px;
    position: relative;
    top: -55px;
    padding: 0 10px;
}

.main_description p {
    font-size: 14px;
    margin: 5px 0 0px;
    color: var(--light-text-color);
}

/*  */

.search_bar {
    position: relative;
}

.search_bar::before{
    content: '\f002';
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 20px;
    color: var(--text-color);
    transform: translateY(-50%);
}


.search_bar input{
    width: 100%;
    height: 42px;
    border-radius: 100px;
    background-color: var(--body-color);
    border: none;
    outline: none;
    padding: 0 50px;
}
.search_bar_field {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.search_bar {
    width: 50%;
    padding: 0 5px 0;
}

.category_list_block {
    width: 50%;
    padding: 0 5px 0;
}

.category_list_item select {
    width: 100%;
    height: 42px;
    border-radius: 100px;
    background-color: var(--body-color);
    border: none;
    outline: none;
    padding: 0 50px 5px;
    color: var(--text-color);
}

.product_acc_item button.accordion-button.collapsed {
    border: 1px solid var(--light-text-color);
    background: var(--body-color);
    color: var(--light-text-color);
    /* border-radius: 15px; */
    box-shadow: unset !important;
}

.product_acc_item button.accordion-button.collapsed:after{
    color: var(--white-color) !important;
}

.product_acc_item button.accordion-button {
    border: 1px solid var(--active-color);
    background: var(--body-color);
    color: var(--active-color);
    box-shadow: none;
}

.product_acc_item .accordion-item {
    margin: 30px 0px;
    border: none;
    box-shadow: unset !important;
    background: unset !important;
}

.product_content h3, .product_content span {
    font-size: 14px;
    font-weight: 500;
    color: var(--light-text-color);
}

.product_content p {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color);
}

.product_item_ssd {
    display: flex;
    flex-wrap: wrap;
}

.product_item_list {
    width: 50%;
}

.product_content_block {
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
}


.product_acc_item .accordion-button::after {
    content: '\f077';
    background-image: none;
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    left: 15px;
    position: absolute;
}

.product_image_block {
    width: 30%;
}

.product_content {
    width: 70%;
}

.product_content_image img {
    width: 100%;
} 

/* Footer */

.footer_section {
    margin: 20px 0 0;
    border-top: 1px solid var(--text-color);
    padding: 50px 0;
}

.footer_pay_logo ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer_pay_logo a {
    max-width: 70px;
    display: inline-block;
}

.footer_pay_logo a img {
    width: 100%;
}

.footer_tel {
    text-align: center;
    padding: 10px 0 20px;
}

.footer_tel a {
    text-align: center;
    color: var(--light-text-color);
    display: inline-block;
    font-size: 14px;
    text-decoration: underline;
}

.footer_tel p {
    text-align: center;
    color: var(--light-text-color);
    display: inline-block;
    font-size: 14px;
}

.copy_write_text p {
    font-size: 14px;
    text-align: center;
    color: var(--light-text-color);
}

.footer_social_icon ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.footer_social_icon a {
    font-size: 30px;
    color: var(--white-color);
}

.footer_links ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px 0 20px;
    flex-wrap: wrap;
}

.footer_links a{
    color: var(--light-text-color);
}

@media(max-width:767px){


.product_item_list {
    width: 100%;
    padding: 15px 0;
}

.product_content_block {
    align-items: center;
}


}

@media(max-width:580px){

.search_bar, .category_list_block {
    width: 100%;
}

.search_bar_field {
    gap: 20px;
}

.hero_content {
    flex-wrap: wrap;
}

}