* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    overflow: none;
}

/* import 'animate.css'; */

input,
textarea,
button,
select,
a,
div {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

input,
textarea,
select {
    font-size: 16px;
}

a:focus,
a:visited,
a:active {
    outline: none;
}

html {
    font-size: 100%;
}


:root {
    --bilbao: #336600;
    --roti: #CC9933;
    --black: #000;
    --brown: #996633;
    --offset: #F3F0EA;
    --cream: #FCF9F2;
    --red: #B11515;

    --marg-2: 2rem;
    --marg-4: 4rem;

    --pad-2: 2rem;
    --pad-4: 4rem;

    --txt-heading: 48px;
    --txt-subheadding: 36px;
    --txt-subtitle: 24px;
    --txt-lg-body: 20px;
    --txt-body: 16px;
    --txt-cta: 16px;
    --txt-small: 13px;

    --bx-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

p,
button,
a,
h4,
li,
span,
td,
label,
input {
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

h1,
h2,
h3,
h5,
h6 {
    font-family: 'Roboto Slab', serif, Helvetica, sans-serif;
}

/* 
============= Reusuable CSS =============
*/

.out-view {
    display: none;
}

.no-scroll {
    overflow: hidden;
}

.primary-cta {
    font-size: var(--txt-cta);
    text-transform: capitalize;
    text-decoration: none;
    padding: 12px 32px;
    color: #fff;
    /* border-radius: 20px; */
    border-radius: 8px;
    display: inline-block;
    background-color: var(--bilbao);
}

.primary-cta:hover {
    color: #fff;
    background-color: #285000;
    transition: 0.3s ease;
}

.primary-cta:not(:hover),
.secondary-cta:not(:hover),
.nav-link:not(:hover) {
    transition: 0.3s ease;
}

.secondary-cta {
    font-size: var(--txt-cta);
    text-transform: capitalize;
    text-decoration: none;
    padding: 12px 32px;
    /* border-radius: 20px; */
    border-radius: 8px;
    color: var(--black);
    display: inline-block;
    background-color: var(--offset);
}

.secondary-cta:hover {
    /* color: #fff; */
    color: var(--black);
    /* background-color: #285000; */
    background-color: var(--offset);
    transition: 0.3s ease;
}

.container {
    width: 90%;
    margin: 0 auto 0 auto;
}

.row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

p {
    line-height: 30px;
}

#prod-name {
    text-transform: capitalize;
}

/* ========= LIGHT BOX =============== */

.lbx-product-rating-reminder {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    background-color: #00000097;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.lbx-product-rating-reminder .wrapper {
    width: 800px;
    border-radius: 16px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lbx-product-rating-reminder h3 {
    margin-bottom: 16px;
}

#current-user-name {
    font-family: 'Roboto Slab', serif, Helvetica, sans-serif;
}

.lbx-product-rating-reminder .lbx-title {
    text-transform: capitalize;
    color: var(--bilbao);
    margin-bottom: 8px;
    font-size: var(--txt-subheadding);
}

.lbx-product-rating-reminder .wrapper .text-box {
    width: 60%;
    align-self: center;
    /* justify-self: flex-start; */
    padding: 10px 20px 10px 3rem;
    /* background-color: #333; */
}

.hide-lbx-product-rating-reminder {
    display: none;
}

.lbx-product-rating-reminder .wrapper .image-box {
    width: 40%;
    height: 50vh;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    background-image: url(../Images/portrait-lbx.jpg);
    background-size: cover;
    background-position: center;
}

.lbx-product-rating-reminder .cta-box {
    margin-top: 2.75rem;
}

.lbx-product-rating-reminder .primary-cta {
    margin-right: 4px;
}

.lbx-product-rating-reminder .we-hope {
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin-bottom: 22px;
    /* color: #00000097; */
}

.lbx-product-rating-reminder .reviews-pending {
    color: var(--brown);
    margin-bottom: 16px;
}

.lbx-product-rating-reminder .feedback-notice {
    width: 80%;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid #28500010;
    font-style: italic;
    /* background-color: #CC993315; */
    font-size: var(--txt-small);
    line-height: 1.2;
    margin-left: -3px;
}

.lbx-product-rating-reminder .primary-cta,
.lbx-product-rating-reminder .secondary-cta {
    padding: 12px 22px;
}

/* ============= DESKTOP ============= */
/*  
*/



/* Alert Box */

.alert {
    top: 14%;
    right: -100%;
    position: fixed;
    margin-right: 1%;
    width: 350px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.alert .col-2 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 88%;
}

.alert .fa-exclamation-circle {
    font-size: 24px;
    padding: 0 18px;
}

.alert .fa-check {
    font-size: 20px;
    padding: 0 18px;
}

.alert-message {
    /* color: #ce8500; */
    width: 86%;
}

.alert .alert-close-btn {
    /* background-color: #ffd080; */
    height: 50px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    cursor: pointer;
}

.admin-error-message {
    padding: 16px;
}

#alert-wrapper {
    z-index: 9999;
}

#alert-wrapper .show {
    right: 0px;
    z-index: 9999;
    animation: show_slide 0.5s ease forwards;
}

#alert-wrapper .hide {
    animation: hide_slide 0.5s ease forwards;
    right: -300px;
}

/* Green alert */

.green-alert .alert {
    background-color: #3F5F20;
    border-right: 8px solid #3F5F20;
}

.green-alert .fa-exclamation-circle {
    display: none;
}

.green-alert .alert-message {
    color: #fff;
}

.green-alert .alert-close-btn {
    background-color: #3F5F20;
}

.green-alert .fa-times {
    color: #fff;
}

.green-alert .fa-check {
    color: #aad380;
    opacity: 1;
    transition: opacity 1s ease-in;
}


/* alert warning */

.warning-alert .alert {
    background-color: #ffdb9b;
    border-right: 8px solid #ffdb9b;
}

.warning-alert .fa-exclamation-circle {
    color: #ce8500;
}

.warning-alert .alert-message {
    color: #ce8500;
}

.warning-alert .alert-close-btn {
    background-color: #ffdb9b;
}

.warning-alert .fa-check {
    display: none;
}

/* Red alert */

.red-alert .alert {
    background-color: #B11515;
    border-right: 8px solid #B11515;
}

.red-alert .fa-exclamation-circle {
    color: #d09999;
}

.red-alert .fa-times {
    color: #fff;
}

.red-alert .alert-message {
    color: #fff;
}

.red-alert .alert-close-btn {
    background-color: #B11515;
}

.red-alert .fa-check {
    display: none;
}

@keyframes show_slide {
    0% {
        transform: translateX(100%);
    }

    40% {
        transform: translateX(-10%);
    }

    80% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-10px);
    }
}

@keyframes hide_slide {
    0% {
        transform: translateX(-10px);
    }

    40% {
        transform: translateX(0%);
    }

    80% {
        transform: translateX(-10%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* ###### 1. HOME PAGE ###### */

.section-one {
    width: 100%;
}

/* - STYLE HEADER */

.header {
    top: 0;
    z-index: 9999;
    width: 100%;
    height: fit-content;
    position: sticky;
    background-color: #fff;
    position: fixed;
    box-shadow: var(--bx-shadow);
}

.header .contents {
    /* width: 90%; */
    /* margin: 0 auto; */
    padding: 0 10%;
    height: 8vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* - logo container */

.header .logo-container {
    height: 100%;
    position: absolute;
    top: 0;
    margin-right: 8px;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #285000;
}

/* - logo */

.header #swn-logo {
    transform: scale(0.9);
    margin: 0 auto;
    object-fit: cover;
    aspect-ratio: 1;
}

/* - side menu button */

#side-menu-btn {
    display: none;
}

/* - promo bar */

.promo-bar {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.05em;
    background-color: var(--bilbao);
}

#promo-text {
    color: #fff;
    text-transform: uppercase;
}

/* - main navigation */

.main-navigation-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#navigation {
    padding: 0 0 0 7rem;
}

/* - navigation items */

#navigation li {
    list-style: none;
    /* height: 100%; */
    display: inline;
    align-content: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#navigation .nav-link,
.shop-menu .nav-link {
    color: #000;
    font-weight: medium;
    text-transform: capitalize;
    height: 100%;
    width: 100%;
    padding: 24px 1.5rem;
    text-decoration: none;
}

#navigation .nav-link:hover,
.shop-menu .nav-link:hover,
.footer-link:hover {
    color: #317c0b;
    cursor: pointer;
    transition: 0.2s ease-in;
}

#navigation .link-active,
.shop-menu .link-active {
    color: #317c0b !important;
}

/* - shop action/menu button */

.shop-menu {
    align-content: center;
    cursor: default;
}

.shop-menu .nav-link {
    height: 100%;
}

.shop-menu .nav-link {
    border: none;
    background: transparent;
}

.shop-menu i {
    font-weight: bold;
    margin-left: 6px;
}

#mobile-menu,
.mobile-link {
    display: none !important;
}

