/* ==================================================== */
@import url("amazon_stylesheet.css");
@import url("all_media_stylesheet.css");
/* ==================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Outfit:wght@100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@media(max-width:992px){
  .wrapper{
   width:100%;
 } 
 }

 @media (min-width:1281px) { 
  .prodcut-grid .sort-wrapper{
    width: 250px;
  }
}

/* Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px){ 
}
/* ============================================ */




/* Mobile */
@media only screen and (max-width: 768px) {
  .hidemobile {
    display: none;
  }
  .container-fluid {
    max-width: 100%;
    padding: 10px !important;
    margin-top: 0px !important;
}
.productimage img {
  width: 100%;
  height: 150px !important;
  object-fit: contain;
}
.footer-section p {
  display: flow-root;
}

.mobilemenusection {
  background-color: #ffffff;
  /* border: 1px solid #50b8e7; */
  padding: 12px 10px;
  margin: 5px;
}

.mobilemenusection a{
  color: #3eb9e3;
}

.border-bottom{  
  padding-bottom:10px;
}

.productysummery{
  text-align: left;
}

.cart-image{
  max-width: 300px !important;
}

}

/* ============================================ */

 /* Prevent horizontal scrolling */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Box-sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
 body{
  background-color: #F8F8F8 !important;  
  font-family: "Roboto", serif;
 }
 
 .panel-heading {
    padding: 0;
      border:0;
  }
  .panel-title>a, .panel-title>a:active{
      display:block;
      padding:15px;
    color:#555;
    font-size:16px;
    font-weight:bold;
      text-transform:uppercase;
      letter-spacing:1px;
    word-spacing:3px;
      text-decoration:none;
  }
  .panel-heading  a:before {
     font-family: 'Glyphicons Halflings';
     content: "\e114";
     float: right;
     transition: all 0.5s;
  }
  .panel-heading.active a:before {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      transform: rotate(180deg);
  } 



.filter-container {
    background-color: #ffffff;
    border: 1px solid #50b8e7;
    padding: 12px 10px;
    border-radius: 8px;
    margin-bottom: 15px;    
  }

 

  .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}


.main-product {
  width: 100%;
  background-color: #ffffff;
  padding: 15px;
  padding-bottom: 20px;
  margin: 20px auto;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.041), 0 6px 20px rgba(0, 0, 0, 0.1);
}

.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: white !important;  
  box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button, collapsed{ 
  padding: 0 !important;
}

/* =================================================== */

.productimagesbox{
width: 100%;
}

.productimagesbox img{
  width: 100%;    
  height: 435px; 
  object-fit: fill; 
}

  .product-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    background-color: #ffffff;   
  }


  
.product-box:hover {
  transform: scale(1.03);
  transition: transform .5s;
  animation: zoomInOut 1s infinite;
  margin: 0 auto;
}



.productimage {
  width: 100%;
  height: auto; 
  overflow: hidden;
}

.productimage img{
  width: 100%;
  height: 250px; 
  object-fit: contain; 
}

.variant{
color:#8f8f8f;
font-size: 13px;
}

.search-container .form-select{
  max-width: 100px;  
}

.search-container input{
  max-width: 100%;  
}

.search-container .input-group .form-select,input#search_box,.btn{    
  border: solid 1px #3eb9e3;
}


.prodcutname {
  display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
  overflow: hidden;
  text-overflow: ellipsis; 
  word-wrap: break-word;
  white-space: normal;
  color: black;
  font-size: 14px;
  line-height: 1.4;
}

.prodcutname, a{
  text-decoration: none !important;  
}

.offerprice{
  color: green;
  font-size: 17px;
}

.mrpprice{
  color: red;
}
.discountpoint{
  color: #50b8e7;
}
/* =================================================== */

