.buy-container{
     margin: 0px 350px;
     padding: 10px;
     justify-content: center;
     align-items: center;
   
  }
/* product container*/
  .pdp-container{
    margin: 1% 2%;
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(50%,1fr));*/
    grid-template-columns: minmax(60%, 1fr) minmax(40%, 1fr);

  }
  .img-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%,1fr));
    grid-gap: 10px;
    margin-bottom: 10px;

  }

  .img-grid{
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50%,1fr));
  }

@media (max-width:820px){
.pdp-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%,1fr));
  }
    .img-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%,1fr));
  }

.img-grid {
      background-color: #fff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100%,1fr));
}

}
/*ad to cart*/
.cart-container{
    height: 100%;
    padding: 0 0 0 30px;
    box-sizing: border-box;
  
    }

   @media (max-width:820px){
  
        .cart-container{
            margin-left: 0px  !important;
            padding-left: 0px  !important;
        }
    }



    #minus-btn, #plus-btn {
            width: 100%;
            cursor: pointer;
            font-size: 28px;
            font-weight: 800;
            text-align: center;
            color: #fff;
        }
        #input-qty {
            text-align: center;
            margin: 0 5px;
            font-weight: 800;
        }

     #input-qty {
            text-align: center;
            margin: 0 5px;
             font-weight: 500;
        }

     #input-qty[type="text"] {
           font-size: 34px;
           padding: 0 !important;
        }
    .fh-2{
         line-height: 2em !important;
        }




.item{
  font-size: 1em;
  word-wrap: break-word;
  line-height: 2em;
  margin-top: 10px;
}


.item h1 {
    font-size: 1.4em;
    max-width: 800px;
    color: var(--primary-darker);
}

.item h2 {
    font-size: 1.3em;
    max-width: 800px;
    color: var(--primary-darker);
}
.item image {
    width: 100%;
}
.item p {
    line-height: 2em;
    font-size: 1em;
    color: var(--primary-darker);
}


.item h1, .item h2, .item h3, .item h4, .item h5, .item h6 {
  color: var(--primary-darker);
  line-height: 1.5em;
}

.item a {
  color: #0066cc;
  text-decoration: none;
}

.item a:hover {
  text-decoration: underline;
}

.item blockquote {
    background-color: #fdfdea;
    border: 1px #99bbd8 solid;
    padding: 1em;
    max-width: 640px;
    margin: 20px 0;
    border-radius: 12px;
    font-size: 1.2em;
}


.item ol {
    list-style-type: decimal;
    margin-bottom: 20px;
}

.item ul {
    list-style-type: none;
    margin-bottom: 20px;
}

.item li {
    margin-bottom: 5px;
    
}


.codeblock {
    color: #eee;
    font-family: "Lucida Console", Monaco, monospace;
    padding: 0;
    font-size: 15px;
    border: 4px solid #a8c2d7;
    overflow: auto;
    height: auto;
    margin-bottom: 2em;
    background-color: #343432;
    border-style: outset;
    opacity: 1;
  }

.codeblock pre {
    max-width: 100%;
    padding: 10px 10px 10px 20px;
    overflow: overlay;
    line-height: 1.5em;
  }



.copy-highlite {
    background-color: #ccc !important; 
  }
.copy-btn{
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    padding: 0px;
  }
 

/* Grid container */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 50px)); /* fixed 50px columns */
    gap: 10px; 
    padding-right: 10px;
    justify-content: start; /* align grid to the left */
    
}

/* Each link/item inside the grid */
.color-grid a {
    display: block;
    width: 50px;   /* same as grid column */
    height: 50px;  /* make it square */
    overflow: hidden;
    text-align: center;
    border: 1px solid #ccc;
    cursor: pointer;
}

/* Image inside link */
.color-grid img.pdp-more-color-image-ratio {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

    .box {
        width: 50px;
        height: 50px;
        display: inline-block;
        overflow: hidden;
        position: relative;
      }
      .pdp-more-color-image-ratio {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
      }
      .pdp-more-color-image-ratio:hover {
        transform: scale(1.2);
      }
      .blink-text {
        animation: blink 1s infinite;
      }
      @keyframes blink {
        0%,49%  { color: #4285F4; }
        50%,100% { color: #25D366; }
      }