#cart-total {
    font-weight: 600;
    margin-left: 4px;
    color: rgb(255, 44, 44);
}

#cart-total:hover {
    color: rgb(255, 44, 44);
}

/* SEARCH BAR */

.search-container {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff00;
    display: none;
}

.search .wrapper {
    width: 68%;
    /* height: 50vh; */
    margin: 2% auto;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: var(--bx-shadow);
    padding: 1.3rem 0;
}

.search-box {
    width: 90%;
    margin: 0 auto 6px auto;
    border: 1px solid #33333320;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-box:hover {
    border: 1px solid #28500060;
}

.search-box:focus-within {
    border: 1px solid #28500060;
}

#search-input {
    width: 90%;
    height: 100%;
    padding: 14px 8px;
    outline: transparent;
    border: transparent; 
    caret-color: #285000;
}

.clear-search {
    padding: 0 10px;
    cursor: pointer;
}

#search-input::placeholder {
    color: #33333390;
}

.search-icon {
    padding: 10px 6px 10px 10px;
    font-size: 20px;
    color: #285000;
}

.search .result-box {
    width: 90%;
    max-height: 48vh;
    margin: 19px auto;
    padding: 0 2%;
    overflow-y: scroll;
}

.search .result-box::-webkit-scrollbar{
    display: none;
}

.search .result-box img {
    margin-right: 20px;
}

.search .result:hover {
    cursor: pointer;
    color: #285000;
}

.hide-result-box {
    display: none;
}

.search .see-more {
    width: 90%;
    margin: 0 auto;
    padding: 12px 10px 10px;
}

.search .see-more a {
    font-size: 14px;
    color: #285000;
    /* font-style: italic; */
}

.search-subheading {
    color: #33333340;
    margin-bottom: 16px;
    margin-left: -10px;
}

.search .result {
    width: 100%;
    display: flex;
    align-items: center;
    /* background-color: #28500020; */

}

.search .text-box {
    margin-left: 2px;
}

.search .result img{
    width: 94px;
    height: 94px;
}

.search .result h6 {
    font-size: 15px;
    /* padding-top: 14px; */
}

.search .result p {
    font-size: 13px;
}

/* - PAGE WRAP */

.wrap-page {
    max-width: 1560px;
    margin: 0 auto;
}

/* - HERO SECTION */

.hero-contents {
    width: 100%;
    height: 100vh;
    background-image: url(../Images/test-hero8.jpg);
    background-position: center;
    background-size: cover;
}

.opacity {
    width: 100%;
    height: 100%;
    background-color: #00000010;
}

.hero-contents .container {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-contents h1 {
    font-size: 58px;
    /* color: #336600; */
    margin-top: 100px;
    padding-top: 30px;
    color: #fff;
    letter-spacing: 0.01em;
    text-transform: capitalize;
}

.hero-contents p {
    font-size: 20px;
    margin-bottom: 30px;
    /* color: #336600; */
    color: #fff;
    text-align: center;
    text-transform: capitalize;
}

.hero-cta a {
    margin: 0 14px;
}

.hero-cta .primary-cta {
    background-color: var(--roti);
}

.hero-cta .primary-cta:hover {
    color: #fff;
    background-color: #285000;
}

/* FOUNDER VIDEO */

.founder-video {
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    transition: 0.3s ease;
    display: none;
}

/* .founder-video iframe {
    margin-top: -2%;
} */

/* .section-two .image-box {
    display: flex;
    align-items: center;
    justify-content: center;
} */

/* FOR MOBILE */
.founder-video-link {
    width: 100%;
    height: 20vh;
    /* background-color: #28500030; */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    display: none;
}

.founder-video-link-about {
    width: 100%;
    height: 20vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    background-color: #28500010;
    /* display: none; */
}

#enter-founder-mobile-btn {
    font-size: 32px;
    margin-bottom: 13px;
    cursor: pointer;
}

.video-play-btn {
    opacity: 0.5;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0,0,0,0.5); */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.video-play-btn:hover {
    opacity: 1;
    transition: background-color 0.3s ease;
    background-color: rgba(0,0,0,0.2);
}

.video-play-btn:not(:hover) {
    transition: opacity 0.3s ease;
    transition: background-color 0.5s ease;;
}


.video-play-btn i {
    font-size: 42px;
    color: var(--cream);
    cursor: pointer;
}

.founder-icon-box {
    align-self: self-end;
    /* background-color: #285000; */
    height: 15%;
    margin-right: 40px;
    box-sizing: border-box;
    padding-top: 40px;
}

#xmark-btn{
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#xmark-btn i{
    font-size: 24px;
    color: #d6d5d5;
}

/* ****** Company Profile **** */

.company {
    margin-top: -180px;
    margin-bottom: 42px;

}

.company .row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.company .col-4 {
    margin: 0 2%;
    padding: 2rem 0;
    flex: 1 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ffffff20;
    border: 2px solid #33660060;
    box-shadow: var(--bx-shadow);
}

.company .col-4 .data {
    font-size: var(--txt-subheadding);
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--cream);
    letter-spacing: 0.05em;
}

.company .col-4 {
    color: var(--cream);
    font-size: var(--txt-subtitle);
}

/* - SECTION TWO - ABOUT SUMMARY */

.section-two {
    width: 100%;
    padding: 5rem 0 4rem 0;
}

.section-two .image-box {
    width: 46%;
    height: 40vh;
    /* height: 40vh; */
    border-radius: 10px;
    align-self: flex-start;
    background-image: url(../Images/about-1.png);
    background-size: cover;
    background-position: center;
}

.section-two .text-box {
    width: 49%;
}

.section-two .text-box h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
}

.section-two .text-box p {
    margin-bottom: 42px;
}

/* - SECTION THREE - PRODUCTS */

.section-three {
    width: 100%;
    padding: var(--pad-4) 0;
    text-align: center;
    position: relative;
}

.section-three h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    text-transform: capitalize;
}

.section-three h4 {
    font-size: var(--txt-subtitle);
    font-weight: 500;
    margin-bottom: 14px;
}

.section-three p {
    width: 615px;
    margin: 0 auto 52px auto;
}

.section-three .row {
    flex-wrap: wrap;
    margin-bottom: 6.25rem;
}

.section-three .col-3 {
    width: 25.3%;
    margin: 0 1.5rem;
    flex: 1 0 20%;
    background-color: #CC993303;
    /* background-color: #28500010; */
    /* background-color: #28500020; */
    border-radius: 10px;
}

.float-vector {
    position: absolute;
    right: 0;
    top: 0;
    width: 10rem;
    /* opacity: 0.; */
}

.section-three .col-3 a {
    color: inherit;
}

.section-three .image-box {
    transform: scale(0.8);
    width: 100%;
    height: 40vh;
}

.section-three .image-box:hover {
    transform: scale(0.9);
    transition: 0.3s ease;
}

.section-three .image-box:not(:hover) {
    transition: 0.3s ease;
}

.section-three .text-box {
    width: 100%;
    /* margin-top: 1rem; */
}

.section-three .peanut .image-box {
    background-image: url(../Images/swn-peanut-cat-2.png);
    background-size: cover;
    background-position: center;
}

.section-three .honey .image-box {
    background-image: url(../Images/swn-honey_cat.png);
    background-size: cover;
    background-position: center;
}

.section-three .peanut-honey .image-box {
    background-image: url(../Images/honey-spread-cat-2.png);
    background-size: cover;
    background-position: center;
}

.section-three .peanut-honey span {
    float: right;
    margin: 8px 8px 0 0;
    color: #fff;
    padding: 4px 10px;
    border-radius: 10px;
    background-color: #B11515;
}

.section-three .line {
    width: 20%;
    margin: 0 auto 16px auto;
    height: 4px;
    border-top: 4px solid var(--brown);
    overflow: hidden;
}

.section-three .peanut:hover,
.section-three .honey:hover,
.section-three .peanut-honey:hover {
    cursor: pointer;
    border: 1px solid var(--bilbao);
    border-radius: 10px;
    box-shadow: var(--bx-shadow);
    transform: scale(0.95);
    transition: 0.3s ease;
}

.section-three .peanut:not(:hover),
.section-three .honey:not(:hover),
.section-three .peanut-honey:not(:hover) {
    transition: 0.3s ease;
}

/* - SECTION FOUR - DISCOVER */

.section-four {
    width: 100%;
    padding: var(--pad-4) 0;
    text-align: center;
}

.section-four .image-box {
    width: 46%;
    height: 40vh;
    border-radius: 10px;
    align-self: flex-start;
    background-image: url(../Images/discover-1.png);
    background-size: cover;
    background-position: center;
}

.section-four .text-box {
    width: 49%;
    text-align: left;
}

.section-four .text-box h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    text-transform: capitalize;
}

.section-four .text-box p {
    margin-bottom: 42px;
}

/* - SECTION FIVE - TESTIMONIALS */

.section-five {
    width: 100%;
    padding: var(--pad-4) 0;
    text-align: center;

}