.lightblue{ color: #50b8e7;}


p {
  margin-top: 0;
  margin-bottom: 5px !important;
}

.sort-bar {
  border: 1px solid #50b7e73f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  height: 60px;
}

.thumbnail-container {
display: flex;
overflow-x: auto; /* Enables horizontal scrolling */
gap: 10px; /* Space between thumbnails */
padding: 10px;
}


.thumbnail {
flex-shrink: 0; /* Prevents thumbnails from shrinking */
width: 80px; /* Set a fixed width for thumbnails */
height: 80px; /* Set a fixed height for thumbnails */
cursor: pointer;
}


.container-fluid-header{
  max-width: 100%;  
  padding-left: 10px;
  padding-right: 10px;
  background-color: #ffffff;
}

#containerinner{
  max-width: 90%;  
  padding-left: 25px;
  padding-right: 25px;
  background-color:#ffffff;
}


.container-fluid{
  max-width: 100%;  
  padding: 30px;
}

.containerfooter{
max-width: 90%;
}



.bydiscount { height: 250px; overflow: auto; }
.bybrands{ height: 250px; overflow: auto;  }


::-webkit-scrollbar {
  width: 9px;
  background: #d1d1d1;
}
 
::-webkit-scrollbar-thumb {
  background: #888; 
}





.left-side .active {
  color: #007bff;
}


.left-side a {
  color: #3eb9e3;
  text-decoration: underline;
}

.theme-color{
  color: #3eb9e3;
}

.font10{font-size: 10px !important;}
.font11{font-size: 11px !important;}
.font12{font-size: 12px !important;}
.font13{font-size: 13px !important;}
.font14{font-size: 14px !important;}
.font15{font-size: 15px !important;}
.font16{font-size: 16px !important;}
.font17{font-size: 17px !important;}
.font18{font-size: 18px !important;}
.font19{font-size: 19px !important;}
.font20{font-size: 20px !important;}
.font21{font-size: 21px !important;}
.font22{font-size: 22px !important;}
.font23{font-size: 23px !important;}
.font24{font-size: 24px !important;}
.font25{font-size: 25px !important;}


.outline-button {
  padding: 7px;
  font-size: 13px;
  border: none;
  border-radius: 5px;
  border: solid 1px #50b8e7;  
  color: #50b8e7;
  cursor: pointer;
  transition: background-color 0.5s;
}

.outline-button:hover {
  background-color: #139edf;  
  border: solid 1px #139edf;  
}

.main-chekout input[type="text"], .main-chekout input[type="email"], .main-chekout input[type="tel"], .main-chekout input[type="number"], select, textarea {
  padding: 12px;
}



 
/* .loginbg{
  background-image: url(https://img.freepik.com/premium-vector/colorful-line-shopping-doodle_150234-75724.jpg);
  background-repeat: repeat;  
  opacity: 0.1;
} */

.theme-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #50b8e7;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.navbottom .dropdown-content a{      
  line-height: 12px;    
}


.theme-bg{
  background-color: #50b8e7 !important;
  border: none !important;
}

.theme-button{
  background-color: #50b8e7;
  padding: 8px;

  font-size: 11px;
  text-transform: uppercase;
}
.theme-button:hover{
  background-color: #139edf;  
}

.theme-button-outline {
  background-color: #50b8e700;
  padding: 8px;
  font-size: 11px;
  text-transform: uppercase;
  color: #50b8e7;
  border: solid 1px;  
  border-radius: 5px;
}
.theme-button-outline:hover {
  background-color: #50b8e7;
  padding: 8px;
  font-size: 11px;
  text-transform: uppercase;
  color: #ffffff;
  border: solid 1px;  
  border-radius: 5px;
  transition: background-color 0.5s;
}



.scrollborder{  
  border: solid 1px #50b8e7;  
}


.footer-section, h3 {
  color: white;
}

.footer-section p {
  color: white !important;
}


.footertags{
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: 20px;
  padding-top: 20px;
}

.footertags p{
  color: rgb(4, 68, 97);
}

.footertags a{
  color: white;
}

.footertags a:hover{
  color: rgb(4, 76, 117);
}




.mobile-menu.open {
  overflow-y: scroll;
  height: 100%;
}

.imgblacktoclr {
  filter: grayscale(100%) !important;
    transition: filter 0.3s ease !important;
}


.imgblacktoclr:hover {
  filter: grayscale(0%) !important;  
}




 /* autocomplete-css style  */

 /* ================================================= */

