@import url('https://fonts.googleapis.com/css?family=Charm|Happy+Monkey|Poppins|Source+Sans+Pro|Thasadith|ZCOOL+XiaoWei');
 @import url('https://fonts.googleapis.com/css?family=Montserrat|Raleway');
 /*
font-family: 'Poppins', sans-serif;
font-family: 'Akronim', cursive;

font-family: 'Montserrat', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Lora', serif;

font-family: 'Merriweather', serif;
font-family: 'ZCOOL XiaoWei', serif;
font-family: 'Lora', serif;
font-family: 'Baloo Chettan', cursive;
font-family: 'Inconsolata', monospace;
font-family: 'Indie Flower', cursive;

*/
 
 body {
     background-color: #f4f4f4bf !important;
 }
 /*popup box css */
 
 .container-fluid section {
     justify-content: start;
 }
 
 .container {
     margin-top: 80px;
 }
 
 .container p {
     font-family: 'Poppins', sans-serif;
 }
 
 .container .product-image-box {
     position: relative;
     width: 100%;
 }
 
 .product-image-box .box {
     width: 100%;
     position: relative;
     top: 0;
     left: 0;
     margin: 0px;
     padding: 0px;
     border: none;
     background: none;
 }
 /* the text box how */
 
 .heart {
     width: 100px;
     height: 100px;
     background: url("https://abs.twimg.com/a/1446542199/img/t1/web_heart_animation.png") no-repeat;
     background-position: 0 0;
     cursor: pointer;
     transition: background-position 1s steps(28);
     transition-duration: 0s;
 }
 
 .heart.is-active {
     transition-duration: 1s;
     background-position: -2800px 0;
 }
 
 .product-image-box .box ul.thumb li img {
     margin: 0px;
     padding: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     background: white;
     border: none;
 }
 
 .exzoom .exzoom_nav {
     height: 100px !important;
 }
 
 .exzoom .exzoom_nav .exzoom_nav_inner {
     width: 100% !important;
 }
 
 .exzoom .exzoom_nav .exzoom_nav_inner span {
     width: 80px !important;
     height: 80px !important;
 }
 
 .exzoom .exzoom_nav .exzoom_nav_inner span.current {
     width: 80px !important;
     height: 80px !important;
 }
 
 .exzoom .exzoom_nav .exzoom_nav_inner span img {
     width: 100%;
     height: 100%;
 }
 
 .container .information {
     position: relative;
     width: 100%;
 }
 
 .information .name {
     font-size: 22px;
     font-family: 'Poppins', sans-serif;
     padding: 0px;
     margin: 3px 0px;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
 .information .price-value {
     color: #ff7f50;
     font-weight: 400;
     font-size: 20px;
 }
 
 .information .size strong {
     font-size: 22px;
     font-family: 'Poppins', sans-serif;
     color: black;
     margin: 3px;
 }
 
 .information .size select {
     width: 100px;
     font-size: 20px;
     text-align: center;
 }
 
 .information .size select:hover,
 .size select:active,
 .size select:focus {
     border: 1px solid #FF5733;
     outline: none;
     color: #FF5733;
 }
 
 .container .information .color-box {
     padding: 4px 28px;
     border-radius: 4px;
     margin: 5px;
 }
 
 .container .information .color-box.black {
     background-color: black;
 }
 
 .container .information .color-box.white {
     background-color: #D0D3D4;
 }
 
 .container .information .color-box.gold {
     background-color: #F4D03F;
 }
 
 .container .information .color-box.clicked {
     border: 2px solid #FF5733;
 }
 
 .container .information .rate i {
     color: #F4D03F;
 }
 
 .container .information .quantity-btn {
     padding: 2px 12px;
     border-radius: 4px;
     cursor: pointer;
     background: #ECF0F1;
 }
 
 .container .information .quantity-btn:active {
     background: white;
 }
 
 .information .quantity .quantity-value {
     width: 50px;
     text-align: center;
     border: 1px solid gray;
     border-radius: 4px;
 }
 
 .information .quantity p {
     position: absolute;
     top: 0px;
     left: 0px;
     margin: 0px;
 }
 
 .container .quantity .available {
     position: relative;
     font-size: 15px;
 }
 /* delivery ui css */
 
 .container .information .delivery .tooltiptext {
     visibility: hidden;
     text-align: center;
     border-radius: 6px;
     width: 280px;
     padding: 8px 12px;
     position: absolute;
     z-index: 1;
     margin-top: 28px;
     margin-left: -148px;
     transform-origin: center top;
     border-color: #ccc;
     background-color: #fff;
     box-shadow: 1px 1px 8px 0 rgb(0 0 0 / 12%);
     border-width: 1px;
     font-size: 14px;
 }
 
 .container .information .delivery .tooltiptext::after {
     content: "";
     position: absolute;
     bottom: 100%;
     left: 50%;
     margin-left: -5px;
     border-width: 5px;
     border-style: solid;
     border-color: transparent transparent black transparent;
 }
 
 .container .information .delivery i:hover .tooltiptext {
     visibility: visible;
 }
 
 .information .description {
     margin-top: 50px;
 }
 
 .information .description h2 {
     font-size: 20px;
     font-weight: 400;
 }
 
 .information .description p {
     height: 125px;
     overflow: hidden;
 }
 
 .container .information .wishlist {
     display: table-footer-group;
     color: #808B96;
     font-size: 30px;
     cursor: pointer;
 }
 
 .container .information .wishlist.active {
     color: #E74C3C;
 }
 
 .container .information .product-share {
     font-size: 25px;
     margin: 0px 30px;
 }
 
 .container .information .share-social-media {
     list-style: none;
     position: absolute;
     text-align: center;
     font-size: 25px;
     margin: 0px;
     padding: 6px;
     font-size: 30px;
     margin-left: 55px;
     display: none;
     z-index: 9;
 }
 
 .container .information .share-social-media li a .fa-facebook-square {
     color: #1778F2;
 }
 
 .container .information .share-social-media li a .fa-instagram-square {
     color: #DD2A7B;
 }
 
 .container .information .share-social-media li a .fa-twitter-square {
     color: #08a0e9;
 }
 /* Description */
 
 .container .information .description p {
     margin-bottom: 0px !important;
 }
 
 .container .information .description p.active {
     height: auto !important;
 }
 
 .container .information .description .description-expandable {
     text-decoration: underline;
     color: cornflowerblue;
 }
 
 .text_hidden {
     position: relative;
     border-radius: 2px;
     padding: 8px 12px;
     font-size: 16px;
     border-color: #ccc;
     background-color: #fff;
     box-shadow: 1px 1px 8px 0 rgb(0 0 0 / 12%);
     border-width: 1px;
     display: none;
 }
 
 .container .information .cart-and-payment-btns {
     display: flex;
     column-gap: 20px;
     margin-top: 15px;
 }
 
 .information .cart-and-payment-btns button {
     font-size: 18px;
     font-family: 'Poppins', sans-serif;
     background-color: black;
     outline: none;
     color: white;
     border: none;
     border-radius: 5px;
     padding: 8px 22px;
 }
 
 .container .information .cart-and-payment-btns .payment {
     background-color: var(--primary-color);
 }
 /* Product Specification and rating system*/
 
 .container .product-rating {
     margin: 50px auto;
 }
 
 .product-rating .product_details {
     max-height: 500px;
     box-shadow: rgb(99 99 99 / 20%) 0px 2px 8px 0px;
     border-radius: 5px;
     padding: 13px;
 }
 
 .product-rating .product_details li {
     padding: 5px;
     font-family: 'Montserrat', sans-serif;
 }
 
 .product-rating .product_details ul {
     padding-left: 22px !important;
 }
 
 .brand {
     background-color: black;
     color: white;
     border-radius: 2px;
     padding: 4px;
 }
 /* user rating box */
 
 .product-rating .product-rating-box::-webkit-scrollbar {
     width: 11px;
 }
 
 .product-rating .product-rating-box::-webkit-scrollbar-thumb {
     background-color: var(--thumbBG);
     border-radius: 6px;
     border: 3px solid var(--scrollbarBG);
 }
 
 .product-rating .product-rating-box {
     max-height: 500px;
     padding: 0px 10px;
     overflow-y: scroll;
     box-shadow: 5px 10px 10px 5px rgba(0, 0, 0, 0.1);
     border-radius: 5px;
     scrollbar-width: thin;
     scrollbar-color: none/*var(--thumbBG) var(--scrollbarBG)*/
     ;
 }
 
 .product-rating .product-rating-box .header-bar {
     position: relative;
     top: 0px;
     margin: 0px;
     width: 100%;
 }
 
 .product-rating .product-rating-box .header-bar li {
     list-style: none;
     margin: 0px;
     float: left;
     padding-left: 0px;
     width: 120px;
 }
 
 .product-rating .product-rating-box .header-bar li button {
     font-size: 15px;
     font-family: 'Poppins', sans-serif;
     padding: 6px 12px;
     background: #D7DBDD;
     border: none;
     outline: none;
 }
 
 .product-rating .product-rating-box .header-bar li button:hover,
 .product-rating .product-rating-box .header-bar li button:active {
     border: 1px solid gray !important;
     box-shadow: none;
 }
 
 .product-rating .product-rating-box .user-rating {
     position: relative;
     width: 100%;
     height: 100%;
     padding: 0px;
     margin: 50px 0px;
     overflow-x: hidden;
     overflow-y: scroll;
     list-style: none;
 }
 
 .product-rating .product-rating-box .user-rating::-webkit-scrollbar {
     display: none;
 }
 
 .product-rating .product-rating-box .user-rating {
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box {
     position: relative;
     top: 0px;
     left: 0px;
     margin: 15px 0px;
     padding: 4px 10px;
     width: 100%;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box:hover {
     border-left: 3px solid #27AE60;
     box-shadow: 0px 5px 5px rgba(0, 0, 0, .1);
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box img {
     position: relative;
     width: 30px;
     height: 30px;
     border-radius: 50%;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box .username {
     font-size: 15px;
     font-family: 'Poppins', sans-serif;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box .reating-star {
     position: absolute;
     top: 0px;
     right: 10px;
     font-family: 'Poppins', sans-serif;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box .reating-star strong {
     font-weight: 550;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box .reating-star i {
     color: #F4D03F;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box .rating-description {
     position: relative;
     top: 0px;
     left: 0px;
     padding: 1px;
     font-size: 15px;
     font-family: 'Poppins', sans-serif;
 }
 
 .product-rating .product-rating-box .user-rating .user-rating-box .rating-description strong {
     font-weight: 600;
 }
 /* rating star */
 /* Rating Star Widgets Style */
 
 .product-rating .product-rating-box .rating-insert {
     position: relative;
     width: 100%;
     height: 100%;
     margin-top: 50px;
     padding: 0px;
     overflow: hidden;
 }
 
 .success-box {
     padding: 10px 10px;
     border: 1px solid #eee;
     background: #f9f9f9;
 }
 
 .success-box img {
     margin-right: 10px;
     display: inline-block;
     vertical-align: top;
 }
 
 .success-box>div {
     vertical-align: top;
     display: inline-block;
     color: #888;
 }
 
 .container .rating-stars ul {
     position: relative;
     list-style: none;
     padding: 0;
 }
 
 .rating-stars ul>li.star {
     padding: 0px;
     display: inline-block;
 }
 
 .rating-stars ul>li.star>i.fa {
     font-size: 25px;
     color: #ccc;
 }
 
 .rating-stars ul>li.star.hover>i.fa {
     color: #FFCC36;
 }
 
 .rating-stars ul>li.star.selected>i.fa {
     color: #FF912C;
 }
 
 .product-rating .product-rating-box .rating-insert .message_box {
     position: relative;
     margin-top: 8px;
 }
 
 .product-rating .product-rating-box .rating-insert .message_box textarea {
     position: relative;
     width: 100%;
     padding: 5px;
     outline: none;
     font-family: 'Poppins', sans-serif;
     font-size: 15px;
     border: 1px solid gray;
 }
 
 .message_total_count {
     position: absolute;
     right: 15px;
     top: 5px;
     opacity: 0.5;
 }
 
 .container .product-rating .product-rating-box .img-thumbnail {
     width: 100px !important;
     height: 100px !important;
 }
 
 .product-rating .product-rating-box .rating-insert .message_box button {
     position: relative;
     padding: 5px 8px;
     font-size: 18px;
     font-family: 'Poppins', sans-serif;
     background: #28B463;
     color: white;
     border: none;
     outline: none;
     border-radius: 4px;
     margin: 15px 0px;
 }
 
 .product-rating .product-rating-box .rating-insert .message_box button:hover,
 .product-rating .product-rating-box .rating-insert .message_box button:active,
 .product-rating .product-rating-box .rating-insert .message_box button:focus {
     border: 1px solid black;
     color: black;
     background: none;
 }
 /* read more discription */
 
 .more_about_product {
     width: 100%;
     position: relative;
     top: 120px;
     left: 0px;
 }
 
 .container .recommended h2 {
     text-align: center;
     opacity: .4;
 }
 
 .container .recommended #items {
     position: relative;
     margin: 20px auto;
     width: 100%;
     height: 420px;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }
 
 .container .recommended #items .item {
     position: relative;
     width: 250px;
     height: 350px;
     break-inside: avoid;
     border-radius: 8px;
     background: #FBFCFC;
     overflow: hidden;
     transition: 0.3s;
 }
 
 .recommended #items .item .image {
     position: relative;
     width: 100%;
     height: 70%;
 }
 
 .recommended #items .item .image img {
     width: 100%;
     height: 100%;
 }
 
 #items .item:hover,
 #items .item:active,
 #items .item:focus {
     position: relative;
     box-shadow: 5px 15px 15px #E5E7E9;
 }
 
 .recommended .content {
     position: relative;
     width: 100%;
     height: 30%;
     text-align: center;
     overflow: hidden;
 }
 
 .recommended .content .product_name {
     text-align: left;
     width: 100%;
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
 }
 
 .item p {
     margin: 1px 10px;
     padding: 1px;
     font-size: 17px;
 }
 
 @media (max-width: 1400px) {
     .container .information .product-share {
         margin: 0px 10px;
     }
     .container .information .share-social-media {
         margin-left: 38px;
     }
 }
 
 @media (max-width: 1200px) {
     .container {
         width: 100% !important;
         max-width: 100% !important;
     }
 }
 
 @media only screen and (max-width:750px) {
     .container {
         margin: 50px auto !important;
     }
     .container .row .full-width {
         flex: 0 0 auto !important;
         width: 100% !important;
         overflow-x: hidden;
     }
     .container .row .col:last-child {
         margin-top: 30px;
     }
     .container p {
         font-size: 18px;
     }
     .information .description {
         margin-top: 25px;
     }
     .container .description h2 {
         font-size: 22px;
     }
     .container .description p {
         font-size: 16px;
     }
     .container .product-rating .col-4 {
         flex: 0 0 auto !important;
         width: 100% !important;
     }
     .container .product_details {
         width: 100%;
         background: #f6f6f6;
         box-shadow: none;
     }
     .container .product_details h2 {
         font-size: 25px;
         font-family: 'Inconsolata', monospace;
     }
     .product-rating .product-rating-box {
         background: #f6f6f6;
         box-shadow: none;
     }
 }
 
 @media (max-width: 550px) {
     .container .recommended #items {
         height: 380px;
     }
     .container .recommended #items .item {
         width: 220px;
         height: 350px;
     }
 }
 
 @media (max-width: 450px) {
     .container p {
         font-size: 15px;
     }
     .container .recommended #items .item {
         width: 280px;
         height: 350px;
         left: 50%;
         transform: translateX(-50%);
     }
     .owl-carousel .owl-stage {
         display: flex !important;
         align-items: center !important;
     }
     .container .information .col-3 {
         flex: 0 0 auto;
         width: 33.33333333%;
     }
     .container .information .wishlist {
         font-size: 25px;
     }
     .container .information .product-share {
         margin: 0px 20px;
         font-size: 22px;
     }
     .container .product-rating .col:last-child {
         margin-left: 0px !important;
         margin-right: 0px !important;
         padding-left: 0px !important;
         padding-right: 0px !important;
     }
     .product-rating .product-rating-box {
         padding: 0px !important;
     }
     .product-rating .product-rating-box .user-rating .user-rating-box {
         padding: 4px 5px;
     }
     .product-rating .product-rating-box .user-rating .user-rating-box .row .col-2 {
         flex: 0 0 auto;
         width: 50%;
     }
     .information .description {
         display: none;
     }
 }
 /* mobile site css styling file */