.section-five h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    text-transform: capitalize;
}

.section-five .row {
    margin-bottom: 5rem;
}

.section-five .col-3 {
    width: 32%;
    box-shadow: var(--bx-shadow);
    align-self: flex-start;
    margin: 0 2%;
    padding: 30px;
    flex: 1 0 20%;
    /* background-color: #F4F2EC; */
    background-color: #CC993310;
    border-radius: 10px;
}

.section-five i {
    font-size: 30px;
    color: var(--bilbao);
    margin-bottom: 16px;
}

.section-five .subtitle {
    width: 615px;
    margin: 0 auto 52px auto;
}

.section-five h4 {
    margin-top: 28px;
    letter-spacing: 0.02em;
}

.section-five .slider-nav {
    width: 80px !important;
    margin: 0 auto 0 auto;
}

.section-five .slide-indicator {
    width: 29%;
    border: 3px solid #D9D9D9;
    border-radius: 40px;
}

.section-five .disabled {
    border-color: #efefef;
}

.section-five .disabled:hover {
    cursor: not-allowed;
}

/* - SECTION SIX - BLOG */

.section-six {
    background-color: #33660003;
    width: 100%;
    padding: 4rem 0 8rem 0;
    text-align: center;
}

.section-six h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    text-transform: capitalize;
}

.section-six .row {
    width: 98%;
    margin: 0 auto 0 auto;
    margin-bottom: 14px;
}

.section-six .subtitle {
    width: 670px;
    margin: 0 auto 52px auto;
}

.section-six .col-3 {
    width: 31%;
    text-align: left;
    align-self: flex-start;
    /* cursor: pointer; */
    border-radius: 10px;
    box-shadow: var(--bx-shadow);
}

.section-six .image-box {
    width: 100%;
    height: 25vh;
    margin-bottom: 1.5rem;
    border-radius: 10px 10px 0 0;
}

.section-six .text-box {
    padding: 0 20px 20px 20px;
}

.section-six .recipe-1 {
    background-image: url(../Images/recipe-1.jpg);
    background-size: cover;
    background-position: center;
}

.section-six .recipe-2 {
    background-image: url(../Images/recipe-2.jpg);
    background-size: cover;
    background-position: center;
}

.section-six .recipe-3 {
    background-image: url(../Images/recipe-3.png);
    background-size: cover;
    background-position: center;
}

.section-six .line {
    width: 20%;
    height: 30px;
    border-top: 4px solid var(--brown);
    overflow: hidden;
}

.section-six h6 {
    margin-bottom: 13px;
}

.section-six h3 {
    margin-bottom: 13px;
}

.section-six .blog-summary {
    margin-bottom: 13px;
}

.section-six a {
    padding: 10px 20px;
}

/* - FOOTER */

footer {
    padding: 3rem 0 0 0;
    background-color: #336600;
}

footer li {
    list-style: none;
    margin-bottom: 22px;
}

footer .row {
    margin-bottom: 7.2rem;
}

footer h4 {
    font-size: 20px;
    font-weight: 450;
    margin-bottom: var(--marg-2);
}

footer .col-4 {
    align-self: flex-start;
    color: var(--offset)
}

footer .footer-link {
    text-decoration: none;
    color: var(--cream);
}

footer #copy {
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 6px 0;
    text-transform: capitalize;
}

/*  */

/* ###### 2. PRODUCT PAGE ###### */
.page-banner {
    width: 100%;
    height: 32vh;
    margin-top: 2rem;
    background-image: url(../Images/countryside-woman-out-field.jpg);
    /* background-image: url(../Images/banner_1.jpg); */
    /* background-image: url(../Images/banner_new.jpg); */
    /* background-image: url(../Images/banner-2.jpg); */
    background-position: top;
    background-size: cover;
}

.page-banner .opacity {
    width: 100%;
    height: 100%;
    background-color: #00000067;
    /* background-color: #00000050; */
}

.page-banner .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page-banner h1 {
    font-size: 48px;
    padding-top: 5rem;
    margin-bottom: 12px;
    color: #fff;
    letter-spacing: 0.01em;
    text-transform: capitalize;
    /* color: #336600; */
}

.bread-crumbs li {
    list-style: none;
    display: inline;

}

.bread-crumbs a {
    color: var(--offset);
    text-decoration: none;
}

.bread-crumbs .bc-divider {
    color: var(--offset);
    margin: 0 4px;
}

.bc-active-page-title {
    text-transform: capitalize;
}

/* - PRODUCT - PEANUT BUTTER */

.product-sect {
    width: 100%;
    text-align: center;
    padding: var(--marg-4) 0;
}

.product-sect .row {
    width: 98%;
    margin: 0 auto 0 auto;
    margin-bottom: 14px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.pg-sect-heading {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    text-transform: capitalize;
}

.pg-sect-subtext {
    width: 670px;
    margin: 0 auto 52px auto;
}

/* Style product cards */
.product {
    max-width: 340px;
    flex: 0 1 340px;
    align-self: flex-start;
    cursor: pointer;
    padding: 24px;
    position: relative;
    /* padding: 10px 20px 18px 20px; */
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid #28500010;
    /* background-color: #99663320; */
    /* box-shadow: var(--bx-shadow); */
}

.product:hover {
    box-shadow: var(--bx-shadow);
}

/* .product:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} */

.product .image-box img {
    transition: transform 0.3s ease;
}

/* .product:hover .image-box img {
    transform: scale(1.05);
} */

.product .image-box {
    width: 100%;
    min-height: 26vh;
    overflow: hidden;
    margin-bottom: 1.5rem;
    object-fit: cover;
}

.product .image-box img {
    aspect-ratio: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 auto;
}

/* .product .text-box {
    padding: 0 20px 20px 20px;
} */

.product h3 {
    text-transform: capitalize;
}

.product p {
    margin: 16px 0 12px 0;
}

.product button {
    cursor: pointer;
    border: none;
    width: 100%;
}

.product .qty-selector {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.7rem 2px;
    margin-top: 16px;
    max-height: 48px;
    border: 1px solid var(--bilbao);
}

.product i {
    color: var(--bilbao);
    padding: 8px 12px;
}

.product .quantity {
    font-weight: bold;
    margin: 0 20%;
}

/* ###### 3. SINGLE PRODUCT PAGE - ITEM.HMTL ###### */

.pg3-section-two {
    width: 100%;
    padding-top: 6.5rem;
}

.pg3-section-two h1 {
    font-size: 36px;
    color: var(--bilbao);
    text-transform: capitalize;
    margin-bottom: 12px;
}

.pg3-section-two h4 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;
}

.pg3-section-two .image-gallery {
    width: 55%;
    padding-right: 5%;
    /* background-color: #996633; */
    align-self: flex-start;
}

.pg3-section-two #co-main-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #336600; */
}

.pg3-section-two img {
    width: 80%;
}

/* .pg3-section-two #co-thumbnails{
        width: 100%;
        height: 10vh;
        background-color: #464646
    } */
.pg3-section-two .rating-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 6px 0;
}

.pg3-section-two .reviews-link {
    text-decoration: none;
    color: #33660080;
    margin-left: 8px;
}

.pg3-section-two .star-ico {
    font-size: 18px;
    margin: 0 2px;
    color: var(--roti);
}

.rating-bar .review-star {
    opacity: 0.2;
}

.pg3-section-two .star-active {
    color: var(--roti);
}

/* BEGIN REVIEW MODULE STYLES */

#tab2 .wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    /* background-color: red; */
}

#tab2 .review-summary {
    padding: 0 10px;
    border-bottom: 1px solid #80808020;
}

.write-review-link {
    width: -moz-fit-content;
    width: fit-content !important;
}

.review-summary h6 {
    font-size: 16px;
    margin-bottom: 16px;
}

.review-summary h4 {
    font-size: 28px;
    color: var(--bilbao);
    margin-bottom: 2px;
}

.review-summary p {
    margin-top: 12px;
    color: #333333;
}

.review-summary .review-star {
    font-size: 22px;
    color: #28500020;
}

.review-summary .review-star-active {
    color: #285000;
}

#tab2 .write-review-link-box {
    text-align: right;
    float: right;
    /* background-color: #000; */
}

#tab2 .review-body {
    width: 80%;
    margin: 0 0 0 auto;
}

.hide-product-review-summary {
    /* opacity: 0 !important; */
    display: none;
}

/* Begin individual review styles */

.review-contents {
    padding: 2rem 0;
    /* background-color: #28500010; */
}

.review-contents .review-star {
    font-size: 20px;
    color: var(--roti);
    /* opacity: 0.09; */
}

/* .rv-star-1 {
    opacity: 0.5;
} */

.review-contents .active-star-review {
    opacity: 1 !important;
}

.review-contents .author-box h4 {
    font-size: 17px;
    margin-top: 16px;
}

.review-contents .author-box p,
.review-contents .comment-box p {
    font-size: 15px;
}

