@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
:root{
    --primary: #ff8205;
    --secondary: #3b7fae;
    --textPrimary: #000;
    --bgDark : #3C3838;
}
*{margin: 0; padding: 0; box-sizing: border-box;}
body{width: 100%; float: left; font-family: 'Helvetica'}
/* breadcrumb */
.breadcrumb{margin: 2rem 0;}
.breadcrumb a{text-decoration: none; font-size: 1.25rem; color: var(--textPrimary);}
.breadcrumb .breadcrumb-item.active{color: #000; font-size: 1.25rem; font-weight: 500}
.breadcrumb-item + .breadcrumb-item::before {color: var(--textPrimary); content: var(--bs-breadcrumb-divider, ">");}
.Btn{padding: .5rem 2rem; background: #000; color: #fff;font-weight: 500;border-radius: .25rem;
     border: 1px solid; border-color: #000; max-width:150px; }
/* header */
/*.logo img{max-width: 80px;} */
header{box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.25); position: fixed; top: 0; width: 100%;background: #fff;
z-index: 9;}
header .container{display: flex; justify-content: space-between; align-items: center;}
header ul {padding: 0; margin: 0;}
header ul li {display: inline; list-style: none; margin-right: 1.5rem;}
header ul li a{font-size: 1rem; color: var(--textPrimary); font-weight: 500; text-decoration: none;}
header ul li a:hover{color: var(--primary);}
header .nav-menu {display: flex;align-items: center;}
header .nav-menu div{margin-left: 1rem;}
.nav-menu i{font-size: 2rem; color: var(--secondary);cursor: pointer;}
.nav-menu .fa-circle-user:hover{color: var(--primary);}
.nav-menu .fa-arrow-right-from-bracket{color: var(--textPrimary);font-size: 1rem;}
.user-profile{position: relative;}
/* mobile header */
.mob-header{position: fixed; width: 100%; float: left; top: 0; background: #fff !important;z-index: 1;}
.mob-header div{display: flex; align-items: center;}
.mob-header img{max-width: 50px;} 
.mob-header a{font-weight: 500;color: var(--textPrimary);}
.mob-header a.active{color: var(--secondary);}
.mob-header .fa-circle-user{font-size: 1.5rem; color: var(--secondary); margin-right: .5rem; cursor: pointer;}
.mob-header .dropdown-content{top: 24px;}
.navbar-toggler{border: none; padding: 0;}
.navbar-toggler i{color: var(--textPrimary); font-size: 1.75rem;}
.navbar-toggler:focus{box-shadow: none;}
/* body section */
/* user upload wrapper */
.body-section{width: 100%; float: left; min-height: calc(100vh - 80px); margin-top: 80px; position: relative;}
.user-upload-wrapper .background{ height: 100%; width: 38vw; position: absolute; top: 0; right: 0; z-index: -1;}
.user-upload-wrapper .container{display: flex; align-items: center;}
.user-upload-wrapper .card{box-shadow:  0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);margin-bottom: 3rem; border: none;}
.user-upload-wrapper input::placeholder{font-size: .875rem;}
.user-upload-wrapper form label{ font-size: .875rem;}
.user-upload-wrapper textarea{resize: none;}
.user-upload-wrapper button {margin: 1rem auto 0 auto; display: flex; justify-content: center;}
/* file upload */

.file-upload {background-color: #ffffff;width: 600px;margin: 0 auto;padding: 20px;}
.image-upload-wrap i {color: var(--primary); font-size: 2.5rem; margin-bottom: 1rem;}
.file-upload-btn:hover { cursor: pointer;}
.file-upload-btn:active {border: 0;transition: all .2s ease;}  
.file-upload-content {display: none;text-align: center;position: relative;} 
.file-upload-input {position: absolute;margin: 0;padding: 0;width: 100%;height: 100%;outline: none;opacity: 0;
    cursor: pointer;}
.image-upload-wrap {margin-top: 20px;position: relative;min-height: 12.5rem;display: flex;justify-content: center;
    align-items: center;border: 1px solid #ced4da;border-radius: 6px;}
.image-upload-wrap:hover i{color: var(--secondary);}
.file-upload-image {width: 100%;border-radius: 6px;max-height: 12.5rem;object-fit: cover;cursor: pointer;}
.drag-text{text-align: center;}
.remove-file-btn{position: absolute;top: .5rem;right: .5rem;width: 2rem;height: 2rem;background: #fff;
    display: flex !important;justify-content: center;align-items: center;border-radius: 50%;font-size: 1rem;
    color: var(--primary);cursor: pointer;box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.25);transition: all .2s ease;}
/* footer */
footer{padding: 1rem 0; background: var(--bgDark); width: 100%; float: left;}
.social-media{display: flex;justify-content: center; margin-bottom: .5rem;}
.social-media div{width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary); padding: 10px; display: flex;
    align-items: center; justify-content: center;margin-right: 1rem; cursor: pointer;}
.social-media div:hover{ background: var(--secondary);}
.social-media i{font-size: 1rem; color: #fff;}
footer .copyright{font-size: 1rem; color: #fff; text-align: center;margin-bottom: 0;font-weight: 300;}
.navbar-toggler{padding: .25rem .5rem}
/* product view page */
.product-view-section {width: 100%; float: left;margin-bottom: 2rem;}
.product-img {width: 100%; max-height: 400px; border-radius: .5rem;object-fit: cover; cursor: pointer;}
.product-desc h1{font-size: 2.25rem; color: #000; margin-bottom: 1rem;text-transform: uppercase;
    font-weight: 600;
}
.product-desc p{text-align: justify;}
.product-desc button{margin: .5rem 0;}
.product-desc .share {width: 100%; float: left; display: flex; align-items: center; margin: 1rem 0;}
.product-desc .share p{font-weight: 500; margin: 0 .75rem 0 0;}
#shareBlock .fa-stack{width: 2rem;}
.product-desc h3{font-weight: 500; font-size: 2rem; display: flex; align-items: center;}
.product-desc h3 span{font-size: 1.25rem;vertical-align: middle;font-weight: 500;text-decoration: line-through; color: #bbbbbb;
    margin-left: .75rem;
}
.product-desc img:hover {opacity: 0.7;}
/* The Modal (background) */
#image-viewer {display: none; position: fixed; z-index: 1; padding-top: 100px;left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.9);
}
.modal-content { margin: auto; display: block; width: 80%;max-width: 43.75; margin-bottom: 3rem;}
.modal-content { animation-name: zoom;animation-duration: 0.6s;}
@keyframes zoom {from {transform:scale(0)}  to {transform:scale(1)}}
#image-viewer .close {position: absolute; top: 1rem;right: 2rem;color: #f1f1f1; font-size: 2rem; font-weight: bold; transition: 0.3s;}
#image-viewer .close:hover,#image-viewer .close:focus {color: #bbb; text-decoration: none;cursor: pointer;}

/* slider */
/* .slider {margin: 4rem auto;} */
.slick-slide { margin: 0px 10px; cursor: pointer;}
.slick-slide img {width: 100%;}
.slick-prev:before,
.slick-next:before {color: #000 !important}
.slick-slide {transition: all ease-in-out .3s;opacity: .2;}
.slick-active {opacity: 1;}
.slick-current {opacity: 1;}
/* related-items */
.related-items .title{font-size: 2.5rem; text-align: center; margin: 2rem 0; font-weight: 500;
    color: #000;}
.related-items .card h1{font-size: 1.5rem; color: var(--secondary); margin-bottom: 1rem;}
.related-items .card{box-shadow: 0 4px 7px -1px rgba(0, 0, 0, 0.25);}

/* zoom box */
.zoom-box{position: relative;}
.zoom-box img{vertical-align: bottom;}
.zoom-box .zoom-selector{position: absolute;background-image: url("../img/selector.png");background-repeat: repeat;
    display: none;cursor: crosshair;}
.zoom-box .viewer-box{position: absolute;border: 1px solid rgb(239,237,240);display: none;overflow: hidden; width: 100% !important; height: 100% !important; z-index: 1;}
.zoom-box .viewer-box>img{position: absolute;left: 0;top: 0;}
/* dropdown */
.dropdown { position: relative; display: inline-block;}
.dropdown-content {display: none;position: absolute;right: 0;margin-top: .5rem;background-color: #fff;overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a {color: black;padding: 12px 16px; text-decoration: none;display: flex; align-items: center;}
.dropdown-content a:hover, .dropdown-content a:hover i{color: var(--secondary);}
  .show {display: flex;}
/* responsive */
@media (max-width: 767px) {
    .body-section{margin-top: 66px;}
    .body-section .background{width: 100vw;}
    .user-upload-wrapper a{color: #fff;}
    .product-desc h1{margin: 1rem 0;}
    /* .breadcrumb-item + .breadcrumb-item::before{color: #fff;} */
    .slick-slide{margin: 0 5px;}
    .related-items .card h1{margin:0 0 0.5rem 0;}
}
@media (min-width: 768px) and (max-width: 991px) {
    header ul li {margin-right: 1rem;}
}

.col-md-6.mx-auto .btn.btn-secondary {
    z-index: 0;
}