@import 'utils.css';
:root{
    --primary_color : #3A68DD;
    --background_color : #FAFAFA;
    --header_text_black_color : #171817;
    --primary_light : #C1CEEE;
    --secondary_color : rgb(255, 140, 0);
}
/* nabbar header box css  */
.nav__{width: 100%; height: 4.5rem; position: fixed; z-index: 1009;  display: flex; justify-content: start; background-color: white; box-shadow: 1px 2px 2px 1px rgb(241, 241, 241); }
.logo_img{ height: 3.5rem; object-fit: cover; mix-blend-mode: multiply;}
.footer_logo{height: 3.5rem; margin-bottom: 10px; border-radius: 3px;} 
.close_btn{background-color: var(--background_color); padding: 5px; margin: 10px; border-radius: 3px;}
.nav_item_ds{width: 80%;padding-left: 1rem;}.nav_item_ds a:hover{color: #3A68DD;}.nav_right{width: 10%;}

.nav_item_ds a:hover{color: #3A68DD;}.nav_right{width: 10%;}
.side_bar{display: none;width: 15rem;height: 100%;position: fixed; background-color: white;box-shadow: 1px 2px 2px 1px rgb(241, 241, 241);z-index: 9999;right: 0;align-items: center;}
.side_bar .flex__center{width: 100%;height: 5rem;}.sidebar_nav li{background-color: #FAFAFA;margin: 10px;padding: 10px;border-radius: 3px;}.sidebar_nav li:hover{background-color: var(--primary_color);}

/* Mega Dropdown  */
.nav_item_ds li{  display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; }
.nav_item_ds li:hover .mega_drop{ opacity: 1; visibility: visible;}
.mega_drop{

    position: absolute;
    z-index: 999;
    top: 70px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 5px rgb(212, 212, 212);
    padding: 10px ;
    opacity: 0;
    visibility: hidden;
    
}
.mega_drop ul{ display: grid; grid-template-columns: auto auto auto; gap: 10px;}
.mega_drop ul li{max-width: 100%; min-width: 8rem; margin: 0; background-color: var(--background_color);  border-radius: 3px; padding: 5px; cursor: pointer;}
/* .mega_item_link{  margin-bottom: 5px;} */
.mega_item_link:hover{background-color: var(--primary_light); color: var(--primary_color);}

/* Top slider Box Css  */
.slider_box{width: 100%;height: 416px;margin-top: 5px;}.slider_text_field{width: 50%;height: 100%;position: absolute;z-index: 19;text-align: start;padding-top: 6rem;}.slider_title{font-size: 34px;}

/* About section css  */
.about_section{width: 100%; height: auto;background-color: white;padding-top: 1rem; padding-bottom: 5rem; overflow: hidden;}.about_text_box{padding: 0rem 0rem 0rem 3rem;}.about_img{max-height: 32rem;}

/* Product show section css  */
.product_item a:hover{text-decoration: none;}

.product_section{width: 100%;height: auto;margin-top: 3rem;padding-top: 3rem;padding-bottom: 3rem;}
.product_item{ max-width: 20rem; height: 24rem;min-height: 24rem;background-color: white;padding: 5px;border-radius: 3px;margin: 5px; transition: all 0.2s; border: 1px solid var(--background_color);box-shadow: 0px 2px 2px 0px rgb(227, 227, 227)}
.image_box{ height: 15rem;max-height: 18rem;border-radius: 5px;overflow: hidden;}
.product_img{width: 100%; height: 100%; min-height: 15rem; border-radius: 5px;}
.product_img:hover{ transition: all 0.3s ease-out; transform: scale(1.1);}
.text_box_{text-align: start; padding: 8px; margin-top: 10px;}.title_{font-weight: 600; font-size: large; color: var(--header_text_black_color);}
/* Brands show section  */
.brand_section{width: 100%;height: auto;background-color: #ffffff;padding-top: 3rem;padding-bottom: 3rem;margin-top: 5rem;}.brand_item{width: 100%;height: 8rem;background-color: white;padding: 15px;box-shadow: 0px 2px 2px 0px rgb(227, 227, 227);border: 1px solid rgb(227, 227, 227);}.brand_img_box{width: 100%;height: 100%;}.brand_img{width: 100%; height: 100%; object-fit: cover;}

/* Contact us  */
.contact_us{width: 100%; height: auto; background-color: rgb(255, 255, 255); margin-top: 3rem; margin-top: 8rem; padding-top: 3rem;  padding-bottom: 3rem;}
.contact_image_box{width: 100%; height: 100%; }
.img_h25{max-height: 32rem; -moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}

/* blogs Section  */
.blog_section{background-color: white;}.date_text{font-size: small; font-weight: 300; color: var(--primary_color);}

/* Footer  */
.foote_section{width: 100%; height: auto; background-color: var(--header_text_black_color); padding-top: 2rem; padding-bottom: 2rem; color: white;}
.quick_link{text-align: left; padding-left: 3rem;}.quick_link li{margin-top: 5px;}.fotter_copyright{font-weight: 300; font-size: small;}

/* Product details  */
.p_detail_sce .flex__sp_bt{align-items: flex-start;}
.product_d_img{max-width: 25rem; height: 100%; max-height: 20rem; margin-bottom: 1.5rem;}

.qty_box_w{width: 7rem; padding: 10px;}
.buy_now{background-color: var(--primary_color); transition: none;}
.buy_now:hover{background-color: var(--secondary_color);transform:  none;}

.thum_img{width: auto; max-width: 6rem; max-height: 5rem; margin-top: 1rem;  background-color: aliceblue;
    padding: 5px;
    border-radius: 5px;
    margin: 3px;
}
.discription li{
    list-style: circle;
    color: black;
}
.col50_h li a:hover{color: var(--primary_color);}
@media screen and (max-width: 900px) {
    .nav_item_ds{width: 80%; padding-left: 0px;}
    .quick_link{padding-left: 0px;}
    /* .brand_section{padding-bottom: 1rem;} */
    .p_detail_sce .detail_text{padding-top: 2rem;}
     .product_d_img{width: 100%; max-width: 100%; height: 100%; max-height: none;}
}
@media screen and (max-width: 660px) {
    .nav_item_ds{width: 60%;}.logo_box{width: 30%;}.nav_item_ds li{display: none;}
    .slider_box{height: 200px;}.slider_text_field{width: 70%;padding-top: 18px;}.slider_text_field p{font-size: smaller;}.slider_title{font-size: medium;}
    .about_section{padding-top: 2rem; padding-bottom: 2rem;}.about_text_box{padding: 0px;}
     .product_item{ max-width: 100%;}
    .image_box{ max-width: 100%;}
   
}
@media screen and (max-width: 500px) {
   .brand_section{margin-top: 2rem;}
   .contact_us{margin-top: 2rem;}

    .product_d_img{width: 100%; max-width: 100%; height: 100%; max-height: none;}
}