.review-contents .comment-box h6 {
    font-size: 16px;
    margin-bottom: 14px;
}

.review-contents .comment-box p {
    margin-bottom: 20px;
}

.review-contents .comment-box a {
    text-decoration: none;
    color: var(--bilbao);
}

.review-contents .comment-box i {
    margin-right: 4px;
}

.review-contents .author-box {
    /* background-color: aqua; */
}

.review-contents .comment-box {
    width: 70%;
    display: flex;
    flex-direction: column;
    /* background-color: aquamarine; */
}

.review-contents .author-box {
    flex: 1 0 200px;
}

.review-item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 14px 10px 20px 0;
    border-bottom: 1px solid #80808020;
}

.hide-review-message {
    display: none;
}

/* END */

/* BEGIN RATING FORM */

.rate-product-container.rate-product-active {
    display: block;
    transition: display 0.3s ease-in;
}

.rate-product-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 6rem 0;
    background-color: #ffffff;
    display: none;
    transition: display 0.3s ease-in;
    /* height: 100vh; */
}

.rate-product-container .action-btn input {
    border-radius: 20px !important;
}

.rate-product-container .wrapper {
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* background-color: #CC993310; */
}

.review-loader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.rate-product-container .wrapper .headline h2 {
    margin-bottom: 6px;
}

.rate-product-container .wrapper .headline {
    margin-bottom: 3.2rem;
    text-align: center;
}

.rate-product-container .review-star {
    opacity: 0.25;
    color: var(--roti);
    padding: 0 12px;
    margin: 0 -6px;
    font-size: 32px;
    /* background-color: #285000; */
    /* color: #CC993340; */
}

.rate-product-container .star-feedback {
    display: none;
    margin-bottom: 8px;
}

#form-review-title:focus-within,
#form-review-details:focus-within {
    font-size: 15px;
}

#form-review-details {
    resize: none;
}

.active-star {
    opacity: 1 !important;
    transform: opacity 0.3s ease;
}

/* STAR HIGHLIGH LOGIC */

/* .star-box .star-5:hover ~ .star-4 {
    opacity: 1;
} */

.hoveredStar {
    opacity: 1 !important;
    transform: opacity 0.3s ease;
}

/*  */

.rate-product-container .review-star:hover {
    color: var(--roti);
}

.rate-product-container .wrapper .star-box {
    margin: 1.2rem 0 1rem 0;
    cursor: pointer;
    /* background-color: #285000; */
}

.rate-product-container .wrapper .product-box {
    width: 60%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: red; */
}

.rate-product-container .product-box img {
    width: 190px;
} 

.rate-product-container .product-box h3 {
    margin-bottom: 12px;
}

.rate-product-container .review-form {
    width: 80%;
    text-align: left;
    /* background-color: aqua; */
}

.rate-product-container .review-form input,
.rate-product-container .review-form textarea {
    width: 100%;
    border: 1px solid #28500050;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 10px 0 12px 0;
    font-size: 16px;
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

.rate-product-container .review-form input:focus-within,
.rate-product-container .review-form textarea:focus-within {
    caret-color: #28500090;
    outline: none;
    border: 2px solid #285000;
    border-radius: 4px;
}

.rate-product-container .review-form input[type=button] {
    cursor: pointer;
    outline: none !important;
    border: transparent !important;
}

.rate-product-container .review-form .action-btn {
    margin-top: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

/* END */

.pg3-section-two .text-box {
    width: 45%;
    align-self: flex-start;
}

.pg3-section-two .action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 1.5rem 0 16px 0;
}

.pg3-section-two .action-bar i {
    cursor: pointer;
}

.pg3-section-two .primary-cta {
    width: 70%;
    text-align: center;
}

.pg3-section-two .qty-selector {
    width: 25%;
    margin-right: 16px;
    padding: 0.7rem 12px;
    border: 1px solid var(--bilbao);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pg3-section-two .line {
    width: 100%;
    margin: 2rem 0;
    border: 1px solid #33660020;
}

.pg3-section-two #delivery-info {
    /* font-style: italic; */
    color: #333;
}

.pg3-section-two .bread-crumbs {
    margin-top: 16px;
    /* margin-left: 1%; */
    /* position: absolute; */
}

.pg3-section-two .bread-crumbs-links,
.pg3-section-two .bc-divider {
    color: #4f4f4f;
    font-size: 14px;
}

/* tabs */
.tab-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 0 2rem 0;
}

.tab-buttons {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
    border: 1px solid #b7b7b770;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tab-button {
    border: none;
    background: transparent;
    background-color: #fff;
    color: #333;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 2px;
}

.tab-button.active {
    border: 1px solid #80808070;
    background-color: #fff;
    border-bottom: none;
    font-weight: 500;
}

.tab-panel {
    display: none;
    padding: 20px;
}

.tab-panel.active {
    display: block;
}

.tab-heading {
    margin-bottom: 14px;
    line-height: 30px;
}

.tab-feature {
    margin: 0 2% 8px 2%;
    color: #333;
    line-height: 30px;
}

/*** Related Products ***/

.related-products .container {
    text-align: center;
    padding: 3rem 0 4rem 0;
}

.related-products .image-box {
    width: 100%;
    height: fit-content;
    /* margin-bottom: 1.5rem; */
}

.related-products img {
    width: 90%;
}

/* ###### 3. CART PAGE ###### */
.cart {
    padding-top: 6rem;
}

.cart .container {
    background-color: #fff;
    /* margin: 1% 0; */
    padding: 2% 2%;
}

.cart h1 {
    /* margin-top: 2rem; */
}

.cart h4 {
    font-weight: 5050;
}

.cart .headline {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart .headline a {
    width: 40%;
    text-align: right;
    color: var(--brown);
}

.cart .headline h1 {
    width: 60%;
    text-align: left;
}

.cart .row {
    /* flex-direction: column; */
    margin-bottom: 2rem;
    align-items: flex-start;
}

.cart .item {
    display: flex;
}

.cart .line {
    width: 100%;
    margin: 2rem 0;
    border: 1px solid #33660020;
}

.cart .item-list {
    width: 75%;
    padding-right: 2rem;
}

.cart .item-list a {
    /* text-decoration: none; */
    color: #B11515;
}

.cart-summary {
    width: 25%;
    position: sticky;
    top: 15%;
}

.cart-summary-data {
    margin: 16px 0 16px 0;
}

.cart table {
    width: 100%;
}

.cart a {
    width: 100%;
    text-align: center;
}

.cart .qty-selector {
    width: 100%;
    padding: 0.4rem 2px;
    margin-top: 8px;
    margin-bottom: 12px;
    border: 1px solid var(--bilbao);
    text-align: center;
}

.cart .qty-selector i {
    padding: 0 4px;
}

.cart .text-box {
    margin-left: 2%;
}

.cart .text-box span {
    padding: 0 8%;
}

.cart #lock-ico {
    margin-right: 4px;
}

.cart .pad-top {
    padding-top: 4%;
}

.cart #add-coupon {
    color: #33660080;
}

.cart .cart-msg {
    width: 100%;
    text-align: center;
    margin-bottom: 24vh;
    /* background-color: #285000 !important; */
}

.cart .cart-msg h2 {
    margin-bottom: 12px;
}

.cart .cart-msg a {
    background: none;
    color: #336600;
    /* font-size: 30px; */
}

#checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#checkout-page {
    scroll-behavior: smooth;
}

.btn-loader {
    pointer-events: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    animation: circle_spin 5s ease infinite;
}

@keyframes circle_spin {
    0% {
        transform: rotate(0turn);
    }

    100% {
        transform: rotate(3turn);
    }
}

.cart .item .qty-selector {
    width: 10rem;
}

.cart .item i {
    cursor: pointer;
}

#remove-item-btn {
    background: transparent;
    text-decoration: underline;
    outline: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #B11515 !important;
}


/* ###### 4. CHECKOTU PAGE ###### */

.checkout {
    padding: 6rem 0 2rem 0;
}

.checkout .container {
    width: 80%;
    /* color: #336600; */
}

.checkout .progress {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4% 0 2% 0;
    position: sticky;
    top: 10%;
    z-index: 99;
    background-color: #F3F1EE;
}

.checkout .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 16px;
}

.checkout .step {
    /* color: #33333350; */
    color: #33660040;
    font-size: 14px;
}

.checkout .step-active {
    /* color: #333333; */
    color: #336600;
}

.checkout .line {
    width: 10%;
    height: 1px;
    background-color: #33333350;
}

/*  */
.checkout .row {
    margin-top: 1rem;
    justify-content: space-evenly;
    position: relative;
}

.checkout .form {
    width: 60%;
}

.checkout h2 {
    margin-bottom: 12px;
    text-transform: capitalize;
    font-size: 24px;
    color: #336600;
}

.checkout p {
    margin-bottom: 12px;
}

.checkout label {
    font-size: 14px;
}

.checkout input,
.checkout select {
    width: 100%;
    margin: 4px 0 12px 0;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #33333350;
}

