.breadcrumbs{
     margin-bottom: 2rem;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     -ms-grid-row-align: center;
     align-items: center;
}
 .breadcrumbs a, .breadcrumbs p{
     color: rgb(145, 147, 153);
     margin: 0;
}
 .breadcrumbs p{
     cursor: default;
}
 .breadcrumbs a:hover{
     color: #2e34ae;
     text-decoration: none;
}
 .breadcrumbs i{
     color: #2A3686;
     font-size: 1.286rem;
     margin: 0 .875rem;
}
 .brand-grid {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     gap: 1rem;
}
 .brand-btn {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     gap: .5rem;
     padding: 0.271rem 1.143rem 0.271rem .271rem;
     background: rgb(243, 244, 243);
     border: none;
     -webkit-border-radius: 2rem;
     -moz-border-radius: 2rem;
     border-radius: 2rem;
     cursor: pointer;
     -webkit-transition: all 0.2s ease;
     -o-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
     transition: all 0.2s ease;
     white-space: nowrap;
     text-decoration: none;
     position: relative;
     overflow: hidden;
     margin: 0;
}
 .brand-btn:before {
     content: '';
     position: absolute;
     right: 0;
     bottom: 0;
     aspect-ratio: 9/9;
     margin: auto;
     z-index: 0;
     left: 0;
     top: 0;
     -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
     -ms-transform: translate(-50%,-50%);
     -o-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
     width: 200%;
}
 .brand-btn:after {
     content: '';
     position: absolute;
     top: 1px;
     right: 1px;
     bottom: 1px;
     left: 1px;
     -webkit-border-radius: 2rem;
     -moz-border-radius: 2rem;
     border-radius: 2rem;
     background: rgb(243, 244, 243);
     z-index: 1;
}
 .brand-btn:hover:before{
     background-image: conic-gradient(#2A3686 0deg, #2A3686 5%, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0) 50%, #2A3686 50%, #2A3686 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);
     -webkit-animation: spin 5s linear infinite;
     -moz-animation: spin 5s linear infinite;
     -o-animation: spin 5s linear infinite;
     animation: spin 5s linear infinite;
}
 .brand-btn:hover {
     background: #e0e0e0;
     -webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
     -moz-box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
     box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
     text-decoration: none;
}
 .brand-btn img {
     width: 2rem;
     height: 2rem;
     -o-object-fit: contain;
     object-fit: contain;
     -webkit-border-radius: 0.5rem;
     -moz-border-radius: 0.5rem;
     border-radius: 0.5rem;
     z-index: 2;
     position: relative;
     border: 1px solid rgba(0,0,0,.102);
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
     padding: .2rem;
}
 .brand-btn b {
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     color: rgb(44, 45, 46);
     z-index: 2;
     position: relative;
}
 .toggle-btn {
     padding: 0.271rem 1.143rem;
     -webkit-border-radius: 2rem;
     -moz-border-radius: 2rem;
     border-radius: 2rem;
     line-height: 2rem;
     margin: 0;
}
 .hidden {
     display: none !important;
}
 #products{
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin-top: 2rem;
     width: -webkit-calc(100% + 1.5rem);
     width: -moz-calc(100% + 1.5rem);
     width: calc(100% + 1.5rem);
     -webkit-box-pack: start;
     -webkit-justify-content: start;
     -moz-box-pack: start;
     -ms-flex-pack: start;
     justify-content: start;
     scroll-margin-top: 7rem;
}
 #products .card{
     width: -webkit-calc(25% - 1.5rem);
     width: -moz-calc(25% - 1.5rem);
     width: calc(25% - 1.5rem);
     margin-bottom: 1rem;
     margin-right: 1.5rem;
     position: relative;
     padding-bottom: 5rem;
     cursor: pointer;
     overflow: hidden;
}
 #products .card:hover{
     -webkit-box-shadow: rgba(193,200,222,.378) 0 0.714rem 1.429rem 0;
     -moz-box-shadow: rgba(193,200,222,.378) 0 0.714rem 1.429rem 0;
     box-shadow: rgba(193,200,222,.378) 0 0.714rem 1.429rem 0;
     -webkit-transform: translateY(-0.357rem);
     -moz-transform: translateY(-0.357rem);
     -ms-transform: translateY(-0.357rem);
     -o-transform: translateY(-0.357rem);
     transform: translateY(-0.357rem);
     -webkit-transition: -webkit-transform .3s ease,-webkit-box-shadow .3s ease;
     transition: -webkit-transform .3s ease,-webkit-box-shadow .3s ease;
     -o-transition: box-shadow .3s ease,-o-transform .3s ease;
     -moz-transition: transform .3s ease,box-shadow .3s ease,-moz-transform .3s ease,-moz-box-shadow .3s ease;
     transition: transform .3s ease,box-shadow .3s ease;
     transition: transform .3s ease,box-shadow .3s ease,-webkit-transform .3s ease,-moz-transform .3s ease,-o-transform .3s ease,-webkit-box-shadow .3s ease,-moz-box-shadow .3s ease;
}
 #products .card .text{
     padding: 1rem 1rem 0 1rem;
}
 #products .card .text h6{
     margin-bottom: .5rem;
}
 #products .card .text h5{
     margin-bottom: 0;
     margin-top: .5rem;
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -moz-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     width: 100%;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     letter-spacing: -.1px;
}
 #products .card .text h5 small{
     text-decoration: line-through;
}
 #products .card .text h5 i{
     font-size: .875rem;
     color: #2A3686;
     background-color: rgba(0,0,0,.05);
     padding: .2rem;
     -webkit-border-radius: 1rem;
     -moz-border-radius: 1rem;
     border-radius: 1rem;
     font-style: normal;
}
 #products .card .text a{
     margin-bottom: 0;
}
 #products .card .text .buttons{
     -webkit-box-pack: justify;
     -webkit-justify-content: space-between;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     position: absolute;
     bottom: 1rem;
     left: 1rem;
     right: 1rem;
}
 .heartadd{
     padding: .857rem;
     -webkit-border-radius: 0.857rem;
     -moz-border-radius: 0.857rem;
     border-radius: 0.857rem;
     background-color: rgba(0,0,0,.102);
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -moz-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     cursor: pointer;
}
 .heartadd svg{
     width: 1.5rem;
}
 .heartadd svg path{
     stroke: rgb(44, 45, 46);
}
 .heartadd:hover svg path{
     stroke: #2e34ae;
}
 .heartadd.favorite svg path{
     fill: #2e34ae;
     stroke: #2e34ae;
}
 .slider-container {
     position: relative;
     width: 100%;
     overflow: hidden;
}
 .slider {
     position: relative;
     aspect-ratio: 16/12;
     overflow: hidden;
     background: -webkit-linear-gradient(310deg, rgba(243, 244, 244, 0.3), rgba(108, 146, 202, 0.3), rgba(243, 243, 244, 0.3));
     background: -moz-linear-gradient(310deg, rgba(243, 244, 244, 0.3), rgba(108, 146, 202, 0.3), rgba(243, 243, 244, 0.3));
     background: -o-linear-gradient(310deg, rgba(243, 244, 244, 0.3), rgba(108, 146, 202, 0.3), rgba(243, 243, 244, 0.3));
     background: linear-gradient(140deg, rgba(243, 244, 244, 0.3), rgba(108, 146, 202, 0.3), rgba(243, 243, 244, 0.3));
     -moz-background-size: 300% 300%;
     -o-background-size: 300% 300%;
     background-size: 300% 300%;
     -webkit-animation: gradient 2.5s ease infinite;
        -moz-animation: gradient 2.5s ease infinite;
          -o-animation: gradient 2.5s ease infinite;
             animation: gradient 2.5s ease infinite;
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
 .oneslide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     background-position: center;
     opacity: 0;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     -webkit-transition: opacity 0.5s ease-in-out;
     -o-transition: opacity 0.5s ease-in-out;
     -moz-transition: opacity 0.5s ease-in-out;
     transition: opacity 0.5s ease-in-out;
     display: -webkit-box;
     display: -webkit-flex;
     display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: end;
     -webkit-align-items: flex-end;
     -moz-box-align: end;
     -ms-flex-align: end;
     align-items: flex-end;
     padding: 20px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}
 .oneslide.active {
     opacity: 1;
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
 .slider-dots {
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     position: absolute;
     bottom: 0;
     top: 0;
     left: 0;
     right: 0;
}
 .dot {
     width: 20%;
     height: 100%;
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
     background: transparent;
     cursor: pointer;
     border: none;
     border-bottom: 3px solid transparent;
     -webkit-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
 .dot:hover, .dot.active{
     background: transparent;
}
 .dot.active {
     border-bottom: 3px solid #2A3686;
}
 #pagination{
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     margin-top: 2rem;
}
 #pagination .pagination-controls{
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     -ms-grid-row-align: center;
     align-items: center;
}
 #pagination .pagination-controls p{
     margin: 0 2rem;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -moz-box-align: center;
     -ms-flex-align: center;
     -ms-grid-row-align: center;
     align-items: center;
}
 #pagination .pagination-controls p input{
     padding: .5rem;
     width: 4rem;
     margin: 0 1rem 0 0;
     text-align: center;
     height: 3rem;
}
 #pagination .pagination-controls button{
     background-color: rgb(243, 244, 243);
     padding: .5rem;
     width: 3rem;
     height: 3rem;
     -webkit-border-radius: 2rem;
     -moz-border-radius: 2rem;
     border-radius: 2rem;
}
 #pagination .pagination-controls button:hover{
     background-color: rgba(108, 146, 202, 0.3);
}
 #pagination .pagination-controls button:disabled:hover{
     background-color: rgb(243, 244, 243);
}
 #pagination .pagination-controls button svg{
     fill: rgb(44, 45, 46);
}
 #pagination .pagination-controls button:hover svg{
     fill:#2e34ae;
}
 #pagination .pagination-controls button:disabled svg{
     fill:rgba(145, 147, 153, .35);
}
 @media only screen and (max-width:1300px){
     #products .card{
         width: -webkit-calc(33.33% - 1.5rem);
         width: -moz-calc(33.33% - 1.5rem);
         width: calc(33.33% - 1.5rem);
    }
}
 @media only screen and (max-width:900px){
     #products .card{
         width: -webkit-calc(50% - 1.5rem);
         width: -moz-calc(50% - 1.5rem);
         width: calc(50% - 1.5rem);
    }
}
 @media only screen and (max-width:600px){
     #products .card{
         width: 100%;
    }
}