body{
  box-sizing: border-box;
  font-family: 'Montserrat', 'Cairo';
}


.color_orange{ 
  color: #F49B57 !important;
}
.color_gray{ 
  color: #8D8D8D !important;
}



p {
  margin: 0;
}
.product-details-section{
    margin-top: 70px;
}

.price-text {
  font-size: 36px;
  font-weight: 700;
  color: #F49B57 !important;
}

.small-detail-text {
  font-size: 14px;
  color: #8D8D8D;
}

.product-details {

    display: flex;
    flex-direction: column;

    align-items: end;
}

.product-navigate {
width: 100%;
}

.product-navigate button{
background-color: transparent;
border: none;
color: #2DB2D4;
}

.product-navigate img {
  margin-bottom: 9px;
  max-width: 60px;
  cursor: pointer;
  opacity: 0.6;
}


.product-navigate .active-image {
  border: 2px solid blue;
  opacity: 1;
}




.product-navigate img:hover {
  opacity: 1;
}


.preview img {
    width: 90%;
    height: 90%;
    object-fit: cover;

}



.social-media-icons {
  margin-top: 32px;
  display: flex;
   align-items: center;
  /*justify-content: center; */
  gap: 14px;
}

.social-media-icons  i {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  border-radius: 7px;
  background-color: #E1F3E1;
  cursor: pointer;
}

.product-title {
  /* font-weight: bold; */
  font-family: 'Montserrat';
  /* margin-bottom: 10px; */
}

.stars {
  margin-right: 5px;
  display: flex;
  flex-wrap: nowrap;
}

.stars i {
  font-size: 10px;
   background-image: linear-gradient(to right, #E65C00, #F9D423);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}



.color-options input{
  border: none;
height: 30px;
width: 30px;
margin-bottom: 15px;

margin-left: 5px;
}

.size-box{
  width: 120px;
  height: 40px;
  border: 1px solid #F2F4F5;
  border-radius: 12px;
  padding: auto;
   text-align: center;
   line-height: 40px;
   margin-left: 8px;

}

.user-icon {
  width: 30px;  /* Adjust width for desired size */
  height: 30px;  /* Adjust height for desired size */
  border-radius: 50%;
}

.fa-icon {
  /* Optional styles for the Font Awesome icon fallback */
  font-size: 20px;   /* Adjust font-size for desired icon size */
  color: #ccc;     /* Set a placeholder color for the icon */
}


.size-box.active{
  background-color: #292D32;
  color: #fff;
}

.personalization-container {
  position: relative; /* Needed for proper positioning of textarea */
}

.personalization-textarea {
  margin-bottom: 15px;
  font-size: 14px;
  padding: 12px;
  width: 350px; /* Make slightly wider */
  height: 70px; /* Initial height for hidden state */
  border: none; /* Remove border for seamless look */
  border-radius: 12px;
}


.counter {
    display: flex;
    justify-content: start;
    align-items: center;
  }

  .counter input {
    border: none;
    width: 40px;
    text-align: center;
    font-size: 20px;
    outline: none;
  }

  .counter button {
    background-color: transparent;
    font-size: 30px;
    border: none; 
    cursor: pointer;
  }


.add-to-cart{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background-color: #F49B57;
  border: none;
  border-radius: 15px;
  /* margin-right: 80px; */
}
.add-to-cart:hover{
  background-color: #f58f40  ;
}




.contact-section{
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  /* justify-content: end; */
  /* align-items: end; */
  gap: 30px;
}


.contact-section img{

  width: 54px;
  height: 54px;
}
.contact-section button {

  background-color: #2DB2D4;
  color: #fff;
  font-size: 14px;
  width: 157px;
  height: 32px;
  border: none;
  border-radius: 12px;

}

.seller-text h6{
    margin-bottom: 0;
 
}

.fa-percent{
    font-size: 10px;
    padding: 6px;

  background-color: #f58f40;
  border-radius: 50%;
  color: #fff;
}

.nav-tabs .nav-link{
border: none;
 color: #8D8D8D;
}

.nav-tabs .nav-link.active{
  border-bottom:1px solid black;
 color:#000;

}

.seller-section{
  margin-bottom: 60px;
}

.policy div i{
  text-align: center;
  width: 25px;
  height: 25px;
  line-height: 25px;
  color: #2DB2D4;
  background-color:#EAF8FB ;
  border-radius: 4px;
}

.policy .return-btn{
  
  width: 80%;
  height: 50px;
  margin-bottom: 15px;
  text-align: right;
  border:none;
 background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 font-size: 15px;

  
  
}
.policy div p{
 
margin-right: 10px;
  
}

.policy > *{
  display: flex;
  flex-direction: row-reverse;
  margin-bottom: 15px;
  margin-right: 15px;

}

.seller-rate img{

height: 25%;
}

.payment-section{
  display: flex;

}


.payment-methods{

  width: 220px;
  height: 124px;
  border: 1px solid  #CBD5E1;
  border-radius: 10px;

}  

.payment-methods i{
  font-size: 25px;
  color: #7C2D12;
  position: relative;
  top: -18px;
  background-color: #fff;
  border-radius: 50%;  
  padding: 10px;
  height: auto;
  width: auto;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

.related-products-section .create-store-btn{
  background-color: #2DB2D4;
  color: #fff;
  width:180px ;
  height:50px ;
  border: none;
  border-radius: 7px;
}


.related-product-img img{

width: 110px;
height: 160px;

object-fit: cover;

}

.related-products button{
  border: none;
  background-color: gray;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  padding: 7px 10px;
}

.related-products button.active{
   background-color: #2DB2D4;
}


#productContainer{
  overflow-x:hidden;
  overflow-y: hidden;
}



@media (max-width: 576px) {
    .order-sm-1 {
        order: 2;
    }

    .order-sm-2 {
        order: 1;
    }
}







@media (max-width: 576px) {
  /* body::before {
    content: "xs";
  } */


  .row.flex-md-row.flex-sm-column-reverse.justify-content-between{
    display: flex;
    flex-direction: column-reverse;

text-align: center;

  }
    .col-1.d-sm-none.d-lg-flex.align-items-start.gap-5{
    display: none;
  }

  .payment-section{
    flex-direction: column;
  }

  .related-products .product{
    width: 50%;
  }

}
@media (min-width: 576px) {
  /* body::before {
    content: "SM";
  } */

}

@media (min-width: 768px) {
  /* body::before {
    content: "MD";
  } */
}

@media (min-width: 992px) {
  /* body::before {
    content: "LG";
  } */
}

@media (min-width: 1200px) {
  /* body::before {
    content: "XL";
  } */
}

@media (min-width: 1400px) {
  /* body::before {
    content: "XXL";
  } */
}