.checkout input:focus {
    border: 1px solid #336600;
    outline: #336600;
}

.checkout .cart-summary {
    width: 30%;
    padding: 2rem;
    align-self: flex-start;
    box-shadow: var(--bx-shadow);
    background-color: #fff;
    border-radius: 10px;
    position: sticky;
    top: 26%;
}

.checkout .disable-input {
    pointer-events: none;
    background-color: #33333310;
}

.checkout tr {
    width: 100%;
}

.checkout table {
    width: 100%;
}

.checkout .input-group {
    padding: 2rem;
    margin: 0 0 1.5rem 0;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: var(--bx-shadow);
    opacity: 0.5;
    pointer-events: none;
}

.checkout .active-group {
    opacity: 1;
    pointer-events: auto;
}

.checkout .pad-top {
    padding-top: 4%;
    /* font-weight: 500; */
    /* color: var(--roti) !important; */
}

.checkout .mg-top {
    margin: 16px 8px 0 0;
}

#place-order-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.checkout .place-order-btn {
    width: 100%;
    text-align: center;
    opacity: 0.5;
    pointer-events: none;
}

.place-order-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.checkout .al-right {
    text-align: right;
    font-weight: 500;
    /* color: #996633 !important; */
}

.checkout .light {
    color: #333333;
}

.checkout .secondary-cta {
    padding: 8px 32px;
}

.checkout span {
    color: red;
}

/* Email Error */
.input-error {
    border: 1px solid red !important;
}

/* Thank You Page */

.pg-thank-you {
    width: 100%;
    padding-top: 12rem;
}

.pg-thank-you .wrapper {
    margin: 0 auto;
    width: 60%;
    padding: 2rem 5rem 4rem 5rem;
    text-align: center;
    border-radius: 10px;
    box-shadow: var(--bx-shadow);
    background-color: #fff;
}

.pg-thank-you i {
    color: #56ab0090;
    font-size: 48px;
    margin-bottom: 17px;
}

.pg-thank-you p {
    margin-bottom: 24px;
}

.pg-thank-you .wrapper a {
    text-transform: capitalize;
    color: #353535;
}

/******* LOGIN PAGE ******/

.login-pg,
.signup-pg {
    position: relative;
}

.login-pg .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 800px;
    padding: 4.6rem 0;
    margin: 0 auto;

    animation: fadeIn 0.3s ease-out forwards;
}

.login-pg h1 {
    color: var(--bilbao);
    font-size: 24px;
}

.login-pg .image-box {
    margin-bottom: 3rem;
}

.login-form,
.signup-form {
    width: 50%;
    text-align: center;
}

.login-pg label,
.signup-pg label {
    color: #353535;
    font-size: 13px;
    letter-spacing: 0.03em;
    float: left;
}

.login-pg .form-input {
    width: 100%;
    height: 42px;
    border: 1px solid #33660092;
    border-radius: 4px;
    margin: 6px 0 22px 0;
    padding: 2px 0px 2px 12px;
    caret-color: var(--bilbao);
}

.login-pg .form-input:focus {
    outline: none;
}

.login-btn {
    width: 100%;
    border: none;
    margin: 16px 0 26px 0;
    display: inline-block;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-pg .create {
    text-align: center;
}

.create .logsign-link {
    color: #336600;
    display: inline-block;
    margin-bottom: 12px;
}

.login-pg .create a {
    color: #353535;
}

/* Sign Up page */

.signup-pg .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 800px;
    padding: 4rem 0;
    margin: 0 auto;

    animation: fadeIn 1s ease-out forwards;
}

.signup-pg .image-box {
    margin-bottom: 1rem;
}

.signup-pg h1 {
    color: var(--bilbao);
    margin-bottom: 12px;
    font-size: 24px;
}

.signup-pg .form-input {
    width: 100%;
    height: 40px;
    border: 1px solid #33660092;
    border-radius: 4px;
    margin: 6px 0 22px 0;
    padding: 2px 0px 2px 12px;
    caret-color: var(--bilbao);
}

.signup-pg .form-input:focus {
    outline: none;
}

#signup-btn {
    margin: 30px 0 2rem 0;
    cursor: pointer;
}

.signup-pg .create a {
    color: #353535;
}

/* ABOUT US */

.ab-section-two {
    padding: 4rem 0 6rem 0;

}

.ab-section-two .vision {
    text-align: center;
    width: 60%;
    margin: 0 auto;
}

.ab-section-two h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    text-transform: capitalize;
}

.vision p {
    margin: 16px 0 2rem 0;
}

.ab-section-three {
    padding: 0 0 5rem 0;
}

.ab-section-three .text-box {
    width: 54%;
    padding-right: 5%;
}

.ab-section-three h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    /* text-transform: capitalize; */
    margin-bottom: 16px;
    align-self: flex-start;
}

.ab-section-three .image-box {
    width: 46%;
    height: 50vh;
    align-self: flex-start;
    border-radius: 10px;
    background-image: url(../Images/sir-will-about.jpg);
    background-size: cover;
    background-position: top;
    opacity: .98;
}

/* CONTACT PAGE */

.contact-page-section-one {
    background-color: #285000;
    /* height: 100vh; */
    background-image: url(../Images/banner-2.jpg);
    background-position: top;
    background-size: cover;
    padding-bottom: 4rem;
}

.contact-page-section-one .page-banner {
    background: transparent;
    /* width: 100%;
    height: 32vh; */
    /* background-image: url(../Images/banner-2.jpg);
    background-position: top;
    background-size: cover; */
}

.contact-page-section-one .opacity {
    width: 100%;
    height: 100%;
    background-color: #00000010;
}

.pg-contact-us .container {
    width: 52%;
    margin: 0 auto;
    padding: 4rem 7rem;
    /* border: 1px solid #ffffff40; */
    /* background-color: #ffffff75; */
    background-color: #33660030;
    background-color: #00000020;
    border-radius: 10px;
}

.pg-contact-us h2 {
    font-size: 42px;
    color: var(--bilbao);
    text-transform: capitalize;
    margin-bottom: 32px;
    text-align: center;
}

.pg-contact-us label {
    color: #fff;
}

.pg-contact-us .cf-input {
    width: 100%;
    font-size: 16px;
    height: 40px;
    border: transparent;
    background-color: #ffffff70;
    border-radius: 4px;
    margin: 6px 0 22px 0;
    padding: 2px 0px 2px 12px;
    caret-color: var(--bilbao);
}

.pg-contact-us textarea {
    width: 100%;
    font-size: 16px;
    /* border: 1px solid #488f0092; */
    /* background-color: #99663308; */
    background-color: #ffffff70;
    border-radius: 4px;
    margin: 6px 0 22px 0;
    padding: 8px 0px 2px 12px;
    caret-color: var(--bilbao);
}

.pg-contact-us .cf-input:hover,
.pg-contact-us textarea:hover {
    background-color: #ffffffff;
}

.pg-contact-us .cf-input:focus,
.pg-contact-us textarea:focus {
    outline: none;
    border: 2px solid #488f0092;
    background-color: #ffffffff;
}

#cf-submit {
    border: transparent;
    cursor: pointer;
}

/* FAQ SECTION */

.faq {
    padding: 4rem 0;
}

.faq .container {
    width: 75%;
    margin: 0 auto;
}

.faq h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    text-transform: capitalize;
    margin-bottom: 2rem;
    text-align: center;
}

.faq i {
    padding: 0 8px;
    /* display: none; */
}

.faq .hide {
    display: none !important;
}

.faq .question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #336600;
    padding: 16px 0;
    margin-bottom: 8px;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}

.faq .answer {
    margin-bottom: 16px;
    display: none;
    height: 100px;
    /* transition: height 2.5s;           */
}

.faq .expand {
    display: block;
}

/* FAQ ACCORDION */
.faq-sect {
    padding: 4rem 0;
}

.faq-sect .container {
    width: 75%;
    margin: 0 auto;
}

.faq-sect h2 {
    font-size: var(--txt-subheadding);
    color: var(--bilbao);
    text-transform: capitalize;
    margin-bottom: 2rem;
    text-align: center;
}

#accordion li {
    list-style: none;
}

#accordion i {
    font-size: 16px;
    padding: 0 8px;
}

#accordion li label {
    font-size: var(--txt-lg-body);
    font-weight: 700;
    font-family: 'Roboto Slab', serif, Helvetica, sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #336600;
    padding: 16px 0;
    margin-bottom: 8px;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}

#accordion label+input[type="radio"] {
    display: none;
}

#accordion .aco-content {
    padding: 0 10px;
    line-height: 26px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
    /* margin-bottom: 16px; */
}

#accordion label+input[type="radio"]:checked+.aco-content {
    max-height: 400px;
}

#accordion .rotate {
    transform: rotate(180deg);
}

/* - DASHBOARD - */

.adm-container {
    width: 100%;
    height: 100vh;
    background-color: #F3F1EE60;
    display: flex;
    position: relative;
}