input[type=text] {  
  width: 100%;
}
.autocomplete-items {
  position: absolute;
  background-color: white;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;  
  height: 400px;
  overflow-x: scroll;
  overflow-x: hidden;
}

.autocomplete-items div {
  padding: 8px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  line-height: 20px;
  font-size: 15px;  
}
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;   
  color: #ffffff; 
}
/* autocomplete-css style  */
 /* ================================================= */



 /* Initially hide the content */
.hidden-content {
  display: none;
  margin-top: 0px;
  padding: 0px;
  border: 0px solid #ccc;
  border-radius: 0px;
  background-color: #f9f9f9;
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* Show the content when it becomes the target */
.hidden-content:target {
  display: block;
  opacity: 1;
}

/* Style for the clickable link */
.open-link {
  display: inline-block;
  padding: 10px 0px;  
  color: #fff;
  text-decoration: none;
  border-radius: 0px;
  transition: background-color 0.3s ease;
}


.sizeChart{
  width: 100%;
  height: 400px;  
  overflow-y: auto;
  overflow-x: auto;
}
 
 



/* Loader Container */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* Background color of the loader */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999; /* Ensures loader is on top of all elements */
}

/* Spinner Animation */
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #eaeaea; /* Outer border color */
  border-top: 5px solid #50b8e7; /* Spinner color */
  border-radius: 50%;
  animation: spin 1s linear infinite; /* Animation duration and type */
}

/* Loading Text */
#loader p {
  margin-top: 15px;
  font-size: 1.2rem;
  color: #333;
  font-family: Arial, sans-serif;
}
#loader img {
  width: 150px;

}

 



/* Spinner Animation Keyframes */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.color-pricing-grid {
 display: flex;
}

.color-pricing-grid a{
  text-decoration: none;
  color: black;
}

.color-pricing-grid a:hover{
  color: #50b8e7;
}

.small-grid a:hover p{
  color: #50b8e7;
}

.disabled{
pointer-events: fill;
cursor: not-allowed !important;
opacity: 0.4;
}

.navbottom li {
  padding-left: 10px;
  padding-right: 10px;  
}

.navbottom li:hover{
  background-color: #50b8e7;
  padding-left: 10px;
  padding-right: 10px; 
}


.navbottom a:hover{
  color: #ffffff;
}

.navbottom .menu-column a:hover{
  color: #50b8e7;
}

.navbottom ul li {
  position: static;
  margin: 0 0px !important;
}

.dashboard-item {
  width: 100%;
  height: 200px;
  border-radius: 25px;
}

.productnametd{
  width: 300px;
}

.h5, h5 {
  font-size: 1.10rem !important;
}

.ph.ph-caret-up:before {
  content: "\e13c";
  color: black;
}

.ph.ph-caret-up:hover {
  content: "\e13c";
  color: red !important;
}
 
/* .productimage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.productimage img {
  width: 100%;
  height: 250px;
  object-fit: contain;
} */


.offer-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: red;
  color: white;
  padding: 5px;
  font-size: 14px;
}

.grid-item p:hover{
  color: #50b8e7;
}

.error {
  color: red;
}

.filter-tag .ph.ph-x:before{
  color: #ff7c01;
}


.policybox {
  border-radius: 5px;
  padding: 8px;  
  transition: transform 0.5s ease-in-out;
}

.policybox:hover {
  transform: scale(1.1);
  transition: transform .5s;
  animation: zoomInOut 1s infinite;  
  
}

.policybox img{  
  height: 45px;
}

.policybox p{
  font-size: 15px;  
}


.bg-clrlight{
  background-color: #f8fdff;
}


      @media (max-width: 575.98px) {
        .bannerimg {
          flex-direction: row !important;
        }
        .bannerimg img {
          width: 49% !important;
          margin-top: 0 !important;
        }
      }
      @media (min-width: 576px) {
        .bannerimg {
          flex-direction: column !important;
        }
        .bannerimg img {
          width: 100% !important;
          margin-top: 0.25rem;
        }
        .bannerimg img:first-child {
          margin-top: 0 !important;
        }
      }