/* latin */
@font-face {
  font-family: 'Monoton';
  font-style: normal;
  font-weight: 400;
  src: local('Monoton'), local('Monoton-Regular'), url(https://fonts.gstatic.com/s/monoton/v8/5h1aiZUrOngCibe4TkHLQg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


        .nbutton {
            min-width: 100%;
            /* min-height: 60px; */
            font-size: 22px;
            /* text-transform: uppercase; */
            letter-spacing: 1.3px;
            font-weight: 700;
            color: #ffffff;
            background: #4FD1C5;
            background: linear-gradient(90deg, rgb(195, 145, 79), rgb(219, 138, 32) 100%);
            border: none;
            /* border-radius: 1000px; */
            box-shadow: 12px 12px 24px rgb(169, 148, 105);
            transition: all 0.3s ease-in-out 0s;
            cursor: pointer;
            outline: none;
            position: relative;
            padding: 10px;
        }

        .nbutton::before {
            content: '';
            /* border-radius: 1000px; */
            /* min-width: calc(100% + 12px); */
            /* min-height: calc(60px + 12px); */
            border: 2px solid #000000;
            box-shadow: 0 0 60px rgb(230, 183, 29);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: all .3s ease-in-out 0s;
        }

        .nbutton:hover,
        .nbutton:focus {
            color: #333;
            transform: translateY(-6px);
        }

        .nbutton:hover::before,
        .nbutton:focus::before {
            opacity: 1;
        }

        .nbutton::after {
            content: '';
            width: 30px;
            height: 30px;
            border-radius: 100%;
            border: 6px solid #9f9c17;
            position: absolute;
            z-index: -1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: ring 1.5s infinite;
        }

        .nbutton:hover::after,
        .nbutton:focus::after {
            animation: none;
            display: none;
        }

        @keyframes ring {
            0% {
                width: 30px;
                height: 30px;
                opacity: 1;
            }

            100% {
                width: 300px;
                height: 300px;
                opacity: 0;
            }
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }


        .col-md-12 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
        }

        .pt-100 {
            padding-top: 70px;
        }

        .fadeInUp {
            animation-name: fadeInUp;
        }

        .animated {
            animation-duration: 1s;
            animation-fill-mode: both;
        }

        .text-center {
            text-align: center !important;
        }

        .section-title {
            font-size: 35px;
            position: relative;
            display: inline-block;
            z-index: 1;
        }

        .h1 {
            margin: 0;
            padding: 0;
            color: #2d3031;
            font-weight: 700;
        }

        .section-title span {
            font-weight: 300;
        }

        .featured-product-tab-content {
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }

        .featured-product {
            flex: 0 0 33.33%;
            max-width: 33.33%;
            padding: 0px 15px;
        }

        .mb-25 {
            margin-bottom: 25px;
        }

        .featured-box {
            text-align: center;
            padding: 10px 10px;
            background-color: #F3F3F3;
        }

        .gallery {
            display: flex;
            flex-wrap: wrap;
            /* Compensate for excess margin on outer gallery flex items */
            margin: -1rem -1rem;
        }


        .product-img {
            overflow: hidden;
            position: relative;
        }

        .mb-15 {
            margin-bottom: 1px;
        }

        .transition,
        a,
        input,
        button {
            transition: all 0.4s ease 0s;
            -moz-transition: all 0.4s ease 0s;
            -webkit-transition: all 0.4s ease 0s;
            -o-transition: all 0.4s ease 0s;
        }

        .product-name {
            display: block;
            font-size: 16px;
            color: #2d3031;
            line-height: 20px;
            padding-top: 10px;
            padding-bottom: 5px;
            font-weight: 700;
        }

        .featured-box:hover .product-details-btn {
            top: 0;
            visibility: visible;
            opacity: 1;
        }

        .product-details-btn {
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            background: #2d3031;
            visibility: hidden;
            opacity: 0;
            height: 100%;
            background: rgb(0 0 0 / .5);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .text-uppercase {
            text-transform: uppercase !important;
        }

        .text-center {
            text-align: center !important;
        }

        .product-details-btn a {
            color: #fff;
        }

        .quick-popup {
            width: 100%;
            height: 100%;
            display: flex !important;
            align-items: center;
            justify-content: center;
            padding: 10px 10px;
        }

        .fa {
            display: inline-block;
            font: normal normal normal 14px / 1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        @media (max-width: 767px) {
            .featured-product {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        .gallery-item {
            /* Minimum width of 24rem and grow to fit available space */
            flex: 1 0 24rem;
            /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
            margin: 1rem;
            box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }

        .gallery-image {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 400ms ease-out;
        }

        .gallery-image:hover {
            transform: scale(1.15);
        }

        /*

The following rule will only run if your browser supports CSS grid.

Remove or comment-out the code block below to see how the browser will fall-back to flexbox styling. 

*/

        @supports (display: grid) {
            .gallery {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
                grid-gap: 2rem;
            }

            .gallery,
            .gallery-item {
                margin: 0;
            }
        }