.adm-menu {
    width: 250px;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    bottom: 0;
    display: flex;
    flex-shrink: 0;
    z-index: 9999;
    justify-content: space-between;
    scroll-behavior: smooth;
    flex-direction: column;
    background-color: #3F5F20;
    box-shadow: var(--bx-shadow);
}

.adm-menu .adm-menu-wrapper {
    height: 100%;
    width: 100%;
    padding: 0 0 20px 16px;
    position: relative;
}

.adm-logout-btn .icon {
    margin-right: 8px;

}

.adm-logout-btn {
    width: 100%;
    color: #f8f6f4;
    padding: 16px 12px;
    position: absolute;
    bottom: 2rem;
    border-radius: 12px 0 0 12px;
    border-bottom: 1px solid #183b00;
}

.adm-menu-prop {
    width: 250px;
    height: 100%;
}

.adm-body {
    width: 90%;
    height: 100vh;
    padding-left: 10px;
    padding-bottom: 2%;
    position: relative;
    top: 0;
    right: 0;
    height: 100vh;
    overflow: hidden;
}

.adm-body .adm-copy {
    width: 100%;
    font-weight: 100;
    font-size: 1rem;
    border-top: 1px solid #00000010;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.adm-body .adm-copy a {
    text-decoration: none;
    color: #000;
}


.adm-body .adm-copy a:hover {
    color: var(--bilbao);
}

.adm-header {
    width: 100%;
    /* height: 8vh; */
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    position: sticky;
    top: 0;
    left: 0;
    background-color: #3F5F20;
}

/* ===================== */
/* ====== SIDEBAR ====== */
/* ===================== */

.adm-header #swn-logo {
    margin-right: 12px;
}

.adm-header h4 {
    font-size: 28px;
    font-weight: 700;
    color: #ffdb9b;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.adm-menu ul {
    list-style: none;
}

.adm-btn:hover {
    cursor: pointer;
    background-color: #ffffff30;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.adm-btn {
    text-decoration: none;
}

.adm-cat {
    margin: 5% 0 2% 0;
    font-size: 15px;
    color: #ffdb9b95 !important;
    border-bottom: 1px solid #F3F1EE10;
}

/* .adm-menu li {
    color: #f8f6f4;
    padding: 16px 12px;
    letter-spacing: 0.05em;
} */

.adm-link-active {
    color: #f8f6f4 !important;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: #F3F1EE60 !important;
}

.sub-nav-item.adm-link-active {
    background-color: #F3F1EE30 !important;
}

.menu-1 {
    margin-top: 10%;
    height: 100%;
}

.sub-navigation {
    margin: 1rem 0;
}

/* All items */
.sub-nav-item {
    color: #f8f6f4;
    text-decoration: none;
    padding: 16px 12px;
    letter-spacing: 0.05em;
}

.sub-nav-title {
    width: 100%;
    padding: 16px 12px;
    border-radius: 12px 0 0 12px;
    display: block;
    border-bottom: 1px solid #183b00;
}

.sub-nav-title.active {
    background-color: #183b00;
}

.sub-navigation-contents {
    list-style-type: none;
    margin-left: 8px;
    border-radius: 12px 0 0 12px;
    display: none;
    background-color: #285000;
    border-bottom: 1px solid #ffffff15;
}

#dashboard-btn {
    margin-bottom: 1rem;
}


.adm-page-headline {
    width: 100%;
    padding: 1rem 2rem;
    /* border-bottom: 4px solid #00000020; */
}

