/* Theme Name: Honey Guide Theme
Author: Tinus Pieterse | Bullwhip Design
Author URI: http://www.bullwhipdesign.co.za
Description: Custom Theme for Honey Guide
Version: 1.0
License: All rights reserved */

/* 

/* FONT SIZE SYSTEM (rem)
1 / 1.2 / 1.4 / 1.6 / 1.8 / 2 / 2.4 / 3 / 3.6 / 4.4 / 5.2 / 6.2 / 7.4 / 8.6 / 9.8

SPACING SYSTEM (rem)
0.2 / 0.4 / 0.8 / 1.2 / 1.6 / 2.4 / 3.2 / 4.8 / 6.4 / 8 / 9.6 / 12.8


font-family: "Bebas Neue", sans-serif;
font-family: 'Instrument Serif', serif;

#504C46
#BABAB0
#DDDACD
#AE8971

*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  
  html {
    font-size: 62.5%;
    overflow-x: hidden;
  
    scroll-behavior: smooth;
  }
  
  body {
    background-color: #faf8f6;
    line-height: 1;
    font-weight: 400;
    color: #504c46;
    overflow-x: hidden;
    background-image: url("../img/site-bg.webp");
    background-position: top center;
    background-size: 100%;
  }
  
  /* p,
  ul, */
  .homepage-p {
    font-size: 2.4rem;
    line-height: 1.5;
    margin-bottom: 3.2rem;
  }
  
  /* ************************************** */
  /* REUSABLE COMPONENTS */
  /* ************************************** */
  
  .container {
    max-width: 133.2rem;
    padding: 0 3.2rem;
    margin: 0 auto;
  }
  
  .grid {
    display: grid;
    row-gap: 3.2rem;
    column-gap: 3.2rem;
  }
  
  .grid:not(:last-child) {
    margin-bottom: 9.6rem;
  }
  
  .grid--center--v {
    align-items: center;
  }
  
  .grid--2--cols {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .grid--3--cols {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .grid--4--cols {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--5--cols {
    grid-template-columns: repeat(5, 1fr);
  }
  
  .heading-1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: 12rem;
    color: #f9f9f9;
    text-align: center;
    margin-bottom: 2.4rem;
    text-shadow: 2px 2px 10px rgba(35, 31, 32, 0.2);
  }
  
  .heading-2 {
    font-family: "Instrument Serif", serif;
    font-size: 4.4rem;
    color: #504c46;
    text-align: center;
  
    margin-bottom: 2.4rem;
  }
  
  .heading-3 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1.6rem;
  }
  
  .heading-4 {
    font-size: 3rem;
    margin-bottom: 1.6rem;
    color: #f9f9f9;
  }
  
  /* ************************************** */
  /* HELPER CLASSES */
  /* ************************************** */
  
  .margin-bottom-large {
    margin-bottom: 12.8rem;
  }
  
  .margin-bottom-medium {
    margin-bottom: 3.2rem;
  }
  
  .padding-top-large {
    padding-top: 8rem;
  }
  
  .centre {
    text-align: center;
  }
  
  /* ************************************** */
  /* HEADER SECTION*/
  /* ************************************** */
  
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
  
    height: 9.6rem;
    max-width: 130rem;
    margin-top: 8rem;
  
    position: relative;
  }
  
  .header-logo {
    height: 15rem;
  }
  
  .main-nav-list {
    text-decoration: none;
    list-style: none;
  
    display: flex;
    gap: 3.2rem;
  
    align-items: center;
    font-family: "Instrument Serif", serif;
  }
  
  .main-nav-link {
    text-decoration: none;
  }
  
  .main-nav-link:link,
  .main-nav-link:visited {
    display: inline-block;
    text-decoration: none;
    color: #231f20;
    font-weight: 500;
    transition: all 0.3s;
  }
  
  .main-nav-link:hover,
  .main-nav-link:active {
    color: #ae8971;
  }
  
  .main-nav-link.nav-cta:link,
  .main-nav-link.nav-cta:visited {
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    color: #fff;
    background-color: #ae8971;
  }
  
  .main-nav-link.nav-cta:hover,
  .main-nav-link.nav-cta:active {
    background-color: #ae8971;
  }
  
  /* MOBILE  */
  
  .btn-mobile-nav {
    border: none;
    background: none;
    cursor: pointer;
  
    display: none;
  }
  
  .icon-mobile-nav {
    height: 3rem;
    width: 3rem;
  }
  
  .icon-mobile-nav[name="close-icon"] {
    display: none;
  }
  
  .hidden-logo {
    display: none;
  }
  
  /* ************************************** */
  /* HERO*/
  /* ************************************** */
  
  .section-hero {
    padding: 0 3.2rem;
  }
  
  .main-banner {
    overflow: hidden;
    position: relative;
  
    margin: 0 auto;
    padding: 0 3.2rem;
    width: 1300px;
    height: 700px;
  }
  
  .main-banner .imgban {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    transition: all ease-in-out 500ms;
    -webkit-transition: all ease-in-out 500ms;
    -moz-transition: all ease-in-out 500ms;
    -o-transition: all ease-in-out 500ms;
  
    display: flex;
    flex-direction: column;
  
    align-items: center;
    justify-content: center;
  }
  
  .main-banner #imgban4 {
    background-image: url("../img/Shop-Hero-Center.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .main-banner #imgban3 {
    background-image: url("../img/hero_handbag_bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .main-banner #imgban2 {
    background-image: url("../img/hero_fragrance_bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .main-banner #imgban1 {
    background-image: url("../img/hero_boba_bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  
  .cta-hero:link,
  .cta-hero:visited {
    background-color: #f9f9f9;
    color: #504c46;
    font-family: "Bebas Neue", sans-serif;
    text-decoration: none;
    padding: 1.2rem 2.4rem;
    font-size: 3rem;
    border-radius: 10px;
    box-shadow: 0 2 3 rgba(0, 0, 0, 0.2);
  
    position: absolute;
    bottom: 5%;
  
    transition: all 0.4s;
  }
  
  .cta-hero:hover,
  .cta-hero:active {
    color: #ae8971;
    box-shadow: 2 3 5 rgba(0, 0, 0, 0.5);
  }
  
  .handbag-h1 {
    margin-top: 30rem;
    font-size: 10rem;
  }
  
  .fragrance-h1 {
    margin-top: 25rem;
    text-align: center;
    font-size: 14rem;
  }
  
  .boba-h1 {
    margin-top: 15rem;
    font-size: 22rem;
  }
  
  .coffee-h1 {
    margin-top: 40rem;
    font-size: 15rem;
  }
  
  /* ************************************** */
  /* NEW PRODUCTS */
  /* ************************************** */
  
  .card-name-product {
    margin-top: 9.6rem;
    font-family: "Instrument Serif", serif;
    font-size: 3.6rem;
    margin-bottom: 1.6rem;
    line-height: 1.2;
  
    text-align: center;
  }
  
  .new-product-card {
    border-radius: 8px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.15);
    background-color: #f9f9f9;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.2rem;
    margin-bottom: 6rem;
  
    position: relative;
    transition: all 0.4s;
  }
  
  .new-product-card:hover {
    transform: translatey(-1.2rem);
  }
  
  .card-product-img {
    width: 20rem;
    position: absolute;
    top: -10%;
  }
  
  .card-name-product {
    font-family: "Instrument Serif", serif;
    font-size: 3.6rem;
    margin-bottom: 0;
  }
  
  .card-new-product-description {
    font-family: "Instrument Serif", serif;
    text-align: center;
    margin-bottom: 9.6rem;
  }
  
  .card-btn-product:link,
  .card-btn-product:visited {
    text-decoration: none;
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.4rem;
    color: #f9f9f9;
    background-color: #504c46;
    padding: 1.2rem 2.4rem;
    border-radius: 8px;
  
    position: absolute;
    bottom: 2.4rem;
  
    transition: all 0.4s;
  }
  
  .card-btn-product:hover,
  .card-btn-product:active {
    background-color: #73706b;
  }
  
  /* ************************************** */
  /* CATEGORIES */
  /* ************************************** */
  
  .category-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.2rem;
  }
  
  .fragrance-block,
  .handbag-block,
  .boba-block,
  .coffee-block {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30rem;
    text-shadow: 2px 2px 10px rgba(35, 31, 32, 0.2);
  }
  
  .fragrance-block {
    background-color: #504c46;
    background-image: url("../img/fragrance-blok-bg.webp");
    grid-column: 1 / 3;
  }
  .coffee-block {
    background-color: #504c46;
    background-image: url("../img/coffee-block-bg.webp");
  }
  .handbag-block {
    background-color: #babab0;
    background-image: url("../img/handbag-blok-bg.webp");
  }
  .boba-block {
    background-color: #babab0;
    background-image: url("../img/boba-blok-bg.webp");
    grid-column: 1/3;
  }
  
  .block-hover {
    border-radius: 10px;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: center;
    background-size: 130%;
  
    transition: all 0.4s;
  
    text-decoration: none;
  }
  
  .block-hover:hover {
    background-size: 135%;
    cursor: pointer;
  }
  
  .block-heading {
    color: #f9f9f9;
    font-size: 6.2rem;
    text-align: center;
    box-shadow: 2 2 3 rgba(0, 0, 0, 1);
    font-family: "Instrument Serif", serif;
    margin-bottom: 0;
  }
  
  /* ************************************** */
  /* About Us */
  /* ************************************** */
  
  .about-us-section {
    background-color: #504c46;
  }
  
  .about-container {
    display: grid;
    grid-template-columns: auto 2fr;
    align-items: center;
  }
  
  .about-header {
    text-align: left;
    color: #f9f9f9;
  }
  .about-us-description {
    color: #f9f9f9;
  }
  
  .about-img {
    height: 100%;
  }
  /* ************************************** */
  /* REVIEW SECTION */
  /* ************************************** */
  
  .review-container {
    overflow: hidden;
    position: relative;
  }
  
  .review-wrapper {
    align-items: center;
    justify-content: center;
  }
  
  .review-card {
    border-radius: 8px;
  
    padding: 3.2rem;
    transition: all 0.4s;
  }
  
  .fivestar-card {
    height: 2rem;
  }
  
  .card-name {
    font-family: "Instrument Serif", serif;
    font-size: 3.6rem;
    margin-bottom: 0;
  }
  
  .card-description {
    font-family: "Instrument Serif", serif;
    font-size: 2.4rem;
    margin-bottom: 0.1rem;
  }
  
  .card-btn:link,
  .card-btn:visited {
    text-decoration: none;
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.4rem;
    color: #504c46;
  
    transition: all 0.4s;
  }
  
  .card-btn:hover,
  .card-btn:active {
    color: #73706b;
  }
  
  /* ************************************** */
  /* FORM SECTION */
  /* ************************************** */
  
  .section-cta {
    background-color: #babab0;
    background-image: linear-gradient(
        45deg,
        hsla(60, 7%, 71%, 0.5),
        hsla(60, 7%, 71%, 0.7)
      ),
      url("../img/contact-form-bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 60%;
    /* background-position: 0% 0%; */
  
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
  
  .cta-form-box h2 {
    color: #f9f9f9;
    text-align: left;
    font-family: "Instrument Serif", serif;
  }
  
  .cta-description {
    font-size: 2.4rem;
    color: #504c46;
    margin-bottom: 3.6rem;
    font-family: "Instrument Serif", serif;
  }
  
  .cta-form label {
    display: block;
    font-size: 2.4rem;
    margin-bottom: 0.8rem;
  
    color: #504c46;
    font-family: "Instrument Serif", serif;
  }
  
  .cta-form input,
  select {
    width: 100%;
    padding: 1.2rem;
    border: none;
    border-radius: 10px;
    margin-bottom: 2.4rem;
    background-color: #f9f9f9;
  }
  
  .newsletter-box {
    display: grid;
    grid-template-columns: 1fr 6fr;
  
    align-content: center;
    justify-items: start;
  }
  
  .cta-btn {
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.4rem;
    padding: 0.8rem 2.4rem;
    width: 100%;
    margin-bottom: 1rem;
  
    color: #f9f9f9;
    background-color: #504c46;
    border: none;
  
    border-radius: 10px;
  
    cursor: pointer;
  }
  
  .cta-btn:hover {
    background-color: #504c46;
  }
  
  .form-disclaimer {
    font-size: 1.6rem;
  }
  
  /* ************************************** */
  /* FOOTER SECTION */
  /* ************************************** */
  
  .footer {
    background-color: #504c46;
    color: #f9f9f9;
    height: 55rem;
  }
  
  .footer-wrapper {
    padding-top: 8rem;
  }
  
  .footer-font {
    font-family: "Instrument Serif", serif;
  }
  
  .footer-logo {
    width: 12rem;
    margin-bottom: 3.2rem;
  }
  
  .copy-right {
    font-size: 2rem;
    line-height: 1;
  }
  
  .footer-fix {
    margin-bottom: 0;
  }
  
  .address,
  .footer-link:link,
  .footer-link:visited {
    font-size: 2rem;
    line-height: 2;
    margin-bottom: 0;
    color: #f9f9f9;
  
    text-decoration: none;
  
    transition: all 0.3s;
  }
  
  .footer-link:hover,
  .footer-link:active {
    line-height: 2;
    color: #ae8971;
  
    text-decoration: none;
  }
  
  .social-links-footer {
    list-style: none;
    display: flex;
    flex-direction: row;
    padding-left: 0;
    gap: 2rem;
  }
  
  .social-icon {
    height: 2.4rem;
    width: 2.4rem;
    fill: #f9f9f9;
  
    transition: all 0.3s;
  }
  
  .social-icon:link,
  .social-icon:visited {
    fill: #f9f9f9;
  }
  
  .social-icon:hover,
  .social-icon:active {
    fill: #ae8971;
  }
  
  /* ************************************** */
  /* WHATSAPP BUTTON */
  /* ************************************** */
  
  .float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #504c46;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 0px 0px 10px #ffffff;
    z-index: 100;
  
    transition: all 0.3s;
  }
  
  .float:hover {
    transform: scale(1.1);
    box-shadow: 0px 0px 10px #ffffff;
  }
  
  .my-float {
    margin-top: 16px;
  }
  
  /* ************************************** */
  /* FAQ PAGE */
  /* ************************************** */
  /* ************************************** */
  /* FAQ banner */
  /* ************************************** */
  
  .banner-container {
    background-image: url("https://honeyguideshop.co.za/wp-content/uploads/2026/06/faq-banner.webp");
    background-position: center;
    background-size: cover;
    height: 60vh;
    margin-top: 8rem;
  }
  
  /* ************************************** */
  /* FAQ  */
  /* ************************************** */
  
  .faq-heading {
    text-align: left;
  }
  
  .faq-container {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  
  details {
    font-family: "Instrument Serif", serif;
    border-radius: 8px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.15);
    padding: 2rem 4rem;
    transition: border-color 0.3s ease-in-out;
    background-color: #f9f9f9;
  }
  
  summary {
    user-select: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 2rem;
  }
  
  summary::-webkit-details-marker {
    display: none;
  }
  
  .faq-title {
    text-align: left;
    color: #504c46;
    margin-bottom: 0;
    font-size: 3rem;
    flex-grow: 1;
    opacity: 0.65;
    transition: opacity 250ms ease-in-out;
  }
  
  summary:hover .faq-title {
    opacity: 1;
  }
  
  .faq-content {
    color: #504c46;
    font-size: 2.4rem;
    line-height: 1.5;
    margin-top: 2rem;
    grid-column: 2/3;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }
  
  details[open] .faq-content {
    max-height: 1000px;
  }
  
  .expand-icon {
    margin-left: auto;
    transition: transform 150ms ease-out;
  }
  
  details[open] .icon-tabler-circle-plus {
    display: none;
  }
  
  details:not([open]) .icon-tabler-circle-minus {
    display: none;
  }
  
  .faq-link:link,
  .faq-link:visited {
    text-decoration: none;
    color: #504c46;
    transition: all 0.3s;
  }
  .faq-link:hover,
  .faq-link:active {
    color: #ae8971;
  }
  
  /* ************************************** */
  /* DEVIDE SCREEN SIZE WITH 16*/
  /* ************************************** */
  
  /* ************************************** */
  /* BELOW 1300px */
  /* ************************************** */
  
  @media (max-width: 81.25em) {
    /* HERO  */
  
    .section-hero {
      padding-left: 0;
      padding-right: 0;
    }
  
    .main-banner {
      width: 100%;
    }
  
    /* contact us  */
  
    .section-cta {
      background-position: 60%;
    }
  
    /* FAQ Banner  */
    .banner-container {
      height: 30vh;
    }
  }
  
  /* ************************************** */
  /* BELOW 1260px */
  /* ************************************** */
  
  @media (max-width: 78.75em) {
    /* ABOUT US  */
    .about-img {
      display: none;
    }
    .about-header {
      text-align: center;
    }
  
    .about-us-description {
      text-align: center;
    }
  
    .right-col-about {
      margin-top: 8rem;
      margin-bottom: 6rem;
    }
  }
  
  /* ************************************** */
  /* BELOW 1030px */
  /* ************************************** */
  
  @media (max-width: 64.375em) {
    /* new products */
  
    .new-product-wrapper {
      grid-template-columns: 1fr 1fr;
    }
  
    /* categories  */
  
    .block-hover {
      background-size: 140%;
    }
  
    .block-hover:hover {
      background-size: 145%;
    }
  
    .block-heading {
      font-size: 4.4rem;
    }
  
    /* hero  */
  }
  /* ************************************** */
  /* BELOW 990px */
  /* ************************************** */
  
  @media (max-width: 61.875em) {
    .handbag-h1 {
      font-size: 7.5rem;
    }
  
    .fragrance-h1 {
      margin-top: 25rem;
      font-size: 12rem;
    }
  
    .boba-h1 {
      font-size: 19rem;
    }
    .coffee-h1 {
      font-size: 8rem;
    }
  
    /* reviews */
    .review-grid {
      grid-template-columns: 1fr;
    }
  
    .review-card {
      display: flex;
      flex-direction: column;
      text-align: center;
    }
  
    .fivestar-card {
      display: none;
    }
  }
  
  /* ************************************** */
  /* BELOW 940px */
  /* ************************************** */
  
  @media (max-width: 58.75em) {
    /* categories  */
    .category-wrapper {
      grid-template-columns: 1fr;
    }
  
    .boba-block {
      grid-column: 1/2;
    }
  
    .fragrance-block {
      background-image: url("../img/fragrance-blok-bg.webp");
    }
  
    .block-hover {
      background-size: 190%;
    }
  
    .block-hover:hover {
      background-size: 195%;
    }
  
    /* contact us  */
  
    .section-cta {
      background-image: none;
    }
  
    .cta-form-box h2,
    .cta-description,
    label,
    ::placeholder,
    select,
    .form-disclaimer {
      text-align: center;
    }
  
    .cta-box {
      display: flex;
      flex-direction: column;
    }
    .cta-img-box {
      display: none;
    }
  
    /* MOBILE MENU */
  
    .header {
      margin-top: 2rem;
    }
  
    .hidden-logo {
      display: block;
      height: 8rem;
    }
  
    .header {
      justify-content: space-between;
    }
  
    .btn-mobile-nav {
      display: block;
      z-index: 9999;
    }
  
    .header-logo,
    .nav-devider {
      display: none;
    }
  
    .main-nav {
      background-color: rgba(255, 255, 255, 0.8);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
  
      display: flex;
      align-items: center;
      justify-content: center;
  
      transition: all 0.5s ease-in;
      transform: translatex(100%);
  
      z-index: 9998;
  
      /* HIDE */
      opacity: 0;
  
      /* unaccessible to mouse / keyboard */
      pointer-events: none;
  
      /* hide from screen readers */
      visibility: hidden;
    }
  
    .nav-open .main-nav {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
      transform: translatex(0);
    }
  
    .nav-open .icon-mobile-nav[name="close-icon"] {
      display: block;
    }
  
    .nav-open .icon-mobile-nav[name="hamburger-icon"] {
      display: none;
    }
  
    .main-nav-list {
      flex-direction: column;
      gap: 5rem;
      font-size: 5rem;
    }
  
    /* FAQ Banner  */
    .banner-container {
      height: 20vh;
    }
  }
  
  /* ************************************** */
  /* BELOW 730px */
  /* ************************************** */
  
  @media (max-width: 45.625em) {
    .handbag-h1 {
      font-size: 7rem;
    }
  
    .fragrance-h1 {
      font-size: 9rem;
    }
  
    .boba-h1 {
      font-size: 11rem;
    }
  
    .coffee-h1 {
      font-size: 7rem;
    }
  
    .imgban4 {
      background-position: 200% right;
    }
  }
  
  /* ************************************** */
  /* BELOW 680px */
  /* ************************************** */
  
  @media (max-width: 42.5em) {
    /* FEATURED PRODUCTS */
    .card-new-product-description {
      display: none;
    }
    .card-name-product {
      margin-bottom: 10rem;
    }
  
  }
  
  /* ************************************** */
  /* BELOW 580px */
  /* ************************************** */
  
  @media (max-width: 36.25em) {
    .main-banner #imgban2 {
      background-position: -800px 0px;
    }
  
    /* new products */
  
    .new-product-wrapper {
      grid-template-columns: 1fr;
    }
    /* FAQ Banner  */
    .banner-container {
      height: 15vh;
    }
  }
  
  /* ************************************** */
  /* BELOW 508px */
  /* ************************************** */
  
  @media (max-width: 31.75em) {
    .handbag-h1 {
      font-size: 6rem;
    }
  
    .fragrance-h1 {
      font-size: 7.7rem;
    }
  
    .boba-h1 {
      font-size: 10rem;
    }
    .footer-wrapper {
      grid-template-columns: 1fr;
    }
  
    .footer {
      height: 85rem;
    }
  }
  
  /* ************************************** */
  /* BELOW 420px */
  /* ************************************** */
  
  @media (max-width: 26.25em) {
    .handbag-h1 {
      font-size: 6rem;
    }
  
    .fragrance-h1 {
      font-size: 6rem;
    }
  
    .boba-h1 {
      font-size: 7rem;
    }
  }
  
  /* ************************************** */
  /* BELOW 390px */
  /* ************************************** */
  
  @media (max-width: 24.375em) {
    .block-hover {
      background-size: 160%;
    }
  
    .block-hover:hover {
      background-size: 165%;
    }
  }