.adm-page-headline .title{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.new-order-alert {
    color: #fff;
    padding: 2px 8px;
    border-radius: 16px;
    font-size: 0.9rem;
    background-color: var(--red);
}

.adm-page-headline .adm-pg-title {
    margin-bottom: 1rem;
    color: var(--bilbao);
    /* font-size: 1rem; */
}

.adm-page-headline .row p {
    border-left: 4px solid #28500040;
    padding-left: 1rem;
}

/* .adm-page-headline h1 {
    margin-bottom: 8px;
} */

.adm-page-headline span {
    color: #B11515;
}

.adm-body .data-box {
    margin: 1rem 2rem 1rem;
    padding: 0;
    height: 60vh;
    overflow: auto;
    overflow-y: scroll;
    border-radius: 4px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.adm-body table {
    width: 100%;
    border-collapse: collapse;
    /* background-color: #ccc; */
    background-color: hsl(0, 0%, 80%);
    /* background-color: hsl(0, 0%, 78%); */
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

.adm-body table td,
.adm-body table th {
    height: 50px;
    padding: 10px 20px;
    border-bottom: 1px solid #33660010;
}

.adm-body table tr {
    cursor: default;
}

/* .adm-body table tr:hover {
    background-color: hsl(0, 0%, 68%);
} */

.adm-body tr:nth-child(odd) {
    background-color: #dddddd;
}

.adm-body .td-heading {
    position: sticky;
    top: 0;
    left: 0;
    background-color: #e3e3e3 !important;
}

.adm-body .td-heading th {
    font-weight: 800;
    font-size: 1rem;
    font-weight: 800;
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

.adm-body .order-status {
    width: 100%;
    outline: transparent;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

/*  */
.admin-disp-none {
    display: none;
}

.admin-active-tab {
    display: block;
}

.admin-link-disabled {
    opacity: 0.6 !important;
    background-color: none !important;
    cursor: default !important;
}

.adm-review-table {
    display: none;
    /* width: 100%; */
}

.adm-product-table {
    display: none;
}

.adm-orders-table {
    display: none;
}

.adm-review-table-active {
    display: table;
}

/* ==== TAB TITLE === */
.tab-title-container {
    padding: 1rem 2rem 2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #33660020;
}

.tab-title-container .cta-box {
    display: flex;
    gap: 1rem;
}

.tab-title-container .cta-box button {
    outline: none;
    border: none;
    cursor: pointer;
    font-size: large;
}

/* === ADMIN EDIT ORDER MODAL */

.adm-order-edit-form .wrapper {
    width: 80%;
    height: 60vh;
    margin: 0 auto;
    overflow: hidden;
    max-width: 920px;
    background-color: #fff;
}

.order-modal-data-container {
    width: 100%;
    height: 80%;
    overflow: auto;
    padding: 2rem;
    background-color: #fff;
}

.adm-order-edit-form .cta-box {
    padding: 0.5rem 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

/* === ADMIN PRODUCT MODAL === */
.admin-product-modal,
.adm-order-edit-form {
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    overflow: hidden;
    padding: 2rem 0;
    background-color: #00000097;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adm-company-title {
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}

.admin-product-modal .close-btn {
    border: none;
    outline: none;
    display: flex;
    border-radius: 8px;
    padding: 2px 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.close-btn {
    border: none;
    outline: none;
    display: flex;
    border-radius: 8px;
    padding: 2px 4px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background-color: white;
}

.admin-product-modal .wrapper {
    width: 80%;
    height: 90vh;
    margin: 0 auto;
    overflow: hidden;
    max-width: 920px;
    background-color: #fff;
}

.adm-modal-topbar {
    display: flex;
    padding: 8px 16px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bilbao);
}

.product-modal-data-container {
    width: 100%;
    height: 80%;
    overflow: auto;
    padding: 0 2rem 2rem;
    background-color: #fff;
}

.adm-modal-form .image-box {
    width: 100%;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.adm-modal-form .submit-cta-box {
    margin-top: 4rem;
    text-align: right;
}

.adm-modal-form .image-box img {
    width: 20%;
    aspect-ratio: 100%;
    margin: 1rem 0;
}

.adm-modal-form .image-box input {
    width: 100%;
    font-size: 16px;
    outline: none;
    text-transform: capitalize;
    border-radius: 4px;
    height: 38px;
    padding: 8px;
    border: 1px solid #33660020;
    margin-bottom: 2rem;
}

.adm-modal-form .input-group {
    margin-bottom: 1.5rem;
}

.adm-modal-form .input-group.product-description {
    padding-top: 1.5rem;
    border-top: 1px solid #00000020;
}

.adm-modal-form .input-group.upload-image {
    margin-bottom: 2rem;
}

.adm-modal-form .input-group label {
    font-weight: 500;
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
    display: inline-block;
    margin-bottom: 0.7rem;
}

.adm-modal-form .adm-form-input {
    width: 100%;
    font-size: 16px;
    outline: none;
    text-transform: capitalize;
    height: 38px;
    padding: 8px 0px 8px 8px;
    border: 1px solid #00000020;
    background-color: #00000008;
    border-top: none;
    border-left: none;
    border-right: none;
    caret-color: var(--bilbao);
}

.adm-modal-form .adm-form-input:focus-within {
    border: 2px solid #4c9f00;
    background-color: #00000006;
}

.adm-modal-form .adm-form-text-area:focus-within {
    border: 2px solid #4c9f00;
}

.adm-modal-form .adm-form-text-area {
    width: 100% !important;
    font-size: 16px;
    outline: none;
    height: 100px;
    min-height: 100px;
    padding: 8px 0px 8px 8px;
    border: 1px solid #00000020;
    background-color: #00000008;
    border-top: none;
    border-left: none;
    border-right: none;
    caret-color: var(--bilbao);
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

.adm-modal-form .input-group.x2-col {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}

.adm-modal-form .input-group.x2-col .col-2 {
    width: 50%;
    border-color: red;
}

.adm-modal-form-title {
    padding: 1rem 2rem; 
    text-align: center;
    border-bottom: 1px solid #00000020;
}

.adm-modal-form-title span {
    font-weight: 500;
    padding-right: 1.2rem;
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

/* Btns */
.adm-update-product,
.adm-save-product {
    display: none;
    outline: none;
    border: transparent;
    cursor: pointer;
}

/* === Prelodaer === */

.preloader {
    display: none;
    width: 100%;
    height: 100%;
    background-color: #00000097;
    position: absolute;
    z-index: 99999999;
    align-items: center;
    justify-content: center;
}

.preloader-wrapper {
    padding: 22px 44px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}

.not-vissible {
    opacity: 0 !important;
}

.preloader-message {
    width: 100%;
    margin-top: 0.5rem;
    text-align: center;
}

.preloader.show {
    display: flex;
}

.data-loader {
    display: none;
    background-color: #ccc;
}

.data-loader.show {
    display: flex;
}

.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #4c9f00;
    /* background: #25b09b; */
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

.loader-2 {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #4c9f00;
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
}

@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

/* Btns */
.adm-save-product.visible {
    display: inline !important;
}

/* Btns */
.adm-update-product.visible {
    display: inline !important;
}

.adm-modal-form .cta-box button {
    border: none;
    outline: none;
    cursor: pointer;
}

.adm-hide-modal {
    display: none;
}

.action-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.align-right {
    text-align: right;
}

.adm-body .table-btn {
    outline: none;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1rem;
}

.adm-body .secondary-cta {
    border-radius: 6px;
    padding: 12px 24px;
    color: #4D9900;
    background-color: #FAFAF9;
    border: 1px solid var(--bilbao) !important;
}

.adm-body .secondary-cta:hover {
    background-color: #4D990010 !important;
}

.adm-body .primary-cta {
    border-radius: 6px;
    padding: 12px 24px;
    background-color: #4D9900 !important;
}

.adm-body .primary-cta:hover {
    background-color: hsl(100, 40%, 40%) !important;
}

.details-modal .primary-cta {
    border-radius: 6px;
    padding: 12px 24px;
    background-color: #4D9900 !important;
}

.details-modal .primary-cta:hover {
    background-color: hsl(100, 40%, 40%) !important;
}

.details-modal .secondary-cta {
    border-radius: 6px;
    padding: 12px 24px;
    /* background-color: #4D9900 !important; */
}

.adm-body .table-btn.delete {
    background-color: #ff2727;
    color: #ffffff;
}

.adm-body .table-btn.delete:hover {
    background-color: hsl(0, 100%, 48%);
}

.adm-body .table-btn.edit {
    color: #ffffff;
    background-color: #4D9900;
    /* background-color: #336600; */
}

.adm-body .table-btn.edit:hover {
    background-color: hsl(100, 40%, 45%);
}

.adm-body table td {
    font-size: 1rem;
    text-transform: capitalize;
}

.tab-title {
    font-size: 1.3rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

.tab-title .icon-svg {
    display: flex;
    margin: 0 8px;
    align-items: center;
    justify-content: center;
}

.adm-tab-current-page {
    text-transform: capitalize;
    font-weight: 500;
    color: #000;
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
}

/* ADMIN REVIEWS DETAILS MODAL */

.adm-review-details {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #00000097;
    z-index: 999999;
}

.adm-review-details .cta-box {
    margin-top: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adm-review-details .cta-box a {
    margin: 20px 10px !important; 
}

#accept-review-btn,
#reject-review-btn {
    cursor: pointer;
}

#reject-review-btn:hover {
    background-color: #B11515;
}

.adm-review-details .wrapper {
    width: 65%;
    height: 80%;
    padding: 3%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    transition: all 0.3s ease-in;
}

.adm-review-details .customer-info {
    text-align: center;
    margin-bottom: 20px;
}

.adm-review-details .adm-qty-total {
    padding: 10px;
    border-top: 1px solid #33333340;
    font-size: 15px;
}

.adm-review-details th,
td {
    padding: 7px 20px;
}

.adm-review-details td {
    font-size: 14px;
}

.adm-order-details {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #00000097;
    z-index: 9999;
}

.adm-stats-details {
    width: 100%;
    height: 100vh;
    position: absolute;
    background-color: #00000097;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adm-stats-details .wrapper {
    width: 42%;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    transition: all 0.3s ease-in;
}

.adm-stats-details.adm-hide-modal {
    display: none !important;
}

.adm-stats-details .container {
    margin: 0;
    padding: 2rem;
    width: 100%;
    max-height: 80vh;
    overflow: auto;
    position: relative;
}

.adm-stats-details .preload-content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}

.adm-stats-details .preload-content.hide {
    display: none;
}

.adm-stats-details .stats-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.adm-stats-details .stats-header {
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #33660010;
}

.adm-stats-details .stat-item {
    border-left: 4px solid #33660020;
    padding: 1rem;
    box-shadow: var(--bx-shadow);
}

.adm-stats-details .stat-item h3 {
    margin-bottom: 0.5rem;
}

.adm-details-hide {
    display: none;
}

.order-note-wrapper {
    margin: 1.5rem 0 1rem;
    background-color: #00000010;
    padding: 0.5rem;
}

#order-note {
    padding-left: 0.5rem;
}

/* Order Module Details Page */
.adm-order-module-details {
    position: fixed;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000097;
}

.adm-order-module-details.show {
    display: flex;
}

.adm-order-module-details .wrapper {
    width: 50%;
    height: 80%;
    padding: 3%;
    position: relative;
    margin: 0 auto;
    overflow: auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    transition: all 0.3s ease-in;
}

.adm-order-module-details .customer-info {
    text-align: center;
    margin-bottom: 20px;
}

.adm-order-module-details .adm-module-qty-total {
    padding: 10px;
    border-top: 1px solid #33333340;
    font-size: 15px;
}

.adm-order-module-details th,
td {
    padding: 7px 20px;
}

.adm-order-module-details td {
    font-size: 14px;
}

.adm-order-module-details .module-close-details,
.adm-order-module-details .module-print-details {
    width: 100px;
    text-align: center;
    cursor: pointer;
}

.cta-container  {
    width: 100%;
    margin-top: 30px;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.module-details-stamp {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 1rem;
    background-color: #ccc;
    font-size: 11px;
    color: #00000097;
}

/* end */

.adm-details-show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-details {
    cursor: pointer;
}

.adm-order-details .cta-bx {
    width: 100%;
    text-align: center;
}

.adm-order-details .cta-bx .secondary-cta {
    background-color: #ff2727;
    color: #ffffff;
    cursor: pointer;
}

.adm-order-details .cta-bx .secondary-cta:hover {
    background-color: hsl(0, 100%, 48%);
}

.adm-order-details .cta-bx a {
    margin: 0 4px;
}

.adm-order-details .wrapper {
    width: 50%;
    height: 80%;
    padding: 3%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    transition: all 0.3s ease-in;
}

.adm-order-details .customer-info {
    text-align: center;
    margin-bottom: 20px;
}

.adm-order-details .adm-qty-total {
    padding: 10px;
    border-top: 1px solid #33333340;
    font-size: 15px;
}

.adm-order-details th,
td {
    padding: 7px 20px;
}

.adm-order-details td {
    font-size: 14px;
}

.close-details {
    width: 130px;
    text-align: center;
    align-self: center;
    margin-top: 30px;
}

.order-info-link {
    text-decoration: underline;
    /* color: rgb(18, 18, 169); */
    /* color: #285000; */
    /* color: hsl(100, 100%, 12%); */
    cursor: pointer;
    /* color: rgb(51, 102, 0); */
    color: hsl(270, 100%, 40%);
    text-decoration: none;
}

/******** My Account Page ********/

.my-account-section{
    padding: 8rem 0 4rem 0;
    /* height: 80vh; */
    position: relative;
}

.my-account-section .row {
    width: 100%;
    /* height: 70vh; */
    align-items: flex-start;
}

.my-account-section h1 {
    padding-left: 3px;
}

.my-account-section .account-menu {
    width: 20%;
    flex-shrink: 1;
    margin-top: 20px;
    padding: 1rem 10px 1rem 8px;
    border-radius: 8px;
    background-color: #fff;
    align-self: flex-start;
}

.my-account-section .account-menu ul{
    list-style: none;
}

.my-account-section .account-menu li{
    padding: 12px 16px;
    color: #000;
    /* cursor: pointer; */
}

.my-account-section .account-menu li:hover{
    background-color: #285000;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
}

.my-account-section .account-menu-active {
    background-color: #336600;
    box-shadow: var(--bx-shadow);
    color: #fff !important;
    border-radius: 10px;
}

.my-account-section .account-body {
    width: 78%;
    /* height: 100vh; */
    flex-shrink: 3;
    margin-top: 20px;
    border-radius: 8px;
    padding: 1.5rem 2%;
    background-color: #fff;
}

.my-account-section .account-body h4 {
    color: #336600;
    margin-bottom: 2px;
    font-weight: 500;
}

.my-account-section .account-body .account-info {
   margin-left: 2px;
   text-decoration: underline;
   cursor: pointer;
}

.my-account-section .account-body .account-data-row {
    padding: 6px 0;
    margin-bottom: 2px;
}

.my-account-section .account-body .line {
    border-bottom: 1px solid #33333350;
    margin-bottom: 16px;
}

.account-update-btn {
    color: #285000;
}

.account-active-tab{
    display: block !important;
}

#my-profile-body {
    display: none;
}

#my-orders-body {
    display: none;
}

.my-pending-reviews-body {
    display: none;
}

.my-pending-reviews-body h4 {
    border-bottom: 1px solid #33333350;
    padding-bottom: 2px;
    margin-bottom: 16px !important;
}

.my-account-section table {
    font-family: 'Rubik', sans-serif, Arial, sans-serif;
    width: 100%;
    table-layout: fixed;
}

.my-account-section th {
    font-weight: 500;;
}

.my-account-section td,
th {
    padding: 10px 20px;
    /* border-bottom: 1px solid #dddddd; */
    text-align: left;
}

/* MY ACCOUNT - PENDING REVIEWS */

.pending-review-item {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px;
    border: 1px solid #00000010;
    margin-bottom: 10px;
}

#my-pending-reviews .content-box {
    display: flex;
    align-items: center;
}

#my-pending-reviews .text-box {
    margin-left: 12px;
}

#my-pending-reviews .text-box h5 {
    font-size: 16px;
    margin-bottom: 12px;
}

#my-pending-reviews .content-box img {
    width: 100px;
    margin-right: 4px;
}

.rate-product-btn {
    cursor: pointer;
    font-size: 16px;
    border: none;
    outline: none;
    background: transparent;
    color: #285000;
    text-decoration: none;
    text-transform: capitalize;
}

.order-id {
    margin-top: -10px;
    color: #333333;
    font-size: 12px;
    letter-spacing: 0.03em;
}


/******** Blog Post Page 1 ********/

.blog-post {
    padding: 9rem 1rem 4rem 1rem;
}

.blog-post .image-box {
    width: 80vw;
    height: 30vh;
    margin-bottom: 20px;
}

.blog-post #blog-post-1-img-box {
    background-image: url(../Images/recipe-1.jpg);
    background-size: cover;
    background-position: center;
}

.blog-post .row {
    /* width: 70%; */
    margin: 0 auto;
    flex-direction: column;
}

.blog-post .line {
    border-bottom: 1px solid #33333340;
    margin-top: 6px;
}

.blog-post h1 {
    margin-bottom: 8px;
    font-size: 32px;
}

.blog-post h1,
.blog-post h5 {
    padding-left: 20%;
    /* text-align: center; */
}

.blog-post h5, p {
    /* color: #33333398; */
    display: inline-block;
}

.blog-post .headline p {
    color: #33333398;
    font-size: 12px;
    margin-left: 4px;
    /* text-decoration: underline; */
}

.blog-post .content {
    width: 60%;
    margin-top: 25px;
}

.blog-post ul {
    padding-left: 4%;
    margin: 16px 0;
    line-height: 30px;
}

.blog-post .blog-sub-heading {
    margin: 32px 0 16px 0;
    text-transform: capitalize;
}

.blog-post .italic-heading {
    /* font-style: italic; */
    margin: 16px 0;
}

.blog-post .line2 {
    border-bottom: 1px solid #33333340;
    margin-top: 52px;
}

.blog-post #see-more-posts {
    font-style: italic;
    margin-top: 16px;
}

/******** Blog Post Page 2 ********/

.blog-post #blog-post-2-img-box {
    background-image: url(../Images/recipe-2.jpg);
    background-size: cover;
    background-position: center;
}

/******** Blog Post Page 2 ********/

.blog-post #blog-post-3-img-box {
    background-image: url(../Images/recipe-3.png);
    background-size: cover;
    background-position: center;
}

/* SPIKE TAG */
.spike-tag {
    width: 100%;
    padding-top: 1rem;
    margin: 0 0 0 5%;
    color: #33333320;
    text-align: left;
    font-style: italic;
    font-size: 13px;
}

/* PRIVACY POLICY PAGE */

.privacy-policy {
    padding: 9rem 1rem 4rem 1rem;
}

.privacy-policy h1 {
    text-align: center;
    margin-bottom: 2rem;
}

.privacy-policy p, 
.privacy-policy h4, 
.privacy-policy ol {
    margin-bottom: 16px;
}

.privacy-policy ol {
    padding-left: 2%;
}

.privacy-policy h4 {
    font-weight: 600;
}

.privacy-policy .container {
    width: 70%;
    line-height: 32px;
}

/* TERMS & CONDITIONS */

.terms {
    padding: 9rem 1rem 4rem 1rem;
}

.terms h1 {
    text-align: center;
    margin-bottom: 4rem;
}

.terms .row {
    margin-bottom: 2rem;
}

.terms h2 {
    color: var(--bilbao);
}

.terms h2,
.terms p {
    margin-bottom: 16px;
}
.terms .col-2{
    width: 48%;
    align-self: flex-start;
}


/* ====== NEW: SHOP PAGE ====== */

.shop-module {
    position: relative;
    background-color: #AAB69F06;
}

.shop-module .container {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    justify-content: space-between;
    padding: var(--marg-4) 0;
    padding-left: 0;
}

.shop-module ul {
    list-style: none;
}

.shop-module .shop-selection {
    position: sticky;
    top: 20%;
    left: 0;
    padding-right: 8px;
    /* background-color: #ccc; */
}

.ad-promo-box {
    width: 80%;
    height: 40vh;
    overflow: hidden;
    margin-top: 2rem;
    background-color: #ccc;
}

.ad-promo-box img {
    width: 100%;
    display: none;
}

/* ==== NEW CSS === */

/* .shop-module .input-group select {
    font-size: 0.9rem;
    height: 36px;
    padding: 0.5rem;
}

@media (max-width: 768px) {
    .shop-module .banner-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-module .input-group {
        width: 100%;
        margin-top: 1rem;
    }

    .shop-module .shop-selection {
        display: none;
    }
} */



/* ======= */

.shop-module li {
    padding: 0.6rem;
    padding-left: 0;
}

.shop-module li:hover {
    cursor: pointer;
}

.shop-module ._block {
    margin: var(--marg-2) 0;
}

.shop-module .shop-selection ._block h2 {
    color: var(--bilbao);
}

.shop-module .shop-selection ._block a {
    color: var(--black);
    text-decoration: none;
}

.shop-module .shop-selection ._block.category {
    margin-top: 0 !important;
}

.shop-module .shop-selection .title {
    margin-bottom: 1rem;
}

.shop-module .shop-selection {
    width: 20%;
}

.shop-module .products-wrapper {
    width: 100%;
    margin: 0 auto;
}

.shop-module .banner-top {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid #CC993325;
}

/* .shop-module .shop-data {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 2rem;
} */

/* Default - Mobile First */
.shop-module .shop-data {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    margin-top: 2rem;
}

/* Small Desktop */
@media (min-width: 768px) {
    .shop-module .shop-data {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Filter dropdown */

    .dropdown-menu {
        display: none;
    }
}

/* Medium Screens */
@media (min-width: 1024px) {
    .shop-module .shop-data {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Screens */
@media (min-width: 1700px) {
    .shop-module .shop-data {
        grid-template-columns: repeat(4, 1fr);
    }
}

.shop-module .input-group select {
    width: 100%;
    font-size: 16px;
    outline: none;
    text-transform: capitalize;
    border-radius: 4px;
    height: 38px;
    padding: 8px;
    border: 1px solid #33660020;
    margin-bottom: 2rem;
}

.most-popular li {
    display: flex;
    margin-bottom: 1rem;
    align-items: center;
    justify-content: center;
}

.most-popular span {
    width: 100px;
    margin-right: 1rem;
}

.most-popular span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shop Banner */
.ad-promo-banner {
    width: 90%;
    height: 50vh;
    margin: 0 auto;
    background-color: #ccc;
    background-image: url(../Images/test_1_banner.jpg);
    background-size: cover;
    background-position: center;
    display: none;
}









/******** Login Page ********/
/******** Sign Up Page ********/
/******** About Us Page ********/
/******** Contact Page ********/
/******** Blog Page ********/
/******** Single Blog Post Page ********/
/******** Privacy Policy Page ********/